mh_jy_safe_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 storage from '../utils/storage';
import { initFilter } from '../utils/common';
import logo from '../assets/layout/headerno-logo-new.png';
import {
  FullScreenContainer,
  BorderBox8,
  BorderBox10,
  ScrollBoard,
  CapsuleChart,
  WaterLevelPond,
} from '@jiaminghi/data-view-react';
import { text } from '@jiaminghi/data-view-react/lib/index-cd27b7f6';

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>
  );
};

class FullScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      safetySloganOne: '',
      animationDuration: 20,
      sliderColor: '#de4e58',
      sliderSize: '24px',
      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,
        },
      ],
    };
    // 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,
    // };
  }

  componentDidMount() {
    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.getHomeTitle();
    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() {
    clearInterval(this.timer);
  }
  getHomeTitle = () => {
    var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
    let json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'PF/HomeTitle/OrderPaged',
      onComplete: (ret) => {
        if (ret) {
          this.setState({
            safetySloganOne: ret[0].TITLE,
            // safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。   2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。   6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。",
            animationDuration: ret[0].SECOND,
            sliderColor: ret[0].COCOR,
            sliderSize: ret[0].FONTSIZE,
          });
        }
      },
    });
  };
  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 { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;
    return (
      <React.Fragment>
        <FullScreenContainer>
          <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={{
                          '--animation-duration': `${animationDuration}s`, // 动态设置动画时长
                          '--slider-color': `${sliderColor}`, // 动态设置颜色
                          '--slider-size': `${sliderSize}px`, // 动态设置颜色
                        }}
                      >
                        <p className="slide-text-style">{safetySloganOne || '暂无公告'}</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%',
                      }}
                    >
                      {this.state.screenWidh ? (
                        <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>
                      ) : (
                        <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>
        </FullScreenContainer>
      </React.Fragment>
    );
  }
}

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