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

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

@@ -43,22 +43,14 @@ export default {
       },
       // 图表实例
       chart: null,
-      // 图表数据（模拟数据，注意删除后echarts图初始化会报一下错）
-      chartData:[
-        {
-          "巷道2": 1,
-          "巷道1": 0,
-          "status": "出库分配"
-        }
-      ],
-      dimensions:[]
+      // 图表数据（模拟数据）
+      chartData:[]
     }
   }
   ,
   created() {
     this.getWarehouseList();
     this.handleQuery();
-
   }
   ,
   mounted() {
@@ -81,13 +73,18 @@ export default {
     ,
     /** 搜索按钮操作 */
     handleQuery() {
-      // TODO: 调用后端接口获取数据
       getSpaceAnalysisList(this.queryParams).then(response => {
-        this.chartData = response.data.data;
-        this.updateChart();
+        if (response.code === 200) {
+          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=[]
-      if (this.chartData[0].巷道1!=undefined&&this.chartData[0].巷道1!=null){
-        this.dimensions=['status', '巷道1', '巷道2']
-      }else {
-        this.dimensions=['status', '巷道3', '巷道4']
+      console.log('chartData:', this.chartData);
+      if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) {
+        console.warn('无效的图表数据');
+        return;
       }
+
+      // 获取数据中所有的巷道字段
+      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: [
-          {
-            type: 'bar',
-            barWidth: '30%',
-            itemStyle: {
-              color: '#1890ff'
-            },
-            label: {
-              show: true,
-              position: 'top'
-            }
-          },
-          {
-            type: 'bar',
-            barWidth: '30%',
-            itemStyle: {
-              color: '#52c41a'
-            },
-            label: {
-              show: true,
-              position: 'top'
-            }
-          }
-        ]
+        series: series
       };
       this.chart.setOption(option);
-    }
+    },
   }
 }
 </script>