ccy/mh-lcmk-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

风险四色

Browse Source
This commit is contained in:
yunkexin 2024-08-23 17:15:40 +08:00
parent e6b3a30d74
commit 2a2a8ffdeb
54 changed files with 1484 additions and 865 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/riskone/1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
src/assets/riskone/1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/riskone/1-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
src/assets/riskone/1-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/riskone/2-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/riskone/2-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/riskone/2-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/riskone/2-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/riskone/3-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/riskone/3-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/riskone/3-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/assets/riskone/3-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/riskone/4-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
src/assets/riskone/4-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/riskone/4-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/riskone/4-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/riskone/5-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/assets/riskone/5-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/riskone/5-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
src/assets/riskone/5-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/riskone/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 MiB

BIN
src/assets/riskone/backno.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

BIN
src/assets/riskthree/1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/riskthree/1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/riskthree/1-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/riskthree/1-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/riskthree/2-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/riskthree/2-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
src/assets/riskthree/2-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/riskthree/2-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
src/assets/riskthree/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 MiB

BIN
src/assets/riskthree/backno.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 MiB

BIN
src/assets/risktwo/1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/risktwo/1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/risktwo/1-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/risktwo/1-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/risktwo/2-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/risktwo/2-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/risktwo/2-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/risktwo/2-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/risktwo/3-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/assets/risktwo/3-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/risktwo/3-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/assets/risktwo/3-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/risktwo/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 822 KiB

BIN
src/assets/risktwo/backno.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 MiB

915
src/layout/RiskFour.js
View File

