[Mod 0000] 工作面防火门监控系统页面及接口调整

src/views/vent/home/configurable/belt/components/detail/fireGateBoard.vue

@@ -16,10 +16,10 @@
             <div class="door-position">
               <div class="position"></div>
               <div class="door-name"
-                ><span>{{ item.strname }}</span></div
+                ><span>{{ item.devicePos }}</span></div
               >
-              <a-button class="door-btn" @click="oneKeyClose(index)">一键关闭</a-button>
-              <a-button class="door-btn" @click="oneKeyOpen(index)">一键打开</a-button>
+              <a-button class="door-btn" @click="oneKeyClose(item, index, 'frontGateClose_S', '关闭')">关闭</a-button>
+              <a-button class="door-btn" @click="oneKeyOpen(item, index, 'frontGateOpen_S', '打开')">打开</a-button>
             </div>
             <div class="door-header">
               <div class="info-column" v-for="(i, idx) in config.config.items" :key="idx">
@@ -48,16 +48,28 @@
         </div>
       </div>
     </div>
+    <HandleModal
+      v-if="!globalConfig?.simulatedPassword"
+      :modal-is-show="modalIsShow"
+      :modal-title="modalTitle"
+      :modal-type="modalType"
+      @handle-ok="handleOK"
+      @handle-cancel="handleCancel"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue';
+  import { ref, onMounted, watch, inject } from 'vue';
   import { getFormattedText } from '../../../hooks/helper';
   // import gateSVG from '../gateSVG.vue';
   import gateSVG from '../../../../../monitorManager/gateMonitor/components/gateDualSVG.vue';
   import gatePng from '/@/assets/images/fireDoorMonitor.png'; //暂时用图片
   import { nextTick } from 'process';
