From 58f8b7fb22b03e0a8830f2ba2816ef9beab000e9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 18 May 2026 08:48:25 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88iot=EF=BC=89=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20alert=20=E6=A8=A1=E5=9D=97=E7=9A=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E8=AF=84=E5=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/iot/alert/config/index.vue      |  62 ++------
 .../iot/alert/modules/alert-config-form.vue   |  11 +-
 .../src/views/iot/alert/record/index.vue      | 140 ++++++------------
 3 files changed, 68 insertions(+), 145 deletions(-)

diff --git a/apps/web-antd/src/views/iot/alert/config/index.vue b/apps/web-antd/src/views/iot/alert/config/index.vue
index 0f23562bc..b83176369 100644
--- a/apps/web-antd/src/views/iot/alert/config/index.vue
+++ b/apps/web-antd/src/views/iot/alert/config/index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AlertConfigApi } from '#/api/iot/alert/config';
+import type { AlertConfig } from '#/api/iot/alert/config';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
 
 import { message, Tag } from 'ant-design-vue';
 
@@ -25,54 +27,18 @@ function handleRefresh() {
   gridApi.query();
 }
 
-// 获取告警级别文本
-function getLevelText(level?: number) {
-  const levelMap: Record<number, string> = {
-    1: '提示',
-    2: '一般',
-    3: '警告',
-    4: '严重',
-    5: '紧急',
-  };
-  return level ? levelMap[level] || `级别${level}` : '-';
-}
-
-// 获取告警级别颜色
-function getLevelColor(level?: number) {
-  const colorMap: Record<number, string> = {
-    1: 'blue',
-    2: 'green',
-    3: 'orange',
-    4: 'red',
-    5: 'purple',
-  };
-  return level ? colorMap[level] || 'default' : 'default';
-}
-
-// 获取接收类型文本
-function getReceiveTypeText(type?: number) {
-  const typeMap: Record<number, string> = {
-    1: '站内信',
-    2: '邮箱',
-    3: '短信',
-    4: '微信',
-    5: '钉钉',
-  };
-  return type ? typeMap[type] || `类型${type}` : '-';
-}
-
 /** 创建告警配置 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑告警配置 */
-function handleEdit(row: AlertConfigApi.AlertConfig) {
+function handleEdit(row: AlertConfig) {
   formModalApi.setData(row).open();
 }
 
 /** 删除告警配置 */
-async function handleDelete(row: AlertConfigApi.AlertConfig) {
+async function handleDelete(row: AlertConfig) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -115,7 +81,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AlertConfigApi.AlertConfig>,
+  } as VxeTableGridOptions<AlertConfig>,
 });
 </script>
 
@@ -130,24 +96,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['告警配置']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:alert-config:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-
+      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
       <!-- 告警级别列 -->
       <template #level="{ row }">
-        <Tag :color="getLevelColor(row.level)">
-          {{ getLevelText(row.level) }}
+        <Tag>
+          {{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.level) }}
         </Tag>
       </template>
-
+      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
       <!-- 关联场景联动规则列 -->
       <template #sceneRules="{ row }">
         <span>{{ row.sceneRuleIds?.length || 0 }} 条</span>
       </template>
-
+      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
       <!-- 接收类型列 -->
       <template #receiveTypes="{ row }">
         <Tag
@@ -155,10 +122,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :key="index"
           class="mr-1"
         >
-          {{ getReceiveTypeText(type) }}
+          {{ getDictLabel(DICT_TYPE.IOT_ALERT_RECEIVE_TYPE, type) }}
         </Tag>
       </template>
-
       <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
@@ -167,6 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-config:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -174,6 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:alert-config:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue b/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
index 76172f8f5..2d41ee236 100644
--- a/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
+++ b/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import type { AlertConfigApi } from '#/api/iot/alert/config';
+// TODO @AI：是不是要简化成 form.vue？类似 system user form 的情况？
+// TODO @AI：整体风格，看看是不是要对齐下 system user form 的风格；
+import type { AlertConfig } from '#/api/iot/alert/config';
 
 import { computed, ref } from 'vue';
 
