风险四色

src/layout/RiskFour.js

@@ -8,887 +8,98 @@ 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 storage from "../utils/storage";
-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";
+import RiskFourOne from "./RiskFourOne";
+import RiskFourTwo from "./RiskFourTwo";
+import RiskFourThree from "./RiskFourThree";
 
 class RiskFour extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      RiskData: {
+      translateX:1,
-        IsSuccessful: true,
+      rightDis:false,
-        Data: {
+      leftDis:true,
-          RISKLEVELCOUNTS: [
+      riskleveldata:[]
-            {
-              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: "",
     };
   }
-
+  clickRightIcon = () => {
-  componentDidMount() {
+    if(this.state.translateX <3){
+      this.setState({
+        translateX:this.state.translateX+1
+      })
+    }
     
-    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+  };
-      if (item.NAME == "东排土场") {
+  componentDidMount() {
-        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);
+    var orgId = storage("lacal").getItem("webOrgId")?.val
+    const json = initFilter(orgId);
     this.props.dispatch({
       type: "app/getDataByPost",
       url: "HM/HMEvaluateRisk/getRiskLevelCountData",
       payload: json,
       onComplete: (ret) => {
         if (ret) {
-          ret.RISKLEVELCOUNTS.map((item,index)=>{
+          this.setState({
-            if (item.NAME == "东排土场") {
+            riskleveldata: ret.RISKLEVELCOUNTS,
-              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>
-                ),
-              });
-            }
           })
+          
+          // })
+          // ret.RISKLEVELCOUNTS.map((item, index) => {
+          //   this.getTitle(item)
+          // })
         }
       },
     });
   };
+  componentDidUpdate =(prevProps, prevState)=> {
+    if(this.state.translateX != prevState.translateX){
+       if (this.state.translateX == 1) {
+      this.setState({
+        rightDis:false,
+        leftDis:true
+      })
+    }else if(this.state.translateX == 3){
+      this.setState({
+        rightDis:true,
+        leftDis:false
+      })
+    }else{
+      this.setState({
+        rightDis:false,
+        leftDis:false
+      })
+    }
+    }
+  }
 
+  clickLeftIcon = () => {
+    if(this.state.translateX >1){
+      this.setState({
+        translateX:this.state.translateX-1
+      })
+    }
+    
+  };
   render() {
     return (
       <React.Fragment>
         <FullScreenContainer>
-          <div style={{ width: "100%", height: "100%" }}>
+          <div className={styles.wrap_scrollImg}>
-            <img
+            <span className={styles.left_icon} onClick={()=>{this.clickLeftIcon()}} style={this.state.leftDis==true?{color:'#888888'}:{color:'#fff'}}>
-              src={realGif}
+              <Icon type="left" />
-              alt="1"
+            </span>
-              style={{ width: "100%", height: "100%", objectFit: "fill" ,zIndex: -1}}
+            <span className={styles.right_icon} onClick={()=>{this.clickRightIcon()}} style={this.state.rightDis==true?{color:'#888888'}:{color:'#fff'}}>
-            ></img>
+              <Icon type="right" />
-            <div
+            </span>
-              style={{ position: "absolute", top: "0px", left: "0px",width: "100%", height: "100%" ,zIndex: 1}}
+            {this.state.translateX ==1?< RiskFourOne riskleveldata={this.state.riskleveldata}/>:this.state.translateX ==2?< RiskFourTwo  riskleveldata={this.state.riskleveldata}/>:<RiskFourThree  riskleveldata={this.state.riskleveldata}/>} 
-            >
-              {/* 东排土场背景区域 */}
-              <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>
     );

src/layout/RiskFourOne.js

@@ -0,0 +1,462 @@
+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 "./riskOne.less";
+import echarts from "echarts";
+import storage from "../utils/storage";
+import { initFilter } from "../utils/common";
+import realGif from "../assets/riskone/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/riskone/1-1.png";
+import back2 from "../assets/riskone/1-2.png";
+import back3 from "../assets/riskone/1-3.png";
+import back4 from "../assets/riskone/1-4.png";
+import backTwo1 from "../assets/riskone/2-1.png";
+import backTwo2 from "../assets/riskone/2-2.png";
+import backTwo3 from "../assets/riskone/2-3.png";
+import backTwo4 from "../assets/riskone/2-4.png";
+import backThree1 from "../assets/riskone/3-1.png";
+import backThree2 from "../assets/riskone/3-2.png";
+import backThree3 from "../assets/riskone/3-3.png";
+import backThree4 from "../assets/riskone/3-4.png";
+import backFour1 from "../assets/riskone/4-1.png";
+import backFour2 from "../assets/riskone/4-2.png";
+import backFour3 from "../assets/riskone/4-3.png";
+import backFour4 from "../assets/riskone/4-4.png";
+import { FullScreenContainer } from "@jiaminghi/data-view-react";
+
+class RiskFourOne 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: "采场-终了边坡区",
+              LEVEL: 3,
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+            {
+              NAME: "采场-生产区域",
+              LEVEL: 2,
+              LEVEL1: 2,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+          ],
+        },
+        TotalCount: 0,
+        MessageType: 0,
+      },
+      level1: 0,
+      level2: 0,
+      level3: 0,
+      level4: 0,
+      data1: {},
+      data2: {},
+      data3: {},
+      data4: {},
+
+      content: "",
+      content2: "",
+      content3: "",
+      content4: "",
+    };
+  }
+  componentDidUpdate=(prevProps, prevState)=>{
+    if(prevProps.riskleveldata !== this.props.riskleveldata){
+      console.log('this.props.riskleveldata',this.props.riskleveldata)
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+      this.getTitle(item)
+    });
+  }
+  getTitle=(item)=>{
+    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 == "采场-终了边坡区") {
+      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>
+        ),
+      });
+    }
+  }
+  
+   
+  
+
+  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: "11%", height: "14%", 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: "19%", height: "14%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 采场-终了边坡 */}
+              <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: "61%", height: "48%", 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: "56%", height: "65%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 采场-终了边坡区域2 */}
+              {/* <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: "11%", 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" }}
+                    className={styles.riskhover}
+                  ></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",
+                    }}
+                    className={styles.riskhover}
+                  ></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" }}
+                    className={styles.riskhover}
+                  ></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" }}
+                    className={styles.riskhover}
+                  ></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>
+          </div>
+        </FullScreenContainer>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));

src/layout/RiskFourThree.js

@@ -0,0 +1,254 @@
+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 "./riskThree.less";
+import echarts from "echarts";
+import storage from "../utils/storage";
+import { initFilter } from "../utils/common";
+import realGif from "../assets/riskthree/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/riskthree/1-1.png";
+import back2 from "../assets/riskthree/1-2.png";
+import back3 from "../assets/riskthree/1-3.png";
+import back4 from "../assets/riskthree/1-4.png";
+import backTwo1 from "../assets/riskthree/2-1.png";
+import backTwo2 from "../assets/riskthree/2-2.png";
+import backTwo3 from "../assets/riskthree/2-3.png";
+import backTwo4 from "../assets/riskthree/2-4.png";
+import { FullScreenContainer } from "@jiaminghi/data-view-react";
+
+class RiskFourOne 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,
+            },
+          ],
+        },
+        TotalCount: 0,
+        MessageType: 0,
+      },
+      level1: 0,
+      level2: 0,
+      data1: {},
+      data2: {},
+
+      content: "",
+      content2: "",
+    };
+  }
+  componentDidUpdate=(prevProps, prevState)=>{
+    if(prevProps.riskleveldata !== this.props.riskleveldata){
+      console.log('this.props.riskleveldata',this.props.riskleveldata)
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+      this.getTitle(item)
+    });
+  }
+  getTitle=(item)=>{
+    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>
+        ),
+      });
+    }
+  }
+  
+   
+  
+
+  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: "34%", height: "33%", 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: "41%", height: "62%", 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" }}
+                    className={styles.riskhover}
+                  ></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",
+                    }}
+                    className={styles.riskhover}
+                  ></img>
+                </Popover>
+              </div>
+            </div>
+          </div>
+        </FullScreenContainer>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));

src/layout/RiskFourTwo.js

@@ -0,0 +1,337 @@
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { connect } from "dva";
+import { withRouter } from "dva/router";
+import {  Popover } from "antd";
+import styles from "./riskTwo.less";
+import realGif from "../assets/risktwo/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/risktwo/1-1.png";
+import back2 from "../assets/risktwo/1-2.png";
+import back3 from "../assets/risktwo/1-3.png";
+import back4 from "../assets/risktwo/1-4.png";
+import backTwo1 from "../assets/risktwo/2-1.png";
+import backTwo2 from "../assets/risktwo/2-2.png";
+import backTwo3 from "../assets/risktwo/2-3.png";
+import backTwo4 from "../assets/risktwo/2-4.png";
+import backThree1 from "../assets/risktwo/3-1.png";
+import backThree2 from "../assets/risktwo/3-2.png";
+import backThree3 from "../assets/risktwo/3-3.png";
+import backThree4 from "../assets/risktwo/3-4.png";
+import { FullScreenContainer } from "@jiaminghi/data-view-react";
+
+class RiskFourOne 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: "采场-生产区域",
+              LEVEL: 3,
+              LEVEL1: 3,
+              LEVEL2: 2,
+              LEVEL3: 3,
+              LEVEL4: 4,
+            },
+          ],
+        },
+        TotalCount: 0,
+        MessageType: 0,
+      },
+      level1: 0,
+      level2: 0,
+      level3: 0,
+      level4: 0,
+      data1: {},
+      data2: {},
+      data3: {},
+      data4: {},
+
+      content: "",
+      content2: "",
+      content3: "",
+      content4: "",
+    };
+  }
+  componentDidUpdate=(prevProps, prevState)=>{
+    if(prevProps.riskleveldata !== this.props.riskleveldata){
+      console.log('this.props.riskleveldata',this.props.riskleveldata)
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
+      this.getTitle(item)
+    });
+  }
+  getTitle=(item)=>{
+    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 == "采场-生产区域") {
+      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>
+        ),
+      });
+    }
+  }
+  
+   
+  
+
+  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: "36%", height: "50%", 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: "71%", height: "61%", objectFit: "fill" }}
+                ></img>
+              </div>
+              {/* 露天采场 */}
+              <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: "45%", height: "26%", 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" }}
+                    className={styles.riskhover}
+                  ></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",
+                    }}
+                    className={styles.riskhover}
+                  ></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" }}
+                    className={styles.riskhover}
+                  ></img>
+                </Popover>
+              </div>
+
+            </div>
+          </div>
+        </FullScreenContainer>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));

