import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import echarts from 'echarts/lib/echarts'
|
import 'echarts/lib/chart/bar'
|
import 'echarts/lib/component/tooltip'
|
// import 'echarts/lib/chart/line'
|
// import 'echarts/lib/component/title'
|
// import 'echarts/lib/component/legend'
|
// import 'echarts/lib/component/toolbox'
|
// import 'echarts/lib/component/markPoint'
|
// import 'echarts/lib/component/markLine'
|
import { Icon, Tabs, Slider } from 'antd'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class Home extends Component {
|
static propTpyes = {
|
MenuNo: PropTypes.string, // 菜单参数
|
MenuID: PropTypes.string, // 菜单Id
|
param: PropTypes.object // 菜单参数
|
}
|
|
state = {}
|
|
componentDidMount () {
|
let myChart = echarts.init(document.getElementById('home'))
|
// 绘制图表
|
myChart.setOption({
|
color: ['#1890ff'],
|
tooltip : {
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : '' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis : [
|
{
|
type : 'category',
|
data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
axisTick: {
|
alignWithLabel: true
|
}
|
}
|
],
|
yAxis : [
|
{
|
type : 'value',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: '#d9d9d9',
|
type: 'dashed'
|
}
|
}
|
}
|
],
|
series : [
|
{
|
name:'月维修数',
|
type:'bar',
|
barWidth: '30',
|
data:[30, 52, 200, 334, 390, 330, 220, 170, 220, 290, 350, 410, 440, 530]
|
}
|
]
|
})
|
}
|
|
render() {
|
return (
|
<div className="home-view">
|
<div className="ant-row-flex">
|
<div className="ant-col ant-col-sm-6">
|
<div className="ant-card">
|
<div className="ant-card-body">
|
<div className="antd-chart-card">
|
<div className="antd-chart-top">
|
<div className="antd-meta-wrap">
|
<div className="antd-meta">
|
<span>
|
<span>维修总数</span>
|
</span>
|
<span className="antd-action">
|
<Icon type="info-circle-o" />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed">
|
<div className="antd-trend-item" style={{marginRight: '16px'}}>
|
<span>
|
<span>周同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-up">
|
<Icon type="caret-up" />
|
</span>
|
</div>
|
<div className="antd-trend-item">
|
<span>
|
<span>日同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-down">
|
<Icon type="caret-down" />
|
</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-footer">
|
<div className="antd-field">
|
<span className="antd-label">
|
<span>维修总数</span>
|
</span>
|
<span className="antd-number">100</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="ant-col ant-col-sm-6">
|
<div className="ant-card">
|
<div className="ant-card-body">
|
<div className="antd-chart-card">
|
<div className="antd-chart-top">
|
<div className="antd-meta-wrap">
|
<div className="antd-meta">
|
<span>
|
<span>超时工单</span>
|
</span>
|
<span className="antd-action">
|
<Icon type="info-circle-o" />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed orange">
|
<Slider defaultValue={67} tipFormatter={null} />
|
<div className="mask"></div>
|
</div>
|
</div>
|
<div className="antd-chart-footer">
|
<div className="antd-field">
|
<span className="antd-label">
|
<span>超时工单</span>
|
</span>
|
<span className="antd-number">100</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="ant-col ant-col-sm-6">
|
<div className="ant-card">
|
<div className="ant-card-body">
|
<div className="antd-chart-card">
|
<div className="antd-chart-top">
|
<div className="antd-meta-wrap">
|
<div className="antd-meta">
|
<span>
|
<span>关单</span>
|
</span>
|
<span className="antd-action">
|
<Icon type="info-circle-o" />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed primary">
|
<Slider defaultValue={77} tipFormatter={null} />
|
<div className="mask"></div>
|
</div>
|
</div>
|
<div className="antd-chart-footer">
|
<div className="antd-field">
|
<span className="antd-label">
|
<span>关单</span>
|
</span>
|
<span className="antd-number">100</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="ant-col ant-col-sm-6">
|
<div className="ant-card">
|
<div className="ant-card-body">
|
<div className="antd-chart-card">
|
<div className="antd-chart-top">
|
<div className="antd-meta-wrap">
|
<div className="antd-meta">
|
<span>
|
<span>原件邮寄</span>
|
</span>
|
<span className="antd-action">
|
<Icon type="info-circle-o" />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed">
|
<Slider defaultValue={87} tipFormatter={null} />
|
<div className="mask"></div>
|
</div>
|
</div>
|
<div className="antd-chart-footer">
|
<div className="antd-trend-item" style={{marginRight: '16px'}}>
|
<span>
|
<span>周同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-up">
|
<Icon type="caret-up" />
|
</span>
|
</div>
|
<div className="antd-trend-item">
|
<span>
|
<span>日同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-down">
|
<Icon type="caret-down" />
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Tabs defaultActiveKey="1">
|
<TabPane tab="维修总数" key="1">
|
<div id="home" className="sale-trend ant-col ant-col-xs-16"></div>
|
<div className="ant-col ant-col-xs-8">
|
<div className="antd-sales-rank">
|
<h4 className="antd-ranking-title">产品排名</h4>
|
<ul className="antd-ranking-list">
|
<li>
|
<span className="antd-ranking-active">1</span>
|
<span className="antd-ranking-title">KU699</span>
|
<span>723,234</span>
|
</li>
|
<li>
|
<span className="antd-ranking-active">2</span>
|
<span className="antd-ranking-title">KU110</span>
|
<span>683,434</span>
|
</li>
|
<li>
|
<span className="antd-ranking-active">3</span>
|
<span className="antd-ranking-title">KU110K</span>
|
<span>527,264</span>
|
</li>
|
<li>
|
<span className="antd-ranking-number">4</span>
|
<span className="antd-ranking-title">KU066.9</span>
|
<span>493,233</span>
|
</li>
|
<li>
|
<span className="antd-ranking-number">5</span>
|
<span className="antd-ranking-title">KU079</span>
|
<span>323,734</span>
|
</li>
|
<li>
|
<span className="antd-ranking-number">6</span>
|
<span className="antd-ranking-title">KU153</span>
|
<span>303,934</span>
|
</li>
|
<li>
|
<span className="antd-ranking-number">7</span>
|
<span className="antd-ranking-title">KU151</span>
|
<span>227,244</span>
|
</li>
|
<li>
|
<span className="antd-ranking-number">8</span>
|
<span className="antd-ranking-title">KU720</span>
|
<span>223,734</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Home
|
