货位分析、库存平面图修改完成

ruoyi-ui/src/views/kpi/spacePlan/index.vue

@@ -58,8 +58,8 @@ export default {
       // 图表实例
       normalChart: null,
       specialChart: null,
-      // 提示信息缓存
-      tooltipCache: {},
+      // 加载状态记录
+      loadingKeys: {},
       // 图表数据
       chartData: {
         x: [],
@@ -92,8 +92,6 @@ export default {
       this.queryParams.thePlatoon = ''
       this.roadwayOptions = []
       this.platoonOptions = []
-      // 清空提示信息缓存
-      this.tooltipCache = {}
       // 获取巷道列表
       getRoadways(this.queryParams).then(response => {
         const roadways = response.data.data
@@ -109,8 +107,6 @@ export default {
       // 重置排号
       this.queryParams.thePlatoon = ''
       this.platoonOptions = []
-      // 清空提示信息缓存
-      this.tooltipCache = {}
       // 获取排号列表
       getPlatoons(this.queryParams).then(response => {
         const platoons = response.data.data
@@ -122,8 +118,6 @@ export default {
       })
     },
     handlePlatoonChange() {
-      // 清空提示信息缓存
-      this.tooltipCache = {}
       this.loadChartData()
     },
     // 加载普通仓库图表数据
@@ -251,45 +245,72 @@ export default {
       this.normalChart.setOption(option)
     },
 
+    // 防抖函数
+    debounce(func, wait) {
+      let timeout;
+      return function (...args) {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+      };
+    },
     // 格式化普通仓库提示信息
     formatTooltip(params) {
-      return new Promise((resolve) => {
-        let str = '';
-        if (params.seriesName !== '满位') {
-          str = params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
-          resolve(str);
-        } else {
-          const key = `${this.queryParams.warehouseId}-${this.queryParams.thePlatoon}-${params.data[0] + 1}-${params.data[1] + 1}`;
-          // 如果缓存中存在数据，直接使用缓存
-          if (this.tooltipCache && this.tooltipCache[key]) {
-            str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>${this.tooltipCache[key]}`;
-            resolve(str);
-            return;
-          }
+      if (params.seriesName !== '满位') {
+        return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
+      }
 
-          const returnData = {
-            "thePlatoon": this.queryParams.thePlatoon,
-            "theColumn": params.data[0] + 1,
-            "theFloor": params.data[1] + 1,
-            "warehouseId": this.queryParams.warehouseId
-          };
+      const returnData = {
+        "thePlatoon": this.queryParams.thePlatoon,
+        "theColumn": params.data[0] + 1,
+        "theFloor": params.data[1] + 1,
+        "warehouseId": this.queryParams.warehouseId
+      };
 
-          getChartMag(returnData)
-            .then(response => {
-              const msg = response.data.msg;
-              // 缓存响应数据
-              if (!this.tooltipCache) this.tooltipCache = {};
-              this.tooltipCache[key] = msg;
-              str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>${msg}`;
-              resolve(str);
-            })
-            .catch(error => {
-              console.error('获取货位信息失败:', error);
-              str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>获取详细信息失败`;
-              resolve(str);
+      // 生成唯一标识
+      const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
+
+      // 如果已经在加载中，返回基本信息
+      if (this.loadingKeys && this.loadingKeys[key]) {
+        return `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>加载中...`;
+      }
+
+      // 返回基本信息
+      const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
+
+      // 设置加载状态
+      if (!this.loadingKeys) this.loadingKeys = {};
+      this.loadingKeys[key] = true;
+
+      // 使用防抖函数包装请求
+      this.debounce(() => {
+        getChartMag(returnData)
+          .then(response => {
+            const msg = response.data.msg;
+            const str = `${baseStr}<br>${msg}`;
+            this.normalChart.setOption({
+              tooltip: {
+                formatter: (p) => {
+                  if (p.seriesName === params.seriesName &&
+                      p.data[0] === params.data[0] &&
+                      p.data[1] === params.data[1]) {
+                    return str;
+                  }
+                  return this.formatTooltip(p);
+                }
+              }
             });
-        }
-      });
+          })
+          .catch(error => {
+            console.error('获取货位信息失败:', error);
+          })
+          .finally(() => {
+            // 清除加载状态
+            delete this.loadingKeys[key];
+          });
+      }, 300)();
+
+      return baseStr;
     },
   }
 }