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));
|