import React, { useState, useEffect, useRef, Component } from 'react';
import { connect } from 'dva';
import storage from '../utils/storage';
import IconFont from '../utils/iconFont';
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend, extendOrder } from '../utils/common';
import './home.less';
// 组件库
import {
  Table,
  Modal,
  Row,
  Col,
  Icon,
  Button,
  Input,
  DatePicker,
  Form,
  Select,
  notification,
  Popconfirm,
  Divider,
  Space,
  Descriptions,
  message,
  Carousel,
} 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 '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/remind_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/red-err.png';
import echarts from 'echarts';
import config from '../config';
import Toggle from './toggle';
import RisiLevel from '../components/MainPage/RiskLevel';
import ClassCompletion from '../components/MainPage/ClassCompletion';
import WorkTicket from '../components/MainPage/WorkTicket';
import MonthDanger from '../components/MainPage/MonthDanger';
import SafeCheck from '../components/MainPage/SafeCheck';

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,
  });
};
const contentStyle = {
  height: '400px',
  lineHeight: '400px',
  textAlign: 'center',
  background: '#364d79',
};

class Home extends React.Component {
  _isMounted = false; // 标记组件是否已挂载

  constructor(props) {
    super(props);
    this.state = {
      isDoubleClick: false,
      isNaN: false,
      scoreVisible: false,
      scoreTotalVisible: false,
      scoreNaVisible: false,
      standardScore: [],
      standardScoreTemp: [],
      standardScoreNaN: [],
      visible: false,
      safetySloganOne: '',
      animationDuration: 20,
      sliderColor: '#de4e58',
      sliderSize: '24px',
      safetySloganTwo: '',
      noticeTitle: '',
      tmpData: {},
      tableKey: '1',
      pagination: {},
      retData: [],
      chartData: [],
      displayStr: '',
      displayNum: 16,
      columnData: [],
      columnFields: [],
      delayData: [],
      Workbench: {
        StockDetail: [],
        ApprovalCount: 0,
        InComingCount: 0,
        OutingCount: 0,
        ProductingCount: 0,
      }, //工作台模型
      showLoading: false, //待办事项数据刷新提示
      searchVisible: false, //弹窗显示
      searchTodayVisible: false, //弹窗显示
      columns: [],
      searchColumns: [],
      scoreColumns: [],
      scoreTotalColumns: [],
      tableData: [
        {
          //工作台四个展示模块
          key: '1',
          bgImg: backlog,
          title: window.navigator.userAgent.indexOf('Windows') < 1 ? '待办' : '待办事项',
          total: '0',
          iconImg: backlog_i,
          iconDisplay: 'block',
        },
        {
          key: '4',
          bgImg: remind,
          title: window.navigator.userAgent.indexOf('Windows') < 1 ? '超时' : '待办超时',
          total: '0',
          iconImg: remind_i,
          iconDisplay: 'none',
        },
        {
          key: '2',
          bgImg: flow,
          title: window.navigator.userAgent.indexOf('Windows') < 1 ? '已办' : '已办事项',
          total: '0',
          iconImg: flow_i,
          iconDisplay: 'none',
        },
        {
          key: '3',
          bgImg: finished,
          title: '今日提醒',
          total: '0',
          iconImg: finished_i,
          iconDisplay: 'none',
        },
      ],
      visibleTitle: '', //点击title
      isSearch: false, // 是否搜索
      querySearch: {}, //搜索集合
      visibleStartTime: [],
      visibleEndTime: [],
      currentpageIndex: '1',
      departmentName: '',
      stardardScoreQty: '0',
      riskLevelPage: [],
      departmentCompletionData: [],
      workTicketData: [],
      // 用户层级id
      deparmentID: '',
      deparmentType: 0,
      dangerList: {},
      //弹窗显示参数 wyw
      detailForm: {
        isShow: false,
        formCode: '',
        title: '',
      },
      taskSelects: [],
      mineType: localStorage.getItem('currentMineType') === '20' ? '10' : localStorage.getItem('currentMineType'),
    };
    // 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');
    this.resizeRef = React.createRef();
  }

