项目初始化

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+      <!-- 仓库 -->
+      <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 label="年月" prop="yearMonth">
+        <el-date-picker
+          v-model="queryParams.yearMonth"
+          type="month"
+          placeholder="请选择年月"
+          value-format="yyyy-MM"
+          format="yyyy-MM"
+          clearable
+        />
+      </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="tunnelChart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from '@/plugins/echarts.min.js'
+import { getOutAnalysisList } from "@/api/kpi/outAnalysis"
+import {listWarehouse} from "@/api/bas/warehouse";
+
+export default {
+  name: "inAnalysis",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 仓库选项
+      warehouseOptions: [],
+      // 查询参数
+      queryParams: {
+        warehouseId: "01",  // 默认选择仓库1
+        yearMonth: null
+      },
+      // 图表实例
+      chart: null,
+      // 模拟数据
+      chartData: {
+        tunnels: [],
+        counts: []
+      }
+    }
+  },
+  created() {
+    this.getWarehouseList();
+    this.handleQuery();
+  },
+  mounted() {
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  methods: {
+    /** 查询仓库列表 */
+    getWarehouseList() {
+      // TODO: 调用获取仓库列表接口
+      var quaryParam = {
+        pageNum:1,
+        pageSize:99
+      }
+      listWarehouse(quaryParam).then(response => {
+        this.warehouseOptions = response.rows;
+      });
+      // this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      getOutAnalysisList(this.queryParams).then(response => {
+
+        this.chartData = response.data;
+        this.updateChart();
+      });
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.warehouseId = "01";  // 重置时仍选择仓库1
+      this.handleQuery();
+    },
+    /** 初始化图表 */
+    initChart() {
+      this.chart = echarts.init(this.$refs.tunnelChart);
+      this.updateChart();
+    },
+    /** 更新图表数据 */
+    updateChart() {
+      const option = {
+        title: {
+          // 标题：出库均匀分析
+          text: '出库均匀分析',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.tunnels,
+          axisLabel: {
+            interval: 0,
+            rotate: 0
+          }
+        },
+        yAxis: {
+          type: 'value',
+          // 数量
+          name: '数量'
+        },
+        series: [{
+          data: this.chartData.counts,
+          type: 'bar',
+          barWidth: '40%',
+          itemStyle: {
+            color: '#1890ff'
+          },
+          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>