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