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