467 lines
14 KiB
JavaScript
467 lines
14 KiB
JavaScript
|
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 BI008RiskAnalysis extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
pagination: {},
|
||
|
|
retData: [],
|
||
|
|
totalUsers: 0,
|
||
|
|
totalActiveUsers: 0,
|
||
|
|
todayCount: 0,
|
||
|
|
LEVEL1TOTAL: 0,
|
||
|
|
LEVEL2TOTAL: 0,
|
||
|
|
LEVEL3TOTAL: 0,
|
||
|
|
LEVEL4TOTAL: 0,
|
||
|
|
HAZARDTOTALCOUNT: 0,
|
||
|
|
RISKTOTALCOUNT: 0,
|
||
|
|
MEASURESTOTALCOUNT: 0
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.state.columns1 = [
|
||
|
|
{
|
||
|
|
title: '部门',
|
||
|
|
dataIndex: 'NAME',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '一级风险',
|
||
|
|
dataIndex: 'LEVEL1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '二级风险',
|
||
|
|
dataIndex: 'LEVEL2',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '三级风险',
|
||
|
|
dataIndex: 'LEVEL3',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '四级风险',
|
||
|
|
dataIndex: 'LEVEL4',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
const json = initFilter(this.props.login.OrgId);
|
||
|
|
this.getBaseInfoData();
|
||
|
|
};
|
||
|
|
|
||
|
|
//获取数据
|
||
|
|
getBaseInfoData = () => {
|
||
|
|
const json2 = initFilter(this.props.login.OrgId)
|
||
|
|
extendOrder(json2, "CREATE_TIME", 1);
|
||
|
|
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.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.filter(t => t.AREATYPE == 0).slice(0, 10));
|
||
|
|
this.chart3(ret?.Data.AREACOUNTS.filter(t => t.AREATYPE == 1).slice(0, 10));
|
||
|
|
this.chart4(ret?.Data.DATECOUNTS);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
chart1 = () => {
|
||
|
|
let chart1s = document.getElementById('chart1');
|
||
|
|
let myChart = echarts.init(chart1s);
|
||
|
|
myChart.setOption(
|
||
|
|
{
|
||
|
|
grid: {
|
||
|
|
top: '2%',
|
||
|
|
left: '1%',
|
||
|
|
right: '1%',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: "风险分级占比",
|
||
|
|
left: 'center',
|
||
|
|
top: "2%"
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
bottom: '2%'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center'
|
||
|
|
},
|
||
|
|
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: this.state.LEVEL1TOTAL, name: '一级风险' },
|
||
|
|
{ value: this.state.LEVEL2TOTAL, name: '二级风险' },
|
||
|
|
{ value: this.state.LEVEL3TOTAL, name: '三级风险' },
|
||
|
|
{ value: this.state.LEVEL4TOTAL, name: '四级风险' },
|
||
|
|
],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (colors) {
|
||
|
|
var colorList = [ "red","orange","yellow","blue" ];
|
||
|
|
return colorList [colors.dataIndex];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
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: "矿山-风险区域统计TOP10",
|
||
|
|
left: 'center',
|
||
|
|
top: "2%"
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
top: '10%',
|
||
|
|
bottom: '1%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#172749'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
interval: 0,
|
||
|
|
formatter: '{value}', // 给每个数值添加%
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#172749'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: areaName,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '数量',
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight',
|
||
|
|
color: '#fff',
|
||
|
|
formatter: '{c}',
|
||
|
|
fontSize: '12'
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
|
|
{ offset: 0, color: "#01AEF6" },
|
||
|
|
{ offset: 1, color: "#9999FF" },
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
data: areaCount,
|
||
|
|
show: false
|
||
|
|
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
chart3 = (data) => {
|
||
|
|
let areaName = [];
|
||
|
|
let areaCount = [];
|
||
|
|
data.forEach(item => {
|
||
|
|
areaName.push(item.AREANAME);
|
||
|
|
areaCount.push(item.AREACOUNT);
|
||
|
|
})
|
||
|
|
let chart3s = document.getElementById('chart3');
|
||
|
|
if (chart3s) {
|
||
|
|
let myChart = echarts.init(chart3s);
|
||
|
|
myChart.setOption({
|
||
|
|
title: {
|
||
|
|
text: "选矿-风险区域统计TOP10",
|
||
|
|
left: 'center',
|
||
|
|
top: "2%"
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
top: '10%',
|
||
|
|
bottom: '1%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#172749'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
interval: 0,
|
||
|
|
formatter: '{value}', // 给每个数值添加%
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#172749'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: areaName,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '数量',
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight',
|
||
|
|
color: '#fff',
|
||
|
|
formatter: '{c}',
|
||
|
|
fontSize: '12'
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
|
|
{ offset: 0, color: "#01AEF6" },
|
||
|
|
{ offset: 1, color: "#9999FF" },
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
data: areaCount,
|
||
|
|
show: false
|
||
|
|
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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({
|
||
|
|
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',
|
||
|
|
}, {
|
||
|
|
name: '职业危害库',
|
||
|
|
data: hazardArr,
|
||
|
|
type: 'line',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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: "14px" }}>
|
||
|
|
<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={10}>
|
||
|
|
<div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
|
||
|
|
<div id="chart1" style={{ width: '100%', height: '340px' }}></div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={10} style={{ height: '300px' }}>
|
||
|
|
<div>
|
||
|
|
<Table
|
||
|
|
dataSource={this.state.retData}
|
||
|
|
columns={this.state.columns1}
|
||
|
|
bordered
|
||
|
|
loading={this.state.showLoading}
|
||
|
|
size="small"
|
||
|
|
rowKey="1"
|
||
|
|
pagination={false}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
|
||
|
|
<Row gutter={10} style={{ marginTop: "14px" }}>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
<Col span={3} style={{ textAlign: 'center' }}>
|
||
|
|
<div>
|
||
|
|
<Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>危险源/风险库</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.RISKTOTALCOUNT}</span>条</Button>
|
||
|
|
<Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>职业危害库</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.HAZARDTOTALCOUNT}</span>条</Button>
|
||
|
|
<Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>管控措施</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.MEASURESTOTALCOUNT}</span>条</Button>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={19}>
|
||
|
|
<div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
|
||
|
|
<div id="chart4" style={{ width: '100%', height: '300px' }}></div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
|
||
|
|
<Row gutter={10} style={{ marginTop: "14px" }}>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
<Col span={11}>
|
||
|
|
<div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
|
||
|
|
<div id="chart2" style={{ width: '100%', height: '400px' }}></div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={11}>
|
||
|
|
<div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
|
||
|
|
<div id="chart3" style={{ width: '100%', height: '400px' }}></div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(BI008RiskAnalysis)
|