[Feat 0000] 看板修改更新逻辑于样式，添加加载情景

src/views/vent/home/billboard/billboard.data.ts

@@ -466,186 +466,189 @@ export const DUST_RISK_CONFIG = [
 export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息
-    totalNum: 0,
+    totalNum: '/',
     dustTypeList: [
       {
         deviceType: '/',
-        warnLevel: 0,
-        num: 0,
-        typeName: '/',
-      },
-      {
-        deviceType: '/',
-        warnLevel: 0,
-        num: 0,
+        warnLevel: '/',
+        num: '/',
         typeName: '/',
       },
     ],
-    dustWarnLevel: 0, // 矿井粉尘风险性等级
+    dustWarnLevel: '/', // 矿井粉尘风险性等级
   },
   fileServerInfo: {
-    totalNum: 0, // 文档总数
-    approvalNum: 0, // 待审批文档
+    fileServerInfo: {
+      totalNum: '/', // 文档总数
+      approvalNum: '/', // 待审批文档
+    },
+    warnInfo: {
+      ventSWarnInfo: {
+        totalNum: '/',
+        maxWarnLevel: '/',
+      },
+      gasSWarnInfo: {
+        totalNum: '/',
+        maxWarnLevel: '/',
+      },
+      dustSWarnInfo: {
+        totalNum: '/',
+        maxWarnLevel: '/',
+      },
+      synthesizeSWarnInfo: {
+        totalNum: '/',
+        maxWarnLevel: '/',
+      },
+      fireSWarnInfo: {
+        totalNum: '/',
+        maxWarnLevel: '/',
+      },
+      allNum: '/',
+    },
   },
   fireInfo: {
-    tempMax: 29,
-    fireWarnLevel: 1001,
+    tempMax: '/',
+    fireWarnLevel: '/',
     bundletubeInfo: {
-      typeName: '束管',
-      maxValueInstallPos: '31310采空区50m',
-      tempMax: 0,
-      coval: '2.0',
-      ch2val: '0.0',
-      deviceType: 'bundletube_auto',
-      warnLevel: 1001,
-      maxValue: 2,
-      o2val: '10.31',
-      totalNum: 12,
-      chval: '0.0',
-      gasval: '0.0',
-      time: '2024-05-31 16:34:04',
-      isRun: '-2',
-      co2val: '7.42',
+      typeName: '/',
+      maxValueInstallPos: '/',
+      tempMax: '/',
+      coval: '/',
+      ch2val: '/',
+      deviceType: '/',
+      warnLevel: '/',
+      maxValue: '/',
+      o2val: '/',
+      totalNum: '/',
+      chval: '/',
+      gasval: '/',
+      time: '/',
+      isRun: '/',
+      co2val: '/',
     },
     smokeSensorInfo: {
-      deviceType: 'modelsensor_smoke',
-      tempMax: 0,
-      warnLevel: 0,
-      totalNum: 30,
-      maxValue: 0,
-      typeName: '烟雾传感器',
-      maxValueInstallPos: '12煤井底停车场',
+      deviceType: '/',
+      tempMax: '/',
+      warnLevel: '/',
+      totalNum: '/',
+      maxValue: '/',
+      typeName: '/',
+      maxValueInstallPos: '/',
     },
     fiberInfo: {
-      deviceType: 'fiber_normal',
-      tempMax: 0,
-      warnLevel: 0,
-      totalNum: 4,
-      maxValue: 25,
-      typeName: '光纤测温',
-      maxValueInstallPos: '31煤中央变电所电缆沟-通道一',
+      deviceType: '/',
+      tempMax: '/',
+      warnLevel: '/',
+      totalNum: '/',
+      maxValue: '/',
+      typeName: '/',
+      maxValueInstallPos: '/',
     },
     tempSensorInfo: {
-      deviceType: 'modelsensor_temperature',
-      tempMax: 29,
-      warnLevel: 0,
-      totalNum: 51,
-      maxValue: 29,
-      typeName: '温度传感器',
-      maxValueInstallPos: '主通风机房配电室',
+      deviceType: '/',
+      tempMax: '/',
+      warnLevel: '/',
+      totalNum: '/',
+      maxValue: '/',
+      typeName: '/',
+      maxValueInstallPos: '/',
     },
   },
   gasInfo: {
-    gasWarnLevel: 0, // 瓦斯风险等级
+    gasWarnLevel: '/', // 瓦斯风险等级
     gasTypeList: [
       {
-        warnLevel: 0,
-        num: 0,
+        warnLevel: '/',
+        num: '/',
         typeName: '/',
       },
     ],
   },
   ventInfo: {
     //通风系统信息
-    totallength: 0, //矿井巷道总长度
-    zonghuifeng: '0', //总回风
-    fanMainList: [
-      {
-        sqzlfb: '/',
-        strname: '/',
-        strinstallpos: '/',
-        Fan1m3: '/',
-        Fan2m3: '/',
-      },
-    ],
-    xufengliang: 0, //总需风量
+    totallength: '/', //矿井巷道总长度
+    zonghuifeng: '/', //总回风
+    fanMainList: [],
+    xufengliang: '/', //总需风量
     zongjinfeng: '/', //总进风
   },
   sys_warndata: {
     info: {
       sysInfo: {
         ventS: {
-          maxLevel: 0,
-          netstatus: 0,
+          maxLevel: '/',
+          netstatus: '/',
           code: '/',
           levelstatus: '/',
           maxLevel_str: '/',
           name: '/',
-          count: 0,
+          count: '/',
           status: '/',
           maxLevel_status: '/',
         },
         fireS: {
-          maxLevel: 0,
+          maxLevel: '/',
           code: '/',
           maxLevel_str: '/',
-          count: 0,
-          netstatus: 0,
+          count: '/',
+          netstatus: '/',
           levelstatus: '/',
           name: '/',
           status: '/',
           maxLevel_status: '/',
         },
         synthesizeS: {
-          maxLevel: 0,
+          maxLevel: '/',
           netstatus: 1,
-          code: 'synthesizeS',
-          levelstatus: '低风险',
-          maxLevel_str: '正常',
-          name: '综合',
-          count: 0,
-          status: '正常',
-          maxLevel_status: '低风险',
+          code: '/',
+          levelstatus: '/',
+          maxLevel_str: '/',
+          name: '/',
+          count: '/',
+          status: '/',
+          maxLevel_status: '/',
         },
         dustS: {
-          maxLevel: 0,
-          netstatus: 0,
-          code: 'dustS',
-          levelstatus: '低风险',
-          maxLevel_str: '正常',
-          name: '防尘',
-          count: 0,
-          status: '正常',
-          maxLevel_status: '低风险',
+          maxLevel: '/',
+          netstatus: '/',
+          code: '/',
+          levelstatus: '/',
+          maxLevel_str: '/',
+          name: '/',
+          count: '/',
+          status: '/',
+          maxLevel_status: '/',
         },
         gasS: {
-          maxLevel: 0,
-          netstatus: 0,
-          code: 'gasS',
-          levelstatus: '低风险',
-          maxLevel_str: '正常',
+          maxLevel: '/',
+          netstatus: '/',
+          code: '/',
+          levelstatus: '/',
+          maxLevel_str: '/',
           devices: [],
-          name: '瓦斯',
-          count: 0,
-          status: '正常',
-          maxLevel_status: '低风险',
+          name: '/',
+          count: '/',
+          status: '/',
+          maxLevel_status: '/',
         },
         deviceWarnInfo: {
-          maxLevel: 101,
-          levelstatus: '低风险',
-          maxLevel_str: '低风险预警',
-          status: '异常',
-          devMaxlevel_status: '低风险预警',
+          maxLevel: '/',
+          levelstatus: '/',
+          maxLevel_str: '/',
+          status: '/',
+          devMaxlevel_status: '/',
         },
       },
     },
   },
