Просмотр исходного кода

feat:【IoT 物联网】完善告警配置表单,增加场景联动规则和接收用户的选择功能

YunaiV 9 месяцев назад
Родитель
Сommit
caab65d0e4

+ 5 - 0
src/api/iot/rule/scene/index.ts

@@ -26,5 +26,10 @@ export const RuleSceneApi = {
   // 删除场景联动
   deleteRuleScene: async (id: number) => {
     return await request.delete({ url: `/iot/rule-scene/delete?id=` + id })
+  },
+
+  // 获取场景联动简单列表
+  getSimpleRuleSceneList: async () => {
+    return await request.get({ url: `/iot/rule-scene/simple-list` })
   }
 }

+ 2 - 1
src/utils/dict.ts

@@ -240,5 +240,6 @@ export enum DICT_TYPE {
   IOT_DATA_SINK_TYPE_ENUM = 'iot_data_sink_type_enum', // IoT 数据流转目的类型
   IOT_RULE_SCENE_TRIGGER_TYPE_ENUM = 'iot_rule_scene_trigger_type_enum', // IoT 场景流转的触发类型枚举
   IOT_RULE_SCENE_ACTION_TYPE_ENUM = 'iot_rule_scene_action_type_enum', // IoT 规则场景的触发类型枚举
-  IOT_ALERT_LEVEL = 'iot_alert_level' // IoT 告警级别
+  IOT_ALERT_LEVEL = 'iot_alert_level', // IoT 告警级别
+  IOT_ALERT_RECEIVE_TYPE = 'iot_alert_receive_type' // IoT 告警接收类型
 }

+ 87 - 18
src/views/iot/alert/config/AlertConfigForm.vue

@@ -4,17 +4,24 @@
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="140px"
       v-loading="formLoading"
     >
       <el-form-item label="配置名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入配置名称" />
       </el-form-item>
       <el-form-item label="配置描述" prop="description">
-        <Editor v-model="formData.description" height="150px" />
+        <el-input v-model="formData.description" placeholder="请输入配置描述" />
       </el-form-item>
       <el-form-item label="告警级别" prop="level">
-        <el-input v-model="formData.level" placeholder="请输入告警级别" />
+        <el-select v-model="formData.level" placeholder="请选择告警级别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_ALERT_LEVEL)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="配置状态" prop="status">
         <el-select v-model="formData.status">
@@ -26,14 +33,50 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="关联的场景联动规则编号数组" prop="sceneRuleIds">
-        <el-input v-model="formData.sceneRuleIds" placeholder="请输入关联的场景联动规则编号数组" />
+      <el-form-item label="关联场景联动规则" prop="sceneRuleIds">
+        <el-select
+          v-model="formData.sceneRuleIds"
+          multiple
+          placeholder="请选择关联的场景联动规则"
+          class="w-full"
+        >
+          <el-option
+            v-for="scene in sceneRuleOptions"
+            :key="scene.id"
+            :label="scene.name"
+            :value="scene.id"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="接收的用户编号数组" prop="receiveUserIds">
-        <el-input v-model="formData.receiveUserIds" placeholder="请输入接收的用户编号数组" />
+      <el-form-item label="接收的用户" prop="receiveUserIds">
+        <el-select
+          v-model="formData.receiveUserIds"
+          multiple
+          placeholder="请选择接收的用户"
+          class="w-full"
+        >
+          <el-option
+            v-for="user in userOptions"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="接收的类型数组" prop="receiveTypes">
-        <el-input v-model="formData.receiveTypes" placeholder="请输入接收的类型数组" />
+      <el-form-item label="接收类型" prop="receiveTypes">
+        <el-select
+          v-model="formData.receiveTypes"
+          multiple
+          placeholder="请选择接收类型"
+          class="w-full"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_ALERT_RECEIVE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -45,6 +88,9 @@
 <script setup lang="ts">
 import { AlertConfigApi, AlertConfig } from '@/api/iot/alert/config'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { RuleSceneApi } from '@/api/iot/rule/scene'
