354 lines
12 KiB
Vue
354 lines
12 KiB
Vue
<template>
|
|
<div class="problemmodify-list">
|
|
<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:530px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;"
|
|
v-if="dataTable.length > 0" :key="elKey">
|
|
<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-row>
|
|
<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-row>
|
|
<el-row>
|
|
<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-row>
|
|
<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>
|
|
<el-pagination v-if="dataTable.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
|
|
@current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
|
|
class="bg-pagination"></el-pagination>
|
|
<div v-if="dataTable.length == 0" style="text-align: center;margin-top: 200px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
projectId: 0,
|
|
nav: 0,
|
|
infoType: 0,
|
|
roleType: 0,
|
|
count: {
|
|
"0": 0,
|
|
"1": 0,
|
|
"3": 0,
|
|
"4": 0,
|
|
"5": 0
|
|
},
|
|
dataTable: [],
|
|
dicts: [],
|
|
checkStateDicts: [],
|
|
selDate: [],
|
|
size: 10,
|
|
index: 1,
|
|
total: 0,
|
|
};
|
|
},
|
|
|
|
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 : '';
|
|
},
|
|
handleCurrentChange(n) {
|
|
this.index = n;
|
|
this.getData();
|
|
},
|
|
doNav(n, init) {
|
|
if (n == this.nav && !init) {
|
|
return;
|
|
}
|
|
this.nav = n;
|
|
this.index=1;
|
|
this.getData()
|
|
},
|
|
getData(){
|
|
let postData = {
|
|
projectId: this.projectId,
|
|
infoType: this.infoType,
|
|
roleType: this.roleType
|
|
};
|
|
if (this.nav == 5) {
|
|
postData.activeName = 'zgcs'
|
|
} else {
|
|
postData.checkState = this.nav
|
|
}
|
|
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.loading = true;
|
|
this.$api.problemmodify.listSspProblemmodify(postData,this.size,this.index).then(d => {
|
|
this.loading = false;
|
|
this.total=d.total;
|
|
this.dataTable = (d.rows || []).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++;
|
|
})
|
|
},
|
|
loadData(infoType, roleType, selDate) {
|
|
this.selDate = selDate;
|
|
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 || [];
|
|
});
|
|
if(!this.$root.project){
|
|
return;
|
|
}
|
|
this.projectId = this.$root.project.id;
|
|
if (this.projectId == 0 && this.$root.projects.length > 1) {
|
|
this.projectId = this.$root.projects[1].id;
|
|
}
|
|
if (this.projectId > 0) {
|
|
this.doNav(0, true);
|
|
let postData = {
|
|
projectId: this.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;
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.problemmodify-list {
|
|
padding: 0 10px;
|
|
|
|
.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: 300px;
|
|
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% - 314px);
|
|
position: relative;
|
|
|
|
.sp-lbl {
|
|
display: inline-block;
|
|
color: aquamarine;
|
|
|
|
}
|
|
|
|
.text-timeout {
|
|
position: absolute;
|
|
right: -4px;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
display: block;
|
|
padding: 20px;
|
|
background: linear-gradient(-135deg, red, red 50%, transparent 50%, transparent 100%);
|
|
height: 50px;
|
|
width: 50px;
|
|
|
|
&::after {
|
|
content: "超时";
|
|
transform: rotate(45deg);
|
|
display: block;
|
|
position: absolute;
|
|
left: 42px;
|
|
top: 15px;
|
|
}
|
|
}
|
|
|
|
.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% - 100px);
|
|
vertical-align: top;
|
|
line-height: 24px;
|
|
white-space: break-spaces;
|
|
word-break: break-word;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |