import React, { useState, useEffect, useRef, Component } from 'react'
import { connect } from 'dva'
import storage from '../utils/storage'
import { initFilter, extendInclude, extendRule,extendOrder } from "../utils/common"
import './home.less'
// 组件库
import { Table, Modal, Row, Col, Button, Input, DatePicker, Form, Select, notification,  } from 'antd';
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 scoreImg from '../assets/home/score.jpg';
import echarts from 'echarts';

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 = {
      xkLevelData:[],
      ksLevelData:[],
      xkWorkData:[],
      ksWorkData:[],
      xkRiskData:[],
      ksRiskData:[],
      xkHiddenData:[],
      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",
      isNaN:false,
      scoreVisible:false,
      standardScore:[],
      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: [
        {
            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)
          },
      ],
      searchColumns: [

      ],
      scoreColumns:[{
        with:'50px',
        title: '生产单元',
        dataIndex: 'Nav_ProductionUnit.NAME',
        key: 'Nav_ProductionUnit.NAME',
      },
      {
        with:'100px',
        title: '一级要素',
        dataIndex: 'Nav_Primary.NAME',
        key: 'Nav_Primary.NAME'
      },
      {
        with:'100px',
        title: '二级要素',
        dataIndex: 'Nav_Second.NAME',
        key: 'Nav_Second.NAME'
      },
      {
        with:'100px',
        title: '三级要素',
        dataIndex: 'Nav_Three.NAME',
        key: 'Nav_Three.NAME',
      },{
        with:'50px',
        title: '考评项目',
        dataIndex: 'EVALUATION_ITEM',
        key: 'EVALUATION_ITEM',
        render: (text, record) => (
          <span>
            {this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
          </span>
        ),
      },{
        title: '考评内容',
        dataIndex: 'CONTENTS',
        key: 'CONTENTS',
      },{
        with:'50px',
        title: '标准分',
        dataIndex: 'STANDARDIZED_SCORE',
        key: 'STANDARDIZED_SCORE',
      },
      {
        with:'50px',
        title: '实得分',
        dataIndex: 'RESULT_SCORE',
        key: 'RESULT_SCORE',
      },{
        with:'100px',
        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_ITEM]}
          </span>
        ),
      },
      {
        with:'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>
      )
      },],
      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',
      }
      ],
      scoreNoneColumns : [
        {
          with:'50px',
          title: '生产单元',
          dataIndex: 'Nav_ProductionUnit.NAME',
          key: 'Nav_ProductionUnit.NAME',
        },
        {
          with:'100px',
          title: '一级要素',
          dataIndex: 'Nav_Primary.NAME',
          key: 'Nav_Primary.NAME'
        },
        {
          with:'100px',
          title: '二级要素',
          dataIndex: 'Nav_Second.NAME',
          key: 'Nav_Second.NAME'
        },
        {
          with:'50px',
          title: '考评项目',
          dataIndex: 'EVALUATION_ITEM',
          key: 'EVALUATION_ITEM',
          render: (text, record) => (
            <span>
              {this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
            </span>
          ),
        },{
          title: '考评内容',
          dataIndex: 'CONTENTS',
          key: 'CONTENTS',
        },{
          with:'50px',
          title: '标准分',
          dataIndex: 'STANDARDIZED_SCORE',
          key: 'STANDARDIZED_SCORE',
        },
        {
          with:'50px',
          title: '实得分',
          dataIndex: 'RESULT_SCORE',
          key: 'RESULT_SCORE',
        },{
          with:'100px',
          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_ITEM]}
            </span>
          ),
        },
        {
          with:'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.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.getEnums();
    this.getTeam();
    //定时器功能，暂时不开启
    this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
    this.showModalSign();
    this.getBaseInfoData(1, 1, 5);
    this.setMessageData();
  };
  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.targetCheck();//班组作业情况(统计图)
          this.departmentCompletion();//班组作业完成率前八(统计图)
          this.workTicket();//工作票完成率前十(统计图)
          this.hiddenDanger();//隐患整改完成率前十(统计图)
          this.hiddenDangerTop();//高频隐患Top8(统计图)
          // this.riskType();//岗位风险类别(统计图)
          // this.riskLevel();//岗位风险等级(饼图)
          this.getRiskLevel();//岗位风险等级(饼图)
          this.riskProfile();//
          this.riskDeal();
          this.getStandardScore(ret.MineType);//获取标准化评分
          this.ksRun();
          this.xkRun();
        }
      }
    });
  };
  //矿山
  ksRun = () => {
    let json = initFilter(this.props.login.OrgId);
    extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/DepartmentMonthRun/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data && data.IsSuccessful) {
      let month = [];
      let company = [];
      let department = [];
      data.Data.forEach(item => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      })
      let myChart = echarts.init(document.getElementById('ksRun'));
      myChart.setOption({
        // title: {
        //     text: "矿山部-安全生产标准化运行走势图",
        //     left: 'center'
        //   },
        tooltip: {
          trigger: 'axis',
        //   formatter: function (params) {
        //     let temp=''
        //     params.forEach(t=>{
        //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';
               
        //     })
        //     return temp;
        //   }
        },
        legend: {
          // data: ['部门'],
          data: ['完成率', '及时完成率'],
          bottom: '10px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
        },
        series: [
          {
            name: '完成率',
            type: 'line',
            color: '#4b9bf3',
            data: company,
            smooth: true
          },
          {
            name: '及时完成率',
            type: 'line',
            color: '#FCD149',
            data: department,
            smooth: true
          },
         
        ]
      })
    }
      }
    });
  }
  //选矿
   xkRun = () => {
    let json = initFilter(this.props.login.OrgId);
    extendRule(json, 'DEPARTMENT_NAME', 1, "选矿部");
    extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/DepartmentMonthRun/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data && data.IsSuccessful) {
      let month = [];
      let company = [];
      let department = [];
      data.Data.forEach(item => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      })
      let myChart = echarts.init(document.getElementById('xkRun'));
      myChart.setOption({
        // title: {
        //     text: "选矿部-安全生产标准化运行走势图",
        //     padding: [0,100,100,100],
        //     left: 'center'
        //   },
        tooltip: {
          trigger: 'axis',
        //   formatter: function (params) {
        //     let temp=''
        //     params.forEach(t=>{
        //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';
               
        //     })
        //     return temp;
        //   }
        },
        legend: {
          // data: ['部门'],
          data: ['完成率', '及时完成率'],
          bottom: '10px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
        },
        series: [
          {
            name: '完成率',
            type: 'line',
            color: '#4b9bf3',
            data: company,
            smooth: true
          },
          {
            name: '及时完成率',
            type: 'line',
            color: '#FCD149',
            data: department,
            smooth: true
          },
         
        ]
      })
    }
      }
    });
  }
  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.RESULT_TOTAL/ret.STAND_TOTAL*100).toFixed(2)
          });
        }
      }
    });
  }
  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, "", "WAITTING_COUNT", "desc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/DepartmentCompletion/OrderEntities",
      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 (result) {
            result.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 = result.filter(t => t.FORM_NAME == "班前会议");
            if (teamPre.length === 0) {
              formName.push("班前会议");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamCur = result.filter(t => t.FORM_NAME == "岗位当班");
            if (teamCur.length === 0) {
              formName.push("岗位当班");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamAft = result.filter(t => t.FORM_NAME == "岗位交接班");
            if (teamAft.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'
                },       
              },
              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: '总量',
                  // 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
                },

              ],
            });
          }
        }
      }
    });
  }
  //班组作业完成率前八
  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'
                },
              },
              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: '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
                },

              ],
            });
          }
        }
      }
    });
  }
  //工作票完成情况统计图
  // 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, "", "");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/JobProfile/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.jobTop = data.Data.length;
          let ksteamName = [];
          let ksfinishQty = [];
          let ksData=data.Data.filter(t=>t.MineType===30 && t.RiskCount!=0)
          let ksTempData=data.Data.filter(t=>t.MineType===30)
          ksData.forEach(item => {
            ksteamName.push(item.JobName);
            ksfinishQty.push(item.RiskCount);
          })
          //图标2
          let workTickets = document.getElementById('workTicket');
          if (workTickets) {
            let myChart = echarts.init(workTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                // show:false,
                top:'10%',
                right:'5%',
                bottom:'20%',
                left:'55%'
              },
              xAxis: {
                data: ksteamName,
                                axisLabel: {
                                  color: '#000',
                                  rotate: 10,
                                  formatter: function (value) { // 自定义文字超出部分 ...
                                    if (value.length > 5) {
                                      return `${value.slice(0, 5)}...`;
                                    }
                                    return value;
                                  }
                                },
                // axisLabel: {
                //   inside: true,
                //   color: '#fff'
                // },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                z: 10
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#999'
                }
              },
              dataZoom: [
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'bar',
                  showBackground: true,
                  label: {
                                      show: true,
                                      position: 'inside',
                                      color: '#fff',
                                    },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#83bff6' },
                      { offset: 0.5, color: '#188df0' },
                      { offset: 1, color: '#188df0' }
                    ])
                  },
                  emphasis: {
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                      ])
                    }
                  },
                  data: ksfinishQty,
                  barWidth: '15px',
                  barGap:'1%',
                  // barCategoryGap:'15%'
                }
              ]
            });
          }
          let xkteamName = [];
          let xkfinishQty = [];
          let xkData=data.Data.filter(t=>t.MineType===10 && t.RiskCount!=0)
          let xkTempData=data.Data.filter(t=>t.MineType===10)
          xkData.forEach(item => {
            xkteamName.push(item.JobName);
            xkfinishQty.push(item.RiskCount);
          })
          //图标2
          let xkworkTickets = document.getElementById('xkworkTicket');
          if (xkworkTickets) {
            let myChart = echarts.init(xkworkTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                // show:false,
                top:'10%',
                right:'5%',
                bottom:'20%',
                left:'55%'
              },
              xAxis: {
                data: xkteamName,
                                axisLabel: {
                                  color: '#000',
                                  rotate: 10,
                                  formatter: function (value) { // 自定义文字超出部分 ...
                                    if (value.length > 5) {
                                      return `${value.slice(0, 5)}...`;
                                    }
                                    return value;
                                  }
                                },
                // axisLabel: {
                //   inside: true,
                //   color: '#fff'
                // },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                z: 10
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#999'
                }
              },
              dataZoom: [
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'bar',
                  showBackground: true,
                  label: {
                                      show: true,
                                      position: 'inside',
                                      color: '#fff',
                                    },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#83bff6' },
                      { offset: 0.5, color: '#188df0' },
                      { offset: 1, color: '#188df0' }
                    ])
                  },
                  emphasis: {
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                      ])
                    }
                  },
                  data: xkfinishQty,
                  barWidth: '15px',
                  barGap:'1%',
                }
              ]
            });
          }
          this.setState({
            xkWorkData:xkTempData ,
            ksWorkData:ksTempData
          });
        }
      }
    });
  }
  //风险数量分布
  riskProfile = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, "", "");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/RiskLevel2/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.jobTop = data.Data.length;
          let ksteamName = [];
          let ksfinishQty = [];
          let ksData=data.Data.filter(t=>t.MineType===30)
          ksData.forEach(item => {
            ksteamName.push(item.DepName);
            ksfinishQty.push(item.RiskCount);
          })
          //图标2
          let workTickets = document.getElementById('ksriskProfile');
          if (workTickets) {
            let myChart = echarts.init(workTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                // show:false,
                top:'8%',
                right:'5%',
                bottom:'30%',
                left:'55%'
              },
              xAxis: {
                data: ksteamName,
                                axisLabel: {
                                  color: '#000',
                                  rotate: 40,
                                  formatter: function (value) { // 自定义文字超出部分 ...
                                    if (value.length > 5) {
                                      return `${value.slice(0, 5)}...`;
                                    }
                                    return value;
                                  }
                                },
                // axisLabel: {
                //   inside: true,
                //   color: '#fff'
                // },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                z: 10
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#999'
                }
              },
              dataZoom: [
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'bar',
                  showBackground: true,
                  label: {
                                      show: true,
                                      position: 'inside',
                                      color: '#fff',
                                    },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#83bff6' },
                      { offset: 0.5, color: '#188df0' },
                      { offset: 1, color: '#188df0' }
                    ])
                  },
                  emphasis: {
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                      ])
                    }
                  },
                  data: ksfinishQty,
                  barWidth: '15px',
                  barGap:'1%',
                }
              ]
            });
          }
          let xkteamName = [];
          let xkfinishQty = [];
          let xkData=data.Data.filter(t=>t.MineType===10)
          xkData.forEach(item => {
            xkteamName.push(item.DepName);
            xkfinishQty.push(item.RiskCount);
          })
          //图标2
          let xkworkTickets = document.getElementById('xkriskProfile');
          if (xkworkTickets) {
            let myChart = echarts.init(xkworkTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                // show:false,
                top:'8%',
                right:'5%',
                bottom:'30%',
                left:'55%'
              },
              xAxis: {
                data: xkteamName,
                axisLabel: {
                color: '#000',
                rotate: 40,
                formatter: function (value) { // 自定义文字超出部分 ...
                if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
                }
                return value;
                }
                },
                // axisLabel: {
                //   inside: true,
                //   color: '#fff'
                // },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                z: 10
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#172749'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#999'
                }
              },
              dataZoom: [
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'bar',
                  showBackground: true,
                  label: {
                                      show: true,
                                      position: 'inside',
                                      color: '#fff',
                                    },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#83bff6' },
                      { offset: 0.5, color: '#188df0' },
                      { offset: 1, color: '#188df0' }
                    ])
                  },
                  emphasis: {
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                      ])
                    }
                  },
                  data: xkfinishQty,
                  barWidth: '15px',
                  barGap:'1%',
                }
              ]
            });
          }
          this.setState({
            xkRiskData:xkData ,
            ksRiskData:ksData
          });
        }
      }
    });
  }
  //各部门隐患数量
  hiddenDanger = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/HriskCount/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.DEPARTMENT_NAME);
            wattingQty.push(item.COUNT_UNCHANGE);
            finishQty.push(item.COUNT_CHANGE);
            totalQty.push(item.COUNT_UNCHANGE+item.COUNT_CHANGE);
          })
          //图标2
          let workTickets = document.getElementById('hiddenDanger');
          if (workTickets) {
            let myChart = echarts.init(workTickets);
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                // show:false,
                top:'8%',
                right:'5%',
                bottom:'40%',
                left:'50%'
              },
              // 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: '-5px',
                left:'50%'
              },
              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: false,
                    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: wattingQty,
                  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',
                    // }
                  },
                },
              ],
            });
          }
          this.setState({
            xkHiddenData:data.Data 
          });
        }
      }
    });
  }
  //高频隐患TOP8
  hiddenDangerTop = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId,'',"COUNT","asc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/HriskTop/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 = [];
          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.CHECKCONTENT);
            finishQty.push(item.COUNT);
          })
          let departmentCompletions = document.getElementById('hiddenDangerTop');
          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: '0px'
              // },
              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: finishQty,
                  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 }
  }
  //隐患整改完成情况统计图
  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',
                    // }
                  },
                },
              ],
            });
          }
        }
      }
    });
  }
  //岗位风险类别
  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,
  //               }
  //             ]
  //           })
  //         }
  //       }
  //     }
  //   });
  // }
  //风险等级占比
  getRiskLevel = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId,"","RiskType","asc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/RiskLevel1/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          let xkriskLevel = []
          let xkshowData = []
          let xkcolor =  []
          let EvaluateLevelEnums = this.enums ?this.enums.find(item => item.EnumName === "EvaluateLevelEnum"):[];
          let xkData=data.Data.filter(t=>t.MineType===10)
          xkData.forEach(item => {
            let enums = EvaluateLevelEnums && EvaluateLevelEnums.options?EvaluateLevelEnums.options.find(t => t.value === item.RiskType):[];
            xkriskLevel.push(enums?enums.label:item.RiskType);
            if(item.RiskType == "10")
            {xkcolor.push('#ee6666')}
            if(item.RiskType == "20")
            {xkcolor.push('#fac858')}
            if(item.RiskType == "30")
            {xkcolor.push('#FFFF00')}
            if(item.RiskType == "40")
            {
              xkcolor.push('#5470c6')
            }
            xkshowData.push({ value: item.RiskCount, name: enums?enums.label:item.RiskType })
          })
          
          let xkriskLevels = document.getElementById('riskType');
          if (xkriskLevels) {
            let myChart = echarts.init(xkriskLevels);
            myChart.setOption({
              legend: {
                 top: 'bottom',
                bottom: '-20px',
                left:'25%',
                // right:'10%'
              },
              tooltip: {
                trigger: 'item',
                //formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: '{b} : {c} ({d}%)'
              },
              toolbox: {
                // show: true,
                feature: {
                  // mark: { show: true },
                  // dataView: { show: true, readOnly: false },
                  // restore: { show: true },
                  // saveAsImage: { show: true }
                }
              },
              series: [
                {
                  name: '选矿部风险等级占比',
                  type: 'pie',
                  radius: [40, 65],
                  center: ['70%', '55%'],
                  // roseType: 'area',
                  itemStyle: {
                    borderRadius: 20,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                  },
                  emphasis: {
                    // label: {
                    //   show: true,
                    //   fontSize: 30,
                    //   fontWeight: 'bold'
                    // },
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      //shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  label: {
                    formatter: '{b}:({d}%)',
                    // show: false,
                    // position: 'center'
                  },
                  data: xkshowData,
                  color: xkcolor,
                }
              ]
            });
          }
          
          let ksriskLevel = []
          let ksshowData = []
          let kscolor =  []
          let ksData=data.Data.filter(t=>t.MineType===30)
          ksData.forEach(item => {
            let enums = EvaluateLevelEnums && EvaluateLevelEnums.options?EvaluateLevelEnums.options.find(t => t.value === item.RiskType):[];
            xkriskLevel.push(enums?enums.label:item.RiskType);
            if(item.RiskType == "10")
            {kscolor.push('#ee6666')}
            if(item.RiskType == "20")
            {kscolor.push('#fac858')}
            if(item.RiskType == "30")
            {kscolor.push('#FFFF00')}
            if(item.RiskType == "40")
            {
              kscolor.push('#5470c6')
            }
            ksshowData.push({ value: item.RiskCount, name: enums?enums.label:item.RiskType })
          })
          let ksriskLevels = document.getElementById('riskLevel');
          if (ksriskLevels) {
            let myChart = echarts.init(ksriskLevels);
            myChart.setOption({
              legend: {
                top: 'bottom',
                bottom: '-20px',
                left:'25%',
                // right:'10%'
              },
              tooltip: {
                trigger: 'item',
                //formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: '{b} : {c} ({d}%)'
              },
              toolbox: {
                // show: true,
                feature: {
                  // mark: { show: true },
                  // dataView: { show: true, readOnly: false },
                  // restore: { show: true },
                  // saveAsImage: { show: true }
                }
              },
              series: [
                {
                  name: '矿山部风险等级占比',
                  type: 'pie',
                  radius: [40, 65],
                  center: ['70%', '55%'],
                  // roseType: 'area',
                  itemStyle: {
                    borderRadius: 20,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                  },
                  emphasis: {
                    // label: {
                    //   show: true,
                    //   fontSize: 30,
                    //   fontWeight: 'bold'
                    // },
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      //shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  label: {
                    formatter: '{b}:({d}%)',
                    // show: false,
                    // position: 'center'
                  },
                  data: ksshowData,
                  color: kscolor,
                }
              ]
            });
          }
          this.setState({
            xkLevelData:xkshowData ,
            ksLevelData:ksshowData
          });
        }
      }
    });
  }
  //矿山风险等级占比
  // 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)'
  //                   }
  //                 }
  //               }
  //             ]
  //           });
  //         }
  //       }
  //     }
  //   });
  // }
  //折线图
  riskDeal = () => {
    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "BI/HriskchangePec/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data && data.IsSuccessful) {
      data.Data.sort((x, y) => (parseInt(x.MONTH) > parseInt(y.MONTH)) ? 1 : -1);
      let month = new Set(data.Data.map(i=>i.YEARMONTH));
      let monthNew=Array.from(month);
      let departmentNew= new Set(data.Data.map(i=>i.DEPARTMENT_NAME));;
      // data.Data.forEach(item => {
      //   month.push(item.YEARMONTH);
      //   // company.push(item.CHANGE_PERCENT);
      //   department.push(item.DEPARTMENT_NAME);
      // })
     
      //  let departmentNew= Array.from(department);
      let seriesData=[];
      departmentNew.forEach(item => {
       let list=data.Data.filter(d=>d.DEPARTMENT_NAME ===item )
       let company=monthNew.map(d=>{
       let temp= list.find(x=>x.YEARMONTH ===d);
       return temp?temp.CHANGE_PERCENT:0;
       })
       seriesData.push({
        name:item,type:'line',data:company,smooth: true
       })
      })
      let myChart = echarts.init(document.getElementById('riskDeal'));
      myChart.setOption({
        // title: {
        //     text: "矿山部-安全生产标准化运行走势图",
        //     left: 'center'
        //   },
        tooltip: {
          trigger: 'axis',
        //   formatter: function (params) {
        //     let temp=''
        //     params.forEach(t=>{
        //         temp=temp+t.seriesName +":"+t.value+"%"+'<br />';
               
        //     })
        //     return temp;
        //   }
        },
        legend: {
          // data: ['部门'],
          // data: departmentNew,
          bottom: '0px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: monthNew,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#172749'
            }
          },
          // axisTick: {
          //   show: false
          // },
          // axisLine: {
          //   show: false
          // },
        },
        series: seriesData
        // [
          // {
          //   name: '整改率',
          //   type: 'line',
          //   color: '#4b9bf3',
          //   data: company
          // },
          // {
          //   name: '及时完成率',
          //   type: 'line',
          //   color: '#FCD149',
          //   data: department
          // },
         
        // ]
      })
    }
      }
    });
  }
  //获取数据
  getBaseInfoData = (pagination, key, limit) => {
    const current = pagination ? pagination.current : 1
    const json = initFilter(this.props.login.OrgId, "", "CODE", 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
    })
  }
  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 = [
            {
              width: "450px",
              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>
              ),
            },
            {
              title: '提醒时间',
              dataIndex: 'TASK_STARTDT',
              key: 'TASK_STARTDT'
            },
            {
              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 ('已办');
    } else {
      return (<span style={{ color: 'red' }}>未读</span>);
    }
  }
  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,
    });
  };
  showStandardScoreModal = () => {
    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;
        }
      });
    }
    this.setState({
      isNaN:temp,
      scoreVisible: true
    });
  }
  render() {
    const { tableData } = this.state;
    const settings = {
      dots: true,
      autoplay: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      className: styles.slideHeight,
      fade: true,
    };
    return (
      <div className='route-home' style={{ overflow :'auto',backgroundColor: '#ecf4f6', padding: '0 10px', minHeight: '735px' }}>
        <div style={{ display: 'inline-block' }}>
          <Modal
            visible={this.state.scoreVisible}
            title="标准化得分明细"
            maskClosable={false}
            onCancel={this.clearScoreData}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.clearScoreData}
          >
            <Table
                dataSource={this.state.standardScore.Nav_Details}
                columns={this.state.isNaN?this.state.scoreColumns: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.showStandardScoreModal()}>{this.state.stardardScoreQty}</div>
                    {/* <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) => {
                      return (
                        <Col span={6}>
                          <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 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
                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={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>矿山部八大作业工作票完成情况
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.ksWorkData ?  <table style={{marginLeft: '10px',marginTop:'5px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'70px',height:'15x',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'100px',border:'1px solid #c1dad7'}}>作业名称</td>
                    <td style={{width:'60px',border:'1px solid #c1dad7'}}>完成数量</td>
                    </tr>
                    {
                                    this.state.ksWorkData && this.state.ksWorkData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'15px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.JobName}
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.RiskCount 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="workTicket" style={{ width: '100%', height: '70%'}}></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>
          </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>选矿部风险等级占比
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.xkLevelData ?  <table style={{marginLeft: '10px',marginTop:'5px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'80px',height:'30px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>风险等级</td>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>风险数量</td>
                    </tr>
                    {
                                    this.state.xkLevelData && this.state.xkLevelData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'30px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.name }
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.value 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="riskType" style={{ width: '100%', height: '70%' }}></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)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>矿山部风险等级占比
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.ksLevelData ?  <table style={{marginLeft: '10px',marginTop:'10px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'80px',height:'30px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>风险等级</td>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>风险数量</td>
                    </tr>
                    {
                                    this.state.ksLevelData && this.state.ksLevelData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'30px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.name }
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.value 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="riskLevel" style={{ width: '100%', height: '70%' }}></div>
              {/* <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>
                </div>
              </Slider> */}
            </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>选矿部八大作业工作票完成情况
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.xkWorkData ?  <table style={{marginLeft: '10px',marginTop:'5px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'70px',height:'15px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'100px',border:'1px solid #c1dad7'}}>作业名称</td>
                    <td style={{width:'60px',border:'1px solid #c1dad7'}}>完成数量</td>
                    </tr>
                    {
                                    this.state.xkWorkData && this.state.xkWorkData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'15px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.JobName}
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.RiskCount 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="xkworkTicket" style={{ width: '100%', height: '70%' }}></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>
          </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>选矿部风险数量分布
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.xkRiskData ?  <table style={{marginLeft: '10px',marginTop:'5px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'80px',height:'15px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>部门名称</td>
                    <td style={{width:'60px',border:'1px solid #c1dad7'}}>风险数量</td>
                    </tr>
                    {
                                    this.state.xkRiskData && this.state.xkRiskData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'15px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.DepName }
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.RiskCount 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="xkriskProfile" style={{ width: '100%', height: '70%' }}></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)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>矿山部风险数量分布
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.ksRiskData ?  <table style={{marginLeft: '10px',marginTop:'5px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'80px',height:'15px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'80px',border:'1px solid #c1dad7'}}>部门名称</td>
                    <td style={{width:'60px',border:'1px solid #c1dad7'}}>风险数量</td>
                    </tr>
                    {
                                    this.state.ksRiskData && this.state.ksRiskData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'30px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.DepName }
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.RiskCount 
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="ksriskProfile" style={{ width: '100%', height: '70%' }}></div>
              {/* <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>
                </div>
              </Slider> */}
            </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>各部门隐患整改率
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="riskDeal" style={{ width: '100%', height: '70%',marginLeft:'10px',marginTop:'10px' }}></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>各部门隐患数量
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div style={{position:'absolute'}}>
              {
                    this.state.xkHiddenData ?  <table style={{marginLeft: '10px',color:'#4F6b72',border:'1px solid #c1dad7'}}>
                    <tr style={{backgroundColor:'#E6EAE9',width:'70px',height:'15px',textAlign:'center',border:'1px solid #c1dad7'}}>
                    <td style={{width:'90px',border:'1px solid #c1dad7'}}>部门名称</td>
                    <td style={{width:'60px',border:'1px solid #c1dad7'}}>隐患数量</td>
                    </tr>
                    {
                                    this.state.xkHiddenData && this.state.xkHiddenData.map((item,i)=>{
                                        return <tr style={{textAlign:'center',height:'15px'}}>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {item.DEPARTMENT_NAME }
                                            </td>
                                            <td style={{border:'1px solid #c1dad7'}}>
                                                {
                                                  item.COUNT_UNCHANGE+item.COUNT_CHANGE
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
              </div>
              <div id="hiddenDanger" style={{ width: '100%', height: '70%' }}></div>
            </div>
          </Col>
          {/* 高频隐患TOP8 */}
          <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)' }}>
              <div className="statistical-title-style"><div className="badge-style"></div>高频隐患TOP8
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="hiddenDangerTop" 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' }}>
          {/* ksRun */}
          <Col span={12} 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>矿山部完成情况走势图
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="ksRun" style={{ width: '100%', height: '70%',marginLeft:'10px',marginTop:'10px' }}></div>
            </div>
          </Col>
         
            {/* xkRun */}
          <Col span={12} 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>选矿部完成情况走势图
                <span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                  <a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
                </span>
              </div>
              <br />
              <div id="xkRun" style={{ width: '100%', height: '70%' }}></div>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
export default connect(({ login, app }) => ({ login, app }))(Home)
