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

hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue

@@ -8,16 +8,81 @@
     :cancel="handleClose"
     placement="right"
     @close="handleClose">
-    状态
+    <a-tabs>
+      <a-tab-pane key="1" tab="更新状态">Content of Tab Pane 1</a-tab-pane>
+      <a-tab-pane key="2" tab="状态流程">
+        <!-- <a-steps direction="vertical" :current="4">
+          <template v-for="index in 4">
+            <a-step>
+              <template #icon>
+                <img src="../../../../src/icon/status-off.svg" />
+              </template>
+              <template #description>
+                <div
+                  style="
+                    width: 400px;
+                    min-height: 40px;
+                    background-color: #f8fafc;
+                    margin-left: 20px;
+                    border-radius: 4px; /* 设置圆角半径 */
+                    padding: 12px;
+                  ">
+                  <div style="width: 100%; height: 40px; display: flex; position: relative">
+                    <a-tag style="width: 60px; height: 20px; text-align: center" color="#04d919"
+                      >已完成</a-tag
+                    >
+                    <div
+                      style="
+                        position: absolute;
+                        left: 30%;
+                        top: -2px;
+                        transform: translateX(-50%);
+                        color: #3a3a3a;
+                      "
+                      >李四</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"> 工单已完成并通过验收 </div>
+                </div>
+              </template>
+            </a-step>
+          </template>
+        </a-steps> -->
+        <NsSteps v-bind="config" />
+      </a-tab-pane>
+    </a-tabs>
+    <template #footer>
+      <a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button>
+      <a-button type="primary" @click="btnClick">确定</a-button>
+    </template>
   </ns-drawer>
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { ref } from 'vue';
+  import { ref, createVNode } from 'vue';
+  import NsSteps from '/@/components/ns-steps.vue';
+  import { NsMessage, NsModal } from '/nerv-lib/component';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 
   export default defineComponent({
+    components: { NsSteps },
+
     setup() {
       const visible = ref(false);
+      const logList = ref([
+        { name: '李四', status: '2' },
+        { name: '王五', status: '4' },
+        { name: '王五', status: '3' },
+        { name: '王五', status: '1' },
+        { name: '赵六', status: '0' },
+      ]);
+      const config = ref({
+        size: logList.value.length,
+        dataSource: logList.value,
+      });
       const handleClose = () => {
         visible.value = false;
       };
@@ -28,12 +93,42 @@
         console.log(data, 'data');
         visible.value = true;
       };
+      const createOrder = () => {
+        NsModal.confirm({
+          title: '提示',
+          icon: createVNode(ExclamationCircleOutlined),
+          content: '是否创建工单',
+          okText: '确认',
+          okType: 'primary',
+          cancelText: '取消',
+          onOk() {
+            NsModal.confirm({
+              title: '提示',
+              icon: createVNode(ExclamationCircleOutlined),
+              content: '工单创建成功，工单号xxxxxxxxx',
+              okText: '确认',
+              okType: 'primary',
+              cancelButtonProps: { style: { display: 'none' } }, // 正确设置取消按钮样式
+              onOk() {
+                console.log('创建工单');
+              },
+            });
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      };
       return {
         btnClick,
+        createOrder,
         visible,
+        logList,
+        config,
         handleClose,
         toggle,
       };
     },
   });
 </script>
+<style scoped lang="less"></style>