-  warn: {
-    allNum: 19,
-    synthesizeSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //安全监控
-    ventSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //通风
-    dustSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //粉尘
-    gasSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //瓦斯
-    fireSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //火灾
-  },
   dustRisk: {
-    fxdj: '4',
-    cds: 3,
-    zxcds: 2,
-    cdbjs: 1,
-    jcsbs: 0,
+    fxdj: '/',
+    cds: '/',
+    zxcds: '/',
+    cdbjs: '/',
+    jcsbs: '/',
   },
-  orgname: '/',
+  orgname: '加载中...',
   orgcode: '/',
   ip: 'localhost',
 };

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

@@ -1,24 +1,22 @@
 <template>
-  <div class="table">
-    <div class="table__content">
-      <div class="table__content_label">
-        <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
-      </div>
-      <Collapse v-model:activeKey="avtiveCollapse" ghost class="table__content_list" :style="{ height: contentHeight }">
-        <CollapsePanel v-for="(item, index) in data" :key="`svvhbct-${index}`" class="table__content_list_row" :showArrow="showArrow">
-          <template #header>
-            <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }">
-              <slot :name="t.prop" :scope="item">
-                <span>{{ get(item, t.prop) }}</span>
-              </slot>
-            </div>
-          </template>
-          <template #default>
-            <p v-for="(t, i) in collapses" :key="`svvhbctc-${i}`" class="table__content_list_collapse"> {{ t.name }}：{{ get(item, t.prop) }} </p>
-          </template>
-        </CollapsePanel>
-      </Collapse>
+  <div class="table__content">
+    <div class="table__content_label">
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
     </div>
