[Fix 0000] 修复了通用的监测页面组件切换标签后模型没有隐藏的问题

src/components/vent/BasicMonitoring.vue

@@ -9,13 +9,13 @@
     {{ mainTitle }}
   </customHeader>
   <!-- 默认插槽，一般用来放模型 -->
-  <slot :monitor-data="monitorData"></slot>
+  <slot :monitor-data="monitorData" :monitor-active="monitorActive"></slot>
   <div class="scene-box">
     <div class="center-container">
       <!-- 监测模块 -->
-      <template v-if="activeKey == 'monitor'">
+      <template v-if="monitorActive">
         <slot name="opration">
-          <div class="button-wrapper" v-if="monitorType !== 'nitrogenMonitor'">
+          <div v-if="mainConfig.operations.length" class="button-wrapper">
             <template v-for="item in mainConfig.operations" :key="item.key">
               <template v-if="hasPermission(item.permission)">
                 <div :class="{ 'button-box': true, 'button-box-disable': item.disabled }" @click="handleOperate(item)">{{ item.label }} </div>
@@ -49,39 +49,32 @@
           </div>
         </div>
         <div class="history-container">
-          <slot name="history" :device-type="deviceType" :device-id="optionValue">
-            <HistoryTable
-              v-if="activeKey == 'monitor_history'"
-              class="vent-margin-t-20"
-              :columns-type="deviceType"
-              :device-type="deviceType"
-              :sysId="optionValue"
-              :scroll="{ y: 650 }"
-              v-bind="monitorHistoryConfig"
-            />
-          </slot>
-          <slot name="handler" :device-type="deviceType" :device-id="optionValue">
-            <HandlerHistoryTable
-              v-if="activeKey == 'handler_history'"
-              class="vent-margin-t-20"
-              columns-type="operator_history"
-              :deviceType="deviceType"
-              v-bind="handlerHistoryConfig"
-            />
-          </slot>
-          <slot name="alarm" :device-type="deviceType" :device-id="optionValue">
-            <AlarmHistoryTable
-              v-if="activeKey == 'faultRecord'"
-              columns-type="alarm"
-              :device-type="deviceType"
-              :sys-id="optionValue"
-              v-bind="alarmHistoryConfig"
-            />
-          </slot>
+          <template v-if="activeKey === 'monitor_history'">
+            <slot name="history" :device-type="deviceType" :device-id="optionValue">
+              <HistoryTable
+                class="vent-margin-t-20"
+                :columns-type="deviceType"
+                :device-type="deviceType"
+                :sysId="optionValue"
+                :scroll="{ y: 650 }"
+                v-bind="monitorHistoryConfig"
+              />
+            </slot>
+          </template>
+          <template v-if="activeKey === 'handler_history'">
+            <slot name="handler" :device-type="deviceType" :device-id="optionValue">
+              <HandlerHistoryTable class="vent-margin-t-20" columns-type="operator_history" :deviceType="deviceType" v-bind="handlerHistoryConfig" />
+            </slot>
+          </template>
+          <template v-if="activeKey === 'faultRecord'">
+            <slot name="alarm" :device-type="deviceType" :device-id="optionValue">
+              <AlarmHistoryTable columns-type="alarm" :device-type="deviceType" :sys-id="optionValue" v-bind="alarmHistoryConfig" />
+            </slot>
+          </template>
         </div>
       </div>
     </div>
-    <BottomMenu @change="changeActive" />
+    <BottomMenu @change="activeKey = $event" />
   </div>
   <PasswordModal
     :modal-is-show="passwordModalShown"
@@ -92,423 +85,415 @@
 </template>
 
 <script setup lang="ts">
