Merge branch 'main' of http://47.122.43.22:3000/wjn/mh-lcmk-sms-web

src/components/CustomPages/BI/BI030FormRunAnalysis.js

@@ -0,0 +1,338 @@
+import React, { useState, useEffect, useRef, Component } from 'react'
+import { connect } from 'dva'
+import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extendOrder, extend } from "../../../utils/common"
+import { Table, Row, Col, Button, Select,DatePicker ,Form,Spin,message,Modal} from 'antd';
+import echarts from 'echarts';
+import moment from 'moment'
+import FormPage from '../../../components/FormPage'
+import { IFComponent } from '@woowalker/feui';
+import DropDownPagination from '../../common/DropDownPaginationEx'
+import XLSX from 'xlsx';
+const { Option } = Select;
+class BI030FormRunAnalysis extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startTime:moment(this.getDate(), 'YYYY-MM-DD 00:00:00'),//moment(new Date()).add(-1, "month").format('YYYY-MM-DD 00:00:00'),
+      endTime:moment(this.getEndDate(), 'YYYY-MM-DD 23:59:59'),
+      mouldSelect:'',
+      visible:false,
+      pagination: {},
+      tmpData:[],
+      departData:[],
+      retData:[],
+      columns:[
+        {
+            width: "100px",
+            title: '组织',
+            dataIndex: 'MOUDLE_NAME',
+            key: 'MOUDLE_NAME',
+          },
+          {
+            width: "80px",
+            title: '总任务数',
+            dataIndex: 'TOTAL_QTY',
+            key: 'TOTAL_QTY',
+            render: (text, record) => (
+              <span>
+                <a onClick={() => this.showEditModal(record,'')}>{record.TOTAL_QTY}</a>
+              </span>
+            ),
+          },
+          {
+            width: "80px",
+            title: '正常已办',
+            dataIndex: 'FINISH_QTY',
+            key: 'FINISH_QTY',
+            render: (text, record) => (
+              <span>
+                <a onClick={() => this.showEditModal(record,1)}>{record.FINISH_QTY}</a>
+              </span>
+            ),
+          },
+          {
+            width: "80px",
+            title: '超时已办',
+            dataIndex: 'OVER_FINISH_QTY',
+            key: 'OVER_FINISH_QTY',
+            render: (text, record) => (
+              <span>
+                <a onClick={() => this.showEditModal(record,2)}>{record.OVER_FINISH_QTY}</a>
+              </span>
+            ),
+          },
+          {
+            width: "80px",
+            title: '未完成',
+            dataIndex: 'UNFINISH_QTY',
+            key: 'UNFINISH_QTY',
+            render: (text, record) => (
+              <span>
+                <a onClick={() => this.showEditModal(record,0)}>{record.UNFINISH_QTY}</a>
+              </span>
+            ),
+          },
+          {
+            width: "80px",
+              title: '完成率',
+              dataIndex: 'FINISH_RATE',
+              key: 'FINISH_RATE',
+            },
+            {
+              width: "80px",
+            title: '及时完成率',
+            dataIndex: 'NORMAL_FINISH_RATE',
+            key: 'NORMAL_FINISH_RATE',
+          },
+    ]
+    };
+  };
+  handleCancel = () => { // 退出弹窗
+    let newtmpData = { ...this.state.tmpData }
+    newtmpData["data"]= '';
+    newtmpData.formCode = '';
+    this.setState({
+      visible:false,
+      tmpData: [],//newtmpData
+    })
+  }
+  showEditModal = (record,temp) => {
+
+    const newtmpData = {
+      data: {
+        MOUDLE_NAME: record.MOUDLE_NAME,
+        FORM_NAME: temp,
+        startTime:moment(this.state.startTime).format('YYYY-MM-DD HH:mm:ss'),
+        endTime:moment(this.state.endTime).format('YYYY-MM-DD HH:mm:ss'), onCancel: this.handleCancel,  noticeTitle: "任务明细", 
+        homeReload: true
+      },
+      formCode: 'PF139',
+    }
+    this.setState({
+      noticeTitle: "任务明细",
+      tmpData: newtmpData,
+      currActivatedMenu: ''
+    }, () => this.setState({
+      visible: true
+    }));
+  }
+
+  componentDidMount() {
+    this.getBaseInfoData();
+  };
+  //获取数据
+  getBaseInfoData = () => {
+    let retDataTemp=[]
+    const{retData,startTime,endTime}=this.state
+    let time=startTime
+    if(startTime === null)
+    {
+      message.error('请选择开始时间');
+    }
+    let time2=endTime
+    if(endTime === null)
+    {
+      message.error('请选择结束时间');
+    }
+    
+    {
+      time=moment(startTime).format('YYYY-MM-DD HH:mm:ss')
+      time2=moment(endTime).format('YYYY-MM-DD HH:mm:ss')
+      const json = initFilter(this.props.login.OrgId,this.state.mouldSelect,'','','',time,time2,this.state.mouldSelect)
+      //extendOrder(json, "NUM", 0);
+      this.props.dispatch({
+        type: 'app/getDataByPost',
+        url: 'BI/BIStatiscialAnalysisController/GetFormRunDay',//BI/FormRunAnalysis/OrderEntities
+        payload: json,
+        onlyData: false,
+        onComplete: (ret) => {
+          if(ret && ret.Data)
+          {
+           
+            this.setState({retData :ret.Data})
+          }
+        }
+      })
+    }
+   
+  };
+  startChange=(value)=>{
+    this.setState({
+      startTime:value
+    })
+  };
+  endChange=(value)=>{
+    this.setState({
+      endTime:value
+    })
+  };
+  handleChange=(value)=>{
+    this.setState({
+      mouldSelect: value
+    })
+  }
+  onSelectDepartment=(departData,record)=>{
+    if (departData && departData.data && departData.data.length > 0) {
+      this.setState({
+        departData: {
+          ...this.state.departData,
+          // DEPARTMENT_ID: departData.data[0],
+          Nav_Department: { NAME: departData.record.NAME }
+        },
+        DEPARTMENT_ID: departData.data[0],
+      })
+    }
+    else {
+      this.setState({
+        departData: {
+          ...this.state.departData,
+          Nav_Department: { NAME: null },
+        },
+        DEPARTMENT_ID: null,
+      })
+    };
+  }
+  getDate=()=>{
+    let  date = new Date()
+    let  y = date.getFullYear()
+    let  m = date.getMonth() + 1
+    let  d = date.getDate();
+    //  当前日期
+    let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
+  
+         let pastDate = moment(nowDate).add(-1, "day").format('YYYY-MM-DD 00:00:00')
+        return pastDate;
+}
+getEndDate=()=>{
+  let  date = new Date()
+  let  y = date.getFullYear()
+  let  m = date.getMonth() + 1
+  let  d = date.getDate();
+  //  当前日期
+  let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
+       let pastDate = moment(nowDate).add(-1, "day").add(23,'hour').add(59,'m').add(59,'s')//format('YYYY-MM-DD 23:59:59')
+      return pastDate;
+}
+
+onTableBtnExport() {
+  console.log(this.state.retData)
+  if (this.state.retData.length == 0) {
+    message.warning("没有数据无需导出!");
+    return;
+  }
+      //excel的表头
+      const tHeader = ["模块","总任务数","正常已办","超时已办","未完成","完成率","及时完成率"];
+      // 字段和table表格中对应
+      const fitlerVal = ["MOUDLE_NAME","TOTAL_QTY","FINISH_QTY","OVER_FINISH_QTY","UNFINISH_QTY","FINISH_RATE","NORMAL_FINISH_RATE"];
+      const res = this.state.retData.map((v) => fitlerVal.map((j) => v[j]));
+      // const jsonWorkSheet = XLSX.utils.json_to_sheet(tHeader,res,"矿山安全生产标准化系统运行情况报表.xlsx");
+      const jsonWorkSheet = XLSX.utils.json_to_sheet(res,tHeader);
+      jsonWorkSheet.A1.v='组织';
+      jsonWorkSheet.B1.v='总任务数';
+      jsonWorkSheet.C1.v='正常已办';
+      jsonWorkSheet.D1.v='超时已办';
+      jsonWorkSheet.E1.v='未完成';
+      jsonWorkSheet.F1.v='完成率';
+      jsonWorkSheet.G1.v='及时完成率';
+      const sheetName = "矿山安全生产标准化系统运行情况报表";
+      const workBook = {
+        SheetNames: [sheetName],
+        Sheets: {
+          [sheetName]: jsonWorkSheet,
+        }
+      };
+      //  const workBook = XLSX.utils.table_to_book("矿山安全生产标准化系统运行情况报表",jsonWorkSheet);
+      return XLSX.writeFile(workBook, "矿山安全生产标准化系统运行情况报表.xlsx");
+}
+
+  render() {
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 18 },
+    }
+    const {loading} = this.props;
+    
+    return (
+      <div>
+        <Modal
+            visible={this.state.visible}
+            title={this.state.noticeTitle}
+            maskClosable={false}
+            onCancel={this.handleCancel}
+            footer={null}
+            className='antd-modal-fullscreen'
+            closeModal={this.closeModal}
+          // forceRender={true}
+          >
+            <FormPage {...this.state.tmpData} />
+          </Modal>
+        <Spin spinning={loading.global}>
+        <h1 style={{ textAlign: "center" }}>矿山安全生产标准化系统运行情况报表</h1>
+        <Row style={{width:"1250px",margin:"auto"}}>
+        <Col span={5}>
+          <Form.Item
+                  label={'组织层级：'}
+                  {...formItemLayout}
+                >
+                   <Select 
+                    // defaultValue="风险管理"
+                    style={{width:'180px'}}
+                    onChange={this.handleChange}
+                    >
+                        <Option value="2">班组级</Option>
+      <Option value="1">车间级</Option>
+      <Option value="0">部门级</Option>
+      <Option value="3">公司级</Option>
+                    </Select>
+                </Form.Item>
+           </Col>
+          <Col span={5} style={{ marginLeft: "10px" }}> 
+          <Form.Item
+                  label={'开始时间：'}
+                  {...formItemLayout}
+                >
+                   <DatePicker showTime 
+                  //  defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
+                   value={this.state.startTime} 
+                   format="YYYY-MM-DD HH:mm:ss"  onChange={this.startChange}/>
+                </Form.Item>
+               
+          </Col>
+         
+          <Col span={5} style={{ marginLeft: "10px" }}>
+          <Form.Item
+                  label={'结束时间：'}
+                  {...formItemLayout}
+                >
+                   <DatePicker showTime 
+                    // defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
+                   value={this.state.endTime}
+                   format="YYYY-MM-DD HH:mm:ss"  onChange={this.endChange}/>
+                </Form.Item>
+           </Col>
+          <Col span={1} style={{ marginLeft: "20px" }}><Button type='primary' onClick={() => this.getBaseInfoData()}>查询</Button></Col>
+          <Col span={1} style={{ marginLeft: "20px" }}><Button icon="export" onClick={() => this.onTableBtnExport()}>导出</Button></Col>
+        </Row>
+        <Row style={{ marginTop: "14px" }}>
+          <div id="exportToExcel">
+          <Table style={{ width:"1250px",margin:"auto",alignContent:"center",backgroundColor:"white"}}
+                dataSource={this.state.retData}
+                columns={this.state.columns}
+                pagination={false}
+                bordered
+                loading={this.state.showLoading}
+                size="small"
+                rowKey="2"
+              />
+          </div>
+              
+        </Row>
+        {/* <Row>
+        <h5 style={{ textAlign: "center" }}>数据统计截止到{this.state.modifyTime}</h5>
+        </Row> */}
+        </Spin>
+      </div>
+    )
+  }
+}
+export default connect(({ login, app,loading }) => ({ login, app,loading }))(BI030FormRunAnalysis)

