优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

 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>