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); } //获取数据 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: "风险分级占比", 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 = []; 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 = []; let hazardArr = []; let dates = []; 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 (
{/*

风险管理统计分析

*/} {/*
*/}
{/*
*/}
危险源/风险库 {/*

*/}
{this.state.RISKTOTALCOUNT} 条
职业危害库 {/*

*/}
{this.state.HAZARDTOTALCOUNT} 条
管控措施 {/*

*/}
{this.state.MEASURESTOTALCOUNT} 条

); } } export default connect(({ login, app }) => ({ login, app }))( BI013RiskAnalysisModel );