更改定时器

src/views/dashboard/overview/components/UPFFlow/index.vue

@@ -42,15 +42,18 @@ type EChartsOption = echarts.ComposeOption<
 let timeoutDuration = 5 * 1000; // 设置5s进行刷新请求
 let loadId: any = null;
 
-// 定时制图
-function resetTimeout() {
-  if (loadId) {
-    clearInterval(loadId);
-  }
-  loadId = setInterval(() => {
-    initPicture();
-  }, timeoutDuration);
-}
+// // 定时制图
+// function resetTimeout() {
+//   if (loadId) {
+//     clearInterval(loadId);
+//   }
+//   loadId = setInterval(() => {
+//     initPicture();
+//   }, timeoutDuration);
+// }
+
+/**定时器ID */
+const timeoutId = ref<any>(null);
 
 /**图DOM节点实例对象 */
 const upfFlow = ref<HTMLElement | undefined>(undefined);
@@ -75,9 +78,8 @@ function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
 
 //渲染速率图
 function initPicture() {
-  if (loadId) {
-    clearInterval(loadId);
-  }
+  clearTimeout(timeoutId.value);
+
   let queryArr: any = [];
   const initTime: Date = new Date();
   const startTime: Date = new Date(initTime);
@@ -87,8 +89,9 @@ function initPicture() {
   queryArr = [parseDateToStr(startTime), parseDateToStr(endTime)];
 
   listUPFData(queryArr).then(res => {
-    resetTimeout();
-
+    timeoutId.value = setTimeout(() => {
+      initPicture(); // 5秒后再次获取数据
+    }, 5000);
     let timeArr: any = [];
     let upValue: any = [];
     let downValue: any = [];
@@ -230,7 +233,7 @@ function initPicture() {
 
 onMounted(() => {
   initPicture();
-  resetTimeout();
+  clearTimeout(timeoutId.value);
 });
 
 /**组件实例被卸载之后调用 */