-import customHeader from '/@/components/vent/customHeader.vue';
-import { ref, onMounted, onUnmounted } from 'vue';
-import { getDevice, sysList } from '/@/views/vent/monitorManager/comment/comment.api';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import ModuleCommon from '/@/views/vent/home/configurable/components/ModuleCommon.vue';
-import HistoryTable from '/@/views/vent/monitorManager/comment/HistoryTable.vue';
-import HandlerHistoryTable from '/@/views/vent/monitorManager/comment/HandlerHistoryTable.vue';
-import AlarmHistoryTable from '/@/views/vent/monitorManager/comment/AlarmHistoryTable.vue';
-import { useRouter } from 'vue-router';
-import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
-import { message, Modal } from 'ant-design-vue';
-import _ from 'lodash';
-import PasswordModal from '/@/views/vent/monitorManager/comment/components/PasswordModal.vue';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { deviceControlApi } from '/@/api/vent';
-
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-type Operation = {
-  label: string;
-  key: string;
-  value: string;
-  disabled?: boolean;
-  showPassword?: boolean;
-  permission?: string;
-  onOk?: (key: string, value: string, pwd?: string) => Promise<void>;
-};
-
-const props = withDefaults(
-  defineProps<{
-    mainTitle: string;
-    /** 是否显示历史数据上方的设备类型选择器 */
-    showDeviceList?: boolean;
-    /** 请求场景数据传入的类型字符 */
-    strtype: string;
-    /** 请求场景数据传入的页面类型字符 */
-    pagetype?: string;
-    /** 获取各表格配置时依赖的设备类型 */
-    monitorType?: string;
-    /** 监测页面类型*/
-    // deviceType: string;
-    /** 主要模块配置 */
-    mainConfig: {
-      operations: Operation[];
-      configs: Config[];
-      /** 获取该场景所含设备及其监测信息的API */
-      monitorApi?: (params: { deviceType: string; deviceId: number | string }) => Promise<any>;
-      /** 定时获取监测信息的配置，单位为毫秒，不传入即默认，传0即停用 */
-      timer?: number;
-    };
-    /** 历史数据配置 */
-    monitorHistoryConfig: {
-      /** 请求历史数据时传入的类型字符 */
-      columnsType?: string;
-      /** 如果默认的设备类型不适用，可以传递固定的类型 */
-      deviceType?: string;
-      /** 仅展示已绑定设备，选择是则从系统中获取sysId下已绑定设备。仅能查询到已绑定设备的历史数据 */
-      onlyBounedDevices?: boolean;
-      /** 显示历史数据曲线图 */
-      showHistoryCurve?: boolean;
-    };
-    /** 操作历史配置 */
-    handlerHistoryConfig: {
-      /** 请求操作历史时传入的类型字符 */
-      columnsType?: string;
-      /** 如果默认的设备类型不适用，可以传递固定的类型 */
-      deviceType?: string;
-      /** 获取操作历史的API，可以不提供以使用默认的请求 */
-      deviceListApi?: (params: any) => Promise<any[]>;
-    };
-    /** 报警历史配置 */
-    alarmHistoryConfig: {
-      /** 请求报警历史时传入的类型字符 */
-      columnsType?: string;
-      /** 如果默认的设备类型不适用，可以传递固定的类型 */
-      deviceType?: string;
-      /** 获取报警历史的API，可以不提供以使用默认的请求 */
-      list?: (params: any) => Promise<any[]>;
-      /** 获取设备以供报警历史过滤的API，可以不提供以使用默认的请求 */
-      deviceListApi?: (params: any) => Promise<any[]>;
-    };
-  }>(),
-  {
-    mainConfig: () => ({
-      operations: [],
-      configs: [],
-    }),
-    monitorHistoryConfig: () => ({}),
-    handlerHistoryConfig: () => ({}),
-    alarmHistoryConfig: () => ({}),
-    pagetype: 'normal',
-    showDeviceList: true,
-  }
-);
-
-const { currentRoute } = useRouter();
-const { hasPermission } = usePermission();
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { ref, onMounted, computed } from 'vue';
+  import { getDevice, sysList } from '/@/views/vent/monitorManager/comment/comment.api';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import ModuleCommon from '/@/views/vent/home/configurable/components/ModuleCommon.vue';
+  import HistoryTable from '/@/views/vent/monitorManager/comment/HistoryTable.vue';
+  import HandlerHistoryTable from '/@/views/vent/monitorManager/comment/HandlerHistoryTable.vue';
+  import AlarmHistoryTable from '/@/views/vent/monitorManager/comment/AlarmHistoryTable.vue';
+  import { useRouter } from 'vue-router';
+  import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
+  import { message, Modal } from 'ant-design-vue';
+  import _ from 'lodash';
+  import PasswordModal from '/@/views/vent/monitorManager/comment/components/PasswordModal.vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { deviceControlApi } from '/@/api/vent';
+  import { useIntervalFn } from '@vueuse/shared';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  type Operation = {
+    label: string;
+    key: string;
+    value: string;
+    disabled?: boolean;
+    showPassword?: boolean;
+    permission?: string;
+    onOk?: (key: string, value: string, pwd?: string) => Promise<void>;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      mainTitle: string;
+      /** 是否显示历史数据上方的设备类型选择器 */
+      showDeviceList?: boolean;
+      /** 请求场景数据传入的类型字符 */
+      strtype: string;
+      /** 请求场景数据传入的页面类型字符 */
+      pagetype?: string;
+      /** 主要模块配置 */
+      mainConfig: {
+        /** 监测上方操作栏配置 */
+        operations: Operation[];
+        /** 监测可配置模块配置 */
+        configs: Config[];
+        /** 获取该场景所含设备及其监测信息的API */
+        monitorApi?: (params: { deviceType: string; deviceId: number | string }) => Promise<any>;
+        /** 定时获取监测信息的配置，单位为毫秒，不传入即默认，传0即停用 */
+        timer?: number;
+      };
+      /** 历史数据配置 */
+      monitorHistoryConfig: {
+        /** 请求历史数据时传入的类型字符 */
+        columnsType?: string;
+        /** 如果默认的设备类型不适用，可以传递固定的类型 */
+        deviceType?: string;
+        /** 仅展示已绑定设备，选择是则从系统中获取sysId下已绑定设备。仅能查询到已绑定设备的历史数据 */
+        onlyBounedDevices?: boolean;
+        /** 显示历史数据曲线图 */
+        showHistoryCurve?: boolean;
+      };
+      /** 操作历史配置 */
+      handlerHistoryConfig: {
+        /** 请求操作历史时传入的类型字符 */
+        columnsType?: string;
+        /** 如果默认的设备类型不适用，可以传递固定的类型 */
+        deviceType?: string;
+        /** 获取操作历史的API，可以不提供以使用默认的请求 */
+        deviceListApi?: (params: any) => Promise<any[]>;
+      };
+      /** 报警历史配置 */
+      alarmHistoryConfig: {
+        /** 请求报警历史时传入的类型字符 */
+        columnsType?: string;
+        /** 如果默认的设备类型不适用，可以传递固定的类型 */
+        deviceType?: string;
+        /** 获取报警历史的API，可以不提供以使用默认的请求 */
+        list?: (params: any) => Promise<any[]>;
+        /** 获取设备以供报警历史过滤的API，可以不提供以使用默认的请求 */
+        deviceListApi?: (params: any) => Promise<any[]>;
+      };
+    }>(),
+    {
+      mainConfig: () => ({
+        operations: [],
+        configs: [],
+      }),
+      monitorHistoryConfig: () => ({}),
+      handlerHistoryConfig: () => ({}),
+      alarmHistoryConfig: () => ({}),
+      pagetype: 'normal',
+      showDeviceList: true,
+    }
+  );
 
