refactor: reorganize device card components

src/components/device-page/device-card/nvr-card.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { NdmNvrDiagInfo } from '@/apis/domains';
+import type { NdmNvrResultVO } from '@/apis/models';
+import { destr } from 'destr';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceCommonCard from './current-diag-card/device-common-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import NvrDiskCard from './current-diag-card/nvr-disk-card.vue';
+import NvrRecordDiagCard from './current-diag-card/nvr-record-diag-card.vue';
+import NvrDiagHistoryCard from './history-diag-card/nvr-diag-history-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmNvr: NdmNvrResultVO;
+}>();
+
+const { stationCode, ndmNvr } = toRefs(props);
+
+const lastDiagInfo = computed(() => {
+  const result = destr<NdmNvrDiagInfo>(ndmNvr.value.lastDiagInfo);
+  if (!result) return null;
+  if (typeof result !== 'object') return null;
+  return result;
+});
+
+const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo.CPU使用率);
+const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo.内存使用率);
+
+const commonInfo = computed<Record<string, string> | undefined>(() => {
+  const info = lastDiagInfo.value?.stCommonInfo;
+  if (info) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { CPU使用率, 内存使用率, ...rest } = info;
+    return rest;
+  }
+  return info;
+});
+
+const diskHealth = computed(() => lastDiagInfo.value?.info.diskHealth);
+const groupInfoList = computed(() => lastDiagInfo.value?.info.groupInfoList);
+
+const isCluster = computed(() => {
+  const { ipAddress, clusterList } = ndmNvr.value;
+  if (!clusterList?.trim()) return false;
+  if (clusterList === ipAddress) return false;
+  return true;
+});
+
+const selectedTab = ref('设备状态');
+</script>
+
+<template>
+  <NCard size="small">
+    <NTabs v-model:value="selectedTab" size="small">
+      <NTabPane name="设备状态" tab="设备状态">
+        <NFlex vertical>
+          <DeviceHeaderCard :device="ndmNvr" />
+          <DeviceCommonCard :common-info="commonInfo" />
+          <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
+          <NvrDiskCard :disk-health="diskHealth" :group-info-list="groupInfoList" />
+          <!-- 切换选择的录像机集群时，props会改变，但是录像诊断组件需要发起请求获取诊断数据，请求函数没有响应性，因此添加显式的key触发组件的更新 -->
+          <NvrRecordDiagCard v-if="isCluster" :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
+        </NFlex>
+      </NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <NvrDiagHistoryCard :station-code="stationCode" :ndm-nvr="ndmNvr" />
+      </NTabPane>
+      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
+      <!-- <NTabPane name="原始数据" tab="原始数据">
+        <pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
+      </NTabPane> -->
+    </NTabs>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>