流程可视化
This commit is contained in:
parent
f8f1b95f21
commit
0e25699153
265
src/components/CustomPages/SK/OperateLog.css
Normal file
265
src/components/CustomPages/SK/OperateLog.css
Normal file
@ -0,0 +1,265 @@
|
||||
.flowchart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 关键：内容过多时自动换行 */
|
||||
gap: 16px;
|
||||
/* 项之间的间距 */
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
/* 确保容器宽度充足 */
|
||||
}
|
||||
|
||||
.logListContainer {
|
||||
padding-left: 30px;
|
||||
/* 确保左侧始终有30px间距 */
|
||||
width: calc(100% - 180px);
|
||||
/* 减去左侧步骤区域的宽度，避免溢出 */
|
||||
}
|
||||
|
||||
/* 单个日志项样式 - 控制最小宽度避免过度挤压 */
|
||||
|
||||
|
||||
.step {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #4472C4;
|
||||
/* #f0f0f0; */
|
||||
color: white;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.stepno {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #A5A5A5;
|
||||
/* #f0f0f0; */
|
||||
color: white;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 长方形 */
|
||||
.rectangle {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
/* margin-top: -70px; */
|
||||
margin-top: 8px;
|
||||
margin-left: 45px;
|
||||
position: relative;
|
||||
background-color: #ADCDEA;
|
||||
/* transform: rotate(-40deg); */
|
||||
/* 旋转角度 */
|
||||
}
|
||||
|
||||
.rectangleno {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
/* margin-top: -70px; */
|
||||
margin-top: 8px;
|
||||
margin-left: 45px;
|
||||
position: relative;
|
||||
background-color: #A5A5A5;
|
||||
/* transform: rotate(-40deg); */
|
||||
/* 旋转角度 */
|
||||
}
|
||||
|
||||
.rectangleno::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -13px;
|
||||
/* 根据需要调整 */
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 20px solid #A5A5A5;
|
||||
/* 线条颜色 #ddd*/
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 模拟线条 */
|
||||
/* .step:not(:last-child)::after { */
|
||||
.rectangle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -13px;
|
||||
/* 根据需要调整 */
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 20px solid #ADCDEA;
|
||||
/* 线条颜色 #ddd*/
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.step::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* bottom: -13px; */
|
||||
/* 根据需要调整 */
|
||||
/* left: 50%; */
|
||||
margin-left: 150px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
/* border-left: 20px solid transparent; */
|
||||
border-left: 20px solid #ADCDEA;
|
||||
/* border-color: #ADCDEA; */
|
||||
/* border: 1px solid #A5A5A5; */
|
||||
|
||||
|
||||
|
||||
/* border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent; */
|
||||
/* border-top: 20px solid #ADCDEA; */
|
||||
/* 线条颜色 #ddd*/
|
||||
/* transform: translateX(-50%); */
|
||||
}
|
||||
|
||||
|
||||
/* #ADCDEA 天蓝*/
|
||||
/* #70AD47 绿色 */
|
||||
/* #A5A5A5 灰色 深 */
|
||||
/* #D9D9D9 灰色 */
|
||||
/* #FFC000 橙色 浅 */
|
||||
/* #ED7D31 橙色 深 */
|
||||
|
||||
|
||||
|
||||
/* 横向布局 */
|
||||
.flowchartx {
|
||||
flex-direction: row;
|
||||
/* justify-content: space-between; */
|
||||
/* width: 100%; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 横向item */
|
||||
.stepx {
|
||||
/* margin-right: 15px; */
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background-color: #70AD47;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
/* border: 1px solid #ddd; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
/* 超时处理 */
|
||||
.stepxOutTime {
|
||||
/* margin-right: 15px; */
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background-color: #FFC000;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
/* border: 1px solid #ddd; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
/* 未处理 */
|
||||
.stepxEnable {
|
||||
/* margin-right: 15px; */
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background-color: #A5A5A5;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
/* border: 1px solid #ddd; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.stepxLeft50 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
/* 横向箭头线 */
|
||||
.linex {
|
||||
margin-left: 10px;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
/* margin-top: -70px; */
|
||||
/* margin-top: 8px; */
|
||||
/* margin-left: -30px; */
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
background-color: #ADCDEA;
|
||||
/* transform: rotate(-40deg); */
|
||||
/* 旋转角度 */
|
||||
}
|
||||
|
||||
/* 横向箭头 */
|
||||
.linex::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-left: 30px;
|
||||
margin-top: -5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 8px solid #ADCDEA;
|
||||
}
|
||||
|
||||
.discribeSpan {
|
||||
display: flex;
|
||||
width: 120px;
|
||||
/* width: 100%; */
|
||||
height: 70px;
|
||||
margin-top: -25px;
|
||||
border-radius: 5px;
|
||||
background: #D9D9D9;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
|
||||
.discribeSpanUser {
|
||||
margin-top: 28px;
|
||||
font-size: smaller;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.discribeSpanTime {
|
||||
font-size: smaller;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
/* 横向布局 */
|
||||
@ -1,94 +1,100 @@
|
||||
import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd';
|
||||
import React from 'react';
|
||||
import { initFilter, extendRule, extendInclude, setDataFieldValue, showApprove, guid, ShowDateTime } from '../../../utils/common';
|
||||
import {
|
||||
initFilter,
|
||||
extendRule,
|
||||
extendInclude,
|
||||
setDataFieldValue,
|
||||
showApprove,
|
||||
guid,
|
||||
ShowDateTime,
|
||||
} from '../../../utils/common.js';
|
||||
import ReactToPrint from 'react-to-print';
|
||||
import { ExportToExcel } from '@woowalker/feui'
|
||||
import { ExportToExcel } from '@woowalker/feui';
|
||||
import XLSX from 'xlsx';
|
||||
import { connect } from 'dva';
|
||||
import moment from 'moment';
|
||||
import { message } from 'antd/lib/index';
|
||||
import styles from '../../../components/CustomPages/HI/OperateLog.css';
|
||||
import styles from './OperateLog.css';
|
||||
import config from '../../../config.js';
|
||||
|
||||
class SK006ShowOperateLog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: null,
|
||||
riskCount: 1,
|
||||
riskHeight: 50,
|
||||
opEnd: null
|
||||
// dateFirst: [
|
||||
// [{ OPERATEPOINT: 10 }, { OPERATEPOINT: 20 }, { OPERATEPOINT: 30 }, { OPERATEPOINT: 40 }],
|
||||
// [{ OPERATEPOINT: 48 }, { OPERATEPOINT: 50 }, { OPERATEPOINT: 60 }, { OPERATEPOINT: 70 }, { OPERATEPOINT: 80 }],
|
||||
// [{ OPERATEPOINT: 130 }],
|
||||
// [
|
||||
// [{ OPERATEPOINT: 140 }, { OPERATEPOINT: 150 }, { OPERATEPOINT: 160 }, { OPERATEPOINT: 180 }, { OPERATEPOINT: 190 }, { OPERATEPOINT: 200 }, { OPERATEPOINT: 210 }, { OPERATEPOINT: 220 }]
|
||||
// ]
|
||||
// ]
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: null,
|
||||
riskCount: 1,
|
||||
riskHeight: 50,
|
||||
opEnd: null,
|
||||
// dateFirst: [
|
||||
// [{ OPERATEPOINT: 10 }, { OPERATEPOINT: 20 }, { OPERATEPOINT: 30 }, { OPERATEPOINT: 40 }],
|
||||
// [{ OPERATEPOINT: 48 }, { OPERATEPOINT: 50 }, { OPERATEPOINT: 60 }, { OPERATEPOINT: 70 }, { OPERATEPOINT: 80 }],
|
||||
// [{ OPERATEPOINT: 130 }],
|
||||
// [
|
||||
// [{ OPERATEPOINT: 140 }, { OPERATEPOINT: 150 }, { OPERATEPOINT: 160 }, { OPERATEPOINT: 180 }, { OPERATEPOINT: 190 }, { OPERATEPOINT: 200 }, { OPERATEPOINT: 210 }, { OPERATEPOINT: 220 }]
|
||||
// ]
|
||||
// ]
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.data?.id) this.loadData(this.props.data?.id);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(NextProps) {
|
||||
if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
|
||||
this.loadData(NextProps.data?.id);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.data?.id)
|
||||
this.loadData(this.props.data?.id);
|
||||
}
|
||||
loadData = (id) => {
|
||||
var orgId = this.props.login ? this.props.login.OrgId : '';
|
||||
let json = initFilter(orgId, id);
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByPost',
|
||||
payload: json,
|
||||
url: 'SK/SKSecurityInspectionNotice/OperateLogView',
|
||||
onComplete: (ret) => {
|
||||
if (ret) {
|
||||
let riskCount = 1;
|
||||
riskCount = ret.length - 3;
|
||||
var isEnd = false;
|
||||
var opEnd = null;
|
||||
if (ret[ret.length - 1].length == 1 && ret[ret.length - 1][0].OPERATEPOINT == 220) {
|
||||
isEnd = true;
|
||||
riskCount = riskCount - 1;
|
||||
opEnd = ret[ret.length - 1][0];
|
||||
}
|
||||
|
||||
componentWillReceiveProps(NextProps) {
|
||||
if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
|
||||
this.loadData(NextProps.data?.id);
|
||||
}
|
||||
}
|
||||
|
||||
loadData = (id) => {
|
||||
var orgId = this.props.login ? this.props.login.OrgId : '';
|
||||
let json = initFilter(orgId, id);
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByPost',
|
||||
payload: json,
|
||||
url: 'SK/SKSecurityInspectionNotice/SKOrderEntities',
|
||||
onComplete: (ret) => {
|
||||
if (ret) {
|
||||
let riskCount = 1
|
||||
riskCount = ret.length - 3
|
||||
var isEnd = false
|
||||
var opEnd = null
|
||||
if (ret[ret.length - 1].length == 1 && ret[ret.length - 1][0].OPERATEPOINT == 220) {
|
||||
isEnd = true
|
||||
riskCount = riskCount - 1
|
||||
opEnd = ret[ret.length - 1][0]
|
||||
}
|
||||
|
||||
let dataRiskMore = []
|
||||
if (riskCount > 0) {
|
||||
var countOpeate = ret.length
|
||||
if (isEnd) countOpeate--
|
||||
for (let i = 4; i < countOpeate; i++) {
|
||||
dataRiskMore.push(ret[i])
|
||||
}
|
||||
}
|
||||
if (riskCount == 0) riskCount = 1
|
||||
let riskHeight = 65 * riskCount
|
||||
this.setState({
|
||||
data: ret,
|
||||
dataRiskMore: dataRiskMore,
|
||||
riskCount: riskCount,
|
||||
opEnd: opEnd,
|
||||
riskHeight: riskHeight
|
||||
})
|
||||
}
|
||||
let dataRiskMore = [];
|
||||
if (riskCount > 0) {
|
||||
var countOpeate = ret.length;
|
||||
if (isEnd) countOpeate--;
|
||||
for (let i = 4; i < countOpeate; i++) {
|
||||
dataRiskMore.push(ret[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
|
||||
const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
|
||||
return <div style={{ textAlign: 'center', margin: "30px 0 0 50px" }}>
|
||||
|
||||
|
||||
<table style={{ marginBottom: "50px" }} >
|
||||
<tbody >
|
||||
{/* <tr>
|
||||
}
|
||||
if (riskCount == 0) riskCount = 1;
|
||||
let riskHeight = 65 * riskCount;
|
||||
this.setState({
|
||||
data: ret,
|
||||
dataRiskMore: dataRiskMore,
|
||||
riskCount: riskCount,
|
||||
opEnd: opEnd,
|
||||
riskHeight: riskHeight,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
|
||||
const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
|
||||
return (
|
||||
<div style={{ textAlign: 'center', margin: '30px 0 0 50px' }}>
|
||||
<table style={{ marginBottom: '50px' }}>
|
||||
<tbody>
|
||||
{/* <tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.rectangle} id="step0"></div>
|
||||
</td>
|
||||
@ -96,510 +102,78 @@ class SK006ShowOperateLog extends React.Component {
|
||||
</td>
|
||||
</tr> */}
|
||||
|
||||
{/* 检查任务 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste1">安全检查通知</div>
|
||||
<div className={styles.rectangle} id="step1"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[0]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[0].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
{/* 检查任务 */}
|
||||
|
||||
{data &&
|
||||
data?.map((item, index) => {
|
||||
// 判断当前item的logList中是否所有STATUS都是0
|
||||
const allStatusZero = item.logList?.every((log) => log.STATUS === 0);
|
||||
{
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
|
||||
<div style={{ width: '150px', textAlign: 'center', marginRight: '30px' }}>
|
||||
<div className={allStatusZero ? styles.stepno : styles.step} id="ste1">
|
||||
{item.FORM_NAME}
|
||||
</div>
|
||||
{index < data.length - 1 && (
|
||||
<div className={allStatusZero ? styles.rectangleno : styles.rectangle} id="step1"></div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.logListContainer}>
|
||||
<div className={styles.flowchartx}>
|
||||
{item.logList &&
|
||||
item.logList.map((item1, index1) => {
|
||||
{
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
key={index1}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className={
|
||||
item1.STATUS == 0
|
||||
? styles.stepxEnable
|
||||
: item1.STATUS == 5
|
||||
? styles.stepx
|
||||
: styles.stepxOutTime
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查任务 */}
|
||||
id="step20"
|
||||
>
|
||||
{item1.NAME}
|
||||
</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item1.USER_NAME}</span>
|
||||
<span className={styles.discribeSpanTime}>
|
||||
{' '}
|
||||
时间：{ShowDateTime(item1.DEAL_DATE, 'MM-dd HH:mm')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{index1 < item.logList.length - 1 ? <div className={styles.linex}></div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
||||
{/* 检查记录 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste2">安全检查记录</div>
|
||||
<div className={styles.rectangle} id="step2"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[1]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[1].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查记录 */}
|
||||
{/* 检查任务 */}
|
||||
|
||||
{/* 检查记录汇总 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste3">安全检查记录汇总</div>
|
||||
<div className={styles.rectangle} id="step3"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[2]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[2].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查记录汇总 */}
|
||||
|
||||
{/* 隐患上报 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste4">隐患上报</div>
|
||||
<div className={styles.rectangle} id="step4"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[3]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[3].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患上报 */}
|
||||
|
||||
{/* 隐患确认单 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste5">隐患确认单</div>
|
||||
<div className={styles.rectangle} id="step5"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[4]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[4].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患确认单 */}
|
||||
|
||||
{/* 隐患整改通知 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste6">隐患整改通知</div>
|
||||
<div className={styles.rectangle} id="step6"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[5]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[5].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患整改通知 */}
|
||||
|
||||
{/* 隐患整改记录 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste7">隐患整改记录</div>
|
||||
{/* <div className={styles.rectangle} id="step7"></div> */}
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[6]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[6].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患整改记录 */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
{/* 隐患整改记录 */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default connect(({ login, app }) => ({ login, app }))(SK006ShowOperateLog)
|
||||
export default connect(({ login, app }) => ({ login, app }))(SK006ShowOperateLog);
|
||||
|
||||
605
src/components/CustomPages/SK/SK006ShowOperateLogOld.js
Normal file
605
src/components/CustomPages/SK/SK006ShowOperateLogOld.js
Normal file
@ -0,0 +1,605 @@
|
||||
import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd';
|
||||
import React from 'react';
|
||||
import { initFilter, extendRule, extendInclude, setDataFieldValue, showApprove, guid, ShowDateTime } from '../../../utils/common.js';
|
||||
import ReactToPrint from 'react-to-print';
|
||||
import { ExportToExcel } from '@woowalker/feui'
|
||||
import XLSX from 'xlsx';
|
||||
import { connect } from 'dva';
|
||||
import moment from 'moment';
|
||||
import { message } from 'antd/lib/index';
|
||||
import styles from '../../../components/CustomPages/HI/OperateLog.css';
|
||||
import config from '../../../config.js';
|
||||
|
||||
class SK006ShowOperateLog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: null,
|
||||
riskCount: 1,
|
||||
riskHeight: 50,
|
||||
opEnd: null
|
||||
// dateFirst: [
|
||||
// [{ OPERATEPOINT: 10 }, { OPERATEPOINT: 20 }, { OPERATEPOINT: 30 }, { OPERATEPOINT: 40 }],
|
||||
// [{ OPERATEPOINT: 48 }, { OPERATEPOINT: 50 }, { OPERATEPOINT: 60 }, { OPERATEPOINT: 70 }, { OPERATEPOINT: 80 }],
|
||||
// [{ OPERATEPOINT: 130 }],
|
||||
// [
|
||||
// [{ OPERATEPOINT: 140 }, { OPERATEPOINT: 150 }, { OPERATEPOINT: 160 }, { OPERATEPOINT: 180 }, { OPERATEPOINT: 190 }, { OPERATEPOINT: 200 }, { OPERATEPOINT: 210 }, { OPERATEPOINT: 220 }]
|
||||
// ]
|
||||
// ]
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.data?.id)
|
||||
this.loadData(this.props.data?.id);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(NextProps) {
|
||||
if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
|
||||
this.loadData(NextProps.data?.id);
|
||||
}
|
||||
}
|
||||
|
||||
loadData = (id) => {
|
||||
var orgId = this.props.login ? this.props.login.OrgId : '';
|
||||
let json = initFilter(orgId, id);
|
||||
this.props.dispatch({
|
||||
type: 'app/getDataByPost',
|
||||
payload: json,
|
||||
url: 'SK/SKSecurityInspectionNotice/SKOrderEntities',
|
||||
onComplete: (ret) => {
|
||||
if (ret) {
|
||||
let riskCount = 1
|
||||
riskCount = ret.length - 3
|
||||
var isEnd = false
|
||||
var opEnd = null
|
||||
if (ret[ret.length - 1].length == 1 && ret[ret.length - 1][0].OPERATEPOINT == 220) {
|
||||
isEnd = true
|
||||
riskCount = riskCount - 1
|
||||
opEnd = ret[ret.length - 1][0]
|
||||
}
|
||||
|
||||
let dataRiskMore = []
|
||||
if (riskCount > 0) {
|
||||
var countOpeate = ret.length
|
||||
if (isEnd) countOpeate--
|
||||
for (let i = 4; i < countOpeate; i++) {
|
||||
dataRiskMore.push(ret[i])
|
||||
}
|
||||
}
|
||||
if (riskCount == 0) riskCount = 1
|
||||
let riskHeight = 65 * riskCount
|
||||
this.setState({
|
||||
data: ret,
|
||||
dataRiskMore: dataRiskMore,
|
||||
riskCount: riskCount,
|
||||
opEnd: opEnd,
|
||||
riskHeight: riskHeight
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
|
||||
const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
|
||||
return <div style={{ textAlign: 'center', margin: "30px 0 0 50px" }}>
|
||||
|
||||
|
||||
<table style={{ marginBottom: "50px" }} >
|
||||
<tbody >
|
||||
{/* <tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.rectangle} id="step0"></div>
|
||||
</td>
|
||||
<td colSpan={10}>
|
||||
</td>
|
||||
</tr> */}
|
||||
|
||||
{/* 检查任务 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste1">安全检查通知</div>
|
||||
<div className={styles.rectangle} id="step1"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[0]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step02" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step01">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[0].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查任务 */}
|
||||
|
||||
{/* 检查记录 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste2">安全检查记录</div>
|
||||
<div className={styles.rectangle} id="step2"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[1]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step21" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step20">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[1].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查记录 */}
|
||||
|
||||
{/* 检查记录汇总 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste3">安全检查记录汇总</div>
|
||||
<div className={styles.rectangle} id="step3"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[2]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step31" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step30">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[2].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 检查记录汇总 */}
|
||||
|
||||
{/* 隐患上报 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste4">隐患上报</div>
|
||||
<div className={styles.rectangle} id="step4"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[3]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step41" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step40">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[3].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患上报 */}
|
||||
|
||||
{/* 隐患确认单 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste5">隐患确认单</div>
|
||||
<div className={styles.rectangle} id="step5"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[4]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step51" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step50">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[4].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患确认单 */}
|
||||
|
||||
{/* 隐患整改通知 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste6">隐患整改通知</div>
|
||||
<div className={styles.rectangle} id="step6"></div>
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[5]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step61" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step60">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[5].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患整改通知 */}
|
||||
|
||||
{/* 隐患整改记录 */}
|
||||
<tr>
|
||||
<td style={{ width: "150px", textAlign: "center" }}>
|
||||
<div className={styles.step} id="ste7">隐患整改记录</div>
|
||||
{/* <div className={styles.rectangle} id="step7"></div> */}
|
||||
</td>
|
||||
<td colSpan={10} style={{ paddingLeft: "30px" }}>
|
||||
<div className={styles.flowchartx} >
|
||||
{
|
||||
data && data[6]?.map((item, index) => {
|
||||
let resultdiv = []
|
||||
for (let i = 0; i < 2; i++) {
|
||||
if (i == 0) {
|
||||
resultdiv.push(
|
||||
item.OPERTETIME ?
|
||||
(
|
||||
//有操作
|
||||
item.ISINTTIME ?
|
||||
(//按时完成 绿色
|
||||
<div>
|
||||
<div className={styles.stepx} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
( //超时完成 橙色
|
||||
<div>
|
||||
<div className={styles.stepxOutTime} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：{ShowDateTime(item.OPERTETIME, "MM-dd HH:mm")}</span>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
:
|
||||
(
|
||||
//没有操作 灰色
|
||||
item.USRTNAME ? (
|
||||
//有用户信息 写入用户
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
<div id="step71" className={styles.discribeSpan}>
|
||||
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
|
||||
<span className={styles.discribeSpanTime}> 时间：</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
//没有用户信息
|
||||
<div>
|
||||
<div className={styles.stepxEnable} id="step70">{enums.SKOPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)
|
||||
} else if (index != data[6].length - 1) {
|
||||
resultdiv.push(
|
||||
<div className={styles.linex}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return resultdiv
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 隐患整改记录 */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
export default connect(({ login, app }) => ({ login, app }))(SK006ShowOperateLog)
|
||||
Loading…
Reference in New Issue
Block a user