@@ -20,7 +22,7 @@ import { useFormSchema } from '../config/data';
 defineOptions({ name: 'IoTAlertConfigForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<AlertConfigApi.AlertConfig>();
+const formData = ref<AlertConfig>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['告警配置'])
@@ -47,7 +49,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as AlertConfigApi.AlertConfig;
+    const data = (await formApi.getValues()) as AlertConfig;
     try {
       await (formData.value?.id
         ? updateAlertConfig(data)
@@ -66,9 +68,10 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<AlertConfigApi.AlertConfig>();
+    const data = modalApi.getData<AlertConfig>();
     if (!data || !data.id) {
       // 新增时设置默认值
+      // TODO @AI：这里是不是不用默认值？status 在 data.ts 里默认就好了？
       await formApi.setValues({
         status: 0,
         sceneRuleIds: [],
diff --git a/apps/web-antd/src/views/iot/alert/record/index.vue b/apps/web-antd/src/views/iot/alert/record/index.vue
index 64ba6cfac..34c5d666c 100644
--- a/apps/web-antd/src/views/iot/alert/record/index.vue
+++ b/apps/web-antd/src/views/iot/alert/record/index.vue
@@ -1,110 +1,57 @@
 <script setup lang="ts">
+// TODO @AI：整体风格，是不是对齐现有的 antd 处理的：1）详情独立 modules；2）process 是不是要这样？还是做一个独立的界面出来？
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AlertRecord } from '#/api/iot/alert/record';
 
-import { h, onMounted, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, message, Modal, Popover, Tag } from 'ant-design-vue';
+import { Button, Input, message, Modal, Popover, Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAlertRecordPage, processAlertRecord } from '#/api/iot/alert/record';
-import { getSimpleDeviceList } from '#/api/iot/device/device';
-import { getSimpleProductList } from '#/api/iot/product/product';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'IoTAlertRecord' });
 
-const productList = ref<any[]>([]);
-const deviceList = ref<any[]>([]);
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-// 加载产品和设备列表
-async function loadData() {
-  productList.value = await getSimpleProductList();
-  deviceList.value = await getSimpleDeviceList();
-}
-
-// 获取告警级别文本
-function getLevelText(level?: number) {
-  const levelMap: Record<number, string> = {
-    1: '提示',
-    2: '一般',
-    3: '警告',
-    4: '严重',
-    5: '紧急',
-  };
-  return level ? levelMap[level] || `级别${level}` : '-';
-}
-
-// 获取告警级别颜色
-function getLevelColor(level?: number) {
-  const colorMap: Record<number, string> = {
-    1: 'blue',
-    2: 'green',
-    3: 'orange',
-    4: 'red',
-    5: 'purple',
-  };
-  return level ? colorMap[level] || 'default' : 'default';
-}
-
-// 获取产品名称
-function getProductName(productId?: number) {
-  if (!productId) return '-';
-  const product = productList.value.find((p: any) => p.id === productId);
-  return product?.name || '加载中...';
-}
-
-// 获取设备名称
-function getDeviceName(deviceId?: number) {
-  if (!deviceId) return '-';
-  const device = deviceList.value.find((d: any) => d.id === deviceId);
-  return device?.deviceName || '加载中...';
-}
-
-// 处理告警记录
-async function handleProcess(row: AlertRecord) {
+/** 处理告警记录 */
+function handleProcess(row: AlertRecord) {
+  const processRemark = ref('');
   Modal.confirm({
     title: '处理告警记录',
-    content: h('div', [
-      h('p', '请输入处理原因：'),
-      h('textarea', {
-        id: 'processRemark',
-        class: 'ant-input',
-        rows: 3,
-        placeholder: '请输入处理原因',
-      }),
-    ]),
+    content: () =>
+      h('div', { class: 'space-y-2' }, [
+        h('p', '请输入处理原因：'),
+        h(Input.TextArea, {
+          'value': processRemark.value,
+          'onUpdate:value': (val: string) => (processRemark.value = val),
+          'rows': 3,
+          'placeholder': '请输入处理原因',
+        }),
+      ]),
     async onOk() {
-      const textarea = document.querySelector(
-        '#processRemark',
-      ) as HTMLTextAreaElement;
-      const processRemark = textarea?.value || '';
-
-      if (!processRemark) {
+      if (!processRemark.value) {
         message.warning('请输入处理原因');
         throw new Error('请输入处理原因');
       }
-
       const hideLoading = message.loading({
         content: '正在处理...',
         duration: 0,
       });
       try {
-        await processAlertRecord(row.id as number, processRemark);
+        await processAlertRecord(row.id as number, processRemark.value);
         message.success('处理成功');
         handleRefresh();
-      } catch (error) {
-        console.error('处理失败:', error);
-        throw error;
       } finally {
         hideLoading();
       }
@@ -112,8 +59,12 @@ async function handleProcess(row: AlertRecord) {
   });
 }
 
-// 查看告警记录详情
+/** 查看告警记录详情 */
 function handleView(row: AlertRecord) {
+  const deviceMessageText =
+    row.deviceMessage && typeof row.deviceMessage === 'object'
+      ? JSON.stringify(row.deviceMessage, null, 2)
+      : row.deviceMessage || '-';
   Modal.info({
     title: '告警记录详情',
     width: 600,
@@ -124,14 +75,17 @@ function handleView(row: AlertRecord) {
       ]),
       h('div', [
         h('span', { class: 'font-semibold' }, '告警级别：'),
-        h('span', getLevelText(row.configLevel)),
+        h(
+          'span',
+          getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.configLevel) || '-',
+        ),
       ]),
       h('div', [
         h('span', { class: 'font-semibold' }, '设备消息：'),
         h(
           'pre',
           { class: 'mt-1 text-xs bg-gray-50 p-2 rounded' },
-          row.deviceMessage || '-',
+          deviceMessageText,
         ),
       ]),
       h('div', [
@@ -181,32 +135,29 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<AlertRecord>,
 });
 
-onMounted(() => {
-  loadData();
-});
+/** 把设备消息序列化成可读字符串 */
+function stringifyDeviceMessage(deviceMessage: any) {
+  if (!deviceMessage) {
+    return '';
+  }
+  return typeof deviceMessage === 'object'
+    ? JSON.stringify(deviceMessage, null, 2)
+    : String(deviceMessage);
+}
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="告警记录列表">
       <!-- 告警级别列 -->
+      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
       <template #configLevel="{ row }">
-        <Tag :color="getLevelColor(row.configLevel)">
-          {{ getLevelText(row.configLevel) }}
+        <Tag>
+          {{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.configLevel) }}
         </Tag>
       </template>
-
-      <!-- 产品名称列 -->
-      <template #product="{ row }">
-        <span>{{ getProductName(row.productId) }}</span>
-      </template>
-
-      <!-- 设备名称列 -->
-      <template #device="{ row }">
-        <span>{{ getDeviceName(row.deviceId) }}</span>
-      </template>
-
       <!-- 设备消息列 -->
+      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
       <template #deviceMessage="{ row }">
         <Popover
           v-if="row.deviceMessage"
@@ -215,7 +166,7 @@ onMounted(() => {
           :overlay-style="{ maxWidth: '600px' }"
         >
           <template #content>
-            <pre class="text-xs">{{ row.deviceMessage }}</pre>
+            <pre class="text-xs">{{ stringifyDeviceMessage(row.deviceMessage) }}</pre>
           </template>
           <Button size="small" type="link">
             <IconifyIcon icon="ant-design:eye-outlined" class="mr-1" />
@@ -224,7 +175,6 @@ onMounted(() => {
         </Popover>
         <span v-else class="text-gray-400">-</span>
       </template>
-
       <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
@@ -233,6 +183,7 @@ onMounted(() => {
               label: '处理',
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-record:process'],
               onClick: handleProcess.bind(null, row),
               ifShow: !row.processStatus,
             },
@@ -240,6 +191,7 @@ onMounted(() => {
               label: '查看',
               type: 'link',
               icon: ACTION_ICON.VIEW,
+              auth: ['iot:alert-record:query'],
               onClick: handleView.bind(null, row),
               ifShow: row.processStatus,
             },