-const activeKey = ref('monitor');
+  const { currentRoute } = useRouter();
+  const { hasPermission } = usePermission();
 
-function changeActive(activeValue) {
-  activeKey.value = activeValue;
-}
+  const activeKey = ref('monitor');
+  const monitorActive = computed(() => activeKey.value === 'monitor');
 
-/** 场景选项 */
-const options = ref([]);
-/** 已选择了的场景的id */
-const optionValue = ref('');
+  /** 场景选项 */
+  const options = ref([]);
+  /** 已选择了的场景的id */
+  const optionValue = ref('');
 
-/** 获取左上角场景选择框数据的方法，如果此时初始场景未赋值则选择首项做初始化 */
-async function getSysDataSource() {
-  const res = await sysList({ strtype: props.strtype, pagetype: props.pagetype }).catch(() => {
-    message.error('获取场景数据时发生了错误');
-  });
-  // 初始时选择第一条数据
-  options.value = res.records || [];
-  if (!optionValue.value) {
-    changeSelectRow(options.value[0]['id']);
+  /** 获取左上角场景选择框数据的方法，如果此时初始场景未赋值则选择首项做初始化 */
+  async function getSysDataSource() {
+    const res = await sysList({ strtype: props.strtype, pagetype: props.pagetype }).catch(() => {
+      message.error('获取场景数据时发生了错误');
+    });
+    options.value = res.records || [];
+    // 初始时选择第一条数据
+    if (!optionValue.value) {
+      changeSelectRow(options.value[0]['id']);
+    }
   }
-}
 
-// 切换检测数据
-function changeSelectRow(deviceID) {
-  optionValue.value = deviceID;
-  if (props.monitorType !== 'nitrogenMonitor') {
+  // 切换检测数据
+  function changeSelectRow(deviceID) {
+    optionValue.value = deviceID;
     getDeviceList();
   }
-}
-
-/** 当前场景所关联设备 */
-const deviceList = ref<DeviceType[]>([]);
-const deviceActive = ref('');
-const deviceType = ref('');
-
-/** 选择设备 */
-function deviceChange(index) {
-  deviceType.value = deviceList.value[index]?.deviceType || '';
-  deviceActive.value = deviceList.value[index]?.deviceType || '';
-}
-
-/** 查询当前场景所关联设备列表 */
-async function getDeviceList() {
-  const { msgTxt = [] } = await getDevice({ devicetype: 'sys', systemID: optionValue.value }).catch(() => {
-    message.error('获取已绑定设备时发生了错误');
-  });
 
-  deviceList.value = msgTxt.reduce((arr, item) => {
-    const data = item.datalist.map((data: any) => {
-      return Object.assign(data, data.readData);
+  /** 当前场景所关联设备 */
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  /** 选择设备 */
+  function deviceChange(index) {
+    deviceType.value = deviceList.value[index]?.deviceType || '';
+    deviceActive.value = deviceList.value[index]?.deviceType || '';
+  }
+
+  /** 查询当前场景所关联设备列表 */
+  async function getDeviceList() {
+    const { msgTxt = [] } = await getDevice({ devicetype: 'sys', systemID: optionValue.value }).catch(() => {
+      message.error('获取已绑定设备时发生了错误');
     });
-    // sys代表场景本身，应该过滤掉去处理该场景下的关联设备
-    if (item.type != 'sys') {
+
+    // 排除场景本身后并处理设备数据
+    deviceList.value = msgTxt.reduce((arr, item) => {
+      // 合并readData
+      const data = item.datalist.map((data: any) => {
+        return Object.assign(data, data.readData);
+      });
+      // sys代表场景本身，应该过滤掉去处理该场景下的关联设备
+      if (item.type === 'sys') return arr;
+
       arr.unshift({
         deviceType: item.type,
-        deviceName: item.typeName || item.datalist[0].typeName,
+        deviceName: item.typeName || item.datalist[0]?.typeName,
         datalist: data,
       });
+      return arr;
+    }, []);
+
+    if (!deviceActive.value) {
+      deviceChange(0);
     }
-    return arr;
-  }, []);
-  if (!deviceActive.value) {
-    deviceChange(0);
   }
-}
-
-let timer: NodeJS.Timeout;
-/** 场景的监测数据 */
-const monitorData = ref<any>({});
-/** 获取本场景下所绑定的设备，将监测数据赋值 */
-async function getMonitor() {
-  if (props.mainConfig.monitorApi) {
-    monitorData.value = await props.mainConfig
-      .monitorApi({
-        deviceType: deviceType.value,
-        deviceId: optionValue.value,
-      })
-      .catch(() => {
+
+  /** 场景的监测数据 */
+  const monitorData = ref<any>({});
+  /** 获取本场景下所绑定的设备，将监测数据赋值 */
+  async function getMonitor() {
+    if (!monitorActive.value) return;
+
+    if (props.mainConfig.monitorApi) {
+      monitorData.value = await props.mainConfig
+        .monitorApi({
+          deviceType: deviceType.value,
+          deviceId: optionValue.value,
+        })
+        .catch(() => {
+          message.error('获取已绑定设备时发生了错误');
+        });
+    } else {
+      const { msgTxt = [] } = await getDevice({ devicetype: 'sys', systemID: optionValue.value }).catch(() => {
         message.error('获取已绑定设备时发生了错误');
       });
-  } else if (optionValue.value) {
-    const { msgTxt = [] } = await getDevice({ devicetype: 'sys', systemID: optionValue.value }).catch(() => {
-      message.error('获取已绑定设备时发生了错误');
-    });
-    const temp = {};
-    msgTxt.forEach((item) => {
-      _.set(temp, item.type, item.datalist);
-    });
-    monitorData.value = temp;
+      monitorData.value = msgTxt.reduce((obj, item) => {
+        _.set(obj, item.type, item.datalist);
+        return obj;
+      }, {});
+    }
   }
-}
-
-/** 密码提示框是否显示 */
-const passwordModalShown = ref(false);
-/** 下发操作时的目标配置 */
-const operatingTarget = ref<Operation>();
-
-/** 操作按钮点击后根据配置弹出确认框，初始化数据 */
-function handleOperate(item: Operation) {
-  if (item.disabled) return;
-  operatingTarget.value = item;
-
-  if (item.showPassword) {
-    passwordModalShown.value = true;
-  } else {
-    Modal.confirm({
-      title: '操作确认',
-      content: `确定要进行${operatingTarget.value.label}操作吗？`,
-      iconType: 'info',
-      onOk: () => handlePasswordOK(),
-    });
+
+  /** 密码提示框是否显示 */
+  const passwordModalShown = ref(false);
+  /** 下发操作时的目标配置 */
+  const operatingTarget = ref<Operation>();
+
+  /** 操作按钮点击后根据配置弹出确认框，初始化数据 */
+  function handleOperate(item: Operation) {
+    if (item.disabled) return;
+    operatingTarget.value = item;
+
+    if (item.showPassword) {
+      passwordModalShown.value = true;
+    } else {
+      Modal.confirm({
+        title: '操作确认',
+        content: `确定要进行${operatingTarget.value.label}操作吗？`,
+        iconType: 'info',
+        onOk: () => handlePasswordOK(),
+      });
+    }
   }
-}
 
-/** 密码输入后确认的回调 */
-function handlePasswordOK(pwd?: string) {
-  if (!operatingTarget.value) return message.error('操作目标不存在');
-  const { onOk = deviceControl, key, value } = operatingTarget.value;
+  /** 密码输入后确认的回调 */
+  function handlePasswordOK(pwd?: string) {
+    if (!operatingTarget.value) return message.error('操作目标不存在');
+    const { onOk = deviceControl, key, value } = operatingTarget.value;
 
-  return onOk(key, value, pwd)
-    .then(() => {
-      passwordModalShown.value = false;
-    })
-    .finally(() => {
-      operatingTarget.value = undefined;
-    });
-}
-
-function deviceControl(key: string, value: string, pwd?: string) {
-  return deviceControlApi({
-    deviceid: optionValue.value,
-    devicetype: deviceType.value,
-    password: pwd,
-    paramcode: key,
-    value: value,
-  })
-    .then((r) => {
-      if (!r.success) throw r.message || '操作失败';
-      message.success('指令下发成功');
-    })
-    .catch((e) => {
-      message.error(typeof e === 'string' ? e : '指令下发失败');
-    });
-}
-
-onMounted(async () => {
-  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
-    optionValue.value = currentRoute.value['query']['id'] as string;
+    return onOk(key, value, pwd)
+      .then(() => {
+        passwordModalShown.value = false;
+      })
+      .finally(() => {
+        operatingTarget.value = undefined;
+      });
   }
-  await getSysDataSource();
-  if (props.mainConfig.timer !== 0) {
-    timer = setInterval(() => {
-      getMonitor();
-    }, props.mainConfig.timer || 5000);
-  } else {
-    getMonitor();
+
+  /** 设备操作指令下发 */
+  function deviceControl(key: string, value: string, pwd?: string) {
+    return deviceControlApi({
+      deviceid: optionValue.value,
+      devicetype: deviceType.value,
+      password: pwd,
+      paramcode: key,
+      value: value,
+    })
+      .then((r) => {
+        if (!r.success) throw r.message || '操作失败';
+        message.success('指令下发成功');
+      })
+      .catch((e) => {
+        message.error(typeof e === 'string' ? e : '指令下发失败');
+      });
   }
-});
 
-onUnmounted(() => {
-  clearInterval(timer);
-});
+  onMounted(async () => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+      optionValue.value = currentRoute.value['query']['id'] as string;
+    }
+    await getSysDataSource();
+    if (props.mainConfig.timer !== 0) {
+      useIntervalFn(() => getMonitor(), props.mainConfig.timer || 5000, { immediateCallback: true });
+    } else {
+      getMonitor();
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.scene-box {
-  --image-tab-group-bg: url('/@/assets/images/vent/tab-group-bg.png');
-  margin-top: 30px;
-  pointer-events: none;
-  .history-group {
-    margin-top: 80px;
-    padding: 0 10px;
-    .history-container {
-      pointer-events: auto;
-      background: #6195af1a;
-      // width: 100%;
-      border: 1px solid #00fffd22;
-      padding: 10px 0;
-      box-shadow: 0 0 20px #44b4ff33 inset;
-    }
-  }
-  .device-button-group {
-    // margin: 0 20px;
-    padding: 0 10px;
-    display: flex;
-    pointer-events: auto;
-    position: relative;
-    &::after {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 2px;
-      top: 30px;
-      left: -1px;
-      border-bottom: 1px solid #0efcff;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  .scene-box {
+    --image-tab-group-bg: url('/@/assets/images/vent/tab-group-bg.png');
+    margin-top: 30px;
+    pointer-events: none;
+    .history-group {
+      margin-top: 80px;
+      padding: 0 10px;
+      .history-container {
+        pointer-events: auto;
+        background: #6195af1a;
+        // width: 100%;
+        border: 1px solid #00fffd22;
+        padding: 10px 0;
+        box-shadow: 0 0 20px #44b4ff33 inset;
+      }
     }
-    .device-button {
-      padding: 4px 15px;
-      position: relative;
+    .device-button-group {
+      // margin: 0 20px;
+      padding: 0 10px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-
-      color: #fff;
-      cursor: pointer;
-      margin: 0 3px;
-
-      &::before {
-        content: '';
+      pointer-events: auto;
+      position: relative;
+      &::after {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 1px solid #6176af;
-        transform: skewX(-38deg);
-        background-color: rgba(0, 77, 103, 85%);
-        z-index: -1;
+        content: '';
+        width: 100%;
+        height: 2px;
+        top: 30px;
+        left: -1px;
+        border-bottom: 1px solid #0efcff;
       }
-    }
-    .device-active {
-      // color: #0efcff;
-      &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      .device-button {
+        padding: 4px 15px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+
+        color: #fff;
+        cursor: pointer;
+        margin: 0 3px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 1px solid #6176af;
+          transform: skewX(-38deg);
+          background-color: rgba(0, 77, 103, 85%);
+          z-index: -1;
+        }
+      }
+      .device-active {
+        // color: #0efcff;
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
       }
     }
   }
-}
-.center-container {
-  width: 100%;
-  height: calc(100% - 150px);
-}
-
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-
-  .input-title {
-    color: #73e8fe;
-    width: auto;
+  .center-container {
+    width: 100%;
+    height: calc(100% - 150px);
   }
 
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88;
-  }
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
 
-  margin-right: 10px;
-}
-
-.button-wrapper {
-  position: relative;
-  top: 30px;
-  left: 500px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: 10px;
-  width: 1165px !important;
-  height: 75px;
-  background: var(--image-tab-group-bg) no-repeat;
-  background-image: 100% 100%;
-  padding: 0 30px;
-  z-index: 10;
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
 
-  .button-box {
-    margin: 0 10px;
-  }
-}
-
-.button-box {
-  position: relative;
-  padding: 5px;
-  border-radius: 5px;
-  width: auto;
-  height: 34px;
-  border: 1px solid var(--vent-base-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--vent-font-color);
-  padding: 0 10px;
-  cursor: pointer;
-  pointer-events: all;
-
-  &:hover {
-    background: var(--vent-device-manager-control-btn-hover);
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88;
+    }
+
+    margin-right: 10px;
   }
 
-  &::before {
-    width: calc(100% - 6px);
-    height: 26px;
-    content: '';
-    position: absolute;
-    top: 3px;
-    right: 0;
-    left: 3px;
-    bottom: 0;
-    z-index: -1;
-    border-radius: inherit;
-    /*important*/
-    background: var(--vent-device-manager-control-btn);
+  .button-wrapper {
+    position: relative;
+    top: 30px;
+    left: 500px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+    width: 1165px !important;
+    height: 75px;
+    background: var(--image-tab-group-bg) no-repeat;
+    background-image: 100% 100%;
+    padding: 0 30px;
+    z-index: 10;
+
+    .button-box {
+      margin: 0 10px;
+    }
   }
-}
 
-.button-box-disable {
-  cursor: not-allowed;
-  border: 1px solid var(--vent-base-border);
+  .button-box {
+    position: relative;
+    padding: 5px;
+    border-radius: 5px;
+    width: auto;
+    height: 34px;
+    border: 1px solid var(--vent-base-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--vent-font-color);
+    padding: 0 10px;
+    cursor: pointer;
+    pointer-events: all;
+
+    &:hover {
+      background: var(--vent-device-manager-control-btn-hover);
+    }
 
-  &:hover {
-    background: none;
+    &::before {
+      width: calc(100% - 6px);
+      height: 26px;
+      content: '';
+      position: absolute;
+      top: 3px;
+      right: 0;
+      left: 3px;
+      bottom: 0;
+      z-index: -1;
+      border-radius: inherit;
+      /*important*/
+      background: var(--vent-device-manager-control-btn);
+    }
   }
 
-  &:before {
-    background: linear-gradient(#5897c299, #4a92a899);
+  .button-box-disable {
+    cursor: not-allowed;
+    border: 1px solid var(--vent-base-border);
+
+    &:hover {
+      background: none;
+    }
+
+    &:before {
+      background: linear-gradient(#5897c299, #4a92a899);
+    }
   }
-}
 </style>

src/views/vent/monitorManager/sprayMonitor/index.vue

@@ -12,8 +12,8 @@
       :alarm-history-config="{}"
       strtype="sys_surface_juejin"
     >
-      <template #default="{ monitorData }">
-        <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
+      <template #default="{ monitorActive }">
+        <div v-show="monitorActive" id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
           <a-spin :spinning="loading" />
           <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
             <!-- <FourBorderBg id="sprayCSS3DEnvA">
@@ -39,245 +39,12 @@
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
   import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  // import { Config } from '../../deviceManager/configurationTable/types';
   import { useInitConfigs } from '../../home/configurable/hooks/useInit';
   import { mountedThree, setModelType } from './spray.three';
-  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { get } from 'lodash-es';
   import { zuhuabengConfigs } from './spray.data';
 
-  const defaultConfigs: Config[] = [
-    {
-      deviceType: '',
-      moduleName: '压力传感器',
-      pageType: 'spray',
-      moduleData: {
-        header: {
-          show: false,
-          readFrom: '',
-          selector: {
-            show: false,
-            value: '',
-          },
-          slot: {
-            show: false,
-            value: '',
-          },
-        },
-        background: {
-          show: false,
-          type: 'video',
-          link: '',
-        },
-        layout: {
-          direction: 'row',
-          items: [
-            {
-              name: 'board',
-              basis: '100%',
-            },
-          ],
-        },
-        board: [
-          {
-            type: 'P',
-            layout: 'label-top',
-            items: [
-              {
-                label: '在线数量',
-                value: '1',
-              },
-              {
-                label: '异常数量',
-                value: '0',
-              },
-            ],
-            readFrom: '',
-          },
-        ],
-      },
-      showStyle: {
-        size: 'width:440px;height:250px;',
-        version: '保德',
-        position: 'top:80px;left:10px;',
-      },
-    },
-    {
-      deviceType: '',
-      moduleName: '喷洒实况',
-      pageType: 'spray',
-      moduleData: {
-        header: {
-          show: false,
-          readFrom: '',
-          selector: {
-            show: false,
-            value: '',
-          },
-          slot: {
-            show: false,
-            value: '',
-          },
-        },
-        background: {
-          show: false,
-          type: 'video',
-          link: '',
-        },
-        layout: {
-          direction: 'row',
-          items: [
-            {
-              name: 'table',
-              basis: '100%',
-            },
-          ],
-        },
-        table: [
-          {
-            type: 'A',
-            columns: [
-              {
-                name: '支架',
-                prop: 'strinstallpos',
-              },
-              {
-                name: '工作状态',
-                prop: 'readData.online_str',
-              },
-            ],
-            readFrom: 'spray_auto',
-          },
-        ],
-        preset: [],
-      },
-      showStyle: {
-        size: 'width:440px;height:430px;',
-        version: '保德',
-        position: 'top:350px;left:10px;',
-      },
-    },
-    {
-      deviceType: '',
-      moduleName: '场景信息总览',
-      pageType: 'spray',
-      moduleData: {
-        header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
-        background: { show: false, type: 'video', link: '' },
-        layout: {
-          direction: 'column',
-          items: [
-            {
-              name: 'list',
-              basis: '50%',
-              overflow: false,
-            },
-            {
-              name: 'partition',
-              basis: 'auto',
-              overflow: false,
-            },
-            {
-              name: 'list',
-              basis: 'auto',
-              overflow: false,
-            },
-            {
-              name: 'partition',
-              basis: 'auto',
-              overflow: false,
-            },
-            {
-              name: 'list',
-              basis: 'auto',
-              overflow: false,
-            },
-          ],
-        },
-        list: [
-          {
-            type: 'L',
-            readFrom: '',
-            items: [
-              {
-                label: '绑定控制箱名称',
-                value: '${spray_auto[0].strinstallpos}',
-              },
-              {
-                label: '控制箱地址',
-                value: '${spray_auto[0].readData.snumber}',
-              },
-              {
-                label: '故障从机',
-                value: '${spray_auto[0].readData.Cjgz}',
-              },
-              {
-                label: '浮球液位报警',
-                value: '${spray_auto[0].readData.minimumgrouting}',
-              },
-              {
-                label: '输送管道压力',
-                value: '${spray_auto[0].readData.zjbhglpaV}',
-              },
-            ],
-          },
-          {
-            type: 'N',
-            readFrom: '',
-            items: [
-              {
-                label: '启动状态',
-                value: '${spray_auto[0].readData.online_str}',
-                color: 'blue',
-              },
-              {
-                label: '报警状态',
-                value: '${spray_auto[0].warnLevel_str}',
-              },
-            ],
-          },
-          {
-            type: 'N',
-            readFrom: '',
-            items: [
-              {
-                label: '启动状态',
-                value: '${spray_auto[0].readData.online_str}',
-                color: 'blue',
-              },
-              {
-                label: '故障状态',
-                value: '${spray_auto[0].readData.warnLevel_str}',
-              },
-            ],
-          },
-        ],
-        partition: [
-          {
-            type: 'A',
-            readFrom: '',
-            layout: 'icon-pre',
-            label: '送料电机',
-            icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-1.png',
-          },
-          {
-            type: 'A',
-            readFrom: '',
-            layout: 'icon-pre',
-            label: '输送电机',
-            icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
-          },
-        ],
-      },
-      showStyle: {
-        size: 'width:440px;height:700px;',
-        version: '原版',
-        position: 'top:80px;right:10px;',
-      },
-    },
-  ];
-
-  const { configs, fetchConfigs } = useInitConfigs();
+  const { configs } = useInitConfigs();
   const loading = ref(false);
 
   // const operations = ref([

src/views/vent/monitorManager/sprayMonitor/backup.vue → src/views/vent/monitorManager/sprayMonitor/tashan.vue

@@ -12,8 +12,8 @@
       :alarm-history-config="{}"
       strtype="sys_surface_juejin"
     >
-      <template #default="{ monitorData }">
-        <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
+      <template #default="{ monitorActive, monitorData }">
+        <div v-show="monitorActive" id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
           <a-spin :spinning="loading" />
           <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
             <FourBorderBg id="sprayCSS3DEnvA">