From 3522e525ab25d9a9d7b49554c811ec729fcaea4e Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 06 十一月 2023 14:46:32 +0800
Subject: [PATCH] feat: 添加步骤条组件
---
src/views/dashboard/components/TaskStep.vue | 71 +++++++++++++++++++++++++++++++++++
src/views/dashboard/components/ProcessingInfo.vue | 21 +++-------
src/views/dashboard/index.vue | 12 +-----
3 files changed, 80 insertions(+), 24 deletions(-)
diff --git a/src/views/dashboard/components/ProcessingInfo.vue b/src/views/dashboard/components/ProcessingInfo.vue
index 276eb7f..fe317d6 100644
--- a/src/views/dashboard/components/ProcessingInfo.vue
+++ b/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>
diff --git a/src/views/dashboard/components/TaskStep.vue b/src/views/dashboard/components/TaskStep.vue
new file mode 100644
index 0000000..b9f02b6
--- /dev/null
+++ b/src/views/dashboard/components/TaskStep.vue
@@ -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>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 6ab459c..af278ea 100644
--- a/src/views/dashboard/index.vue
+++ b/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 = [
--
Gitblit v1.8.0