mh-sms-web/src/components/CustomPages/BI/BI013RiskAnalysisModel.js

import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
  initFilter,
  addRuleAndGroups,
  guid,
  extendInclude,
  extendRule,
  extendOrder,
  extend,
  initQueryFilter,
} from "../../../utils/common";
import { Table, Row, Col, Button, Select, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";
class BI013RiskAnalysisModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      LEVEL1TOTAL: 0,
      LEVEL2TOTAL: 0,
      LEVEL3TOTAL: 0,
      LEVEL4TOTAL: 0,
      HAZARDTOTALCOUNT: 0,
      RISKTOTALCOUNT: 0,
      MEASURESTOTALCOUNT: 0,
    };
  }

  componentDidMount() {
    let currentMineType = "";
    if (this.props.formParam != undefined || this.props.formParam != null) {
      currentMineType = this.props.formParam.type;
    } else {
      currentMineType = localStorage.getItem("currentMineType");
    }
    // this.getBaseInfoData(currentMineType);
    this.getBaseData();
  }

  getBaseData = () => {
    this.setState({
      LEVEL1TOTAL: 0,
      LEVEL2TOTAL: 82,
      LEVEL3TOTAL: 381,
      LEVEL4TOTAL: 2212,
      HAZARDTOTALCOUNT: 50,
      RISKTOTALCOUNT: 2714,
      MEASURESTOTALCOUNT: 653,
    },()=>{
      this.chart1();
    this.chart2();
    this.chart4();
    });
    
  };

  //获取数据
  getBaseInfoData = (mineType) => {
    const json2 = initFilter(this.props.login.OrgId);
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIController/getRiskData",
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        if (ret) {
          this.state.retData = ret?.Data.RISKLEVELCOUNTS;
          let level1all = 0;
          let level2all = 0;
          let level3all = 0;
          let level4all = 0;
          for (let i = 0; i < ret.Data.RISKLEVELCOUNTS.length; i++) {
            level1all += ret.Data.RISKLEVELCOUNTS[i].LEVEL1;
            level2all += ret.Data.RISKLEVELCOUNTS[i].LEVEL2;
            level3all += ret.Data.RISKLEVELCOUNTS[i].LEVEL3;
            level4all += ret.Data.RISKLEVELCOUNTS[i].LEVEL4;
          }
          this.setState({
            LEVEL1TOTAL: level1all,
            LEVEL2TOTAL: level2all,
            LEVEL3TOTAL: level3all,
            LEVEL4TOTAL: level4all,
            HAZARDTOTALCOUNT: ret.Data.HAZARDTOTALCOUNT,
            RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT,
            MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT,
          });

          // this.state.LEVEL1TOTAL = level1all;
          // this.state.LEVEL2TOTAL = level2all;
          // this.state.LEVEL3TOTAL = level3all;
          // this.state.LEVEL4TOTAL = level4all;
          // this.state.HAZARDTOTALCOUNT = ret.Data.HAZARDTOTALCOUNT;
          // this.state.RISKTOTALCOUNT = ret.Data.RISKTOTALCOUNT;
          // this.state.MEASURESTOTALCOUNT = ret.Data.MEASURESTOTALCOUNT;
        }
        this.chart1();
        this.chart2(ret?.Data.AREACOUNTS.slice(0, 20));
        this.chart4(ret?.Data.DATECOUNTS);
      },
    });
  };
  chart1 = () => {
    let showData = [];
    let color = [];
    let allNum = 0;
    showData.push({ value: this.state.LEVEL1TOTAL, name: "一级" });
    showData.push({ value: this.state.LEVEL2TOTAL, name: "二级" });
    showData.push({ value: this.state.LEVEL3TOTAL, name: "三级" });
    showData.push({ value: this.state.LEVEL4TOTAL, name: "四级" });
    showData.map((item) => {
      if (item.name === "一级") {
        color.push("#c92a2a");
      } else if (item.name === "二级") {
        color.push("#ffa94d");
      } else if (item.name === "三级") {
        color.push("#ffe066");
      } else if (item.name === "四级") {
        color.push("#4285F4");
      }
      allNum = allNum + item.value;
    });

    let chart1s = document.getElementById("chartone");
    let myChart = echarts.init(chart1s);
    myChart.setOption(
      {
        color: color,
        title: [
          {
            text: "风险分级占比1",
            left: "center",
            top: "2%",
          },
          {
            text: allNum,
            x: "26%",
            y: "center",
            textStyle: {
              fontSize: 26,
              fontWeight: "normal",
              color: ["#333"],
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}:({d}%)",
        },
        legend: {
          orient: "vartical",
          x: "left",
          top: "35%",
          left: "65%",
          bottom: "0%",
          data: showData,
          // itemWidth: 20,
          // itemHeight: 14,
          // itemGap :15,
          formatter: function (name) {
            //通过name获取到数组对象中的单个对象
            let singleData = showData.filter(function (item) {
              return item.name == name;
            });
            let countAll = 0;
            showData.map((item) => {
              countAll = countAll + item.value;
            });

            return (
              name +
              "   |   " +
              singleData[0].value +
              "   |   " +
              Number((singleData[0].value / countAll) * 100).toFixed(2) +
              "%"
            );
          },
        },
        grid: {
          left: 30,
          containLabel: true,
          bottom: 10,
          top: 10,
          right: 30,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            clockwise: false,
            // minAngle: 20,
            avoidLabelOverlap: false,
            radius: ["45%", "65%"],
            center: ["30%", "50%"],
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
                padding: "0 20px",
              },
            },
            label: {
              show: false,
            },
            // color: color,
            data: showData,
          },
        ],
      },
      true
    );
  };
  chart2 = (data) => {
    let areaName = [
      "破碎车间-粗碎单元",
      "综合回收车间-精多金属仓库单元",
      "磨重车间-脱泥单元",
      "食堂",
      "综合回收车间-精矿烘干单元",
      "尾矿库截渗池回水单元",
      "破碎车间-辊磨单元",
      "磨重车间-中矿再磨单元",
      "磨重车间-粗粒选别单元",
      "加油站-采场",
      "尾矿库截洪单元",
      "采场道路",
      "破碎车间-放矿运输单元",
      "卢家边回水单元",
      "钨细泥回收车间-回水单元",
      "综合回收车间-硫化矿综合回收单元",
      "磨重车间-细粒选别单元",
      "尾矿库库区",
      "磨重车间-磨矿分级单元",
      "截渗池回水单元",
    ];
    let areaCount = [
      1, 2, 3, 3, 4, 4, 6, 9, 9, 11, 19, 20, 21, 22, 22, 23, 27, 31, 32, 32,
    ];
    // data.forEach((item) => {
    //   areaName.push(item.AREANAME);
    //   areaCount.push(item.AREACOUNT);
    // });
    let chart2s = document.getElementById("chart2");
    if (chart2s) {
      let myChart = echarts.init(chart2s);
      myChart.setOption(
        {
          title: {
            text: "风险区域统计",
            left: "center",
            top: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            top: "10%",
            bottom: "1%",
            containLabel: true,
          },
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              triggerEvent: true,
              show: true,
              inverse: false,
              data: areaName,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#666",
                align: "right",
                margin: 20,
                fontSize: 13,

                rich: {
                  idx0: {
                    color: "#FB375E",
                    backgroundColor: "#FFE8EC",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx1: {
                    color: "#FF9023",
                    backgroundColor: "#FFEACF",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx2: {
                    color: "#01B599",
                    backgroundColor: "#E1F7F3",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx: {
                    color: "#333",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  title: {
                    width: 165,
                  },
                },
              },
            },
            {
              triggerEvent: true,
              show: true,
              inverse: false,
              data: areaCount,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#666",
                align: "left",
                margin: 20,
                fontSize: 12,
              },
            },
          ],
          series: [
            {
              name: "数量",
              type: "bar",
              // label: {
              //   show: true,
              //   position: "insideRight",
              //   color: "#fff",
              //   formatter: "{c}",
              //   fontSize: "12",
              // },
              barWidth: 10,
              itemStyle: {
                color: "#1990FF",
                barBorderRadius: 30,
              },
              // itemStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //     { offset: 0, color: "#01AEF6" },
              //     { offset: 1, color: "#9999FF" },
              //   ]),
              // },
              data: areaCount,
              show: false,
            },
          ],
        },
        true
      );
    }
  };

  chart4 = (data) => {
    let riskArr = [2714, 2714, 2714, 2714];
    let hazardArr = [50, 50, 50, 50];
    let dates = [
      "2024/01",
      "2024/02",
      "2024/03",
      "2024/04",
      "2024/05",
      "2024/06",
      "2024/07",
      "2024/08",
      "2024/09",
      "2024/10",
      "2024/11",
      "2024/12",
    ];
    // for (let i = 0; i < data.length; i++) {
    //   if (data[i].TYPE == 0) {
    //     riskArr.push(data[i].COUNT);
    //     dates.push(moment(data[i].DATE).format("YYYY/MM"));
    //   } else {
    //     hazardArr.push(data[i].COUNT);
    //   }
    // }
    // let currMonth = dates.length;
    // for (let i = 1; i < 13 - currMonth; i++) {
    //   dates.push(
    //     moment(dates[dates.length]).add(i, "months").format("YYYY/MM")
    //   );
    // }
    let chart4s = document.getElementById("chart4");
    if (chart4s) {
      let myChart = echarts.init(chart4s);
      myChart.setOption(
        {
          color: ["#72b85b", "#f6841a", "#cc0404"],
          grid: {
            left: "5%",
            right: "5%",
          },
          legend: {
            bottom: "0px",
          },
          title: {
            text: "月度风险辨识统计走势",
            left: "center",
            top: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            data: dates,
            axisLabel: {
              showMaxLabel: true,
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "危险源/风险库",
              data: riskArr,
              type: "line",
              smooth: true,
            },
            {
              name: "职业危害库",
              data: hazardArr,
              type: "line",
              smooth: true,
            },
          ],
        },
        true
      );
    }
  };
  render() {
    return (
      <div
        style={{
          backgroundColor: "white",
          width: "1200px",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          borderStyle: "solid",
          borderColor: "#ccc",
          borderWidth: "1px",
        }}
      >
        {/* <h1
          style={{ textAlign: "center", marginTop: "30px", fontWeight: "bold" }}
        >
          风险管理统计分析
        </h1> */}
        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}></Col>
          {/* <Col span={2} style={{ textAlign: "center" }}>
            <div>
              <Button
                style={{
                  width: "100px",
                  height: "70px",
                  borderRadius: "8px",
                  marginBottom: "10px",
                  backgroundColor: "red",
                }}
              >
                <span
                  style={{
                    color: "white",
                  }}
                >
                  一级风险
                </span>
                <br></br>
                <span
                  style={{
                    fontWeight: "bold",
                    fontSize: "20px",
                    color: "white",
                  }}
                >
                  {this.state.LEVEL1TOTAL}
                </span>
              </Button>
              <Button
                style={{
                  width: "100px",
                  height: "70px",
                  borderRadius: "8px",
                  marginBottom: "10px",
                  backgroundColor: "orange",
                }}
              >
                <span
                  style={{
                    color: "white",
                  }}
                >
                  二级风险
                </span>
                <br></br>
                <span
                  style={{
                    fontWeight: "bold",
                    fontSize: "20px",
                    color: "white",
                  }}
                >
                  {this.state.LEVEL2TOTAL}
                </span>
              </Button>
              <Button
                style={{
                  width: "100px",
                  height: "70px",
                  borderRadius: "8px",
                  marginBottom: "10px",
                  backgroundColor: "yellow",
                }}
              >
                <span
                  style={{
                    color: "black",
                  }}
                >
                  三级风险
                </span>
                <br></br>
                <span
                  style={{
                    fontWeight: "bold",
                    fontSize: "20px",
                    color: "black",
                  }}
                >
                  {this.state.LEVEL3TOTAL}
                </span>
              </Button>
              <Button
                style={{
                  width: "100px",
                  height: "70px",
                  borderRadius: "8px",
                  marginBottom: "10px",
                  backgroundColor: "blue",
                }}
              >
                <span
                  style={{
                    color: "white",
                  }}
                >
                  四级风险
                </span>
                <br></br>
                <span
                  style={{
                    fontWeight: "bold",
                    fontSize: "20px",
                    color: "white",
                  }}
                >
                  {this.state.LEVEL4TOTAL}
                </span>
              </Button>
            </div>
          </Col> */}
          <Col span={12} style={{ height: "430px" }}>
            <div
              // className="dashboard-div-style"
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div
                id="chartone"
                style={{ width: "100%", height: "430px" }}
              ></div>
            </div>
          </Col>
          <Col span={10} style={{ height: "430px" }}>
            <div
              // className="dashboard-div-style"
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart2" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
        </Row>
        {/* <hr
          style={{
            border: "1px dashed #ccc",
            marginBottom: "20px",
            marginTop: "20px",
          }}
        ></hr> */}
        <Row gutter={10} style={{ marginTop: "20px" }}>
          <Col span={1}></Col>
          <Col span={22} style={{ textAlign: "center" }}>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-around",
                border: "1px #888 solid",
                padding: "8px 0px",
              }}
            >
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>危险源/风险库</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.RISKTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>职业危害库</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.HAZARDTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>管控措施</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.MEASURESTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "20px" }}>
          <Col span={1}></Col>
          <Col span={22}>
            <div style={{ border: "1px solid rgb(232,232,232)" }}>
              <div id="chart4" style={{ width: "100%", height: "350px" }}></div>
            </div>
          </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI013RiskAnalysisModel
);