433 lines
14 KiB
JavaScript
433 lines
14 KiB
JavaScript
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: [],
|
||
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){
|
||
this.props.riskleveldata.map((item, index) => {
|
||
this.getTitle(item)
|
||
this.setState({
|
||
RiskData:this.props.riskleveldata
|
||
})
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.props.riskleveldata?.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.LEVEL1}</div>
|
||
<div>较大风险：{item.LEVEL2}</div>
|
||
<div>一般风险：{item.LEVEL3}</div>
|
||
<div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
|
||
<div>较大风险：{item.LEVEL2}</div>
|
||
<div>一般风险：{item.LEVEL3}</div>
|
||
<div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
|
||
<div>较大风险：{item.LEVEL2}</div>
|
||
<div>一般风险：{item.LEVEL3}</div>
|
||
<div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
|
||
<div>较大风险：{item.LEVEL2}</div>
|
||
<div>一般风险：{item.LEVEL3}</div>
|
||
<div>低风险：{item.LEVEL4}</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));
|