mh_jy_safe_web/src/components/CustomPages/BI/BI050BSSafeCheck.js

import React from 'react'
import { connect } from 'dva'
import { initFilter, extendRule, extendInclude, getIsPC } from "../../../utils/common"
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
import { notification, Button, Descriptions } from 'antd';
import echarts from 'echarts';
import styles from '../HI/StepForm.css';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const openNotificationMobile = placement => {
  notification.info({
    duration: 20,
    message: `友情提示：`,
    description:
      '您当前用的是手机在访问，为有更好体验，建议使用电脑访问！',
    placement,
  });
};

class BI050BSSafeCheck extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: {
        titleDate: '      ',
        countPlan: '      ',
        countFinishIntTime: '    ',
        countFinishOutTime: '    ',
        countNotFinish: '    ',
        is1: false,
        is2: false,
        is3: false,
        is4: false,
        is5: false,
      },
      checkType: {
        checkTypeName: [],
        checkTypePersent: [],
      },
      checkTeam: {
        teamName: [],
        countFinish: [],
        countNotFinish: [],
        // finishPersent: [],
      },
    };

    this.reportType = "";
    this.hiddenTop = 10;
    this.jobTop = 10;
    this.teamTop = 8;
  };

  componentDidMount() {
    if (!getIsPC()) {
      openNotificationMobile('bottomRight');
      this.state.displayStr = 'none';
      this.state.displayNum = 24;
      //alert('手机');
    } else {
      this.state.displayStr = '';
      this.state.displayNum = 16;
      //alert('PC');
    }
    this.loadData(1)
    //定时器功能，暂时不开启
    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);

  };
  componentWillUnmount() {
    // this.timerID && clearTimeout(this.timerID);
  }

  //加载数据赋值
  loadData = (dateVal) => {

    // this.className = styles.buttonSearch
    // this.style.
    // this.setState({
    //   data: {
    //     is1: true,
    //     is2: true,
    //   }
    // })

    var orgId = this.props.login ? this.props.login.OrgId : '';
    let json = initFilter(orgId);
    extendRule(json, 'Parameter1', 1, dateVal);//时间类型
    extendRule(json, 'Parameter2', 1, this.props.login.currActivatedMenu.MENU_FORM_PARAMS);//矿类型

    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BISafe/GetShow',
      onComplete: (ret) => {
        if (ret) {
          // debugger
          if (ret.listCheckType != null && ret.listCheckType.length > 0) {
            var checkTypeName = []
            var teamName = []
            var countFinish = []
            var countNotFinish = []
            for (let i = 0; i < ret.listCheckType.length; i++) {
              checkTypeName.push(ret.listCheckType[i].name);
            }

            for (let i = 0; i < ret.listSafeCheck.length; i++) {
              teamName.push(ret.listSafeCheck[i].TEAMNAME);
              countFinish.push(ret.listSafeCheck[i].COUNTCHECK);
              countNotFinish.push(ret.listSafeCheck[i].COUNTPLAN - ret.listSafeCheck[i].COUNTCHECK);
            }

            this.setState({
              data: {
                titleDate: ret.summary.Parameter5,
                countPlan: ret.summary.Count1,// '1200',
                countFinishIntTime: ret.summary.Count2,// '950',
                countFinishOutTime: ret.summary.Count3,//'200',
                countNotFinish: ret.summary.Count4,// '50',
                is1: dateVal == 1 ? true : false,
                is2: dateVal == 5 ? true : false,
                is3: dateVal == 10 ? true : false,
                is4: dateVal == 15 ? true : false,
                is5: dateVal == 20 ? true : false,

              },
              checkType: {
                checkTypeName: checkTypeName,
                checkTypePersent: ret.listCheckType,
              },
              checkTeam: {
                teamName: teamName,
                countFinish: countFinish,
                countNotFinish: countNotFinish,
              }
            })

            //安全检查情况占比
            ChartPieShow(echarts, 'divcCheckType', '安全检查情况占比', checkTypeName, ret.listCheckType);
            //班组安全检查完成率分析
            // ChartColumnShow(echarts, 'divCheckTeam', '班组安全检查完成率分析', teamName, countFinish, countNotFinish);
            ChartBarShow(echarts, 'divCheckTeam', '班组安全检查完成率分析', teamName, countFinish, countNotFinish);
          } else {
            //安全检查情况占比
            ChartPieShow(echarts, 'divcCheckType', '安全检查情况占比', null, null);
            //班组安全检查完成率分析
            ChartBarShow(echarts, 'divCheckTeam', '班组安全检查完成率分析', null, null, null);
          }
        }
      }
    });
  }

  // 搜索
  handleSearch = (item) => {
    this.getBaseInfoData(1, item, null);
  }

  closeModal = () => {
    this.setState({
      searchVisible: false,
      searchTodayVisible: false,
    })
  }

  render() {
    const { data } = this.state;
    return <div>
      <div className='route-home' style={{ padding: '0 10px', minHeight: '500px' }}>
        <h1 className={styles.showPrintHead}>{this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS == "30" ? "矿山部" : "选矿部"} 安全检查情况综合统计分析</h1>
        <h3 style={{ textAlign: 'center' }}>({data.titleDate})</h3>
        <div style={{ width: '100%' }}>
          <ul className={styles.menu} style={{ lineHeight: '35px' }} >
            <li>计划检查数:{data.countPlan}</li>
            <li>按时完成数:{data.countFinishIntTime}</li>
            <li>超时完成数:{data.countFinishOutTime}</li>
            <li>未完成数:<a style={{ color: 'red' }}>{data.countNotFinish}</a></li>
          </ul>
          <ul className={styles.menu} >
            <li><Button className={data?.is1 == true ? styles.buttonSearch : styles.buttonSearchNone} onClick={() => this.loadData(1)}>最近1周</Button></li>
            <li><Button className={data?.is2 == true ? styles.buttonSearch : styles.buttonSearchNone} onClick={() => this.loadData(5)}>最近1月</Button></li>
            <li><Button className={data?.is3 == true ? styles.buttonSearch : styles.buttonSearchNone} onClick={() => this.loadData(10)}>最近3月</Button></li>
            <li><Button className={data?.is4 == true ? styles.buttonSearch : styles.buttonSearchNone} onClick={() => this.loadData(15)}>最近半年</Button></li>
            <li><Button className={data?.is5 == true ? styles.buttonSearch : styles.buttonSearchNone} onClick={() => this.loadData(20)}>最近1年</Button></li>
          </ul>
        </div>
        <table style={{ width: '100%' }}>
          <tbody>
            <tr>
              <td>
                {/* 安碌全检查情况占比 */}
                <div id="divcCheckType" style={{ width: '500px', height: '500px' }}></div>
              </td>
              <td>
                {/* 班组安全检查完成率分析 */}
                <div id="divCheckTeam" style={{ width: '500px', height: '500px' }}></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI050BSSafeCheck)