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 {
  Row,
  Col,
  Icon,
  Progress,
  Tabs,
  message,
  Dropdown,
  Menu,
  Empty,
  Modal,
  Divider,
  Form,
  Input,
  Table,
  Button,
  DatePicker,
  Select,
} from "antd";
import styles from "./dashboard.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import echarts from "echarts";
import config from "../config";
import ModifyPassword from "../components/MainPage/ModifyPassword";
import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
import FormPage from "../components/FormPage";
const { TabPane } = Tabs;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const AllTech = (props) => {
  return (
    <Col
      span={6}
      className="home-tech-col"
      onClick={() => {
        props.techClick();
      }}
    >
      <div className="home-tech-back">
        <IconFont type={props.icon} className="home-tech-icon"></IconFont>
      </div>
      <span className="home-tech-name">{props.title}</span>
    </Col>
  );
};
const WorkBench = (props) => {
  return (
    <div>
      {props.data.map((item, index) => {
        const result =
          (Date.parse(item.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
        const prepare = result > 0 ? "正常" : "超期";
        const warning =
          item.NOTICE_STATUS == 0
            ? "未读"
            : item.NOTICE_STATUS == 3
            ? "已读"
            : "已办";
        const type = props.index == 1 || props.index == 2 ? prepare : warning;

        return (
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              padding: "10px",
              alignItems: "center",
              justifyContent: "space-between",
              borderBottom:
                index !== props.data.length - 1 ? "1px solid #e7e6e4" : "",
            }}
            className="home-work-back"
            onClick={() => {
              props.benchCLick(item);
            }}
          >
            <div
              className={
                type == "超期"
                  ? "home-work-type-red"
                  : type == "未办" || type == "未读"
                  ? "home-work-type-yellow"
                  : type == "已办"
                  ? "home-work-type-green"
                  : "home-work-type-black"
              }
              style={{
                marginLeft: "20px",
                marginRight: "20px",
              }}
            >
              {type}
            </div>

            <div
              className="home-work-title"
              style={{ flex: 1, alignItems: "flex-start" }}
            >
              {item.NOTICE_TITLE}
            </div>
            <div
              className="home-work-date"
              style={{
                width: "200px",
                marginRight: "100px",
              }}
            >
              开始时间：{item.TASK_STARTDT}
            </div>
            <div
              className="home-work-date"
              style={{
                width: "200px",
                marginRight: "50px",
              }}
            >
              结束时间：{item.TASK_ENDDT}
            </div>
            {/* <div className="home-work-person" style={{ width: "140px" }}>
              发起人：{item.person}
            </div> */}
          </div>
        );
      })}
    </div>
  );
};
const UserInfo = (props) => {
  return (
    <div
      className="home-userInfo"
      onClick={() => {
        props.showAll();
      }}
    >
      <div className="home-userInfo-pad">
        <Icon
          type="schedule"
          className="home-userInfo-Icon"
          style={{ color: props.color }}
        ></Icon>
        <div className="home-userInfo-title">{props.title}</div>
      </div>
      <div className="home-userInfo-content" style={{ color: props.color }}>
        {props.data}
      </div>
    </div>
  );
};

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      userInfo: "",
      timeNow: "上午好",
      workData: [],
      workTotal: "",
      tableKey: "1",
      formVisible: false,
      noticeTitle: "",
      searchVisible: false,
      visibleTitle: "",
      searchTodayVisible: false,
      taskSelects: [],
      tmpData: {},
      querySearch: {},
      currentpageIndex: "1",
      visibleStartTime: [],
      visibleEndTime: [],
      mineType:
        localStorage.getItem("currentMineType") === "20"
          ? "10"
          : localStorage.getItem("currentMineType"),
      detailForm: {
        isShow: false,
        formCode: "",
        title: "",
      },
      completeName: [
        {
          name: "张森友",
          value: 100,
        },
        {
          name: "李友军",
          value: 99,
        },
        {
          name: "洪虎林",
          value: 97,
        },
        {
          name: "李彦斌",
          value: 95,
        },
        {
          name: "王志文",
          value: 93,
        },
        {
          name: "黄海林",
          value: 90,
        },
        {
          name: "赵无极",
          value: 67,
        },
        {
          name: "林佑君",
          value: 43,
        },
      ],
    };
  }

  componentDidMount() {
    if (window.navigator.userAgent.indexOf("Windows") < 1) {
      window.location.replace(config.guideH5Host);
      //alert('手机');
    }
    this.getBaseData(1, "1", 5);
    this.timeJudg();
    this.riskLevel();
    // this.homeRound();
    this.completeRate();
    this.timelyRate();
    this.safeCheck();
    this.dangerChange();
    this.getUser();
  }
  getSixMonth = (number, yearString = "", monthString = "") => {
    let nowdate = new Date();
    nowdate.setMonth(nowdate.getMonth() + number);
    let y = nowdate.getFullYear();
    let m = nowdate.getMonth() + 1;
    // let d = nowdate.getDate();
    let retrundate = y + yearString + m + monthString;

    return retrundate;
  };
  showAll = (key) => {
    const { tableData } = this.state;

    if (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 (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: key,
      },
      () => {
        this.getBaseData(1, key);
      }
    );
  };
  tabsCallback = (key) => {
    if (key == 1) {
      this.getBaseData(1, "1", 5);
      this.setState({
        tableKey: "1",
      });
    } else if (key == 2) {
      this.getBaseData(1, "4", 5);
      this.setState({
        tableKey: "4",
      });
    } else if (key == 3) {
      this.getBaseData(1, "2", 5);
      this.setState({
        tableKey: "2",
      });
    } else {
      this.getBaseData(1, "3", 5);
      this.setState({
        tableKey: "3",
      });
    }
  };
  workClick = (e) => {
    this.showEditModal(
      e.SOURCE_DATA_ID,
      e.SOURCE_FORMCODE,
      e.ID,
      e.NOTICE_TITLE,
      e.CODE
    );
  };
  ShowState(obj) {
    var thisResult =
      (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
    if (thisResult > 0) {
      return "正常";
    } else {
      return <span style={{ color: "red" }}>超期</span>;
    }
  }
  ShowStatus(obj) {
    if (obj.NOTICE_STATUS === 0) {
      return <span style={{ color: "red" }}>未读</span>;
    } else if (obj.NOTICE_STATUS === 3) {
      return "已读";
    } else {
      return "已办";
    }
  }
  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({
          formVisible: true,
        });
      }
    );
  };
  clearData = () => {
    let newtmpData = { ...this.state.tmpData };
    newtmpData["data"].id = "";
    newtmpData["data"].homeReload = false;
    newtmpData.formCode = "";
    this.setState({
      formVisible: false,
      tmpData: [], //newtmpData
    });
  };
  handleCancel = () => {
    // 退出弹窗
    this.getBaseData(1, this.state.tableKey, 5);
    this.clearData();
  };
  closeModal = () => {
    this.setState({
      formVisible: false,
    });
  };
  getBaseData = (pagination, key, limit) => {
    const current = pagination ? pagination.current : 1;
    const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current);
    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]);
      }
    }
    //extendRule(json, "NOTICE_STATUS", 1, 0);
    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: (ret) => {
        if (ret && ret.IsSuccessful && ret.Data.newData) {
          this.setState({
            workData: ret.Data.newData,
            workTotal: ret.Data,
          });
        }
      },
    });
  };
  timeJudg = () => {
    let time = new Date();
    let hour = time.getHours();
    if (hour >= 6 && hour <= 11) {
      this.setState({
        timeNow: "上午好",
      });
    } else if (hour > 11 && hour <= 13) {
      this.setState({
        timeNow: "中午好",
      });
    } else if (hour > 13 && hour <= 18) {
      this.setState({
        timeNow: "下午好",
      });
    } else {
      this.setState({
        timeNow: "晚上好",
      });
    }
  };
  getUser = () => {
    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 (ret) {
          this.setState({
            userInfo: ret,
          });
        }
      },
    });
  };
  safeCheck = () => {
    let series = [];
    let seriesName = ["巡回检查", "例行检查", "专业检查", "综合检查"];
    let data3 = [
      [17, 20, 16, 20, 16, 16, 20, 16, 16, 20, 16, 4],
      [43, 41, 43, 32, 47, 33, 57, 38, 46, 42, 49, 39],
      [23, 21, 43, 12, 15, 13, 15, 16, 17, 14, 19, 24],
      [17, 20, 23, 42, 12, 17, 13, 15, 12, 17, 19, 34],
    ];
    let xData = [];
    for (let i = 0; i < 12; i++) {
      xData.unshift(this.getSixMonth(-i, "年", "月"));
    }
    for (let i = 0; i < data3.length; i++) {
      series.push({
        name: seriesName[i],
        type: "bar",
        stack: "总量",
        data: data3[i],
        barWidth: "20%",
        // itemStyle:{
        //   borderWidth:2,
        //   borderColor:'#fff',
        //   barBorderRadius:5,
        // }
      });
    }
    let safeChecks = document.getElementById("safeCheck");
    if (safeChecks) {
      let myChart = echarts.init(safeChecks);
      myChart.setOption({
        color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
          z: 22,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: "rgb(170,170,170)",
            interval: 0,
            textStyle: {
              lineHeight: 14,
            },
            formatter: function (param) {
              return param.split("年")[1];
            },
          },
        },
        legend: {
          data: ["巡回检查", "例行检查", "专业检查", "综合检查"],
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 15,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f2f2f2"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} ",
          },
        },
        series: series,
      });
    }
  };
  dangerChange = () => {
    let sourceName = [
      "按时整改隐患",
      "超期整改隐患",
      "未整改隐患",
      "隐患整改率",
    ];
    let ydata = [
      ["2", "5", "6", "8", "10", "9"],
      ["1", "7", "1", "2", "5", "4"],
      ["0", "1", "0", "3", "0", "1"],
      ["100.00", "92.31", "100.00", "76.92", "100.00", "92.86"],
    ];
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let xData = [];
    for (let i = 0; i < 6; i++) {
      xData.unshift(this.getSixMonth(-i, "-", ""));
    }
    let dangerChanges = document.getElementById("dangerChange");
    if (dangerChanges) {
      let myChart = echarts.init(dangerChanges);
      myChart.setOption({
        color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0,
          formatter: function (params) {
            return (
              params[0].name +
              "</br>" +
              params[0].marker +
              params[0].seriesName +
              " : " +
              params[0].value +
              "</br>" +
              params[1].marker +
              params[1].seriesName +
              " : " +
              params[1].value +
              "</br>" +
              params[2].marker +
              params[2].seriesName +
              " : " +
              params[2].value +
              "</br>" +
              params[3].marker +
              params[3].seriesName +
              " : " +
              params[3].value +
              "%"
            );
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
          z: 22,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: "rgb(170,170,170)",
            interval: 0,
            textStyle: {
              lineHeight: 14,
            },
          },
        },
        legend: {
          data: sourceName,
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 35,
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#f2f2f2"],
                // opacity:0.2
                // zlevel: -1,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            position: "right",
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#f2f2f2"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#f2f2f2",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: sourceName[0],
            type: "bar",
            data: ydata[0],
            barWidth: "10%",
            barGap: "10%",
            stack: null,
          },
          {
            name: sourceName[1],
            type: "bar",
            data: ydata[1],
            barWidth: "10%",
            barGap: "10%",
            stack: null,
          },
          {
            name: sourceName[2],
            type: "bar",
            data: ydata[2],
            barWidth: "10%",
            barGap: "10%",
            stack: null,
            // zlevel: 99,
          },
          {
            name: sourceName[3],
            type: "line",
            smooth: false,
            data: ydata[3],
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            // zlevel:100,
          },
        ],
      });
    }
  };
  timelyRate = () => {
    let timelyRates = document.getElementById("timelyRate");
    if (timelyRates) {
      let myChart = echarts.init(timelyRates);
      myChart.setOption(
        {
          title: [
            {
              text: "83%",
              x: "center",
              top: "40%",
              textStyle: {
                fontWeight: "normal",
                color: "#ffa94d",
                fontSize: "26",
              },
            },
            {
              text: "及时完成率",
              x: "center",
              top: "55%",
              textStyle: {
                fontWeight: "normal",

                fontSize: "14",
              },
            },
          ],
          color: "#ffd6b5",
          legend: {
            show: false,
            itemGap: 12,
            data: ["01", "02"],
          },

          series: [
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              radius: ["60%", "76%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              hoverAnimation: false,
              data: [
                {
                  value: 83,
                  name: "01",
                  itemStyle: {
                    normal: {
                      color: {
                        // 完成的圆环的颜色
                        colorStops: [
                          {
                            offset: 0,
                            color: "#ffa94d", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#f76707", // 100% 处的颜色
                          },
                        ],
                      },
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                  },
                },
                {
                  name: "02",
                  value: 17,
                },
              ],
            },
          ],
        },
        true
      );
    }
  };

  completeRate = () => {
    let completeRates = document.getElementById("completeRate");
    if (completeRates) {
      let myChart = echarts.init(completeRates);
      myChart.setOption({
        title: [
          {
            text: "99%",
            x: "center",
            top: "40%",
            textStyle: {
              fontWeight: "normal",
              color: "#0580f2",
              fontSize: "26",
            },
          },
          {
            text: "个人完成率",
            x: "center",
            top: "55%",
            textStyle: {
              fontWeight: "normal",

              fontSize: "14",
            },
          },
        ],
        color: ["rgba(176, 212, 251, 1)"],
        legend: {
          show: false,
          itemGap: 12,
          data: ["01", "02"],
        },

        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: true,
            radius: ["60%", "76%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: 99,
                name: "01",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: "02",
                value: 1,
              },
            ],
          },
        ],
      });
    }
  };

  riskLevel = () => {
    let riskLevel = [];
    let showData = [
      { value: 2, name: "一级" },
      { value: 5, name: "二级" },
      { value: 15, name: "三级" },
      { value: 30, name: "四级" },
    ];

    let riskLevels = document.getElementById("riskLevel");
    if (riskLevels) {
      let myChart = echarts.init(riskLevels);
      myChart.setOption({
        color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
        title: [
          {
            text: "52",
            x: "26%",
            y: "40%",
            textStyle: {
              fontSize: 26,
              fontWeight: "normal",
              color: ["#333"],
            },
          },
          {
            text: "风险总数",
            x: "24%",
            y: "55%",
            textStyle: {
              color: "#666",
              fontSize: 12,
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}:({d}%)",
        },
        legend: {
          icon: "pin",
          orient: "vartical",
          // x: "right",
          top: "18%",
          right: "15%",
          bottom: "20%",
          data: showData,
          // itemWidth: 20,
          // itemHeight: 14,
          itemGap: 25,
          formatter: function (name) {
            //通过name获取到数组对象中的单个对象
            let singleData = showData.filter(function (item) {
              return item.name == name;
            });
            let countAll = 0;
            showData.map((item) => {
              countAll = countAll + item.value;
            });

            return (
              name +
              "  |  " +
              // singleData[0].value +
              // "   |   " +
              Number((singleData[0].value / countAll) * 100).toFixed(2) +
              "%"
            );
          },
        },
        grid: {
          left: 30,
          containLabel: true,
          bottom: 10,
          top: 10,
          right: 30,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            clockwise: false,
            // minAngle: 20,
            avoidLabelOverlap: false,
            radius: ["50%", "65%"],
            center: ["30%", "50%"],
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 4,
                padding: "0 20px",
                borderRadius: 50,
              },
            },
            label: {
              show: false,
            },
            // color: color,
            data: showData,
          },
        ],
      });
    }
  };
  navToMenu = (ID) => {
    this.props.history.push({ pathname: `/main/${ID}` });
  };
  /**
   * 注销登录
   */
  handleLogout = () => {
    const { OrgId, userId } = this.props.login;
    const logJson = initFilter(OrgId, userId, "", 0, 1, 0);
    this.props.dispatch({
      type: "app/addLoginOut",
      payload: logJson,
    });
    localStorage.removeItem("accessToken");
    this.props.history.push({ pathname: "/login" });
  };

  handleUserMenuClick = (evt) => {
    switch (evt.key) {
      case "user-menu-logout":
        this.handleLogout();
        break;
      case "user-menu-cacheclean":
        window.localStorage.clear();
        message.success("清除成功，即将重新加载页面", 2, () => {
          setTimeout(() => window.location.reload(true), 500);
        });
        break;
      default:
        break;
    }
    this.setState({
      visible: false,
    });
  };
  ExpandCancel = () => {};
  showDetailModal = (formCode) => {
    console.log(this.state.mineType,'this.state.mineType')
    var titleTemp =
      this.state.mineType == 20
        ? "尾矿库"
        : this.state.mineType == 10
        ? "选矿厂"
        : "露天矿";
    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.ExpandCancel,
        homeReload: true,
      },
      formCode: formCode,
    };
    this.setState({ tmpData: newtmpData }, () => {
      var detailForm = {
        isShow: true,
        formCode: formCode,
        title: titleTemp,
      };
      this.setState({
        detailForm: detailForm,
      });
    });
  };
  doubleClear = () => {
    if (this.state.searchVisible === true) {
      this.setState({ searchVisible: false });
    } else if (this.state.searchTodayVisible === true) {
      this.setState({ searchTodayVisible: false });
    }

    this.getBaseData(1, this.state.tableKey, 5);
  };
  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: {} });
    }
  };
  handleSearch = (item) => {
    this.getBaseData(1, item, null);
  };
  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 });
  };
  detailFormClose = () => {
    var detailForm = {
      isShow: false,
      formCode: "",
      title: "",
    };
    this.setState({
      detailForm: detailForm,
    });
  };

  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.state.taskSelects = selectedRows;
      },
    };
    return (
      <div
        className="route-home"
        style={{
          padding: "0 10px",
          minHeight: "735px",
          height: "100%",
          width: "100%",
        }}
        ref={this.resizeRef}
      >
        <Modal
          visible={this.state.formVisible}
          title={this.state.noticeTitle}
          maskClosable={false}
          onCancel={this.handleCancel}
          footer={null}
          className="antd-modal-fullscreen"
          closeModal={this.closeModal}
          // forceRender={true}
        >
          <FormPage {...this.state.tmpData} />
        </Modal>
        <Modal
          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.searchVisible}
          zIndex={999}
          title={this.state.visibleTitle}
          maskClosable={false}
          onCancel={this.doubleClear}
          footer={false}
          className="antd-modal-homescreen"
        >
          <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>
              </Row>
            </Form>
            <Table
              // rowSelection={rowSelection}
              dataSource={this.state.workData}
              columns={this.state.searchColumns}
              onChange={(num) =>
                this.getBaseInfoData(num, this.state.currentpageIndex, null)
              }
              loading={this.state.showLoading}
              size="small"
              style={{ padding: "0px 20px" }}
            />
          </div>
        </Modal>
        <Modal
          visible={this.state.searchTodayVisible}
          title={this.state.visibleTitle}
          maskClosable={false}
          zIndex={999}
          onCancel={this.doubleClear}
          footer={false}
          className="antd-modal-homescreen"
        >
          <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.workData}
              columns={this.state.searchColumns}
              onChange={(num) =>
                this.getBaseInfoData(num, this.state.currentpageIndex, null)
              }
              loading={this.state.showLoading}
              size="small"
              style={{ padding: "0px 20px" }}
            />
          </div>
        </Modal>

        <Col span={24} style={{ width: "100%", height: "100%" }}>
          <Row
            gutter={12}
            style={{
              width: "100%",
              height: "25%",
              display: "flex",
              padding: "0px 20px",
              margin: "0px",
              minHeight: "242px",
              minWidth: "1704px",
              // justifyContent: "space-between",
              // backgroundColor: "#fff",
            }}
          >
            <Col
              span={10}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                padding: "0px 20px",
                borderRadius: "5px 0px 0px 5px",
                minWidth: "578px",
              }}
            >
              <div
                style={{
                  height: "50%",
                  width: "100%",
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  borderBottom: "2px solid #f6f6f6",
                }}
              >
                <div
                  style={{
                    width: "80px",
                    height: "80px",
                    borderRadius: "40px",
                    backgroundColor: "#fafafa",
                    fontSize: "18px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    marginRight: "10px",
                  }}
                >
                  {this.state.userInfo.SEX == 1 ? (
                    <img
                      src={require("../assets/home/avaB.png")}
                      style={{
                        height: "60px",
                        width: "60px",
                        alignItems: "center",
                        objectFit: "contain",
                      }}
                      alt="homeuser"
                    />
                  ) : (
                    <img
                      src={require("../assets/home/avaG.png")}
                      style={{
                        height: "60px",
                        width: "auto",
                        alignItems: "center",
                        objectFit: "contain",
                      }}
                      alt="homeuser"
                    />
                  )}
                </div>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    height: "60px",
                    justifyContent: "space-between",
                    flex: 1,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "space-between",
                      alignItems: "center",
                    }}
                  >
                    <div
                      style={{
                        color: "#303133",
                        fontSize: "16px",
                        marginLeft: "5px",
                        fontWeight: "bold",
                      }}
                    >
                      {this.state.userInfo.NAME}，{this.state.timeNow}
                    </div>
                    <div>
                      <Dropdown
                        visible={this.state.visible}
                        onVisibleChange={() => {
                          this.setState({ visible: !this.state.visible });
                        }}
                        overlay={
                          <Menu onClick={this.handleUserMenuClick}>
                            <Menu.Item
                              key="user-menu-UserInfoShow"
                              className="home-setting"
                            >
                              <Icon
                                type="pushpin"
                                style={{ fontSize: "14px", color: "" }}
                              ></Icon>
                              <FoUserInfoShow>我的资料</FoUserInfoShow>
                            </Menu.Item>
                            <Menu.Item
                              key="user-menu-updatepwd"
                              className="home-setting"
                            >
                              <Icon
                                type="edit"
                                style={{ fontSize: "14px" }}
                              ></Icon>
                              <ModifyPassword>修改密码</ModifyPassword>
                            </Menu.Item>
                            <Menu.Item
                              key="user-menu-cacheclean"
                              className="home-setting"
                            >
                              <Icon
                                type="tool"
                                style={{ fontSize: "14px" }}
                              ></Icon>
                              清除缓存
                            </Menu.Item>
                            {/* <Menu.Item>版本号:{config.version}</Menu.Item> */}
                            <Menu.Item
                              key="user-menu-logout"
                              className="home-setting"
                            >
                              <Icon
                                type="poweroff"
                                style={{ fontSize: "14px" }}
                              ></Icon>
                              退出登录
                            </Menu.Item>
                          </Menu>
                        }
                        placement="topLeft"
                        trigger={["click"]}
                      >
                        <Icon
                          type="setting"
                          className="home-setting-icon"
                        ></Icon>
                      </Dropdown>
                    </div>
                  </div>

                  <div style={{ display: "flex", flexDirection: "row" }}>
                    <div
                      className="home-userInfo-tabs"
                      style={{
                        marginRight: "10px",
                      }}
                    >
                      工号：{this.state.userInfo.CODE}
                    </div>
                    <div
                      className="home-userInfo-tabs"
                      style={{
                        marginRight: "10px",
                      }}
                    >
                      手机号：{this.state.userInfo.PHONE}
                    </div>
                    {this.state.userInfo.Nav_Department ? (
                      <div className="home-userInfo-tabs">
                        部门：{this.state.userInfo.Nav_Department.NAME}
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                </div>
              </div>
              <div className="home-userInfo-card">
                <UserInfo
                  data={this.state.workTotal.todoCount}
                  title="待办事项"
                  color="#2177d5"
                  showAll={() => {
                    this.showAll("1");
                  }}
                />
                <UserInfo
                  data={this.state.workTotal.timeOverCount}
                  title="待办超时"
                  color="#f76707"
                  showAll={() => {
                    this.showAll("4");
                  }}
                />
                <UserInfo
                  data={this.state.workTotal.doneCount}
                  title="已办事项"
                  color="#48a447"
                  showAll={() => {
                    this.showAll("2");
                  }}
                />
                <UserInfo
                  data={this.state.workTotal.todayNewCount}
                  title="今日提醒"
                  color="#fcc419"
                  showAll={() => {
                    this.showAll("3");
                  }}
                />
              </div>
            </Col>
            {/* <div style={{ width: "30px" }}></div> */}

            <Col
              span={7}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                borderRadius: "0px 5px 5px 0px",
                padding: "0px",
                display: "flex",
                flexDirection: "row",
                flex: 1,
                alignItems: " center",
                justifyContent: "center",
              }}
            >
              <Divider
                type="vertical"
                dashed={true}
                style={{ height: "80%", backgroundColor: "#fff" }}
              />
              <div className="home-rate">
                {/* <div className="home-always-title">
                  <div className="home-always-left">
                    <div className="home-always-badge"></div>
                    <div className="home-always-name">完成率</div>
                  </div>
                </div> */}
                <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                  <div
                    id="completeRate"
                    style={{
                      width: "100%",
                      height: "100%",
                      // minHeight: "180px",
                    }}
                  ></div>
                </div>
              </div>
              <Divider
                type="vertical"
                dashed={true}
                className="home-rate-divider"
              />
              {/* <div
                style={{
                  width: "20px",
                  height: "100%",
                  backgroundColor: "#f4f7ff",
                  minWidth: "20px",
                }}
              ></div> */}
              <div className="home-rate">
                {/* <div className="home-always-title">
                  <div className="home-always-left">
                    <div className="home-always-badge"></div>
                    <div className="home-always-name">及时完成率</div>
                  </div>
                </div> */}
                <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                  <div
                    id="timelyRate"
                    style={{
                      width: "100%",
                      height: "100%",
                      // minHeight: "180px",
                    }}
                  ></div>
                </div>
              </div>
            </Col>
            <div style={{ width: "30px", minWidth: "30px" }}></div>
            <Col
              span={6}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                padding: "0px",
                borderRadius: "5px",
                display: "flex",
                flexDirection: "column",
                minWidth: "466px",
              }}
            >
              <div className="home-always-title">
                <div className="home-always-left">
                  <div className="home-always-badge"></div>
                  <div className="home-always-name">我的常用功能</div>
                </div>

                {/* <Icon type="edit" className="home-always-icon"></Icon> */}
              </div>
              <div style={{ flex: 1, height: "100%", padding: "10px 20px" }}>
                <Row style={{ height: "50%" }}>
                  <AllTech
                    icon={"icon-a-zu291"}
                    title={"排班明细"}
                    techClick={() => {
                      this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu196"}
                    title={"作业票"}
                    techClick={() => {
                      this.navToMenu("b3767117-f0aa-4122-97c1-2fc58fbaf934");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu185"}
                    title={"外包作业票"}
                    techClick={() => {
                      this.navToMenu("7a9b51b1-3d56-4199-b450-f9f5f9cc3235");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu65"}
                    title={"作业任务识别"}
                    techClick={() => {
                      this.navToMenu("2beef9b3-e4b9-4b0b-9e82-238c4bf3be5d");
                    }}
                  />
                </Row>
                <Row style={{ height: "50%" }}>
                  <AllTech
                    icon={"icon-a-zu203"}
                    title={"检查任务制定"}
                    techClick={() => {
                      this.navToMenu("21b685c9-d298-4a14-9700-c9ab1bb8a918");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu181"}
                    title={"手动隐患上报"}
                    techClick={() => {
                      this.navToMenu("2e7835ef-0e5a-41b5-8bb7-ad9c64a6b2f4");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu198"}
                    title={"培训通知发起"}
                    techClick={() => {
                      this.navToMenu("818ab476-b29f-4db5-9393-fd13e1d2a565");
                    }}
                  />
                  <AllTech
                    icon={"icon-a-zu196"}
                    title={"普通会议通知"}
                    techClick={() => {
                      this.navToMenu("800abe55-a2cf-4e23-a2b6-1caf2dca816c");
                    }}
                  />
                </Row>
              </div>
            </Col>
          </Row>
          <Row
            gutter={12}
            style={{
              width: "100%",
              height: "40%",
              display: "flex",
              padding: "0px 20px",
              margin: "30px 0px",
              justifyContent: "space-between",
              alignItems: "center",
              minHeight: "388px",
              minWidth: "1704px",
              // backgroundColor: "#fff",
            }}
          >
            <Col
              span={17}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                padding: "0px",
                borderRadius: "5px",
                flex: 1,
                minWidth: "1168px",
              }}
            >
              <div className="home-always-title">
                <div className="home-always-left">
                  <div className="home-always-badge"></div>
                  <div className="home-always-name">我的工作</div>
                </div>

                {/* <Icon type="edit" className="home-always-icon"></Icon> */}
              </div>
              <div style={{ flex: 1, height: "100%", padding: "5px 0px" }}>
                <Tabs defaultActiveKey="1" onChange={this.tabsCallback}>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="schedule"
                          className="home-userInfo-Icon"
                          style={{ color: "#2177d5" }}
                        ></Icon>
                        待办事项{" "}
                      </span>
                    }
                    key="1"
                  >
                    <div
                      style={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                      }}
                    >
                      {this.state.workData.length > 0 ? (
                        <WorkBench
                          data={this.state.workData}
                          index={1}
                          benchCLick={this.workClick}
                        />
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </TabPane>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="hourglass"
                          className="home-userInfo-Icon"
                          style={{ color: "#f76707" }}
                        ></Icon>
                        待办超时
                      </span>
                    }
                    key="2"
                  >
                    <div
                      style={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                      }}
                    >
                      {this.state.workData.length > 0 ? (
                        <WorkBench
                          data={this.state.workData}
                          index={2}
                          benchCLick={this.workClick}
                        />
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </TabPane>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="check-circle"
                          className="home-userInfo-Icon"
                          style={{ color: "#48a447" }}
                        ></Icon>
                        已办事项
                      </span>
                    }
                    key="3"
                  >
                    <div
                      style={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                      }}
                    >
                      {this.state.workData.length > 0 ? (
                        <WorkBench
                          data={this.state.workData}
                          index={3}
                          benchCLick={this.workClick}
                        />
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </TabPane>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="bulb"
                          className="home-userInfo-Icon"
                          style={{ color: "#fcc419" }}
                        ></Icon>
                        今日提醒
                      </span>
                    }
                    key="4"
                  >
                    <div
                      style={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                      }}
                    >
                      {this.state.workData.length > 0 ? (
                        <WorkBench
                          data={this.state.workData}
                          index={4}
                          benchCLick={this.workClick}
                        />
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </TabPane>
                </Tabs>
              </div>
            </Col>
            <div style={{ width: "30px", minWidth: "30px" }}></div>

            <Col
              span={6}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                padding: "0px",
                borderRadius: "5px",
                display: "flex",
                flexDirection: "column",
                minWidth: "466px",
              }}
            >
              <div className="home-always-title">
                <div className="home-always-left">
                  <div className="home-always-badge"></div>
                  <div className="home-always-name">完成率排名</div>
                </div>

                {/* <Icon type="edit" className="home-always-icon"></Icon> */}
                <div onClick={() => this.showDetailModal("BI001_HOMEDETAIL")}>
                  <IconFont
                    type="icon-24gl-expand2"
                    // style={{
                    //   fontSize: "18px",
                    //   color: "#333333",
                    //   cursor: "pointer",
                    // }}
                    className="home-always-icon"
                  ></IconFont>
                </div>
              </div>
              <div
                style={{
                  flex: 1,
                  height: "100%",
                  padding: "15px 20px 15px 50px",
                }}
              >
                {this.state.completeName.map((item, index) => {
                  return (
                    <div className="home-rank">
                      {index == 0 ? (
                        <img
                          src={require("./../assets/home/4-1.png")}
                          className="home-img"
                          alt="4-1"
                        />
                      ) : index == 1 ? (
                        <img
                          src={require("./../assets/home/4-2.png")}
                          className="home-img"
                          alt="4-2"
                        />
                      ) : index == 2 ? (
                        <img
                          src={require("./../assets/home/4-3.png")}
                          className="home-img"
                          alt="4-3"
                        />
                      ) : (
                        <div className="home-rank-index">{index + 1}</div>
                      )}

                      <div className="home-rank-name">{item.name}</div>
                      <Progress
                        percent={item.value}
                        status="active"
                        style={{ width: "50%" }}
                      ></Progress>
                    </div>
                  );
                })}
              </div>
            </Col>
          </Row>
          <Row
            gutter={12}
            className="home-row"
            style={{
              margin: "0px 0px 10px 0px",
              minHeight: "275px",
              minWidth: "1704px",
            }}
          >
            <Col
              span={17}
              style={{
                height: "100%",
                display: "flex",
                flexDirection: "row",
                padding: "0px",
                borderRadius: "5px",
                flex: 1,
              }}
            >
              <div className="home-chart">
                <div className="home-always-title">
                  <div className="home-always-left">
                    <div className="home-always-badge"></div>
                    <div className="home-always-name">安全检查次数统计</div>
                  </div>
                  <div onClick={() => this.showDetailModal("BI054_HOMEDETAIL")}>
                    <IconFont
                      type="icon-24gl-expand2"
                      // style={{
                      //   fontSize: "18px",
                      //   color: "#333333",
                      //   cursor: "pointer",
                      // }}
                      className="home-always-icon"
                    ></IconFont>
                  </div>
                </div>
                <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                  <div
                    id="safeCheck"
                    style={{
                      width: "100%",
                      height: "100%",
                      // minHeight: "180px",
                    }}
                  ></div>
                </div>
              </div>
              <div style={{ width: "20px", minWidth: "20px" }}></div>
              <div className="home-chart">
                <div className="home-always-title">
                  <div className="home-always-left">
                    <div className="home-always-badge"></div>
                    <div className="home-always-name">月度隐患整改情况</div>
                  </div>
                  <div onClick={() => this.showDetailModal("BI055_HOMEDETAIL")}>
                    <IconFont
                      type="icon-24gl-expand2"
                      // style={{
                      //   fontSize: "18px",
                      //   color: "#333333",
                      //   cursor: "pointer",
                      // }}
                      className="home-always-icon"
                    ></IconFont>
                  </div>
                </div>
                <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                  <div
                    id="dangerChange"
                    style={{
                      width: "100%",
                      height: "100%",
                      // minHeight: "180px",
                    }}
                  ></div>
                </div>
              </div>
            </Col>
            <div style={{ width: "30px", minWidth: "30px" }}></div>

            <Col
              span={6}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                padding: "0px",
                borderRadius: "5px",
                display: "flex",
                flexDirection: "column",
                minWidth: "466px",
              }}
            >
              <div className="home-always-title">
                <div className="home-always-left">
                  <div className="home-always-badge"></div>
                  <div className="home-always-name">风险等级占比</div>
                </div>
                <div
                  onClick={() =>
                    this.showDetailModal("BI013_RISKANALYSISMODEL")
                  }
                >
                  <IconFont
                    type="icon-24gl-expand2"
                    // style={{
                    //   fontSize: "18px",
                    //   color: "#333333",
                    //   cursor: "pointer",
                    // }}
                    className="home-always-icon"
                  ></IconFont>
                </div>
              </div>
              <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                <div
                  id="riskLevel"
                  style={{
                    width: "100%",
                    height: "100%",
                    // minHeight: "180px",
                  }}
                ></div>
              </div>
            </Col>
          </Row>
        </Col>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(Home);