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,
  Progress,
  Tabs,
  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 { TabPane } = Tabs;

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      roleType: 0,
      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,
        },
      ],
      prepareJob: [
        {
          person: "阮保级",
          content: "手动隐患上报-指定责任单位",
          data: "2023-06-08 03:38",
          type: "超期", //0超期 1正常 2已办 3未读 4已读
        },
        {
          person: "张建华",
          content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
          data: "2023-03-08 04:38",
          type: "正常",
        },
        {
          person: "李国富",
          content: "纠正与预防措施通知单",
          data: "2023-05-08 03:28",
          type: "超期",
        },
        {
          person: "王思涵",
          content: "公司级例行检查任务表",
          data: "2023-06-28 14:38",
          type: "正常",
        },
        {
          person: "赵武娣",
          content: "公司级库区检查指定表",
          data: "2023-10-08 23:38",
          type: "超期",
        },
      ],
      overtimeJob: [
        {
          person: "阮保级",
          content: "手动隐患上报-指定责任单位",
          data: "2023-06-08 03:38",
          type: "超期", //0超期 1正常 2已办 3未读 4已读
        },
        {
          person: "张建华",
          content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
          data: "2023-03-08 04:38",
          type: "超期",
        },
        {
          person: "李国富",
          content: "纠正与预防措施通知单",
          data: "2023-05-08 03:28",
          type: "超期",
        },
        {
          person: "王思涵",
          content: "公司级例行检查任务表",
          data: "2023-06-28 14:38",
          type: "超期",
        },
        {
          person: "赵武娣",
          content: "公司级库区检查指定表",
          data: "2023-10-08 23:38",
          type: "超期",
        },
      ],
      overJob: [
        {
          person: "阮保级",
          content: "手动隐患上报-指定责任单位",
          data: "2023-06-08 03:38",
          type: "已办", //0超期 1正常 2已办 3未读 4已读
        },
        {
          person: "张建华",
          content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
          data: "2023-03-08 04:38",
          type: "正常",
        },
        {
          person: "李国富",
          content: "纠正与预防措施通知单",
          data: "2023-05-08 03:28",
          type: "已办",
        },
        {
          person: "王思涵",
          content: "公司级例行检查任务表",
          data: "2023-06-28 14:38",
          type: "已办",
        },
        {
          person: "赵武娣",
          content: "公司级库区检查指定表",
          data: "2023-10-08 23:38",
          type: "正常",
        },
      ],
      noticeJob: [
        {
          person: "阮保级",
          content: "手动隐患上报-指定责任单位",
          data: "2023-06-08 03:38",
          type: "未读", //0超期 1正常 2已办 3未读 4已读
        },
        {
          person: "张建华",
          content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
          data: "2023-03-08 04:38",
          type: "已读",
        },
        {
          person: "李国富",
          content: "纠正与预防措施通知单",
          data: "2023-05-08 03:28",
          type: "未读",
        },
        {
          person: "王思涵",
          content: "公司级例行检查任务表",
          data: "2023-06-28 14:38",
          type: "已办",
        },
        {
          person: "赵武娣",
          content: "公司级库区检查指定表",
          data: "2023-10-08 23:38",
          type: "已读",
        },
      ],
    };
  }

  componentDidMount() {
    if (window.navigator.userAgent.indexOf("Windows") < 1) {
      window.location.replace(config.guideH5Host);
      //alert('手机');
    }
    this.riskLevel();
    // this.homeRound();
    this.completeRate();
    this.timelyRate();
    this.safeCheck();
    this.dangerChange();
    this.getUser();
  }
  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 && ret.Nav_Department) {
         console.log(ret,'08080897878')
        }
      },
    });
  }
  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 = [
      "2023年4月",
      "2023年5月",
      "2023年6月",
      "2023年7月",
      "2023年8月",
      "2023年9月",
      "2023年10月",
      "2023年11月",
      "2023年12月",
      "2024年1月",
      "2024年2月",
      "2024年3月",
    ];
    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: "5%",
          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 xData = [
      ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
      ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
      ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
      ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
    ];
    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: "10%",
          // right: "10%",
          bottom: "15%",
          top: "5%",
          containLabel: true,
          z: 22,
        },
        xAxis: {
          type: "category",
          data: xData[0],
          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(
        {
          backgroundColor: "#fff",
          title: {
            text: [83] + "%",
            textStyle: {
              color: "#ffa94d",
              fontSize: 20,
            },
            left: "center",
            top: "43%",
          },
          tooltip: {
            formatter: function (params) {
              return (
                '<span style="color: #fff;">及时完成任务数：' +
                [1265] +
                "</span>"
              );
            },
          },
          angleAxis: {
            max: 100,
            clockwise: true, // 逆时针
            // 隐藏刻度线
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: {
            center: ["50%", "50%"],
            radius: "130%", //图形大小
          },
          series: [
            {
              stack: "测试",
              type: "bar",
              data: [83],
              showBackground: true,
              backgroundStyle: {
                color: "#EFF2F5",
                borderColor: "#EFF2F5",
                borderWidth: 3,
              },
              coordinateSystem: "polar",
              roundCap: true,
              barWidth: 10,
              silent: true,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#ffa94d",
                    },
                    {
                      offset: 1,
                      color: "#f76707",
                    },
                  ]),
                  borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#ffa94d",
                    },
                    {
                      offset: 1,
                      color: "#f76707",
                    },
                  ]),
                  borderWidth: 1,
                },
              },
            },
            {
              stack: "测试",
              type: "bar",
              data: [0.01],
              showBackground: true,
              backgroundStyle: {
                color: "#fff9f4",
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowBlur: 10,
                shadowOffsetY: 2,
              },
              coordinateSystem: "polar",
              roundCap: true,
              barWidth: 10,
              itemStyle: {
                color: "#ffd5b7",
                borderColor: "rgba(255,132,44, 1)",
                borderWidth: 3,
              },
            },
          ],
        },
        true
      );
    }
  };

  completeRate = () => {
    let completeRates = document.getElementById("completeRate");
    if (completeRates) {
      let myChart = echarts.init(completeRates);
      myChart.setOption({
        title: {
          text: "93%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#0580f2",
            fontSize: "20",
          },
        },
        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: 93,
                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: 7,
              },
            ],
          },
        ],
      });
    }
  };

  riskLevel = () => {
    let riskLevel = [];
    let showData = [
      { value: 20, name: "一级" },
      { value: 10, 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: "60",
          x: "26%",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: ["#333"],
          },
          subtextStyle: {
            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,
          },
        ],
      });
    }
  };

  render() {
    return (
      <div
        className="route-home"
        style={{
          padding: "0 10px",
          minHeight: "735px",
          height: "100%",
          width: "100%",
        }}
        ref={this.resizeRef}
      >
        <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",
              // justifyContent: "space-between",
              // backgroundColor: "#fff",
            }}
          >
            <Col
              span={8}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                padding: "0px 20px",
                borderRadius: "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.roleType == 0 ? (
                    <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",
                  }}
                >
                  <div
                    style={{
                      color: "#303133",
                      fontSize: "16px",
                      marginLeft: "5px",
                      fontWeight: "bold",
                    }}
                  >
                    李阳，下午好
                  </div>
                  <div style={{ display: "flex", flexDirection: "row" }}>
                    <div
                      className="home-userInfo-tabs"
                      style={{
                        marginRight: "10px",
                      }}
                    >
                      工号：xlk001004
                    </div>
                    <div
                      className="home-userInfo-tabs"
                      style={{
                        marginRight: "10px",
                      }}
                    >
                      手机号：15398220010
                    </div>
                    <div className="home-userInfo-tabs">岗位：运输二班</div>
                  </div>
                </div>
              </div>
              <div className="home-userInfo-card">
                <div className="home-userInfo">
                  <div className="home-userInfo-pad">
                    <Icon
                      type="schedule"
                      className="home-userInfo-Icon"
                      style={{ color: "#2177d5" }}
                    ></Icon>
                    <div className="home-userInfo-title">待办事项</div>
                  </div>
                  <div
                    className="home-userInfo-content"
                    style={{ color: "#2177d5" }}
                  >
                    300
                  </div>
                </div>
                <div className="home-userInfo">
                  <div className="home-userInfo-pad">
                    <Icon
                      type="hourglass"
                      className="home-userInfo-Icon"
                      style={{ color: "#f76707" }}
                    ></Icon>
                    <div className="home-userInfo-title">待办超时</div>
                  </div>
                  <div
                    className="home-userInfo-content"
                    style={{ color: "#f76707" }}
                  >
                    951
                  </div>
                </div>
                <div className="home-userInfo">
                  <div className="home-userInfo-pad">
                    <Icon
                      type="check-circle"
                      className="home-userInfo-Icon"
                      style={{ color: "#48a447" }}
                    ></Icon>
                    <div className="home-userInfo-title">已办事项</div>
                  </div>
                  <div
                    className="home-userInfo-content"
                    style={{ color: "#48a447" }}
                  >
                    1328
                  </div>
                </div>
                <div className="home-userInfo">
                  <div className="home-userInfo-pad">
                    <Icon
                      type="bulb"
                      className="home-userInfo-Icon"
                      style={{ color: "#fcc419" }}
                    ></Icon>
                    <div className="home-userInfo-title">今日提醒</div>
                  </div>
                  <div
                    className="home-userInfo-content"
                    style={{ color: "#fcc419" }}
                  >
                    49
                  </div>
                </div>
              </div>
            </Col>
            <div style={{ width: "30px" }}></div>
            <Col
              span={9}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                borderRadius: "5px",
                padding: "0px",
                display: "flex",
                flexDirection: "row",
                flex: 1,
                minWidth: "320px",
              }}
            >
              <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>
              <div
                style={{
                  width: "20px",
                  height: "100%",
                  backgroundColor: "#f4f7ff",
                }}
              ></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" }}></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%" }}>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu57"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">用户列表</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu198"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">菜单配置</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu83"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">排班日历</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu291"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">角色列表</span>
                  </Col>
                </Row>
                <Row style={{ height: "50%" }}>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu73"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">模版表单</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu164"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">排班明细</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu203"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">会议记录</span>
                  </Col>
                  <Col span={6} className="home-tech-col">
                    <div className="home-tech-back">
                      <IconFont
                        type="icon-a-zu196"
                        className="home-tech-icon"
                      ></IconFont>
                    </div>
                    <span className="home-tech-name">工作记录</span>
                  </Col>
                </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",
              // backgroundColor: "#fff",
            }}
          >
            <Col
              span={17}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                padding: "0px",
                borderRadius: "5px",
                flex: 1,
              }}
            >
              <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">
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="schedule"
                          className="home-userInfo-Icon"
                          style={{ color: "#2177d5" }}
                        ></Icon>
                        待处理工单
                      </span>
                    }
                    key="1"
                  >
                    <div className="home-job-content">
                      {this.state.prepareJob.map((item, index) => {
                        return (
                          <div className="home-work-wrap">
                            <div className="home-work-icon">
                              <IconFont
                                type="icon-Pin"
                                className="home-job-icon"
                              ></IconFont>
                            </div>
                            <div className="home-work-right">
                              <div className="home-work-top">
                                <div
                                  className={
                                    item.type == "超期"
                                      ? "home-work-type-red"
                                      : item.type == "未办"
                                      ? "home-work-type-yellow"
                                      : "home-work-type-black"
                                  }
                                >
                                  {item.type}
                                </div>
                                <div className="home-work-person">
                                  发起人：{item.person}
                                </div>
                              </div>
                              <div className="home-work-title">
                                {item.content}
                              </div>
                              <div className="home-work-date">{item.data}</div>
                              <div className="home-work-detail">查看详情</div>
                            </div>
                          </div>
                        );
                      })}
                      <div className="home-work-more">
                        <div className="badge-style">
                          查看更多
                          <Icon type="right" className="home-more-icon"></Icon>
                        </div>
                        <img
                          src={require("./../assets/home/图层_11.png")}
                          alt=""
                        ></img>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="hourglass"
                          className="home-userInfo-Icon"
                          style={{ color: "#f76707" }}
                        ></Icon>
                        超时工单
                      </span>
                    }
                    key="2"
                  >
                    <div className="home-job-content">
                      {this.state.overtimeJob.map((item, index) => {
                        return (
                          <div className="home-work-wrap-overtime">
                            <div className="home-work-icon">
                              <IconFont
                                type="icon-Clock"
                                className="home-job-icon"
                              ></IconFont>
                            </div>
                            <div className="home-work-right">
                              <div className="home-work-top">
                                <div
                                  className={
                                    item.type == "超期"
                                      ? "home-work-type-red"
                                      : item.type == "未办"
                                      ? "home-work-type-yellow"
                                      : "home-work-type-black"
                                  }
                                >
                                  {item.type}
                                </div>
                                <div className="home-work-person">
                                  发起人：{item.person}
                                </div>
                              </div>
                              <div className="home-work-title">
                                {item.content}
                              </div>
                              <div className="home-work-date">{item.data}</div>
                              <div className="home-work-detail">查看详情</div>
                            </div>
                          </div>
                        );
                      })}
                      <div className="home-work-more">
                        <div className="badge-style">
                          查看更多
                          <Icon type="right" className="home-more-icon"></Icon>
                        </div>
                        <img
                          src={require("./../assets/home/图层_11.png")}
                          alt=""
                        ></img>
                      </div>
                    </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 className="home-job-content">
                      {this.state.overJob.map((item, index) => {
                        return (
                          <div className="home-work-wrap-over">
                            <div className="home-work-icon">
                              <IconFont
                                type="icon-a-phonebook"
                                className="home-job-icon"
                              ></IconFont>
                            </div>
                            <div className="home-work-right">
                              <div className="home-work-top">
                                <div
                                  className={
                                    item.type == "超期"
                                      ? "home-work-type-red"
                                      : item.type == "未办"
                                      ? "home-work-type-yellow"
                                      : "home-work-type-black"
                                  }
                                >
                                  {item.type}
                                </div>
                                <div className="home-work-person">
                                  发起人：{item.person}
                                </div>
                              </div>
                              <div className="home-work-title">
                                {item.content}
                              </div>
                              <div className="home-work-date">{item.data}</div>
                              <div className="home-work-detail">查看详情</div>
                            </div>
                          </div>
                        );
                      })}
                      <div className="home-work-more">
                        <div className="badge-style">
                          查看更多
                          <Icon type="right" className="home-more-icon"></Icon>
                        </div>
                        <img
                          src={require("./../assets/home/图层_11.png")}
                          alt=""
                        ></img>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane
                    tab={
                      <span className="home-job-title">
                        <Icon
                          type="bulb"
                          className="home-userInfo-Icon"
                          style={{ color: "#fcc419" }}
                        ></Icon>
                        今日提醒
                      </span>
                    }
                    key="4"
                  >
                    <div className="home-job-content">
                      {this.state.noticeJob.map((item, index) => {
                        return (
                          <div className="home-work-wrap-warn">
                            <div className="home-work-icon">
                              <IconFont
                                type="icon-bell"
                                className="home-job-icon"
                              ></IconFont>
                            </div>
                            <div className="home-work-right">
                              <div className="home-work-top">
                                <div
                                  className={
                                    item.type == "超期"
                                      ? "home-work-type-red"
                                      : item.type == "未办" ||
                                        item.type == "未读"
                                      ? "home-work-type-yellow"
                                      : "home-work-type-black"
                                  }
                                >
                                  {item.type}
                                </div>
                                <div className="home-work-person">
                                  发起人：{item.person}
                                </div>
                              </div>
                              <div className="home-work-title">
                                {item.content}
                              </div>
                              <div className="home-work-date">{item.data}</div>
                              <div className="home-work-detail">查看详情</div>
                            </div>
                          </div>
                        );
                      })}
                      <div className="home-work-more">
                        <div className="badge-style">
                          查看更多
                          <Icon type="right" className="home-more-icon"></Icon>
                        </div>
                        <img
                          src={require("./../assets/home/图层_11.png")}
                          alt=""
                        ></img>
                      </div>
                    </div>
                  </TabPane>
                </Tabs>
                ,
              </div>
            </Col>
            <div style={{ width: "30px" }}></div>

            <Col
              span={6}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                padding: "0px",
                borderRadius: "5px",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <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: "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",
            }}
          >
            <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>
                <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" }}></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>
                <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" }}></div>

            <Col
              span={6}
              style={{
                backgroundColor: "#fff",
                height: "100%",
                padding: "0px",
                borderRadius: "5px",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <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="riskLevel"
                  style={{
                    width: "100%",
                    height: "100%",
                    // minHeight: "180px",
                  }}
                ></div>
              </div>
            </Col>
          </Row>
        </Col>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(Home);