feat: add alarm-host

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmDeviceVO, Station, StationDevices } from '@/apis';
 import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal } from '@/enums';
-import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
+import { NButton, NCol, NGrid, NGridItem, NInput, NModal, NRow, NStatistic, NTree, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
 import { computed, h, ref, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -51,7 +51,7 @@ const treeData = computed<TreeOption[]>(() => {
       key: deviceType,
       children: offlineDeviceList.map<TreeOption>((device) => ({
         label: `${device.name}`,
-        key: device.id,
+        key: device.id ?? `${device.name}`,
         suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
         prefix: () => {
           return h(
@@ -114,22 +114,22 @@ const onModalClose = () => {
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station?.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+  <NModal v-model:show="show" preset="card" style="width: 1000px; height: 600px" :title="`${station?.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
     <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">
+          <NGrid :cols="classifiedCounts.length">
+            <NGridItem v-for="item in classifiedCounts" :key="item.label">
               <NStatistic :label="item.label">
                 <template #default>
                   <span style="font-size: smaller">{{ `${item.offlineCount}/${item.total}` }}</span>
                 </template>
               </NStatistic>
-            </NCol>
-          </NRow>
+            </NGridItem>
+          </NGrid>
         </div>
         <div style="flex: 1 1 auto; min-height: 0">
           <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />