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,31 +112,36 @@ 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>
-      <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />
+      <div style="height: 100%; display: flex; flex-direction: column">
-      <NTree
+        <div style="flex: 0 0 auto; margin-bottom: 16px">
-        :data="treeData"
+          <NRow>
-        :override-default-node-click-behavior="override"
+            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
-        :pattern="searchPattern"
+              <NStatistic :label="item.label + '离线数'" :value="`${item.offlineCount}/${item.total}`" />
-        :filter="searchFilter"
+            </NCol>
-        :show-irrelevant-nodes="false"
+          </NRow>
-        block-line
+        </div>
-        show-line
+        <div style="flex: 1 1 auto; min-height: 0">
-        virtual-scroll
+          <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />
-        style="height: 380px"
+          <NTree
-      />
+            :data="treeData"
+            :override-default-node-click-behavior="override"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+            :show-irrelevant-nodes="false"
+            block-line
+            show-line
+            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>