ccy/mh-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

安全履职

Browse Source 
检查任务制定取消
This commit is contained in:
wyw 2024-07-12 10:57:52 +08:00
parent 3a48f8fdad
commit 1c5852b617
3 changed files with 709 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

510
src/components/CustomPages/BS/BS076ShowOperateLog.js
View File

@ -7,7 +7,7 @@ import XLSX from 'xlsx';
import { connect } from 'dva';
import moment from 'moment';
import { message } from 'antd/lib/index';
import styles from '../../../components/CustomPages/HI/StepForm.css';
import styles from '../../../components/CustomPages/HI/OperateLog.css';
import config from '../../../config.js';
class BS076ShowOperateLog extends React.Component {
@ -15,8 +15,17 @@ class BS076ShowOperateLog extends React.Component {
super(props);
this.state = {
data: null,
btndisplay: 'none',
isCheck: false, //是否待办 审批
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 }]
// ]
// ]
}
}
@ -31,29 +40,507 @@ class BS076ShowOperateLog extends React.Component {
}
}
loadData = (ids) => {
loadData = (id) => {
var orgId = this.props.login ? this.props.login.OrgId : '';
let json = initFilter(orgId, ids);
let json = initFilter(orgId, id);
this.props.dispatch({
type: 'app/getDataByPost',
payload: json,
url: 'BS/BSOperateLog/OrderEntities',
onComplete: (ret) => {
debugger
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 } = this.state;
const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
return <div>
<div ref={el => (this.componentRef = el)} style={{ padding: '20px', paddingTop: '20px' }} id={'tableId' + this.props.data.id}>
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.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step02" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
<div>
<div className={styles.stepxOutTime} id="step01">{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step02" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>)
)
:
(
//没有操作 灰色
item.USRTNAME ? (
//有用户信息 写入用户
<div>
<div className={styles.stepxEnable} id="step01">{enums.OPERATEPOINT_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.OPERATEPOINT_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.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step21" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
<div>
<div className={styles.stepxOutTime} id="step20">{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step21" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>)
)
:
(
//没有操作 灰色
item.USRTNAME ? (
//有用户信息 写入用户
<div>
<div className={styles.stepxEnable} id="step20">{enums.OPERATEPOINT_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.OPERATEPOINT_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.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step31" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
<div>
<div className={styles.stepxOutTime} id="step30">{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step31" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>)
)
:
(
//没有操作 灰色
item.USRTNAME ? (
//有用户信息 写入用户
<div>
<div className={styles.stepxEnable} id="step30">{enums.OPERATEPOINT_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.OPERATEPOINT_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 rowSpan={riskCount} style={{ width: "150px", textAlign: "center" }}>
<div className={styles.step} id="ste4">隐患整改</div>
{
riskCount > 1 ? <div className={styles.rectangle} style={{ height: riskHeight + "px" }} id="step4"></div> : <div className={styles.rectangle} id="step4"></div>
}
</td>
<td colSpan={10}
style={{ padding:"0 30px 0 30px", border: "1px dashed #D9D9D9" }}>
<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.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step41" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
<div>
<div className={styles.stepxOutTime} id="step40">{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id="step41" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>)
)
:
(
//没有操作 灰色
item.USRTNAME ? (
//有用户信息 写入用户
<div>
<div className={styles.stepxEnable} id="step40">{enums.OPERATEPOINT_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.OPERATEPOINT_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>
{
dataRiskMore?.map(itemR => {
return <tr>
<td colSpan={10} style={{ padding:"0 30px 0 30px", border: "1px dashed #D9D9D9" }}>
<div className={styles.flowchartx} >
{
itemR.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" + index}>{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id={"step51" + index} className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
<div>
<div className={styles.stepxOutTime} id={"step50" + index}>{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id={"step51" + index} className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{item.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>)
)
:
(
//没有操作 灰色
item.USRTNAME ? (
//有用户信息 写入用户
<div>
<div className={styles.stepxEnable} id={"step50" + index}>{enums.OPERATEPOINT_Enums.enums[item.OPERATEPOINT]}</div>
<div id={"step51" + index} className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{item.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：</span>
</div>
</div>
) : (
//没有用户信息
<div>
<div className={styles.stepxEnable} id={"step50" + index}>{enums.OPERATEPOINT_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="step6">结束</div>
</td>
<td colSpan={10} style={{ paddingLeft: "30px" }}>
{
opEnd ? (opEnd.ISINTTIME ?
(//按时完成 绿色
<div>
<div className={styles.stepx} id="step60">{enums.OPERATEPOINT_Enums.enums[opEnd.OPERATEPOINT]}</div>
<div id="step61" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{opEnd.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{opEnd.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
)
:
( //超时完成 橙色
opEnd.USRTNAME ?
<div>
<div className={styles.stepxOutTime} id="step60">{enums.OPERATEPOINT_Enums.enums[opEnd.OPERATEPOINT]}</div>
<div id="step61" className={styles.discribeSpan}>
<span className={styles.discribeSpanUser}> 用户：{opEnd.USRTNAME}</span>
<span className={styles.discribeSpanTime}> 时间：{opEnd.CREATE_TIME.split(' ')[0]}</span>
</div>
</div>
:
<div><div className={styles.stepxEnable} id="step60">{enums.OPERATEPOINT_Enums.enums[opEnd.OPERATEPOINT]}</div></div>//没有人员信息 灰色
)) : <div></div>
}
</td>
</tr>
{/* 结束 */}
</tbody>
</table>
{/*
<div style={{ width: '200px', minHeight: '800px', padding: '20px', paddingTop: '20px', float: "left" }}>
<div className={styles.flowchart} >
<div className={styles.rectangle} id="step11"></div>
<div className={styles.step} id="step1">检查任务</div>
<div className={styles.rectangle} id="step11"></div>
<div className={styles.step} id="step2">检查记录</div>
<div className={styles.rectangle} id="step22"></div>
<div className={styles.step} id="step3">隐患上报</div>
<div className={styles.rectangle} id="step33"></div>
<div className={styles.step} id="step3">隐患整改</div>
<div className={styles.rectangle} id="step33"></div>
<div className={styles.step} id="step3">结束</div>
</div>
</div>
<div style={{ minWidth: '1200px', minHeight: '800px', padding: '20px', paddingTop: '20px', float: "left" }}>
<div className={styles.flowchartx} >
<div>
<div className={styles.stepx} id="step11">任务获取</div>
<div className={styles.discribeSpan} id="step111">
<span style={{ marginTop: "25px", fontSize: "smaller", padding: '5px 0 0 5px' }}> 发起人：王永文</span>
<span style={{ fontSize: "smaller", padding: '0px 0 0 5px' }}> 时间：2024-07-10</span>
</div>
</div>
<div className={styles.linex}></div>
<div className={styles.stepx} id="step22">检查任务制定</div>
<div className={styles.linex}></div>
<div className={styles.stepx} id="step33">检查任务审批</div>
<div className={styles.linex} ></div>
<div className={styles.stepx} id="step34">检查任务确认</div>
</div>
<div className={styles.flowchartx} >
<div>
<div className={styles.stepx} id="step11">任务获取</div>
<div id="step111" className={styles.discribeSpan}>
<span style={{ marginTop: "25px", fontSize: "smaller", padding: '5px 0 0 5px' }}> 发起人：王永文</span>
<span style={{ fontSize: "smaller", padding: '0px 0 0 5px' }}> 时间：2024-07-10</span>
</div>
</div>
<div className={styles.linex}></div>
<div className={styles.stepx} id="step22">检查任务制定</div>
<div className={styles.linex}></div>
<div className={styles.stepx} id="step33">检查任务审批</div>
<div className={styles.linex} ></div>
<div className={styles.stepx} id="step34">检查任务确认</div>
</div>
</div> */}
{/* <div ref={el => (this.componentRef = el)} style={{ padding: '20px', paddingTop: '20px' }} id={'tableId' + this.props.data.id}>
<table className={styles.PrintFormLight}>
<tbody>
<tr>
@ -77,7 +564,8 @@ class BS076ShowOperateLog extends React.Component {
}) : <tr><td colSpan={5} style={{ textAlign: 'left' }}>查无记录</td></tr>}
</tbody>
</table>
</div>
</div> */}
</div>
}
}

207
src/components/CustomPages/HI/OperateLog.css Normal file
View File

@ -0,0 +1,207 @@
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.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;
}
/* 长方形 */
.rectangle {
width: 20px;
height: 50px;
/* margin-top: -70px; */
margin-top: 8px;
margin-left: 45px;
position: relative;
background-color: #ADCDEA;
/* transform: rotate(-40deg); */
/* 旋转角度 */
}
/* 模拟线条 */
/* .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;
}
/* 横向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;
}
/* 横向布局 */

3
src/files/edit/BS032.js
View File

@ -273,7 +273,6 @@ export default {
return '';
}
},
btnCancel: ({ record, onCancel, data, dispatch }) => {
let json = initFilter(record.ORG_ID, record.ID, null, null, null, data.TaskID);
dispatch({
@ -282,8 +281,10 @@ export default {
payload: json,
onlyData: false,
onComplete: (ret) => {
if (ret.IsSuccessful == true) {
message.success('执行成功', null, onCancel())
}
}
})
},
}