skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: try to fix select options scroll to top when stations refresh

Browse Source
This commit is contained in:
yangsy
2025-08-24 02:10:51 +08:00
parent fafd6cd29f
commit e67809ad86
3 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/composables/query/use-station-list-query.ts
View File

@@ -21,7 +21,7 @@ export function useStationListQuery() {
queryFn: async () => { queryFn: async () => {
const { data: ndmStationList } = await axios.get<{ code: string; name: string; deviceIdPrefix: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`); const { data: ndmStationList } = await axios.get<{ code: string; name: string; deviceIdPrefix: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);
const stations = ndmStationList.map<Station>((station) => ({ let stations = ndmStationList.map<Station>((station) => ({
code: station.code ?? '', code: station.code ?? '',
name: station.name ?? '', name: station.name ?? '',
deviceIdPrefix: station.deviceIdPrefix ?? '', deviceIdPrefix: station.deviceIdPrefix ?? '',
@@ -30,14 +30,16 @@ export function useStationListQuery() {
const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code))); const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code)));
stationList.value = stations.map((station, index) => ({ stations = stations.map((station, index) => ({
...station, ...station,
online: pingResultList[index].status === 'fulfilled', online: pingResultList[index].status === 'fulfilled',
})); }));
stationList.value.splice(0, stationList.value.length, ...stations);
updatedTime.value = dayjs().toJSON(); updatedTime.value = dayjs().toJSON();
return stationList.value; return stations;
}, },
refetchInterval: getAppEnvConfig().requestInterval * 1000, refetchInterval: getAppEnvConfig().requestInterval * 1000,
}); });

38
src/pages/alarm-page.vue
View File

@@ -10,26 +10,32 @@ import dayjs from 'dayjs';
import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui'; import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui'; import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { ref, reactive, onBeforeMount, h, shallowRef, watch } from 'vue'; import { ref, reactive, onBeforeMount, h, shallowRef, watch, computed } from 'vue';
const stationStore = useStationStore(); const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore); const { stationList } = storeToRefs(stationStore);
const stationSelectOptions = shallowRef<SelectOption[]>([]); // const stationSelectOptions = shallowRef<SelectOption[]>([]);
watch( // watch(
stationList, // stationList,
(list) => { // (list) => {
const next = list.map<SelectOption>((station) => ({ // const next = list.map<SelectOption>((station) => ({
label: station.name, // label: station.name,
value: station.deviceIdPrefix, // value: station.deviceIdPrefix,
})); // }));
stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next); // stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next);
}, // },
{ // {
immediate: true, // immediate: true,
deep: true, // deep: true,
}, // },
); // );
const stationSelectOptions = computed(() => {
return stationList.value.map<SelectOption>((station) => ({
label: station.name,
value: station.deviceIdPrefix,
}));
});
const searchFields = reactive({ const searchFields = reactive({
stationCode_in: [] as string[], stationCode_in: [] as string[],

38
src/pages/vimp-log-page.vue
View File

@@ -24,27 +24,33 @@ import {
type SelectOption, type SelectOption,
} from 'naive-ui'; } from 'naive-ui';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { h, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue'; import { computed, h, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue';
useStationListQuery(); useStationListQuery();
const stationStore = useStationStore(); const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore); const { stationList } = storeToRefs(stationStore);
const stationSelectOptions = shallowRef<SelectOption[]>([]); // const stationSelectOptions = shallowRef<SelectOption[]>([]);
watch( // watch(
stationList, // stationList,
(list) => { // (list) => {
const next = list.map<SelectOption>((station) => ({ // const next = list.map<SelectOption>((station) => ({
label: station.name, // label: station.name,
value: station.deviceIdPrefix, // value: station.deviceIdPrefix,
})); // }));
stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next); // stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next);
}, // },
{ // {
immediate: true, // immediate: true,
deep: true, // deep: true,
}, // },
); // );
const stationSelectOptions = computed(() => {
return stationList.value.map<SelectOption>((station) => ({
label: station.name,
value: station.deviceIdPrefix,
}));
});
const searchFields = reactive({ const searchFields = reactive({
stationCode: stationList.value.find((s) => s.online)?.code, stationCode: stationList.value.find((s) => s.online)?.code,