[Mod 0000] 调整皮带巷智能管控模块中下拉框选择切换后数据不更新的问题

src/views/vent/home/configurable/belt/components/ModuleCommon.vue

@@ -10,7 +10,7 @@
       </template>
       <template #container>
         <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="handleSelect" />
           <Content
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
@@ -23,105 +23,117 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-import Header from './header.vue';
-import ContentBelt from './contentBelt.vue';
-import Content from '../../components/content.vue';
-// import ModuleLeft from './original/moduleLeft.vue';
-// import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref, watch } from 'vue';
-import ventBox1 from './ventBoxBelt.vue';
-import { openWindow } from '/@/utils';
-import { getFormattedText } from '../../hooks/helper';
-import { useInitModule } from '../../hooks/useInit';
-// import { ModuleProps } from '../types';
+  import Header from './header.vue';
+  import ContentBelt from './contentBelt.vue';
+  import Content from '../../components/content.vue';
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed, ref, watch } from 'vue';
+  import ventBox1 from './ventBoxBelt.vue';
+  import { openWindow } from '/@/utils';
+  import { getFormattedText } from '../../hooks/helper';
+  import { useInitModule } from '../../hooks/useInit';
+  // import { ModuleProps } from '../types';
 
-const props = defineProps<{
-  pageType: string;
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-  chartData?: any;
-}>();
-defineEmits(['close', 'click']);
+  const props = defineProps<{
+    pageType: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+    chartData?: any;
+  }>();
+  defineEmits(['close', 'click']);
 
-const { header } = props.moduleData;
+  const { header } = props.moduleData;
 
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
 
-const selectedData = ref();
+  const selectedData = ref();
 
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-});
-const pageType = computed(() => {
-  return props.pageType || '';
-});
-const capitalizedPosition = computed(() => {
-  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-});
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
+  });
+  const pageType = computed(() => {
+    return props.pageType || '';
+  });
+  const capitalizedPosition = computed(() => {
+    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+  });
 
-// 根据配置里的定位判断应该使用哪个class
-function getModuleClass({ size, position }) {
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-common module-common-longer';
+  // 根据配置里的定位判断应该使用哪个class
+  function getModuleClass({ size, position }) {
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-common module-common-longer';
+    }
+    return 'module-common';
   }
-  return 'module-common';
-}
 
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(getFormattedText(props.data, to));
-}
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(props.data, to));
+  }
 
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    if (!selectedDeviceID.value) {
-      console.log(selectedDeviceID.value, '------');
+  function handleSelect(selectedItem: any) {
+    if (!selectedItem) return;
 
-      selectedDeviceID.value = options.value[0]?.value;
+    if (selectedItem.id !== undefined && selectedItem.id !== null) {
+      // 确保这个 ID 在当前的 options 里存在
+      const isValid = options.value.some((opt) => opt.value === selectedItem.id);
+      if (isValid) {
+        selectedDeviceID.value = selectedItem.id;
+      }
     }
-  },
-  {
-    immediate: true,
   }
-);
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      if (!selectedDeviceID.value) {
+        console.log(selectedDeviceID.value, '------');
+
+        selectedDeviceID.value = options.value[0]?.value;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.module-common .box1-center {
-  height: calc(100% - 48px);
-}
+  .module-common .box1-center {
+    height: calc(100% - 48px);
+  }
 
-:deep(.box1-center) {
-  height: calc(100% - 48px);
-}
-:deep(.box1-center > .box-container) {
-  height: 100%;
-  padding: 0 !important;
-  width: 100% !important;
-}
-.module-common-longer {
-  :deep(.box1-top) {
-    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-    background-image: url('/@/assets/images/beltFire/1-1.png');
+  :deep(.box1-center) {
+    height: calc(100% - 48px);
+  }
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
   }
-  :deep(.box1-bottom) {
-    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-    background-image: url('/@/assets/images/beltFire/1-2.png');
+  .module-common-longer {
+    :deep(.box1-top) {
+      --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
+      background-image: url('/@/assets/images/beltFire/1-1.png');
+    }
+    :deep(.box1-bottom) {
+      --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
+      background-image: url('/@/assets/images/beltFire/1-2.png');
+    }
   }
-}
 </style>