import React, { useState, useEffect, useRef, Component } from 'react'
import { connect } from 'dva'
import storage from '../utils/storage'
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend } from "../utils/common"
import './home.less'
// 组件库
import { Table, Modal, Row, Col, Icon, Button, Input, DatePicker, Form, Select, notification, Divider, Space, Descriptions,message } from 'antd';

import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";

import FormPage from '../components/FormPage'
import backlog from '../assets/home/backlog.png';
import backlog_i from '../assets/home/backlog_icon.png';
import styles from './dashboard.css';
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import moment from 'moment';
import flow from '../assets/home/flow.png';
import flow_i from '../assets/home/flow_icon.png';
import finished from '../assets/home/finished.png';
import finished_i from '../assets/home/finished_icon.png';
import remind from '../assets/home/remind.png';
import remind_i from '../assets/home/remind_icon.png';
import noticeImg from '../assets/home/noticeImg.jpg';
import scoreImg from '../assets/home/score.jpg';
import echarts from 'echarts';
import config from '../config'

const Option = Select.Option;
const RangePicker = DatePicker.RangePicker

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

const openNotification = placement => {
  notification.info({
    duration: null,
    top: 43,
    message: `签名照上传提示：`,
    description:
      '您还没上传自己的签名照片，请在我的资料中尽快上传您的签名照！',
    placement,
  });
};

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

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isNaN: false,
      scoreVisible: false,
      scoreTotalVisible: false,
      scoreNaVisible: false,
      standardScore: [],
      standardScoreTemp: [],
      standardScoreNaN: [],
      visible: false,
      xlkDisplay: 'none',
      lyxtDisplay: 'none',
      dcjdDisplay: 'none',
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
      pagination: {},
      retData: [],
      chartData: [],
      displayStr: null,
      displayNum: 24,
      columnData: [],
      columnFields: [],
      delayData: [],
      Workbench: {
        StockDetail: [],
        ApprovalCount: 0,
        InComingCount: 0,
        OutingCount: 0,
        ProductingCount: 0
      },//工作台模型
      showLoading: false,        //待办事项数据刷新提示
      searchVisible: false, //弹窗显示
      searchTodayVisible: false, //弹窗显示
      columns: [

      ],
      searchColumns: [

      ],
      scoreColumns: [],
      scoreTotalColumns:[],
      tableData: [{//工作台四个展示模块
        key: '1',
        bgImg: backlog,
        title: window.navigator.userAgent.indexOf("Windows") < 1 ? '待办' : '待办事项',
        total: '0',
        iconImg: backlog_i,
        iconDisplay: 'block',
      },
      {
        key: '4',
        bgImg: remind,
        title: window.navigator.userAgent.indexOf("Windows") < 1 ? '超时' : '待办超时',
        total: '0',
        iconImg: remind_i,
        iconDisplay: 'none',
      },
      {
        key: '2',
        bgImg: flow,
        title: window.navigator.userAgent.indexOf("Windows") < 1 ? '已办' : '已办事项',
        total: '0',
        iconImg: flow_i,
        iconDisplay: 'none',
      },
      {
        key: '3',
        bgImg: finished,
        title: '今日提醒',
        total: '0',
        iconImg: finished_i,
        iconDisplay: 'none',
      }
      ],
      visibleTitle: '',//点击title
      isSearch: false, // 是否搜索
      querySearch: {},//搜索集合
      visibleStartTime: [],
      visibleEndTime: [],
      currentpageIndex: "1",
      departmentName: "",
      isModalVisible: false,
      isModalVisible2: false,
      isModalVisible3: false,
      isModalVisible4: false,
      isModalVisible5: false,
      isModalVisible6: false,
      isModalVisibleRisk: false,
      stardardScoreQty: "0",
    };
    // this.enums = [];
    this.reportType = "";
    this.hiddenTop = 10;
    this.jobTop = 10;
    this.teamTop = 8;
    this.tempTime = moment(new Date()).add(-3, "month").format('YYYY-MM-DD');
  };

  componentDidMount() {
    if (window.navigator.userAgent.indexOf("Windows") < 1) {
      openNotificationMobile('bottomRight');
      this.state.displayStr = 'none';
      this.state.displayNum = 24;
      //alert('手机');
    } else {
      this.state.displayStr = '';
      this.state.displayNum = 16;
      //alert('PC');
    }
    this.state.columns = [
      {
        width: "450px",
        title: '任务名称',
        dataIndex: 'NOTICE_TITLE',
        key: 'NOTICE_TITLE',
        render: (text, record) => (
          <span>
            <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE)}>{record.NOTICE_TITLE}</a>
          </span>
        ),
      },
      {
        title: '开始时间',
        dataIndex: 'TASK_STARTDT',
        key: 'TASK_STARTDT'
      },
      {
        title: '结束时间',
        dataIndex: 'TASK_ENDDT',
        key: 'TASK_ENDDT'
      },
      {
        title: '预警状态',
        dataIndex: 'NOTICE_TYPE',
        key: 'NOTICE_TYPE',
        render: (text, record) => this.ShowState(record)
      },]
    this.getTeam();
    // this.getEnums();
    // this.targetCheck();//班组作业情况(统计图)
    // this.jobType();//岗位风险类别(统计图)
    // this.mainJobPie();//主要工作分布(饼图)
    // this.delayJobBar();// 超期事务(柱状图图) 
    //定时器功能，暂时不开启
    this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
    this.showModalSign();
    this.getBaseInfoData(1, 1, 5);
    this.setMessageData();
    this.state.scoreNoneColumns = [
      {
        width: "50px",
        title: '生产单元',
        dataIndex: 'Nav_ProductionUnit.NAME',
        key: 'Nav_ProductionUnit.NAME',
      },
      {
        width: "50px",
        title: '一级要素',
        dataIndex: 'Nav_Primary.NAME',
        key: 'Nav_Primary.NAME'
      },
      {
        width: "50px",
        title: '二级要素',
        dataIndex: 'Nav_Second.NAME',
        key: 'Nav_Second.NAME'
      },
      {
        width: "50px",
        title: '考评项目',
        dataIndex: 'EVALUATION_ITEM',
        key: 'EVALUATION_ITEM',
        render: (text, record) => (
          <span>
            {this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
          </span>
        ),
      }, {
        // width: "450px",
        title: '考评内容',
        dataIndex: 'CONTENTS',
        key: 'CONTENTS',
      },
      // {
      //   with: '100px',
      //   title: '评分办法',
      //   dataIndex: 'DESCRIPTION',
      //   key: 'DESCRIPTION',
      // },
       {
        width: "50px",
        title: '扣分分值',
        dataIndex: 'NON_STANDARDIZED_SCORE',
        key: 'NON_STANDARDIZED_SCORE',
      },
      // {
      //   with: '50px',
      //   title: '标准分',
      //   dataIndex: 'STANDARDIZED_SCORE',
      //   key: 'STANDARDIZED_SCORE',
      // },
      // {
      //   with: '50px',
      //   title: '实得分',
      //   dataIndex: 'RESULT_SCORE',
      //   key: 'RESULT_SCORE',
      // },
       {
        width: "400px",
        title: '不符合说明',
        dataIndex: 'NON_CONFORMANCE',
        key: 'NON_CONFORMANCE',
      },
      // {
      //   with: '50px',
      //   title: '评价结论',
      //   dataIndex: 'EVALUATION_RESULT',
      //   key: 'EVALUATION_RESULT',
      //   render: (text, record) => (
      //     <span>
      //       {this.props.app.enums?.PEEvaluationResultEnum.enums[record.EVALUATION_RESULT]}
      //     </span>
      //   ),
      // },
      {
        width: "100px",
        title: '评价方法',
        dataIndex: 'Nav_EvaluationMethod',
        key: 'Nav_EvaluationMethod',
        render: (text, record) => (
          <span>{
            record.Nav_EvaluationMethod && record.Nav_EvaluationMethod?.map((item, i) => {
              return <tr><label> {item.Nav_Method?.NAME}</label></tr>
            })
          }</span>
        )
      },
    ]
    this.state.scoreColumns = [
      {
        width: "50px",
        title: '生产单元',
        dataIndex: 'Nav_ProductionUnit.NAME',
        key: 'Nav_ProductionUnit.NAME',
      },
      {
        width: "50px",
        title: '一级要素',
        dataIndex: 'Nav_Primary.NAME',
        key: 'Nav_Primary.NAME'
      },
      {
        width: "50px",
        title: '二级要素',
        dataIndex: 'Nav_Second.NAME',
        key: 'Nav_Second.NAME'
      },
      {
        width: "50px",
        title: '三级要素',
        dataIndex: 'Nav_Three.NAME',
        key: 'Nav_Three.NAME',
      }, {
        width: "50px",
        title: '考评项目',
        dataIndex: 'EVALUATION_ITEM',
        key: 'EVALUATION_ITEM',
        render: (text, record) => (
          <span>
            {this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
          </span>
        ),
      }, {
        // width: "500px",
        title: '考评内容',
        dataIndex: 'CONTENTS',
        key: 'CONTENTS',
      },
      {
        width: "100px",
        title: '评分办法',
        dataIndex: 'DESCRIPTION',
        key: 'DESCRIPTION',
      }, {
        width: "50px",
        title: '标准分',
        dataIndex: 'STANDARDIZED_SCORE',
        key: 'STANDARDIZED_SCORE',
      },
      {
        width: "50px",
        title: '实得分',
        dataIndex: 'RESULT_SCORE',
        key: 'RESULT_SCORE',
      }, 
      {
        width: "200px",
        title: '不符合说明',
        dataIndex: 'NON_CONFORMANCE',
        key: 'NON_CONFORMANCE',
      },
      , {
        width: "50px",
        title: '评价结论',
        dataIndex: 'EVALUATION_RESULT',
        key: 'EVALUATION_RESULT',
        render: (text, record) => (
          <span>
            {this.props.app.enums?.PEEvaluationResultEnum.enums[record.EVALUATION_RESULT]}
          </span>
        ),
      },
      {
        width: "100px",
        title: '评价方法',
        dataIndex: 'Nav_EvaluationMethod',
        key: 'Nav_EvaluationMethod',
        render: (text, record) => (
          <span>{
            record.Nav_EvaluationMethod && record.Nav_EvaluationMethod?.map((item, i) => {
              return <tr><label> {item.Nav_Method?.NAME}</label></tr>
            })
          }</span>
        )
      },
    ],
    this.state.scoreTotalColumns = [
      {
        title: '生产单元',
        dataIndex: 'Nav_ProductionUnit.NAME',
        key: 'Nav_ProductionUnit.NAME',
      },
      {
        title: '标准化得分',
        dataIndex: 'NON_STANDARDIZED_SCORE',
        key: 'NON_STANDARDIZED_SCORE',
      },
      // {
      //   with: '100px',
      //   title: '一级要素',
      //   dataIndex: 'Nav_Primary.NAME',
      //   key: 'Nav_Primary.NAME'
      // },
      // {
      //   with: '50px',
      //   title: '标准分',
      //   dataIndex: 'STANDARDIZED_SCORE',
      //   key: 'STANDARDIZED_SCORE',
      // },
      // {
      //   with: '50px',
      //   title: '实得分',
      //   dataIndex: 'RESULT_SCORE',
      //   key: 'RESULT_SCORE',
      // },
       {
        title: '操作',
        dataIndex: '',
        key: '',
        render: (text, record) => (
          <span>{
             <tr> <Button onClick={() => this.showStandardScoreModal()}>全部</Button>
            <Button onClick={() => this.showStandardScoreModal(1)}>不符合项</Button></tr>
          }</span>
        )
      }
    ]
  };
  componentWillUnmount() {
    this.timerID && clearTimeout(this.timerID);
  }

  showModalSign = () => {
    var userId = storage('lacal').getItem('userid')?.val;   //登录后有存储登录信息
    var orgId = storage('lacal').getItem('webOrgId')?.val;  //登录后有存储登录信息   

    let json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/User/UserSign',    //验证是否有签名照
      onComplete: (ret) => {    //返回查询结果ret
        if (ret) {    //判断是否有记录
          openNotification('topRight');
        }
      }
    });
  };

  getTeam = () => {
    var userId = storage('lacal').getItem('userid')?.val;   //登录后有存储登录信息
    var orgId = storage('lacal').getItem('webOrgId')?.val;  //登录后有存储登录信息   
    if (orgId == '8f1cf418-8bf3-ea3f-7a6d-fc5d61247008') {
      this.setState({
        lyxtDisplay: 'block',
        xlkDisplay: 'none',
        dcjdDisplay: 'none'
      });
    }
    else if (orgId == '8b3c41aa-51b1-7ce9-1879-248a038c1b5c') {
      this.setState({
        lyxtDisplay: 'none',
        xlkDisplay: 'none',
        dcjdDisplay: 'block'
      });
    }
    else {
      this.setState({
        lyxtDisplay: 'none',
        xlkDisplay: 'block',
        dcjdDisplay: 'none'
      });
    }
    let json = initFilter(orgId)
    extendRule(json, 'ID', 1, userId)
    extendInclude(json, 'Nav_Department')
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/User/Get',
      onComplete: (ret) => {
        if (ret && ret.Nav_Department) {
          this.setState({
            departmentName: ret.Nav_Department.NAME
          });
          // this.hiddenDanger();
          this.targetCheck();//班组作业情况(统计图)
          this.departmentCompletion();//班组作业完成率前八(统计图)
          this.workTicket();//工作票完成率前十(统计图)
          this.hiddenDangerDeal();//隐患整改完成率前十(统计图)
          this.riskType();//岗位风险类别(统计图)
          this.riskLevel();//岗位风险等级(饼图)
          this.getStandardScore(ret.MineType);//获取标准化评分
        }
      }
    });
  };
  
  // hiddenDanger wyw
  hiddenDanger = () => {
    const userInfo = storage("lacal").getItem("webUserInfo").val;
    let json = initFilter(this.props.login.OrgId, "", "NUM");
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIHome/GetHomeInfo",
      // payload: json,
      onlyData: false,
      onComplete: (data) => {
        

        if (data && data.IsSuccessful) {
          this.hiddenTop = data.Data.length;

          this.setState({
            dangerList: data.Data,
          });
          this.hiddenDangerDeal();
          // this.hiddenDangerTotal();
          //图标2
        }
      },
    });
  };
  getStandardScore = (MineType) => {
    //标准化得分
    var orgId = storage('lacal').getItem('webOrgId')?.val;  //登录后有存储登录信息   
    let json = initFilter(orgId, MineType)
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'PE/PESafetyEvaluationRecord/HomeGet',
      onComplete: (ret) => {
        if (ret && ret.Nav_Details) {
          this.setState({
            standardScore: ret,
            stardardScoreQty: ret.STANDARDIZED_RESULT//(ret.RESULT_TOTAL / ret.STAND_TOTAL * 100).toFixed(2)
          });
        }
        else
        {
          this.setState({
            standardScore: [],
            stardardScoreQty: 0
          });
        }
      }
    });
  }
  totalTime = () => {
    var orgId = storage('lacal').getItem('webOrgId')?.val;  //登录后有存储登录信息   
    let json = initFilter(orgId)
    extendRule(json, 'SET_TYPE', 1, 85)
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'PT/TimeSet/Get',
      onComplete: (ret) => {
        if (ret) {
          this.tempTime = moment(ret.RUNSETTIME).format('YYYY-MM-DD');
          this.setState({
            isModalVisible2: true
          });
        }
      }
    });
  }
  getEnums = () => {
    this.props.dispatch({
      type: 'app/getDataByGet',
      url: 'PF/Extend/GetAllEnum',
      onComplete: (ret) => {
        if (ret) {
          this.enums = ret;
        }
      }
    });
  };

  //班组作业完成情况统计图
  targetCheck = () => {
    const { departmentName } = this.state;
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, departmentName, "WAITTING_COUNT", "desc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/BIStatiscialAnalysisController/GetClassCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          // let enumsTemp = this.enums;
          // let formTypeEnums = enumsTemp ?enumsTemp.find(item => item.EnumName === "BIFormType"):[];
          let formName = [];
          let wattingQty = [];
          let finishQty = [];
          let totalQty = [];
          let WattingRate = [];
          let finishRate = [];
          // let result = data.Data.filter(t => t.TEAM_NAME == departmentName);
          if (data.Data) {
            data.Data.forEach(item => {
              // let enums = formTypeEnums && formTypeEnums.options?formTypeEnums.options.find(t => t.value === item.FORM_TYPE):[];
              // formName.push(enums?enums.label:item.FORM_TYPE);
              formName.push(item.FORM_NAME);
              wattingQty.push(item.WAITTING_COUNT);
              finishQty.push(item.FINISH_COUNT);
              totalQty.push(item.TOTAL_COUNT);
              let finishRateTemp = (item.FINISH_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
              let WattingRateTemp = (item.WAITTING_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
              finishRate.push(finishRateTemp);
              WattingRate.push(WattingRateTemp);
            })

            var teamPre = data.Data.filter(t => t.FORM_NAME == "班前会议");
            if (teamPre.length === 0) {
              formName.push("班前会议");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamCur = data.Data.filter(t => t.FORM_NAME == "岗位当班");
            if (teamCur.length === 0) {
              formName.push("岗位当班");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamAft = data.Data.filter(t => t.FORM_NAME == "岗位交接班");
            if (teamAft.length === 0) {
              formName.push("岗位交接班");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamAct = data.Data.filter(t => t.FORM_NAME == "班组安全活动记录");
            if (teamAct.length === 0) {
              formName.push("班组安全活动记录");
              finishRate.push(0);
              WattingRate.push(100);
            }
          }
          let targetChecks = document.getElementById('targetCheck');
          if (targetChecks) {
            let myChart = echarts.init(targetChecks);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                // formatter:function (params) {

                //   console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可

                //   let firstParams = params[0];
                //   let sndParams = params[1];
                //   let endParams = params[2];
                //   return firstParams.seriesName +'  ' + firstParams.value +'<br>' +sndParams.seriesName +'  ' + sndParams.value +'<br>' + endParams.seriesName +'  ' + endParams.value;
                // }        
              },
              grid: {
                left: '3%',
                right: '4%',
                top: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {

                  show: true,

                  interval: 0,

                  formatter: '{value} %',  // 给每个数值添加%
                  // fontSize: '22'
                },
              },
              legend: {
                data: ['完成率', '未完成'],
                bottom: '35px'
              },
              yAxis: {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                data: formName,
              },
              series: [
                // {
                //   name: '总数',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: totalQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //         color: 'rgba(128, 128, 128, 0.3)'   
                //     }
                // },
                // },
                // {
                //   name: '已办',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: finishQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //       color: '#5B9BD5',  
                //     }
                // },
                // },
                // {
                //   name: '待办',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: wattingQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //       color: 'rgba(192, 192, 192)',  
                //     }
                // },
                // },
                {
                  name: '完成率',
                  type: 'bar',
                  stack: '总量',
                  // color: '#ED7D31',//#ED7D31、008000、ED7D31
                  data: finishRate.map(item => {
                    return {
                      value: item,
                      label: {
                        show: item > 0 ? true : false,
                        position: 'inside',
                        color: '#fff',
                        formatter: '{c}%',
                        fontSize: '16'
                      },
                      // 每一个条目的样式配置
                      itemStyle: {
                        // barBorderRadius: [0, 34, 34, 0], // 圆角
                        // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          { offset: 0, color: "#9999FF" },//rgba(187,162,227,0.6)
                          { offset: 1, color: "#3366CC" },//rgba(102,140,218,0.6)
                        ]),
                      },
                    }
                  }),//finishRate
                  show: false,
                  // 每一个条目的样式配置
                  itemStyle: {
                    // barBorderRadius: [0, 34, 34, 0], // 圆角
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#9999FF" },//rgba(187,162,227,0.6)
                      { offset: 1, color: "#3366CC" },//rgba(102,140,218,0.6)
                    ]),
                  },
                },
                {
                  name: '未完成',
                  type: 'bar',
                  stack: '总量',
                  // label: {
                  //   show: true,
                  //   position: 'inside',
                  //   color: '#000',
                  //   formatter:'{c}%',
                  //   fontSize: '16'
                  // },
                  color: '#CCCCCC',//#5B9BD5、808080  rgba(192, 192, 192)
                  data: WattingRate
                },

              ],
            });
          }
        }
      }
    });
    //   let data = { "IsSuccessful": true, "Data": 
    //   [{ "FORM_NAME": "班前会议作业情况", "WATTING_COUNT": 0, "FINISH_COUNT": 20, "TOTAL_COUNT": 20}, 
    //   { "FORM_NAME": "岗位当班作业情况", "WATTING_COUNT": 3, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}, 
    //   {"FORM_NAME": "岗位交接班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 8, "TOTAL_COUNT": 0},
    //   {"FORM_NAME": "岗位交接2班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}
    // ], "TotalCount": 0, "ErrorMessage": null }
  }
  //班组作业完成率前八
  departmentCompletion = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, "", "NUM", "desc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/DepartmentCompletionSort/OrderPaged",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.teamTop = data.Data.length;
          // let enumsTemp = this.enums;
          // let formTypeEnums = enumsTemp ?enumsTemp.find(item => item.EnumName === "BIFormType"):[];
          let teamName = [];
          let finishQty = [];
          let wattingQty = [];
          let totalQty = [];
          let finishRate = [];
          let WattingRate = [];
          data.Data.forEach(item => {
            // let enums = formTypeEnums && formTypeEnums.options?formTypeEnums.options.find(t => t.value === item.FORM_TYPE):[];
            // formName.push(enums?enums.label:item.FORM_TYPE);
            teamName.push(item.TEAM_NAME);
            let totalTemp = item.TEAM_TOTAL_COUNT + item.POST_TOTAL_COUNT + item.HANDOVER_TOTAL_COUNT;
            let finishTemp = item.TEAM_FINISH_COUNT + item.POST_FINISH_COUNT + item.HANDOVER_FINISH_COUNT;
            let waittingTemp = totalTemp - finishTemp;
            finishQty.push(finishTemp);
            totalQty.push(totalTemp);
            wattingQty.push(waittingTemp);
            let finishRateTemp = (finishTemp / totalTemp * 100).toFixed(2);
            let WattingRateTemp = (waittingTemp / totalTemp * 100).toFixed(2);
            finishRate.push(finishRateTemp);
            WattingRate.push(WattingRateTemp);
          })
          let departmentCompletions = document.getElementById('departmentCompletion');
          if (departmentCompletions) {
            let myChart = echarts.init(departmentCompletions);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                // formatter:function (params) {

                //   console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可

                //   let firstParams = params[0];
                //   let sndParams = params[1];
                //   let endParams = params[2];
                //   return firstParams.seriesName +'  ' + firstParams.value +'<br>' +sndParams.seriesName +'  ' + sndParams.value +'<br>' + endParams.seriesName +'  ' + endParams.value;
                // }        
              },
              grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '10%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {

                  show: true,

                  interval: 0,

                  formatter: '{value} %',  // 给每个数值添加%
                  // fontSize: '22'
                },
              },
              legend: {
                data: ['完成率', '未完成'],
                bottom: '00px'
              },
              yAxis: {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                data: teamName,
              },
              series: [
                // {
                //   name: '总数',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: totalQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //         color: 'rgba(128, 128, 128, 0.3)'   
                //     }
                // },
                // },
                // {
                //   name: '已办',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: finishQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //       color: '#5B9BD5',  
                //     }
                // },
                // },
                // {
                //   name: '待办',
                //   type: 'bar',
                //   stack: '',
                //   label: {
                //     show: true,
                //     position: 'right',
                //     color: '#000',
                //   },
                //   data: wattingQty,
                //   barGap: '-100%',   
                //   z:-1,
                //   itemStyle: {
                //     normal: {
                //       color: 'rgba(192, 192, 192)',  
                //     }
                // },
                // },
                {
                  name: '完成率',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#fff',
                    formatter: '{c}%',
                    fontSize: '12'
                  },
                  // 每一个条目的样式配置
                  itemStyle: {
                    // barBorderRadius: [0, 34, 34, 0], // 圆角
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#01AEF6" },
                      { offset: 1, color: "#9999FF" },//rgba(16,36,95,0.6)
                    ]),
                  },
                  // color: '#5B9BD5',//#ED7D31、008000、ED7D31
                  data: finishRate,
                  show: false

                },
                {
                  name: '未完成',
                  type: 'bar',
                  stack: '总量',
                  // label: {
                  //   show: true,
                  //   position: 'inside',
                  //   color: '#000',
                  //   formatter:'{c}%',
                  //   fontSize: '16'
                  // },
                  color: '#CCCCCC',//#5B9BD5、808080  rgba(192, 192, 192)
                  data: WattingRate
                },

              ],
            });
          }
        }
      }
    });
    //   let data = { "IsSuccessful": true, "Data": 
    //   [{ "FORM_NAME": "班前会议作业情况", "WATTING_COUNT": 0, "FINISH_COUNT": 20, "TOTAL_COUNT": 20}, 
    //   { "FORM_NAME": "岗位当班作业情况", "WATTING_COUNT": 3, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}, 
    //   {"FORM_NAME": "岗位交接班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 8, "TOTAL_COUNT": 0},
    //   {"FORM_NAME": "岗位交接2班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}
    // ], "TotalCount": 0, "ErrorMessage": null }
  }
  //工作票完成情况统计图
  workTicket = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, "", "NUM");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/WorkTicketCompletion/OrderPaged",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.jobTop = data.Data.length;
          let teamName = [];
          let wattingQty = [];
          let finishQty = [];
          let overFinishQty = [];
          let totalQty = [];
          data.Data.forEach(item => {
            teamName.push(item.TEAM_NAME);
            wattingQty.push(item.WAITTING_COUNT);
            finishQty.push(item.FINISH_COUNT);
            overFinishQty.push(item.OVER_FINISH_COUNT);
            totalQty.push(item.TOTAL_COUNT);
          })
          //图标2
          let workTickets = document.getElementById('workTicket');
          if (workTickets) {
            let myChart = echarts.init(workTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '10%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: teamName,
                axisLine: {
                  show: false,
                  // lineStyle: {
                  //   color: 'rgba(192, 192, 102)'
                  // }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#000',
                  rotate: 40,
                  formatter: function (value) { // 自定义文字超出部分 ...
                    if (value.length > 5) {
                      return `${value.slice(0, 5)}...`;
                    }
                    return value;
                  }
                }
              },
              legend: {
                data: ['正常已办', '超时已办'],
                bottom: '0px'
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisLine: {
                  show: false,
                  // lineStyle: {
                  //   color: 'rgba(192, 192, 102)'
                  // }
                },
                axisTick: {
                  show: false
                },
              },
              series: [
                {
                  name: '总数',
                  type: 'bar',
                  stack: '',
                  label: {
                    show: true,
                    position: 'top',
                    color: '#000',
                  },
                  data: totalQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    normal: {
                      color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
                    }
                  },
                },
                {
                  name: '正常已办',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#000',
                  },
                  emphasis: {//折线图的高亮状态。
                    focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
                  },
                  data: finishQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#01AEF6" },
                      { offset: 1, color: "rgba(16,36,95,0.6)" },//rgba(16,36,95,0.6) #9999FF
                    ]),
                    // normal: {
                    //   color: '#5B9BD5',
                    // }
                  },
                },
                {
                  name: '超时已办',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#000',
                  },
                  emphasis: {//折线图的高亮状态。
                    focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
                  },
                  data: overFinishQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#ED7D31" },
                      { offset: 1, color: "#FFFF33" },//rgba(255,255,0,0.6)
                    ]),
                    // normal: {
                    //   color: '#ED7D31',
                    // }
                  },
                },
              ],
            });
          }
        }
      }
    });
  }
  // //工作票完成情况统计图
  // workTicket = () => {
  //   const userInfo = storage('lacal').getItem('webUserInfo').val;
  //   let json = initFilter(this.props.login.OrgId, "", "NUM");
  //   this.props.dispatch({
  //     type: 'app/getDataByPost',
  //     url: "FM/WorkTicketCompletion/OrderPaged",
  //     payload: json,
  //     onlyData: false,
  //     onComplete: (data) => {
  //       if (data && data.IsSuccessful) {
  //         let teamName = [];
  //         let wattingQty = [];
  //         let finishQty = [];
  //         let overFinishQty = [];
  //         let totalQty = [];
  //         data.Data.forEach(item => {
  //           teamName.push(item.TEAM_NAME);
  //           wattingQty.push(item.WAITTING_COUNT);
  //           finishQty.push(item.FINISH_COUNT);
  //           overFinishQty.push(item.OVER_FINISH_COUNT);
  //           totalQty.push(item.TOTAL_COUNT);
  //         })
  //         //图标2
  //         let myChart = echarts.init(document.getElementById('workTicket'));
  //         // x y 用来设置柱状的大小
  // const offsetX = 12;
  // const offsetY = 6;
  // // 绘制左侧面
  // const CubeLeft = echarts.graphic.extendShape({
  //   shape: {
  //     x: 0,
  //     y: 0
  //   },
  //   buildPath: function (ctx, shape) {
  //     // 会canvas的应该都能看得懂，shape是从custom传入的
  //     const xAxisPoint = shape.xAxisPoint;
  //     // console.log(shape);
  //     const c0 = [shape.x, shape.y];
  //     const c1 = [shape.x - offsetX, shape.y - offsetY];
  //     const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
  //     const c3 = [xAxisPoint[0], xAxisPoint[1]];
  //     ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
  //   }
  // });
  // // 绘制右侧面
  // const CubeRight = echarts.graphic.extendShape({
  //   shape: {
  //     x: 0,
  //     y: 0
  //   },
  //   buildPath: function (ctx, shape) {
  //     const xAxisPoint = shape.xAxisPoint;
  //     const c1 = [shape.x, shape.y];
  //     const c2 = [xAxisPoint[0], xAxisPoint[1]];
  //     const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
  //     const c4 = [shape.x + offsetX, shape.y - offsetY];
  //     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  //   }
  // });
  // // 绘制顶面
  // const CubeTop = echarts.graphic.extendShape({
  //   shape: {
  //     x: 0,
  //     y: 0
  //   },
  //   buildPath: function (ctx, shape) {
  //     const c1 = [shape.x, shape.y];
  //     const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
  //     const c3 = [shape.x, shape.y - offsetX];
  //     const c4 = [shape.x - offsetX, shape.y - offsetY];
  //     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  //   }
  // });
  // // 注册三个面图形
  // echarts.graphic.registerShape('CubeLeft', CubeLeft);
  // echarts.graphic.registerShape('CubeRight', CubeRight);
  // echarts.graphic.registerShape('CubeTop', CubeTop);

  // myChart.setOption({
  //   tooltip: {
  //     show: true,
  //     trigger: 'axis',
  //     axisPointer: {
  //       type: 'shadow'
  //     },
  //     formatter: function (params, ticket, callback) {
  //       const item = params[1];
  //       return item.name + ' : ' + item.value;
  //     }
  //   },
  //   grid: {
  //     top: '12%',
  //     left: '3%',
  //     right: '5%',
  //     bottom: '10%',
  //     containLabel: true
  //   },
  //   xAxis: {
  //     type: 'category',
  //     data: teamName,
  //     axisLine: {
  //       show: false,
  //       lineStyle: {
  //         width: 1,
  //         color: '#344761'
  //       }
  //     },
  //     axisTick: {
  //       show: false
  //     },
  //     axisLabel: {
  //       color: '#000',
  //       rotate: 40,
  //       formatter: function (value) { // 自定义文字超出部分 ...
  //         if (value.length > 5) {
  //           return `${value.slice(0, 5)}...`;
  //         }
  //         return value;
  //       }
  //     }
  //   },
  //   legend: {
  //                 data: ['正常已办', '超时已办'],
  //                 bottom: '0px'
  //            },
  //   yAxis: {
  //     type: 'value',
  //     name: '',
  //     nameTextStyle: {
  //       color: '#fff'
  //     },
  //     axisLine: {
  //       show: false,
  //       lineStyle: {
  //         width: 1,
  //         color: '#344761'
  //       }
  //     },
  //     splitLine: {
  //       show: false,
  //       lineStyle: {
  //         color: '#172749'
  //       }
  //     },
  //     axisTick: {
  //       show: false
  //     },
  //     axisLabel: {
  //       color: '#000'
  //     }
  //   },
  //   series: [
  //     {
  //       type: 'custom',
  //       renderItem: (params, api) => {
  //         const location = api.coord([api.value(0), api.value(1)]);
  //         return {
  //           type: 'group',
  //           children: [
  //             {
  //               type: 'CubeLeft',
  //               barWidth: 20,
  //               shape: {
  //                 api,
  //                 xValue: api.value(0),
  //                 yValue: api.value(1),
  //                 x: location[0],
  //                 y: location[1],
  //                 xAxisPoint: api.coord([api.value(0), 0])
  //               },
  //               style: {
  //                 fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //                   {
  //                     offset: 0,
  //                     color: '#01f0ff'
  //                   },
  //                   {
  //                     offset: 1,
  //                     color: '#005559'
  //                   }
  //                 ])
  //               }
  //             },
  //             {
  //               type: 'CubeRight',
  //               shape: {
  //                 api,
  //                 xValue: api.value(0),
  //                 yValue: api.value(1),
  //                 x: location[0],
  //                 y: location[1],
  //                 xAxisPoint: api.coord([api.value(0), 0])
  //               },
  //               style: {
  //                 fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //                   {
  //                     offset: 0,
  //                     color: '#01f0ff'
  //                   },
  //                   {
  //                     offset: 1,
  //                     color: '#005559'
  //                   }
  //                 ])
  //               }
  //             },
  //             {
  //               type: 'CubeTop',
  //               shape: {
  //                 api,
  //                 xValue: api.value(0),
  //                 yValue: api.value(1),
  //                 x: location[0],
  //                 y: location[1],
  //                 xAxisPoint: api.coord([api.value(0), 0])
  //               },
  //               style: {
  //                 fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //                   {
  //                     offset: 0,
  //                     color: '#01f0ff'
  //                   },
  //                   {
  //                     offset: 1,
  //                     color: '#005559'
  //                   }
  //                 ])
  //               }
  //             }
  //           ]
  //         };
  //       },
  //       data: totalQty
  //     },
  //     {
  //       type: 'bar',
  //       label: {
  //         normal: {
  //           show: true,
  //           position: 'top',
  //           fontSize: 16,
  //           color: '#000',
  //           offset: [0, -5]
  //         }
  //       },
  //       itemStyle: {
  //         color: 'transparent'
  //       },
  //       tooltip: {},
  //       data: totalQty
  //     }
  //   ]
  // });
  //       }
  //     }
  //   });
  // }
  //隐患整改完成情况统计图
  hiddenDangerDeal = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, "", "NUM");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/HiddenDangerRectification/OrderPaged",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.hiddenTop = data.Data.length;
          let teamName = [];
          let wattingQty = [];
          let finishQty = [];
          let overFinishQty = [];
          let totalQty = [];
          let dataList = [];
          data.Data.forEach(item => {
            teamName.push(item.TEAM_NAME);
            wattingQty.push(item.WAITTING_COUNT);
            finishQty.push(item.FINISH_COUNT);
            overFinishQty.push(item.OVER_FINISH_COUNT);
            totalQty.push(item.TOTAL_COUNT);
            dataList.push({ value: item.FINISH_COUNT, name: item.TEAM_NAME })
          })
          //图标2
          let hiddenDangerDeals = document.getElementById('hiddenDangerDeal');
          if (hiddenDangerDeals) {
            let myChart = echarts.init(hiddenDangerDeals);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '10%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: teamName,
                axisLine: {
                  show: false,
                  // lineStyle: {
                  //   color: 'rgba(192, 192, 102)'
                  // }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#000',
                  rotate: 40,
                  formatter: function (value) { // 自定义文字超出部分 ...
                    if (value.length > 5) {
                      return `${value.slice(0, 5)}...`;
                    }
                    return value;
                  }
                }
              },
              legend: {
                data: ['按时完成', '超时完成'],
                bottom: '0px'
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisLine: {
                  show: false,
                  // lineStyle: {
                  //   color: 'rgba(192, 192, 102)'
                  // }
                },
                axisTick: {
                  show: false
                },
              },
              series: [
                {
                  name: '隐患总数',
                  type: 'bar',
                  stack: '',
                  label: {
                    show: true,
                    position: 'top',
                    color: '#000',
                  },
                  data: totalQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    normal: {
                      color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
                    }
                  },
                },
                {
                  name: '按时完成',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#000',
                  },
                  emphasis: {//折线图的高亮状态。
                    focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
                  },
                  data: finishQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#99FF99" },//rgba(128,255,128)
                      { offset: 1, color: "#333366" },//rgba(16,36,95,0.6)
                    ]),
                    // normal: {
                    //   color: '#ED7D31',
                    // }
                  },
                },
                {
                  name: '超时完成',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#000',
                  },
                  emphasis: {//折线图的高亮状态。
                    focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
                  },
                  data: overFinishQty,
                  barGap: '-100%',
                  z: -1,
                  itemStyle: {
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#ED7D31" },
                      { offset: 1, color: "#FFFF33" },//rgba(255,255,0,0.6)
                    ]),
                    // normal: {
                    //   color: '#ED7D31',
                    // }
                  },
                },
              ],
            });
          }
        }
      }
    });
  }
  // //隐患整改完成情况统计图
  // hiddenDangerDeal = () => {
  //   const userInfo = storage('lacal').getItem('webUserInfo').val;
  //   let json = initFilter(this.props.login.OrgId, "", "NUM");
  //   this.props.dispatch({
  //     type: 'app/getDataByPost',
  //     url: "FM/HiddenDangerRectification/OrderPaged",
  //     payload: json,
  //     onlyData: false,
  //     onComplete: (data) => {
  //       if (data && data.IsSuccessful) {
  //         let teamName = [];
  //         let wattingQty = [];
  //         let finishQty = [];
  //         let overFinishQty = [];
  //         let totalQty = [];
  //         let dataList = [];
  //         let bdata = [];
  //         data.Data.forEach(item => {
  //           teamName.push(item.TEAM_NAME);
  //           wattingQty.push(item.WAITTING_COUNT);
  //           finishQty.push(item.FINISH_COUNT);
  //           overFinishQty.push(item.OVER_FINISH_COUNT);
  //           totalQty.push(item.TOTAL_COUNT);
  //           dataList.push({ value: item.TOTAL_COUNT, name: item.TEAM_NAME})
  //           bdata.push(1)
  //         })
  //         //图标2
  //         let myChart = echarts.init(document.getElementById('hiddenDangerDeal'));
  //         myChart.setOption({


  //         });
  //       }
  //     }
  //   });
  // }
  // //隐患整改情况
  // defectTreatment = () => {
  //   const userInfo = storage('lacal').getItem('webUserInfo').val;
  //   let json = initFilter(this.props.login.OrgId);
  //   // this.props.dispatch({
  //   //   type: 'app/getDataByPost',
  //   //   url: "FM/MainRpt/GetRNQCount",
  //   //   payload: json,
  //   //   onlyData: false,
  //   //   onComplete: (data) => {
  //   let data = {
  //     "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "八月", "C_COUNT": 1, "D_COUNT": 2, "W_COUNT": 3, "T_COUNT": 4, "P_COUNT": 5, "C_F_COUNT": 6, "D_F_COUNT": 7, "W_F_COUNT": 5, "T_F_COUNT": 2, "P_F_COUNT": 1 },
  //     { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "九月", "C_COUNT": 4, "D_COUNT": 5, "W_COUNT": 1, "T_COUNT": 3, "P_COUNT": 1, "C_F_COUNT": 4, "D_F_COUNT": 6, "W_F_COUNT": 3, "T_F_COUNT": 3, "P_F_COUNT": 1 },
  //     { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "十月", "C_COUNT": 3, "D_COUNT": 5, "W_COUNT": 2, "T_COUNT": 4, "P_COUNT": 6, "C_F_COUNT": 3, "D_F_COUNT": 1, "W_F_COUNT": 2, "T_F_COUNT": 5, "P_F_COUNT": 2 },
  //     { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "十一月", "C_COUNT": 2, "D_COUNT": 6, "W_COUNT": 3, "T_COUNT": 4, "P_COUNT": 1, "C_F_COUNT": 5, "D_F_COUNT": 3, "W_F_COUNT": 1, "T_F_COUNT": 5, "P_F_COUNT": 3 },
  //     { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "十二月", "C_COUNT": 1, "D_COUNT": 4, "W_COUNT": 5, "T_COUNT": 3, "P_COUNT": 2, "C_F_COUNT": 1, "D_F_COUNT": 3, "W_F_COUNT": 6, "T_F_COUNT": 4, "P_F_COUNT": 4 },
  //     { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "一月", "C_COUNT": 5, "D_COUNT": 6, "W_COUNT": 2, "T_COUNT": 1, "P_COUNT": 2, "C_F_COUNT": 4, "D_F_COUNT": 5, "W_F_COUNT": 2, "T_F_COUNT": 6, "P_F_COUNT": 5 }], "TotalCount": 0, "ErrorMessage": null
  //   }
  //   if (data && data.IsSuccessful) {
  //     let month = [];
  //     let company = [];
  //     let department = [];
  //     let workshop = [];
  //     let team = [];
  //     let personal = [];
  //     data.Data.forEach(item => {
  //       month.push(item.MONTHStr);
  //       company.push(item.C_COUNT);
  //       department.push(item.D_COUNT);
  //       workshop.push(item.W_COUNT);
  //       team.push(item.T_COUNT);
  //       personal.push(item.P_COUNT);
  //     })
  //     let myChart = echarts.init(document.getElementById('defectTreatment'));
  //     myChart.setOption({
  //       // title: {
  //       //   text: '折线图堆叠'
  //       // },
  //       tooltip: {
  //         trigger: 'axis'
  //       },
  //       legend: {
  //         // data: ['部门'],
  //         data: ['公司', '部门', '车间', '班组', '个人'],
  //         bottom: '10px'
  //       },
  //       grid: {
  //         left: '3%',
  //         right: '4%',
  //         top: '3%',
  //         containLabel: true
  //       },
  //       toolbox: {
  //         feature: {
  //           // saveAsImage: {}
  //         }
  //       },
  //       xAxis: {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: month
  //       },
  //       yAxis: {
  //         type: 'value',
  //       },
  //       series: [
  //         {
  //           name: '公司',
  //           type: 'line',
  //           color: '#4b9bf3',
  //           data: company
  //         },
  //         {
  //           name: '部门',
  //           type: 'line',
  //           color: '#d61c7e',
  //           data: department
  //         },
  //         {
  //           name: '车间',
  //           type: 'line',
  //           color: '#6052ea',
  //           data: workshop
  //         }
  //         ,
  //         {
  //           name: '班组',
  //           type: 'line',
  //           color: '#8cc539',
  //           data: team
  //         }
  //         ,
  //         {
  //           name: '个人',
  //           type: 'line',
  //           color: '#FCD149',
  //           data: personal
  //         }
  //       ]
  //     })
  //   }
  //   //   }
  //   // });
  // }

  //岗位风险类别
  jobType = () => {
    let jobTypes = document.getElementById('jobType');
    if (jobType) {
      let myChart = echarts.init(jobTypes);
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}:({d}%)'
        },
        legend: {
          bottom: '0px',
          // left: 'center',
          data: ['高空坠落', '火药爆炸', '机械伤害', '物体打击']
        },
        series: [

          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '42%'],
            label: {
              formatter: '{b}:({d}%)',
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            color: ['#CD0505', '#F6861B', '#FCD149', '#60A9F8'],
            data: [
              { value: 335, name: '高空坠落' },
              { value: 310, name: '火药爆炸' },
              { value: 234, name: '机械伤害' },
              { value: 135, name: '物体打击' },
            ]
          }
        ]
      })
    }
  }
  //风险类别占比
  riskType = () => {
    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/RiskTypeProportion/OrderPaged",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let riskType = []
          let color = []
          let showData = []
          data.Data.forEach(item => {
            riskType.push(item.RISK_TYPE)
            color.push(item.COLOR)
            showData.push({ value: item.COUNT, name: item.RISK_TYPE })
          })
          let riskTypes = document.getElementById('riskType');
          if (riskTypes) {
            let myChart = echarts.init(riskTypes);
            myChart.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{b}:({d}%)'
              },
              legend: {
                bottom: '0px',
                // left: 'center',
                data: riskType
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['30%', '45%'],
                  center: ['45%', '37%'],
                  label: {
                    formatter: '{b}:({d}%)',
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  },
                  color: color,
                  data: showData,
                }
              ]
            })
          }
        }
      }
    });
  }
  //风险等级占比
  riskLevel = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/RiskLevelProportion/OrderPaged",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let riskLevel = []
          let showData = []
          let color = []
          data.Data.forEach(item => {
            riskLevel.push(item.RISK_LEVEL)
            color.push(item.COLOR)
            showData.push({ value: item.COUNT, name: item.RISK_LEVEL })
          })
          let riskLevels = document.getElementById('riskLevel');
          if (riskLevels) {
            let myChart = echarts.init(riskLevels);
            myChart.setOption({
              tooltip: {
                trigger: 'item',
                //formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: '{b} : {c} ({d}%)'
              },
              legend: {
                bottom: '0px',
                data: riskLevel
              },
              series: [
                {
                  name: '主要工作分布',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '42%'],
                  label: {
                    formatter: '{b}:({d}%)',
                  },
                  data: showData,
                  color: color,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      //shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
          }
        }
      }
    });
  }
  //主要工作分布图（饼图）
  mainJobPie = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId);
    // this.props.dispatch({
    //   type: 'app/getDataByPost',
    //   url: "FM/MainRpt/GetPersonalWorkCount",
    //   payload: json,
    //   onlyData: false,
    //   onComplete: (data) => {
    let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "安全检查", "COUNT": 3, "COLOR": "#CD0505" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "作业现场", "COUNT": 2, "COLOR": "#FCD149" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "应急管理", "COUNT": 1, "COLOR": "#60A9F8" }], "TotalCount": 0, "ErrorMessage": null }
    if (data && data.IsSuccessful) {
      let moduleData = []
      let showData = []
      let dataColor = []
      data.Data.forEach(item => {
        moduleData.push(item.MODULE)
        showData.push({ value: item.COUNT, name: item.MODULE })
        dataColor.push(item.COLOR)
      })
      let myChart = echarts.init(document.getElementById('mainJobPie'));
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          //formatter: '{a} <br/>{b} : {c} ({d}%)'
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          data: moduleData
        },
        series: [
          {
            name: '主要工作分布',
            type: 'pie',
            radius: '55%',
            center: ['50%', '42%'],
            label: {
              formatter: '{b}:({d}%)',
            },
            data: showData,
            color: dataColor,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                //shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
    // }
    // });
  }
  //主要工作分布图（柱状图）
  delayJobBar = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId);
    // this.props.dispatch({
    //   type: 'app/getDataByPost',
    //   url: "FM/MainRpt/GetPersonalDelayCount",
    //   payload: json,
    //   onlyData: false,
    //   onComplete: (data) => {
    let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-08-01 00:00:00", "MONTHStr": "八月", "COUNT": 1 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-09-01 00:00:00", "MONTHStr": "九月", "COUNT": 2 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-10-01 00:00:00", "MONTHStr": "十月", "COUNT": 3 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-11-01 00:00:00", "MONTHStr": "十一月", "COUNT": 4 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-12-01 00:00:00", "MONTHStr": "十二月", "COUNT": 5 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2022-01-01 00:00:00", "MONTHStr": "一月", "COUNT": 6 }], "TotalCount": 21, "ErrorMessage": null }
    if (data && data.IsSuccessful) {
      let monthList = []
      let countList = []
      let dataList = []
      data.Data.forEach(item => {
        monthList.push(item.MONTHStr)
        dataList.push({ value: item.COUNT, name: item.MONTHStr })
        countList.push(item.COUNT)
      })
      this.setState({ delayData: dataList });
    }
  }
  //   });
  // }
  loadWorkBench = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val || {};
    if (!userInfo) {
      this.props.dispatch(routerRedux.push('/login'));
      return;
    }
    let json = initQueryFilter(userInfo.ORG_ID, 1, 12, "CREATE_TIME", 1);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BR/PanelInfos/Workbench",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          var tmpCharData = [];
          var tmpColumnData = [];
          var tmpColumnFields = [];
          if (data.Data && data.Data.OrderOnTimes) {
            data.Data.OrderOnTimes.forEach((n) => {
              let dayJson = {
                day: n.Time,
                '交付率': n.Rate,
                '标准': 0.8
              };
              tmpCharData.push(dayJson);
            });
          }

          if (data.Data && data.Data.OrderTotals) {
            data.Data.OrderTotals.forEach((n) => {
              let dayJson = {
                name: n.Name
              }
              if (n.DayCounts) {
                n.DayCounts.forEach((m) => {
                  let day = m.Day.substring(0, 10).replace('-', '').replace('-', '');
                  dayJson[day] = m.Count;
                  if (tmpColumnFields.indexOf(day) < 0) {
                    tmpColumnFields.push(day);
                  }
                });
              }
              tmpColumnData.push(dayJson);
            });
          }

          this.setState({
            Workbench: data.Data ? data.Data : {},
            chartData: tmpCharData,
            columnData: tmpColumnData,
            columnFields: tmpColumnFields
          });
        }

      }
    });
  }
  //获取数据
  getBaseInfoData = (pagination, key, limit) => {
    const current = pagination ? pagination.current : 1
    const json = initFilter(this.props.login.OrgId, "", "", 1, current)
    //extendRule(json, "NOTICE_STATUS", 1, 0);
    const querySearch = this.state.querySearch;
    for (var item in querySearch) {
      if (item == 'searchName') {
        extendRule(json, 'NOTICE_TITLE', 9, querySearch[item])
      }
      if (item == 'searchCode') {
        extendRule(json, 'CODE', 9, querySearch[item])
      }
      if (item == 'startTime1') {
        extendRule(json, 'TASK_STARTDT', 6, querySearch[item])
      }
      if (item == 'startTime2') {
        extendRule(json, 'TASK_STARTDT', 4, querySearch[item])
      }
      if (item == 'endTime1') {
        extendRule(json, 'TASK_ENDDT', 6, querySearch[item])
      }
      if (item == 'endTime2') {
        extendRule(json, 'TASK_ENDDT', 4, querySearch[item])
      }
      if (item == 'searchStatus') {
        extendRule(json, 'NOTICE_STATUS', 1, querySearch[item])
      }
    }
    json.Limit = limit;
    //json.Limit = 10;
    json.Parameter1 = key;  //1待办事项2已办事项3今日新增4待办超时

    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/FMNotificationTask/HomeOrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data.newData) {
          this.state.tableData[0].total = re.Data.todoCount;
          this.state.tableData[1].total = re.Data.timeOverCount;
          this.state.tableData[2].total = re.Data.doneCount;
          this.state.tableData[3].total = re.Data.todayNewCount;

          if (limit != null || limit != undefined) {
            this.setState({
              retData: re.Data.newData,
            })
          } else {
            var pageInfo = {}
            pageInfo.current = current;
            pageInfo.total = Math.ceil(re.Data.TotalCount, 10);
            this.setState({
              retDataAll: re.Data.newData,
              pagination: pageInfo,
            })
          }
        }
      }
    })
  };

  clearData = () => {
    let newtmpData = { ...this.state.tmpData }
    newtmpData["data"].id = '';
    newtmpData["data"].homeReload = false;
    newtmpData.formCode = '';
    this.setState({
      visible: false,
      tmpData: [],//newtmpData
    })
  }
  clearScoreData = () => {
    this.setState({
      scoreVisible: false,
      // standardScore: [],//newtmpData
    })
  }
  clearScoreTotalData = () => {
    this.setState({
      scoreTotalVisible:false
      // standardScore: [],//newtmpData
    })
  }
  clearScoreNaData = () => {
    this.setState({
      scoreNaVisible:false
      // standardScore: [],//newtmpData
    })
  }
  handleCancel = () => { // 退出弹窗
    this.getBaseInfoData(1, this.state.tableKey, 5);
    this.clearData();
  }
  closeModal = () => { // 退出弹窗
    this.clearData();
  }

  showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIController/getVersion',
      onComplete: (ret) => {
        if (ret > config.version) {
          window.localStorage.clear()
          message.success('清除成功，即将重新加载页面', 2, () => {
            setTimeout(() => window.location.reload(true), 500)
          })
        }
      }
    })
    const newtmpData = {
      data: {
        id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
        homeReload: true
      },
      formCode: formCode,
    }
    this.setState({
      noticeTitle: title,
      taskCode: taskCode,
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }
  showTodayModal = (dataId, formCode, TaskID, title, taskCode, taskStartdt, taskStatus) => {


    const newtmpData = {
      data: {
        id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey, noticeTitle: title, taskStartdt: taskStartdt, taskStatus: taskStatus,
        homeReload: true
      },
      formCode: 'PF135',
    }
    this.setState({
      noticeTitle: "今日提醒",
      taskCode: taskCode,
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }

  setMessageData = (dataSource) => {
    const data = dataSource ? dataSource : this.props.taskData;
  }
  //点击切换四个统计模块更改列表数据
  totalModuleClick = (item) => {
    const { tableData } = this.state;
    tableData.map((_item, i) => {
      if (_item.key == item.key) {
        if (item.key == '2') {
          this.state.columns = [
            {
              width: "450px",
              title: '任务名称',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              title: '开始时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              title: '结束时间',
              dataIndex: 'TASK_ENDDT',
              key: 'TASK_ENDDT'
            },
            {
              title: '办结时间',
              dataIndex: 'TASK_DT',
              key: 'TASK_DT',
            },]
        } else if (item.key == '3') {
          this.state.columns = [
            {
              title: '提醒内容',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showTodayModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE, record.TASK_STARTDT, record.NOTICE_STATUS)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              width: "150px",
              title: '提醒时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              width: "150px",
              title: '状态',
              dataIndex: 'NOTICE_STATUS',
              key: 'NOTICE_STATUS',
              render: (text, record) => this.ShowStatus(record)
            },]
        } else {
          this.state.columns = [
            {
              width: "450px",
              title: '任务名称',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              title: '开始时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              title: '结束时间',
              dataIndex: 'TASK_ENDDT',
              key: 'TASK_ENDDT'
            },
            {
              title: '预警状态',
              dataIndex: 'NOTICE_TYPE',
              key: 'NOTICE_TYPE',
              render: (text, record) => this.ShowState(record)
            },]
        }
        _item.iconDisplay = 'block';
        this.setState({
          tableKey: item.key
        })
        if (window.navigator.userAgent.indexOf("Windows") < 1) {
          this.getBaseInfoData(1, item.key, 10);
        } else {
          this.getBaseInfoData(1, item.key, 5);
        }
      } else {
        _item.iconDisplay = 'none';
      }
    });
  };
  // 双击切换四个统计模块获取全部信息
  totalMoonDoubleClick = (item) => {
    const { tableData } = this.state;
    tableData.map((_item) => {
      if (_item.key == item.key) {
        if (item.key == '2') {
          this.state.searchColumns = [
            {
              width: "450px",
              title: '任务名称',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              title: '开始时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              title: '结束时间',
              dataIndex: 'TASK_ENDDT',
              key: 'TASK_ENDDT'
            },
            {
              title: '办结时间',
              dataIndex: 'TASK_DT',
              key: 'TASK_DT',
            },]
          this.setState({
            searchVisible: true,
            searchTodayVisible: false,
            querySearch: {}
          })
        } else if (item.key === '3') {
          this.state.searchColumns = [
            {
              title: '提醒内容',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showTodayModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE, record.TASK_STARTDT, record.NOTICE_STATUS)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              width: "200px",
              title: '提醒时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              width: "150px",
              title: '状态',
              dataIndex: 'NOTICE_STATUS',
              key: 'NOTICE_STATUS',
              render: (text, record) => this.ShowStatus(record)
            },]
          this.setState({
            searchVisible: false,
            searchTodayVisible: true,
            querySearch: {}
          })
        } else {
          this.state.searchColumns = [
            {
              width: "450px",
              title: '任务名称',
              dataIndex: 'NOTICE_TITLE',
              key: 'NOTICE_TITLE',
              render: (text, record) => (
                <span>
                  <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a>
                </span>
              ),
            },
            {
              title: '开始时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              title: '结束时间',
              dataIndex: 'TASK_ENDDT',
              key: 'TASK_ENDDT'
            },
            {
              title: '预警状态',
              dataIndex: 'NOTICE_TYPE',
              key: 'NOTICE_TYPE',
              render: (text, record) => this.ShowState(record)
            },]
          this.setState({
            searchVisible: true,
            searchTodayVisible: false,
            querySearch: {}
          })
        }
      }
    })
    this.setState({
      tableData,
      currentpageIndex: item.key
    }, () => {
      this.getBaseInfoData(1, item.key);
    })
  }
  // 开始时间
  selectChange = (value) => {
    const { querySearch } = this.state
    querySearch.searchStatus = value;
    this.setState({
      querySearch
    }, () => {
    })
  }
  // 开始时间
  startChange = (dates, dateStr) => {
    const { querySearch } = this.state
    if (dates.length != 2) {
      // querySearch['startTime1'] = ''
      // querySearch['startTime2'] = ''
      this.setState({
        visibleStartTime: [],
        querySearch: {}
      })
      return;
    }
    this.state.visibleStartTime = dates
    querySearch.startTime1 = this.state.visibleStartTime[0].format("YYYY-MM-DD HH:mm:ss")
    querySearch.startTime2 = this.state.visibleStartTime[1].format("YYYY-MM-DD HH:mm:ss")
    this.setState({
      querySearch
      // visibleStartTime: dates
    }, () => {
    })
  }
  // 结束时间
  endChange = (dates, dateStr) => {
    const { querySearch } = this.state
    if (dates.length != 2) {
      // querySearch['endTime1'] = ''
      // querySearch['endTime2'] = ''
      this.setState({
        visibleEndTime: [],
        querySearch: {}
      })
      return;
    }
    this.state.visibleEndTime = dates
    querySearch.endTime1 = this.state.visibleEndTime[0].format("YYYY-MM-DD HH:mm:ss")
    querySearch.endTime2 = this.state.visibleEndTime[1].format("YYYY-MM-DD HH:mm:ss")
    this.setState({ querySearch })
  }
  // 搜索
  handleSearch = (item) => {
    this.getBaseInfoData(1, item, null);
  }
  // input输入
  vauleChange = (e) => {
    const { querySearch } = this.state
    if (e.target.value) {
      switch (e.target.name) {
        case 'searchName':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
        case 'searchCode':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
        case 'searchType':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
        case 'searchContent':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
      }
    } else {
      this.setState({ querySearch: {} })
    }
  }
  closeModal = () => {
    this.setState({
      searchVisible: false,
      searchTodayVisible: false,
    })
  }
  ShowState(obj) {
    var thisResult = (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
    if (thisResult > 0) {
      return ('正常');
    } else {
      return (<span style={{ color: 'red' }}>超期</span>);
    }
  }
  ShowStatus(obj) {
    if (obj.NOTICE_STATUS === 0) {
      return (<span style={{ color: 'red' }}>未读</span>);
    } else if(obj.NOTICE_STATUS === 3){
      return ('已读');
    }
    else
    {
      return ('已办');
    }
  }
  handleSelect = (e) => {
    const { querySearch } = this.state
    if (e != undefined) {
      querySearch.status = e
    } else {
      querySearch.status = ''
    }
    this.setState({ querySearch })
  }
  showDescriptionModal = (value) => {
    if (value === "1") {
      this.setState({
        isModalVisible: true
      });
    }
    else if (value === "2") {
      this.totalTime();
    }
    else if (value === "3") {
      this.setState({
        isModalVisible3: true
      });
    }
    else if (value === "4") {
      this.setState({
        isModalVisible4: true
      });
    }
    else if (value === "5") {
      this.setState({
        isModalVisible5: true
      });
    }
    else if (value === "6") {
      this.setState({
        isModalVisible6: true
      });
    }
    else if (value === "risk") {
      this.setState({
        isModalVisibleRisk: true
      });
    }
  };
  closeDescriptionModal = () => {
    this.setState({
      isModalVisible: false,
      isModalVisible2: false,
      isModalVisible3: false,
      isModalVisible4: false,
      isModalVisible5: false,
      isModalVisible6: false,
      isModalVisibleRisk: false,
    });
  };
  showStandardScoreTotalModal = () => {
    // const newtmpData = {
    //   data: {
    //     tempData:this.state.standardScore , onCancel: this.handleCancel,  noticeTitle: "标准化得分明细", 
    //     homeReload: true
    //   },
    //   formCode: 'PF136',
    // }
    this.setState({
      scoreTotalVisible: true
    });
  }
  showStandardScoreModal = (item) => {
    // const newtmpData = {
    //   data: {
    //     tempData:this.state.standardScore , onCancel: this.handleCancel,  noticeTitle: "标准化得分明细", 
    //     homeReload: true
    //   },
    //   formCode: 'PF136',
    // }
    let temp = false;
    if (this.state.standardScore && this.state.standardScore.Nav_Details) {
      this.state.standardScore.Nav_Details.forEach(t => {
        if (t.THREE_ELEMENTS_ID) {
          temp = true;
        }
      });
    }
    if(item)
    {
      let dataTemp=this.state.standardScore.Nav_Details.filter(t=>t.NON_CONFORMANCE !=null && t.NON_CONFORMANCE !="")
      let tmpData = dataTemp.map((item, i) => {
        item['ROW_NO'] = i + 1;
        return item;
      });
      let aa={"CONTENTS":"合计扣分：","NON_STANDARDIZED_SCORE":this.state.standardScore.NON_STANDARDIZED_SCORE}
      tmpData.push(aa)
      this.setState({
        isNaN: temp,
        standardScoreNaN:tmpData,
        scoreNaVisible: true
      });
    }
    else
    {
      let dataTemp=this.state.standardScore.Nav_Details;
      let tmpData = dataTemp.map((item, i) => {
        item['ROW_NO'] = i + 1;
        return item;
      });
      let aa={"DESCRIPTION":"合计：","STANDARDIZED_SCORE":this.state.standardScore.STAND_TOTAL,"RESULT_SCORE":this.state.standardScore.RESULT_TOTAL,"NON_CONFORMANCE":"标准化得分："+this.state.standardScore.STANDARDIZED_RESULT}
      tmpData.push(aa)
      this.setState({
        isNaN: temp,
        standardScoreTemp:tmpData,
        scoreVisible: true
      });
    }
  }
  render() {
    const { tableData } = this.state;
    const thingsData = this.state.delayData;
    const settings = {
      dots: true,
      autoplay: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      className: styles.slideHeight,
      fade: true,
    };
    const empty = (
      <Col md={6} sm={24}></Col>
    );
    return (
      <div className='route-home' style={{ backgroundColor: '#ecf4f6', padding: '0 10px', minHeight: '735px' }}>
        <div style={{ display: 'inline-block' }}>
        <Modal
            visible={this.state.scoreTotalVisible}
            title="标准化得分汇总"
            maskClosable={false}
            onCancel={this.clearScoreTotalData}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.clearScoreTotalData}
          >
            {/* <div>
            <Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(30)}>露天矿</Button>
            <Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(10)}>选矿厂</Button>
            <Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(20)}>尾矿库</Button>
            </div> */}
            <Table
              dataSource={this.state.standardScore.Nav_IngoreDetails}
              columns={this.state.scoreTotalColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.scoreVisible}
            title="标准化得分明细"
            maskClosable={false}
            onCancel={this.clearScoreData}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.clearScoreData}
          >
            <Table
              dataSource={this.state.standardScoreTemp}
              columns={this.state.scoreColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.scoreNaVisible}
            title="不符合项明细"
            maskClosable={false}
            onCancel={this.clearScoreNaData}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.clearScoreNaData}
          >
            <Table
              dataSource={this.state.standardScoreNaN}
              columns={this.state.scoreNoneColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：完成率 = 已办数 / 总数 * 100%</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible2}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：完成率 = (班前会议已办数 + 岗位当班已办数 + 岗位交接已办数) / (班前会议总数 + 岗位当班总数 + 岗位交接总数) * 100%</p>
            <p>统计时间：{this.tempTime} ~ 至今</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible3}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：待办 = 总数 - 正常已办 - 超时已办</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible4}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>公司、部门、车间、班组、个人，每个月的隐患整改数量</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible5}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：占比率= 当前风险类别数量 / 风险类别总数 * 100%</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible6}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：占比率 = 当前风险等级数量 / 风险等级总数 * 100%</p>
          </Modal>

          <Modal title="详细说明" visible={this.state.isModalVisibleRisk}
            closeModal={this.closeDescriptionModal}
            onCancel={this.closeDescriptionModal}
            onOk={this.closeDescriptionModal}
            footer={null}
            style={{ width: '100%', height: '100%', top: "300px" }}
          >
            <p>计算规则：待办 = 隐患总数 - 按时完成 - 超时完成</p>
          </Modal>

        </div>
        <Row gutter={12}>
          {/* 五个图标模块 */}
          <Col span={this.state.displayNum}>
            <Row gutter={10} >
              <Col span={4} style={{ display: this.state.displayStr }}>
                <div style={{ background: `url(${scoreImg}) 0 0 no-repeat`, height: '176px', backgroundSize: '100% 100%', borderRadius: '0px 0px 16px 16px' }}>
                  <div className='score-title-style'>标准化得分</div>
                  <div style={{ textAlign: 'center' }}>
                    <div className='score-num-style' style={{ width: 'auto', fontSize: '30pt', display: 'inline-block', marginTop: '45px' }} onClick={() => this.showStandardScoreTotalModal()}>{this.state.stardardScoreQty}</div>
                    {/* {this.state.stardardScoreQty} */}
                    {/* <div style={{ display: 'inline-block', fontSize: '30pt' }}><Icon type="arrow-up" className='score-icon-style' style={{ fontSize: '20pt', marginTop: '-27px' }} /></div> */}
                  </div>
                </div>
              </Col>
              <Col span={this.state.displayStr ? 24 : 20}>
                <Col span={24}>
                  <div className='slide-style' >
                    <p style={{ display: this.state.xlkDisplay }} className='slide-text-style'>安全第一、综合治理、控制风险、科学发展。</p>
                    <p style={{ display: this.state.lyxtDisplay }} className='slide-text-style'>以人为本、关注健康、依法治企、安全发展。</p>
                    <p style={{ display: this.state.dcjdDisplay }} className='slide-text-style'>安全第一，预防为主，科学管理，持续改进。</p>
                  </div>
                </Col>
                <Row gutter={12} >
                  {
                    tableData.map((item, key) => {
                      return (
                        <Col span={6} key={key}>
                          <div
                            onClick={() => this.totalModuleClick(item)}
                            onDoubleClick={() => this.totalMoonDoubleClick(item)}
                            style={{ padding: '0px', background: `url(${item.bgImg}) 0 0 no-repeat`, height: '126px', backgroundSize: '100% 100%', borderRadius: '10px', cursor: 'pointer' }}
                          >
                            <div className='backlog-title-style'>{item.title}</div>
                            <div className={item.total > 9999 ? 'backlog-style4' : 'backlog-style'}>{item.total}</div>
                            <img src={item.iconImg} className='backlog-icon-style' style={{ display: item.iconDisplay }} />
                          </div>
                        </Col>
                      )
                    })
                  }
                </Row>
              </Col>
            </Row>
          </Col>
          {/* 通知 */}
          <Col span={8} rowSpan={2} style={{ display: this.state.displayStr, height: '100%' }}>
            {/* <div style={{ padding: '0px', background: `url(${noticeImg}) 0 0 no-repeat`, height: '176px', backgroundSize: '100% 100%', borderRadius: '10px' }}>
              <div className='notice-title-style'>通知 <span>更多</span></div>
              <div className='notice-content-style'>
                <div><span>1</span>工程整改截止时间20200622</div>
                <div><span>2</span>工程整改截止时间20200622</div>
                <div><span>3</span>工程整改截止时间20200622</div>
              </div>
            </div> */}
            <div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', padding: '0px', height: '176px' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>{this.state.departmentName}作业完成情况
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("1")}>详细说明</a>
                </span>
              </div>
              <div id="targetCheck" style={{ width: '100%', height: '176px' }}></div>
            </div>
          </Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "14px", height: 'calc((100% - 250px) / 2)', minHeight: '260px' }}>
          {/* 列表 */}
          <Col span={this.state.displayNum} style={{ height: '100%' }}>
            <div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)', overflow: 'auto' }}>
              <Table
                rowKey={e => e.ID}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={this.state.showLoading}
                size="small"
                padding="100px"
              />
            </div>
          </Col>
          <Modal
            visible={this.state.searchVisible}
            zIndex={999}
            title={this.state.visibleTitle}
            maskClosable={false}
            onCancel={this.closeModal}
            footer={false}
            className='antd-modal-fullscreen'
          >
            <div>
              <Form>
                <Row style={{ marginTop: '50px' }}>
                  <Col span={5}>
                    <Form.Item
                      label={'名称'}
                      {...formItemLayout}
                    >
                      <Input
                        value={this.state.querySearch.searchName}
                        placeholder={'请输入任务名称'}
                        name="searchName"
                        onChange={this.vauleChange} />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label={'开始时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.startChange} />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleEndTime}
                        onChange={this.endChange} />
                    </Form.Item>
                  </Col>
                  <Col span={2}>
                    <Button type={'primary'} icon={'search'} onClick={() => this.handleSearch(this.state.currentpageIndex)}>搜索</Button>
                  </Col>
                </Row>
              </Form>
              <Table
                dataSource={this.state.retDataAll}
                columns={this.state.searchColumns}
                pagination={this.state.pagination}
                onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
                loading={this.state.showLoading}
                size="small"
              />
            </div>
          </Modal>
          <Modal
            visible={this.state.searchTodayVisible}
            title={this.state.visibleTitle}
            maskClosable={false}
            zIndex={999}
            onCancel={this.closeModal}
            footer={false}
            className='antd-modal-fullscreen'
          >
            <div>
              <Form>
                <Row style={{ marginTop: '50px' }}>
                  <Col span={5}>
                    <Form.Item
                      label={'提醒内容'}
                      {...formItemLayout}
                    >
                      <Input
                        value={this.state.querySearch.searchName}
                        placeholder={'请输入提醒内容'}
                        name="searchName"
                        onChange={this.vauleChange} />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label={'开始时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.startChange} />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleEndTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.endChange} />
                    </Form.Item>
                  </Col>
                  <Col span={3}>
                    <Form.Item
                      label={'状态'}
                      {...formItemLayout}
                    >
                      <Select
                        value={this.state.querySearch.searchStatus}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.selectChange} >
                        <Option value="0">未读</Option>
                        <Option value="1">已办</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  {/* <Col span={6}>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleEndTime}
                        onChange={this.endChange} />
                    </Form.Item>
                  </Col> */}
                  <Col span={2}>
                    <Button type={'primary'} icon={'search'} onClick={() => this.handleSearch(this.state.currentpageIndex)}>搜索</Button>
                  </Col>
                </Row>
              </Form>
              <Table
                dataSource={this.state.retDataAll}
                columns={this.state.searchColumns}
                pagination={this.state.pagination}
                onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
                loading={this.state.showLoading}
                size="small"
              />
            </div>
          </Modal>
          {/* 岗位风险类别 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
            <div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>班组作业完成率TOP {this.teamTop}
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("2")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="departmentCompletion" style={{ width: '100%', height: '70%' }}></div>
            </div>
          </Col>
        </Row>

        <Row gutter={12} style={{ display: this.state.displayStr, marginTop: "12px", height: 'calc((100% - 250px) / 2)', minHeight: '260px' }}>
          {/* 工作票完成情况前十 */}{/* 隐患整改完成情况排名前十 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
            <div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>工作票完成数TOP {this.jobTop}
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="workTicket" style={{ width: '100%', height: '70%' }}></div>
              {/* <div className="statistical-title-style"><div className="badge-style"></div>隐患整改情况
              <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={()=>this.showDescriptionModal("4")}>详细说明</a>
                    </span>
              </div>
              <br />
              <div id="defectTreatment" style={{ width: '100%', height: '230px' }}></div> */}
            </div>
          </Col>

          {/* 工作票完成情况前十 */}
          {/* <Col span={8} style={{ height: '100%' }}>
            <div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>工作票完成数排名前十</div>
              <div id="workTicket" style={{ width: '100%', height: '230px' }}></div>
            </div>
          </Col> */}
          {/* 隐患整改情况 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
            <div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>隐患整改完成情况TOP {this.hiddenTop}
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="hiddenDangerDeal" style={{ width: '100%', height: '70%' }}></div>
              {/* <div className="statistical-title-style"><div className="badge-style"></div>隐患整改情况
              <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={()=>this.showDescriptionModal("4")}>详细说明</a>
                    </span>
              </div>
              <br />
              <div id="defectTreatment" style={{ width: '100%', height: '230px' }}></div> */}
            </div>
          </Col>
          {/* 风险类别占比、风险等级占比 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }}>
            <div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <Slider {...settings}>
                <div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
                  <div className="statistical-title-style"><div className="badge-style"></div>风险类别占比
                    <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={() => this.showDescriptionModal("5")}>详细说明</a>
                    </span>
                  </div>
                  <div id="riskType" style={{ width: '100%', height: 'calc((100% - 250px) / 2)', minHeight: '230px' }}></div>
                </div>

                <div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
                  <div className="statistical-title-style"><div className="badge-style"></div>风险等级占比
                    <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={() => this.showDescriptionModal("6")}>详细说明</a>
                    </span>
                  </div>
                  <div id="riskLevel" style={{ width: '100%', height: 'calc((100% - 250px) / 2)', minHeight: '230px' }}></div>
                  {/* <Chart height={'230'} width={'100%'} data={thingsData} forceFit>
                    <Axis name="name"></Axis>
                    <Axis name="value"></Axis>
                    <Tooltip crosshairs={{ type: 'y' }}></Tooltip>
                    <Legend />
                    <Geom type="interval" position="name*value" color='#3398DB' tooltip={['name*value', (name, value) => {
                      return {
                        name: '超期数量',
                        value: value
                      };
                    }]}
                    ></Geom>
                  </Chart> */}
                </div>
              </Slider>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
export default connect(({ login, app }) => ({ login, app }))(Home)