101 lines
3.4 KiB
Vue
101 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { useDeviceSelection } from '@/composables/device';
|
|
import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
|
|
import { useLineDevicesStore } from '@/stores/line-devices';
|
|
import { useStationStore } from '@/stores/station';
|
|
import { ChevronBack } from '@vicons/ionicons5';
|
|
import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar, NSpin } from 'naive-ui';
|
|
import { storeToRefs } from 'pinia';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import DeviceTree from '@/components/device-page/device-tree.vue';
|
|
import DeviceRenderer from '@/components/device-page/device-renderer.vue';
|
|
|
|
// 数据获取
|
|
const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
|
|
const stationStore = useStationStore();
|
|
const { stationList } = storeToRefs(stationStore);
|
|
const lineDevicesStore = useLineDevicesStore();
|
|
const { lineDevices } = storeToRefs(lineDevicesStore);
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const onClickBack = () => router.push({ path: `${route.query['from']}` });
|
|
|
|
const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
|
|
|
|
// 页面初始化
|
|
onMounted(() => {
|
|
initFromRoute(lineDevices.value);
|
|
});
|
|
|
|
// 加载条控制
|
|
watch(
|
|
lineDevicesFetching,
|
|
(fetching) => {
|
|
if (fetching) {
|
|
window.$loadingBar.start();
|
|
} else {
|
|
window.$loadingBar.finish();
|
|
// 当设备数据更新时，需要重新配置设备树
|
|
initFromRoute(lineDevices.value);
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<NLayout has-sider style="height: 100%">
|
|
<NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
|
|
<DeviceTree
|
|
:station-list="stationList"
|
|
:line-devices="lineDevices"
|
|
:selected-station-code="selectedStationCode"
|
|
:selected-device-type="selectedDeviceType"
|
|
:selected-device="selectedDevice"
|
|
@select-device="selectDevice"
|
|
/>
|
|
</NLayoutSider>
|
|
<NLayoutContent :content-style="{ 'padding-left': '24px', 'padding-top': '6px' }">
|
|
<div style="height: 100%; display: flex; flex-direction: column">
|
|
<div style="flex: 0 0 auto">
|
|
<NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
|
|
<template #back>
|
|
<NIcon>
|
|
<ChevronBack />
|
|
</NIcon>
|
|
<div style="font-size: 15px">返回</div>
|
|
</template>
|
|
</NPageHeader>
|
|
</div>
|
|
|
|
<div style="flex: 1 1 auto; min-height: 0">
|
|
<!-- 内容区域 -->
|
|
<template v-if="selectedDevice && selectedStationCode">
|
|
<NScrollbar x-scrollable style="height: 100%" :content-style="{ 'padding-right': '24px' }">
|
|
<DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
|
|
</NScrollbar>
|
|
</template>
|
|
<template v-else-if="lineDevicesFetching">
|
|
<div style="width: 100%; height: 100%; display: flex">
|
|
<NSpin style="margin: auto" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div style="width: 100%; height: 100%; display: flex">
|
|
<NEmpty description="选择设备查看诊断数据" style="margin: auto" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</NLayoutContent>
|
|
</NLayout>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|