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 | 285 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 233 insertions(+), 52 deletions(-)
diff --git a/src/components/solveProblem/index.vue b/src/components/solveProblem/index.vue
index 8f20c92..8cd43ad 100644
--- a/src/components/solveProblem/index.vue
+++ b/src/components/solveProblem/index.vue
@@ -1,74 +1,255 @@
<template>
<div class="sovle-problem">
<div class="sovle-header">
- <div class="sovle-limit">澶勭悊鏃堕檺:{{}}</div>
- <div class="sovle-limit">鍓╀綑鏃堕棿:23灏忔椂</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.name === '娲鹃仯' ? '娲鹃仯鍛�':item.name === '澶勭悊' ? '澶勭悊浜�':'璇勫畾浜�'}}:{{item.disposeRecords[0].handleId}}</div>
- <div class="title-right">{{item.disposeRecords[0].endTime}}</div>
+ <div class="title-left">銆恵{item.name}}銆戝鐞嗕汉: {{item.disposeRecords && item.disposeRecords.length
+ != 0 ? item.disposeRecords[0].handlerText:''}}
+ </div>
+ <div class="title-right">{{item.disposeRecords.length !==0 ?
+ filterTime(item.disposeRecords[0].endTime):''}}
+ </div>
</div>
- <div class="message">銆恵{item.name === '娲鹃仯' ? '娲鹃仯鎰忚':item.name === '澶勭悊' ? '澶勭悊缁撴灉':'璇勫畾缁撴灉'}}銆戣鐩稿叧鎵ф硶闃熷憳鍙婃椂鍓嶅線鐜板満杩涜澶勭疆</div>
- </el-timeline-item>
- <!-- <el-timeline-item :color="mycolor">
- <div class="title">
- <div class="title-left">銆愬鐞嗐�戝鐞嗕汉:xxx</div>
- <div class="title-right">22.09.06 16:40</div>
- </div>
- <div class="message">銆愬鐞嗙粨鏋溿�戣鐩稿叧鎵ф硶闃熷憳鍙婃椂鍓嶅線鐜板満杩涜澶勭疆</div>
+ <div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
</el-timeline-item>
- <el-timeline-item :color="mycolor">
- <div class="title">
- <div class="title-left">銆愯瘎瀹氥�戣瘎瀹氫汉:xxx</div>
- <div class="title-right">22.09.06 16:40</div>
- </div>
- <div class="message">銆愯瘎瀹氱粨鏋溿�戣鐩稿叧鎵ф硶闃熷憳鍙婃椂鍓嶅線鐜板満杩涜澶勭疆</div>
- </el-timeline-item> -->
- </el-timeline>
+ </el-timeline> -->
+ </div>
</div>
</div>
-</template>
+</template>
<script>
- export default{
- data(){
- return{
- mycolor:'#02a7f0',
- list:[]
+import helper from '@/utils/mydate'
+import { computeTime } from '@/utils/helper'
+export default {
+ data() {
+ return {
+ active: 0,
+ mycolor: '#02a7f0',
+ list: [],
+ dispatchInfo: {},
+ }
+ },
+ props: ['handlePassVo', 'baseCase'],
+ created() {
+ const { handlePassVo: mylist, baseCase } = this;
+ console.log(baseCase, mylist);
+ if (mylist) {
+ this.list = mylist.workflowConfigSteps;
+ }
+ 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 '銆愭淳閬ｆ剰瑙併��'
+ } else if (name === '澶勭悊') {
+ return '銆愬鐞嗙粨鏋溿��'
+ } else if (name === '鏍告煡') {
+ return '銆愭牳鏌ョ粨鏋溿��'
+ } else if (name === '缁撴') {
+ return '銆愯瘎瀹氱粨鏋溿��'
}
+ return
},
- props:['problemProVo'],
- created(){
- const {problemProVo:{workflowConfigSteps:mylist}} = this;
- console.log(mylist);
- this.list = mylist;
- }
+ // 澶勭悊鏃堕棿
+ filterTime(time) {
+ if (time) {
+ return helper(time)
+ } else {
+ return
+ }
+
+ },
+ // 鑾峰緱鍓╀綑鏃堕棿
+ getRestTime(limitTime) {
+ if (limitTime) {
+ return computeTime(limitTime)
+ }
+ return
+ }
}
+}
</script>
<style lang="scss" scoped>
- .sovle-problem{
- .sovle-header{
- padding: 0 200px;
- display: flex;
- line-height: 60px;
- justify-content: space-between;
+.sovle-problem {
+
+ padding-top: 20px;
+ .sovle-header {
+ padding: 0 40px;
+ display: flex;
+ line-height: 60px;
+ justify-content: space-between;
+ }
+
+ .title {
+ display: flex;
+ justify-content: space-between;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #4b9bb7;
+ font-size: 16px;
+ }
+
+ .message {
+ padding: 20px;
+ color: #666;
+ line-height: 20px;
+ 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;
+ }
}
- .title{
+
+
+ }
+
+ .my-pro-main {
+ margin-top: 30px;
+ margin-left: -50px;
+ .pro-step-ver {
display: flex;
- justify-content: space-between;
- line-height: 40px;
- padding: 0 20px;
- color: #4b9bb7;
- font-size: 16px;
+ align-items: flex-start;
+ .line {
+ width: 2px;
+ height: 100px;
+ }
}
- .message{
- padding: 20px;
- background-color: #070f22;
- color: #4b9bb7;
- line-height: 20px;
- font-size: 10px;
+ .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