mh-lcmk-sms-web/src/layout/RiskFour.js
2024-08-23 17:15:40 +08:00

110 lines
3.1 KiB
JavaScript

import React, { useState, useEffect, useMemo, useRef } from "react";
import { connect } from "dva";
import { withRouter, matchPath } from "dva/router";
import { Scrollbars } from "react-custom-scrollbars";
import { Icon, Row, Col, Progress, Popover } from "antd";
import EnergyIcon from "../utils/energyIcon";
import { $consts } from "../plugins";
import styles from "./risk.less";
import echarts from "echarts";
import { initFilter } from "../utils/common";
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 = {
translateX:1,
rightDis:false,
leftDis:true,
riskleveldata:[]
};
}
clickRightIcon = () => {
if(this.state.translateX <3){
this.setState({
translateX:this.state.translateX+1
})
}
};
componentDidMount() {
this.getRiskData();
}
getRiskData = () => {
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) {
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 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>
);
}
}
export default withRouter(connect(({ login }) => ({ login }))(RiskFour));