79 lines
3.0 KiB
Vue
79 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
import type { NdmNvrDiagInfo, NdmNvrResultVO } from '@/apis';
|
||
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, isNvrCluster, NvrDiskCard, NvrHistoryDiagCard, NvrRecordDiagCard } from '@/components';
|
||
import { useDebugModeStore } from '@/stores';
|
||
import { destr } from 'destr';
|
||
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
|
||
import { computed, ref, toRefs } from 'vue';
|
||
|
||
const props = defineProps<{
|
||
stationCode: string;
|
||
ndmNvr: NdmNvrResultVO;
|
||
}>();
|
||
|
||
const debugModeStore = useDebugModeStore();
|
||
|
||
const { stationCode, ndmNvr } = toRefs(props);
|
||
|
||
const lastDiagInfo = computed(() => {
|
||
const result = destr<any>(ndmNvr.value.lastDiagInfo);
|
||
if (!result) return null;
|
||
if (typeof result !== 'object') return null;
|
||
return result as NdmNvrDiagInfo;
|
||
});
|
||
|
||
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(() => {
|
||
return isNvrCluster(ndmNvr.value);
|
||
});
|
||
|
||
const selectedTab = ref('设备状态');
|
||
</script>
|
||
|
||
<template>
|
||
<NCard size="small">
|
||
<NTabs v-model:value="selectedTab" size="small">
|
||
<NTabPane name="设备状态" tab="设备状态">
|
||
<NFlex vertical>
|
||
<DeviceHeaderCard :station-code="stationCode" :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="历史诊断">
|
||
<!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
|
||
<NvrHistoryDiagCard :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
|
||
</NTabPane>
|
||
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
|
||
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
|
||
<pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
|
||
</NTabPane>
|
||
</NTabs>
|
||
</NCard>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.raw-data {
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|