修改处理进展样式

src/views/modules/events/item-close-detail-view.vue

@@ -54,27 +54,46 @@
           <div class="project-progress-tip">处理进展</div>
             <el-timeline>
                 <el-timeline-item
-                        v-for="(activity, index) in this.dataForm.handleProgressResultDTOS"
-                        :key="index"
-                        :icon="activity.icon"
-                        :type="activity.type"
-                        :color="index === 0 ? 'green' : activity.itemDeptDTOS.length > 0 ? 'red' : '#ccc'"
-                        :size="activity.size">
-                        <div style="line-height: 25px;">
-                          <div v-if="activity.itemDeptDTOS.length > 0">{{activity.createdTime}} <span style="font-weight: bold;color: #606266">{{'【吹哨】'}}</span></div>
-                          <div v-else-if="activity.itemDeptDTOS.length <= 0 && activity.progressName !== '【审核通过】' && activity.progressName !== '【已关闭】' && activity.progressName !== '【已结案】'">{{activity.createdTime}} <span style="font-weight: bold;color: #606266">{{ '【回应】' }}</span></div>
-                          <div v-else>{{activity.createdTime}} <span style="font-weight: bold;color: #606266">{{activity.progressName}}</span></div>
-                          <div>处理部门： {{activity.handlerDept}}</div>
-                          <div v-if="activity.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
+                        v-for="(item, index) in timeLineList"
+                        :key="item.id"
+                        :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
+                        <!-- <div :id="`content${index}`"  x;">
+                          <div v-if="item.itemDeptDTOS.length > 0">{{item.createdTime}} <span style="font-weight: bold;color: #606266">{{'【吹哨】'}}</span></div>
+                          <div v-else-if="item.itemDeptDTOS.length <= 0 && item.progressName !== '【审核通过】' && item.progressName !== '【已关闭】' && item.progressName !== '【已结案】'">{{item.createdTime}} <span style="font-weight: bold;color: #606266">{{ '【回应】' }}</span></div>
+                          <div v-else>{{item.createdTime}} <span style="font-weight: bold;color: #606266">{{item.progressName}}</span></div>
+                          <div>处理部门： {{item.handlerDept}}</div>
+                          <div v-if="item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
                             <div>吹哨部门：</div>
                             <div>
-                              <span v-for="(csDept, index1) in activity.itemDeptDTOS" :key="index1" :size="csDept.size">
+                              <span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1" :size="csDept.size">
                               {{ csDept.deptName }}<br/>
                             </span>
                             </div>
                           </div>
-                          <div>处理意见： {{activity.advice}}</div>
+                          <div>处理意见： {{item.advice}}</div>
+                        </div> -->
+                        <div :id="`content${index}`" style="line-height:25px; ">
+                          <div
+                            :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+                            v-if="item.type !== 'init'">
+                            {{item.type === 'project' ? '项目': item.type === 'issue' ? '议题' : ''}}
+                          </div>
+                          <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
+                          <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
+                          <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
+                            <div><span style="font-weight: bold; color: rgb(96, 98, 102);">吹哨部门：</span> </div>
+                            <div>
+                              <span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
+                              {{ csDept.deptName }}<br/>
+                            </span>
+                            </div>
+                          </div>
+                          <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span>  {{item.advice}}</div>
+                          <div style="display: flex;">
+                            <img style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;" v-for="img of item.images" :key="img" :src="img" alt="处理图片">
+                          </div>
                         </div>
+
                 </el-timeline-item>
             </el-timeline>
         </div>
@@ -134,13 +153,38 @@ export default {
       pageIndex: 1,
       limitVal: 10,
       total: 0,
-      commentsDTOs: []
+      commentsDTOs: [],
+      timeLineList: []
     }
   },
   mounted () {
     this.dataForm.id = this.$route.query.id
     this.init()
   },
+  filters: {
+    formatState (item) {
+      console.log(item)
+      if (item.type === 'project') {
+        if (item.state === '0' && item.itemDeptDTOS.length > 0) {
+          return '吹哨'
+        } else if (item.state === '0' && item.itemDeptDTOS.length === 0) {
+          return '回应'
+        } else if (item.state === '5') {
+          return '关闭'
+        } else if (item.state === '10') {
+          return '结案'
+        }
+      } else if (item.type === 'issue' || item.type === 'init') {
+        if (item.state === '0') {
+          return '审核通过'
+        } else if (item.state === '1') {
+          return '回应'
+        } else if (item.state === '2') {
+          return '关闭'
+        }
+      }
+    }
+  },
   methods: {
     back () {
       this.$parent.init()
@@ -190,6 +234,35 @@ export default {
           ...this.dataForm,
           ...res.data
         }
+        this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'issue'
+          } else {
+            item.type = 'project'
+          }
+        })
+        this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'init'
+          } else {
+            item.type = 'issue'
+          }
+        })
+        const issueList = this.dataForm.issueProgressResultDTOS.reverse()
+        this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...issueList]
+        console.log('timelinelist', this.timeLineList)
+        this.$nextTick(() => {
+          this.timeLineList.forEach((item, index) => {
+            const oDiv = document.getElementById(`content${index}`)
+            const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
+            console.log(111)
+            if (item.type === 'issue') {
+              oBorder.style.borderLeft = '1px solid #ffa546'
+            } else if (item.type === 'project') {
+              oBorder.style.borderLeft = '1px solid #009688'
+            }
+          })
+        })
         this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
       }).catch(() => {})
     },

vue.config.js

@@ -10,8 +10,8 @@ module.exports = {
     open: true,
     port: 8001,
     overlay: {
-      errors: true,
-      warnings: true
+      errors: false,
+      warnings: false
     }
   },
   chainWebpack: config => {