2022-10-08

king

2022-10-08 9c6795fd3c44e46cf3955fbfd8f8eeca23acb7a9

 src/tabviews/home/index.jsx

@@ -1,331 +1,114 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
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 {refreshTabView, modifyTabview} from '@/store/action'
// import Api from '@/api'
import { notification, Spin } from 'antd'

import Api from '@/api'
import asyncComponent from '@/utils/asyncComponent'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { TabPane } = Tabs
const DefaultHome = asyncComponent(() => import('./defaulthome'))
const CustomPage = asyncComponent(() => import('@/tabviews/custom'))

class Home extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string, // 菜单Id
    param: PropTypes.object // 菜单参数
  }

  state = {

    loading: true,
    background: sessionStorage.getItem('home_background'),
    waitMenu: true,
    waitAction: true,
    view: ''
  }

  componentDidMount () {
    let myChart = echarts.init(document.getElementById('home'))
    // 绘制图表
    myChart.setOption({
      color: ['#1890ff'],
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : ''        // 默认为直线，可选为：'line' | 'shadow'
    this.loadHomeConfig()
    if (window.GLOB.mkThdMenus.length > 0) {
      this.setState({
        waitMenu: false
      })
    } else {
      MKEmitter.addListener('mkMenuLoaded', this.mkMenuLoaded)
    }
    if (window.GLOB.mkActions.loaded) {
      this.setState({
        waitAction: false
      })
    } else {
      MKEmitter.addListener('mkActionLoaded', this.mkActionLoaded)
    }
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mkMenuLoaded', this.mkMenuLoaded)
    MKEmitter.removeListener('mkActionLoaded', this.mkActionLoaded)
  }

  mkMenuLoaded = () => {
    this.setState({
      waitMenu: false
    })
  }

  mkActionLoaded = () => {
    this.setState({
      waitAction: false
    })
  }

  loadHomeConfig = () => {
    let _param = {
      func: 'sPC_Get_LongParam',
      MenuID: this.props.MenuID
    }
    Api.getCacheConfig(_param).then(result => {
      if (result.status) {
        if (result.LongParam) {
          this.setState({
            loading: false,
            view: 'custom'
          })
        } else {
          this.setState({
            loading: false,
            waitMenu: false,
            waitAction: false,
            view: 'default'
          })
        }
      },
      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]
        }
      ]
      } else {
        this.setState({
          loading: false,
          view: 'default'
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  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>¥ 126,560</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">12%</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">11%</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">￥12,423</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>8,560</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">1,423</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>6,560</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">120</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>87%</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">17%</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">产品1</span>
                    <span>723,234</span>
                  </li>
                  <li>
                    <span className="antd-ranking-active">2</span>
                    <span className="antd-ranking-title">产品2</span>
                    <span>683,434</span>
                  </li>
                  <li>
                    <span className="antd-ranking-active">3</span>
                    <span className="antd-ranking-title">产品3</span>
                    <span>527,264</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">4</span>
                    <span className="antd-ranking-title">产品4</span>
                    <span>493,233</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">5</span>
                    <span className="antd-ranking-title">产品5</span>
                    <span>323,734</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">6</span>
                    <span className="antd-ranking-title">产品6</span>
                    <span>303,934</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">7</span>
                    <span className="antd-ranking-title">产品7</span>
                    <span>227,244</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">8</span>
                    <span className="antd-ranking-title">产品8</span>
                    <span>223,734</span>
                  </li>
                </ul>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
    const { loading, waitAction, waitMenu, view, background } = this.state

    if (loading || waitAction || waitMenu) {
      return (<div className="home-loading-view" style={{background: background}}><Spin className="home-box-spin" size="large" /></div>)
    } else if (view === 'custom') {
      return (<CustomPage MenuID={this.props.MenuID} MenuName="首页"/>)
    } else {
      return (<DefaultHome />)
    }
  }
}

const mapStateToProps = (state) => {
  return {
    // tabviews: state.tabviews
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    // refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
    // modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)
export default Home