fix: 监考大屏页面竞态请求问题

src/api/invigilation.js

@@ -68,11 +68,12 @@ export function invigilateCount(datas) {
     {}
   );
 }
-export function invigilateVideoList(datas) {
+export function invigilateVideoList(datas, config = {}) {
   const data = pickBy(datas, paramFilter);
   return httpApp.post(
     "/api/admin/invigilate/list/video?" + object2QueryString(data),
-    {}
+    {},
+    config
   );
 }
 export function monitorCallCount({ examId, roomCode, callStatus }) {

src/features/invigilation/RealtimeMonitoring/RealtimeMonitoringFull.vue

@@ -100,6 +100,7 @@ import WarningTextMessageDialog from "./WarningTextMessageDialog";
 import AudioRecordDialog from "./audioRecord/AudioRecordDialog";
 import { debounce } from "lodash-es";
 import IntervalMixin from "./mixins/IntervalMixin";
+import axios from "axios";
 const DESIGN_WIDTH = 1920;
 const DESIGN_HEIGHT = 1080;
 
@@ -126,10 +127,6 @@ export default {
         pageSize: 24,
         pageNumber: 1,
       },
-      /** 通话待办 */
-      communication: 0,
-      /** 当前考试批次 */
-      curExamBatch: {},
       /** 监考视频列表 */
       dataList: [],
       /** 监考视频总数 */
@@ -198,7 +195,14 @@ export default {
 
     /** 查询视频列表 */
     async getList() {
-      const res = await invigilateVideoList(this.filter);
+      if (this.videoListSource) {
+        this.videoListSource.cancel("cancel prev");
+      }
+      this.videoListSource = axios.CancelToken.source();
+      const res = await invigilateVideoList(this.filter, {
+        cancelToken: this.videoListSource.token,
+      });
+
       const domainLen = this.liveDomains.length;
       this.dataList = res.data.data.records.map((item, index) => {
         const domain = domainLen ? this.liveDomains[index % domainLen] : "";
@@ -366,9 +370,17 @@ export default {
       if (this.stopInterval) {
         this.stopInterval();
       }
-      Promise.all([this.getCommunicationList(), this.fetchWarningNotice()]);
+      Promise.all([
+        this.getList(),
+        this.getCommunicationList(),
+        this.fetchWarningNotice(),
+      ]);
       this.stopInterval = this.interval(() => {
-        Promise.all([this.getCommunicationList(), this.fetchWarningNotice()]);
+        Promise.all([
+          this.getList(),
+          this.getCommunicationList(),
+          this.fetchWarningNotice(),
+        ]);
       }, 10 * 1000);
     },
 

src/features/invigilation/RealtimeMonitoring/components/RealtimeMonitoringFullHeader.vue

@@ -85,7 +85,6 @@ export default {
       handler() {
         this.$emit("filterChange", this.filter);
       },
-      immediate: true,
       deep: true,
     },
     "filter.examId": {

src/plugins/axiosApp.js

@@ -86,6 +86,9 @@ _axiosApp.interceptors.response.use(
     return response;
   },
   (error) => {
+    if (axios.isCancel(error)) {
+      return Promise.reject(error);
+    }
     const showErrorMessage = !error.config?.noErrorMessage;
     if (!error.response) {
       if (showErrorMessage) {