Merge branch 'main' of http://47.122.43.22:3000/wjn/mh-lcmk-sms-web

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@antv/data-set": "0.9.6",
+        "@jiaminghi/data-view-react": "^1.2.5",
         "antd": "^3.26.20",
         "autobind-decorator": "2.3.1",
         "babel-plugin-import": "1.11.0",
@@ -1776,6 +1777,63 @@
         "node": ">=10"
       }
     },
+    "node_modules/@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "node_modules/@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "node_modules/@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "node_modules/@jiaminghi/data-view-react": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view-react/-/data-view-react-1.2.5.tgz",
+      "integrity": "sha512-hxlfg0yULj7nUde8oj5hB9pUWrHqFyuPUeJWNG70YPPHFnWXqmlWCx1aB1OpqD3lwxaI1aKkA4YJRhkvfLyKrg==",
+      "dependencies": {
+        "@jiaminghi/charts": "^0.2"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+      }
+    },
+    "node_modules/@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/@types/history": {
       "version": "4.7.3",
       "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==",
@@ -26773,6 +26831,55 @@
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
       "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
     },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "@jiaminghi/data-view-react": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view-react/-/data-view-react-1.2.5.tgz",
+      "integrity": "sha512-hxlfg0yULj7nUde8oj5hB9pUWrHqFyuPUeJWNG70YPPHFnWXqmlWCx1aB1OpqD3lwxaI1aKkA4YJRhkvfLyKrg==",
+      "requires": {
+        "@jiaminghi/charts": "^0.2"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "@types/history": {
       "version": "4.7.3",
       "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw=="

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@antv/data-set": "0.9.6",
+    "@jiaminghi/data-view-react": "^1.2.5",
     "antd": "^3.26.20",
     "autobind-decorator": "2.3.1",
     "babel-plugin-import": "1.11.0",

src/components/CustomPages/BI/BI013RiskAnalysisModel.js

@@ -100,7 +100,8 @@ class BI013RiskAnalysisModel extends React.Component {
           // this.state.MEASURESTOTALCOUNT = ret.Data.MEASURESTOTALCOUNT;
         }
         this.chart1();
-        this.chart2(ret?.Data.AREACOUNTS.slice(0, 20));
+        let newAreaData = ret?.Data.AREACOUNTS.reverse().slice(0, 20);
+        this.chart2(newAreaData);
         this.chart4(ret?.Data.DATECOUNTS);
       },
     });
