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

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

@@ -43,22 +43,14 @@ export default {
       },
       // 图表实例
       chart: null,
-      // 图表数据（模拟数据，注意删除后echarts图初始化会报一下错）
+      // 图表数据（模拟数据）
-      chartData:[
+      chartData:[]
-        {
-          "巷道2": 1,
-          "巷道1": 0,
-          "status": "出库分配"
-        }
-      ],
-      dimensions:[]
     }
   }
   ,
   created() {
     this.getWarehouseList();
     this.handleQuery();
-
   }
   ,
   mounted() {
@@ -81,13 +73,18 @@ export default {
     ,
     /** 搜索按钮操作 */
     handleQuery() {
-      // TODO: 调用后端接口获取数据
       getSpaceAnalysisList(this.queryParams).then(response => {
-        this.chartData = response.data.data;
+        if (response.code === 200) {
-        this.updateChart();
+          this.chartData = response.data;
+          this.updateChart();
+        } else {
+          this.$message.error(response.msg);
+        }
+      }).catch(error => {
+        console.error('获取数据失败:', error);
+        this.$message.error('获取数据失败');
       });
-    }
+    },
-    ,
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
@@ -103,12 +100,35 @@ export default {
     ,
     /** 更新图表数据 */
     updateChart() {
-      this.dimensions=[]
+      console.log('chartData:', this.chartData);
-      if (this.chartData[0].巷道1!=undefined&&this.chartData[0].巷道1!=null){
+      if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) {
-        this.dimensions=['status', '巷道1', '巷道2']
+        console.warn('无效的图表数据');
-      }else {
+        return;
-        this.dimensions=['status', '巷道3', '巷道4']
       }
+
+      // 获取数据中所有的巷道字段
+      const firstItem = this.chartData.data[0];
+      const roadwayFields = Object.keys(firstItem).filter(key => key.startsWith('巷道'));
+
+      // 准备系列配置
+      const series = roadwayFields.map(roadway => ({
+        name: roadway,
+        type: 'bar',
+        data: this.chartData.data.map(item => item[roadway]),
+        barWidth: '30%',
+        itemStyle: {
+          color: roadway === '巷道1' ? '#1890ff' :
+                roadway === '巷道2' ? '#52c41a' :
+                roadway === '巷道3' ? '#1890ff' :
+                roadway === '巷道4' ? '#52c41a' : '#1890ff'
+        },
+        label: {
+          show: true,
+          position: 'top'
+        }
+      }));
+      console.log('生成的系列配置:', series);
+
       const option = {
         title: {
           text: '货位状态分析',
@@ -125,14 +145,11 @@ export default {
           textStyle: {
             fontSize: 15,
             color: "#292c2c"
-          }
+          },
-        },
-        dataset: {
-          dimensions: this.dimensions,
-          source: this.chartData
         },
         xAxis: {
           type: 'category',
+          data: this.chartData.data.map(item => item.status),
           axisLabel: {
             interval: 0,
             rotate: 0
@@ -142,33 +159,10 @@ export default {
           type: 'value',
           name: '数量'
         },
-        series: [
+        series: series
-          {
-            type: 'bar',
-            barWidth: '30%',
-            itemStyle: {
-              color: '#1890ff'
-            },
-            label: {
-              show: true,
-              position: 'top'
-            }
-          },
-          {
-            type: 'bar',
-            barWidth: '30%',
-            itemStyle: {
-              color: '#52c41a'
-            },
-            label: {
-              show: true,
-              position: 'top'
-            }
-          }
-        ]
       };
       this.chart.setOption(option);
-    }
+    },
   }
 }
 </script>

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) => {
+      if (params.seriesName !== '满位') {
-        let str = '';
+        return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
-        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;
-          }
 
-          const returnData = {
+      const returnData = {
-            "thePlatoon": this.queryParams.thePlatoon,
+        "thePlatoon": this.queryParams.thePlatoon,
-            "theColumn": params.data[0] + 1,
+        "theColumn": params.data[0] + 1,
-            "theFloor": params.data[1] + 1,
+        "theFloor": params.data[1] + 1,
-            "warehouseId": this.queryParams.warehouseId
+        "warehouseId": this.queryParams.warehouseId
-          };
+      };
 
-          getChartMag(returnData)
+      // 生成唯一标识
-            .then(response => {
+      const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
-              const msg = response.data.msg;
+
-              // 缓存响应数据
+      // 如果已经在加载中，返回基本信息
-              if (!this.tooltipCache) this.tooltipCache = {};
+      if (this.loadingKeys && this.loadingKeys[key]) {
-              this.tooltipCache[key] = msg;
+        return `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>加载中...`;
-              str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>${msg}`;
+      }
-              resolve(str);
+
-            })
+      // 返回基本信息
-            .catch(error => {
+      const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
-              console.error('获取货位信息失败:', error);
+
-              str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>获取详细信息失败`;
+      // 设置加载状态
-              resolve(str);
+      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;
     },
   }
 }