src/components/CustomPages/HM/HM121ShowPrint.js

@@ -71,10 +71,8 @@ class HM121ShowPrint extends React.Component {
                     <td colSpan={4} rowSpan={1}>风险评价</td>
                     <td colSpan={1} rowSpan={2}>风险等级</td>
                     <td colSpan={10} rowSpan={1}>风险控制</td>
-                    {/* <td colSpan={1} rowSpan={2}>责任单位</td>
+                    <td colSpan={1} rowSpan={2}>责任单位</td>
-                    <td colSpan={1} rowSpan={2}>责任岗位</td> */}
+                    <td colSpan={1} rowSpan={2}>责任岗位</td>
-                    <td colSpan={1} rowSpan={2}>责任人</td>
-
                 </tr>
                 <tr>
                     <td colSpan={1} rowSpan={1}>L</td>
@@ -167,8 +165,8 @@ class HM121ShowPrint extends React.Component {
                                         return ite.Nav_EmergencyMeasures.NAME + '  '
                                     }
                                 })}</td>
-                            {/* <td colSpan={1} rowSpan={1}>{item.Nav_DepartmentLiable ? item.Nav_DepartmentLiable.NAME : ''}</td> */}
+                            <td colSpan={1} rowSpan={1}>{item.Nav_DepartmentLiable ? item.Nav_DepartmentLiable.NAME : ''}</td>
-                            <td colSpan={1} rowSpan={1}>{item.Nav_LiableUser ? item.Nav_LiableUser.NAME : ''}</td>
+                            <td colSpan={1} rowSpan={1}>{item.Nav_PostLiable ? item.Nav_PostLiable.NAME : ''}</td>
                         </tr>
                     })
                 }

