209 lines
8.0 KiB
JavaScript
209 lines
8.0 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'
|
||
|
|
const { Option } = Select;
|
||
|
|
class TrainSafeAnalysis extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
pagination: {},
|
||
|
|
retData: [],
|
||
|
|
totalUsers: 0,
|
||
|
|
totalActiveUsers: 0,
|
||
|
|
selectUser: "",
|
||
|
|
selectDepartment: "",
|
||
|
|
dates: [],
|
||
|
|
recordNums: [],
|
||
|
|
todayCount: 0,
|
||
|
|
NUM1: 0,
|
||
|
|
NUM2: 0,
|
||
|
|
NUM3: 0,
|
||
|
|
NUM4: 0,
|
||
|
|
NUM5: 0,
|
||
|
|
NUM6: 0,
|
||
|
|
NUM7: 0,
|
||
|
|
searchMonth: moment().format('YYYY-MM'),
|
||
|
|
showLoading: false
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.state.columns1 = [
|
||
|
|
{
|
||
|
|
title: '序号',
|
||
|
|
render: (text, record, index) => `${index + 1}`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '课程名称',
|
||
|
|
dataIndex: 'NAME',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '培训起止时间',
|
||
|
|
dataIndex: 'TIMERANGE',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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: 'METHOD',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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',
|
||
|
|
payload: json,
|
||
|
|
onlyData: false,
|
||
|
|
onComplete: (ret) => {
|
||
|
|
if (ret) {
|
||
|
|
this.state.showLoading = false;
|
||
|
|
this.state.NUM1 = ret.Data.NUM1;
|
||
|
|
this.state.NUM2 = ret.Data.NUM2;
|
||
|
|
this.state.NUM3 = ret.Data.NUM3;
|
||
|
|
this.state.NUM4 = ret.Data.NUM4;
|
||
|
|
this.state.NUM5 = ret.Data.NUM5;
|
||
|
|
this.state.NUM6 = ret.Data.NUM6;
|
||
|
|
this.state.NUM7 = ret.Data.NUM7;
|
||
|
|
this.state.retData = ret.Data.trainRecords;
|
||
|
|
this.chart1(ret.Data.dateCountModel);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
chart1 = (ret) => {
|
||
|
|
this.state.recordNums = [];
|
||
|
|
this.state.dates = [];
|
||
|
|
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'));
|
||
|
|
}
|
||
|
|
let chart1s = document.getElementById('chart1');
|
||
|
|
if (chart1s) {
|
||
|
|
let myChart = echarts.init(chart1s);
|
||
|
|
myChart.on('click', (params) => {
|
||
|
|
this.loadData(params.name);
|
||
|
|
});
|
||
|
|
myChart.setOption({
|
||
|
|
grid: {
|
||
|
|
left: '5%',
|
||
|
|
right: '5%',
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
bottom: '0px'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: "月度培训完成走势图",
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: this.state.dates,
|
||
|
|
axisLabel: {
|
||
|
|
showMaxLabel: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '培训记录数',
|
||
|
|
data: this.state.recordNums,
|
||
|
|
type: 'line',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onChange = (type, value) => {
|
||
|
|
this.setState({
|
||
|
|
[type]: value
|
||
|
|
})
|
||
|
|
}
|
||
|
|
paginationConfig = {
|
||
|
|
pageSizeOptions: ['10', '20', '50'],
|
||
|
|
pageSize: 20,
|
||
|
|
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>
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
</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)' }}>
|
||
|
|
<Table
|
||
|
|
dataSource={this.state.retData}
|
||
|
|
columns={this.state.columns1}
|
||
|
|
pagination={this.paginationConfig}
|
||
|
|
bordered
|
||
|
|
loading={this.state.showLoading}
|
||
|
|
size="small"
|
||
|
|
rowKey="1"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
</Row>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis)
|