初始化数据，接口有对应值就取接口的值
This commit is contained in:
parent
0b6bd8ffd7
commit
dd42432cb2
@ -7,9 +7,7 @@ import EnergyIcon from "../utils/energyIcon";
|
|||||||
import { $consts } from "../plugins";
|
import { $consts } from "../plugins";
|
||||||
import styles from "./risk.less";
|
import styles from "./risk.less";
|
||||||
import echarts from "echarts";
|
import echarts from "echarts";
|
||||||
import {
|
import { initFilter } from "../utils/common";
|
||||||
initFilter,
|
|
||||||
} from '../utils/common'
|
|
||||||
import realGif from "../assets/risk/backno.jpg";
|
import realGif from "../assets/risk/backno.jpg";
|
||||||
import red from "../assets/risk/red.png";
|
import red from "../assets/risk/red.png";
|
||||||
import orange from "../assets/risk/orange.png";
|
import orange from "../assets/risk/orange.png";
|
||||||
@ -44,9 +42,7 @@ import backSeven2 from "../assets/risk/7-2.png";
|
|||||||
import backSeven3 from "../assets/risk/7-3.png";
|
import backSeven3 from "../assets/risk/7-3.png";
|
||||||
import backSeven4 from "../assets/risk/7-4.png";
|
import backSeven4 from "../assets/risk/7-4.png";
|
||||||
import qrcode from "../assets/risk/1.png";
|
import qrcode from "../assets/risk/1.png";
|
||||||
import {
|
import { FullScreenContainer } from "@jiaminghi/data-view-react";
|
||||||
FullScreenContainer,
|
|
||||||
} from "@jiaminghi/data-view-react";
|
|
||||||
|
|
||||||
class RiskFour extends React.Component {
|
class RiskFour extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -58,6 +54,7 @@ class RiskFour extends React.Component {
|
|||||||
RISKLEVELCOUNTS: [
|
RISKLEVELCOUNTS: [
|
||||||
{
|
{
|
||||||
NAME: "东排土场",
|
NAME: "东排土场",
|
||||||
|
LEVEL: 1,
|
||||||
LEVEL1: 1,
|
LEVEL1: 1,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -65,6 +62,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "堆矿场",
|
NAME: "堆矿场",
|
||||||
|
LEVEL: 3,
|
||||||
LEVEL1: 3,
|
LEVEL1: 3,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -72,6 +70,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "622工业场地",
|
NAME: "622工业场地",
|
||||||
|
LEVEL: 4,
|
||||||
LEVEL1: 4,
|
LEVEL1: 4,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -79,6 +78,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "露天生产区",
|
NAME: "露天生产区",
|
||||||
|
LEVEL: 3,
|
||||||
LEVEL1: 3,
|
LEVEL1: 3,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -86,6 +86,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "终了边坡区域",
|
NAME: "终了边坡区域",
|
||||||
|
LEVEL: 2,
|
||||||
LEVEL1: 2,
|
LEVEL1: 2,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -93,6 +94,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "烧结厂",
|
NAME: "烧结厂",
|
||||||
|
LEVEL: 1,
|
||||||
LEVEL1: 1,
|
LEVEL1: 1,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -100,6 +102,7 @@ class RiskFour extends React.Component {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
NAME: "580回风井口",
|
NAME: "580回风井口",
|
||||||
|
LEVEL: 2,
|
||||||
LEVEL1: 2,
|
LEVEL1: 2,
|
||||||
LEVEL2: 2,
|
LEVEL2: 2,
|
||||||
LEVEL3: 3,
|
LEVEL3: 3,
|
||||||
@ -125,52 +128,208 @@ class RiskFour extends React.Component {
|
|||||||
data6: {},
|
data6: {},
|
||||||
data7: {},
|
data7: {},
|
||||||
|
|
||||||
|
content: "",
|
||||||
|
content2: "",
|
||||||
|
content3: "",
|
||||||
|
content4: "",
|
||||||
|
content5: "",
|
||||||
|
content6: "",
|
||||||
content7: "",
|
content7: "",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.getRiskData()
|
|
||||||
this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
|
this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
|
||||||
if (item.NAME == "东排土场") {
|
if (item.NAME == "东排土场") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level1: item.LEVEL1,
|
level1: item.LEVEL,
|
||||||
data1: item,
|
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 == "堆矿场") {
|
if (item.NAME == "堆矿场") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level2: item.LEVEL1,
|
level2: item.LEVEL,
|
||||||
data2: item,
|
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工业场地") {
|
if (item.NAME == "622工业场地") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level3: item.LEVEL1,
|
level3: item.LEVEL,
|
||||||
data3: item,
|
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 == "露天生产区") {
|
if (item.NAME == "露天生产区") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level4: item.LEVEL1,
|
level4: item.LEVEL,
|
||||||
data4: item,
|
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 == "终了边坡区域") {
|
if (item.NAME == "终了边坡区域") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level5: item.LEVEL1,
|
level5: item.LEVEL,
|
||||||
data5: item,
|
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 == "烧结厂") {
|
if (item.NAME == "烧结厂") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level6: item.LEVEL1,
|
level6: item.LEVEL,
|
||||||
data6: item,
|
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回风井口") {
|
if (item.NAME == "580回风井口") {
|
||||||
this.setState({
|
this.setState({
|
||||||
level7: item.LEVEL1,
|
level7: item.LEVEL,
|
||||||
data7: item,
|
data7: item,
|
||||||
content7: (
|
content7: (
|
||||||
<div>
|
<div>
|
||||||
@ -188,11 +347,11 @@ class RiskFour extends React.Component {
|
|||||||
<div>一般风险：{item.LEVEL3}</div>
|
<div>一般风险：{item.LEVEL3}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img
|
{/* <img
|
||||||
src={qrcode}
|
src={qrcode}
|
||||||
alt="33"
|
alt="33"
|
||||||
style={{ width: "50px", height: "50px", objectFit: "fill" }}
|
style={{ width: "50px", height: "50px", objectFit: "fill" }}
|
||||||
></img>
|
></img> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -200,6 +359,7 @@ class RiskFour extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
this.getRiskData();
|
||||||
// this.setState({
|
// this.setState({
|
||||||
// content7:<div>
|
// content7:<div>
|
||||||
// <div>区域名称：{this.state.data7.NAME}</div>
|
// <div>区域名称：{this.state.data7.NAME}</div>
|
||||||
@ -215,12 +375,230 @@ class RiskFour extends React.Component {
|
|||||||
url: "HM/HMEvaluateRisk/getRiskLevelCountData",
|
url: "HM/HMEvaluateRisk/getRiskLevelCountData",
|
||||||
payload: json,
|
payload: json,
|
||||||
onComplete: (ret) => {
|
onComplete: (ret) => {
|
||||||
if (ret ) {
|
if (ret) {
|
||||||
console.log(ret,'989989')
|
ret.RISKLEVELCOUNTS.map((item,index)=>{
|
||||||
|
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 == "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>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
@ -230,9 +608,12 @@ class RiskFour extends React.Component {
|
|||||||
<img
|
<img
|
||||||
src={realGif}
|
src={realGif}
|
||||||
alt="1"
|
alt="1"
|
||||||
style={{ width: "100%", height: "100%", objectFit: "fill" }}
|
style={{ width: "100%", height: "100%", objectFit: "fill" ,zIndex: -1}}
|
||||||
></img>
|
></img>
|
||||||
{/* 东排土场 */}
|
<div
|
||||||
|
style={{ position: "absolute", top: "0px", left: "0px",width: "100%", height: "100%" ,zIndex: 1}}
|
||||||
|
>
|
||||||
|
{/* 东排土场背景区域 */}
|
||||||
<div className={styles.riskback}>
|
<div className={styles.riskback}>
|
||||||
<img
|
<img
|
||||||
src={
|
src={
|
||||||
@ -250,23 +631,6 @@ class RiskFour extends React.Component {
|
|||||||
style={{ width: "24%", height: "23%", objectFit: "fill" }}
|
style={{ width: "24%", height: "23%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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}>
|
<div className={styles.riskbackTwo}>
|
||||||
<img
|
<img
|
||||||
@ -285,24 +649,6 @@ class RiskFour extends React.Component {
|
|||||||
style={{ width: "18%", height: "17%", objectFit: "fill" }}
|
style={{ width: "18%", height: "17%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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工业场地 */}
|
{/* 622工业场地 */}
|
||||||
<div className={styles.riskbackThree}>
|
<div className={styles.riskbackThree}>
|
||||||
<img
|
<img
|
||||||
@ -321,24 +667,6 @@ class RiskFour extends React.Component {
|
|||||||
style={{ width: "20%", height: "28%", objectFit: "fill" }}
|
style={{ width: "20%", height: "28%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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}>
|
<div className={styles.riskbackFour}>
|
||||||
<img
|
<img
|
||||||
@ -357,24 +685,6 @@ class RiskFour extends React.Component {
|
|||||||
style={{ width: "64%", height: "70%", objectFit: "fill" }}
|
style={{ width: "64%", height: "70%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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}>
|
<div className={styles.riskbackFive}>
|
||||||
<img
|
<img
|
||||||
@ -392,25 +702,7 @@ class RiskFour extends React.Component {
|
|||||||
alt="10"
|
alt="10"
|
||||||
style={{ width: "45%", height: "50%", objectFit: "fill" }}
|
style={{ width: "45%", height: "50%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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}>
|
<div className={styles.riskbackSix}>
|
||||||
<img
|
<img
|
||||||
@ -428,25 +720,7 @@ class RiskFour extends React.Component {
|
|||||||
alt="12"
|
alt="12"
|
||||||
style={{ width: "27%", height: "37%", objectFit: "fill" }}
|
style={{ width: "27%", height: "37%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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回风井口 */}
|
{/* 580回风井口 */}
|
||||||
<div className={styles.riskbackSeven}>
|
<div className={styles.riskbackSeven}>
|
||||||
<img
|
<img
|
||||||
@ -465,6 +739,133 @@ class RiskFour extends React.Component {
|
|||||||
style={{ width: "12%", height: "13%", objectFit: "fill" }}
|
style={{ width: "12%", height: "13%", objectFit: "fill" }}
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</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}>
|
<div className={styles.risktSeven}>
|
||||||
{" "}
|
{" "}
|
||||||
<Popover content={this.state.content7} title="" trigger="click">
|
<Popover content={this.state.content7} title="" trigger="click">
|
||||||
@ -487,6 +888,7 @@ class RiskFour extends React.Component {
|
|||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</FullScreenContainer>
|
</FullScreenContainer>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user