feat: add total device count

src/components/offline-device-detail-modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NInput, NModal, NTree } from 'naive-ui';
+import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree } from 'naive-ui';
 import { computed, h, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
@@ -48,6 +48,16 @@ const offlineDeviceCount = computed(() => {
   return count;
 });
 
+const classifiedCounts = computed(() => {
+  return Object.values(DeviceType).map((deviceType) => {
+    return {
+      label: DeviceTypeName[deviceType],
+      offlineCount: stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20').length,
+      total: stationDevices.value[deviceType].length,
+    };
+  });
+});
+
 const treeData = computed<TreeOption[]>(() => {
   return Object.values(DeviceType).map<TreeOption>((deviceType) => {
     const offlineDeviceList = stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20');
@@ -102,11 +112,20 @@ const onModalClose = () => {
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 600px; height: 500px" :title="`${station.name} - 离线设备详情`" :mask-closable="false" @close="onModalClose">
+  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station.name} - 离线设备详情`" :mask-closable="false" @close="onModalClose">
-    <div v-if="offlineDeviceCount === 0" class="no-offline-devices">
+    <div v-if="offlineDeviceCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
       <span>当前没有离线设备</span>
     </div>
     <template v-else>
+      <div style="height: 100%; display: flex; flex-direction: column">
+        <div style="flex: 0 0 auto; margin-bottom: 16px">
+          <NRow>
+            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+              <NStatistic :label="item.label + '离线数'" :value="`${item.offlineCount}/${item.total}`" />
+            </NCol>
+          </NRow>
+        </div>
+        <div style="flex: 1 1 auto; min-height: 0">
           <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />
           <NTree
             :data="treeData"
@@ -119,14 +138,10 @@ const onModalClose = () => {
             virtual-scroll
             style="height: 380px"
           />
+        </div>
+      </div>
     </template>
   </NModal>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.no-offline-devices {
-  text-align: center;
-  padding: 20px;
-  color: #6c757d;
-}
-</style>

src/components/station-card.vue

@@ -32,6 +32,13 @@ const offlineDeviceCount = computed(() => {
   });
   return count;
 });
+const deviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    count += stationDevices.value[deviceType].length;
+  });
+  return count;
+});
 const devicAlarmCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
@@ -116,7 +123,7 @@ const theme = useThemeVars();
               <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
             </template>
             <template #default>
-              <span class="font-medium">{{ offlineDeviceCount }}</span>
+              <span class="font-medium">{{ offlineDeviceCount }}/{{ deviceCount }}</span>
             </template>
             <template #suffix>
               <span class="font-xx-small">台</span>