mh_jy_safe_web/src/components/CustomPages/BI/BI053BSSafeCheckYearOne.js

898 lines
29 KiB
JavaScript
Raw Normal View History

2025-08-25 10:08:30 +08:00
import React from "react";
import { connect } from "dva";
import {
initFilter,
extendRule,
extendInclude,
getIsPC,
openNotificationMobile,
} from "../../../utils/common";
import {
ChartBarShow_Vertical,
LineShow,
} from "../../../utils/commonEcharsShow";
import { notification, Button, Descriptions } from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm2.css";
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
// 部门级 2023年度安全检查情况综合统计分析
class BI053BSSafeCheckYear extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {
titleDate: " ",
countPlan: " ",
countFinishIntTime: " ",
countFinishOutTime: " ",
countNotFinish: " ",
count1: 0,
count2: 0,
count3: 0,
count4: 0,
parm7: "",
parm8: "",
count21: 0,
count22: 0,
count23: 0,
parm27: "",
count10: 7, //选矿安全检查数量
count20: 3, //尾矿安全检查数量
year: new Date().getFullYear(),
depName: "选矿部",
},
listSafeCheckTypeYear: [],
listCheckTypeYear: [],
};
}
componenthidMount() {
if (!getIsPC()) {
openNotificationMobile("bottomRight", notification);
this.state.displayStr = "none";
this.state.displayNum = 24;
//alert('手机');
} else {
this.state.displayStr = "";
this.state.displayNum = 16;
//alert('PC');
}
this.loadData();
//定时器功能,暂时不开启
// this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
}
componentDidMount() {
this.loadData();
}
componentWillUnmount() {
// this.timerID && clearTimeout(this.timerID);
}
//加载数据赋值
loadData = () => {
var orgId = this.props.login ? this.props.login.OrgId : "";
var parm = this.props.login.currActivatedMenu.MENU_FORM_PARAMS;
if (parm == null || parm == undefined) parm = "MineType=10_20";
let json = initFilter(orgId, parm);
this.props.dispatch({
type: "app/getDataByPost",
payload: json,
url: "BI/BISafeYear/BIDepartmentSafeYearShow",
onComplete: (result) => {
if (result) {
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var parm7 = "";
var parm8 = "";
var count21 = 0;
var count22 = 0;
var count23 = 0;
var parm27 = "";
var count10 = 0; //选矿数量
var count20 = 0; //尾矿数量
var depName = "部门级";
//数量赋值
if (result.listSummary != null && result.listSummary.length == 2) {
result.listSummary.forEach((item) => {
if (item.PART == 1) {
count1 = item.Count1;
count2 = item.Count2;
count3 = item.Count3;
count4 = item.Count4;
parm7 = item.Parameter7;
parm8 = item.Parameter8;
if (item.Parameter9 != null) depName = item.Parameter9; //部门名称
} else if (item.PART == 3) {
count21 = item.Count1;
count22 = item.Count2;
count23 = item.Count3;
parm27 = item.Parameter7;
}
});
}
var year = new Date().getFullYear();
if (
result.listSafeCheckTypeYear != null &&
result.listSafeCheckTypeYear.length > 0
) {
year = result.listSafeCheckTypeYear[0].YEAR;
result.listSafeCheckTypeYear.forEach((e) => {
if (e.MineType == 10) {
count10++;
} else if (e.MineType == 20) {
count20++;
}
});
}
this.setState({
data: {
count1: count1,
count2: count2,
count3: count3,
count4: count4,
parm7: parm7,
parm8: parm8,
count21: count21,
count22: count22,
count23: count23,
parm27: parm27,
count10: count10,
count20: count20,
listSafeCheckTypeYear: result.listSafeCheckTypeYear,
listCheckTypeYear: result.listCheckTypeYear,
year: year,
depName: depName,
},
});
// ChartBarShow_Vertical(
// echarts,
// "divRisk",
// result.listCheckTypeYear,
// "安全检查隐患整改统计图近12个月"
// );
var xAxisData = [];
var yAxisData1 = [];
var yAxisData2 = [];
var yAxisData3 = [];
result.listCheckTypeYear.forEach((item) => {
xAxisData.push(item.YEAR + "-" + item.MONTH);
yAxisData1.push(item.INTTIMECOUNT);
yAxisData2.push(item.OUTTIMECOUNT);
yAxisData3.push(item.NOTFINISHCOUN);
});
let divRisks = document.getElementById("divRisk");
if (divRisks) {
let myChart = echarts.init(divRisks);
myChart.setOption({
color: ["#67afee", "#e67f82", "#858FAC"],
title: {
text: "安全检查隐患整改统计图近12个月",
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
left: "7%",
// right: "10%",
bottom: 0,
top: "25%",
containLabel: true,
z: 22,
},
xAxis: {
type: "category",
data: xAxisData,
axisLabel: {
show: true,
color: "rgb(170,170,170)",
interval: 0,
textStyle: {
lineHeight: 14,
},
},
},
legend: {
data: ["按期整改", "延期整改", "未完成"],
left: "center",
align: "left",
top: "10%",
textStyle: {
color: "#000",
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35,
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: ["#f2f2f2"],
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} ",
},
},
series: [
{
name: "按期整改",
type: "bar",
stack: "总量",
data: yAxisData1,
barWidth: "18px",
label: {
show: true,
},
emphasis: {
focus: "series",
},
// barMinHeight: 2,
},
{
name: "延期整改",
type: "bar",
stack: "总量",
data: yAxisData2,
barWidth: "18px",
label: {
show: true,
},
emphasis: {
focus: "series",
},
// barMinHeight: 2,
},
{
name: "未完成",
type: "bar",
stack: "总量",
data: yAxisData3,
barWidth: "18px",
label: {
show: true,
},
emphasis: {
focus: "series",
},
// barMinHeight: 2,
},
],
});
}
var dataXAxis = [];
var dataSeries = [];
if (
result.listCheckTypeYear != null &&
result.listCheckTypeYear != undefined &&
result.listCheckTypeYear.length > 0
) {
result.listCheckTypeYear.forEach((item) => {
dataXAxis.push(item.YEAR + "-" + item.MONTH);
dataSeries.push(item.FINISHPERCENT);
});
}
let divRiskPercents = document.getElementById("divRiskPercent");
if (divRiskPercents) {
let myChart = echarts.init(divRiskPercents);
myChart.setOption({
title: {
text: "安全检查隐患整改率近12个月",
left: "center",
},
tooltip: {
trigger: "axis",
formatter: '{b0}<br />{a0}:{c0}%'
},
legend: {
data: ["隐患整改率"],
left: "center",
align: "left",
top: "10%"
},
grid: {
containLabel: true,
left: "7%",
// right: "10%",
bottom: 0,
top: "25%",
},
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
xAxis: {
type: "category",
boundaryGap: false, //坐标轴两边留白
data: dataXAxis,
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1表示『隔一个标签显示一个标签』
// margin:15,
textStyle: {
color: "#1B253A",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 12,
},
//rotate:50,
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#E5E9ED",
// opacity:0.2
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: "#E5E9ED",
// opacity:0.1
},
},
},
yAxis: [
{
type: "value",
splitNumber: 5,
axisLabel: {
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 12,
},
formatter: function (name) {
return name + '%'
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#E5E9ED",
// opacity:0.1
},
},
},
],
series: [
{
name: "隐患整改率",
type: "line",
smooth: true,
itemStyle: {
normal: {
color: "#3A84FF",
lineStyle: {
color: "#3A84FF",
width: 1,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(58,132,255,0)",
},
{
offset: 1,
color: "rgba(58,132,255,0.35)",
},
]),
},
},
},
data: dataSeries,
},
],
});
}
// LineShow(
// echarts,
// "divRiskPercent",
// "安全检查隐患整改率近12个月",
// dataXAxis,
// dataSeries
// );
}
},
});
};
// 搜索
handleSearch = (item) => {
this.getBaseInfoData(1, item, null);
};
closeModal = () => {
this.setState({
searchVisible: false,
searchTodayVisible: false,
});
};
render() {
const { data } = this.state;
return (
<div
style={{
backgroundColor: "white",
width: "1200px",
top: "0",
bottom: "0",
left: "0",
right: "0",
margin: "auto",
borderStyle: "solid",
borderColor: "#ccc",
borderWidth: "1px",
}}
>
<div className={styles.routeHome}>
<h1 className={styles.showPrintHead}>
{" "}
{data.depName}{" "}
{/* <a href="#" style={{ fontWeight: "600", color: "black" }}> */}
{data.year}年度
{/* </a> */}
安全检查情况综合统计分析
</h1>{" "}
{/* {this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS == "30" ? "矿山部" : "选矿部"} */}
{/* <h3 style={{ textAlign: 'center' }}>({data.titleDate})</h3> */}
<div style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
// marginBottom: "20px",
}}>
<div className={styles.menuPie}>
<li>
计划检查数
<br />
<div className={styles.dataStyle}>
{data.count1}
</div>
</li>
<li>
按时已办
<br />
<div className={styles.dataStyle1}>
{data.count2}
</div>
</li>
<li>
超时已办
<br />
<div className={styles.dataStyle2}>
{data.count3}
</div>
</li>
<li>
未完成数
<br />
<div className={styles.dataStyle3}>
{data.count4}
</div>
</li>
<li>
完成率
<br />
<div className={styles.dataStyle}>
{data.parm7}
</div>
</li>
<li>
及时完成率
<br />
<div className={styles.dataStyle}>
{data.parm8}
</div>
</li>
</div>
</div>
{/* <hr /> */}
{/* 表一 */}
<div style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
// marginBottom: "20px",
margin: "0px 20px 20px 20px",
flexDirection: 'column'
}}>
<div>
{data?.listSafeCheckTypeYear ? (
<div>
<div className={styles.menuPie4}>
{data.listSafeCheckTypeYear.map((item) => {
console.log(
data.listSafeCheckTypeYear,
"data.listSafeCheckTypeYeardata.listSafeCheckTypeYear"
);
if (item.NAME != "合计") {
if (item.MineType == 10) {
return (
<li>
{item.NAME} <br /> {item.COUNTTOTAL}
</li>
);
}
}
})}
</div>
<div className={styles.menuPie4}>
{data.listSafeCheckTypeYear.map((item) => {
console.log(
data.listSafeCheckTypeYear,
"data.listSafeCheckTypeYeardata.listSafeCheckTypeYear"
);
if (item.NAME != "合计") {
if (item.MineType == 20) {
return (
<li style={{ backgroundColor: 'rgba(226,240,217,1)' }}>
{item.NAME} <br /> {item.COUNTTOTAL}
</li>
);
}
}
})}
</div>
</div>
) : (
<div className={styles.menuPie}>
<li>巡回检查</li>
<li>例行检查</li>
<li>专业检查</li>
<li>季节性检查</li>
<li>节假日检查</li>
<li>复产前检查</li>
<li>上级布置</li>
</div>
)}
</div>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "1100px",
}}
>
<table className={styles.tableRow}>
<tbody>
<tr>
<th>序号</th>
<th>检查层级</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>合计</th>
<th>备注</th>
</tr>
{data?.listSafeCheckTypeYear ? (
data.listSafeCheckTypeYear.map((item, i) => {
if (item.NAME == "合计") {
return (
<tr>
<td colSpan={2}>{item.NAME}</td>
<td>
{item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
</td>
<td>
{item.COUNTFEBRUARY == 0
? ""
: item.COUNTFEBRUARY}
</td>
<td>
{item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
</td>
<td>
{item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
</td>
<td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
<td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
<td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
<td>
{item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
</td>
<td>
{item.COUNTSEPTEMBER == 0
? ""
: item.COUNTSEPTEMBER}
</td>
<td>
{item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
</td>
<td>
{item.COUNTNOVEMBER == 0
? ""
: item.COUNTNOVEMBER}
</td>
<td>
{item.COUNTDECEMBER == 0
? ""
: item.COUNTDECEMBER}
</td>
<td>
{item.COUNTTOTAL == 0 ? "" : item.COUNTTOTAL}
</td>
<td></td>
</tr>
);
} else if (item.ROW_NO == 0) {
return (
<tr>
{/* <td>{item.ROW_NO + 1}</td> */}
<td>{i + 1}</td>
<td>{item.NAME}</td>
<td>
{item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
</td>
<td>
{item.COUNTFEBRUARY == 0
? ""
: item.COUNTFEBRUARY}
</td>
<td>
{item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
</td>
<td>
{item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
</td>
<td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
<td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
<td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
<td>
{item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
</td>
<td>
{item.COUNTSEPTEMBER == 0
? ""
: item.COUNTSEPTEMBER}
</td>
<td>
{item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
</td>
<td>
{item.COUNTNOVEMBER == 0
? ""
: item.COUNTNOVEMBER}
</td>
<td>
{item.COUNTDECEMBER == 0
? ""
: item.COUNTDECEMBER}
</td>
<td>{item.COUNTTOTAL}</td>
{/* {item.MineType == 10 ? <td rowSpan={data.count10}>选矿</td> : <td rowSpan={data.count20}>尾矿</td>} */}
{item.MineType == 10 ? (
i == 0 ? (
<td rowSpan={data.count10}>选矿</td>
) : null
) : i == data.count10 ? (
<td rowSpan={data.count20}>尾矿</td>
) : null}
</tr>
);
} else {
return (
<tr>
{/* <td>{item.ROW_NO + 1}</td> */}
<td>{i + 1}</td>
<td>{item.NAME}</td>
<td>
{item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
</td>
<td>
{item.COUNTFEBRUARY == 0
? ""
: item.COUNTFEBRUARY}
</td>
<td>
{item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
</td>
<td>
{item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
</td>
<td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
<td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
<td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
<td>
{item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
</td>
<td>
{item.COUNTSEPTEMBER == 0
? ""
: item.COUNTSEPTEMBER}
</td>
<td>
{item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
</td>
<td>
{item.COUNTNOVEMBER == 0
? ""
: item.COUNTNOVEMBER}
</td>
<td>
{item.COUNTDECEMBER == 0
? ""
: item.COUNTDECEMBER}
</td>
<td>{item.COUNTTOTAL}</td>
</tr>
);
}
})
) : (
<tr>
<td colSpan={16}>数据加载中...</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
{/* 表一 */}
<div>
<div
style={{
width: "100%",
// height: "90px",
marginTop: "15px",
display: "flex",
flexDirection: "column",
marginBottom: "40px",
justifyContent: "center",
alignItems: "center",
}}
>
{" "}
{/* */}
<div
style={{
height: "2px",
width: "100%",
border: "1px dashed rgba(0, 0, 0, 0.65)",
}}
></div>
<div style={{
margin: "40px 20px 0px 20px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}>
<div className={styles.menuPie}>
<li>
隐患数
<br />
<div className={styles.dataStyle}>{data.count21}</div>
</li>
<li>
延期整改数
<br />
<div className={styles.dataStyle}> {data.count22}</div>
</li>
<li>
按期整改数
<br />
<div className={styles.dataStyle}>{data.count23}</div>
</li>
<li>
整改率
<br />
<div className={styles.dataStyle}> {data.parm27}</div>
</li>
</div>
</div>
<div
style={{
width: "1100px",
height: "500px",
// float: "left",
marginTop: "20px",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "1px solid #E8E8E8",
marginBottom: "40px",
}}
>
<div
id="divRisk"
style={{
width: "100%",
height: "400px",
// float: "left",
marginTop: "20px",
display: "flex",
justifyContent: "center",
}}
></div>
</div>
<div
style={{
width: "1100px",
height: "500px",
// float: "left",
marginTop: "20px",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "1px solid #E8E8E8",
}}
>
<div
id="divRiskPercent"
style={{
width: "100%",
height: "400px",
// float: "left",
marginTop: "20px",
}}
></div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default connect(({ login, app }) => ({ login, app }))(
BI053BSSafeCheckYear
);