mh_jy_safe_web/src/routes/GroupHome.js

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 GroupHome extends React.Component {
  _isMounted = false; // 标记组件是否已挂载

  constructor(props) {
    super(props);
    this.state = {
      noticeData: [], // 公告列表数据
      currentNoticePage: 1, // 当前公告页码
      noticePageSize: 4, // 每页公告数量（与图片一致，默认显示4条）
      totalNoticeCount: 0, // 公告总数量
      activeNoticeTab: "all", // 活跃公告标签（全部/集团发布/公司发布，参考图片）
      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
    // if (localStorage.getItem("webOrgId") !== '00300000-0000-0000-0000-000000000000' && currentPath !== '/home') {
    //   this.props.history.replace('/home')
    //   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();
    this.getNoticeData()
  }

  componentWillUnmount() {
    this._isMounted = false; // 组件卸载时设为false
    if (this.timerID) {
      clearInterval(this.timerID);
      this.timerID = null;
    }
  }
  getNoticeData = () => {
    const { currentNoticePage, noticePageSize, activeNoticeTab, mineType } = this.state;
    const orgId = storage("lacal").getItem("webOrgId")?.val;
    // 构建请求参数（按标签筛选：全部/集团/公司）
    let json = initFilter(orgId, mineType);
    extendRule(json, "pageNum", 1, currentNoticePage);
    extendRule(json, "pageSize", 1, noticePageSize);
    if (activeNoticeTab === "group") {
      extendRule(json, "sourceType", 1, 1); // 1=集团发布
    } else if (activeNoticeTab === "company") {
      extendRule(json, "sourceType", 1, 2); // 2=公司发布
    }
    this.setState({
      noticeData: [
        {
          id: "1",
          title: "为表彰先进，树立榜样，激励广大员工积极进取，集团决定开展2023年度优秀员工评选工作...",
          source: "集团发布",
          date: "08-30",
          readStatus: "未读", // 可选：未读/已读
          isImportant: true // 是否重要提醒
        },
        {
          id: "2",
          title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...",
          source: "公司发布",
          date: "08-28",
          readStatus: "已读",
          isImportant: false
        },
        {
          id: "3",
          title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...",
          source: "公司发布",
          date: "08-28",
          readStatus: "已读",
          isImportant: false
        },
        {
          id: "4",
          title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...",
          source: "公司发布",
          date: "08-28",
          readStatus: "已读",
          isImportant: false
        },
        {
          id: "5",
          title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...",
          source: "公司发布",
          date: "08-28",
          readStatus: "已读",
          isImportant: false
        },
        {
          id: "6",
          title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...",
          source: "公司发布",
          date: "08-28",
          readStatus: "已读",
          isImportant: false
        }
        // 更多公告...
      ],
      totalNoticeCount: 10 // 公告总数
    })

    // this.props.dispatch({
    //   type: "app/getDataByPost",
    //   url: "PF/Notice/GetNoticeList", // 假设的公告列表接口，需替换为实际接口
    //   payload: json,
    //   onlyData: false,
    //   onComplete: (data) => {
    //     if (data && data.IsSuccessful) {
    //       this.setState({
    //         noticeData: data.Data.list, // 公告列表
    //         totalNoticeCount: data.Data.total, // 公告总数
    //       });
    //     }
    //   },
    // });
  };
  // 公告页码切换
  changeNoticePage = (page) => {
    const { totalNoticeCount, noticePageSize } = this.state;
    // 边界判断：页码不能小于1，不能大于总页数
    if (page < 1 || page > Math.ceil(totalNoticeCount / noticePageSize)) return;
    this.setState({ currentNoticePage: page }, () => {
      this.getNoticeData(); // 切换页码后重新请求数据
    });
  };

  // 公告标签切换（全部/集团发布/公司发布）
  switchNoticeTab = (tabType) => {
    this.setState({
      activeNoticeTab: tabType,
      currentNoticePage: 1, // 切换标签时重置为第1页
    }, () => {
      this.getNoticeData(); // 切换标签后重新请求数据
    });
  };

  // 查看更多公告（跳转至公告详情页或展开全部）
  viewMoreNotice = () => {
    // 逻辑1：跳转至独立公告页面（推荐）
    this.props.history.push({ pathname: "/noticeList", state: { tab: this.state.activeNoticeTab } });
    // 逻辑2：在当前页展开全部公告（备选）
    // this.setState({ noticePageSize: this.state.totalNoticeCount });
  };


  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 = () => {
    // 退出弹窗
    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) {
      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>
              {/* 公告栏 */}
              
              {/* <div style={{ width: "100%", height: "100%" }}>
              
                <div className="notice-board-container">
                  <div className="notice-board-header">
                    <div className="notice-board-title">
                      公告栏
                      {this.state.noticeData.some(item => item.isImportant) && (
                        <span className="notice-important-tag">包含{this.state.noticeData.filter(item => item.isImportant).length}个重要提醒</span>
                      )}
                    </div>
                     <div style={{whiteSpace: "nowrap"}}>
                    <Button
                      type={this.state.activeNoticeTab === "all" ? "primary" : "default"}
                      size="small"
                      onClick={() => this.switchNoticeTab("all")}
                      style={{ marginRight: 8 }}
                    >
                      全部
                    </Button>
                    <Button
                      type={this.state.activeNoticeTab === "group" ? "primary" : "default"}
                      size="small"
                      onClick={() => this.switchNoticeTab("group")}
                      style={{ marginRight: 8 }}
                    >
                      集团
                    </Button>
                    <Button
                      type={this.state.activeNoticeTab === "company" ? "primary" : "default"}
                      size="small"
                      onClick={() => this.switchNoticeTab("company")}
                    >
                      公司
                    </Button>
                  </div>
                  
                  </div>

                  <ul className="notice-list">
                    {this.state.noticeData.length > 0 ? (
                      this.state.noticeData.map(notice => (
                        <li
                          key={notice.id}
                          className={`notice-item ${notice.readStatus === "未读" ? "unread" : ""}`}
                          onClick={() => this.viewNoticeDetail(notice.id)} 
                        >
                          <div className="notice-item-content">
                            <span className="notice-item-title">{notice.title}</span>
                            <span className="notice-item-date">{notice.date}</span>
                          </div>
                          <div className="notice-item-source">
                            {notice.source === 1 ? "集团发布" : "公司发布"}
                          </div>
                        </li>
                      ))
                    ) : (
                      <li style={{ textAlign: "center", padding: "20px 0", color: "#999" }}>
                        暂无公告数据
                      </li>
                    )}
                  </ul>

                   <div className="notice-pagination">
                    <Button onClick={this.viewMoreNotice} block>查看更多公告</Button>
                    </div>
                </div>
              </div> */}
            </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 }))(GroupHome);