From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 21 一月 2024 20:54:49 +0800
Subject: [PATCH] 优化
---
src/components/process/index.vue | 280 +++++++++++++++++++++++++++++++------------------------
1 files changed, 157 insertions(+), 123 deletions(-)
diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index 376b98c..57a1383 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,15 +1,32 @@
<template>
- <div class="my-process">
- <div class="my-pro-header">
- <el-steps :space="260" :active="active" finish-status="success">
- <el-step
- v-for="item in list"
- :title="item.name"
- :key="item.title"
- ></el-step>
- </el-steps>
- </div>
- <div class="my-pro-main">
+ <div class="my-process">
+ <div class="my-pro-header">
+ <el-steps
+ :space="260"
+ :active="active"
+ align-center
+ >
+ <el-step
+ v-for="item in list"
+ :title="item.name"
+ :key="item.title"
+ >
+ <template slot="description">
+ <div>鐜妭鐢ㄦ椂锛�</div>
+ <div>
+ <i class="el-icon-time"></i>
+ {{
+ item.disposeRecords.length !== 0
+ ? item.disposeRecords[0].linkTime
+ : ''
+ }}
+ <!-- <span>day</span> -->
+ </div>
+ </template>
+ </el-step>
+ </el-steps>
+ </div>
+ <!-- <div class="my-pro-main">
<div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
<div
:class="[
@@ -72,136 +89,153 @@
</div>
</div>
</div>
+ </div> -->
</div>
- </div>
</template>
<script>
import helper from "@/utils/mydate";
export default {
- data() {
- return {
- active: 0,
- list: [],
- };
- },
- props: ["handlePassVo", "baseCase"],
- created() {
- const {
- handlePassVo: { workflowConfigSteps: mylist },
- baseCase: { state: mystate },
- } = this;
- if (mystate === 6) {
- this.active = 1;
- } else if (mystate === 7) {
- this.active = 2;
- } else if (mystate === 8) {
- this.active = 3;
- } else if (mystate === 9) {
- this.active = 4;
- } else {
- this.active = 0;
- }
- this.list = mylist;
- },
- methods: {
- filterTime(time) {
- if (time) {
- return helper(time);
- }
- return;
+ data() {
+ return {
+ active: 0,
+ list: [],
+ };
},
- },
+ props: ["handlePassVo", "baseCase"],
+ created() {
+ const {
+ handlePassVo: { workflowConfigSteps: mylist },
+ baseCase: { state: mystate },
+ } = this;
+ if (mystate === 6) {
+ this.active = 1;
+ } else if (mystate === 7) {
+ this.active = 2;
+ } else if (mystate === 8) {
+ this.active = 3;
+ } else if (mystate === 9) {
+ this.active = 4;
+ } else {
+ this.active = 0;
+ }
+ this.list = mylist;
+ },
+ methods: {
+ filterTime(time) {
+ if (time) {
+ return helper(time);
+ }
+ return;
+ },
+ },
};
</script>
<style lang="scss" scoped>
+// ::v-deep .el-step.is-horizontal .el-step__line {
+// border-top: 2px dashed #ccd1de;
+// height: 0;
+// background-color: transparent;
+// }
+::v-deep .el-step__title {
+ font-size: 20px;
+ padding: 10px 0;
+}
+::v-deep .el-step__title.is-process {
+ color: #5388f1;
+}
+
+::v-deep .el-step__description{
+ font-size: 14px;
+}
+
.my-process {
- padding-top: 50px;
- .my-pro-header {
- padding: 0 30px;
- line-height: 1;
+ padding-top: 50px;
+ .my-pro-header {
+ padding: 0 30px;
+ line-height: 1;
- .pro-step {
- flex: 1;
+ .pro-step {
+ flex: 1;
- .pro-step-top {
- display: flex;
- align-items: center;
+ .pro-step-top {
+ display: flex;
+ align-items: center;
- .line {
- flex: 1;
- height: 2px;
+ .line {
+ flex: 1;
+ height: 2px;
+ }
+ }
+
+ .pro-step-name {
+ line-height: 20px;
+ }
}
- }
+ }
- .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;
+ }
+ }
}
- }
- .my-pro-main {
- margin-top: 30px;
- margin-left: -50px;
- .pro-step-ver {
- display: flex;
- align-items: flex-start;
- .line {
- width: 2px;
- height: 100px;
- }
+ .circle {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #fff;
+ border: 2px solid #808080;
}
- .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;
- }
+ .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;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0