src/layout/risk.less

@@ -104,27 +104,86 @@
   left: 81%;
   width: 100%;
   height: 100%;
- 
 }
 .riskhover {
-    transition: all 0.5s;
+  transition: all 0.5s;
-    animation: jump 1.8s infinite ;
+  animation: jump 1.8s infinite;
 }
 // .riskhover:hover {
 //     transform: scale(1.1);
 //     animation: jump 1.8s infinite ;
 // }
 
-
 @keyframes jump {
-    0% {
+  0% {
-        transform: translateY(0px);
+    transform: translateY(0px);
-    }
+  }
-    50% {
+  50% {
-        transform: translateY(-20px);
+    transform: translateY(-20px);
-    }
+  }
-    100% {
+  100% {
-        transform: translateY(0px);
+    transform: translateY(0px);
-    }
+  }
+}
+.wrap_scrollImg {
+  width: 100%;
+  height: 100%;
+  //background-color: #2C9806;
+  overflow: hidden;
+  position: relative;
+
+  span {
+    display: inline-block;
+  }
+}
+.left_icon {
+  left: 0;
+  cursor: pointer;
+  z-index: 99999999;
+  position: absolute;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 55px;
+  line-height: 55px;
+  width: 44px;
+  text-align: center;
+  font-size: 20px;
+  transition: 0.2s;
+  &:hover {
+    font-size: 30px;
+    height: 60px;
+    // line-height: 60px;
+    width:60px;
+    text-align: center;
+    margin: auto;
+  }
 }
 
