676 lines
18 KiB
JavaScript
676 lines
18 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 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 (
|
||
|
|
<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
|
||
|
|
);
|