src/components/CustomPages/PF/PF139FormRunAnalysis.js

@@ -0,0 +1,144 @@
+import { message } from "antd/lib/index";
+import { Layout,Descriptions, Tabs, Steps, Button, Popconfirm, Row, Col, Form, Input, Select, Table, Drawer ,Icon} from 'antd';
+import React from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import ReactToPrint from "react-to-print";
+import styles from '../HI/StepForm.css';
+import config from "../../../config";
+import XLSX from 'xlsx';
+import { connect } from 'dva';
+import moment from 'moment';
+const { Header, Footer, Sider, Content } = Layout;
+const TabPane = Tabs.TabPane;
+const { TextArea } = Input;
+const { Step } = Steps;
+import {
+    extend,
+    extendRule,
+    initFilter,
+    initQueryFilter,
+    getOnlyPropertyData,
+    extendInclude,
+    empty,
+    getDataFieldValue, guid, initFilterGroup, extendGroupRule
+} from "../../../utils/common";
+import FormPage from '../../FormPage'
+class PF139FormRunAnalysis extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            title: '任务明细',
+            data: {},
+            columns:[
+                {
+                    width: "150px",
+                    title: '任务名称',
+                    dataIndex: 'NAME',
+                    key: 'NAME',
+                    // render:(value,record,index)=>{
+                     
+                    // },
+                  },
+                  {
+                    width: "80px",
+                    title: '处理人',
+                    dataIndex: 'CREATE_NAME',
+                    key: 'CREATE_NAME'
+                  },
+                  {
+                    width: "80px",
+                    title: '部门',
+                    dataIndex: 'DEPARTMENT_NAME',
+                    key: 'DEPARTMENT_NAME'
+                  },
+                  {
+                    width: "80px",
+                    title: '开始时间',
+                    dataIndex: 'TASK_STARTDT',
+                    key: 'TASK_STARTDT'
+                  },
+                  {
+                    width: "80px",
+                    title: '结束时间',
+                    dataIndex: 'TASK_ENDDT',
+                    key: 'TASK_ENDDT'
+                  },
+                  {
+                    width: "80px",
+                    title: '实际处理时间',
+                    dataIndex: 'TASK_DT',
+                    key: 'TASK_DT'
+                  },
+                  {
+                    width: "80px",
+                    title: '状态',
+                    dataIndex: 'STATUS_NAME',
+                    key: 'STATUS_NAME'
+                  },
+            ]
+        }
+    };
+    componentDidMount() {
+        if (this.props.data?.MOUDLE_NAME)//this.props.data?.MOUDLE_NAME &&
+            this.loadData(this.props.data?.MOUDLE_NAME,this.props.data?.FORM_NAME,this.props.data?.startTime,this.props.data?.endTime);
+    }
+
+    componentWillReceiveProps(NextProps) {
+        if (NextProps.data?.MOUDLE_NAME &&this.props.data?.MOUDLE_NAME != NextProps.data?.MOUDLE_NAME) {//NextProps.data?.MOUDLE_NAME && this.props.data?.MOUDLE_NAME != NextProps.data?.MOUDLE_NAME&&
+            this.loadData(NextProps.data?.MOUDLE_NAME,this.props.data?.FORM_NAME,this.props.data?.startTime,this.props.data?.endTime);
+        }
+    }
+
+    BtnClose = () => {
+        if (typeof this.props.data.onCancel != "undefined" && typeof this.props.data.onCancel == 'function')
+            this.props.data.onCancel();
+    }
+
+    onClick = () => {
+        const json = initFilter(null,this.props.data.TaskID);
+            this.props.dispatch({
+                type: 'app/getDataByPost',
+                url: 'FM/FMNotificationTask/ChangeStatus',
+                payload: json,
+                onComplete: (re) => {
+                    if (re) {
+                            message.success("成功");
+                            this.BtnClose();
+                    } else {
+                        message.error("失败");
+                    }
+                }
+            })
+    }
+    loadData(MOUDLE_NAME,FORM_NAME,startTime,endTime) {
+        const json = initFilter(null,MOUDLE_NAME,'','','',startTime,endTime,FORM_NAME);
+            this.props.dispatch({
+                type: 'app/getDataByPost',
+                url: 'BI/BIStatiscialAnalysisController/GetFormRunAnalyzeDay',
+                payload: json,
+                onComplete: (re) => {
+                    if (re) {
+                        this.setState({retData :re})
+                    } 
+                }
+            })
+    }
+
+    render() {
+        
+        return (
+          <div>
+            <Table style={{ width:"1550px",margin:"auto",alignContent:"center",backgroundColor:"white",marginTop:"20px"}}
+                dataSource={this.state.retData}
+                columns={this.state.columns}
+                // pagination={false}
+                bordered
+                loading={this.state.showLoading}
+                size="small"
+                rowKey="2"
+              />
+          </div>
+        )
+    }
+}
+export default connect(({ login, app }) => ({ login, app }))(Form.create()(PF139FormRunAnalysis))