+    <Collapse v-model:activeKey="avtiveCollapse" ghost class="table__content_list" :style="{ height: contentHeight }">
+      <CollapsePanel v-for="(item, index) in data" :key="`svvhbct-${index}`" class="table__content_list_row" :showArrow="showArrow">
+        <template #header>
+          <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }">
+            <slot :name="t.prop" :scope="item">
+              <span>{{ get(item, t.prop) }}</span>
+            </slot>
+          </div>
+        </template>
+        <template #default>
+          <p v-for="(t, i) in collapses" :key="`svvhbctc-${i}`" class="table__content_list_collapse"> {{ t.name }}：{{ get(item, t.prop) }} </p>
+        </template>
+      </CollapsePanel>
+    </Collapse>
   </div>
 </template>
 <script lang="ts" setup>
@@ -65,6 +63,7 @@
 
   .table__content {
     height: 100%;
+    width: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -86,7 +85,7 @@
 
     .table__content_list {
       height: calc(100% - 32px);
-      width: 378px;
+      width: 366px;
       display: flex;
       flex-direction: column;
       // justify-content: space-around;
@@ -100,6 +99,7 @@
         // justify-content: space-around;
         // align-items: flex-start;
         background: url('@/assets/images/company/content-text.png') no-repeat;
+        background-size: 100% auto;
         color: @white;
         padding: 5px 0;
         // span {
@@ -119,4 +119,9 @@
     padding: 0;
     color: @white;
   }
+
+  :deep(.zxm-collapse > .zxm-collapse-item > .zxm-collapse-header .zxm-collapse-arrow) {
+    position: absolute;
+    top: 3px;
+  }
 </style>

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

@@ -9,9 +9,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { shallowRef, onMounted } from 'vue';
+  import { computed } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, DUST_RISK_CONFIG } from '../billboard.data';
-  import _ from 'lodash-es';
   import { get } from '../utils';
 
   const props = withDefaults(
@@ -24,22 +23,9 @@
   );
   defineEmits(['click']);
 
-  const dustRiskData = shallowRef<BillboardType['dustRisk']>({
-    fxdj: '低',
-    cds: 99,
-    zxcds: 99,
-    cdbjs: 0,
-    jcsbs: 99,
-  });
-
-  function fetchData() {
+  const dustRiskData = computed<BillboardType['dustRisk']>(() => {
     const info = props.data.dustRisk;
-    if (!info) return;
-    dustRiskData.value = info;
-  }
-
-  onMounted(() => {
-    fetchData();
+    return info;
   });
 </script>
 

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

@@ -6,7 +6,7 @@
   import CollapseTable from './CollapseTable.vue';
   import CommonTitle from './CommonTitle.vue';
   import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
-  import { ref, shallowRef, onMounted } from 'vue';
+  import { computed } from 'vue';
   import { get } from '../utils';
   // import mapComponent from './3Dmap/index.vue';
 
@@ -18,32 +18,28 @@
       data: () => DEFAULT_TEST_DATA,
     }
   );
