风险四色

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/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='bars' 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,491 @@
+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 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: "东排土场",
+              LEVEL1: 1,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "堆矿场",
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "622工业场地",
+              LEVEL1: 4,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "露天生产区",
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "终了边坡区域",
+              LEVEL1: 2,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "烧结厂",
+              LEVEL1: 1,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "580回风井口",
+              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: {},
+
+      content7: "",
+    };
+  }
+
+  componentDidMount() {
+    this.getRiskData()
+    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+      if (item.NAME == "东排土场") {
+        this.setState({
+          level1: item.LEVEL1,
+          data1: item,
+        });
+      }
+      if (item.NAME == "堆矿场") {
+        this.setState({
+          level2: item.LEVEL1,
+          data2: item,
+        });
+      }
+      if (item.NAME == "622工业场地") {
+        this.setState({
+          level3: item.LEVEL1,
+          data3: item,
+        });
+      }
+      if (item.NAME == "露天生产区") {
+        this.setState({
+          level4: item.LEVEL1,
+          data4: item,
+        });
+      }
+      if (item.NAME == "终了边坡区域") {
+        this.setState({
+          level5: item.LEVEL1,
+          data5: item,
+        });
+      }
+      if (item.NAME == "烧结厂") {
+        this.setState({
+          level6: item.LEVEL1,
+          data6: item,
+        });
+      }
+      if (item.NAME == "580回风井口") {
+        this.setState({
+          level7: item.LEVEL1,
+          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.setState({
+    //     content7:<div>
+    //         <div>区域名称：{this.state.data7.NAME}</div>
+    //         <div>较大风险：{this.state.data7.LEVEL2}</div>
+    //         <div>一般风险：{this.state.data7.LEVEL3}</div>
+    //     </div>
+    // })
+  }
+  getRiskData = () => {
+    this.props.dispatch({
+      type: "app/getDataByPost",
+      url: "HM/HMEvaluateRisk/getRiskLevelCountData",
+      onComplete: (ret) => {
+        if (ret ) {
+          console.log(ret,'989989')
+        }
+      },
+    });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <FullScreenContainer>
+          <div style={{ width: "100%", height: "100%" }}>
+            <img
+              src={realGif}
+              alt="1"
+              style={{ width: "100%", height: "100%", objectFit: "fill" }}
+            ></img>
+            {/* 东排土场 */}
+            <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.riskt}>
+              <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>
+            </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>
+            <div className={styles.risktTwo}>
+              {" "}
+              <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>
+            </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.risktThree}>
+              {" "}
+              <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>
+            </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.risktFour}>
+              {" "}
+              <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>
+            </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.risktFive}>
+              {" "}
+              <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>
+            </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>
+            <div className={styles.risktSix}>
+              {" "}
+              <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>
+            </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 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>
+        </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/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"