src/layout/RiskFour.js

@@ -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 storage from "../utils/storage";
-import red from "../assets/risk/red.png";
+
-import orange from "../assets/risk/orange.png";
-import yellow from "../assets/risk/yellow.png";
-import blue from "../assets/risk/blue.png";
-import back1 from "../assets/risk/1-1-1.png";
-import back2 from "../assets/risk/1-2.png";
-import back3 from "../assets/risk/1-3.png";
-import back4 from "../assets/risk/1-4.png";
-import backTwo1 from "../assets/risk/2-1-1.png";
-import backTwo2 from "../assets/risk/2-2.png";
-import backTwo3 from "../assets/risk/2-3.png";
-import backTwo4 from "../assets/risk/2-4.png";
-import backThree1 from "../assets/risk/3-1-1.png";
-import backThree2 from "../assets/risk/3-2.png";
-import backThree3 from "../assets/risk/3-3.png";
-import backThree4 from "../assets/risk/3-4.png";
-import backFour1 from "../assets/risk/4-1-1.png";
-import backFour2 from "../assets/risk/4-2.png";
-import backFour3 from "../assets/risk/4-3.png";
-import backFour4 from "../assets/risk/4-4.png";
-import backFive1 from "../assets/risk/5-1-1.png";
-import backFive2 from "../assets/risk/5-2.png";
-import backFive3 from "../assets/risk/5-3.png";
-import backFive4 from "../assets/risk/5-4.png";
-import backSix1 from "../assets/risk/6-1-1.png";
-import backSix2 from "../assets/risk/6-2.png";
-import backSix3 from "../assets/risk/6-3.png";
-import backSix4 from "../assets/risk/6-4.png";
-import backSeven1 from "../assets/risk/7-1-1.png";
-import backSeven2 from "../assets/risk/7-2.png";
-import backSeven3 from "../assets/risk/7-3.png";
-import backSeven4 from "../assets/risk/7-4.png";
-import qrcode from "../assets/risk/1.png";
 import { FullScreenContainer } from "@jiaminghi/data-view-react";
