feat: isFetching

src/pages/dashboard-page.vue

@@ -6,6 +6,7 @@ import { storeToRefs } from 'pinia';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useLineAlarmsStore } from '@/stores/line-alarms';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
+import { watch } from 'vue';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -14,8 +15,23 @@ const { lineDevices } = storeToRefs(lineDevicesStore);
 const lineAlarmsStore = useLineAlarmsStore();
 const { lineAlarms } = storeToRefs(lineAlarmsStore);
 
-useLineDevicesQuery();
-useLineAlarmsQuery();
+const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
+const { isFetching: lineAlarmsFetching } = useLineAlarmsQuery();
+
+// 当设备查询或告警查询正在进行时，显示加载条
+watch(
+  [lineDevicesFetching, lineAlarmsFetching],
+  (fetchingList) => {
+    if (fetchingList.some((pending) => pending)) {
+      window.$loadingBar.start();
+    } else {
+      window.$loadingBar.finish();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 
 <template>

src/pages/device-page.vue

@@ -34,7 +34,20 @@ import { h, onMounted, useTemplateRef } from 'vue';
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter, type LocationQuery } from 'vue-router';
 
-useLineDevicesQuery();
+const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
+watch(
+  lineDevicesFetching,
+  (fetching) => {
+    if (fetching) {
+      window.$loadingBar.start();
+    } else {
+      window.$loadingBar.finish();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const route = useRoute();
 const router = useRouter();