fix(DynamicPage): 修复组态页面数据不更新的问题

ui/src/views/hnyzConfiguratePage/DynamicPage.vue

@@ -78,7 +78,7 @@
 
 <script setup>
 import PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue'
-import { computed, reactive, onBeforeUnmount } from 'vue'
+import { computed, reactive, onBeforeUnmount, ref, onMounted, watch } from 'vue'
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { stompClient } from '@/utils/ws/stompClient'
 import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
@@ -119,7 +119,8 @@ const {
     pipeConfig,
     deviceConfigGroup,
     modelMap,
-    pageParams
+    pageParams,
+    fetchPageConfig
 } = useEquipmentLayout(pageCode) //  直接传 computed，自动监听切换
 
 // 组件辅助方法
@@ -139,24 +140,45 @@ const deviceDataGroup = reactive({
     SENSORS: []
 })
 
-// 更新实时数据订阅
-function updatePageConfig() {
-    updateZTPageConfig(pageCode.value, pageParams.value)
-        .then(() => {
-            stompClient.subscribeToPage(pageCode.value, (data) => {
-                deviceDataGroup.VALVES = Object.values(data?.VALVES || {})
-                deviceDataGroup.PUMPS = Object.values(data?.PUMPS || {})
-                deviceDataGroup.SENSORS = Object.values(data?.SENSORS || {})
-            })
-        })
-        .catch(err => {
-            console.log("页面配置失败：", err)
+// 已订阅的页面，避免重复订阅
+const currentSubscribedCode = ref(null)
+
+// 根据路由变化：先获取页面参数，再更新页面配置，最后订阅（若未订阅）
+async function setupPageRealtime(code) {
+    if (!code) return
+    try {
+        // 切页：如已订阅旧页，先退订
+        if (currentSubscribedCode.value && currentSubscribedCode.value !== code) {
+            stompClient.unsubscribeFromPage(currentSubscribedCode.value)
+            currentSubscribedCode.value = null
+        }
+
+        // 1) 获取页面参数
+        await fetchPageConfig(code)
+        if (!pageParams.value || Object.keys(pageParams.value).length === 0) return
+
+        // 2) 更新页面配置
+        await updateZTPageConfig(code, pageParams.value)
+
+        // 3) 订阅（如果尚未订阅该页面）
+        if (currentSubscribedCode.value === code) return
+        stompClient.subscribeToPage(code, (data) => {
+            deviceDataGroup.VALVES = Object.values(data?.VALVES || {})
+            deviceDataGroup.PUMPS = Object.values(data?.PUMPS || {})
+            deviceDataGroup.SENSORS = Object.values(data?.SENSORS || {})
         })
+        currentSubscribedCode.value = code
+    } catch (err) {
+        console.log("页面实时配置流程失败：", err)
+    }
 }
 
 // 页面卸载时取消订阅
 onBeforeUnmount(() => {
-    stompClient.unsubscribeFromPage(pageCode.value)
+    if (currentSubscribedCode.value) {
+        stompClient.unsubscribeFromPage(currentSubscribedCode.value)
+        currentSubscribedCode.value = null
+    }
 })
 
 // 数据 helper
@@ -167,8 +189,10 @@ const { evaluateCondition, getPipeType } = useValveHelper(
     computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS])
 )
 
-// 初始化订阅
-updatePageConfig()
+// 监听路由 pageCode：触发获取参数 → 更新配置 → 订阅
+watch(pageCode, (code) => {
+    setupPageRealtime(code)
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>