jhbigscreen/src/pages/components/ProblemmodifyDetail.vue

412 lines
17 KiB
Vue

<template>
<MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize"
class="problem-modify-detail">
<template slot="title">
{{ row.projectName }}【{{ infoType == 0 ? '安全隐患' : '质量隐患' }}】
</template>
<div>
<div class="font-size-tools">
<i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
<i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
<i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
</div>
<div class="head-title-tab">
<div :class="nav == 0 ? 'head-nav active' : 'head-nav'" @click="doNav(0)">待整改({{ count['0'] }})</div>
<div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">待复检({{ count['1'] }})</div>
<div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">复检驳回({{ count['3'] }})</div>
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">复检通过({{ count['4'] }})</div>
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">整改超时({{ count['5'] }})</div>
</div>
<div class="data-list scroll" style="max-height:712px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;" v-if="dataTable.length>0">
<div v-for="(it, idx) in dataTable" :key="idx" class="data-item"
:class="it.timeout ? 'time-out' : ''">
<div class="item-left">
<el-image ref="preview" style="width: 400px; " :preview-src-list="[it.marksPicture]"
:src="it.marksPicture + '.1000.jpg'">
</el-image>
</div>
<div class="item-right">
<div v-if="it.timeout && it.checkState!=4" class="text-timeout">超时</div>
<div class="text-state" :class="'state'+it.checkState">{{ getCheckState(it.checkState) }}</div>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">总包单位:</span>
<div class="div-text">{{ it.deptName }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患类型:</span>
<div class="div-text">{{ getDangerType(it.dangerType) }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患整改人:</span>
<div class="div-text">{{ it.lordSent }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">复检人:</span>
<div class="div-text">{{ it.recheckSend }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">抄送人:</span>
<div class="div-text">{{ it.copySend }}</div>
</el-col>
<template v-if="it.checkState==4">
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
<div class="div-text">{{ it.createBy }}</div>
</el-col>
<el-col :span="8" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
<div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
</el-col>
<el-col :span="8" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
<div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
</el-col>
<el-col :span="8" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">完成时间:</span>
<div class="div-text">{{ it.updateTime | formatDate('YYYY-MM-DD') }}</div>
</el-col>
</template>
<template v-else>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
<div class="div-text">{{ it.createBy }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
<div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
</el-col>
<el-col :span="12" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
<div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
</el-col>
</template>
<el-col :span="24" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患描述:</span>
<div class="div-text">{{ it.workParts }}
</div>
</el-col>
<el-col :span="24" class="item-data">
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">整改要求:</span>
<div class="div-text">{{ it.changeInfo }}</div>
</el-col>
</div>
</div>
</div>
<div v-else style="text-align: center;margin-top: 200px;">
<img src="images/nodata.png" style="width: 240px;">
<div style="text-align: center;"></div>
</div>
</div>
</MyDialog>
</template>
<script>
import MyDialog from '../components/MyDialog'
export default {
components: {
MyDialog
},
data() {
return {
fontSize: 0,
elKey: 0,
nav: 0,
infoType: 0,
roleType:0,
row: null,
show: false,
count: {
"0": 0,
"1": 0,
"3": 0,
"4": 0,
"5": 0
},
dataTable: [],
dicts: [],
checkStateDicts: [],
selDate:[]
};
},
mounted() {
},
methods: {
getDangerType(v) {
let tmps = this.dicts.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
getCheckState(v) {
let tmps = this.checkStateDicts.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
doNav(n, init) {
if (n == this.nav && !init) {
return;
}
this.nav = n;
let postData = {
projectId: this.row.projectId,
infoType: this.infoType,
roleType: this.roleType
};
if (n == 5) {
postData.activeName = 'zgcs'
} else {
postData.checkState = n
}
if(this.selDate.length>0){
postData.startDate=this.$dt(this.selDate[0]).format("YYYY-MM-DD");
}
if(this.selDate.length>1){
postData.endDate=this.$dt(this.selDate[1]).format("YYYY-MM-DD");
}
this.$api.problemmodify.listSspProblemmodify(postData).then(d => {
this.dataTable = (d.data || []).map(it => {
if(it.updateTime){
let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
let dt2 = +this.$dt(this.$dt(it.updateTime).format("YYYY-MM-DD"));
if (dt1 < dt2) {
it.timeout = true;
} else {
it.timeout = false;
}
}else if (it.nickedTime) {
let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
let dt2 = +this.$dt(this.$dt(new Date()).format("YYYY-MM-DD"));
if (dt1 < dt2) {
it.timeout = true;
} else {
it.timeout = false;
}
} else {
it.timeout = false;
}
return it;
});
this.elKey++;
})
},
showDialog(row, infoType,roleType,selDate) {
this.selDate=selDate;
this.row = row;
this.infoType = infoType;
this.roleType=roleType;
if (infoType == 0) {
this.$api.dict('ssp_aqyhlx').then(d => {
this.dicts = d || [];
})
} else {
this.$api.dict('ssp_zlyhlx').then(d => {
this.dicts = d || [];
})
}
this.$api.dict('smz_ssp_checkstate').then(d => {
this.checkStateDicts = d || [];
});
this.show = true
this.doNav(0, true);
let postData={
projectId: this.row.projectId,
infoType: this.infoType,
roleType:this.roleType
};
if(this.selDate.length>0){
postData.startDate=this.$dt(this.selDate[0]).format("YYYY-MM-DD");
}
if(this.selDate.length>1){
postData.endDate=this.$dt(this.selDate[1]).format("YYYY-MM-DD");
}
this.$api.problemmodify.groupByInfotypeCheckState(postData).then(d => {
for (let i = 0; i <= 5; i++) {
this.count["" + i] = 0;
}
let tmps = (d.data || []).filter(it => it.infoType == this.infoType);
tmps.forEach(it => {
this.count["" + it.checkState] = it.id;
})
console.log("--->", this.count)
})
}
},
};
</script>
<style lang="less" >
.problem-modify-detail {
.popup-project-introduction-min {
transform: translateY(100px);
}
.popup-project-introduction-details {
padding: 0px !important;
position: relative;
.quality-table {
padding: 0px !important;
}
.font-size-tools {
position: absolute;
top: -40px;
right: 100px;
}
}
&.font-size-2 {
.head-title-tab {
.head-nav {
font-size: 32px;
height: 48px;
line-height: 48px;
padding: 0px 48px;
}
}
.item-data {
line-height: 64px;
font-size: 32px;
line-height: 64px;
.div-text {
line-height: 64px;
}
}
}
&.font-size-1 {
.head-title-tab {
.head-nav {
font-size: 24px;
height: 30px;
line-height: 30px;
padding: 0px 30px;
}
}
.item-data {
line-height: 48px;
font-size: 24px;
line-height: 48px;
.div-text {
line-height: 48px;
}
}
}
.head-title-tab {
padding-top: 12px;
display: block;
width: 100%;
.head-nav {
background-size: 100% 100%;
display: inline-block;
width: auto;
padding: 0px 24px;
}
}
.data-list {
.data-item {
border-bottom: solid 1px #fff;
box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
display: flex;
padding-left: 8px;
&.time-out {
box-shadow: inset 7px 0px 11px 5px rgb(167, 36, 36);
.text-state {
color: rgba(167, 36, 36,0.6) !important;
}
}
.item-left {
display: inline-flex;
width: 400px;
min-height: 220px;
align-items: center;
}
.text-state {
font-size: 32px;
position: absolute;
color: rgba(200, 200, 200, 0.2);
transform: rotate(45deg);
top: 60px;
left: calc(50% - 100px);
&.state4{
color: rgba(5, 248, 5, 0.5);
}
}
.item-right {
display: inline-block;
margin-left: 10px;
width: calc(100% - 414px);
position: relative;
.sp-lbl {
display: inline-block;
color: aquamarine;
}
.text-timeout {
position: absolute;
right: 0px;
font-size: 64px;
color: red;
transform: rotate(45deg);
top: 27px;
}
.item-data {
display: flex;
align-items: center;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
line-height: 36px;
.div-text {
display: inline-block;
width: calc(100% - 200px);
vertical-align: top;
white-space: break-spaces;
word-break: break-word;
}
}
}
}
}
}</style>