修bug

src/views/alarm/ThresholdAlarmList.vue

@@ -18,7 +18,9 @@
         <el-tab-pane label="区域告警" name="area">
           <el-table :data="areaAlarms.list" v-loading="loading">
             <el-table-column prop="id" label="ID" width="80" />
-            <el-table-column prop="area_controller_id" label="区域主控ID" min-width="120" />
+            <el-table-column label="区域主控" min-width="120">
+              <template #default="scope">{{ getAreaControllerName(scope.row.area_controller_id) }}</template>
+            </el-table-column>
             <el-table-column prop="sensor_type" label="传感器类型" min-width="120">
               <template #default="scope">{{ formatSensorType(scope.row.sensor_type) }}</template>
             </el-table-column>
@@ -52,7 +54,9 @@
         <el-tab-pane label="设备告警" name="device">
           <el-table :data="deviceAlarms.list" v-loading="loading">
             <el-table-column prop="id" label="ID" width="80" />
-            <el-table-column prop="device_id" label="设备ID" min-width="120" />
+            <el-table-column label="设备" min-width="120">
+              <template #default="scope">{{ getDeviceNameWithArea(scope.row.device_id) }}</template>
+            </el-table-column>
             <el-table-column prop="sensor_type" label="传感器类型" min-width="120">
               <template #default="scope">{{ formatSensorType(scope.row.sensor_type) }}</template>
             </el-table-column>
@@ -87,11 +91,25 @@
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑规则' : '新增规则'" width="500px" @close="resetForm">
       <el-form :model="form" ref="ruleForm" label-width="100px">
-        <el-form-item v-if="activeTab === 'area'" label="区域主控ID" prop="area_controller_id" required>
+        <el-form-item v-if="activeTab === 'area'" label="区域主控" prop="area_controller_id" required>
-          <el-input v-model.number="form.area_controller_id" :disabled="isEdit"></el-input>
+          <el-select v-model="form.area_controller_id" placeholder="请选择区域主控" :disabled="isEdit">
+            <el-option
+              v-for="item in areaControllers"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item v-if="activeTab === 'device'" label="设备ID" prop="device_id" required>
+        <el-form-item v-if="activeTab === 'device'" label="设备" prop="device_id" required>
-          <el-input v-model.number="form.device_id" :disabled="isEdit"></el-input>
+          <el-select v-model="form.device_id" placeholder="请选择设备" :disabled="isEdit">
+            <el-option
+              v-for="item in devices"
+              :key="item.id"
+              :label="`${item.name} (${item.area_controller_name})`"
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="传感器类型" prop="sensor_type" required>
           <el-select v-model="form.sensor_type" placeholder="请选择" :disabled="isEdit">
@@ -123,6 +141,7 @@
 <script>
 import { Refresh } from '@element-plus/icons-vue';
 import { AlarmApi } from '../../api/alarm.js';
+import { DeviceApi, AreaControllerApi } from '../../api/device.js'; // 引入新的API
 import { SensorType, SeverityLevel, Operator } from '../../enums.js';
 
 export default {
@@ -145,6 +164,8 @@ export default {
         list: [],
         pagination: { currentPage: 1, pageSize: 10, total: 0 },
       },
+      areaControllers: [], // 新增：存储区域主控列表
+      devices: [],         // 新增：存储设备列表
       dialogVisible: false,
       isEdit: false,
       form: {
@@ -159,9 +180,54 @@ export default {
     };
   },
   async mounted() {
+    // 在加载告警数据之前，先加载区域主控和设备列表
+    await this.loadAreaControllers();
+    await this.loadDevices();
     await this.loadData();
   },
   methods: {
+    /**
+     * 加载区域主控列表
+     */
+    async loadAreaControllers() {
+      try {
+        const response = await AreaControllerApi.list();
+        this.areaControllers = response.data || [];
+      } catch (error) {
+        console.error('加载区域主控列表失败:', error);
+        this.$message.error('加载区域主控列表失败');
+      }
+    },
+    /**
+     * 加载设备列表
+     */
+    async loadDevices() {
+      try {
+        const response = await DeviceApi.list();
+        this.devices = response.data || [];
+      } catch (error) {
+        console.error('加载设备列表失败:', error);
+        this.$message.error('加载设备列表失败');
+      }
+    },
+    /**
+     * 根据区域主控ID获取名称
+     * @param {number} id - 区域主控ID
+     * @returns {string} 区域主控名称
+     */
+    getAreaControllerName(id) {
+      const controller = this.areaControllers.find(item => item.id === id);
+      return controller ? controller.name : `未知区域主控 (${id})`;
+    },
+    /**
+     * 根据设备ID获取设备名称及所属区域主控名称
+     * @param {number} id - 设备ID
+     * @returns {string} 设备名称 (区域主控名称)
+     */
+    getDeviceNameWithArea(id) {
+      const device = this.devices.find(item => item.id === id);
+      return device ? `${device.name} (${device.area_controller_name})` : `未知设备 (${id})`;
+    },
     /**
      * 加载阈值告警数据
      * @param {string} [tabName] - 可选参数，当前激活的tab名称，用于确保调用正确的API