import React, {Component} from 'react'
|
import { Chart } from '@antv/g2'
|
import { Tabs, Progress } from 'antd'
|
import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class DefaultHome extends Component {
|
componentDidMount () {
|
const data = [
|
{ year: '2013 年', sales: 38 },
|
{ year: '2014 年', sales: 52 },
|
{ year: '2015 年', sales: 61 },
|
{ year: '2016 年', sales: 55 },
|
{ year: '2017 年', sales: 48 },
|
{ year: '2018 年', sales: 38 },
|
{ year: '2019 年', sales: 61 },
|
{ year: '2020 年', sales: 45 },
|
]
|
const chart = new Chart({
|
container: 'home_page_id',
|
autoFit: true,
|
height: 400,
|
})
|
|
chart.data(data);
|
chart.scale('sales', {
|
nice: true,
|
})
|
|
chart.tooltip({
|
showMarkers: false,
|
shared: true
|
})
|
|
chart.interval().position('year*sales').tooltip(`year*sales`, (name, value) => {
|
return {
|
name: '维修数',
|
value: value
|
}
|
})
|
|
chart.render()
|
}
|
|
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">
|
<InfoCircleOutlined />
|
</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">
|
<CaretUpOutlined />
|
</span>
|
</div>
|
<div className="antd-trend-item">
|
<span>
|
<span>日同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-down">
|
<CaretDownOutlined />
|
</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">
|
<InfoCircleOutlined />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed">
|
<Progress percent={67} showInfo={false} strokeColor="orange"/>
|
</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">
|
<InfoCircleOutlined />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed primary">
|
<Progress percent={77} showInfo={false} strokeColor="#1890ff"/>
|
</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">
|
<InfoCircleOutlined />
|
</span>
|
</div>
|
<div className="antd-total">
|
<span>100</span>
|
</div>
|
</div>
|
</div>
|
<div className="antd-chart-content">
|
<div className="antd-content-fixed">
|
<Progress percent={87} showInfo={false} strokeColor="#13C2C2"/>
|
</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">
|
<CaretUpOutlined />
|
</span>
|
</div>
|
<div className="antd-trend-item">
|
<span>
|
<span>日同比</span>
|
<span className="antd-trend-text">10%</span>
|
</span>
|
<span className="antd-trend-down">
|
<CaretDownOutlined />
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Tabs defaultActiveKey="1">
|
<TabPane tab="维修总数" key="1">
|
<div className="sale-trend ant-col ant-col-xs-16">
|
<div id="home_page_id"></div>
|
</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 DefaultHome
|
