项目初始化

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

@@ -0,0 +1,204 @@
+<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="startTime">
+        <el-date-picker
+          v-model="queryParams.startTime"
+          type="datetime"
+          placeholder="请选择开始时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
+      </el-form-item>
+      <!-- 结束时间 -->
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker
+          v-model="queryParams.endTime"
+          type="datetime"
+          placeholder="请选择结束时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          format="yyyy-MM-dd HH:mm:ss"
+          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 { getRoadwayAnalysisList } from "@/api/kpi/roadwayAnalysis"
+import { listWarehouse } from "@/api/bas/warehouse"
+
+export default {
+  name: "roadwayAnalysis",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 仓库选项
+      warehouseOptions: [],
+      // 查询参数
+      queryParams: {
+        warehouseId: null,  // 默认选择仓库1
+        startTime: null,
+        endTime: null
+      },
+      // 图表实例
+      chart: null,
+      // 图表数据
+      chartData: {
+        tunnels: [],
+        inCounts: [],
+        outCounts: []
+      },
+      queryWarehouseParam:{
+        pageNum: 1,
+        pageSize: 99,
+        typeData:[1]
+      }
+    }
+  },
+  created() {
+    this.getWarehouseList();
+    this.handleQuery();
+  },
+  mounted() {
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  methods: {
+    /** 查询仓库列表 */
+    getWarehouseList() {
+      listWarehouse(this.queryWarehouseParam).then(response => {
+        this.warehouseOptions = response.rows;
+      });
+      // this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      getRoadwayAnalysisList(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'
+          }
+        },
+        legend: {
+          // 【入库数量】、【出库数量】
+          data: ['入库数量', '出库数量'],
+          top: '30px'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.tunnels,
+          axisLabel: {
+            interval: 0,
+            rotate: 0
+          }
+        },
+        yAxis: {
+          type: 'value',
+          // 数量
+          name: '数量'
+        },
+        series: [
+          {
+            // 入库数量
+            name: '入库数量',
+            data: this.chartData.inCounts,
+            type: 'bar',
+            barWidth: '30%',
+            itemStyle: {
+              color: '#1890ff'
+            },
+            label: {
+              show: true,
+              position: 'top'
+            }
+          },
+          {
+            // 出库数量
+            name: '出库数量',
+            data: this.chartData.outCounts,
+            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>