KPI入库分析、出库分析、巷道均匀分析、货位分析

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="仓库" prop="warehouseId">
+        <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable>
+          <el-option
+            v-for="dict in warehouseOptions"
+            :key="dict.warehouseId"
+            :label="dict.warehouseName"
+            :value="dict.warehouseId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 柱状图容器 -->
+    <div class="chart-container" style="height: 700px">
+      <div ref="spaceChart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from '@/plugins/echarts.min.js'
+import { getSpaceAnalysisList } from "@/api/kpi/spaceAnalysis"
+export default {
+  name: "spaceAnalysis",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 仓库选项
+      warehouseOptions: [],
+      // 查询参数
+      queryParams: {
+        warehouseId: "01",  // 默认选择仓库1
+      },
+      // 图表实例
+      chart: null,
+      // 图表数据（模拟数据，注意删除后echarts图初始化会报一下错）
+      chartData:[
+            {
+                "巷道2": 1,
+                "巷道1": 0,
+                "status": "出库分配"
+            }
+        ]
+    }
+  }
+  ,
+  created() {
+    this.getWarehouseList();
+    this.handleQuery();
+
+  }
+  ,
+  mounted() {
+    this.initChart();
+  }
+  ,
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  }
+  ,
+  methods: {
+    /** 查询仓库列表 */
+    getWarehouseList() {
+      // TODO: 调用获取仓库列表接口
+      this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
+    }
+    ,
+    /** 搜索按钮操作 */
+    handleQuery() {
+      // TODO: 调用后端接口获取数据
+      getSpaceAnalysisList(this.queryParams).then(response => {
+        this.chartData = response.data.data;
+        this.updateChart();
+      });
+    }
+    ,
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.warehouseId = "01";  // 重置时仍选择仓库1
+      this.handleQuery();
+    }
+    ,
+    /** 初始化图表 */
+    initChart() {
+      this.chart = echarts.init(this.$refs.spaceChart);
+      this.updateChart();
+    }
+    ,
+    /** 更新图表数据 */
+    updateChart() {
+      const option = {
+        title: {
+          text: '货位状态分析',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: "5%",
+          textStyle: {
+            fontSize: 15,
+            color: "#292c2c"
+          }
+        },
+        dataset: {
+          dimensions: ['status', '巷道1', '巷道2'],
+          source: this.chartData
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0,
+            rotate: 0
+          }
+        },
+        yAxis: {
+          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'
+            }
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  margin-top: 20px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>