113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
import type { LineDevices, NdmDeviceResultVO } from '@/apis';
|
||
import { tryGetDeviceType, type DeviceType } from '@/enums';
|
||
import { useDeviceStore } from '@/stores';
|
||
import { watchDebounced } from '@vueuse/core';
|
||
import { storeToRefs } from 'pinia';
|
||
import { onMounted, ref, watch } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
|
||
export const useDeviceSelection = () => {
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const deviceStore = useDeviceStore();
|
||
const { lineDevices } = storeToRefs(deviceStore);
|
||
|
||
const selectedStationCode = ref<string>();
|
||
const selectedDeviceType = ref<DeviceType>();
|
||
const selectedDevice = ref<NdmDeviceResultVO>();
|
||
|
||
const initFromRoute = (lineDevices: LineDevices) => {
|
||
const { stationCode, deviceType, deviceDbId } = route.query;
|
||
if (stationCode) {
|
||
selectedStationCode.value = stationCode as string;
|
||
}
|
||
if (deviceType) {
|
||
selectedDeviceType.value = deviceType as DeviceType;
|
||
}
|
||
if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
|
||
const selectedDeviceDbId = deviceDbId as string;
|
||
const stationDevices = lineDevices[selectedStationCode.value];
|
||
if (stationDevices) {
|
||
const devices = stationDevices[selectedDeviceType.value];
|
||
if (devices) {
|
||
const device = devices.find((device) => device.id === selectedDeviceDbId);
|
||
if (device) {
|
||
selectedDevice.value = device;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const selectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
|
||
selectedDevice.value = device;
|
||
selectedStationCode.value = stationCode;
|
||
const deviceType = tryGetDeviceType(device.deviceType);
|
||
if (deviceType) {
|
||
selectedDeviceType.value = deviceType;
|
||
}
|
||
};
|
||
|
||
const routeDevice = (device: NdmDeviceResultVO, stationCode: string, to: { path: string }) => {
|
||
const deviceDbId = device.id;
|
||
const deviceType = tryGetDeviceType(device.deviceType);
|
||
router.push({
|
||
path: to.path,
|
||
query: {
|
||
stationCode,
|
||
deviceType,
|
||
deviceDbId,
|
||
fromPage: route.path,
|
||
},
|
||
});
|
||
};
|
||
|
||
const syncToRoute = () => {
|
||
const query = { ...route.query };
|
||
// 当选中的设备发生变化时，删除fromPage参数
|
||
if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
|
||
delete query['fromPage'];
|
||
}
|
||
if (selectedStationCode.value) {
|
||
query['stationCode'] = selectedStationCode.value;
|
||
}
|
||
if (selectedDeviceType.value) {
|
||
query['deviceType'] = selectedDeviceType.value;
|
||
}
|
||
if (selectedDevice.value?.id) {
|
||
query['deviceDbId'] = selectedDevice.value.id;
|
||
}
|
||
router.replace({ query });
|
||
};
|
||
|
||
watch(selectedDevice, syncToRoute);
|
||
|
||
// lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
|
||
// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
|
||
watchDebounced(
|
||
lineDevices,
|
||
(newLineDevices) => {
|
||
initFromRoute(newLineDevices);
|
||
},
|
||
{
|
||
debounce: 500,
|
||
deep: true,
|
||
},
|
||
);
|
||
|
||
onMounted(() => {
|
||
initFromRoute(lineDevices.value);
|
||
});
|
||
|
||
return {
|
||
selectedStationCode,
|
||
selectedDeviceType,
|
||
selectedDevice,
|
||
|
||
initFromRoute,
|
||
selectDevice,
|
||
routeDevice,
|
||
};
|
||
};
|