  componentDidMount() {
    this._isMounted = true; // 组件挂载时设为true
    const currentPath = this.props.location.pathname;
    // if (localStorage.getItem("webOrgId") == '00300000-0000-0000-0000-000000000000' && currentPath !== '/grouphome') {
    //   this.props.history.replace('/grouphome')
    //   return
    // }
    if (window.navigator.userAgent.indexOf('Windows') < 1) {
      window.location.replace(config.guideH5Host);
      openNotificationMobile('bottomRight');
      return; // 阻止后续代码执行
      //alert('手机');
    }
    this.setState({
      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),
        },
      ],
      scoreNoneColumns: [
        {
          width: '80px',
          title: '生产单元',
          dataIndex: 'Nav_ProductionUnit.NAME',
          key: 'Nav_ProductionUnit.NAME',
        },
        {
          width: '80px',
          title: '一级要素',
          dataIndex: 'Nav_Primary.NAME',
          key: 'Nav_Primary.NAME',
        },
        {
          width: '80px',
          title: '二级要素',
          dataIndex: 'Nav_Second.NAME',
          key: 'Nav_Second.NAME',
        },
        {
          width: '50px',
          title: '考评项目',
          dataIndex: 'EVALUATION_ITEM',
          key: 'EVALUATION_ITEM',
          render: (text, record) => (
            <span>{this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}</span>
          ),
        },
        {
          // width: "450px",
          title: '考评内容',
          dataIndex: 'CONTENTS',
          key: 'CONTENTS',
        },
        {
          width: '50px',
          title: '扣分分值',
          dataIndex: 'NON_STANDARDIZED_SCORE',
          key: 'NON_STANDARDIZED_SCORE',
        },
        {
          width: '400px',
          title: '不符合说明',
          dataIndex: 'NON_CONFORMANCE',
          key: 'NON_CONFORMANCE',
        },
        {
          width: '100px',
          title: '评价方法',
          dataIndex: 'Nav_EvaluationMethod',
          key: 'Nav_EvaluationMethod',
          render: (text, record) => (
            <span>
              {record.Nav_EvaluationMethod &&
                record.Nav_EvaluationMethod?.map((item, i) => {
                  return (
                    <tr>
                      <label> {item.Nav_Method?.NAME}</label>
                    </tr>
                  );
                })}
            </span>
          ),
        },
      ],
      scoreColumns: [
        {
          width: '80px',
          title: '生产单元',
          dataIndex: 'Nav_ProductionUnit.NAME',
          key: 'Nav_ProductionUnit.NAME',
        },
        {
          width: '80px',
          title: '一级要素',
          dataIndex: 'Nav_Primary.NAME',
          key: 'Nav_Primary.NAME',
        },
        {
          width: '80px',
          title: '二级要素',
          dataIndex: 'Nav_Second.NAME',
          key: 'Nav_Second.NAME',
        },
        {
          width: '80px',
          title: '三级要素',
          dataIndex: 'Nav_Three.NAME',
          key: 'Nav_Three.NAME',
        },
        {
          width: '50px',
          title: '考评项目',
          dataIndex: 'EVALUATION_ITEM',
          key: 'EVALUATION_ITEM',
          render: (text, record) => (
            <span>{this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}</span>
          ),
        },
        {
          // width: "500px",
          title: '考评内容',
          dataIndex: 'CONTENTS',
          key: 'CONTENTS',
        },
        {
          width: '100px',
          title: '评分办法',
          dataIndex: 'DESCRIPTION',
          key: 'DESCRIPTION',
        },
        {
          width: '50px',
          title: '标准分',
          dataIndex: 'STANDARDIZED_SCORE',
          key: 'STANDARDIZED_SCORE',
        },
        {
          width: '50px',
          title: '实得分',
          dataIndex: 'RESULT_SCORE',
          key: 'RESULT_SCORE',
        },
        {
          width: '200px',
          title: '不符合说明',
          dataIndex: 'NON_CONFORMANCE',
          key: 'NON_CONFORMANCE',
        },
        ,
        {
          width: '80px',
          title: '评价结论',
          dataIndex: 'EVALUATION_RESULT',
          key: 'EVALUATION_RESULT',
          render: (text, record) => (
            <span>{this.props.app.enums?.PEEvaluationResultEnum.enums[record.EVALUATION_RESULT]}</span>
          ),
        },
        {
          width: '100px',
          title: '评价方法',
          dataIndex: 'Nav_EvaluationMethod',
          key: 'Nav_EvaluationMethod',
          render: (text, record) => (
            <span>
              {record.Nav_EvaluationMethod &&
                record.Nav_EvaluationMethod?.map((item, i) => {
                  return (
                    <tr>
                      <label> {item.Nav_Method?.NAME}</label>
                    </tr>
                  );
                })}
            </span>
          ),
        },
      ],
      scoreTotalColumns: [
        {
          title: '生产单元',
          dataIndex: 'Nav_ProductionUnit.NAME',
          key: 'Nav_ProductionUnit.NAME',
        },
        {
          title: '标准化得分',
          dataIndex: 'NON_STANDARDIZED_SCORE',
          key: 'NON_STANDARDIZED_SCORE',
        },
        {
          title: '操作',
          dataIndex: '',
          key: '',
          render: (text, record) => (
            <span>
              {
                <tr>
                  {' '}
                  <Button onClick={() => this.showStandardScoreModal()}>全部</Button>
                  <Button onClick={() => this.showStandardScoreModal(1)}>不符合项</Button>
                </tr>
              }
            </span>
          ),
        },
      ],
    });
    this.getTeam();
    this.getHomeTitle();
    //定时器功能，暂时不开启
    this.timerID = setInterval(() => {
      if (this._isMounted) {
        this.getBaseInfoData(1, this.state.tableKey, 5);
      }
    }, 120000);
    this.showModalSign();
    this.getBaseInfoData(1, 1, 5);
    this.setMessageData();
  }
  componentWillUnmount() {
    this._isMounted = false; // 组件卸载时设为false
    if (this.timerID) {
      clearInterval(this.timerID);
      this.timerID = null;
    }
  }

  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 (this._isMounted && ret) {
          //判断是否有记录
          openNotification('topRight');
        }
      },
    });
  };
  getHomeTitle = () => {
    var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
    let json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'PF/HomeTitle/OrderPaged',
      onComplete: (ret) => {
        if (this._isMounted && ret) {
          const safetySlogan = ret[0].TITLE;
          // 计算文本长度（中文按1个字符，英文/数字按0.5个字符计算）
          const charCount = safetySlogan.replace(/[a-zA-Z0-9]/g, 'aa').length;

          // 设置基础速率：每4个字符需要1秒
          const baseSpeed = 4;
          // 计算动画时间（最低5秒，最高60秒）
          const duration = Math.max(5, Math.min(60, charCount / baseSpeed));
          this.setState({
            safetySloganOne: safetySlogan,
            // safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。   2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。   6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。",
            animationDuration: duration,
            sliderColor: ret[0].COCOR,
            sliderSize: ret[0].FONTSIZE,
          });
        }
      },
    });
  };

  getTeam = () => {
    var userId = storage('lacal').getItem('userid')?.val; //登录后有存储登录信息
    var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
    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 (this._isMounted && ret && ret.Nav_Department) {
          this.setState({
            departmentName: ret.Nav_Department.NAME,
            deparmentType: ret.Nav_Department.DEPARTMENT_TYPE,
            deparmentID: ret.DEPARTMENT_ID,
          });
          this.departmentCompletion();
          this.workTicket(); //工作票完成率前十(统计图)
          this.riskLevel(); //岗位风险等级(饼图)
          this.getStandardScore(ret.MineType); //获取标准化评分
          this.hiddenDanger();
        }
      },
    });
  };
  getStandardScore = (MineType) => {
    //标准化得分
    var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
    let json = '';
    if (this.state.mineType) {
      json = initFilter(orgId, this.state.mineType);
    } else {
      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),
          });
        }
      },
    });
  };
  getEnums = () => {
    this.props.dispatch({
      type: 'app/getDataByGet',
      url: 'PF/Extend/GetAllEnum',
      onComplete: (ret) => {
        if (ret) {
          this.enums = ret;
        }
      },
    });
  };
  //班组作业完成率前八
  departmentCompletion = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, this.state.mineType, 'NUM', 'desc');
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort',
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          if (data.Data && data.Data.length > 0) {
            this.setState({
              departmentCompletionData: data.Data,
            });
          }
        }
      },
    });
  };
  //工作票完成情况统计图
  workTicket = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, this.state.mineType, 'NUM', 'desc');
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIStatiscialAnalysisController/GetJobCompletionSort',
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          if (data.Data && data.Data.length > 0) {
            this.setState({
              workTicketData: data.Data,
            });
          }
        }
      },
    });
  };
  // hiddenDanger
  hiddenDanger = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, this.state.mineType, 'NUM');
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIHome/GetHomeInfo',
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          this.hiddenTop = data.Data.length;
          this.setState({
            dangerList: data.Data,
          });
          //图标2
        }
      },
    });
  };
  //风险等级占比
  riskLevel = () => {
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId);
    extendOrder(json, 'NUM', 0);
    extendRule(json, 'COLOR', 1, this.state.mineType);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/RiskLevelProportion/OrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          if (data.Data && data.Data.length > 0) {
            this.setState({
              riskLevelPage: data.Data,
            });
          }
        }
      },
    });
  };
  //获取数据
  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 (this._isMounted && 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 };
    if (newtmpData['data'] != null) {
      newtmpData['data'].id = '';
      newtmpData['data'].homeReload = false;
    }
    newtmpData.formCode = '';
    this.setState({
      visible: false,
      tmpData: [], //newtmpData
    });
  };
  clearScoreData = () => {
    this.setState({
      scoreVisible: false,
      // standardScore: [],//newtmpData
    });
  };
  handleCancel = () => {
    // 退出弹窗
    if (this.state.isDoubleClick) {
      this.getBaseInfoData(1, this.state.tableKey, null);
    } else {
      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,
          isDoubleClick: false,
        });
        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,
        isDoubleClick: true,
      },
      () => {
        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) {
      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,
      },
      () => {}
    );
  };
  // 结束时间
  endChange = (dates, dateStr) => {
    const { querySearch } = this.state;
    if (dates.length != 2) {
      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);
  };
  closeTasks() {
    const json = initFilter(this.props.login.OrgId, '', 'CODE', 1);
    let ids = [];
    let names = [];
    this.state.taskSelects.forEach((element) => {
      ids.push(element.ID);
      names.push({
        title: element.NOTICE_TITLE,
        startTime: element.TASK_STARTDT,
        endTime: element.TASK_ENDDT,
      });
    });
    json.Parameter1 = ids.join(',');
    json.Parameter2 = JSON.stringify(names);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BITask/CloseTask',
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        message.success('申请成功！');
      },
    });
  }
  // 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,
      querySearch: {},
    });
  };
  ShowState(obj) {
    var thisResult = (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
    if (thisResult > 0) {
      return '正常';
    } else {
      return <span style={{ color: 'red' }}>超期</span>;
    }
  }
  ShowStatus(obj) {
    if (obj.NOTICE_STATUS === 0) {
      return <span style={{ color: 'red' }}>未读</span>;
    } else if (obj.NOTICE_STATUS === 3) {
      return <span style={{ color: 'blue' }}>已读</span>;
    } else {
      return '已办';
    }
  }
  handleSelect = (e) => {
    const { querySearch } = this.state;
    if (e != undefined) {
      querySearch.status = e;
    } else {
      querySearch.status = '';
    }
    this.setState({ querySearch });
  };
  showStandardScoreTotalModal = () => {
    this.setState({
      scoreTotalVisible: true,
    });
  };
  showStandardScoreModal = (item) => {
    let temp = false;
    if (this.state.standardScore && this.state.standardScore.Nav_Details) {
      this.state.standardScore.Nav_Details.forEach((t) => {
        if (t.THREE_ELEMENTS_ID) {
          temp = true;
        }
      });
    }
    if (item) {
      let dataTemp = this.state.standardScore.Nav_Details.filter(
        (t) => t.NON_CONFORMANCE != null && t.NON_CONFORMANCE != ''
      );
      let tmpData = dataTemp.map((item, i) => {
        item['ROW_NO'] = i + 1;
        return item;
      });
      let aa = {
        CONTENTS: '合计扣分：',
        NON_STANDARDIZED_SCORE: this.state.standardScore.NON_STANDARDIZED_SCORE,
      };
      tmpData.push(aa);
      this.setState({
        isNaN: temp,
        standardScoreNaN: tmpData,
        scoreNaVisible: true,
      });
    } else {
      let dataTemp = this.state.standardScore.Nav_Details;
      let tmpData = dataTemp.map((item, i) => {
        item['ROW_NO'] = i + 1;
        return item;
      });
      let aa = {
        DESCRIPTION: '合计：',
        STANDARDIZED_SCORE: this.state.standardScore.STAND_TOTAL,
        RESULT_SCORE: this.state.standardScore.RESULT_TOTAL,
        NON_CONFORMANCE: '标准化得分：' + this.state.standardScore.STANDARDIZED_RESULT,
      };
      tmpData.push(aa);
      this.setState({
        isNaN: temp,
        standardScoreTemp: tmpData,
        scoreVisible: true,
      });
    }
  };
  clearScoreTotalData = () => {
    this.setState({
      scoreTotalVisible: false,
    });
  };
  clearScoreNaData = () => {
    this.setState({
      scoreNaVisible: false,
    });
  };
  useEffect = () => {
    // 监听的函数
    const resize = new ResizeObserver((e) => {
      if (!Array.isArray(e) || !e.length) return;
      for (const ent of e) {
        resizeChange(ent);
      }
    });
    // 传入监听对象
    resize.observe(resizeRef.current);
    // 及时销毁监听函数（重要!!!）
    return () => {
      resize.unobserve(resizeRef?.current);
    };
  };

  //显示详情弹窗
  showDetailModal = (formCode) => {
    var titleTemp =""
      // this.state.mineType == 20
      //   ? '尾矿库'
      //   : this.state.mineType == 10
      //   ? '选矿厂'
      //   : this.state.mineType == 31
      //   ? '职能口'
      //   : this.state.mineType == 32
      //   ? '非金属'
      //   : '露天矿';
    if (formCode == 'BI054_HOMEDETAIL') {
      titleTemp += '安全检查次数统计（近12月）';
    } else if (formCode == 'BI055_HOMEDETAIL') {
      titleTemp += '月度隐患整改情况（近12月）';
    } else if (formCode == 'BI001_HOMEDETAIL') {
      titleTemp += '班组活动任务完成详情（近12月）';
    } else if (formCode == 'BI002_HOMEDETAIL') {
      titleTemp += '工作票完成详情（近12月）';
    } else if (formCode == 'BI013_RISKANALYSISMODEL') {
      titleTemp += '风险管理统计分析';
    }

    const newtmpData = {
      data: {
        id: guid(),
        mineType: this.state.mineType,
        onCancel: this.handleCancel,
        homeReload: true,
      },
      formCode: formCode,
    };
    this.setState({ tmpData: newtmpData }, () => {
      var detailForm = {
        isShow: true,
        formCode: formCode,
        title: titleTemp,
      };
      this.setState({
        detailForm: detailForm,
      });
    });
  };

  //详情弹窗关闭（隐藏）
  detailFormClose = () => {
    var detailForm = {
      isShow: false,
      formCode: '',
      title: '',
    };
    this.setState({
      detailForm: detailForm,
    });
  };

  render() {
    const { tableData } = this.state;
    const thingsData = this.state.delayData;
    const settings = {
      dots: false,
      autoplay: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      className: styles.slideHeight,
      fade: true,
    };
    // 在render方法中添加动态样式计算
    const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.state.taskSelects = selectedRows;
      },
    };
    const empty = <Col md={6} sm={24}></Col>;
    return (
      <div
        className="route-home"
        style={{
          padding: '0 10px',
          minHeight: '735px',
        }}
        ref={this.resizeRef}
      >
        <div style={{ display: 'inline-block' }}>
          <Modal
            visible={this.state.detailForm.isShow}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          <Modal
            visible={this.state.scoreTotalVisible}
            title="标准化得分汇总"
            maskClosable={false}
            onCancel={this.clearScoreTotalData}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.clearScoreTotalData}
          >
            <Table
              dataSource={this.state.standardScore.Nav_IngoreDetails}
              columns={this.state.scoreTotalColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.scoreVisible}
            title="标准化得分明细"
            maskClosable={false}
            onCancel={this.clearScoreData}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.clearScoreData}
          >
            <Table
              dataSource={this.state.standardScoreTemp}
              columns={this.state.scoreColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.scoreNaVisible}
            title="不符合项明细"
            maskClosable={false}
            onCancel={this.clearScoreNaData}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.clearScoreNaData}
          >
            <Table
              dataSource={this.state.standardScoreNaN}
              columns={this.state.scoreNoneColumns}
              pagination={false}
              bordered
              loading={this.state.showLoading}
              size="small"
            />
          </Modal>
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.closeModal}
            // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
        </div>
        <Row gutter={12}>
          {/* 五个图标模块 */}
          <Col span={this.state.displayNum}>
            <Col span={5} style={{ display: this.state.displayStr }}>
              <div
                onClick={() => this.showStandardScoreTotalModal()}
                style={{
                  // padding: "0px",
                  height: '236px',
                  borderRadius: '10px',
                  padding: '10px',
                  cursor: 'pointer',
                }}
                className="backlog-background-style4"
              >
                <Icon
                  type={'rocket'}
                  className="backlog-icontitle-style"
                  style={{
                    marginLeft: '12px',
                  }}
                ></Icon>
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                  }}
                >
                  <div
                    className={'backlog-style'}
                    style={{
                      fontSize: '38pt',
                      marginBottom: '20px',
                      display: 'flex',
                      alignItems: 'center',
                      marginLeft: '12px',
                    }}
                  >
                    {/* {83.6} */}
                    {this.state.stardardScoreQty}
                    {/* {this.state.uitem} */}
                  </div>
                  <div
                    className="backlog-title-style"
                    style={{
                      marginBottom: '20px',
                      marginTop: '10px',
                      marginLeft: '12px',
                    }}
                  >
                    标准化得分
                  </div>
                </div>
              </div>
            </Col>
            <Col span={19}>
              <Row gutter={10}>
                <Col span={24}>
                  <div className="slide-content">
                    <div className="slide-icon-style">
                      <Icon type="sound" style={{ fontSize: '28px' }}></Icon>
                    </div>
                    <div
                      className="slide-style"
                      style={{
                        '--animation-duration': `${animationDuration}s`, // 动态设置动画时长
                        '--slider-color': `${sliderColor}`, // 动态设置颜色
                        '--slider-size': `${sliderSize}px`, // 动态设置颜色
                      }}
                    >
                      <p className="slide-text-style">{safetySloganOne || '暂无公告'}</p>
                    </div>
                  </div>
                </Col>
              </Row>
              <Row gutter={10}>
                <Col span={24}>
                  <Row gutter={12}>
                    {tableData.map((item) => {
                      return (
                        <Col span={this.state.displayStr ? 6 : 6}>
                          <div
                            onClick={() => this.totalModuleClick(item)}
                            onDoubleClick={() => this.totalMoonDoubleClick(item)}
                            style={{
                              padding: '0px',
                              height: '176px',
                              borderRadius: '10px',
                              cursor: 'pointer',
                            }}
                            className={
                              item.title === '待办事项'
                                ? 'backlog-background-style'
                                : item.title === '待办超时'
                                ? 'backlog-background-style1'
                                : item.title === '已办事项'
                                ? 'backlog-background-style2'
                                : item.title === '今日提醒'
                                ? 'backlog-background-style3'
                                : 'backlog-background-style4'
                            }
                          >
                            <Icon
                              type={
                                item.title === '待办事项'
                                  ? 'schedule'
                                  : item.title === '待办超时'
                                  ? 'hourglass'
                                  : item.title === '已办事项'
                                  ? 'check-circle'
                                  : item.title === '今日提醒'
                                  ? 'bulb'
                                  : 'rocket'
                              }
                              className={
                                item.title === '待办事项'
                                  ? 'backlog-icontitle-style1'
                                  : item.title === '待办超时'
                                  ? 'backlog-icontitle-style2'
                                  : item.title === '已办事项'
                                  ? 'backlog-icontitle-style3'
                                  : item.title === '今日提醒'
                                  ? 'backlog-icontitle-style4'
                                  : 'backlog-icontitle-style'
                              }
                            ></Icon>

                            <div className={item.total > 9999 ? 'backlog-style4' : 'backlog-style'}>{item.total}</div>
                            <div className="backlog-title-style">{item.title}</div>
                            <div
                              className={
                                item.title === '待办事项'
                                  ? 'backlog-icon-style3'
                                  : item.title === '待办超时'
                                  ? 'backlog-icon-style4'
                                  : item.title === '已办事项'
                                  ? 'backlog-icon-style5'
                                  : item.title === '今日提醒'
                                  ? 'backlog-icon-style6'
                                  : 'backlog-icon-style7'
                              }
                              style={{ display: item.iconDisplay }}
                            ></div>
                          </div>
                        </Col>
                      );
                    })}
                  </Row>
                </Col>
              </Row>
            </Col>
          </Col>

          {/* 通知 */}
          <Col span={8} rowSpan={2} style={{ display: this.state.displayStr, height: '100%' }}>
            <div
              className="dashboard-div-style"
              style={{
                height: '236px',
              }}
            >
              <div className="dashboard-div-style">
                <div className="statistical-title-style">
                  <div className="badge-style">
                    <Icon type="pie-chart" style={{ color: '#5f6ac2', marginRight: '4px' }}></Icon>
                    风险等级占比
                  </div>
                  {this.state.riskLevelPage.length > 0 ? (
                    <span
                      style={{
                        fontSize: '14px',
                        float: 'right',
                        marginRight: '16px',
                        // marginTop: "4px",
                      }}
                    >
                      <div onClick={() => this.showDetailModal('BI013_RISKANALYSISMODEL')}>
                        <IconFont
                          type="icon-24gl-expand2"
                          style={{
                            fontSize: '18px',
                            color: '#333333',
                            cursor: 'pointer',
                          }}
                        ></IconFont>
                      </div>
                    </span>
                  ) : null}
                </div>
                {this.state.riskLevelPage.length > 0 ? <RisiLevel riskLevelPage={this.state.riskLevelPage} /> : null}
              </div>
            </div>
          </Col>
        </Row>
        <Row
          gutter={12}
          style={{
            marginTop: '14px',
            height: 'calc((100% - 270px) / 2)',
            minHeight: '260px',
          }}
        >
          {/* 列表 */}
          <Col span={this.state.displayNum} style={{ height: '100%' }}>
            <div
              className="dashboard-div-style"
              style={{
                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} 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>
                  {/* <Col span={2}>
                    <Popconfirm
                      title="是否确认申请关闭所选择的待办任务?"
                      onConfirm={()=>{
                        this.closeTasks() 
                      }}
                      okText="确认"
                      cancelText="取消"
                    >
                      <Button type={"danger"} href="#">申请关闭</Button>
                    </Popconfirm>
                  </Col> */}
                </Row>
              </Form>
              <Table
                rowSelection={rowSelection}
                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="3">已读</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',
              }}
            >
              <div className="statistical-title-style">
                <div className="badge-style">
                  <Icon type="bar-chart" style={{ color: '#5f6ac2', marginRight: '4px' }}></Icon>
                  班组活动完成率
                </div>
                {this.state.departmentCompletionData.length > 0 ? (
                  <span
                    style={{
                      fontSize: '14px',
                      float: 'right',
                      marginRight: '16px',
                      marginTop: '4px',
                    }}
                  >
                    <div onClick={() => this.showDetailModal('BI001_HOMEDETAIL')}>
                      <IconFont
                        type="icon-24gl-expand2"
                        style={{
                          fontSize: '18px',
                          color: '#333333',
                          cursor: 'pointer',
                        }}
                      ></IconFont>
                    </div>
                  </span>
                ) : null}
              </div>
              <br />
              <div style={{ width: '100%', height: '100%' }}>
                {this.state.departmentCompletionData.length > 0 ? (
                  <ClassCompletion departmentCompletionData={this.state.departmentCompletionData} />
                ) : null}
              </div>
              {/* <Toggle getNum={this.getChildCount}></Toggle> */}
            </div>
          </Col>
        </Row>
        <Row
          gutter={12}
          style={{
            display: this.state.displayStr,
            marginTop: '12px',
            height: 'calc((100% - 300px) / 2)',
            minHeight: '256px',
          }}
        >
          {/* 工作票完成情况前十 */}
          {/* 隐患整改完成情况排名前十 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }}>
            <div
              className="dashboard-div-style"
              style={{
                borderRadius: '10px',
                height: '100%',
                backgroundColor: 'white',
              }}
            >
              <div className="statistical-title-style">
                <div className="badge-style">
                  <Icon type="bar-chart" style={{ color: '#5f6ac2', marginRight: '4px' }}></Icon>
                  工作票完成数
                </div>
                {this.state.workTicketData.length > 0 ? (
                  <span
                    style={{
                      fontSize: '14px',
                      float: 'right',
                      marginRight: '16px',
                      marginTop: '4px',
                    }}
                  >
                    <div onClick={() => this.showDetailModal('BI002_HOMEDETAIL')}>
                      <IconFont
                        type="icon-24gl-expand2"
                        style={{
                          fontSize: '18px',
                          color: '#333333',
                          cursor: 'pointer',
                        }}
                      ></IconFont>
                    </div>
                  </span>
                ) : null}
              </div>
              <br />
              {this.state.workTicketData.length > 0 ? <WorkTicket workTicketData={this.state.workTicketData} /> : null}
            </div>
          </Col>
          {/* 隐患整改情况 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }}>
            <div
              className="dashboard-div-style"
              style={{
                borderRadius: '10px',
                height: '100%',
                backgroundColor: 'white',
              }}
            >
              <div className="statistical-title-style">
                <div className="badge-style">
                  <Icon type="bar-chart" style={{ color: '#5f6ac2', marginRight: '4px' }}></Icon>
                  月度隐患整改情况
                </div>
                {this.state.dangerList.ListC && this.state.dangerList.ListC.length > 0 ? (
                  <span
                    style={{
                      fontSize: '14px',
                      float: 'right',
                      marginRight: '16px',
                      marginTop: '4px',
                    }}
                  >
                    <div onClick={() => this.showDetailModal('BI055_HOMEDETAIL')}>
                      <IconFont
                        type="icon-24gl-expand2"
                        style={{
                          fontSize: '18px',
                          color: '#333333',
                          cursor: 'pointer',
                        }}
                      ></IconFont>
                    </div>
                  </span>
                ) : null}
              </div>
              <br />
              {this.state.dangerList.ListC && this.state.dangerList.ListC.length > 0 ? (
                <MonthDanger ListC={this.state.dangerList.ListC} />
              ) : null}
              {/* <Toggle getNum={this.getHiddenCount}></Toggle> */}
            </div>
          </Col>
          {/* 风险类别占比、风险等级占比 */}
          <Col span={8} style={{ display: this.state.displayStr, height: '100%' }}>
            <div className="dashboard-div-style">
              <div className="statistical-title-style">
                {/* {this.state.departmentName}作业完成情况 */}
                <div className="badge-style">
                  <Icon type="bar-chart" style={{ color: '#5f6ac2', marginRight: '4px' }}></Icon>
                  安全检查次数统计
                </div>
                {this.state.dangerList.ListSafeCheckYearMonth &&
                this.state.dangerList.ListSafeCheckYearMonth.length > 0 ? (
                  <span
                    style={{
                      fontSize: '14px',
                      float: 'right',
                      marginRight: '16px',
                      marginTop: '4px',
                    }}
                  >
                    <div onClick={() => this.showDetailModal('BI054_HOMEDETAIL')}>
                      <IconFont
                        type="icon-24gl-expand2"
                        style={{
                          fontSize: '18px',
                          color: '#333333',
                          cursor: 'pointer',
                        }}
                      ></IconFont>
                    </div>
                  </span>
                ) : null}
              </div>
              <br />
              {this.state.dangerList.ListSafeCheckYearMonth &&
              this.state.dangerList.ListSafeCheckYearMonth.length > 0 ? (
                <SafeCheck ListSafeCheckYearMonth={this.state.dangerList.ListSafeCheckYearMonth} />
              ) : null}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(Home);