61 lines
2.2 KiB
Vue
61 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import type { NdmSwitchDiagInfo } from '@/apis/domains';
|
||
import type { NdmSwitchResultVO } from '@/apis/models';
|
||
import { useUserStore } from '@/stores/user';
|
||
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 DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
|
||
import SwitchPortCard from './current-diag-card/switch-port-card.vue';
|
||
import SwitchHistoryDiagCard from './history-diag-card/switch-history-diag-card.vue';
|
||
|
||
const props = defineProps<{
|
||
stationCode: string;
|
||
ndmSwitch: NdmSwitchResultVO;
|
||
}>();
|
||
|
||
const userStore = useUserStore();
|
||
|
||
const { stationCode, ndmSwitch } = toRefs(props);
|
||
|
||
const lastDiagInfo = computed(() => {
|
||
const result = destr<NdmSwitchDiagInfo>(ndmSwitch.value.lastDiagInfo);
|
||
if (!result) return null;
|
||
if (typeof result !== 'object') return null;
|
||
return result;
|
||
});
|
||
|
||
const cpuUsage = computed(() => lastDiagInfo.value?.cpuRatio);
|
||
const memUsage = computed(() => lastDiagInfo.value?.memoryRatio);
|
||
|
||
const portInfoList = computed(() => lastDiagInfo.value?.info.portInfoList ?? []);
|
||
|
||
const selectedTab = ref('设备状态');
|
||
</script>
|
||
|
||
<template>
|
||
<NCard size="small">
|
||
<NTabs v-model:value="selectedTab" size="small">
|
||
<NTabPane name="设备状态">
|
||
<NFlex vertical>
|
||
<DeviceHeaderCard :device="ndmSwitch" />
|
||
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
|
||
<SwitchPortCard :port-info-list="portInfoList" />
|
||
</NFlex>
|
||
</NTabPane>
|
||
<NTabPane name="历史诊断" tab="历史诊断">
|
||
<!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
|
||
<SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
|
||
</NTabPane>
|
||
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
|
||
<NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
|
||
<pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
|
||
</NTabPane>
|
||
</NTabs>
|
||
</NCard>
|
||
</template>
|
||
|
||
<style scoped lang="scss"></style>
|