48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import type { NdmKeyboardResultVO } from '@/apis/models';
|
||
import { useDebugModeStore } from '@/stores/debug-mode';
|
||
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
|
||
import { ref, toRefs } from 'vue';
|
||
|
||
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
|
||
import KeyboardHistoryDiagCard from './history-diag-card/keyboard-history-diag-card.vue';
|
||
|
||
const props = defineProps<{
|
||
stationCode: string;
|
||
ndmKeyboard: NdmKeyboardResultVO;
|
||
}>();
|
||
|
||
const debugModeStore = useDebugModeStore();
|
||
|
||
const { stationCode, ndmKeyboard } = toRefs(props);
|
||
|
||
const selectedTab = ref('设备状态');
|
||
</script>
|
||
|
||
<template>
|
||
<NCard size="small">
|
||
<NTabs v-model:value="selectedTab" size="small">
|
||
<NTabPane name="设备状态" tab="设备状态">
|
||
<NFlex vertical>
|
||
<DeviceHeaderCard :device="ndmKeyboard" />
|
||
</NFlex>
|
||
</NTabPane>
|
||
<NTabPane name="历史诊断" tab="历史诊断">
|
||
<!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
|
||
<KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
|
||
</NTabPane>
|
||
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
|
||
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
|
||
<pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
|
||
</NTabPane>
|
||
</NTabs>
|
||
</NCard>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.raw-data {
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|