+  import HandleModal from '/@/views/vent/monitorManager/gateMonitor/modal.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { message } from 'ant-design-vue';
+  import { doorControlApi } from '/@/views/vent/home/configurable/configurable.api.fireDoorMonitor';
   const props = withDefaults(
     defineProps<{
       config: {
@@ -74,18 +86,19 @@
     }>(),
     {
       data: () => ({
-        data: {
-          strname: '设备1',
-          readData: {
-            frontGateOpen: 1,
-            rearGateOpen: 0,
-          },
-          netStatus: 1,
-        },
+        data: {},
       }),
     }
   );
+
+  const emit = defineEmits(['refresh']);
+  const globalConfig = inject<any>('globalConfig');
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const paramcode = ref(''); // 模态框操作代码
   const childRefs = ref<(InstanceType<typeof gateSVG> | null)[]>([]);
+  const selectData = ref<any>({});
   const setChildRef = (el, index) => {
     if (el) {
       childRefs.value[index] = el;
@@ -104,21 +117,83 @@
     }
   }
 
-  function oneKeyOpen(index) {
-    if (childRefs.value[index]) {
-      childRefs.value[index].animate(true, true, true);
-    }
+  function oneKeyOpen(item, index, code, title) {
+    selectData.value = item;
+    modalTitle.value = title;
+    paramcode.value = code;
+    openGateControlModal();
+    // if (childRefs.value[index]) {
+    //   childRefs.value[index].animate(true, true, true);
+    // }
+  }
+  function oneKeyClose(item, index, code, title) {
+    selectData.value = item;
+    modalTitle.value = title;
+    paramcode.value = code;
+    openGateControlModal();
+    // if (childRefs.value[index]) {
+    //   childRefs.value[index].animate(false, false, false);
+    // }
   }
-  function oneKeyClose(index) {
-    if (childRefs.value[index]) {
-      childRefs.value[index].animate(false, false, false);
+
+  function handleOK(passWord, handlerState, value?) {
+    console.log('handleOK', passWord, handlerState, value);
+    if (!passWord && !globalConfig?.simulatedPassword) {
+      message.warning('请输入密码');
+      return;
     }
+    const data = {
+      systemID: selectData.value.systemDeviceId,
+      deviceid: selectData.value.deviceID,
+      devicetype: selectData.value.deviceType,
+      paramcode: paramcode.value,
+      value: '',
+      password: passWord || globalConfig?.simulatedPassword,
+    };
+    console.log('data', data);
+
+    doorControlApi(data)
+      .then((res) => {
+        // 模拟时开启
+        if (res.success) {
+          modalIsShow.value = false;
+          if (globalConfig.History_Type == 'remote') {
+            message.success('指令已下发至生产管控平台成功！');
+          } else {
+            message.success('指令已下发成功！');
+          }
+          // 触发刷新事件
+          emit('refresh');
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch(() => {
+        message.error('控制异常，请排查问题。。。');
+      });
+  }
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
   }
 
+  /** 封装通用的模态框打开方法 */
+  const openGateControlModal = (
+    customTitle?: string // 自定义标题（可选）
+  ) => {
+    // 统一赋值逻辑
+    modalIsShow.value = true;
+
+    // 如果有模拟密码，则直接执行操作
+    // if (globalConfig?.simulatedPassword) {
+    //   handleOK('', String(controlType));
+    // }
+  };
+
   watch(
     () => props.data,
     (newData) => {
-      console.log('数据更新11111', newData);
       if (!newData || !newData.length) return;
       newData.forEach((item, index) => {
         monitorAnimation(item, index);

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -555,6 +555,7 @@
     background-image: var(--image-board-bg-m1);
     background-size: 100% 100%;
     margin: 5px 0 15px 0;
+    padding-top: 10px;
   }
 
   .mini-board_M:nth-child(2),

src/views/vent/home/configurable/components/three3D.vue

@@ -58,6 +58,12 @@
           newP: { x: -56.54402372998481, y: 80.01047089769048, z: -30.089368652402282 },
           newT: { x: -56.54402372998481, y: -10.747834071844238, z: -3.2453629571876617 },
         },
+        'pidai-fire-door': {
+          render: null,
+          group: modalGroup ? modalGroup : null,
+          newP: { x: 64.36035750268913, y: 55.854573154864724, z: -0.07480379918286666 },
+          newT: { x: -0.55829999999998, y: -27.441793999999998, z: 0.07314299999999997 },
+        },
       };
       await initModal();
       if (modalConfigurations[props.modalName]) {

src/views/vent/home/configurable/configurable.api.fireDoorMonitor.ts

@@ -0,0 +1,13 @@
+import { defHttp } from '/@/utils/http/axios';
+import _ from 'lodash';
+
+enum Api {
+  manageFireGateHome = '/ventanaly-device/monitor/disaster/manageFireGateHome',
+  manageFireList = '/safety/ventanalyManageSystem/list',
+  doorControl = '/ventanaly-device/safety/ventanalyMonitorData/doorControl',
+}
+export const manageFireGateHome = (params) => defHttp.post({ url: Api.manageFireGateHome, params });
+
+export const manageFireList = (params) => defHttp.get({ url: Api.manageFireList, params });
+
+export const doorControlApi = (params) => defHttp.put({ url: Api.doorControl, params });

src/views/vent/home/configurable/configurable.data.fireDoorMonitor.ts

@@ -5,7 +5,7 @@ export const testFireDoorMonitor: Config[] = [
   {
     deviceType: 'fireMonitor',
     moduleName: '设备监测与分析',
-    pageType: 'fireMonitorLeft',
+    pageType: 'fireMonitor',
     moduleData: {
       header: {
         show: false,
@@ -42,31 +42,31 @@ export const testFireDoorMonitor: Config[] = [
       list: [],
       preset: [
         {
-          readFrom: 'fmhjcInfo[0]',
+          readFrom: 'devTypeCountInfo',
           list: [
             {
               title: '温度传感器',
               contentTop: [
                 {
                   label: '平均值',
-                  code: 'avg',
+                  code: '${modelsensor_temperature.aveVal}',
                   color: 'white',
                 },
                 {
                   label: '最大值',
-                  code: 'max',
+                  code: '${modelsensor_temperature.maxVal}',
                   color: 'white',
                 },
                 {
                   label: '最小值',
-                  code: 'min',
+                  code: '${modelsensor_temperature.minVal}',
                   color: 'white',
                 },
               ],
               contents: [
                 {
                   label: '是否报警',
-                  code: 'alarm',
+                  code: '${modelsensor_temperature.isAlarm}',
                   trans: {
                     true: '报警',
                     false: '正常',
@@ -75,10 +75,10 @@ export const testFireDoorMonitor: Config[] = [
                 },
                 {
                   label: '最大值产生于',
-                  code: 'maxTime',
+                  code: '${modelsensor_temperature.maxTime}',
                   color: 'white',
                   info: {
-                    code: 'pos',
+                    code: '${modelsensor_temperature.maxStrInstallPos}',
                   },
                 },
               ],
@@ -88,24 +88,24 @@ export const testFireDoorMonitor: Config[] = [
               contentTop: [
                 {
                   label: '平均值',
-                  code: 'avg',
+                  code: '${modelsensor_co.aveVal}',
                   color: 'white',
                 },
                 {
                   label: '最大值',
-                  code: 'max',
+                  code: '${modelsensor_co.maxVal}',
                   color: 'white',
                 },
                 {
                   label: '最小值',
-                  code: 'min',
+                  code: '${modelsensor_co.minVal}',
                   color: 'white',
                 },
               ],
               contents: [
                 {
                   label: '是否报警',
-                  code: 'alarm',
+                  code: '${modelsensor_co.isAlarm}',
                   trans: {
                     true: '报警',
                     false: '正常',
@@ -114,37 +114,37 @@ export const testFireDoorMonitor: Config[] = [
                 },
                 {
                   label: '最大值产生于',
-                  code: 'maxTime',
+                  code: '${modelsensor_co.maxTime}',
                   color: 'white',
                   info: {
-                    code: 'pos',
+                    code: '${modelsensor_co.maxStrInstallPos}',
                   },
                 },
               ],
             },
             {
-              title: 'HCl传感器',
+              title: '光纤测温传感器',
               contentTop: [
                 {
                   label: '平均值',
-                  code: '${avg}',
+                  code: '${fiber.aveVal}',
                   color: 'white',
                 },
                 {
                   label: '最大值',
-                  code: 'max',
+                  code: '${fiber.maxVal}',
                   color: 'white',
                 },
                 {
                   label: '最小值',
-                  code: 'min',
+                  code: '${fiber.minVal}',
                   color: 'white',
                 },
               ],
               contents: [
                 {
                   label: '是否报警',
-                  code: 'alarm',
+                  code: '${fiber.isAlarm}',
                   trans: {
                     true: '报警',
                     false: '正常',
@@ -153,50 +153,93 @@ export const testFireDoorMonitor: Config[] = [
                 },
                 {
                   label: '最大值产生于',
-                  code: 'maxTime',
+                  code: '${fiber.maxTime}',
                   color: 'white',
                   info: {
-                    code: 'pos',
+                    code: '${fiber.maxStrInstallPos}',
                   },
                 },
               ],
             },
+          ],
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:400px;height:480px;',
+      version: '原版',
+      position: 'top:45px;left:25px;',
+    },
+  },
+  {
+    deviceType: 'fireMonitor',
+    moduleName: '监测设备状态',
+    pageType: 'fireMonitor',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'fire_sensor_analysis',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      list: [],
+      preset: [
+        {
+          readFrom: 'devTypeCountInfo',
+          config: [
             {
-              title: '光纤测温传感器',
-              contentTop: [
-                {
-                  label: '平均值',
-                  code: 'avg',
-                  color: 'white',
-                },
+              title: '火焰传感器',
+              items: [
                 {
-                  label: '最大值',
-                  code: 'max',
-                  color: 'white',
+                  label: '是否报警',
+                  code: '${modelsensor_fire.isAlarm}',
+                  trans: { true: '报警', false: '正常' },
                 },
                 {
-                  label: '最小值',
-                  code: 'min',
-                  color: 'white',
+                  label: '最大值产生于',
+                  code: '${modelsensor_fire.maxTime}',
+                  info: { code: '${modelsensor_fire.maxStrInstallPos}' },
                 },
               ],
-              contents: [
+            },
+            {
+              title: '烟雾传感器',
+              items: [
                 {
                   label: '是否报警',
-                  code: 'alarm',
-                  trans: {
-                    true: '报警',
-                    false: '正常',
-                  },
-                  color: 'green',
+                  code: '${modelsensor_smoke.isAlarm}',
+                  trans: { true: '报警', false: '正常' },
                 },
                 {
                   label: '最大值产生于',
-                  code: 'maxTime',
-                  color: 'white',
-                  info: {
-                    code: 'pos',
-                  },
+                  code: '${modelsensor_smoke.maxTime}',
+                  info: { code: '${modelsensor_smoke.maxStrInstallPos}' },
                 },
               ],
             },
@@ -205,111 +248,12 @@ export const testFireDoorMonitor: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:400px;height:800px;',
+      size: 'width:400px;height:295px;',
       version: '原版',
-      position: 'top:60px;left:25px;',
+      position: 'top:540px;left:25px;',
     },
   },
-
-  // ==================== 右侧 ====================
-
-  // {
-  //   deviceType: 'fireMonitor',
-  //   moduleName: '设备监测与分析',
-  //   pageType: 'fireMonitor',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       readFrom: '',
-  //       selector: {
-  //         show: false,
-  //         value: '${beltName}',
-  //       },
-  //       slot: {
-  //         show: false,
-  //         value: '',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     layout: {
-  //       direction: 'column',
-  //       items: [
-  //         {
-  //           name: 'fire_sensor_analysis',
-  //           basis: '100%',
-  //         },
-  //       ],
-  //     },
-  //     board: [],
-  //     chart: [],
-  //     gallery: [],
-  //     gallery_list: [],
-  //     table: [],
-  //     list: [],
-  //     complex_list: [],
-  //     preset: [
-  //       {
-  //         readFrom: 'sensorAnalysis',
-  //         config: [
-  //           {
-  //             title: '火焰传感器', // 对应 UI 图中的组标题
-  //             items: [
-  //               {
-  //                 label: '是否报警',
-  //                 code: '${hy.alarm}', // 占位符
-  //                 status: '1', // 状态映射逻辑 (0:正常, 1:报警)
-  //               },
-  //               {
-  //                 label: '最大值产生于',
-  //                 code: 'maxTime',
-  //                 info: '1521胶运顺槽600m',
-  //               },
-  //             ],
-  //           },
-  //           {
-  //             title: '温度传感器',
-  //             items: [
-  //               {
-  //                 label: '是否报警',
-  //                 code: 'isAlarm', // 占位符
-  //                 status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
-  //               },
-  //               {
-  //                 label: '最大值产生于',
-  //                 code: 'maxTime',
-  //                 info: '1521胶运顺槽600m',
-  //               },
-  //             ],
-  //           },
-  //           {
-  //             title: '烟雾传感器',
-  //             items: [
-  //               {
-  //                 label: '是否报警',
-  //                 code: 'isAlarm', // 占位符
-  //                 status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
-  //               },
-  //               {
-  //                 label: '最大值产生于',
-  //                 code: 'maxTime',
-  //                 info: '1521胶运顺槽600m',
-  //               },
-  //             ],
-  //           },
-  //         ],
-  //       },
-  //     ],
-  //   },
-  //   showStyle: {
-  //     size: 'width:400px;height:225px;',
-  //     version: '原版',
-  //     position: 'top:10px;right:25px;',
-  //   },
-  // },
+  // 防火门监测
   {
     deviceType: 'fireMonitor', //
     moduleName: '防火门监测',
@@ -351,65 +295,41 @@ export const testFireDoorMonitor: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'deviceInfo.gate.datalist',
+          readFrom: 'devMonitorMap.door',
           type: 'C',
           config: {
-            tilte: 'strname',
+            tilte: '${readData.frontGateOpen.value}',
             items: [
               {
-                label: '前门状态',
-                value: '${readData.frontGateOpen}',
-                trans: {
-                  1: '打开',
-                  0: '关闭',
-                },
-              },
-              {
-                label: '后门状态',
-                value: '${readData.rearGateOpen}',
+                label: '防火门状态',
+                value: '${readData.frontGateOpen.value}',
                 trans: {
-                  1: '打开',
-                  0: '关闭',
+                  '1': '打开',
+                  '0': '关闭',
                 },
               },
               {
                 label: '网络状态',
                 value: '${netStatus}',
                 trans: {
-                  1: '连接',
-                  0: '断开',
+                  '1': '连接',
+                  '0': '断开',
                 },
               },
             ],
           },
         },
       ],
-      mock: {
-        deviceInfo: {
-          gate: {
-            datalist: [
-              {
-                strname: '设备1',
-                readData: {
-                  frontGateOpen: 1,
-                  rearGateOpen: 0,
-                },
-                netStatus: 1,
-              },
-            ],
-          },
-        },
-      },
     },
     showStyle: {
-      size: 'width:400px;height:420px;',
+      size: 'width:400px;height:410px;',
       version: '原版',
       position: 'top:15px;right:25px;',
     },
   },
-  // ==================== 人员定位与CO浓度关联分析 ====================
+  // 人员定位
   {
-    deviceType: 'fireMonitor',
+    deviceType: 'peopleInfo',
     moduleName: '人员定位',
     pageType: 'fireMonitor',
     moduleData: {
@@ -418,7 +338,7 @@ export const testFireDoorMonitor: Config[] = [
         readFrom: '',
         selector: {
           show: false,
-          value: '${beltName}',
+          value: '',
         },
         slot: {
           show: false,
@@ -434,7 +354,7 @@ export const testFireDoorMonitor: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'person_position',
+            name: 'table',
             basis: '100%',
           },
         ],
@@ -443,43 +363,33 @@ export const testFireDoorMonitor: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [
+      table: [
         {
-          readFrom: 'vehicleCOAnalysis',
-          list: [
+          type: 'A',
+          readFrom: 'locationInfo',
+          columns: [
             {
-              type: 'control',
-              title: '人员位置',
-              layout: 'horizontal',
-              readFrom: '',
-              items: [
-                {
-                  label: '状态',
-                  code: 'isRisk',
-                },
-              ],
+              name: '工作面名称',
+              prop: 'devName',
             },
             {
-              type: 'analysis',
-              title: '设备情况',
-              readFrom: 'analysisList',
-              items: [
-                {
-                  label: '',
-                  code: 'pos',
-                },
-                {
-                  label: '',
-                  code: 'analysisText',
-                },
-              ],
+              name: '人员名称',
+              prop: 'personNameList',
+            },
+            {
+              name: '门内人数',
+              prop: 'personNum',
+            },
+            {
+              name: '设备位置',
+              prop: 'strInstallPos',
             },
           ],
         },
       ],
+      list: [],
+      complex_list: [],
+      preset: [],
     },
     showStyle: {
       size: 'width:400px;height:400px;',

src/views/vent/home/configurable/fireDoorMonitor.vue

@@ -1,10 +1,11 @@
-<!-- belt-new.vue -->
 <template>
   <div class="company-home">
     <!-- 顶部标题栏 + 下拉选择 -->
-    <customHeader> XXX工作面防火门监控系统 </customHeader>
+    <div class="top-bg">
+      <div class="main-title">工作面防火门监控系统</div>
+    </div>
     <div class="modal-box" id="modalBox">
-      <!-- <Three3D :modal-name="modalName" /> -->
+      <Three3D :modal-name="modalName" />
     </div>
     <!-- 主体区域 -->
     <div class="border">
@@ -14,116 +15,107 @@
           ref="select"
           v-model:value="deviceId"
           @change="handleDeviceChange"
-          popupClassName="drop"
-          :field-names="fieldNames"
           :options="selectorOptions"
-          :dropdownStyle="{
-            width: '380px',
-            background: 'transparent',
-            borderBottom: '1px solid #ececec66',
-            backdropFilter: 'blur(50px)',
-            color: '#fff',
-          }"
+          placeholder="请选择场景"
         />
       </div>
       <!-- 配置模块区 -->
-      <template v-if="pageType == 'fireMonitor'">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-        />
-      </template>
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :page-type="cfg.pageType"
+        :data="data"
+        :visible="true"
+        @refresh-data="loadFireGateData"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, watch, computed } from 'vue';
-  import customHeader from './belt/components/customHeader-belt.vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import { testFireDoorMonitor } from './configurable.data.fireDoorMonitor';
+  import { manageFireGateHome, manageFireList } from './configurable.api.fireDoorMonitor';
   import ModuleCommon from './belt/components/ModuleCommon.vue';
   import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
-  import { useRouter, useRoute } from 'vue-router';
-  import { modalAnimate } from './belt/threejs/belt.threejs';
 
   // 初始化配置
   const { configs, fetchConfigs } = useInitConfigs();
   const { updateEnhancedConfigs, updateData, data } = useInitPage('工作面防火门监控系统');
-  // const modalName = ref('Fire-doorf');
-  // const pageType = computed(() => {
-  //   const currentType = route.params.type as string;
-  //   return currentType;
-  // });
-  const pageType = ref('fireMonitor');
-  const fieldNames = { label: 'name', value: 'id' }; // 下拉框字段映射
+  const modalName = ref('pidai-fire-door');
 
-  // 下拉框选项
-  const selectorOptions = [
-    { id: '1', label: '主运巷皮带 1' },
-    { id: '2', label: '主运巷皮带 2' },
-  ];
+  // 设备场景下拉框选项
+  const selectorOptions = ref<{ value: any; label: any }[]>([]);
+  const deviceId = ref<string>('');
 
-  const deviceId = ref('1');
-
-  // 切换设备事件
-  function handleDeviceChange(param) {
-    // 查询数据接口
+  // 切换设备事件：当下拉框改变时触发
+  function handleDeviceChange(value: string) {
+    if (value) {
+      loadFireGateData();
+    }
   }
 
-  // 刷新数据
-  function refresh() {
-    fetchConfigs('belt').then(() => {
-      configs.value = testFireDoorMonitor;
-      updateEnhancedConfigs(configs.value);
-    });
-  }
+  onMounted(() => {
+    // 1. 获取场景列表
+    manageFireList({
+      strtype: 'sys_door',
+      pagetype: 'normal',
+    }).then((res) => {
+      if (res.records && res.records.length > 0) {
+        res.records.forEach((item) => {
+          selectorOptions.value.push({
+            value: item.id,
+            label: item.systemname,
+          });
+        });
 
-  // // 定时刷新
-  // function initInterval() {
-  //   setInterval(() => {
-  //     refresh();
-  //   }, 60000);
-  // }
+        // 2. 默认选中第一个场景
+        deviceId.value = selectorOptions.value[0].value;
 
-  function changePage(pageTypeStr: string) {
-    pageType.value = pageTypeStr;
-    refresh();
-  }
+        // 3. 初始化页面配置并加载第一个场景的数据
+        fetchConfigs('fireMonitor').then(() => {
+          configs.value = testFireDoorMonitor;
+          updateEnhancedConfigs(configs.value);
+          loadFireGateData();
+        });
+      }
+    });
+  });
 
-  // watch(
-  //   // 监听动态路由参数 :type
-  //   () => route.params.type,
-  //   (newVal) => {
-  //     if (newVal) {
-  //       console.log('切换页面类型：', newVal);
-  //       refresh(); // 切换路由自动刷新
-  //     }
-  //   }
-  // );
+  // 加载防火门数据的方法：根据当前选中的 deviceId 请求数据
+  const loadFireGateData = () => {
+    if (!deviceId.value) return;
 
-  async function initModalAnimate(modal) {
-    console.log('初始化模型', modal);
-    modal.isRender = true;
+    manageFireGateHome({
+      sysId: deviceId.value,
+    }).then((res) => {
+      // 处理数据：为 door 数组中的每一项添加 systemDeviceId
+      if (res.devMonitorMap && Array.isArray(res.devMonitorMap.door)) {
+        res.devMonitorMap.door.forEach((item) => {
+          item.systemDeviceId = deviceId.value;
+        });
+      }
+      updateData(res);
+    });
+  };
 
-    await modalAnimate(modal);
-  }
+  // 设置定时刷新，每10秒执行一次
+  const interval = setInterval(() => {
+    loadFireGateData();
+  }, 10000);
 
-  onMounted(() => {
-    refresh();
-    // initInterval();
+  onUnmounted(() => {
+    clearInterval(interval);
   });
 </script>
-
 <style lang="less" scoped>
   .company-home {
+    --image-vent-header: url('/@/assets/images/vent/vent-header1.png');
     background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
     width: 100%;
     height: 100%;
@@ -132,10 +124,20 @@
     font-family: 'Microsoft YaHei', sans-serif;
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 100px;
+      background: var(--image-vent-header) no-repeat top;
       position: absolute;
-      margin-top: 10px;
       z-index: 1;
+      .main-title {
+        height: 80px;
+        font-family: 'douyuFont';
+        font-size: 22px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 0 10px 0;
+      }
     }
     .header-container {
       position: absolute;
@@ -146,10 +148,11 @@
 
     .border {
       width: 100%;
-      height: 94%;
+      height: calc(100% - 70px);
       background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
       background-size: 100% 100%;
       position: relative;
+      top: 60px;
       overflow: hidden;
 
       .box-container {
@@ -188,9 +191,10 @@
         color: #fff !important;
         font-size: 20px;
       }
-      .zxm-select-arrow {
-        color: #fff;
-      }
+    }
+    :deep(.zxm-select-arrow) {
+      color: #fff;
+      right: 50px;
     }
 
     // 中间预警结果区
@@ -300,4 +304,12 @@
     position: absolute;
     z-index: 1;
   }
+  :deep(.table__content) {
+    .table__content_label {
+      width: 100% !important;
+    }
+    .table__content_list {
+      width: 100% !important;
+    }
+  }
 </style>