-
-
- {/* 东排土场背景区域 */}
-
-
-
- {/* 堆矿场 */}
-
-
-
- {/* 622工业场地 */}
-
-
-
- {/* 露天生产区 */}
-
-
-
- {/* 终了边坡区域 */}
-
-
-
{" "}
- {/* 烧结厂 */}
-
-
-
{" "}
- {/* 580回风井口 */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {" "}
-
-
-
-
-
- {" "}
-
-
-
-
-
- {" "}
-
-
-
-
-
- {" "}
-
-
-
-
{" "}
-
- {" "}
-
-
-
-
-
+
+ {this.clickLeftIcon()}} style={this.state.leftDis==true?{color:'#888888'}:{color:'#fff'}}>
+
+
+ {this.clickRightIcon()}} style={this.state.rightDis==true?{color:'#888888'}:{color:'#fff'}}>
+
+
+ {this.state.translateX ==1?< RiskFourOne riskleveldata={this.state.riskleveldata}/>:this.state.translateX ==2?< RiskFourTwo riskleveldata={this.state.riskleveldata}/>:}
+
);
diff --git a/src/layout/RiskFourOne.js b/src/layout/RiskFourOne.js
new file mode 100644
index 0000000..871c49d
--- /dev/null
+++ b/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: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "东排土场") {
+ this.setState({
+ level2: item.LEVEL,
+ data2: item,
+ content2: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "采场-终了边坡区") {
+ this.setState({
+ level3: item.LEVEL,
+ data3: item,
+ content3: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "采场-生产区域") {
+ this.setState({
+ level4: item.LEVEL,
+ data4: item,
+ content4: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ }
+
+
+
+
+ render() {
+ return (
+
+
+
+
+
+ {/* 矿石堆场背景区域 */}
+
+
+
+ {/* 东排土场 */}
+
+
+
+ {/* 采场-终了边坡 */}
+
+
+
+ {/* 采场-生产取悦 */}
+
+
+
+ {/* 采场-终了边坡区域2 */}
+ {/*
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+
+
+
+
+
+ {" "}
+
+
+
+
+ {/*
+ {" "}
+
+
+
+
*/}
+
+
+ );
+ }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));
diff --git a/src/layout/RiskFourThree.js b/src/layout/RiskFourThree.js
new file mode 100644
index 0000000..a71a8b7
--- /dev/null
+++ b/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: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "尾矿库") {
+ this.setState({
+ level2: item.LEVEL,
+ data2: item,
+ content2: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ }
+
+
+
+
+ render() {
+ return (
+
+
+
+
+
+ {/* 选矿车间 */}
+
+
+
+ {/* 尾矿库 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));
diff --git a/src/layout/RiskFourTwo.js b/src/layout/RiskFourTwo.js
new file mode 100644
index 0000000..1b00969
--- /dev/null
+++ b/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: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "北排土场") {
+ this.setState({
+ level2: item.LEVEL,
+ data2: item,
+ content2: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ if (item.NAME == "采场-生产区域") {
+ this.setState({
+ level3: item.LEVEL,
+ data3: item,
+ content3: (
+
+
区域名称：{item.NAME}
+
+
+
较大风险：{item.LEVEL2}
+
一般风险：{item.LEVEL3}
+
+
+ {/*
*/}
+
+
+
+ ),
+ });
+ }
+ }
+
+
+
+
+ render() {
+ return (
+
+
+
+
+
+ {/* 大禾底排土场 */}
+
+
+
+ {/* 北排土场 */}
+
+
+
+ {/* 露天采场 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));
diff --git a/src/layout/risk.less b/src/layout/risk.less
index 5efaf59..74f5fa8 100644
--- a/src/layout/risk.less
+++ b/src/layout/risk.less
@@ -104,27 +104,86 @@
left: 81%;
width: 100%;
height: 100%;
-
}
.riskhover {
- transition: all 0.5s;
- animation: jump 1.8s infinite ;
+ 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);
- }
+ 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;
+ &:hover {
+ font-size: 30px;
+ height: 60px;
+ // line-height: 60px;
+ width:60px;
+ text-align: center;
+ margin: auto;
+ }
+}
diff --git a/src/layout/riskOne.less b/src/layout/riskOne.less
new file mode 100644
index 0000000..eec7825
--- /dev/null
+++ b/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;
+}
diff --git a/src/layout/riskThree.less b/src/layout/riskThree.less
new file mode 100644
index 0000000..b61a5b9
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/src/layout/riskTwo.less b/src/layout/riskTwo.less
new file mode 100644
index 0000000..e2bcfb6
--- /dev/null
+++ b/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);
+ }
+}