[Feat 0000] 可配置首页5.0版本适配数据模式切换功能

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

@@ -13,64 +13,75 @@
         <MonitorCenter />
       </template>
     </a-dropdown> -->
-    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-
-    <template v-if="isOriginal">
-      <ModuleOriginal
-        v-for="cfg in configs"
-        :key="cfg.deviceType"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="data"
-        :visible="true"
-      />
-    </template>
-    <template v-else-if="isCommon">
-      <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"
-        :data="data"
-        :visible="true"
-      />
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="route.query.deviceType">
+      <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
+        <VentModal />
+        <div class="switch-button icon-goto right-5px" @click="goMicroApp(true)"></div>
+      </div>
     </template>
     <template v-else>
-      <!-- 下面是正常展示的各新版模块 -->
-      <ModuleEnhanced
-        v-for="cfg in enhancedConfigs"
-        :key="cfg.deviceType"
-        :visible="cfg.visible"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="data"
-        @close="cfg.visible = false"
-      />
-      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
-        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
-          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+      <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+      <template v-if="isOriginal">
+        <ModuleOriginal
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+        />
+      </template>
+      <template v-else-if="isCommon">
+        <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"
+          :data="data"
+          :visible="true"
+        />
+      </template>
+      <template v-else>
+        <!-- 下面是正常展示的各新版模块 -->
+        <ModuleEnhanced
+          v-for="cfg in enhancedConfigs"
+          :key="cfg.deviceType"
+          :visible="cfg.visible"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          @close="cfg.visible = false"
+        />
+        <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+        <div class="pos-absolute top-70px left-460px z-3">
+          <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+            <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+          </div>
         </div>
+      </template>
+      <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+        <VentModal />
+        <div
+          v-if="sysDataType === 'all'"
+          :class="{ 'realtime-mode': isDataRealTime }"
+          alt="切换数据模式"
+          class="switch-button report-mode right-50px"
+          @click="switchDataMode"
+        ></div>
+        <div class="switch-button icon-goto right-5px" @click="goMicroApp()"></div>
       </div>
     </template>
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
-      <div :class="{ 'realtime-mode': isDataRealTime }" alt="切换数据模式" class="switch-button report-mode right-50px" @click="switchDataMode"></div>
-      <div
-        class="switch-button icon-goto right-5px"
-        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
-      ></div>
-    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref } from 'vue';
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
@@ -80,18 +91,24 @@
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { list } from './configurable.api';
-  import { useRoute } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
   // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
 
+  const { sysDataType } = useGlobSetting();
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
   const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
   const route = useRoute();
-  const isDataRealTime = ref(false);
+  const router = useRouter();
+  const isDataRealTime = ref(sysDataType === 'monitor');
   let interval: number | undefined;
 
   function switchDataMode() {
     isDataRealTime.value = !isDataRealTime.value;
+    refresh();
+  }
 
+  function refresh() {
     fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
       // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
       updateEnhancedConfigs(configs.value);
@@ -100,20 +117,44 @@
     });
   }
 
-  function redirectTo(url) {
-    window.open(url);
-  }
-
-  onMounted(() => {
-    fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-      // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
-      updateEnhancedConfigs(configs.value);
-
-      list({}).then(updateData);
-    });
+  function initInterval() {
     setInterval(() => {
       list({}).then(updateData);
     }, 60000);
+  }
+
+  function goMicroApp(test = false) {
+    if (test) {
+      router.push({ path: route.path });
+    } else {
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          type: 'model3D',
+          deviceType: 'model3D',
+        },
+      });
+    }
+  }
+
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.deviceType) {
+        // 仅需要展示子应用，模拟 unmounted
+        clearInterval(interval);
+      } else {
+        // 模拟 mounted
+        refresh();
+        initInterval();
+      }
+    }
+  );
+
+  onMounted(() => {
+    refresh();
+    initInterval();
   });
 
   onUnmounted(() => {