perf: ignore CancelledError in all queries, and show error message in route pages

src/pages/dashboard-page.vue

@@ -20,8 +20,8 @@ const { lineDevices } = storeToRefs(lineDevicesStore);
 const lineAlarmCountsStore = useLineAlarmCountsStore();
 const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
 
-const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
-const { isFetching: lineAlarmCountsFetching } = useLineAlarmCountsQuery();
+const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
+const { isFetching: lineAlarmCountsFetching, error: lineAlarmCountsQueryError } = useLineAlarmCountsQuery();
 const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);
 
@@ -40,6 +40,15 @@ watch(
   },
 );
 
+watch([lineDevicesQueryError, lineAlarmCountsQueryError], ([newLineDevicesQueryError, newLineAlarmCountsQueryError]) => {
+  if (newLineDevicesQueryError) {
+    window.$message.error(newLineDevicesQueryError.message);
+  }
+  if (newLineAlarmCountsQueryError) {
+    window.$message.error(newLineAlarmCountsQueryError.message);
+  }
+});
+
 const selectedStation = ref<Station>();
 const offlineDeviceTreeModalShow = ref(false);
 const deviceAlarmTreeModalShow = ref(false);

src/pages/device-page.vue

@@ -13,7 +13,7 @@ import DeviceTree from '@/components/device-page/device-tree.vue';
 import DeviceRenderer from '@/components/device-page/device-renderer.vue';
 
 // 数据获取
-const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
+const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
@@ -47,6 +47,12 @@ watch(
     immediate: true,
   },
 );
+
+watch(lineDevicesQueryError, (newLineDevicesQueryError) => {
+  if (newLineDevicesQueryError) {
+    window.$message.error(newLineDevicesQueryError.message);
+  }
+});
 </script>
 
 <template>