From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选

---
 src/components/solveProblem/index.vue |  166 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 158 insertions(+), 8 deletions(-)

diff --git a/src/components/solveProblem/index.vue b/src/components/solveProblem/index.vue
index 99f2fbf..8cd43ad 100644
--- a/src/components/solveProblem/index.vue
+++ b/src/components/solveProblem/index.vue
@@ -1,11 +1,42 @@
 <template>
     <div class="sovle-problem">
         <div class="sovle-header">
-            <div class="sovle-limit">澶勭悊鏃堕檺:{{dispatchInfo.disposeDate}}</div>
-            <div class="sovle-limit">鍓╀綑鏃堕棿:{{getRestTime(dispatchInfo.disposeDate)}}</div>
+            <div class="sovle-limit">
+                澶勭悊鏃堕棿:{{ dispatchInfo.createTime }}
+            </div>
+            <div class="sovle-limit">
+                鍓╀綑鏃堕棿:{{ getRestTime(dispatchInfo.disposeDate) || '鏈檺鍒�' }}
+            </div>
         </div>
-        <div class="sovle-timeline">
-            <el-timeline >
+        <div class="my-process">
+            <div class="my-pro-header">
+                <el-steps :space="260" :active="active" align-center>
+                    <el-step v-for="item in list" :key="item.name">
+                        <template slot="title">
+                            <div>
+                                銆恵{ item.name }}銆�
+                                {{
+                                    item.disposeRecords &&
+                                    item.disposeRecords.length != 0
+                                        ? item.disposeRecords[0].handlerText
+                                        : ''
+                                }}
+                            </div>
+                        </template>
+                        <template slot="description">
+                            <div>
+                                {{
+                                    item.disposeRecords &&
+                                    item.disposeRecords.length != 0
+                                        ? item.disposeRecords[0].result
+                                        : ''
+                                }}
+                            </div>
+                        </template>
+                    </el-step>
+                </el-steps>
+
+                <!-- <el-timeline >
                 <el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
                     <div class="title">
                         <div class="title-left">銆恵{item.name}}銆戝鐞嗕汉: {{item.disposeRecords && item.disposeRecords.length
@@ -17,7 +48,8 @@
                     </div>
                     <div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
                 </el-timeline-item>
-            </el-timeline>
+            </el-timeline> -->
+            </div>
         </div>
     </div>
 </template> 
@@ -27,6 +59,7 @@
 export default {
     data() {
         return {
+            active: 0,
             mycolor: '#02a7f0',
             list: [],
             dispatchInfo: {},
@@ -42,18 +75,29 @@
         if (baseCase.dispatchInfo) {
             this.dispatchInfo = baseCase.dispatchInfo;
         }
+        if (baseCase.state === 6) {
+            this.active = 1;
+        } else if (baseCase.state === 7) {
+            this.active = 2;
+        } else if (baseCase.state === 8) {
+            this.active = 3;
+        } else if (baseCase.state === 9) {
+            this.active = 4;
+        } else {
+            this.active = 0;
+        }
     },
     methods: {
         // 鑾峰緱鎰忚
         filterPerson(name) {
             const { dispatchInfo } = this;
             if (name === '璋冨害') {
-                return '銆愭淳閬f剰瑙併��' 
+                return '銆愭淳閬f剰瑙併��'
             } else if (name === '澶勭悊') {
                 return '銆愬鐞嗙粨鏋溿��'
-            }else if (name === '鏍告煡') {
+            } else if (name === '鏍告煡') {
                 return '銆愭牳鏌ョ粨鏋溿��'
-            }  else if (name === '缁撴') {
+            } else if (name === '缁撴') {
                 return '銆愯瘎瀹氱粨鏋溿��'
             }
             return
@@ -79,6 +123,8 @@
 </script>
 <style lang="scss" scoped>
 .sovle-problem {
+    
+    padding-top: 20px;
     .sovle-header {
         padding: 0 40px;
         display: flex;
@@ -102,4 +148,108 @@
         font-size: 12px;
     }
 }
+.my-process {
+    padding-top: 20px;
+    .my-pro-header {
+        padding: 0 30px;
+        line-height: 1;
+
+        .pro-step {
+            flex: 1;
+
+            .pro-step-top {
+                display: flex;
+                align-items: center;
+
+                .line {
+                    flex: 1;
+                    height: 2px;
+                }
+            }
+
+            .pro-step-name {
+                line-height: 20px;
+            }
+        }
+
+        
+    }
+
+    .my-pro-main {
+        margin-top: 30px;
+        margin-left: -50px;
+        .pro-step-ver {
+            display: flex;
+            align-items: flex-start;
+            .line {
+                width: 2px;
+                height: 100px;
+            }
+        }
+        .pro-step-top {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .pro-step-name {
+            width: 120px;
+            line-height: 24px;
+            margin-right: 10px;
+            text-align: right;
+        }
+        .desc {
+            flex: 1;
+            line-height: 24px;
+            margin-left: 10px;
+            // color: #4b9bb7;
+            .desc-content-endtime {
+                display: flex;
+                justify-content: flex-end;
+                padding-right: 50px;
+            }
+        }
+    }
+
+    .circle {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #fff;
+        border: 2px solid #808080;
+    }
+
+    .line {
+        background-color: #c0c4cc;
+    }
+    .in-process {
+        color: #0079fe;
+    }
+    .in-process__circle {
+        border: 2px solid #0079fe;
+    }
+    .finish-line {
+        background-color: #0079fe;
+    }
+    .finish {
+        border: 2px solid #4b9bb7;
+    }
+    .finish-name {
+        color: #4b9bb7;
+    }
+    .desc-content-message {
+        color: #666;
+    }
+}
+::v-deep .el-step__title {
+    font-size: 18px;
+    padding: 10px 0;
+}
+::v-deep .el-step__title.is-process {
+    color: #5388f1;
+}
+
+::v-deep .el-step__description{
+    font-size: 14px;
+}
+
 </style>
\ No newline at end of file

--
Gitblit v1.8.0