feat: 添加步骤条组件

songshankun

2023-11-06 3522e525ab25d9a9d7b49554c811ec729fcaea4e

feat: 添加步骤条组件

 src/views/dashboard/components/ProcessingInfo.vue

@@ -1,14 +1,7 @@
<template>
  <div class="processing-info">
    <div class="step">
      <el-steps
        v-if="task?.AllProcedures"
        :active="task.CurrentProcedureIndex ?? 0"
        finish-status="success"
        class="steps"
      >
        <el-step v-for="(item, index) in task.AllProcedures" :key="index" icon="" :title="item"></el-step>
      </el-steps>
      <TaskStep :active="task?.CurrentProcedureIndex ?? 0" :steps="task?.AllProcedures ?? []"></TaskStep>
    </div>
    <div class="details">
      <div class="row">
@@ -55,14 +48,12 @@
<script setup lang="ts">
// 加工信息组件
import type { Task } from '@/api/task'
import { computed, onUnmounted, toRefs, watch } from 'vue'
import { computed, toRefs } from 'vue'
import { useDateFormat } from '@vueuse/core'
import { useRequest } from 'vue-hooks-plus'
import { getProductProgress } from '@/api'
import type { ProductProgressParams } from '@/api'
import { isNumber } from 'lodash-es'
import { CHANNEL_NAME_MAP } from '@/common/constants'
import { usePLCStore } from '@/stores/plc'
import TaskStep from '@/views/dashboard/components/TaskStep.vue'

const props = defineProps<{
  task?: Task
@@ -133,9 +124,8 @@

.step {
  width: 100%;
  height: 66px;
  height: 46px;
  overflow-x: auto;
  margin-top: -5px;
  padding: 0 20px;
  .steps {
    height: 100%;
@@ -184,4 +174,7 @@
:deep(.el-progress-bar__inner) {
  border-radius: 8px;
}
:deep(.el-step__icon .is-icon) {
  background-color: transparent;
}
</style>

 src/views/dashboard/components/TaskStep.vue

New file
@@ -0,0 +1,71 @@
<template>
  <div class="task-step">
    <div v-for="(item, index) in props.steps" :key="index" class="task-step-item" :style="{ 'flex-basis': flexBasis }">
      <el-icon v-if="index + 1 < active" class="icon" size="22" color="#01f304"><CircleCheck /></el-icon>

      <el-icon v-if="index + 1 === active" class="icon" size="22" color="#c25915"><Clock /></el-icon>
      <el-icon v-if="index + 1 > active" class="icon" size="22" color="#7d7f83"><Clock /></el-icon>
      <span class="text" :class="{ green: index + 1 < active, red: index + 1 === active, gray: index + 1 > active }">
        {{ item }}
      </span>
      <span class="line"></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CircleCheck, Clock } from '@element-plus/icons-vue'
import { computed } from 'vue'

export interface TaskStepProps {
  active: number
  steps: string[]
}
const props = defineProps<TaskStepProps>()

const flexBasis = computed(() => {
  if (props.steps.length) {
    return `${Math.floor((1 / props.steps.length) * 100)}%`
  }
  return '0'
})
</script>
<style scoped lang="scss">
.task-step {
  display: flex;
  align-items: center;
}
.task-step-item {
  display: flex;
  align-items: center;
  flex: 1;
  &:last-child {
    flex-basis: auto !important;
    flex-shrink: 0;
    flex-grow: 0;
    & > .line {
      display: none;
    }
  }
  .icon {
    margin-right: 6px;
  }
  .green {
    color: #01f304;
  }
  .red {
    color: #c25915;
  }
  .gray {
    color: #7d7f83;
  }
}
.text {
  flex-shrink: 0;
}
.line {
  display: inline-block;
  height: 1px;
  background-color: #fff;
  width: 100%;
}
</style>

 src/views/dashboard/index.vue

@@ -68,9 +68,9 @@
  <MaterialDetails v-model="showMaterialDetail" :material="currentMaterialInfo"></MaterialDetails>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker, Order, Task, Material } from '@/api/task'
import type { Task, Material } from '@/api/task'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import ColorInfo from '@/views/dashboard/components/ColorInfo.vue'
@@ -103,14 +103,6 @@
const taskStore = useTasksStore()
const workers = computed(() => {
  return taskStore.activeTask?.Procedure?.procedure?.workers ?? []
})

const order = computed(() => {
  return {
    finishNumber: 0,
    unit: '个',
    amount: '10'
  } as unknown as Order
})

const taskTabsList = [