@ -8,887 +8,98 @@ import { $consts } from "../plugins";
import styles from "./risk.less";
import echarts from "echarts";
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";
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 storage from "../utils/storage";
import { FullScreenContainer } from "@jiaminghi/data-view-react";
import RiskFourOne from "./RiskFourOne";
import RiskFourTwo from "./RiskFourTwo";
import RiskFourThree from "./RiskFourThree";
class RiskFour extends React.Component {
constructor(props) {
super(props);
this.state = {
RiskData: {
IsSuccessful: true,
Data: {
RISKLEVELCOUNTS: [
{
NAME: "东排土场",
LEVEL: 1,
LEVEL1: 1,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "堆矿场",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "622工业场地",
LEVEL: 4,
LEVEL1: 4,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "露天生产区",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "终了边坡区域",
LEVEL: 2,
LEVEL1: 2,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "烧结厂",
LEVEL: 1,
LEVEL1: 1,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "580回风井口",
LEVEL: 2,
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: {},
content: "",
content2: "",
content3: "",
content4: "",
content5: "",
content6: "",
content7: "",
translateX:1,
rightDis:false,
leftDis:true,
riskleveldata:[]
};
}
componentDidMount() {
clickRightIcon = () => {
if(this.state.translateX <3){
this.setState({
translateX:this.state.translateX+1
})
}
this.state.RiskData.Data.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>
),
});
}
});
};
componentDidMount() {
this.getRiskData();
// this.setState({
// content7:<div>
// <div>区域名称：{this.state.data7.NAME}</div>
// <div>较大风险：{this.state.data7.LEVEL2}</div>
// <div>一般风险：{this.state.data7.LEVEL3}</div>
// </div>
// })
}
getRiskData = () => {
const json = initFilter(this.props.login.OrgId);
var orgId = storage("lacal").getItem("webOrgId")?.val
const json = initFilter(orgId);
this.props.dispatch({
type: "app/getDataByPost",
url: "HM/HMEvaluateRisk/getRiskLevelCountData",
payload: json,
onComplete: (ret) => {
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>
),
});
}
this.setState({
riskleveldata: ret.RISKLEVELCOUNTS,
})
// })
// ret.RISKLEVELCOUNTS.map((item, index) => {
// this.getTitle(item)
// })
}
},
});
};
componentDidUpdate =(prevProps, prevState)=> {
if(this.state.translateX != prevState.translateX){
if (this.state.translateX == 1) {
this.setState({
rightDis:false,
leftDis:true
})
}else if(this.state.translateX == 3){
this.setState({
rightDis:true,
leftDis:false
})
}else{
this.setState({
rightDis:false,
leftDis:false
})
}
}
}
clickLeftIcon = () => {
if(this.state.translateX >1){
this.setState({
translateX:this.state.translateX-1
})
}
};
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: "24%", height: "23%", 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>
{/* 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.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.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.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>{" "}
{/* 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>
<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">
<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>
<div className={styles.wrap_scrollImg}>
<span className={styles.left_icon} onClick={()=>{this.clickLeftIcon()}} style={this.state.leftDis==true?{color:'#888888'}:{color:'#fff'}}>
<Icon type="left" />
</span>
<span className={styles.right_icon} onClick={()=>{this.clickRightIcon()}} style={this.state.rightDis==true?{color:'#888888'}:{color:'#fff'}}>
<Icon type="right" />
</span>
{this.state.translateX ==1?< RiskFourOne riskleveldata={this.state.riskleveldata}/>:this.state.translateX ==2?< RiskFourTwo riskleveldata={this.state.riskleveldata}/>:<RiskFourThree riskleveldata={this.state.riskleveldata}/>}
</div>
</FullScreenContainer>
</React.Fragment>
);

462
src/layout/RiskFourOne.js Normal file
View File

@ -0,0 +1,462 @@
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: {
IsSuccessful: true,
Data: {
RISKLEVELCOUNTS: [
{
NAME: "矿石堆场",
LEVEL: 1,
LEVEL1: 1,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "东排土场",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "采场-终了边坡区",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "采场-生产区域",
LEVEL: 2,
LEVEL1: 2,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
],
},
TotalCount: 0,
MessageType: 0,
},
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){
console.log('this.props.riskleveldata',this.props.riskleveldata)
this.props.riskleveldata.map((item, index) => {
this.getTitle(item)
});
}
}
componentDidMount() {
this.state.RiskData.Data.RISKLEVELCOUNTS.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.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 == "采场-终了边坡区") {
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>
),
});
}
}
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));

254
src/layout/RiskFourThree.js Normal file
View File

@ -0,0 +1,254 @@
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 "./riskThree.less";
import echarts from "echarts";
import storage from "../utils/storage";
import { initFilter } from "../utils/common";
import realGif from "../assets/riskthree/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/riskthree/1-1.png";
import back2 from "../assets/riskthree/1-2.png";
import back3 from "../assets/riskthree/1-3.png";
import back4 from "../assets/riskthree/1-4.png";
import backTwo1 from "../assets/riskthree/2-1.png";
import backTwo2 from "../assets/riskthree/2-2.png";
import backTwo3 from "../assets/riskthree/2-3.png";
import backTwo4 from "../assets/riskthree/2-4.png";
import { FullScreenContainer } from "@jiaminghi/data-view-react";
class RiskFourOne extends React.Component {
constructor(props) {
super(props);
this.state = {
RiskData: {
IsSuccessful: true,
Data: {
RISKLEVELCOUNTS: [
{
NAME: "选矿车间",
LEVEL: 1,
LEVEL1: 1,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "尾矿库",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
],
},
TotalCount: 0,
MessageType: 0,
},
level1: 0,
level2: 0,
data1: {},
data2: {},
content: "",
content2: "",
};
}
componentDidUpdate=(prevProps, prevState)=>{
if(prevProps.riskleveldata !== this.props.riskleveldata){
console.log('this.props.riskleveldata',this.props.riskleveldata)
this.props.riskleveldata.map((item, index) => {
this.getTitle(item)
});
}
}
componentDidMount() {
this.state.RiskData.Data.RISKLEVELCOUNTS.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.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>
),
});
}
}
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: "34%", height: "33%", 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: "41%", height: "62%", 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>
</div>
</FullScreenContainer>
</React.Fragment>
);
}
}
export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));

337
src/layout/RiskFourTwo.js Normal file
View File

@ -0,0 +1,337 @@
import React, { useState, useEffect, useMemo, useRef } from "react";
import { connect } from "dva";
import { withRouter } from "dva/router";
import { Popover } from "antd";
import styles from "./riskTwo.less";
import realGif from "../assets/risktwo/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/risktwo/1-1.png";
import back2 from "../assets/risktwo/1-2.png";
import back3 from "../assets/risktwo/1-3.png";
import back4 from "../assets/risktwo/1-4.png";
import backTwo1 from "../assets/risktwo/2-1.png";
import backTwo2 from "../assets/risktwo/2-2.png";
import backTwo3 from "../assets/risktwo/2-3.png";
import backTwo4 from "../assets/risktwo/2-4.png";
import backThree1 from "../assets/risktwo/3-1.png";
import backThree2 from "../assets/risktwo/3-2.png";
import backThree3 from "../assets/risktwo/3-3.png";
import backThree4 from "../assets/risktwo/3-4.png";
import { FullScreenContainer } from "@jiaminghi/data-view-react";
class RiskFourOne extends React.Component {
constructor(props) {
super(props);
this.state = {
RiskData: {
IsSuccessful: true,
Data: {
RISKLEVELCOUNTS: [
{
NAME: "大禾底排土场",
LEVEL: 1,
LEVEL1: 1,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "北排土场",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
{
NAME: "采场-生产区域",
LEVEL: 3,
LEVEL1: 3,
LEVEL2: 2,
LEVEL3: 3,
LEVEL4: 4,
},
],
},
TotalCount: 0,
MessageType: 0,
},
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){
console.log('this.props.riskleveldata',this.props.riskleveldata)
this.props.riskleveldata.map((item, index) => {
this.getTitle(item)
});
}
}
componentDidMount() {
this.state.RiskData.Data.RISKLEVELCOUNTS.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.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 == "采场-生产区域") {
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>
),
});
}
}
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: "36%", height: "50%", 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: "71%", height: "61%", 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: "45%", height: "26%", 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>
</div>
</FullScreenContainer>
</React.Fragment>
);
}
}
export default withRouter(connect(({ login }) => ({ login }))(RiskFourOne));

85
src/layout/risk.less
View File

@ -104,27 +104,86 @@
left: 81%;
width: 100%;
height: 100%;
}
.riskhover {
transition: all 0.5s;
animation: jump 1.8s infinite ;
transition: all 0.5s;
animation: jump 1.8s infinite;
}
// .riskhover:hover {
// transform: scale(1.1);
// animation: jump 1.8s infinite ;
// }
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.wrap_scrollImg {
width: 100%;
height: 100%;
//background-color: #2C9806;
overflow: hidden;
position: relative;
span {
display: inline-block;
}
}
.left_icon {
left: 0;
cursor: pointer;
z-index: 99999999;
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
bottom: 0;
margin: auto;
height: 55px;
line-height: 55px;
width: 44px;
text-align: center;
font-size: 20px;
transition: 0.2s;
&:hover {
font-size: 30px;
height: 60px;
// line-height: 60px;
width:60px;
text-align: center;
margin: auto;
}
}
.right_icon {
right: 0;
cursor: pointer;
z-index: 99999999;
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
bottom: 0;
margin: auto;
height: 55px;
line-height: 55px;
width: 44px;
text-align: center;
font-size: 20px;
transition: 0.2s;
&:hover {
font-size: 30px;
height: 60px;
// line-height: 60px;
width:60px;
text-align: center;
margin: auto;
}
}

176
src/layout/riskOne.less Normal file
View File

@ -0,0 +1,176 @@
.riskt {
position: absolute;
top: 44%;
left: 22%;
width: 100%;
height: 100%;
}
.risktTwo {
position: absolute;
top: 25%;
left: 36%;
width: 100%;
height: 100%;
}
.risktThree {
position: absolute;
top: 80%;
left: 30%;
width: 100%;
height: 100%;
}
.risktFour {
position: absolute;
top: 50%;
left: 60%;
width: 100%;
height: 100%;
}
.risktFive {
position: absolute;
top: 27%;
left: 84%;
width: 100%;
height: 100%;
}
.risktSix {
position: absolute;
top: 75%;
left: 77%;
width: 100%;
height: 100%;
}
.risktSeven {
position: absolute;
top: 42%;
left: 87%;
width: 100%;
height: 100%;
}
.riskback {
position: absolute;
top: 42%;
left: 16%;
width: 100%;
height: 100%;
}
.riskbackTwo {
position: absolute;
top: 21%;
left: 31%;
width: 100%;
height: 100%;
}
.riskbackThree {
position: absolute;
top: 52%;
left: 15%;
width: 100%;
height: 100%;
}
.riskbackFour {
position: absolute;
top: 19%;
left: 34%;
width: 100%;
height: 100%;
}
.riskbackFive {
position: absolute;
top: 27%;
left: 80%;
width: 100%;
height: 100%;
}
.riskbackSix {
position: absolute;
top: 62%;
left: 70%;
width: 100%;
height: 100%;
}
.riskbackSeven {
position: absolute;
top: 40%;
left: 81%;
width: 100%;
height: 100%;
}
.riskhover {
transition: all 0.5s;
animation: jump 1.8s infinite;
}
// .riskhover:hover {
// transform: scale(1.1);
// animation: jump 1.8s infinite ;
// }
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.wrap_scrollImg {
width: 100%;
height: 100%;
//background-color: #2C9806;
overflow: hidden;
position: relative;
span {
display: inline-block;
}
}
.left_icon {
left: 0;
cursor: pointer;
z-index: 99999999;
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
bottom: 0;
margin: auto;
height: 55px;
line-height: 55px;
width: 44px;
text-align: center;
font-size: 20px;
transition: 0.2s;
&:hover {
font-size: 30px;
height: 60px;
// line-height: 60px;
width:60px;
text-align: center;
margin: auto;
}
}
.right_icon {
right: 0;
cursor: pointer;
z-index: 99999999;
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
bottom: 0;
margin: auto;
height: 55px;
line-height: 55px;
width: 44px;
text-align: center;
font-size: 20px;
transition: 0.2s;
}

52
src/layout/riskThree.less Normal file
View File

@ -0,0 +1,52 @@
.riskt {
position: absolute;
top: 39%;
left: 32%;
width: 100%;
height: 100%;
}
.risktTwo {
position: absolute;
top: 35%;
left: 60%;
width: 100%;
height: 100%;
}
.riskback {
position: absolute;
top: 26%;
left: 18%;
width: 100%;
height: 100%;
}
.riskbackTwo {
position: absolute;
top: 10%;
left: 48%;
width: 100%;
height: 100%;
}
.riskhover {
transition: all 0.5s;
animation: jump 1.8s infinite;
}
// .riskhover:hover {
// transform: scale(1.1);
// animation: jump 1.8s infinite ;
// }
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}

68
src/layout/riskTwo.less Normal file
View File

@ -0,0 +1,68 @@
.riskt {
position: absolute;
top: 36%;
left: 13%;
width: 100%;
height: 100%;
}
.risktTwo {
position: absolute;
top: 60%;
left: 38%;
width: 100%;
height: 100%;
}
.risktThree {
position: absolute;
top: 24%;
left: 70%;
width: 100%;
height: 100%;
}
.riskback {
position: absolute;
top: 21%;
left: 0;
width: 100%;
height: 100%;
}
.riskbackTwo {
position: absolute;
top: 38%;
left: 0%;
width: 100%;
height: 100%;
}
.riskbackThree {
position: absolute;
top: 15%;
left: 49%;
width: 100%;
height: 100%;
}
.riskhover {
transition: all 0.5s;
animation: jump 1.8s infinite;
}
// .riskhover:hover {
// transform: scale(1.1);
// animation: jump 1.8s infinite ;
// }
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}