mh-lcmk-sms-web/src/layout/FullScreen.js

import React, { useState, useEffect, useMemo, useRef } from "react";
import { connect } from "dva";
import { withRouter, matchPath } from "dva/router";
import { Scrollbars } from "react-custom-scrollbars";
import { Icon, Row, Col, Progress } from "antd";
import EnergyIcon from "../utils/energyIcon";
import { $consts } from "../plugins";
import styles from "./full.less";
import echarts from "echarts";
import realGif from "../assets/layout/mofang.png";
import logo from "../assets/layout/header-logo.png";
import debounce from "lodash.debounce";
import {
  FullScreenContainer,
  BorderBox8,
  BorderBox10,
  ScrollBoard,
  CapsuleChart,
  WaterLevelPond,
} from "@jiaminghi/data-view-react";
import { text } from "@jiaminghi/data-view-react/lib/index-cd27b7f6";
import { Scale } from "canvg";

const stud = (eve) => {
  return (
    <div
      style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
    >
      <div
        style={{
          width: "70%",
          backgroundColor: "#ec1c24",
          height: "30%",
          borderRadius: "10px",
          position: "relative",
          top: "50%",
          transform: "translateY(-50%)",
        }}
      ></div>
      <div>90</div>
    </div>
  );
};
const getScale = () => {
  const width = 1920,
    height = 1080; // 此处可以根据实际设计稿尺寸修改
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

class FullScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // screenWidh: window.screen.width > 2000 ? true : false,
      nowDate: "",
      checkData: [
        { name: "公司检查", value: 103 },
        { name: "部门检查", value: 79 },
        { name: "车间检查", value: 86 },
        { name: "班组检查", value: 94 },
      ],
      widthp: "70%",
      scrollConfig: {
        header: ["检查类型", "检查次数", "完成率"],
        data: [
          ["巡回检查", "322", "99%"],
          ["例行检查", "255", "99%"],
          ["日常检查", "253", "99%"],
          ["专业检查", "123", "99%"],
          ["巡回检查", "322", "99%"],
          ["例行检查", "255", "99%"],
          ["日常检查", "253", "99%"],
          ["专业检查", "123", "99%"],
        ],
        waitTime: 200000,
      },
      safescrollConfig: {
        header: ["部门", "车间", "活动", "进度"],
        data: [
          ["矿山部", "穿爆车间", "班前会议", "98%"],
          ["矿山部", "金宇宁化分公司", "班前会议", "98%"],
          ["选矿部", "破碎车间", "班前会议", "95%"],
          ["矿山部", "磨重车间", "班前会议", "92%"],
          ["矿山部", "机电设备管理科", "班前会议", "83%"],
          ["矿山部", "钨细泥回收车间", "班前会议", "93%"],
          ["矿山部", "穿爆车间", "班前会议", "90%"],
          ["矿山部", "穿爆车间", "班前会议", "90%"],
          ["矿山部", "穿爆车间", "班前会议", "90%"],
        ],
        index: true,
        columnWidth: [80, 200, 300, 200, 200],
        align: ["center"],
        waitTime: 2000,
      },
      chartConfig: {
        data: [
          {
            name: "电工日常班",
            value: 97,
          },
          {
            name: "电工三班",
            value: 95,
          },
          {
            name: "破碎一班",
            value: 91,
          },
          {
            name: "磨重二班",
            value: 86,
          },
          {
            name: "磨重三班",
            value: 83,
          },
        ],
        showValue: true,
      },
      WaterLevelPondconfig1: {
        data: [75],
        shape: "round",
      },
      WaterLevelPondconfig2: {
        data: [85],
        shape: "round",
      },
      WaterLevelPondconfig3: {
        data: [95],
        shape: "round",
      },
      completeData: [
        {
          name: "班组会议完成率",
          value: 75,
        },
        {
          name: "岗位交接班完成率",
          value: 85,
        },
        {
          name: "岗位当班记录完成率",
          value: 95,
        },
      ],
      // completeDatatwo: {
      //   name: "岗位交接班完成率",
      //   value: 85,
      //   id: "completetwo",
      // },
      // completeDatathree: {
      //   name: "岗位当班记录完成率",
      //   value: 95,
      //   id: "completethree",
      // },
      meetingData: [
        {
          name: "班前会议",
          value: 32,
        },
        {
          name: "班组活动",
          value: 132,
        },
        {
          name: "岗位交接班",
          value: 32,
        },
        {
          name: "岗位当班",
          value: 132,
        },
        {
          name: "班前会议",
          value: 32,
        },
        {
          name: "班组活动",
          value: 132,
        },
        {
          name: "岗位交接班",
          value: 32,
        },
        {
          name: "岗位当班",
          value: 132,
        },
      ],
      roaData: [
        {
          name: "总任务数",
          value: 1456,
        },
        {
          name: "超时待办数",
          value: 132,
        },
        {
          name: "安全检查数",
          value: 1456,
        },
        {
          name: "检查完成率",
          value: 32,
        },
        {
          name: "职业危害",
          value: 132,
        },
        {
          name: "管控措施",
          value: 1456,
        },
        {
          name: "安全检查库",
          value: 132,
        },
        {
          name: "危险源库",
          value: 32,
        },
        {
          name: "培训计划完成率",
          value: 132,
        },
        {
          name: "用户活跃度",
          value: 1456,
        },
        {
          name: "系统用户数",
          value: 132,
        },
        {
          name: "正常已办数",
          value: 32,
        },
        {
          name: "未完成数",
          value: 132,
        },
      ],
      scale: getScale(),
    };
    // this.scrollConfig = {
    //   header: ["检查类型", "检查次数", "完成率"],
    //   data: [
    //     ["巡回检查", "322", "行1列3"],
    //     ["例行检查", "255", "行2列3"],
    //     ["日常检查", "253", "行3列3"],
    //     ["专业检查", "123", "行4列3"],
    //     ["巡回检查", "322", "行1列3"],
    //     ["例行检查", "255", "行2列3"],
    //     ["日常检查", "253", "行3列3"],
    //     ["专业检查", "123", "行4列3"],
    //   ],
    //   waitTime: 200000,
    // };
  }

  setScale = debounce(() => {
    // debounce节流
    // 获取到缩放比，设置它
    let scale = getScale();
    this.setState({ scale });
  }, 500);

  componentDidMount() {
    window.addEventListener("resize", this.setScale); // 得到呈现的屏幕宽高比
    this.riskLevel();
    this.safedanger();
    const eve = () => {
      return <div>11111</div>;
    };
    // setInterval(this.getDate(), 1000);
    this.timer = setInterval(() => {
      this.setState({
        nowDate: this.getDate(),
      });
    }, 1000);
    // setTimeout(()=>{
    //   this.setState({
    //     nowDate:this.getDate()
    //   })
    // },1000)

    this.completeChart(this.state.completeData);
    // this.completeChart(this.state.completeDatatwo);
    // this.completeChart(this.state.completeDatathree);
    // this.setState({
    //   scrollConfig: {
    //     header: ["检查类型", "检查次数", "完成率"],
    //     data: [
    //       [
    //         "巡回检查",
    //         "322",
    //         "<div style='width:`{this.state.widthp}`;height:30%;background-color:#ec1c24;border-radius:10px;position:relative;top:50%;transform:translateY(-50%);'></div>",
    //       ],
    //       ["例行检查", "255", eve],
    //       ["日常检查", "253", "99%"],
    //       ["专业检查", "123", "99%"],
    //       ["巡回检查", "322", "99%"],
    //       ["例行检查", "255", "99%"],
    //       ["日常检查", "253", "99%"],
    //       ["专业检查", "123", "99%"],
    //     ],
    //     waitTime: 2000,
    //   },
    // });
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.setScale);
    clearInterval(this.timer);
  }
  getDate = () => {
    var myDate = new Date();
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    // var hours = myDate.getHours(); //获取当前小时
    // var minutes = myDate.getMinutes(); //获取当前分钟

    if (myDate.getHours() < 10) {
      var hours = "0" + myDate.getHours();
    } else {
      hours = myDate.getHours(); //获取当前小时
    }
    if (myDate.getMinutes() < 10) {
      var minutes = "0" + myDate.getMinutes();
    } else {
      minutes = myDate.getMinutes(); //获取当前分钟
    }
    if (myDate.getSeconds() < 10) {
      var seconds = "0" + myDate.getSeconds();
    } else {
      seconds = myDate.getSeconds(); //获取当前秒
    }

    var now =
      year +
      " 年 " +
      mon +
      " 月 " +
      date +
      " 日 " +
      "\t\t\t" +
      hours +
      " : " +
      minutes +
      " : " +
      seconds;
    return now;
  };
  completeChart = (evt) => {
    let seriesArr = [];
    let centerArr = [
      ["17%", "50%"],
      ["50%", "50%"],
      ["83%", "50%"],
    ];
    evt.forEach((item, index) => {
      seriesArr.push(
        {
          name: "统计",
          type: "gauge",
          radius: "75%", //图表尺寸
          center: centerArr[index],
          axisLine: {
            show: true,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0.05, "#a62efb"],
                [0.1, "#af23fa"],
                [0.15, "#b31ffa"],
                [0.2, "#b71afa"],
                [0.25, "#b51dfa"],
                [0.3, "#b220fa"],
                [0.35, "#a42ffb"],
                [0.4, "#993dfb"],
                [0.45, "#8f47fb"],
                [0.5, "#7b5efc"],
                [0.55, "#6476fc"],
                [0.6, "#4c91fd"],
                [0.65, "#35abfe"],
                [0.7, "#24befe"],
                [0.75, "#12d1ff"],
                [0.8, "#06defe"],
                [0.85, "#05e0ff"],
                [0.9, "#06deff"],
                [0.95, "#06deff"],
                [1, "#06deff"],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "auto",
              width: 2,
            },
            length: -5,
            splitNumber: 5,
          },
          splitLine: {
            show: true,
            length: -10,
            lineStyle: {
              color: "auto",
              width: 2,
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            //仪表盘指针
            show: false,
          },
          detail: {
            show: false,
          },
          title: {
            show: true,
            offsetCenter: [0, "100%"], // x, y，单位px
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [
            {
              name: item.name,
            },
          ],
        },
        {
          type: "gauge",
          radius: "70%",
          center: centerArr[index],
          splitNumber: 0, //刻度数量
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: true,
            lineStyle: {
              width: 10,
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#A52EFA",
                    },
                    {
                      offset: 1,
                      color: "#07DDFD",
                    },
                  ]),
                ],
              ],
            },
          },
          //分隔线样式。
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: false,
          },
          title: {
            show: false,
            offsetCenter: [0, "-20%"], // x, y，单位px
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          //仪表盘详情，用于显示数据。
          detail: {
            show: true,
            offsetCenter: [0, 0],
            color: "#fff",
            formatter: function (params) {
              return params + "%";
            },
            textStyle: {
              fontSize: 22,
            },
          },
          data: [
            {
              //  name: evt.name,
              value: item.value,
            },
          ],
        }
      );
    });
    let completeCharts = document.getElementById("completeone");
    if (completeCharts) {
      let myChart = echarts.init(completeCharts);
      myChart.setOption({
        // backgroundColor:'#000',
        series: seriesArr,
      });
    }
  };
  safedanger = () => {
    let bgColor = "#000";
    let color = [
      "#0090FF",
      "#36CE9E",
      "#e690d1",
      // "#FF515A",
      // "#8B5CFF",
      // "#00CA69",
    ];
    let echartData = [
      {
        name: "1",
        value1: 99,
        value2: 93,
        value3: 90,
      },
      {
        name: "2",
        value1: 95,
        value2: 98,
        value3: 60,
      },
      {
        name: "3",
        value1: 92,
        value2: 99,
        value3: 90,
      },
      {
        name: "4",
        value1: 99,
        value2: 96,
        value3: 96,
      },
      {
        name: "5",
        value1: 80,
        value2: 85,
        value3: 91,
      },
      {
        name: "6",
        value1: 99,
        value2: 65,
        value3: 80,
      },
      {
        name: "7",
        value1: 92,
        value2: 97,
        value3: 70,
      },
      {
        name: "8",
        value1: 75,
        value2: 96,
        value3: 90,
      },
      {
        name: "9",
        value1: 93,
        value2: 95,
        value3: 90,
      },
      {
        name: "10",
        value1: 100,
        value2: 97,
        value3: 90,
      },
      {
        name: "11",
        value1: 99,
        value2: 93,
        value3: 90,
      },
      {
        name: "12",
        value1: 93,
        value2: 87,
        value3: 90,
      },
    ];

    let xAxisData = echartData.map((v) => v.name);
    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
    let yAxisData1 = echartData.map((v) => v.value1);
    // [100, 138, 350, 173, 180, 150, 180, 230]
    let yAxisData2 = echartData.map((v) => v.value2);
    let yAxisData3 = echartData.map((v) => v.value3);
    // [233, 233, 200, 180, 199, 233, 210, 180]
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };
    let opretionTrends = document.getElementById("opretionTrend");
    if (opretionTrends) {
      let myChart = echarts.init(opretionTrends);
      myChart.setOption({
        backgroundColor: "",
        color: color,
        legend: {
          right: 10,
          top: 10,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                %`;
            });

            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // color: "#ffffff",
              shadowColor: "rgba(225,225,225,1)",
              shadowBlur: 5,
            },
          },
        },
        grid: {
          // top: 100,
          top: "25%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}月",
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "选矿",
            type: "line",
            smooth: true,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                // shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: hexToRgba(color[0], 0.3),
            //         },
            //         {
            //           offset: 1,
            //           color: hexToRgba(color[0], 0.1),
            //         },
            //       ],
            //       false
            //     ),
            //     shadowColor: hexToRgba(color[0], 0.1),
            //     shadowBlur: 10,
            //   },
            // },
            data: yAxisData1,
          },
          {
            name: "矿山",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                // shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8,
              },
            },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: hexToRgba(color[1], 0.3),
            //         },
            //         {
            //           offset: 1,
            //           color: hexToRgba(color[1], 0.1),
            //         },
            //       ],
            //       false
            //     ),
            //     shadowColor: hexToRgba(color[1], 0.1),
            //     shadowBlur: 10,
            //   },
            // },
            data: yAxisData2,
          },
          {
            name: "尾矿",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[2],
                shadowBlur: 3,
                // shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8,
              },
            },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: hexToRgba(color[1], 0.3),
            //         },
            //         {
            //           offset: 1,
            //           color: hexToRgba(color[1], 0.1),
            //         },
            //       ],
            //       false
            //     ),
            //     shadowColor: hexToRgba(color[1], 0.1),
            //     shadowBlur: 10,
            //   },
            // },
            data: yAxisData3,
          },
        ],
      });
    }
  };
  riskLevel = () => {
    let riskLevel = [];
    let showData = [
      { value: 2, name: "一级" },
      { value: 5, name: "二级" },
      { value: 15, name: "三级" },
      { value: 30, name: "四级" },
    ];

    let riskLevels = document.getElementById("riskLevelFull");
    if (riskLevels) {
      let myChart = echarts.init(riskLevels);
      myChart.setOption({
        color: ["#c92a2a", "#FF6710", "#FFDD1E", "#0091FF", "#fa8a89"],
        title: [
          {
            text: "52",
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: 26,
              fontWeight: "normal",
              color: ["#fff"],
            },
          },
          {
            text: "风险总数",
            x: "center",
            y: "55%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}:({d}%)",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            minAngle: 20,
            radius: ["45%", "70%"],
            center: ["50%", "50%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: {
              show: true,
              position: "outside",
              // formatter: '{a|{b}：{d}%}\n{hr|}',
              formatter: "{a|{b}：}{e|{d}%}\n",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-15, 0, 0, 0],
                  fontSize: 15,
                  // fontWeight: "bold",
                  color: "#fff",
                  // fontFamily:'站酷庆科黄油体',
                  // letterSpacing: 3,
                },
                e: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [-15, 0, 0, 5],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                  type: "dashed",
                },
              },
            },
            // itemStyle: {
            //   //图形样式
            //   normal: {
            //     borderColor: "#fff",
            //     borderWidth: 2,
            //     padding: "0 20px",
            //     borderRadius: 50,
            //   },
            // },
            // color: color,
            data: showData,
          },
        ],
      });
    }
  };

  render() {
    const width = 1920,
      height = 1080;
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    const { scale } = this.state;
    return (
      <React.Fragment>
        <FullScreenContainer>
          <div
            className={styles.box}
            style={{
              transform: `scale(${scale}) translate(-50%, -50%)`,
              WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
              width,
              height,
            }}
          >
            <div className={styles.blackBack}>
              <div className={styles.backImage}>
                <div className={styles.header}>
                  <Row style={{ width: "100%", height: "100%" }}>
                    <Col
                      span={8}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "flex-start",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "flex-start",
                          flexDirection: "row",
                          width: "80%",
                        }}
                      >
                        <img
                          src={logo}
                          alt="logo"
                          style={{
                            width: "auto",
                            height: "52px",
                            margin: "10px 20px 10px 50px",
                          }}
                        ></img>
                        <div
                          className="slide-style"
                          style={{ color: "#fff", fontSize: "18px" }}
                        >
                          <p className="slide-text-style">
                            安全方针：安全第一、综合治理、控制风险、科学发展
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全理念：一切风险皆可控，一切事故皆可防！
                          </p>
                        </div>
                      </div>
                    </Col>
                    <Col
                      span={8}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <div className={styles.headerText}>
                        宁化行洛坑安全生产标准化运营平台
                      </div>
                    </Col>
                    <Col
                      span={8}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "flex-end",
                      }}
                    >
                      <div
                        style={{
                          color: "#fff",
                          fontSize: "20px",
                          margin: "10px 50px 10px 20px",
                          fontWeight: "bold",
                          height: "52px",
                        }}
                      >
                        {this.state.nowDate}
                      </div>
                    </Col>
                  </Row>
                </div>
                <div className={styles.row}>
                  <Row style={{ width: "100%", height: "100%" }}>
                    <Col span={8} className={styles.boxleft}>
                      <div className={styles.risklevel}>
                        {/* <BorderBox10> */}
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>
                            风险等级基本信息
                          </div>
                        </div>

                        <div
                          id="riskLevelFull"
                          style={{
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "center",
                            width: "100%",
                            height: "100%",
                          }}
                        ></div>
                        {/* </BorderBox10> */}
                      </div>

                      <div style={{ height: "10px" }}></div>
                      <div className={styles.risklevelOne}>
                        {/* <BorderBox10> */}
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>
                            隐患检查基本信息
                          </div>
                        </div>
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "center",
                            width: "100%",
                            height: "100%",
                          }}
                        >
                          <div
                            style={{
                              display: "flex",
                              flexDirection: "row",
                              alignItems: "center",
                              justifyContent: "space-between",
                              width: "100%",
                              height: "30%",
                              padding: "10px 30px",
                            }}
                          >
                            {this.state.checkData.map((item, index) => {
                              return (
                                <div>
                                  <BorderBox8>
                                    <div
                                      style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        color: "#fff",
                                        padding: "10px 25px",
                                      }}
                                    >
                                      <div
                                        style={{
                                          display: "flex",
                                          flexDirection: "row",
                                          alignItems: "center",
                                        }}
                                      >
                                        <div style={{ fontSize: "14px" }}>
                                          {item.name}
                                        </div>

                                        <div
                                          style={{
                                            fontSize: "12px",
                                            display: "flex",
                                            justifyContent: "flex-end",
                                          }}
                                        >
                                          /次
                                        </div>
                                      </div>
                                      <div
                                        style={{
                                          fontSize: "22px",
                                          color: "#febc22",
                                          fontWeight: "bold",
                                        }}
                                      >
                                        {item.value}
                                      </div>
                                    </div>
                                  </BorderBox8>
                                </div>
                              );
                            })}
                          </div>
                          <div className={styles.scrollboard}>
                            <ScrollBoard
                              config={this.state.scrollConfig}
                              style={{ width: "100%", height: "100%" }}
                            />
                          </div>
                        </div>
                        {/* </BorderBox10> */}
                      </div>
                    </Col>
                    <Col span={8} className={styles.boxTwo}>
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "row",
                          alignItems: "center",
                          justifyContent: "center",
                          width: "100%",
                        }}
                      >
                        <div className={styles.scoreBox}>
                            <div className={styles.score}>
                              {/* <div className={styles.scoreLeft}>矿山</div> */}
                              <div className={styles.scoreRight}>
                                <div className={styles.scoreText}>
                                  标准化得分
                                </div>
                                <div className={styles.scoreText2}>83</div>
                              </div>
                            </div>
                            <div className={styles.score2}>
                              <div className={styles.scoreRight}>
                                <div className={styles.scoreText}>
                                  标准化得分
                                </div>
                                <div className={styles.scoreText2}>88</div>
                              </div>
                            </div>
                            <div className={styles.score3}>
                              <div className={styles.scoreRight}>
                                <div className={styles.scoreText}>
                                  标准化得分
                                </div>
                                <div className={styles.scoreText2}>93</div>
                              </div>
                            </div>
                          </div>
                        {/* {this.state.screenWidh ? (
                          
                        ) : (
                          <div className={styles.scoreBox1}>
                            <div className={styles.score4}>
                              <div className={styles.scoreLeft}>矿山</div>
                              <div className={styles.scoreText3}>
                                标准化得分
                              </div>
                              <div className={styles.scoreText2}>83</div>
                            </div>
                            <div className={styles.score4}>
                              <div className={styles.scoreLeft}>选矿</div>
                              <div className={styles.scoreText3}>
                                标准化得分
                              </div>
                              <div className={styles.scoreText2}>88</div>
                            </div>
                            <div className={styles.score4}>
                              <div className={styles.scoreLeft}>尾矿</div>
                              <div className={styles.scoreText3}>
                                标准化得分
                              </div>
                              <div className={styles.scoreText2}>93</div>
                            </div>
                          </div>
                        )} */}
                      </div>
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          // height: "100%",
                          // width: "100%",
                          flex: 1,
                          position: "relative",
                        }}
                      >
                        <div>
                          <img
                            src={realGif}
                            alt="1"
                            style={{ width: "100%", height: "100%" }}
                          ></img>
                          <div
                            style={{
                              position: "absolute",
                              fontSize: "14px",
                              color: "#fff",
                              top: "0",
                              left: "0",
                              width: "100%",
                              height: "100%",
                            }}
                          >
                            <div
                              style={{
                                position: "relative",
                                width: "100%",
                                height: "100%",
                                borderRadius: "50%",
                              }}
                              className={styles.ulData}
                            >
                              {this.state.roaData.map((item, index) => {
                                return (
                                  <li>
                                    <div className={styles.roateData}>
                                      <div className={styles.roatBack}>
                                        {item.name}:{item.value}
                                      </div>
                                    </div>
                                  </li>
                                );
                              })}
                            </div>
                          </div>
                        </div>
                      </div>
                    </Col>
                    <Col span={8} className={styles.boxTwo}>
                      <div className={styles.risklevel}>
                        {/* <BorderBox10> */}
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>
                            基本会议完成情况
                          </div>
                        </div>
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            width: "90%",
                            height: "100%",
                          }}
                        >
                          <div
                            style={{
                              display: "flex",
                              flexDirection: "row",
                              alignItems: "center",
                              width: "100%",
                              height: "50%",
                              justifyContent: "space-between",
                            }}
                          >
                            <div
                              id="completeone"
                              style={{ width: "100%", height: "100%" }}
                            ></div>
                            {/* <div
                            id="completetwo"
                            style={{ width: "100%", height: "100%" }}
                          ></div>
                          <div
                            id="completethree"
                            style={{ width: "100%", height: "100%" }}
                          ></div> */}
                            {/* <WaterLevelPond
                            config={this.state.WaterLevelPondconfig1}
                            style={{ width: "20%", height: "100%" }}
                          />
                          <WaterLevelPond
                            config={this.state.WaterLevelPondconfig2}
                            style={{ width: "20%", height: "100%" }}
                          />
                          <WaterLevelPond
                            config={this.state.WaterLevelPondconfig3}
                            style={{ width: "20%", height: "100%" }}
                          /> */}
                          </div>
                          <div
                            style={{
                              display: "flex",
                              flexDirection: "row",
                              alignItems: "center",
                              width: "100%",
                              height: "50%",
                              justifyContent: "space-between",
                              marginBottom: "10px",
                            }}
                          >
                            <Row
                              gutter={[8, 8]}
                              style={{ padding: "0px 10px" }}
                            >
                              {this.state.meetingData.map((item, index) => (
                                <Col span={6}>
                                  <div className={styles.gradientThree}>
                                    <div className={styles.gradientNext}>
                                      <div className={styles.gradientNextTwo}>
                                        <div className={styles.gradientText}>
                                          {item.value}
                                        </div>
                                        <div className={styles.gradientName}>
                                          {item.name}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </Col>
                              ))}
                            </Row>
                          </div>
                        </div>
                      </div>

                      <div style={{ height: "10px" }}></div>
                      <div className={styles.risklevelOne}>
                        {/* <BorderBox10> */}
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>
                            安全任务完成情况
                          </div>
                        </div>
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "center",
                            width: "100%",
                            height: "100%",
                          }}
                        >
                          <div
                            className={styles.scrollboard}
                            style={{ marginTop: "20px" }}
                          >
                            <ScrollBoard
                              config={this.state.safescrollConfig}
                              style={{ width: "100%", height: "100%" }}
                            />
                          </div>
                        </div>
                        {/* </BorderBox10> */}
                      </div>
                    </Col>
                  </Row>
                </div>
                <div className={styles.rowTwo}>
                  <Row style={{ width: "100%", height: "100%" }}>
                    <Col span={8} className={styles.boxleft}>
                      <div className={styles.risklevelTwo}>
                        {/* <BorderBox10> */}
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>隐患整改数据</div>
                        </div>
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "center",
                            width: "100%",
                            height: "100%",
                          }}
                        >
                          <div className={styles.riskChange}>
                            <div className={styles.gradient}>
                              <div className={styles.gradientNext}>
                                <div className={styles.gradientNextTwo}>
                                  <div className={styles.gradientText}>83</div>
                                  <div className={styles.gradientName}>
                                    隐患数
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div className={styles.gradient}>
                              <div className={styles.gradientNext}>
                                <div className={styles.gradientNextTwo}>
                                  <div className={styles.gradientText}>23</div>
                                  <div className={styles.gradientName}>
                                    延期整改数
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div className={styles.gradient}>
                              <div className={styles.gradientNext}>
                                <div className={styles.gradientNextTwo}>
                                  <div className={styles.gradientText}>56</div>
                                  <div className={styles.gradientName}>
                                    按期整改数
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div className={styles.riskChangeTwo}>
                            <div className={styles.gradientTwo}>
                              <div className={styles.gradientNext}>
                                <div className={styles.gradientNextTwo}>
                                  <div className={styles.gradientTextTwo}>
                                    83%
                                  </div>
                                  <div className={styles.gradientNameTwo}>
                                    整改率
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        {/* </BorderBox10> */}
                      </div>
                    </Col>
                    <Col span={8} className={styles.boxTwo}>
                      {/* <BorderBox8> */}
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          width: "100%",
                          height: "100%",
                          alignItems: "center",
                        }}
                      >
                        <div className={styles.title}>
                          <div className={styles.circle}></div>
                          <div className={styles.titlename}>
                            安全生产标准化运行走势图
                          </div>
                        </div>
                        <div
                          id="opretionTrend"
                          style={{
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "center",
                            width: "100%",
                            height: "90%",
                          }}
                        ></div>
                      </div>
                      {/* </BorderBox8> */}
                    </Col>
                    <Col span={8} className={styles.boxTwo}>
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          width: "100%",
                          height: "100%",
                          alignItems: "center",
                        }}
                      >
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            width: "90%",
                            height: "100%",
                            alignItems: "center",
                          }}
                        >
                          <div className={styles.title}>
                            <div className={styles.circle}></div>
                            <div className={styles.titlename}>
                              班组完成率TOP5
                            </div>
                          </div>
                          <div className={styles.capsuleChart}>
                            <CapsuleChart
                              config={this.state.chartConfig}
                              style={{ width: "100%", height: "100%" }}
                            />
                          </div>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
        </FullScreenContainer>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(FullScreen));