-  const risk = ref('低风险');
-  const tableData = shallowRef<any[]>([]);
+  const trans = {
+    0: '低风险',
+    101: '低风险',
+    102: '一般风险',
+    103: '较大风险',
+    104: '重大风险',
+    201: '报警',
+    1001: '网络断开',
+  };
 
-  function fetchData() {
+  const risk = computed(() => {
     const info = props.data.dustInfo;
-    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 trans[get(info, 'dustWarnLevel', 0)];
+  });
+  const tableData = computed(() => {
+    const info = props.data.dustInfo;
+    return get(info, 'dustTypeList', []).map((e) => {
       return {
         ...e,
         warnLevelStr: trans[e.warnLevel],
       };
     });
-  }
-
-  onMounted(() => {
-    fetchData();
   });
 </script>
 <style lang="less" scoped></style>

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

@@ -8,9 +8,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { shallowRef, onMounted } from 'vue';
+  import { computed } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
-  import _ from 'lodash-es';
 
   const props = withDefaults(
     defineProps<{
@@ -22,19 +21,10 @@
   );
   defineEmits(['click']);
 
-  const fileData = shallowRef<BillboardType['fileServerInfo']>({
-    totalNum: 0,
-    approvalNum: 0,
-  });
-
-  function fetchData() {
-    const info = props.data.fileServerInfo;
-    if (!info) return;
-    fileData.value = info;
-  }
-
-  onMounted(() => {
-    fetchData();
+  const fileData = computed<BillboardType['fileServerInfo']['fileServerInfo']>(() => {
+    // 返回的数据中有两种类型，适配之
+    const info = props.data.fileServerInfo.fileServerInfo || props.data.fileServerInfo;
+    return info;
   });
 </script>
 

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

@@ -5,7 +5,14 @@
     <Collapse ghost class="fire_list">
       <CollapsePanel class="fire_list_item" v-for="(item, i) in FIRE_STATUS_LIST" :key="`svvhbcfcp-${i}`" :showArrow="false">
         <template #header>
-          <ListItem :key="item.icon" :icon="item.icon" :label="item.label" :value="get(listData, item.prop)" :type="i % 2 ? 'green' : 'blue'" />
+          <ListItem
+            class="mt-5px mb-5px"
+            :key="item.icon"
+            :icon="item.icon"
+            :label="item.label"
+            :value="get(listData, item.prop)"
+            :type="i % 2 ? 'green' : 'blue'"
+          />
         </template>
         <template #default>
           <p v-for="(t, ix) in item.collapses" :key="`svvhbcfcp-${i}${ix}`" class="fire_list_collapse"> {{ t.name }}：{{ get(listData, t.prop) }} </p>
@@ -17,8 +24,7 @@
 <script lang="ts" setup>
   import { Collapse, CollapsePanel } from 'ant-design-vue';
   import { get } from '../utils';
-  import _ from 'lodash-es';
-  import { ref, shallowRef, onMounted } from 'vue';
+  import { computed } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
   import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
@@ -32,32 +38,31 @@
     }
   );
 
-  const risk = ref('低风险');
+  const riskTrans = {
+    0: '低风险',
+    101: '低风险',
+    102: '普通风险',
+    103: '较高风险',
+    104: '高风险',
+    201: '低风险',
+    1001: '低风险',
+  };
+  const warnTrans = {
+    0: '低风险',
+    101: '低风险',
+    102: '一般风险',
+    103: '较大风险',
+    104: '重大风险',
+    201: '报警',
+    1001: '网络断开',
+  };
 
-  const listData = shallowRef<any>({});
-
-  function fetchData() {
+  const risk = computed(() => {
+    const info = props.data.fireInfo;
+    return riskTrans[get(info, 'fireWarnLevel', 0)];
+  });
+  const listData = computed(() => {
     const info = props.data.fireInfo;
-    if (!info) return;
-    const riskTrans = {
-      0: '低风险',
-      101: '低风险',
-      102: '普通风险',
-      103: '较高风险',
-      104: '高风险',
-      201: '低风险',
-      1001: '低风险',
-    };
-    const warnTrans = {
-      0: '低风险',
-      101: '低风险',
-      102: '一般风险',
-      103: '较大风险',
-      104: '重大风险',
-      201: '报警',
-      1001: '网络断开',
-    };
-    risk.value = riskTrans[get(info, 'fireWarnLevel', 0)];
     const value = {};
     FIRE_STATUS_LIST.forEach((cfg) => {
       value[cfg.prop] = get(warnTrans, get(info, cfg.prop), '低风险');
@@ -65,11 +70,7 @@
         value[el.prop] = get(info, el.prop);
       });
     });
-    listData.value = value;
-  }
-
-  onMounted(() => {
-    fetchData();
+    return value;
   });
 </script>
 <style lang="less" scoped>

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

@@ -8,11 +8,10 @@
   <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" content-height="160px" />
 </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, GAS_COLLAPSES, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { onMounted, shallowRef } from 'vue';
+  import { computed } from 'vue';
   import CollapseTable from './CollapseTable.vue';
   import { get } from '../utils';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -26,45 +25,41 @@
     }
   );
 
-  const headerData = shallowRef({});
-  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
+  const riskTrans = {
+    0: '低风险',
+    101: '低风险',
+    102: '普通风险',
+    103: '较高风险',
+    104: '高风险',
+    201: '低风险',
+    1001: '低风险',
+  };
+  const trans = {
+    0: '低风险',
+    101: '低风险',
+    102: '一般风险',
+    103: '较大风险',
+    104: '重大风险',
+    201: '报警',
+    1001: '网络断开',
+  };
 
-  function fetchData() {
+  const headerData = computed(() => {
     const info = props.data.gasInfo;
-    if (!info) return;
-    const riskTrans = {
-      0: '低风险',
-      101: '低风险',
-      102: '普通风险',
-      103: '较高风险',
-      104: '高风险',
-      201: '低风险',
-      1001: '低风险',
-    };
-    const trans = {
-      0: '低风险',
-      101: '低风险',
-      102: '一般风险',
-      103: '较大风险',
-      104: '重大风险',
-      201: '报警',
-      1001: '网络断开',
-    };
-    headerData.value = {
+    return {
       gasWarnLevel: riskTrans[get(info, 'gasWarnLevel', 0)],
-      // gasJudgeLevel: '低风险',
       gasJudgeLevel: props.data.orgcode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯',
     };
-    tableData.value = get(info, 'gasTypeList', []).map((e) => {
+  });
+
+  const tableData = computed<BillboardType['gasInfo']['gasTypeList']>(() => {
+    const info = props.data.gasInfo;
+    return get(info, 'gasTypeList', []).map((e) => {
       return {
         ...e,
         warnLevelStr: trans[e.warnLevel],
       };
     });
-  }
-
-  onMounted(() => {
-    fetchData();
   });
 </script>
 <style lang="less" scoped></style>

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

@@ -16,7 +16,7 @@
   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 { ref, shallowRef, onMounted } from 'vue';
+  import { ref, computed } from 'vue';
   import { get } from '../utils';
   // import CommonTitle from './CommonTitle.vue';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -31,21 +31,18 @@
   );
 
   // const ventilatorCount = ref('0');
-  const headerData = shallowRef({});
-  const treeData = shallowRef<TreeProps['treeData']>([]);
-  const expandedKeys = ref<string[]>([]);
-
-  function fetchData() {
+  const headerData = computed(() => {
     const info = props.data.ventInfo;
-    if (!info) return;
+    return info;
+  });
+  const treeData = computed<TreeProps['treeData']>(() => {
+    const info = props.data.ventInfo;
+    const isInit = !expandedKeys.value.length;
     const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
-    // ventilatorCount.value = info.fanMainList.length.toString();
-    headerData.value = info;
-    expandedKeys.value = [];
-
-    // 处理树状图的数据
-    treeData.value = get(info, 'fanMainList', []).map((mainfan, i) => {
-      expandedKeys.value.push(i.toString());
+    return get(info, 'fanMainList', []).map((mainfan, i) => {
+      if (isInit) {
+        expandedKeys.value.push(i.toString());
+      }
       return {
         title: `${prefix}${mainfan[prop]}${suffix}`,
         key: i.toString(),
@@ -66,17 +63,14 @@
         }),
       };
     });
-  }
+  });
+  const expandedKeys = ref<string[]>([]);
 
   // 过滤不合法的值，小于5000的视为传感器出错
   function filterBadValue(val: number | string) {
     const valid = parseInt(val) > 5000;
     return valid ? val.toString() : '/';
   }
-
-  onMounted(() => {
-    fetchData();
-  });
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {

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

@@ -11,9 +11,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { shallowRef, onMounted } from 'vue';
+  import { computed } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, WARNING_CONFIG } from '../billboard.data';
-  import _ from 'lodash-es';
   import { get } from '../utils';
 
   const props = withDefaults(
@@ -26,23 +25,9 @@
   );
   defineEmits(['click']);
 
-  const warnData = shallowRef<BillboardType['warn']>({
-    allNum: 0,
-    synthesizeSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //安全监控
-    ventSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //通风
-    dustSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //粉尘
-    gasSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //瓦斯
-    fireSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //火灾
-  });
-
-  function fetchData() {
-    const info = props.data.warn;
-    if (!info) return;
-    warnData.value = info;
-  }
-
-  onMounted(() => {
-    fetchData();
+  const warnData = computed<BillboardType['fileServerInfo']['warnInfo']>(() => {
+    const info = props.data.fileServerInfo?.warnInfo;
+    return info;
   });
 </script>
 
@@ -111,11 +96,11 @@
     }
     .extra {
       text-align: center;
-      width: 100px;
+      width: 90px;
     }
     .num {
       text-align: center;
-      width: 100px;
+      width: 110px;
     }
     .risk {
       text-align: right;

src/views/vent/home/billboard/index.vue

@@ -45,7 +45,7 @@
    * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'、'Summary'
    *
    */
-  import { VNode, computed, h, onMounted, ref } from 'vue';
+  import { VNode, computed, h, onMounted, onUnmounted, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
   // import { useRoute } from 'vue-router';
@@ -59,8 +59,8 @@
   import Summary from './components/Summary.vue';
   import Warning from './components/Warning.vue';
   import DuskRisk from './components/DustRisk.vue';
-  import _ from 'lodash-es';
   import { useRouter } from 'vue-router';
+  import { DEFAULT_TEST_DATA } from './billboard.data';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = defineProps<{
@@ -86,8 +86,25 @@
 
   const mainTitle = props.title || '国能神东一通三防管控平台';
 
-  // 看板相关的基础配置
-  const billboards = ref<(() => VNode)[]>([]);
+  // 看板相关的基础配置，默认数据是 8 项，填满页面
+  const billboards = ref<(() => VNode)[]>(
+    new Array(8).fill(DEFAULT_TEST_DATA).map((el) => {
+      return () =>
+        h(
+          BaseCard,
+          {
+            title: el.orgname || '/',
+            onOpen: () => openHandler(el.ip, el.orgcode),
+          },
+          {
+            default: () =>
+              h(componentMap[props.billboardType], {
+                data: JSON.parse(JSON.stringify(el)),
+              }),
+          }
+        );
+    })
+  );
 
   function fetchBillboards() {
     getSummary().then((r) => {
@@ -138,6 +155,7 @@
     FireStatus: '/fire/warn/home',
     Summary: '/monitorChannel/device-monitor/warningHistory',
   };
+
   // 页面跳转
   function openHandler(ip: string, orgcode) {
     // const url = `http://localhost:3100/login`;
@@ -155,13 +173,22 @@
     router.push('/company/home');
   }
 
+  let interval: any = null;
+
   onMounted(() => {
     // if (route.query.type) {
     //   billboardType.value = route.query.type as string;
     //   showBtn.value = false;
     // }
+    interval = setInterval(() => {
+      fetchBillboards();
+    }, 60000);
     fetchBillboards();
   });
+
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
   @font-face {