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