+import RiskFourOne from "./RiskFourOne";
+import RiskFourTwo from "./RiskFourTwo";
+import RiskFourThree from "./RiskFourThree";
 
 class RiskFour extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      RiskData: {
+      translateX:1,
-        IsSuccessful: true,
+      rightDis:false,
-        Data: {
+      leftDis:true,
-          RISKLEVELCOUNTS: [
+      riskleveldata:[]
-            {
-              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: "",
     };
   }
+  clickRightIcon = () => {
+    if(this.state.translateX <3){
+      this.setState({
+        translateX:this.state.translateX+1
+      })
+    }
     
+  };
   componentDidMount() {
-    
-    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>
-          ),
-        });
-      }
-    });
     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)=>{
+          this.setState({
-            if (item.NAME == "东排土场") {
+            riskleveldata: ret.RISKLEVELCOUNTS,
-              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>
-                ),
-              });
-            }
           })
+          
+          // })
+          // 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%" }}>
+          <div className={styles.wrap_scrollImg}>
-            <img
+            <span className={styles.left_icon} onClick={()=>{this.clickLeftIcon()}} style={this.state.leftDis==true?{color:'#888888'}:{color:'#fff'}}>
-              src={realGif}
+              <Icon type="left" />
-              alt="1"
+            </span>
-              style={{ width: "100%", height: "100%", objectFit: "fill" ,zIndex: -1}}
+            <span className={styles.right_icon} onClick={()=>{this.clickRightIcon()}} style={this.state.rightDis==true?{color:'#888888'}:{color:'#fff'}}>
-            ></img>
+              <Icon type="right" />
-            <div
+            </span>
-              style={{ position: "absolute", top: "0px", left: "0px",width: "100%", height: "100%" ,zIndex: 1}}
+            {this.state.translateX ==1?< RiskFourOne riskleveldata={this.state.riskleveldata}/>:this.state.translateX ==2?< RiskFourTwo  riskleveldata={this.state.riskleveldata}/>:<RiskFourThree  riskleveldata={this.state.riskleveldata}/>} 
-            >
-              {/* 东排土场背景区域 */}
-              <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>
+          
         </FullScreenContainer>
       </React.Fragment>
     );

