fix:简化ns-step组件 设备告警样式 设备告警 能源告警 添加字段

hx-ai-intelligent/src/components/ns-steps.vue

@@ -3,40 +3,17 @@
     <template v-for="(item, index) in dataSource" :key="index">
       <a-step>
         <template #icon>
-          <img :style="{ width: item.status === '2' ? '19px' : '20px' }" :src="getSrc(item)" />
+          <ns-icon size="20" :name="item.src" />
         </template>
         <template #description>
-          <div
-            style="
-              width: 400px;
-              min-height: 0px;
-              background-color: #f8fafc;
-              margin-left: 20px;
-              border-radius: 4px; /* 设置圆角半径 */
-              padding: 12px;
-            ">
-            <div style="width: 100%; height: 30px; display: flex; position: relative">
-              <a-tag
-                style="width: 60px; height: 20px; text-align: center"
-                :color="getColor(item)"
-                >{{ getStatus(item) }}</a-tag
-              >
-              <div
-                style="
-                  position: absolute;
-                  left: 35%;
-                  top: -2px;
-                  transform: translateX(-50%);
-                  color: #3a3a3a;
-                "
-                >{{ item.name }}</div
-              >
-              <div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
-                >2024-03-11 11:30:06</div
-              >
+          <div class="card">
+            <div class="card-title">
+              <a-tag class="card-title-tag" :color="item.color">{{ item.statusName }}</a-tag>
+              <div class="name">{{ item.name }}</div>
+              <div class="time">{{ item.time }}</div>
             </div>
             <div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
-              工单已完成并通过验收</div
+              {{ item.desc }}</div
             >
           </div>
         </template>
@@ -53,37 +30,6 @@
     size: any;
   };
   const props = withDefaults(defineProps<Props>(), {});
-  const getColor = (item: any) => {
-    switch (item.status) {
-      case '0':
-        return '#ff7602';
-      case '1':
-        return '#00a1e6';
-      case '2':
-        return '#04d919';
-      case '3':
-        return '#d9001b';
-      case '4':
-        return '#a6a6a6';
-    }
-  };
-  const getSrc = (item: any) => {
-    return '../../../../src/icon/status-' + item.status + '.svg';
-  };
-  const getStatus = (item: any) => {
-    switch (item.status) {
-      case '0':
-        return '待处理';
-      case '1':
-        return '处理中';
-      case '2':
-        return '已完成';
-      case '3':
-        return '超时';
-      case '4':
-        return '已关闭';
-    }
-  };
   const { dataSource } = toRefs(props);
   const { size } = toRefs(props);
 
@@ -94,6 +40,38 @@
     margin-left: 20px;
     margin-top: 10px;
   }
+  .card {
+    width: 400px;
+    min-height: 0px;
+    background-color: #f8fafc;
+    margin-left: 20px;
+    border-radius: 4px; /* 设置圆角半径 */
+    padding: 12px;
+    .card-title {
+      width: 100%;
+      height: 30px;
+      display: flex;
+      position: relative;
+      .card-title-tag {
+        width: 60px;
+        height: 20px;
+        text-align: center;
+      }
+    }
+  }
+  .name {
+    position: absolute;
+    left: 35%;
+    top: -2px;
+    transform: translateX(-50%);
+    color: #3a3a3a;
+  }
+  .time {
+    position: absolute;
+    right: 10px;
+    top: -2px;
+    color: #ff7602;
+  }
   :deep(.ant-steps-item-tail) {
     position: absolute !important;
     top: -10px !important;