2023-01-17

king

2023-01-17 cc1a76df575c18f0d0ee96e8658461efdce3a918

 src/tabviews/home/defaulthome/index.jsx

@@ -1,9 +1,8 @@
import React, {Component} from 'react'
import { Chart } from '@antv/g2'
import { Icon, Tabs, Slider } 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 () {
@@ -16,6 +15,8 @@
      { 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',
@@ -58,7 +59,7 @@
                          <span>维修总数</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                          <InfoCircleOutlined />
                        </span>
                      </div>
                      <div className="antd-total">
@@ -74,7 +75,7 @@
                          <span className="antd-trend-text">10%</span>
                        </span>
                        <span className="antd-trend-up">
                          <Icon type="caret-up" />
                          <CaretUpOutlined />
                        </span>
                      </div>
                      <div className="antd-trend-item">
@@ -83,7 +84,7 @@
                          <span className="antd-trend-text">10%</span>
                        </span>
                        <span className="antd-trend-down">
                          <Icon type="caret-down" />
                          <CaretDownOutlined />
                        </span>
                      </div>
                    </div>
@@ -111,7 +112,7 @@
                          <span>超时工单</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                          <InfoCircleOutlined />
                        </span>
                      </div>
                      <div className="antd-total">
@@ -120,9 +121,8 @@
                    </div>
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed orange">
                      <Slider defaultValue={67} tipFormatter={null} />
                      <div className="mask"></div>
                    <div className="antd-content-fixed">
                      <Progress percent={67} showInfo={false} strokeColor="orange"/>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
@@ -148,7 +148,7 @@
                          <span>关单</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                          <InfoCircleOutlined />
                        </span>
                      </div>
                      <div className="antd-total">
@@ -158,8 +158,7 @@
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed primary">
                      <Slider defaultValue={77} tipFormatter={null} />
                      <div className="mask"></div>
                      <Progress percent={77} showInfo={false} strokeColor="#1890ff"/>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
@@ -185,7 +184,7 @@
                          <span>原件邮寄</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                          <InfoCircleOutlined />
                        </span>
                      </div>
                      <div className="antd-total">
@@ -195,8 +194,7 @@
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed">
                      <Slider defaultValue={87} tipFormatter={null} />
                      <div className="mask"></div>
                      <Progress percent={87} showInfo={false} strokeColor="#13C2C2"/>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
@@ -206,7 +204,7 @@
                        <span className="antd-trend-text">10%</span>
                      </span>
                      <span className="antd-trend-up">
                        <Icon type="caret-up" />
                        <CaretUpOutlined />
                      </span>
                    </div>
                    <div className="antd-trend-item">
@@ -215,7 +213,7 @@
                        <span className="antd-trend-text">10%</span>
                      </span>
                      <span className="antd-trend-down">
                        <Icon type="caret-down" />
                        <CaretDownOutlined />
                      </span>
                    </div>
                  </div>
@@ -224,12 +222,15 @@
            </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">
@@ -276,8 +277,8 @@
                </ul>
              </div>
            </div>
          </TabPane>
        </Tabs>
          </div>
        </div>
      </div>
    )
  }