+.right_icon {
+  right: 0;
+  cursor: pointer;
+  z-index: 99999999;
+  position: absolute;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 55px;
+  line-height: 55px;
+  width: 44px;
+  text-align: center;
+  font-size: 20px;
+  transition: 0.2s;
+  &:hover {
+    font-size: 30px;
+    height: 60px;
+    // line-height: 60px;
+    width:60px;
+    text-align: center;
+    margin: auto;
+  }
+}

src/layout/riskOne.less

@@ -0,0 +1,176 @@
+.riskt {
+  position: absolute;
+  top: 44%;
+  left: 22%;
+  width: 100%;
+  height: 100%;
+}
+.risktTwo {
+  position: absolute;
+  top: 25%;
+  left: 36%;
+  width: 100%;
+  height: 100%;
+}
+.risktThree {
+  position: absolute;
+  top: 80%;
+  left: 30%;
+  width: 100%;
+  height: 100%;
+}
+
+.risktFour {
+  position: absolute;
+  top: 50%;
+  left: 60%;
+  width: 100%;
+  height: 100%;
+}
+.risktFive {
+  position: absolute;
+  top: 27%;
+  left: 84%;
+  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: 42%;
+  left: 16%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackTwo {
+  position: absolute;
+  top: 21%;
+  left: 31%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackThree {
+  position: absolute;
+  top: 52%;
+  left: 15%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackFour {
+  position: absolute;
+  top: 19%;
+  left: 34%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackFive {
+  position: absolute;
+  top: 27%;
+  left: 80%;
+  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);
+  }
+}
+.wrap_scrollImg {
+  width: 100%;
+  height: 100%;
+  //background-color: #2C9806;
+  overflow: hidden;
+  position: relative;
+
+  span {
+    display: inline-block;
+  }
+}
+.left_icon {
+  left: 0;
+  cursor: pointer;
+  z-index: 99999999;
+  position: absolute;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 55px;
+  line-height: 55px;
+  width: 44px;
+  text-align: center;
+  font-size: 20px;
+  transition: 0.2s;
+  &:hover {
+    font-size: 30px;
+    height: 60px;
+    // line-height: 60px;
+    width:60px;
+    text-align: center;
+    margin: auto;
+  }
+}
+
+.right_icon {
+  right: 0;
+  cursor: pointer;
+  z-index: 99999999;
+  position: absolute;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 55px;
+  line-height: 55px;
+  width: 44px;
+  text-align: center;
+  font-size: 20px;
+  transition: 0.2s;
+}

src/layout/riskThree.less

@@ -0,0 +1,52 @@
+
+.riskt {
+  position: absolute;
+  top: 39%;
+  left: 32%;
+  width: 100%;
+  height: 100%;
+}
+.risktTwo {
+  position: absolute;
+  top: 35%;
+  left: 60%;
+  width: 100%;
+  height: 100%;
+}
+
+
+.riskback {
+  position: absolute;
+  top: 26%;
+  left: 18%;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackTwo {
+  position: absolute;
+  top: 10%;
+  left: 48%;
+  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/layout/riskTwo.less

@@ -0,0 +1,68 @@
+
+.riskt {
+  position: absolute;
+  top: 36%;
+  left: 13%;
+  width: 100%;
+  height: 100%;
+}
+.risktTwo {
+  position: absolute;
+  top: 60%;
+  left: 38%;
+  width: 100%;
+  height: 100%;
+}
+.risktThree {
+  position: absolute;
+  top: 24%;
+  left: 70%;
+  width: 100%;
+  height: 100%;
+}
+
+
+.riskback {
+  position: absolute;
+  top: 21%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.riskbackTwo {
+  position: absolute;
+  top: 38%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+}
+.riskbackThree {
+  position: absolute;
+  top: 15%;
+  left: 49%;
+  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);
+  }
+}