mh_jy_safe_web/src/components/CustomPages/BI/BI012FormRunAnalysis.js
2025-08-25 10:08:30 +08:00

795 lines
22 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from "react";
import { connect } from "dva";
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
import DropDownPagination from '../../common/DropDownPaginationEx'
import {
Table,
Button,
Input,
Row,
Col,
Modal,
DatePicker,
Icon,
Progress,
Divider,
} from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm1.css";
import moment from "moment";
import { T } from "antd/lib/upload/utils";
import FormPage from "../../FormPage";
class BI012FormRunAnalysis extends React.Component {
constructor(props) {
super(props);
this.state = {
selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD"),
selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD"),
visible: false,
loading: false,
noticeTitle: "",
tmpData: {},
tableKey: "1",
startTime: moment(new Date().setDate(1))
.subtract(6, "months")
.format("YYYY-MM-DD"),
endTime: moment(new Date()).format("YYYY-MM-DD"),
timeType: 5,
totalCount: 0,
finishCount: 0,
overtimeCount: 0,
unfinishCount: 0,
dtotalCount: 0,
dfinishCount: 0,
dovertimeCount: 0,
dunfinishCount: 0,
inputText: this.props.login.user.NAME,
drate: "0%",
dnormalRate: "0%",
weekColor: "black",
monthColor: "orange",
threeMonthColor: "black",
sixMonthColor: "black",
yearColor: "black",
retData: [],
departData:[],
DEPARTMENT_ID:null,
displayHr: "none",
displaydetail: "none",
columns: [
{
width: "150px",
title: "月份",
dataIndex: "MONTHStr",
key: "MONTHStr",
},
{
width: "100px",
title: "任务数",
dataIndex: "TOTAL_QTY",
key: "TOTAL_QTY",
},
{
width: "150px",
title: "完成率",
dataIndex: "FINISH_RATE",
key: "FINISH_RATE",
render: (text, record) => (
<Progress percent={record.FINISH_RATE.split("%")[0]} />
),
},
{
width: "150px",
title: "及时完成率",
dataIndex: "NORMAL_FINISH_RATE",
key: "NORMAL_FINISH_RATE",
render: (text, record) => (
<Progress
percent={record.NORMAL_FINISH_RATE.split("%")[0]}
strokeColor={{
from: "rgba(82, 196, 26)",
to: "rgba(82, 196, 26)",
}}
/>
),
},
],
detailcolumns: [
{
width: "150px",
title: "组织名称",
dataIndex: "DEPARTMENT_NAME",
key: "DEPARTMENT_NAME",
},
{
width: "100px",
title: "待办人",
dataIndex: "USER_NAME",
key: "USER_NAME",
},
{
title: "待办名称",
dataIndex: "NOTICE_TITLE",
key: "NOTICE_TITLE",
},
{
width: "150px",
title: "开始时间",
dataIndex: "TASK_STARTDT",
key: "TASK_STARTDT",
},
{
width: "150px",
title: "结束时间",
dataIndex: "TASK_ENDDT",
key: "TASK_ENDDT",
},
{
width: "150px",
title: "预警状态",
dataIndex: "NOTICE_TYPE",
key: "NOTICE_TYPE",
render: (text, record) => this.ShowState(record),
},
],
};
this.text="组织/个人";
this.text2="";
}
ShowState(obj) {
var thisResult =
(Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
if (thisResult > 0) {
return "正常";
} else {
return <span style={{ color: "red" }}>超期</span>;
}
}
getStartDate = () => {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
// 当前日期
let nowDate =
y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
let pastDate = moment(nowDate).add(-180, "d").format("YYYY-MM-DD");
return pastDate;
};
getEndDate = () => {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
// 当前日期
let nowDate =
y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
let pastDate = moment(nowDate).format("YYYY-MM-DD");
return pastDate;
};
componentDidMount() {
this.loadData();
}
showEditModal = (departmentId, departmentName) => {
const newtmpData = {
data: {
id: departmentId,
name: departmentName,
onCancel: this.handleCancel,
tableKey: this.state.tableKey,
homeReload: true,
},
formCode: "BI007_RUNANALYSIS",
};
this.setState(
{
id: departmentId,
name: departmentName,
noticeTitle: departmentName + "安全生产标准化运行情况",
tmpData: newtmpData,
currActivatedMenu: "",
},
() =>
this.setState({
visible: true,
})
);
};
showFormModal = (mouldName) => {
const newtmpData = {
data: {
name: mouldName,
onCancel: this.handleCancel,
tableKey: this.state.tableKey,
homeReload: true,
},
formCode: "BI008_RUNANALYSIS",
};
this.setState(
{
name: mouldName,
noticeTitle: mouldName + "安全生产标准化运行情况",
tmpData: newtmpData,
currActivatedMenu: "",
},
() =>
this.setState({
visible: true,
})
);
};
//加载数据赋值
loadData = () => {
this.getMould(this.props.login.user.NAME);
};
onSelectDepartment=(departData,record)=>{
if (departData && departData.data && departData.data.length > 0) {
this.setState({
departData: {
...this.state.departData,
// DEPARTMENT_ID: departData.data[0],
Nav_Department: { NAME: departData.record.NAME }
},
DEPARTMENT_ID: departData.data[0],
})
if(!this.state.inputText)
{
this.text =departData.record.NAME;
this.text2 = departData.record.NAME;
}
}
else {
this.setState({
departData: {
...this.state.departData,
Nav_Department: { NAME: null },
},
DEPARTMENT_ID: null,
})
};
}
//矿山
ksRun = (data) => {
if (data) {
let month = [];
let company = [];
let department = [];
let totalCount = [];
data.forEach((item) => {
month.push(item.MONTHStr);
company.push(item.FINISH_RATE);
department.push(item.NORMAL_FINISH_RATE);
totalCount.push(item.TOTAL_QTY);
});
let myChart = echarts.init(document.getElementById("ksRun"));
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
transitionDuration: 0,
formatter: function (params) {
return (
params[0].marker +
params[0].seriesName +
" : " +
params[0].value +
"</br>" +
params[1].marker +
params[1].seriesName +
" : " +
params[1].value +
"%" +
"</br>" +
params[2].marker +
params[2].seriesName +
" : " +
params[2].value +
"%"
);
},
},
title: {
text: this.text+"任务完成情况分析",
left: "center",
top: "5%",
},
legend: {
data: ["完成数", "完成率", "及时完成率"],
left: "center",
align: "left",
top: "15%",
textStyle: {
color: "#000",
},
itemWidth: 10,
itemHeight: 10,
// itemGap: 35,
},
grid: {
left: "3%",
right: "4%",
top: "27%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: month,
axisLabel: {
showMaxLabel: true,
},
},
yAxis: [
{
type: "value",
position: "left",
splitLine: {
show: true,
lineStyle: {
color: ["#f2f2f2"],
// opacity:0.2
// zlevel: -1,
},
},
axisLine: {
lineStyle: {
color: "#0c3b71",
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} ",
},
},
{
type: "value",
position: "right",
splitLine: {
show: false,
lineStyle: {
color: ["#f2f2f2"],
},
},
axisLine: {
lineStyle: {
color: "#f2f2f2",
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} %",
},
},
],
series: [
{
name: "完成数",
type: "bar",
color: "#72b85b",
data: totalCount,
barWidth: "20%",
barGap: "10%",
stack: null,
},
{
name: "完成率",
type: "line",
color: "#4b9bf3",
data: company,
yAxisIndex: 1,
smooth: true,
// zlevel:100,
},
{
name: "及时完成率",
type: "line",
color: "#FCD149",
data: department,
yAxisIndex: 1,
smooth: true,
// zlevel:100,
},
],
});
}
};
getMould = (inputText,DEPARTMENT_ID) => {
this.setState({ loading: true });
var orgId = this.props.login ? this.props.login.OrgId : "";
let startTime = this.state.selectStartTime.format("YYYY-MM-DD");
let endTime = this.state.selectEndTime.format("YYYY-MM-DD");
let json = initFilter(orgId, inputText, "", "", "", startTime, endTime,DEPARTMENT_ID);
this.props.dispatch({
type: "app/getDataByPost",
payload: json,
url: "BI/BIStatiscialAnalysisController/GetPersonAnalyzeD",
onComplete: (ret) => {
if (ret) {
this.setState({
retData: ret.waitData,//ret.groupData,
totalCount: ret.TotalCount,
finishCount: ret.doneCount,
overtimeCount: ret.timeOverCount,
unfinishCount: ret.unfinishCount,
dovertimeCount: ret.timeOverWaitCount,
loading: false,
});
this.ksRun(ret.groupDataLine);
} else {
this.setState({
retData: [],
totalCount: 0,
finishCount: 0,
overtimeCount: 0,
unfinishCount: 0,
dovertimeCount: 0,
loading: false,
});
}
},
});
};
closeModal = () => {
// 退出弹窗
this.clearData();
};
clearData = () => {
let newtmpData = { ...this.state.tmpData };
newtmpData["data"].id = "";
newtmpData["data"].homeReload = false;
newtmpData.formCode = "";
this.setState({
visible: false,
tmpData: newtmpData,
});
};
handleCancel = () => {
// 退出弹窗
this.clearData();
};
handleSearch = (evt) => {
const { value } = evt.target;
this.setState({ inputText: value});
if(value)
{
this.text=value;
}
else if(this.text2)
{
this.text=this.text2;
}
else
{
this.text='';
}
// this.setState({ inputText: value ? value : this.props.login.user.NAME });
};
startChange = (value) => {
this.setState({
selectStartTime: value,
startTime: value.format("YYYY-MM-DD"),
});
};
endChange = (value) => {
this.setState({
selectEndTime: value,
endTime: value.format("YYYY-MM-DD"),
});
};
render() {
const {
startTime,
endTime,
finishCount,
overtimeCount,
totalCount,
unfinishCount,
inputText,
DEPARTMENT_ID,
weekColor,
monthColor,
threeMonthColor,
sixMonthColor,
yearColor,
dovertimeCount,
} = this.state;
let allFinishRate =
totalCount === 0 || totalCount == undefined
? 0
: (((finishCount + overtimeCount) / totalCount) * 100).toFixed(1);
let finishRate =
totalCount === 0 || totalCount == undefined
? 0
: ((finishCount / totalCount) * 100).toFixed(1);
return (
<div>
{/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
<div
style={{
backgroundColor: "white",
width: "1200px",
top: "0",
bottom: "0",
left: "0",
right: "0",
margin: "auto",
borderStyle: "solid",
borderColor: "#ccc",
borderWidth: "1px",
}}
>
<Modal
visible={this.state.visible}
title={this.state.noticeTitle}
maskClosable={false}
onCancel={this.handleCancel}
footer={null}
className="antd-modal-fullscreen"
closeModal={this.closeModal}
// forceRender={true}
>
<FormPage {...this.state.tmpData} />
</Modal>
<h1
style={{
textAlign: "center",
verticalAlign: "Bottom",
marginTop: "20px",
marginBottom: "20px",
fontWeight: "bold",
}}
>
待办综合分析报表(组织/个人)
</h1>
<Row
style={{
fontSize: "15px",
marginTop: "10px",
// marginLeft: "30px",
margin: "0px 50px",
height: "35px",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<b>选择部门</b>
<DropDownPagination inputDataApi={'FM/Department/OrderPaged'} fieldName={'Nav_Department.NAME'}
data={this.state.departData} onSelect={this.onSelectDepartment} onFilter={({ params }) => {
params.OrderType = 1
params.OrgId = this.state.departData ? this.state.departData.ORG_ID : this.props.login.OrgId
// extendRule(params, 'DEPARTMENT_TYPE', 1, 0)
}}
style={{width:'200px'}}
/>
</span>
<span
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<b>姓名</b>
<Input
onChange={this.handleSearch}
style={{ width: "150px" }}
defaultValue={this.props.login.user.NAME}
></Input>
</span>
<span
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<b>开始时间</b>
<DatePicker
style={{ width: "150px" }}
value={this.state.selectStartTime}
format="YYYY-MM-DD"
onChange={this.startChange}
/>
</span>
<span
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<b>结束时间</b>
<DatePicker
style={{ width: "150px" }}
value={this.state.selectEndTime}
format="YYYY-MM-DD"
onChange={this.endChange}
/>
</span>
<span style={{ width: "100px" }}>
<Button
onClick={() => this.getMould(inputText,DEPARTMENT_ID)}
style={{ width: "80px" }}
type="primary"
>
查询
</Button>
</span>
</Row>
<br></br>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: "10px",
}}
>
<div className={styles.menuPie}>
<li>
总任务数
<br />
<div className={styles.dataStyle}>
{totalCount ? totalCount : 0}
</div>
</li>
<Divider
type="vertical"
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
/>
<li>
待办数
<br />
<div className={styles.dataStyle1}>
{unfinishCount ? unfinishCount : 0}
</div>
</li>
<Divider
type="vertical"
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
/>
<li>
超时待办数
<br />
<div className={styles.dataStyle3}>
{dovertimeCount ? dovertimeCount : 0}
</div>
</li>
<Divider
type="vertical"
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
/>
<li>
已办事项
<br />
<div className={styles.dataStyle2}>
{finishCount + overtimeCount
? finishCount + overtimeCount
: 0}
</div>
</li>
<Divider
type="vertical"
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
/>
<li>
完成率
<br />
<div className={styles.dataStyle3}>
{allFinishRate ? allFinishRate : 0}%
</div>
</li>
<Divider
type="vertical"
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
/>
<li>
及时完成率
<br />
<div className={styles.dataStyle3}>
{finishRate ? finishRate : 0}%
</div>
</li>
</div>
</div>
<Row
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: "20px",
}}
>
<Col
span={24}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "1100px",
flexDirection: "column",
}}
>
<div
id="ksRun"
style={{
width: "100%",
height: "350px",
marginLeft: "20px",
marginRight: "30px",
backgroundColor: "white",
borderStyle: "solid",
borderColor: "#ccc",
borderWidth: "1px",
}}
></div>
<br></br>
<span style={{ textAlign: "center", width: "100%" }}>
* 统计时间{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
<br></br>
<br></br>
</span>
</Col>
</Row>
<h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"50px"}}><Icon type="appstore"/> 未完成{this.text}</h2>
<Row
style={{
marginTop: "10px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Col
span={24}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "1100px",
}}
>
<Table
style={{
width: "100%",
textAlign: "center",
marginBottom: "30px",
}}
// scroll={{ y: 400 }}
dataSource={this.state.retData}
columns={this.state.detailcolumns}
pagination={true}
loading={false}
size="small"
bordered
/>
</Col>
</Row>
</div>
</div>
);
}
}
export default connect(({ login, app, loading }) => ({ login, app, loading }))(
BI012FormRunAnalysis
);