update code

src/pages/components/ProblemmodifyDetail.vue

@@ -43,14 +43,16 @@
 
             </div>
             <div class="data-list scroll" style="max-height:712px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;">
-                <div v-for="(it, idx) in dataTable" :key="idx" class="data-item" :class="it.checkState!=4 && it.timeout?'time-out':''">
+                <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: 200px; height: 100px" :preview-src-list="[it.marksPicture]"
                             :src="it.marksPicture + '.min.jpg'">
                         </el-image>
                     </div>
                     <div class="item-right">
-                        <div v-if="it.checkState!=4 && it.timeout" class="text-timeout">超时</div>
+                        <div v-if="it.timeout" 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">{{ getDangerType(it.dangerType) }}</div>
@@ -67,10 +69,25 @@
                             <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">抄送人:</span>
                             <div class="div-text">{{ it.copySend }}</div>
                         </el-col>
-                        <el-col :span="8" class="item-data" v-if="1==2">
+                        <template v-if="it.checkState==4">
-                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">流程状态:</span>
+                            <el-col :span="12" class="item-data">
-                            <div class="div-text">{{ getCheckState(it.checkState) }}</div>
+                            <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>
+                        <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.updateTime | formatDate('YYYY-MM-DD') }}</div>
+                        </el-col>
+                        </template>
+                        <template v-else>
                         <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.createBy }}</div>
@@ -83,6 +100,7 @@
                             <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 }}
@@ -156,7 +174,15 @@ export default {
             }
             this.$api.problemmodify.listSspProblemmodify(postData).then(d => {
                 this.dataTable = (d.data || []).map(it => {                    
-                    if(it.nickedTime){
+                    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) {
@@ -193,6 +219,9 @@ export default {
                 projectId: this.row.projectId,
                 infoType: this.infoType
             }).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;
@@ -234,6 +263,7 @@ export default {
                 padding: 0px 48px;
             }
         }
+
         .item-data {
             line-height: 64px;
             font-size: 32px;
@@ -255,10 +285,12 @@ export default {
                 padding: 0px 30px;
             }
         }
+
         .item-data {
             line-height: 48px;
             font-size: 24px;
             line-height: 48px;
+
             .div-text {
                 line-height: 48px;
             }
@@ -284,15 +316,32 @@ export default {
             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: 200px;
                 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;
@@ -304,6 +353,7 @@ export default {
                     color: aquamarine;
 
                 }
+
                 .text-timeout {
                     position: absolute;
                     right: 0px;