+import * as UserApi from '@/api/system/user'
 
 /** IoT 告警配置 表单 */
 defineOptions({ name: 'AlertConfigForm' })
@@ -61,24 +107,32 @@ const formData = ref({
   name: undefined,
   description: undefined,
   level: undefined,
-  status: undefined,
-  sceneRuleIds: undefined,
-  receiveUserIds: undefined,
-  receiveTypes: undefined
+  status: CommonStatusEnum.ENABLE,
+  sceneRuleIds: [],
+  receiveUserIds: [],
+  receiveTypes: []
 })
 const formRules = reactive({
   name: [{ required: true, message: '配置名称不能为空', trigger: 'blur' }],
   level: [{ required: true, message: '告警级别不能为空', trigger: 'blur' }],
-  status: [{ required: true, message: '配置状态不能为空', trigger: 'blur' }]
+  status: [{ required: true, message: '配置状态不能为空', trigger: 'blur' }],
+  sceneRuleIds: [{ required: true, message: '关联场景联动规则不能为空', trigger: 'blur' }],
+  receiveUserIds: [{ required: true, message: '接收用户不能为空', trigger: 'blur' }],
+  receiveTypes: [{ required: true, message: '接收类型不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
+// 选项数据
+const sceneRuleOptions = ref<any[]>([])
+const userOptions = ref<UserApi.UserVO[]>([])
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+
   // 修改时,设置数据
   if (id) {
     formLoading.value = true
@@ -88,9 +142,24 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+
+  // 加载选项数据
+  await loadOptions()
 }
 defineExpose({ open }) // 提供 open 方法,用于打开弹窗
 
+/** 加载选项数据 */
+const loadOptions = async () => {
+  try {
+    // 加载场景联动规则选项
+    sceneRuleOptions.value = await RuleSceneApi.getSimpleRuleSceneList()
+    // 加载用户选项
+    userOptions.value = await UserApi.getSimpleUserList()
+  } catch (error) {
+    console.error('加载选项数据失败:', error)
+  }
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
 const submitForm = async () => {
@@ -122,10 +191,10 @@ const resetForm = () => {
     name: undefined,
     description: undefined,
     level: undefined,
-    status: undefined,
-    sceneRuleIds: undefined,
-    receiveUserIds: undefined,
-    receiveTypes: undefined
+    status: CommonStatusEnum.ENABLE,
+    sceneRuleIds: [],
+    receiveUserIds: [],
+    receiveTypes: []
   }
   formRef.value?.resetFields()
 }

+ 20 - 4
src/views/iot/alert/config/index.vue

@@ -75,10 +75,26 @@
           <dict-tag :type="DICT_TYPE.IOT_ALERT_LEVEL" :value="scope.row.level" />
         </template>
       </el-table-column>
-      <el-table-column label="配置状态" align="center" prop="status" />
-      <el-table-column label="场景联动规则" align="center" prop="sceneRuleIds" />
-      <el-table-column label="接收的用户" align="center" prop="receiveUserIds" />
-      <el-table-column label="接收的类型" align="center" prop="receiveTypes" />
+      <el-table-column label="配置状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="关联场景联动规则" align="center" prop="sceneRuleIds" min-width="100">
+        <template #default="scope"> {{ scope.row.sceneRuleIds?.length || 0 }} 条 </template>
+      </el-table-column>
+      <el-table-column label="接收人" align="center" prop="receiveUserNames" />
+      <el-table-column label="接收类型" align="center" prop="receiveTypes">
+        <template #default="scope">
+          <dict-tag
+            v-for="(receiveType, index) in scope.row.receiveTypes"
+            :key="index"
+            :type="DICT_TYPE.IOT_ALERT_RECEIVE_TYPE"
+            :value="receiveType"
+            class="mr-1"
+          />
+        </template>
+      </el-table-column>
       <el-table-column
         label="创建时间"
         align="center"