[Fix 0000] 公司端看板翻页问题修复

src/views/vent/home/billboard/components/DustStatus.vue

@@ -6,7 +6,8 @@
   import CommonTable from './CommonTable.vue';
   import CommonTitle from './CommonTitle.vue';
   import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
-  import { onMounted, ref, shallowRef } from 'vue';
+  import { ref, shallowRef, watch } from 'vue';
+  import _ from 'lodash-es';
   // import mapComponent from './3Dmap/index.vue';
 
   const props = withDefaults(
@@ -22,28 +23,32 @@
 
   function fetchData() {
     const info = props.data.dustInfo;
-    if (info) {
-      const trans = {
-        0: '低风险',
-        101: '低风险',
-        102: '一般风险',
-        103: '较大风险',
-        104: '重大风险',
-        201: '报警',
-        1001: '网络断开',
+    if (!info) return;
+    const trans = {
+      0: '低风险',
+      101: '低风险',
+      102: '一般风险',
+      103: '较大风险',
+      104: '重大风险',
+      201: '报警',
+      1001: '网络断开',
+    };
+    risk.value = trans[_.get(info, 'dustWarnLevel', 0)];
+    tableData.value = _.get(info, 'dustTypeList', []).map((e) => {
+      return {
+        ...e,
+        warnLevelStr: trans[e.warnLevel],
       };
-      risk.value = trans[info.dustWarnLevel];
-      tableData.value = info.dustTypeList.map((e) => {
-        return {
-          ...e,
-          warnLevelStr: trans[e.warnLevel],
-        };
-      });
-    }
+    });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

src/views/vent/home/billboard/components/FileOverview.vue

@@ -8,8 +8,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, shallowRef } from 'vue';
+  import { watch, shallowRef } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
+  import _ from 'lodash-es';
 
   const props = withDefaults(
     defineProps<{
@@ -27,12 +28,19 @@
   });
 
   function fetchData() {
-    fileData.value = props.data.fileServerInfo || DEFAULT_TEST_DATA.fileServerInfo;
+    const info = props.data.fileServerInfo;
+    if (!info) return;
+    fileData.value = info;
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/billboard/components/FireStatus.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="ts" setup>
   import _ from 'lodash-es';
-  import { onMounted, ref, shallowRef } from 'vue';
+  import { watch, ref, shallowRef } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
   import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST, FIRE_STATUS_IGNORE_TRANSLATION_KEYS } from '../billboard.data';
@@ -32,7 +32,8 @@
   const listData = shallowRef<any>({});
 
   function fetchData() {
-    const info = props.data.fireInfo || DEFAULT_TEST_DATA.fireInfo;
+    const info = props.data.fireInfo;
+    if (!info) return;
     const riskTrans = {
       0: '低风险',
       101: '低风险',
@@ -51,7 +52,7 @@
       201: '报警',
       1001: '网络断开',
     };
-    risk.value = riskTrans[info.fireWarnLevel];
+    risk.value = riskTrans[_.get(info, 'fireWarnLevel', 0)];
     _.forEach(info, (val, key) => {
       if (FIRE_STATUS_IGNORE_TRANSLATION_KEYS.includes(key)) return;
       info[key] = warnTrans[val];
@@ -59,8 +60,13 @@
     listData.value = info;
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

src/views/vent/home/billboard/components/GasStatus.vue

@@ -8,10 +8,11 @@
   <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" />
 </template>
 <script lang="ts" setup>
+  import _ from 'lodash-es';
   import { Row, Col } from 'ant-design-vue';
   import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { onMounted, shallowRef } from 'vue';
+  import { watch, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -28,7 +29,8 @@
   const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
 
   function fetchData() {
-    const info = props.data.gasInfo || DEFAULT_TEST_DATA.gasInfo;
+    const info = props.data.gasInfo;
+    if (!info) return;
     const riskTrans = {
       0: '低风险',
       101: '低风险',
@@ -48,10 +50,10 @@
       1001: '网络断开',
     };
     headerData.value = {
-      gasWarnLevel: riskTrans[info.gasWarnLevel],
+      gasWarnLevel: riskTrans[_.get(info, 'gasWarnLevel', 0)],
       gasJudgeLevel: '低风险',
     };
-    tableData.value = info.gasTypeList.map((e) => {
+    tableData.value = _.get(info, 'gasTypeList', []).map((e) => {
       return {
         ...e,
         warnLevelStr: trans[e.warnLevel],
@@ -59,8 +61,13 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

src/views/vent/home/billboard/components/Summary.vue

@@ -11,7 +11,7 @@
   import { Row, Col } from 'ant-design-vue';
   import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { onMounted, shallowRef } from 'vue';
+  import { watch, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -50,8 +50,13 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

src/views/vent/home/billboard/components/VentilationStatus.vue

@@ -11,14 +11,14 @@
   </Row>
 </template>
 <script lang="ts" setup>
+  import _ from 'lodash-es';
   import { Row, Col } from 'ant-design-vue';
   import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
   import { BillboardType, DEFAULT_TEST_DATA, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
-  import { onMounted, ref, shallowRef } from 'vue';
-  import CommonTitle from './CommonTitle.vue';
-  import _ from 'lodash-es';
+  import { ref, shallowRef, watch } from 'vue';
+  // import CommonTitle from './CommonTitle.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = withDefaults(
@@ -36,14 +36,15 @@
   const expandedKeys = ref<string[]>([]);
 
   function fetchData() {
-    const info = props.data.ventInfo || DEFAULT_TEST_DATA.ventInfo;
+    const info = props.data.ventInfo;
+    if (!info) return;
     const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
     // ventilatorCount.value = info.fanMainList.length.toString();
     headerData.value = info;
     expandedKeys.value = [];
 
     // 处理树状图的数据
-    treeData.value = info.fanMainList.map((mainfan, i) => {
+    treeData.value = _.get(info, 'fanMainList', []).map((mainfan, i) => {
       expandedKeys.value.push(i.toString());
       return {
         title: `${prefix}${mainfan[prop]}${suffix}`,
@@ -67,9 +68,14 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {
@@ -85,7 +91,7 @@
     // }
 
     .ventilate-status-card__tree {
-      height: 1650px;
+      height: 160px;
       overflow: auto;
     }
   }