src/layout/RiskFourOne.js

@@ -0,0 +1,432 @@
+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: [],
+      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){
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+        this.setState({
+          RiskData:this.props.riskleveldata
+        })
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.props.riskleveldata?.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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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));

src/layout/RiskFourThree.js

@@ -0,0 +1,236 @@
+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: [],
+      level1: 0,
+      level2: 0,
+      data1: {},
+      data2: {},
+
+      content: "",
+      content2: "",
+    };
+  }
+  componentDidUpdate=(prevProps, prevState)=>{
+    if(prevProps.riskleveldata !== this.props.riskleveldata){
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+        this.setState({
+          RiskData:this.props.riskleveldata
+        })
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.props.riskleveldata?.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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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));

src/layout/RiskFourTwo.js

@@ -0,0 +1,313 @@
+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:[],
+      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){
+      this.props.riskleveldata.map((item, index) => {
+        this.getTitle(item)
+        this.setState({
+          RiskData:this.props.riskleveldata
+        })
+      });
+    }
+
+  }
+
+  componentDidMount() {
+    this.props.riskleveldata?.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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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.LEVEL1}</div>
+                <div>较大风险：{item.LEVEL2}</div>
+                <div>一般风险：{item.LEVEL3}</div>
+                <div>低风险：{item.LEVEL4}</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));

src/layout/risk.less

@@ -104,27 +104,86 @@
   left: 81%;
   width: 100%;
   height: 100%;
- 
 }
 .riskhover {
-    transition: all 0.5s;
+  transition: all 0.5s;
-    animation: jump 1.8s infinite ;
+  animation: jump 1.8s infinite;
 }
 // .riskhover:hover {
 //     transform: scale(1.1);
 //     animation: jump 1.8s infinite ;
 // }
 
-
 @keyframes jump {
-    0% {
+  0% {
-        transform: translateY(0px);
+    transform: translateY(0px);
-    }
+  }
-    50% {
+  50% {
-        transform: translateY(-20px);
+    transform: translateY(-20px);
-    }
+  }
-    100% {
+  100% {
-        transform: translateY(0px);
+    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;
+  }
+}

src/layout/riskOne.less

@@ -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;
+}

src/layout/riskThree.less

@@ -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);
+  }
+}

src/layout/riskTwo.less

@@ -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);
+  }
+}

src/utils/customConfig.js

@@ -776,6 +776,14 @@ const BI020ApproveAnalysis = Loadable({
   loader: () => import('../components/CustomPages/BI/BI020ApproveAnalysis'),
   loading: () => <div />
 })
+const BI030FormRunAnalysis = Loadable({
+  loader: () => import('../components/CustomPages/BI/BI030FormRunAnalysis'),
+  loading: () => <div />
+})
+const PF139FormRunAnalysis = Loadable({
+  loader: () => import('../components/CustomPages/PF/PF139FormRunAnalysis'),
+  loading: () => <div />
+})
 const BI014RiskPerformanceModel = Loadable({
   loader: () => import('../components/CustomPages/BI/BI014RiskPerformanceModel'),
   loading: () => <div />
@@ -973,7 +981,8 @@ export default function (componentName, formId, formParam, data, formCode, formD
     PF136FormRunAnalysis: <PF136FormRunAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
     BI009FormRunAnalysis: <BI009FormRunAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
     FO025ShowPrint: <FO025ShowPrint formId={formId} formParam={formParam} data={data} formCode={formCode} />,
-
+    BI030FormRunAnalysis: <BI030FormRunAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
+    PF139FormRunAnalysis: <PF139FormRunAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
     BI020ApproveAnalysis: <BI020ApproveAnalysis formId={formId} formParam={formParam} data={data} formCode={formCode} />,
     BI014RiskPerformanceModel: <BI014RiskPerformanceModel formId={formId} formParam={formParam} data={data} formCode={formCode} />,
   }[componentName]