Merge branch 'main' of http://47.122.43.22:3000/wjn/mh-sms-web
This commit is contained in:
commit
34d4a05378
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,18 @@
|
||||
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'
|
||||
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";
|
||||
const { Option } = Select;
|
||||
class TrainSafeAnalysis extends React.Component {
|
||||
constructor(props) {
|
||||
@ -25,61 +34,72 @@ class TrainSafeAnalysis extends React.Component {
|
||||
NUM5: 0,
|
||||
NUM6: 0,
|
||||
NUM7: 0,
|
||||
searchMonth: moment().format('YYYY-MM'),
|
||||
showLoading: false
|
||||
searchMonth: moment().format("YYYY-MM"),
|
||||
showLoading: false,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.state.columns1 = [
|
||||
{
|
||||
title: '序号',
|
||||
render: (text, record, index) => `${index + 1}`
|
||||
title: "序号",
|
||||
render: (text, record, index) => `${index + 1}`,
|
||||
},
|
||||
{
|
||||
title: '课程名称',
|
||||
dataIndex: 'NAME',
|
||||
title: "课程名称",
|
||||
dataIndex: "NAME",
|
||||
},
|
||||
{
|
||||
title: '培训起止时间',
|
||||
dataIndex: 'TIMERANGE',
|
||||
width: "270px",
|
||||
title: "培训起止时间",
|
||||
dataIndex: "TIMERANGE",
|
||||
},
|
||||
{
|
||||
title: '应参训人数',
|
||||
dataIndex: 'SHOULD_TRAINER',
|
||||
title: "应参训人数",
|
||||
dataIndex: "SHOULD_TRAINER",
|
||||
},
|
||||
{
|
||||
title: '实际参训人数',
|
||||
dataIndex: 'ACTUAL_TRAINER',
|
||||
}, {
|
||||
title: '参训率',
|
||||
render: (text, record) => (<span>{((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(0) + "%"}</span>),
|
||||
title: "实际参训人数",
|
||||
dataIndex: "ACTUAL_TRAINER",
|
||||
},
|
||||
{
|
||||
title: '考核方式',
|
||||
dataIndex: 'METHOD',
|
||||
title: "参训率",
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
{((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(
|
||||
0
|
||||
) + "%"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '通过率',
|
||||
dataIndex: 'PASS_RATE',
|
||||
render: (text, record) => (<span>{(record.PASS_RATE * 100).toFixed(0) + "%"}</span>),
|
||||
|
||||
title: "考核方式",
|
||||
dataIndex: "METHOD",
|
||||
},
|
||||
{
|
||||
title: '效果评估(优良率)',
|
||||
dataIndex: 'EFFORT_RATE',
|
||||
render: (text, record) => (<span>{(record.EFFORT_RATE*1).toFixed(0) + "%"}</span>),
|
||||
title: "通过率",
|
||||
dataIndex: "PASS_RATE",
|
||||
render: (text, record) => (
|
||||
<span>{(record.PASS_RATE * 100).toFixed(0) + "%"}</span>
|
||||
),
|
||||
},
|
||||
]
|
||||
{
|
||||
title: "效果评估(优良率)",
|
||||
dataIndex: "EFFORT_RATE",
|
||||
render: (text, record) => (
|
||||
<span>{(record.EFFORT_RATE * 1).toFixed(0) + "%"}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
this.loadData(this.state.searchMonth);
|
||||
};
|
||||
}
|
||||
loadData = (startTime) => {
|
||||
const json = initFilter(this.props.login.OrgId);
|
||||
this.state.showLoading = true;
|
||||
json.Parameter1 = startTime;
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByPost',
|
||||
url: 'BI/BIController/getSafeTrainData',
|
||||
type: "app/getDataByPost",
|
||||
url: "BI/BIController/getSafeTrainData",
|
||||
payload: json,
|
||||
onlyData: false,
|
||||
onComplete: (ret) => {
|
||||
@ -95,106 +115,320 @@ class TrainSafeAnalysis extends React.Component {
|
||||
this.state.retData = ret.Data.trainRecords;
|
||||
this.chart1(ret.Data.dateCountModel);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
chart1 = (ret) => {
|
||||
this.state.recordNums = [];
|
||||
this.state.dates = [];
|
||||
let color = [
|
||||
"#0090FF",
|
||||
"#36CE9E",
|
||||
"#FFC005",
|
||||
"#FF515A",
|
||||
"#8B5CFF",
|
||||
"#00CA69",
|
||||
];
|
||||
const hexToRgba = (hex, opacity) => {
|
||||
let rgbaColor = "";
|
||||
let reg = /^#[\da-f]{6}$/i;
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||||
"0x" + hex.slice(3, 5)
|
||||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||||
}
|
||||
return rgbaColor;
|
||||
};
|
||||
for (let i = 0; i < ret.length; i++) {
|
||||
this.state.recordNums.push(ret[i].COUNT);
|
||||
this.state.dates.push(moment(ret[i].DATE).format('YYYY-MM'));
|
||||
this.state.dates.push(moment(ret[i].DATE).format("YYYY-MM"));
|
||||
}
|
||||
let chart1s = document.getElementById('chart1');
|
||||
let chart1s = document.getElementById("chart1");
|
||||
if (chart1s) {
|
||||
let myChart = echarts.init(chart1s);
|
||||
myChart.on('click', (params) => {
|
||||
myChart.on("click", (params) => {
|
||||
this.loadData(params.name);
|
||||
});
|
||||
myChart.setOption({
|
||||
color: color,
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
},
|
||||
legend: {
|
||||
bottom: '0px'
|
||||
bottom: "0px",
|
||||
},
|
||||
title: {
|
||||
text: "月度培训完成走势图",
|
||||
left: 'center'
|
||||
left: "center",
|
||||
top: "2%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: this.state.dates,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
showMaxLabel: true
|
||||
}
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#666",
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#666",
|
||||
fontSize: 12,
|
||||
lineHeight: 40,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#E9E9E9",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '培训记录数',
|
||||
name: "培训记录数",
|
||||
data: this.state.recordNums,
|
||||
type: 'line',
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1),
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
onChange = (type, value) => {
|
||||
this.setState({
|
||||
[type]: value
|
||||
})
|
||||
}
|
||||
[type]: value,
|
||||
});
|
||||
};
|
||||
paginationConfig = {
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
// pageSizeOptions: ["10", "20", "50"],
|
||||
pageSize: 20,
|
||||
showSizeChanger: true,
|
||||
size: 'small',
|
||||
}
|
||||
// showSizeChanger: true,
|
||||
size: "small",
|
||||
};
|
||||
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>
|
||||
<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={3}>
|
||||
{/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)" }}>年度培训计划完成率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM1}</span>%</Button> */}
|
||||
<Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>安全培训教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM2}</span>/次</Button>
|
||||
<Col span={1}> </Col>
|
||||
<Col span={22}>
|
||||
{/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)" }}>年度培训计划完成率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM1}</span>%</Button> */}
|
||||
{/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>安全培训教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM2}</span>/次</Button>
|
||||
<Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>三级安全教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM3}</span>/次</Button>
|
||||
{/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>学时达标率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM4}</span>%</Button> */}
|
||||
{/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训优良率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM5}</span>%</Button> */}
|
||||
{/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训考核通过率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM6}</span>%</Button> */}
|
||||
<Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>题库总条数<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM7}</span>/条</Button>
|
||||
</Col>
|
||||
<Col span={19}>
|
||||
<div className="dashboard-div-style" style={{ borderRadius: '10px', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||||
<div id="chart1" style={{ width: '100%', height: '350px' }}></div>
|
||||
{/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>题库总条数<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM7}</span>/条</Button> */}
|
||||
<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.NUM2}
|
||||
</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.NUM3}
|
||||
</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.NUM7}
|
||||
</span>
|
||||
条
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={1}></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={22}>
|
||||
<div
|
||||
className="dashboard-div-style"
|
||||
style={{
|
||||
// borderRadius: "10px",
|
||||
backgroundColor: "white",
|
||||
border: "1px solid rgb(232,232,232)"
|
||||
// boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
|
||||
}}
|
||||
>
|
||||
<div id="chart1" style={{ width: "100%", height: "350px" }}></div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={1}></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={22} style={{ height: '100%' }}>
|
||||
<div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||||
<Col span={22} style={{ height: "100%" }}>
|
||||
<div
|
||||
// className="dashboard-div-style"
|
||||
// style={{ boxShadow: "0px 0px 10px rgba(0,0,0,.15)" }}
|
||||
>
|
||||
<Table
|
||||
dataSource={this.state.retData}
|
||||
columns={this.state.columns1}
|
||||
pagination={this.paginationConfig}
|
||||
// pagination={this.paginationConfig}
|
||||
bordered
|
||||
loading={this.state.showLoading}
|
||||
size="small"
|
||||
rowKey="1"
|
||||
rowKey="2"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
@ -202,7 +436,7 @@ class TrainSafeAnalysis extends React.Component {
|
||||
</Row>
|
||||
<br />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis)
|
||||
export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis);
|
||||
|
||||
@ -57,6 +57,7 @@ class SE007ShowPrint extends React.Component {
|
||||
extendSelectField(json, 'NAME');
|
||||
extendSelectField(json, 'LAUNCH_TIME');
|
||||
extendSelectField(json, 'END_TIME');
|
||||
extendSelectField(json, 'STATUS');
|
||||
extendSelectField(json, 'Nav_LaunchDepartment.NAME');
|
||||
extendSelectField(json, 'Nav_LaunchUser.NAME');
|
||||
extendSelectField(json, 'Nav_Points.Nav_Point.NAME');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user