feat: 进度修改

src/pages/ota/upgradeTask/components/details-drawer.vue

@@ -16,71 +16,45 @@
                 </div>
                 <div class="body">
                   <div class="info">
-                    <!-- <div class="item">
-                      <span class="label">设备sn:</span><span class="val">{{}}</span>
-                    </div> -->
                     <div class="item">
-                      <span class="label">状态:</span>
-                      <span class="val">{{ TaskStatus[item.node] ?? '未开始' }}</span>
+                      <span class="label" style="line-height: 32px">状态:</span>
+
+                      <span class="val">
+                        <template v-if="taskStatus[item.node]">
+                          <template v-if="item.node === 102">
+                            <el-progress
+                              style="flex: 1"
+                              :stroke-width="20"
+                              :percentage="item.subNode"
+                              :text-inside="true"
+                              :color="taskStatusColor[item.node]"
+                              ><div text></div
+                            ></el-progress>
+                          </template>
+                          <template v-else>
+                            <el-progress
+                              style="flex: 1"
+                              :stroke-width="20"
+                              :striped="![0, 1].includes(item.node)"
+                              :duration="20"
+                              striped-flow
+                              :text-inside="true"
+                              :percentage="100"
+                              :color="taskStatusColor[item.node]"
+                              ><div text></div
+                            ></el-progress>
+                          </template>
+                          <span class="text">{{ taskStatus[item.node] }}</span>
+                        </template>
+
+                        <span v-else>{{ taskStatus[item.node] ?? '未开始' }}</span>
+                      </span>
                     </div>
                     <div class="item" v-if="item.node === 1">
                       <span class="label">原因:</span
                       ><span class="val">{{ item.reason }}</span>
                     </div>
                   </div>
-                  <div class="progress" v-if="!isEmpty(item.node)">
-                    <el-progress
-                      type="circle"
-                      v-if="item.node === 0"
-                      :percentage="100"
-                      :stroke-width="10"
-                      color="#16a34a"
-                    >
-                      <div class="progress-content" style="color: #16a34a">
-                        <div>
-                          <Icon icon="mingcute:check-fill" :size="20" />
-                        </div>
-                        <span class="percentage-label">升级成功</span>
-                      </div>
-                    </el-progress>
-                    <el-progress
-                      type="circle"
-                      v-if="item.node === 1"
-                      :percentage="100"
-                      :stroke-width="10"
-                      color="#ef4444"
-                    >
-                      <div class="progress-content" style="color: #ef4444">
-                        <div>
-                          <Icon icon="mingcute:close-fill" :size="20" />
-                        </div>
-                        <span class="percentage-label">升级失败</span>
-                      </div>
-                    </el-progress>
-                    <el-progress
-                      type="circle"
-                      v-if="item.node === 2"
-                      :percentage="item.subNode"
-                      :stroke-width="10"
-                      color="#3b82f6"
-                    />
-                    <el-progress
-                      type="circle"
-                      v-if="item.node === 3"
-                      :percentage="item.subNode"
-                      :stroke-width="10"
-                      color="#f97316"
-                      :indeterminate="true"
-                    />
-                    <el-progress
-                      type="circle"
-                      v-if="item.node === 4"
-                      :percentage="item.subNode"
-                      :stroke-width="10"
-                      color="#10b981"
-                      :duration="6"
-                    />
-                  </div>
                 </div>
               </div>
             </template>
@@ -94,15 +68,31 @@
 <script setup lang="ts">
 import { isResError } from '@/hooks/useMessage'
 import { getTaskDetails } from '@/api/module/eam/device/task'
-import { isEmpty } from '@/utils/is'
-import Icon from '@/components/dashboard/Icon/src/Icon.vue'
-enum TaskStatus {
-  '升级成功',
-  '升级失败',
-  '接收中...',
-  '校验中...',
-  '升级中...',
+
+const taskStatus = {
+  0: '升级成功',
+  1: '升级失败',
+  102: '接收中...',
+  103: '校验中...',
+  104: '升级中...',
+  200: '安装中...',
+  201: '校验md5中...',
+  202: '文件解压中...',
+  203: '安装中...',
 }
+
+const taskStatusColor = {
+  0: '#4CAF50',
+  1: '#F44336',
+  102: '#FFC107',
+  103: '#2196F3',
+  104: '#FF9800',
+  200: '#8BC34A',
+  201: '#03A9F4',
+  202: '#9C27B0',
+  203: '#00BCD4',
+}
+
 interface Props {
   rowData: any
   taskMap: any
@@ -112,7 +102,14 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const isShow = defineModel<boolean>()
 
-const deviceDetails = ref<any>([])
+interface DeviceDetail {
+  deviceSn: string
+  node: keyof typeof taskStatus
+  subNode?: number
+  reason?: string
+}
+
+const deviceDetails = ref<DeviceDetail[]>([])
 async function loadData() {
   const res = await getTaskDetails(props.rowData.id)
   if (!isResError(res)) {
@@ -207,6 +204,9 @@ defineExpose({
           flex: 1;
           .info {
             flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
           }
           .progress {
             width: 128px;
@@ -224,14 +224,30 @@ defineExpose({
             column-gap: 8px;
             align-items: center;
             .label {
+              height: 100%;
               color: var(--label-color);
             }
+            :deep(.el-progress-bar__inner) {
+              text-align: center;
+            }
+            :deep(.el-progress-bar__innerText) {
+              font-size: 16px;
+            }
             .val {
               word-wrap: break-word;
               word-break: break-all;
               white-space: normal;
               flex: 1;
               color: var(--station-info-val-text);
+              position: relative;
+              .text {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                color: #fff;
+                font-weight: 800;
+                transform: translate(-60%, -50%);
+              }
             }
           }
         }