| | |
| | | import React, {Component} from 'react' |
| | | import { Chart } from '@antv/g2' |
| | | import { Tabs, Progress } from 'antd' |
| | | import { Progress } from 'antd' |
| | | import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons' |
| | | import './index.scss' |
| | | |
| | | const { TabPane } = Tabs |
| | | |
| | | class DefaultHome extends Component { |
| | | componentDidMount () { |
| | |
| | | { year: '2018 年', sales: 38 }, |
| | | { year: '2019 年', sales: 61 }, |
| | | { year: '2020 年', sales: 45 }, |
| | | { year: '2021 年', sales: 55 }, |
| | | { year: '2022 年', sales: 49 }, |
| | | ] |
| | | const chart = new Chart({ |
| | | container: 'home_page_id', |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <Tabs defaultActiveKey="1"> |
| | | <TabPane tab="维修总数" key="1"> |
| | | <div className="sale-trend ant-col ant-col-xs-16"> |
| | | <div className="home-board"> |
| | | <div className="mk-home-title"> |
| | | <span>维修总数</span> |
| | | </div> |
| | | <div className="mk-home-body"> |
| | | <div className="sale-trend ant-col-left"> |
| | | <div id="home_page_id"></div> |
| | | </div> |
| | | <div className="ant-col ant-col-xs-8"> |
| | | <div className="ant-col-right"> |
| | | <div className="antd-sales-rank"> |
| | | <h4 className="antd-ranking-title">产品排名</h4> |
| | | <ul className="antd-ranking-list"> |
| | |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | </TabPane> |
| | | </Tabs> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | right: 0; |
| | | line-height: 1; |
| | | cursor: default; |
| | | .anticon { |
| | | color: orange; |
| | | } |
| | | } |
| | | } |
| | | .antd-total { |
| | |
| | | } |
| | | } |
| | | } |
| | | .ant-tabs { |
| | | box-sizing: border-box; |
| | | margin: 0; |
| | | padding: 0; |
| | | color: rgba(0, 0, 0, 0.65); |
| | | font-size: 14px; |
| | | font-variant: tabular-nums; |
| | | line-height: 1.5; |
| | | list-style: none; |
| | | font-feature-settings: "tnum"; |
| | | position: relative; |
| | | background: #fff; |
| | | border-radius: 2px; |
| | | transition: all .3s; |
| | | .sale-trend { |
| | | min-height: 400px; |
| | | padding: 10px 20px; |
| | | margin-bottom: 20px; |
| | | } |
| | | .antd-sales-rank { |
| | | padding: 35px 32px 32px 72px; |
| | | .antd-ranking-title { |
| | | font-size: 16px; |
| | | |
| | | .home-board { |
| | | background: #ffffff; |
| | | .mk-home-title { |
| | | border-bottom: 1px solid #e8e8e8; |
| | | margin: 0 0 16px 0; |
| | | span { |
| | | position: relative; |
| | | display: inline-block; |
| | | padding: 12px 16px; |
| | | color: #1890ff; |
| | | } |
| | | .antd-ranking-list { |
| | | margin: 20px 0 0; |
| | | padding: 0; |
| | | list-style: none; |
| | | li { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: 16px; |
| | | zoom: 1; |
| | | .antd-ranking-active { |
| | | display: inline-block; |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-top: 1.5px; |
| | | margin-right: 16px; |
| | | font-weight: 600; |
| | | font-size: 12px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | color: #fff; |
| | | background-color: #314659; |
| | | border-radius: 20px; |
| | | } |
| | | .antd-ranking-number { |
| | | display: inline-block; |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-top: 1.5px; |
| | | margin-right: 16px; |
| | | font-weight: 600; |
| | | font-size: 14px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | } |
| | | .antd-ranking-title { |
| | | flex: 1 1; |
| | | margin-right: 8px; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | color: rgba(0,0,0,.65); |
| | | font-size: 14px; |
| | | line-height: 22px; |
| | | span::after { |
| | | position: absolute; |
| | | content: ' '; |
| | | display: block; |
| | | width: 100%; |
| | | height: 2px; |
| | | background: #1890ff; |
| | | left: 0; |
| | | bottom: -1px; |
| | | } |
| | | } |
| | | |
| | | .mk-home-body { |
| | | .ant-col-left { |
| | | display: inline-block; |
| | | width: 66%; |
| | | vertical-align: top; |
| | | } |
| | | .ant-col-right { |
| | | display: inline-block; |
| | | width: 34%; |
| | | vertical-align: top; |
| | | } |
| | | .sale-trend { |
| | | min-height: 400px; |
| | | padding: 10px 20px; |
| | | margin-bottom: 20px; |
| | | } |
| | | .antd-sales-rank { |
| | | padding: 35px 32px 32px 72px; |
| | | .antd-ranking-title { |
| | | font-size: 16px; |
| | | } |
| | | .antd-ranking-list { |
| | | margin: 20px 0 0; |
| | | padding: 0; |
| | | list-style: none; |
| | | li { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: 16px; |
| | | zoom: 1; |
| | | .antd-ranking-active { |
| | | display: inline-block; |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-top: 1.5px; |
| | | margin-right: 16px; |
| | | font-weight: 600; |
| | | font-size: 12px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | color: #fff; |
| | | background-color: #314659; |
| | | border-radius: 20px; |
| | | } |
| | | .antd-ranking-number { |
| | | display: inline-block; |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-top: 1.5px; |
| | | margin-right: 16px; |
| | | font-weight: 600; |
| | | font-size: 14px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | } |
| | | .antd-ranking-title { |
| | | flex: 1 1; |
| | | margin-right: 8px; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | color: rgba(0,0,0,.65); |
| | | font-size: 14px; |
| | | line-height: 22px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | Api.getCacheConfig(_param).then(result => { |
| | | if (result.status) { |
| | | if (result.LongParam) { |
| | | this.setState({ |
| | | loading: false, |
| | | view: 'custom' |
| | | }) |
| | | let config = '' |
| | | |
| | | try { // 配置信息解析 |
| | | config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = '' |
| | | } |
| | | |
| | | if (!config || !config.enabled) { |
| | | this.setState({ |
| | | loading: false, |
| | | waitMenu: false, |
| | | waitAction: false, |
| | | view: 'default' |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | loading: false, |
| | | view: 'custom' |
| | | }) |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false, |
| | |
| | | } else { |
| | | this.setState({ |
| | | loading: false, |
| | | waitMenu: false, |
| | | waitAction: false, |
| | | view: 'default' |
| | | }) |
| | | notification.warning({ |