72 lines
2.5 KiB
Vue
72 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { NdmSwitchResultVO, Station } from '@/apis';
|
|
import { DeviceRawCard, SwitchCurrentDiag, SwitchHistoryDiag, SwitchUpdate } from '@/components';
|
|
import { useSettingStore } from '@/stores';
|
|
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
|
import { storeToRefs } from 'pinia';
|
|
import { computed, ref, toRefs, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const props = defineProps<{
|
|
ndmDevice: NdmSwitchResultVO;
|
|
station: Station;
|
|
}>();
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const settingStore = useSettingStore();
|
|
const { debugModeEnabled } = storeToRefs(settingStore);
|
|
|
|
const { ndmDevice, station } = toRefs(props);
|
|
|
|
const showPageHeader = computed(() => {
|
|
return !!route.query['fromPage'];
|
|
});
|
|
const onBack = () => {
|
|
router.push({ path: `${route.query['fromPage']}` });
|
|
};
|
|
|
|
const activeTabName = ref('当前诊断');
|
|
const onTabChange = (name: string) => {
|
|
activeTabName.value = name;
|
|
};
|
|
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
|
if (newDevice.id !== oldDevice.id || !enabled) {
|
|
activeTabName.value = '当前诊断';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NCard hoverable style="height: 100%" :header-style="{ padding: '12px' }" :content-style="{ height: '100%', padding: '0', overflow: 'hidden' }">
|
|
<template #header>
|
|
<NPageHeader v-if="showPageHeader" @back="onBack" />
|
|
<NTabs :value="activeTabName" @update:value="onTabChange">
|
|
<NTab name="当前诊断">当前诊断</NTab>
|
|
<NTab name="历史诊断">历史诊断</NTab>
|
|
<NTab name="修改设备">修改设备</NTab>
|
|
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
|
</NTabs>
|
|
</template>
|
|
<template #default>
|
|
<NScrollbar x-scrollable :content-style="{ padding: '0 12px 12px 12px' }">
|
|
<template v-if="activeTabName === '当前诊断'">
|
|
<SwitchCurrentDiag :ndm-device="ndmDevice" :station="station" />
|
|
</template>
|
|
<template v-if="activeTabName === '历史诊断'">
|
|
<SwitchHistoryDiag :ndm-device="ndmDevice" :station="station" />
|
|
</template>
|
|
<template v-if="activeTabName === '修改设备'">
|
|
<SwitchUpdate :ndm-device="ndmDevice" :station="station" />
|
|
</template>
|
|
<template v-if="activeTabName === '原始数据'">
|
|
<DeviceRawCard :ndm-device="ndmDevice" />
|
|
</template>
|
|
</NScrollbar>
|
|
</template>
|
|
</NCard>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|