@@ -220,6 +221,7 @@ class BI013RiskAnalysisModel extends React.Component {
   chart2 = (data) => {
     let areaName = [];
     let areaCount = [];
+    data=data.reverse();
     data.forEach((item) => {
       areaName.push(item.AREANAME);
       areaCount.push(item.AREACOUNT);

src/components/CustomPages/HM/HM040ShowPrint.js

@@ -79,7 +79,7 @@ class HM040ShowPrint extends React.Component {
             <Descriptions title="" size="middle" bordered>
               <Descriptions.Item label="编号">{data.CODE}</Descriptions.Item>
               {/* <Descriptions.Item label="名称">{data.NAME}</Descriptions.Item> */}
-              <Descriptions.Item label="作业环节">{data.Nav_OperationStep ?data.Nav_OperationStep.NAME: ''}</Descriptions.Item>
+              {/* <Descriptions.Item label="作业环节">{data.Nav_OperationStep ?data.Nav_OperationStep.NAME: ''}</Descriptions.Item> */}
               {/* <Descriptions.Item label="危险源/风险名称">
               {
                   data.Nav_OperationLinkEvaluateRisk && data.Nav_OperationLinkEvaluateRisk.map((item, i) => {

src/components/CustomPages/HM/HM042ShowPrint.js

@@ -161,7 +161,7 @@ class HM042ShowPrint extends React.Component {
         let TableWrap = document.getElementById('tableId' + this.props.data.id);
         let Table = TableWrap.getElementsByTagName('table')[0];
         const wb = XLSX.utils.table_to_book(Table);
-        XLSX.writeFile(wb, "年度风险评价计划审核表.xlsx")
+        XLSX.writeFile(wb, "季度风险评价计划审核表.xlsx")
     }
     onClickApprove = (appVisible) => {
         const newtmpData = {
@@ -224,7 +224,7 @@ class HM042ShowPrint extends React.Component {
                 <Button type={'primary'} style={{ marginLeft: '8px', display: this.state.BtnSignDisplay }} onClick={() => this.onPersonalAgree()} icon="check" >确认</Button>
             </div>
             <div ref={el => (this.componentRef = el)} id={'tableId' + this.props.data.id} style={{ padding: '20px' }}>
-                <h1 style={{ textAlign: 'center' }}>年度风险评价计划审核表</h1>
+                <h1 style={{ textAlign: 'center' }}>季度风险评价计划审核表</h1>
                 {
                     data ?
                         <div>

src/components/CustomPages/HM/HM047ShowPrint.js

@@ -95,7 +95,7 @@ class HM047ShowPrint extends React.Component {
                   })
                 }
               </Descriptions.Item>
-              <Descriptions.Item label="作业环节">{data.Nav_OperationStep ? data.Nav_OperationStep.NAME : ''}</Descriptions.Item>
+              {/* <Descriptions.Item label="作业环节">{data.Nav_OperationStep ? data.Nav_OperationStep.NAME : ''}</Descriptions.Item> */}
               <Descriptions.Item label="辨识对象">{data.Nav_Identifying ? data.Nav_Identifying.NAME : ''}</Descriptions.Item>
               <Descriptions.Item label="风险类别">{data.Nav_Type ? data.Nav_Type.NAME : ''}</Descriptions.Item>
               <Descriptions.Item label="风险地点">{data.RISK_PLACE}</Descriptions.Item>

src/components/CustomPages/HM/HM063ShowPrint.js

@@ -244,7 +244,7 @@ class HM063ShowPrint extends React.Component {
                                     <td className={styles.fontBold}>相关岗位</td>
                                     <td className={styles.fontBold}>相关设备</td>
                                     {/* <td className={styles.fontBold}>相关设施</td> */}
-                                    <td className={styles.fontBold}>作业环节</td>
+                                    {/* <td className={styles.fontBold}>作业环节</td> */}
                                     <td className={styles.fontBold}>责任单位</td>
                                     <td className={styles.fontBold}>责任岗位</td>
                                     <td className={styles.fontBold}>责任人员</td>
@@ -282,7 +282,7 @@ class HM063ShowPrint extends React.Component {
                                                     return ite.Nav_Facilities ? ite.Nav_Facilities.NAME + '  ' : ''
                                                 }
                                             })}</td> */}
-                                            <td>{item.Nav_OperationStep ? item.Nav_OperationStep.NAME : ''}</td>
+                                            {/* <td>{item.Nav_OperationStep ? item.Nav_OperationStep.NAME : ''}</td> */}
                                             <td>{item.Nav_DepartmentLiable ? item.Nav_DepartmentLiable.NAME : ''}</td>
                                             <td>{item.Nav_PostLiable ? item.Nav_PostLiable.NAME : ''}</td>
                                             <td>{item.Nav_LiableUser ? item.Nav_LiableUser.NAME : ''}</td>

src/components/CustomPages/HM/HM121ShowPrint.js

@@ -67,7 +67,7 @@ class HM121ShowPrint extends React.Component {
                     <td colSpan={2} rowSpan={2}>岗位</td>
                     <td colSpan={1} rowSpan={2}>设备设施</td>
                     {/* <td colSpan={1} rowSpan={2}>相关设施</td> */}
-                    <td colSpan={1} rowSpan={2}>作业环节</td>
+                    {/* <td colSpan={1} rowSpan={2}>作业环节</td> */}
                     <td colSpan={4} rowSpan={1}>风险评价</td>
                     <td colSpan={1} rowSpan={2}>风险等级</td>
                     <td colSpan={10} rowSpan={1}>风险控制</td>
@@ -278,8 +278,7 @@ class HM121ShowPrint extends React.Component {
                 <Button onClick={() => this.onTableBtnExport()} icon="export" style={{ marginLeft: '8px' }}>导出</Button>
             </div>
             <div ref={el => (this.componentRef = el)} id={'tableId' + this.props.data.id} style={{ padding: '20px' }}>
-                <h1 style={{ textAlign: 'center' }}>评价记录表</h1>
-
+                <h2 style={{ textAlign: 'center' }}>评价记录表</h2>
                 {
                     data ? <div>
                         <Descriptions size="middle" bordered>

src/layout/Header.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo ,useEffect} from "react";
 import { connect } from "dva";
 import { withRouter } from "dva/router";
 import { Dropdown, Icon, Menu, message, Button, Modal, Input } from "antd";
@@ -8,10 +8,11 @@ import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
 import FeedbackQuestion from "../components/MainPage/FeedbackQuestion";
 import GuideCanvas from "../components/MainPage/GuideCanvas";
 import IconFont from "../utils/iconFont";
-import { initFilter } from "../utils/common";
+import { initFilter,requestFullScreenMethod } from "../utils/common";
 import config from "../config";
 import "./header.less";
 import Option from "./Option";
+import RiskFourPage from "./RiskFour";
 
 // 投屏
 const DataV = (props) => {
@@ -317,6 +318,88 @@ const GuideCodePage = (props) => {
 const GuideCode = withRouter(
   connect(({ login }) => ({ login }))(GuideCodePage)
 );
+const RiskFourColorOpton = (props) => {
+  const [showModal, setshowModal] = useState(false);
+  const escFunction = () => {
+    let isFull = !!(
+      document.fullscreen ||
+      document.mozFullScreen ||
+      document.webkitIsFullScreen ||
+      document.webkitFullScreen ||
+      document.msFullScreen
+    );
+    if (isFull) {
+    // /
+    }else{
+      // requestFullScreenMethod(document.body);
+      setshowModal(false);
+    }
+  };
+  useEffect(() => {
+    // 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件
+    document.addEventListener(
+      "webkitfullscreenchange",
+      escFunction
+    ); /* Chrome, Safari and Opera */
+    document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */
+    document.addEventListener(
+      "fullscreenchange",
+      escFunction
+    ); /* Standard syntax */
+    document.addEventListener(
+      "msfullscreenchange",
+      escFunction
+    ); /* IE / Edge */
+    return () => {
+      //销毁时清除监听
+      document.removeEventListener("webkitfullscreenchange", escFunction);
+      document.removeEventListener("mozfullscreenchange", escFunction);
+      document.removeEventListener("fullscreenchange", escFunction);
+      document.removeEventListener("MSFullscreenChange", escFunction);
+    };
+  }, []);
+
+  if (window.navigator.userAgent.indexOf("Windows") < 1) {
+    return <div></div>;
+  } else {
+    return (
+      <div>
+        <div
+          type="primary"
+          onClick={() => {
+            setshowModal(true);
+            requestFullScreenMethod(document.body);     // 进入全屏
+          }}
+        >
+          <Icon type='global' className='header__right-icon'></Icon>
+          {/* <IconFont
+            type="icon-line-108"
+            style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }}
+          ></IconFont> */}
+        </div>
+        <Modal
+          title="功能导航"
+          visible={showModal}
+          width="100%"
+          centered={true}
+          onOk={() => {
+            setshowModal(false);
+          }}
+          onCancel={() => {
+            setshowModal(false);
+          }}
+          className="fullScreen"
+        >
+          <RiskFourPage />
+        </Modal>
+      </div>
+    );
+  }
+};
+
+const RiskFourColor = withRouter(
+  connect(({ login }) => ({ login }))(RiskFourColorOpton)
+);
 const NavOpton = (props) => {
   const [showModal, setshowModal] = useState(false);
   const getChildCount = (val) => {
@@ -399,7 +482,7 @@ function Header(props) {
       </div>
       {!props.matchLogin ? (
         <div className="header__right">
-         
+         <RiskFourColor/>
           <HeaderDataV />
           <HeaderSearch />
           <GuideCode />

src/layout/RiskFour.js

@@ -0,0 +1,898 @@
+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, Popover } from "antd";
+import EnergyIcon from "../utils/energyIcon";
+import { $consts } from "../plugins";
+import styles from "./risk.less";
+import echarts from "echarts";
+import { initFilter } from "../utils/common";
+import realGif from "../assets/risk/backno.jpg";
+import red from "../assets/risk/red.png";
+import orange from "../assets/risk/orange.png";
+import yellow from "../assets/risk/yellow.png";
+import blue from "../assets/risk/blue.png";
+import back1 from "../assets/risk/1-1-1.png";
+import back2 from "../assets/risk/1-2.png";
+import back3 from "../assets/risk/1-3.png";
+import back4 from "../assets/risk/1-4.png";
+import backTwo1 from "../assets/risk/2-1-1.png";
+import backTwo2 from "../assets/risk/2-2.png";
+import backTwo3 from "../assets/risk/2-3.png";
+import backTwo4 from "../assets/risk/2-4.png";
+import backThree1 from "../assets/risk/3-1-1.png";
+import backThree2 from "../assets/risk/3-2.png";
+import backThree3 from "../assets/risk/3-3.png";
+import backThree4 from "../assets/risk/3-4.png";
+import backFour1 from "../assets/risk/4-1-1.png";
+import backFour2 from "../assets/risk/4-2.png";
+import backFour3 from "../assets/risk/4-3.png";
+import backFour4 from "../assets/risk/4-4.png";
+import backFive1 from "../assets/risk/5-1-1.png";
+import backFive2 from "../assets/risk/5-2.png";
+import backFive3 from "../assets/risk/5-3.png";
+import backFive4 from "../assets/risk/5-4.png";
+import backSix1 from "../assets/risk/6-1-1.png";
+import backSix2 from "../assets/risk/6-2.png";
+import backSix3 from "../assets/risk/6-3.png";
+import backSix4 from "../assets/risk/6-4.png";
+import backSeven1 from "../assets/risk/7-1-1.png";
+import backSeven2 from "../assets/risk/7-2.png";
+import backSeven3 from "../assets/risk/7-3.png";
+import backSeven4 from "../assets/risk/7-4.png";
+import qrcode from "../assets/risk/1.png";
+import { FullScreenContainer } from "@jiaminghi/data-view-react";
+
+class RiskFour extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      RiskData: {
+        IsSuccessful: true,
+        Data: {
+          RISKLEVELCOUNTS: [
+            {
+              NAME: "东排土场",
+              LEVEL: 1,
+              LEVEL1: 1,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "堆矿场",
+              LEVEL: 3,
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "622工业场地",
+              LEVEL: 4,
+              LEVEL1: 4,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "露天生产区",
+              LEVEL: 3,
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "终了边坡区域",
+              LEVEL: 2,
+              LEVEL1: 2,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "烧结厂",
+              LEVEL: 1,
+              LEVEL1: 1,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "580回风井口",
+              LEVEL: 2,
+              LEVEL1: 2,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+          ],
+        },
+        TotalCount: 0,
+        MessageType: 0,
+      },
+      level1: 0,
+      level2: 0,
+      level3: 0,
+      level4: 0,
+      level5: 0,
+      level6: 0,
+      level7: 0,
+      data1: {},
+      data2: {},
+      data3: {},
+      data4: {},
+      data5: {},
+      data6: {},
+      data7: {},
+
+      content: "",
+      content2: "",
+      content3: "",
+      content4: "",
+      content5: "",
+      content6: "",
+      content7: "",
+    };
+  }
+
+  componentDidMount() {
+    
+    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+      if (item.NAME == "东排土场") {
+        this.setState({
+          level1: item.LEVEL,
+          data1: item,
+          content: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "堆矿场") {
+        this.setState({
+          level2: item.LEVEL,
+          data2: item,
+          content2: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "622工业场地") {
+        this.setState({
+          level3: item.LEVEL,
+          data3: item,
+          content3: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "露天生产区") {
+        this.setState({
+          level4: item.LEVEL,
+          data4: item,
+          content4: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "终了边坡区域") {
+        this.setState({
+          level5: item.LEVEL,
+          data5: item,
+          content5: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "烧结厂") {
+        this.setState({
+          level6: item.LEVEL,
+          data6: item,
+          content6: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+      if (item.NAME == "580回风井口") {
+        this.setState({
+          level7: item.LEVEL,
+          data7: item,
+          content7: (
+            <div>
+              <div>区域名称：{item.NAME}</div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div>较大风险：{item.LEVEL2}</div>
+                  <div>一般风险：{item.LEVEL3}</div>
+                </div>
+                <div>
+                  {/* <img
+                    src={qrcode}
+                    alt="33"
+                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                  ></img> */}
+                </div>
+              </div>
+            </div>
+          ),
+        });
+      }
+    });
+    this.getRiskData();
+    // this.setState({
+    //     content7:<div>
+    //         <div>区域名称：{this.state.data7.NAME}</div>
+    //         <div>较大风险：{this.state.data7.LEVEL2}</div>
+    //         <div>一般风险：{this.state.data7.LEVEL3}</div>
+    //     </div>
+    // })
+  }
+  getRiskData = () => {
+    const json = initFilter(this.props.login.OrgId);
+    this.props.dispatch({
+      type: "app/getDataByPost",
+      url: "HM/HMEvaluateRisk/getRiskLevelCountData",
+      payload: json,
+      onComplete: (ret) => {
+        if (ret) {
+          ret.RISKLEVELCOUNTS.map((item,index)=>{
+            if (item.NAME == "东排土场") {
+              this.setState({
+                level1: item.LEVEL,
+                data1: item,
+                content: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "堆矿场") {
+              this.setState({
+                level2: item.LEVEL,
+                data2: item,
+                content2: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "622工业场地") {
+              this.setState({
+                level3: item.LEVEL,
+                data3: item,
+                content3: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "露天生产区") {
+              this.setState({
+                level4: item.LEVEL,
+                data4: item,
+                content4: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "终了边坡区域") {
+              this.setState({
+                level5: item.LEVEL,
+                data5: item,
+                content5: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "烧结厂") {
+              this.setState({
+                level6: item.LEVEL,
+                data6: item,
+                content6: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+            if (item.NAME == "580回风井口") {
+              this.setState({
+                level7: item.LEVEL,
+                data7: item,
+                content7: (
+                  <div>
+                    <div>区域名称：{item.NAME}</div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <div>
+                        <div>较大风险：{item.LEVEL2}</div>
+                        <div>一般风险：{item.LEVEL3}</div>
+                      </div>
+                      <div>
+                        {/* <img
+                          src={qrcode}
+                          alt="33"
+                          style={{ width: "50px", height: "50px", objectFit: "fill" }}
+                        ></img> */}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }
+          })
+        }
+      },
+    });
+  };
+
+  render() {
+    return (
+      <React.Fragment>
+        <FullScreenContainer>
+          <div style={{ width: "100%", height: "100%" }}>
+            <img
+              src={realGif}
+              alt="1"
+              style={{ width: "100%", height: "100%", objectFit: "fill" ,zIndex: -1}}
+            ></img>
+            <div
+              style={{ position: "absolute", top: "0px", left: "0px",width: "100%", height: "100%" ,zIndex: 1}}
+            >
+              {/* 东排土场背景区域 */}
+              <div className={styles.riskback}>
+                <img
+                  src={
+                    this.state.level1 == 1
+                      ? back1
+                      : this.state.level1 == 2
+                      ? back2
+                      : this.state.level1 == 3
+                      ? back3
+                      : this.state.level1 == 4
+                      ? back4
+                      : null
+                  }
+                  alt="2"
+                  style={{ width: "24%", height: "23%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 堆矿场 */}
+              <div className={styles.riskbackTwo}>
+                <img
+                  src={
+                    this.state.level2 == 1
+                      ? backTwo1
+                      : this.state.level2 == 2
+                      ? backTwo2
+                      : this.state.level2 == 3
+                      ? backTwo3
+                      : this.state.level2 == 4
+                      ? backTwo4
+                      : null
+                  }
+                  alt="4"
+                  style={{ width: "18%", height: "17%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 622工业场地 */}
+              <div className={styles.riskbackThree}>
+                <img
+                  src={
+                    this.state.level3 == 1
+                      ? backThree1
+                      : this.state.level3 == 2
+                      ? backThree2
+                      : this.state.level3 == 3
+                      ? backThree3
+                      : this.state.level3 == 4
+                      ? backThree4
+                      : null
+                  }
+                  alt="6"
+                  style={{ width: "20%", height: "28%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 露天生产区 */}
+              <div className={styles.riskbackFour}>
+                <img
+                  src={
+                    this.state.level4 == 1
+                      ? backFour1
+                      : this.state.level4 == 2
+                      ? backFour2
+                      : this.state.level4 == 3
+                      ? backFour3
+                      : this.state.level4 == 4
+                      ? backFour4
+                      : null
+                  }
+                  alt="8"
+                  style={{ width: "64%", height: "70%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 终了边坡区域 */}
+              <div className={styles.riskbackFive}>
+                <img
+                  src={
+                    this.state.level5 == 1
+                      ? backFive1
+                      : this.state.level5 == 2
+                      ? backFive2
+                      : this.state.level5 == 3
+                      ? backFive3
+                      : this.state.level5 == 4
+                      ? backFive4
+                      : null
+                  }
+                  alt="10"
+                  style={{ width: "45%", height: "50%", objectFit: "fill" }}
+                ></img>
+              </div>{" "}
+              {/* 烧结厂 */}
+              <div className={styles.riskbackSix}>
+                <img
+                  src={
+                    this.state.level6 == 1
+                      ? backSix1
+                      : this.state.level6 == 2
+                      ? backSix2
+                      : this.state.level6 == 3
+                      ? backSix3
+                      : this.state.level6 == 4
+                      ? backSix4
+                      : null
+                  }
+                  alt="12"
+                  style={{ width: "27%", height: "37%", objectFit: "fill" }}
+                ></img>
+              </div>{" "}
+              {/* 580回风井口 */}
+              <div className={styles.riskbackSeven}>
+                <img
+                  src={
+                    this.state.level7 == 1
+                      ? backSeven1
+                      : this.state.level7 == 2
+                      ? backSeven2
+                      : this.state.level7 == 3
+                      ? backSeven3
+                      : this.state.level7 == 4
+                      ? backSeven4
+                      : null
+                  }
+                  alt="14"
+                  style={{ width: "12%", height: "13%", objectFit: "fill" }}
+                ></img>
+              </div>
+            </div>
+
+            <div
+              style={{ position: "absolute", width: "100%", height: "100%" ,top: 0,left:0,zIndex: 999}}
+            >
+              <div className={styles.riskt}>
+                <Popover content={this.state.content} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level1 == 1
+                        ? red
+                        : this.state.level1 == 2
+                        ? orange
+                        : this.state.level1 == 3
+                        ? yellow
+                        : this.state.level1 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="3"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                  ></img>
+                </Popover>
+              </div>
+              <div className={styles.risktTwo}>
+                <Popover content={this.state.content2} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level2 == 1
+                        ? red
+                        : this.state.level2 == 2
+                        ? orange
+                        : this.state.level2 == 3
+                        ? yellow
+                        : this.state.level2 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="5"
+                    style={{
+                      width: "80px",
+                      height: "80px",
+                      objectFit: "fill",
+                    }}
+                  ></img>
+                </Popover>
+              </div>
+              <div className={styles.risktThree}>
+                {" "}
+                <Popover content={this.state.content3} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level3 == 1
+                        ? red
+                        : this.state.level3 == 2
+                        ? orange
+                        : this.state.level3 == 3
+                        ? yellow
+                        : this.state.level3 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="7"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                  ></img>
+                </Popover>
+              </div>
+              <div className={styles.risktFour}>
+                {" "}
+                <Popover content={this.state.content4} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level4 == 1
+                        ? red
+                        : this.state.level4 == 2
+                        ? orange
+                        : this.state.level4 == 3
+                        ? yellow
+                        : this.state.level4 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="9"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                  ></img>
+                </Popover>
+              </div>
+              <div className={styles.risktFive}>
+                {" "}
+                <Popover content={this.state.content5} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level5 == 1
+                        ? red
+                        : this.state.level5 == 2
+                        ? orange
+                        : this.state.level5 == 3
+                        ? yellow
+                        : this.state.level5 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="11"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                  ></img>
+                </Popover>
+              </div>
+              <div className={styles.risktSix}>
+                {" "}
+                <Popover content={this.state.content6} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level6 == 1
+                        ? red
+                        : this.state.level6 == 2
+                        ? orange
+                        : this.state.level6 == 3
+                        ? yellow
+                        : this.state.level6 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="13"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                  ></img>
+                </Popover>
+              </div>{" "}
+              <div className={styles.risktSeven}>
+                {" "}
+                <Popover content={this.state.content7} title="" trigger="click">
+                  <img
+                    src={
+                      this.state.level7 == 1
+                        ? red
+                        : this.state.level7 == 2
+                        ? orange
+                        : this.state.level7 == 3
+                        ? yellow
+                        : this.state.level7 == 4
+                        ? blue
+                        : null
+                    }
+                    alt="15"
+                    style={{ width: "80px", height: "80px", objectFit: "fill" }}
+                    className={styles.riskhover}
+                  ></img>
+                </Popover>
+              </div>
+            </div>
+          </div>
+        </FullScreenContainer>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFour));

src/layout/risk.less

@@ -0,0 +1,130 @@
+.riskback {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+.riskt {
+  position: absolute;
+  top: 20%;
+  left: 15%;
+  width: 100%;
+  height: 100%;
+}
+.risktTwo {
+  position: absolute;
+  top: 65%;
+  left: 18%;
+  width: 100%;
+  height: 100%;
+}
+.risktThree {
+  position: absolute;
+  top: 80%;
+  left: 20%;
+  width: 100%;
+  height: 100%;
+}
+
+.risktFour {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+}
+.risktFive {
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+}
+.risktSix {
+  position: absolute;
+  top: 75%;
+  left: 77%;
+  width: 100%;
+  height: 100%;
+}
+.risktSeven {
+  position: absolute;
+  top: 42%;
+  left: 87%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskback {
+  position: absolute;
+  top: 15%;
+  left: 8%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackTwo {
+  position: absolute;
+  top: 60%;
+  left: 12%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackThree {
+  position: absolute;
+  top: 70%;
+  left: 13%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackFour {
+  position: absolute;
+  top: 1%;
+  left: 18%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackFive {
+  position: absolute;
+  top: 48%;
+  left: 32%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackSix {
+  position: absolute;
+  top: 62%;
+  left: 70%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackSeven {
+  position: absolute;
+  top: 40%;
+  left: 81%;
+  width: 100%;
+  height: 100%;
+ 
+}
+.riskhover {
+    transition: all 0.5s;
+    animation: jump 1.8s infinite ;
+}
+// .riskhover:hover {
+//     transform: scale(1.1);
+//     animation: jump 1.8s infinite ;
+// }
+
+
+@keyframes jump {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+

src/routes/Home.js

@@ -243,6 +243,7 @@ class Home extends React.Component {
           value: 43,
         },
       ],
+      riskLevelData:[]
     };
     this.resizeRef = React.createRef();
   }
@@ -281,7 +282,7 @@ class Home extends React.Component {
     this.getBaseData(1, "1", 5);
     this.getBaseData(1, "1");
     this.timeJudg();
-    this.riskLevel();
+    this.riskLevelData();
     // this.homeRound();
     this.completeRate();
     this.timelyRate();
@@ -1242,15 +1243,41 @@ class Home extends React.Component {
       });
     }
   };
+  riskLevelData = () => {
+    const userInfo = storage("lacal").getItem("webUserInfo").val;
+    let json = initFilter(this.props.login.OrgId);
+    extendOrder(json, "NUM", 0);
+    extendRule(json, "COLOR", 1);
+    this.props.dispatch({
+      type: "app/getDataByPost",
+      url: "FM/RiskLevelProportion/OrderPaged",
+      payload: json,
+      onlyData: false,
+      onComplete: (data) => {
+        if (data && data.IsSuccessful) {
+          if (data.Data && data.Data.length > 0) {
+            this.setState({
+              riskLevelData: data.Data,
+            },()=>{
+              this.riskLevel()
+            });
+          }
+        }
+      },
+    });
+  };
 
   riskLevel = () => {
     let riskLevel = [];
-    let showData = [
-      { value: 2, name: "一级" },
-      { value: 5, name: "二级" },
-      { value: 15, name: "三级" },
-      { value: 30, name: "四级" },
-    ];
+    let showData = [];
+    let numAll = 0;
+    this.state.riskLevelData.forEach((item) => {
+      showData.push({
+        value: item.COUNT,
+        name: item.RISK_LEVEL,
+      });
+      numAll = item.COUNT + numAll
+    })
 
     let riskLevels = document.getElementById("riskLevel");
     if (riskLevels) {
@@ -1259,8 +1286,8 @@ class Home extends React.Component {
         color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
         title: [
           {
-            text: "52",
-            x: "26%",
+            text: numAll,
+            x: "27%",
             y: "40%",
             textStyle: {
               fontSize: 26,
@@ -1270,7 +1297,7 @@ class Home extends React.Component {
           },
           {
             text: "风险总数",
-            x: "24%",
+            x: "26%",
             y: "55%",
             textStyle: {
               color: "#666",
@@ -1286,13 +1313,14 @@ class Home extends React.Component {
           icon: "pin",
           orient: "vartical",
           // x: "right",
-          top: "18%",
+          // top: "18%",
+          y:'center',
           right: "15%",
-          bottom: "20%",
+          // bottom: "20%",
           data: showData,
           // itemWidth: 20,
           // itemHeight: 14,
-          itemGap: 25,
+          // itemGap: 25,
           formatter: function (name) {
             //通过name获取到数组对象中的单个对象
             let singleData = showData.filter(function (item) {
@@ -1712,7 +1740,7 @@ class Home extends React.Component {
                 display: "flex",
                 // padding: "0px 20px",
                 margin: "0px",
-                minHeight: "242px",
+                // minHeight: "242px",
                 minWidth: "1136px",
                 // justifyContent: "space-between",
                 // backgroundColor: "#fff",
@@ -2101,7 +2129,7 @@ class Home extends React.Component {
                 display: "flex",
                 // padding: "0px 20px",
                 margin: "0px",
-                minHeight: "242px",
+                // minHeight: "242px",
                 minWidth: "1136px",
                 // justifyContent: "space-between",
                 // backgroundColor: "#fff",
@@ -2381,7 +2409,7 @@ class Home extends React.Component {
               height: "40%",
               display: "flex",
               // padding: "0px 20px",
-              margin: "30px 0px",
+              margin: "15px 0px",
               // justifyContent: "space-between",
               alignItems: "center",
               minHeight: "388px",
@@ -2630,7 +2658,7 @@ class Home extends React.Component {
             className="home-row"
             style={{
               margin: "0px 0px 10px 0px",
-              minHeight: "275px",
+              // minHeight: "275px",
               // minWidth: "1204px",
               minWidth: "1136px",
             }}

src/routes/Login.js

@@ -342,8 +342,8 @@ class LoginPage extends React.Component {
             <img src={require('../assets/login/product.png')} alt='product' /> */}
           </div>
           <div className="login-page__login">
-            <p className="login-page__login-cn">欢迎登录双重预防机制管控系统</p>
-            <p className="login-page__login-cne">WELCOME!</p>
+            <p className="login-page__login-cn">双重预防机制管控系统</p>
+            <p className="login-page__login-cne"></p>
             {/* <span className='login-page__login-en'>LOGIN</span> */}
             <div className="login-page__login-box">
               <div

src/utils/common.js

@@ -4,6 +4,26 @@ import { random, omit } from "lodash";
 import moment from "moment";
 const RFC4122_TEMPLATE = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
 
+// 展开/全屏
+export function requestFullScreenMethod(element) {
+  var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen || element.mozRequestFullScreen;
+  if (requestMethod) {
+    requestMethod.call(element);
+  }
+}
+// 退出/全屏
+export function exitFullScreen() {
+  var exitMethod = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
+  if (exitMethod) {
+    exitMethod.call(document);
+  }
+}
+// 判断是否全屏
+export function isFullscreenElement() {
+  var isFull = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement;
+  return !!isFull;
+}
+
 export function uuid(placeholder) {
   return RFC4122_TEMPLATE.replace(/[xy]/g, function () {
     let value = random(15);

yarn.lock

@@ -992,7 +992,7 @@
     "pirates" "^4.0.0"
     "source-map-support" "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
   "integrity" "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz"
   "version" "7.23.1"
@@ -1084,6 +1084,50 @@
   "resolved" "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz"
   "version" "3.6.1"
 
+"@jiaminghi/bezier-curve@*":
+  "integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
+  "version" "0.0.9"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+"@jiaminghi/c-render@^0.4.3":
+  "integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
+  "version" "0.4.3"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/bezier-curve" "*"
+    "@jiaminghi/color" "*"
+    "@jiaminghi/transition" "*"
+
+"@jiaminghi/charts@^0.2":
+  "integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
+  "version" "0.2.18"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/c-render" "^0.4.3"
+
+"@jiaminghi/color@*":
+  "integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
+  "version" "1.1.3"
+
+"@jiaminghi/data-view-react@^1.2.5":
+  "integrity" "sha512-hxlfg0yULj7nUde8oj5hB9pUWrHqFyuPUeJWNG70YPPHFnWXqmlWCx1aB1OpqD3lwxaI1aKkA4YJRhkvfLyKrg=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/data-view-react/-/data-view-react-1.2.5.tgz"
+  "version" "1.2.5"
+  dependencies:
+    "@jiaminghi/charts" "^0.2"
+
+"@jiaminghi/transition@*":
+  "integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
+  "version" "1.1.11"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 "@types/history@*":
   "integrity" "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw=="
   "version" "4.7.3"
@@ -10156,7 +10200,7 @@
     "recompose" "^0.27.1"
     "shallowequal" "^1.0.2"
 
-"react-dom@*", "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0-0 || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0", "react-dom@^15.0.0 || ^16.0.0", "react-dom@^16.0.0", "react-dom@^16.0.0-0", "react-dom@^16.3.0", "react-dom@>=15.0.0", "react-dom@>=15.x", "react-dom@>=16.0.0", "react-dom@>=16.9.0", "react-dom@>0.14.5", "react-dom@0.14.x || 15.x || 16.x", "react-dom@15.x || ^16.0.0-0", "react-dom@16.8.2":
+"react-dom@*", "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0-0 || ^16.0.0", "react-dom@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0", "react-dom@^15.0.0 || ^16.0.0", "react-dom@^16.0.0", "react-dom@^16.0.0-0", "react-dom@^16.3.0", "react-dom@^16.8.0", "react-dom@>=15.0.0", "react-dom@>=15.x", "react-dom@>=16.0.0", "react-dom@>=16.9.0", "react-dom@>0.14.5", "react-dom@0.14.x || 15.x || 16.x", "react-dom@15.x || ^16.0.0-0", "react-dom@16.8.2":
   "integrity" "sha512-cPGfgFfwi+VCZjk73buu14pYkYBR1b/SRMSYqkLDdhSEHnSwcuYTPu6/Bh6ZphJFIk80XLvbSe2azfcRzNF+Xg=="
   "resolved" "https://registry.npmmirror.com/react-dom/-/react-dom-16.8.2.tgz"
   "version" "16.8.2"
@@ -10318,7 +10362,7 @@
   "resolved" "https://registry.npmmirror.com/react-websocket/-/react-websocket-2.0.1.tgz"
   "version" "2.0.1"
 
-"react@*", "react@^0.14 || ^15.0.0 || ^16.0.0-alpha", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0", "react@^0.14.0 || ^15.0.0-0 || ^16.0.0", "react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0", "react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react@^0.14.0 || ^15.0.1 || ^16.0.0", "react@^15.0.0 || ^16.0.0", "react@^16.0.0", "react@^16.0.0-0", "react@^16.3.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@>= 16.3", "react@>=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0", "react@>=15", "react@>=15.0.0", "react@>=15.x", "react@>=16.0.0", "react@>=16.9.0", "react@>0.14.5", "react@0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0", "react@0.14.x || 15.x || 16.x", "react@15.x || ^16.0.0-0", "react@16.8.2", "react@16.x":
+"react@*", "react@^0.14 || ^15.0.0 || ^16.0.0-alpha", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0", "react@^0.14.0 || ^15.0.0-0 || ^16.0.0", "react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0", "react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react@^0.14.0 || ^15.0.1 || ^16.0.0", "react@^15.0.0 || ^16.0.0", "react@^16.0.0", "react@^16.0.0-0", "react@^16.3.0", "react@^16.8.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@>= 16.3", "react@>=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0", "react@>=15", "react@>=15.0.0", "react@>=15.x", "react@>=16.0.0", "react@>=16.9.0", "react@>0.14.5", "react@0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0", "react@0.14.x || 15.x || 16.x", "react@15.x || ^16.0.0-0", "react@16.8.2", "react@16.x":
   "integrity" "sha512-aB2ctx9uQ9vo09HVknqv3DGRpI7OIGJhCx3Bt0QqoRluEjHSaObJl+nG12GDdYH6sTgE7YiPJ6ZUyMx9kICdXw=="
   "resolved" "https://registry.npmmirror.com/react/-/react-16.8.2.tgz"
   "version" "16.8.2"