fix:添加设备告警 换图标 设备告警详情 状态流程 按钮权限

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

@@ -0,0 +1,107 @@
+<template>
+  <a-steps direction="vertical" :current="size">
+    <template v-for="(item, index) in dataSource" :key="index">
+      <a-step>
+        <template #icon>
+          <img :style="{ width: item.status === '2' ? '19px' : '20px' }" :src="getSrc(item)" />
+        </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>
+            <div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
+              工单已完成并通过验收</div
+            >
+          </div>
+        </template>
+      </a-step>
+    </template>
+  </a-steps>
+</template>
+
+<script lang="ts" setup>
+  import { toRefs } from 'vue';
+
+  type Props = {
+    dataSource: any;
+    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);
+
+  defineExpose({});
+</script>
+<style lang="less" scoped>
+  .ant-steps-vertical {
+    margin-left: 20px;
+    margin-top: 10px;
+  }
+  :deep(.ant-steps-item-tail) {
+    position: absolute !important;
+    top: -10px !important;
+    left: 16px !important;
+    width: 1px !important;
+    height: 150% !important;
+  }
+  :deep(.ant-steps-item) {
+    margin-top: 20px !important;
+  }
+</style>