项目初始化

ruoyi-ui/src/views/kpi/inAnalysis/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="120px">
+      <!-- 仓库 -->
+      <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 { getInAnalysisList } from "@/api/kpi/inAnalysis"
+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() {
+      getInAnalysisList(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>

ruoyi-ui/src/views/kpi/inAnalysis/indexByTime.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form-item label="仓库" prop="warehouseId"> <!-- 仓库 -->
+        <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> <!-- 请选择仓库 -->
+          <el-option
+            v-for="item in warehouseOptions"
+            :key="item.warehouseId"
+            :label="item.warehouseName"
+            :value="item.warehouseId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange"> <!-- 时间范围 -->
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateRangeChange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button> <!-- 查询 -->
+      </el-form-item>
+    </el-form>
+
+    <div class="chart-wrapper">
+      <div class="chart-scroll-container">
+        <div ref="chartRef" style="height: 500px; min-width: 800px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { listWarehouse } from '@/api/bas/warehouse'
+import { getInAnalysisData } from '@/api/kpi/inAnalysis'
+
+export default {
+  name: 'InAnalysisByTime',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        warehouseId: null,
+        startTime: '',
+        endTime: '',
+        inOut:'1'
+      },
+      dateRange: [],
+
+      // 仓库选项
+      warehouseOptions: [],
+      // 图表实例
+      chart: null,
+      // 图表数据
+      chartData: {
+        xAxis: [],
+        series: []
+      },
+      // 图表颜色
+      chartColors: ['#409EFF', '#67C23A'],
+      queryWarehouseParam:{
+        pageNum: 1,
+        pageSize: 99,
+        typeData:[1]
+      }
+    }
+  },
+  mounted() {
+    this.getWarehouseList()
+    this.initChart()
+    this.setDefaultDateRange()
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    /** 获取仓库列表 */
+    async getWarehouseList() {
+      try {
+        const response = await listWarehouse(this.queryWarehouseParam)
+        this.warehouseOptions = response.rows
+      } catch (error) {
+        console.error('获取仓库列表失败', error) // 获取仓库列表失败
+      }
+    },
+    /** 设置最近七天时间范围 */
+    setDefaultDateRange() {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
+      this.dateRange = [this.formatDate(start), this.formatDate(end)]
+      this.handleDateRangeChange(this.dateRange)
+      this.handleQuery()
+    },
+    /** 格式化日期 */
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    /** 初始化图表 */
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.updateChart()
+    },
+    /** 更新图表数据 */
+    updateChart() {
+      const option = {
+        title: {
+          text: '入库数量统计' // 入库数量统计（按巷道）
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: this.chartData.series.map(item => item.name),
+          top: 25
+        },
+        grid: {
+          top: 80,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.chartData.xAxis,
+          axisLabel: {
+            rotate: 0
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '入库数量', // 入库数量
+          minInterval: 1
+        },
+        series: this.chartData.series.map((item, index) => ({
+          name: item.name,
+          type: 'line',
+          data: item.data,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 6,
+          itemStyle: {
+            color: this.chartColors[index % this.chartColors.length]
+          },
+          lineStyle: {
+            width: 2
+          }
+        }))
+      }
+      this.chart.setOption(option, true)
+    },
+    /** 处理日期范围变化 */
+    handleDateRangeChange(val) {
+      if (val) {
+        this.queryParams.startTime = val[0]
+        this.queryParams.endTime = val[1]
+      } else {
+        this.queryParams.startTime = ''
+        this.queryParams.endTime = ''
+      }
+    },
+    /** 处理查询按钮点击 */
+    async handleQuery() {
+      // 验证时间范围是否为空
+      if (!this.dateRange || this.dateRange.length === 0 || !this.dateRange[0] || !this.dateRange[1]) {
+        this.$message.warning('请选择时间范围') // 请选择时间范围
+        return
+      }
+
+      try {
+        const response = await getInAnalysisData(this.queryParams)
+        if (response.code === 200) {
+          this.chartData.xAxis = response.data.xAxis
+          this.chartData.series = response.data.series
+          this.updateChart()
+        } else {
+          this.$message.error(response.msg)
+        }
+      } catch (error) {
+        console.error('获取统计数据失败', error) // 获取统计数据失败
+        this.$message.error('获取统计数据失败') // 获取统计数据失败
+      }
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.chart-wrapper {
+  margin-top: 20px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.chart-scroll-container {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+</style>

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>

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

@@ -0,0 +1,217 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form-item label="仓库" prop="warehouseId"> <!-- 仓库 -->
+        <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> <!-- 请选择仓库 -->
+          <el-option
+            v-for="item in warehouseOptions"
+            :key="item.warehouseId"
+            :label="item.warehouseName"
+            :value="item.warehouseId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange"> <!-- 时间范围 -->
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateRangeChange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button> <!-- 查询 -->
+      </el-form-item>
+    </el-form>
+
+    <div class="chart-wrapper">
+      <div class="chart-scroll-container">
+        <div ref="chartRef" style="height: 500px; min-width: 800px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { listWarehouse } from '@/api/bas/warehouse'
+import { getInAnalysisData } from '@/api/kpi/inAnalysis'
+
+export default {
+  name: 'InAnalysisByTime',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        warehouseId: null,
+        startTime: '',
+        endTime: '',
+        inOut:'2'
+      },
+      dateRange: [],
+
+      // 仓库选项
+      warehouseOptions: [],
+      // 图表实例
+      chart: null,
+      // 图表数据
+      chartData: {
+        xAxis: [],
+        series: []
+      },
+      // 图表颜色
+      chartColors: ['#409EFF', '#67C23A'],
+      queryWarehouseParam:{
+        pageNum: 1,
+        pageSize: 99,
+        typeData:[1]
+      }
+    }
+  },
+  mounted() {
+    this.getWarehouseList()
+    this.initChart()
+    this.setDefaultDateRange()
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    /** 获取仓库列表 */
+    async getWarehouseList() {
+      try {
+        const response = await listWarehouse(this.queryWarehouseParam)
+        this.warehouseOptions = response.rows
+      } catch (error) {
+        console.error('获取仓库列表失败', error) // 获取仓库列表失败
+      }
+    },
+    /** 设置最近七天时间范围 */
+    setDefaultDateRange() {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
+      this.dateRange = [this.formatDate(start), this.formatDate(end)]
+      this.handleDateRangeChange(this.dateRange)
+      this.handleQuery()
+    },
+    /** 格式化日期 */
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    /** 初始化图表 */
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.updateChart()
+    },
+    /** 更新图表数据 */
+    updateChart() {
+      const option = {
+        title: {
+          text: '出库数量统计' // 出库数量统计（按巷道）
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: this.chartData.series.map(item => item.name),
+          top: 25
+        },
+        grid: {
+          top: 80,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.chartData.xAxis
+        },
+        yAxis: {
+          type: 'value',
+          name: '出库数量', // 出库数量
+          minInterval: 1
+        },
+        series: this.chartData.series.map((item, index) => ({
+          name: item.name,
+          type: 'line',
+          data: item.data,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 6,
+          itemStyle: {
+            color: this.chartColors[index % this.chartColors.length]
+          },
+          lineStyle: {
+            width: 2
+          }
+        }))
+      }
+      this.chart.setOption(option, true)
+    },
+    /** 处理日期范围变化 */
+    handleDateRangeChange(val) {
+      if (val) {
+        this.queryParams.startTime = val[0]
+        this.queryParams.endTime = val[1]
+      } else {
+        this.queryParams.startTime = ''
+        this.queryParams.endTime = ''
+      }
+    },
+    /** 处理查询按钮点击 */
+    async handleQuery() {
+      // 验证时间范围是否为空
+      if (!this.dateRange || this.dateRange.length === 0 || !this.dateRange[0] || !this.dateRange[1]) {
+        this.$message.warning('请选择时间范围') // 请选择时间范围
+        return
+      }
+
+      try {
+        const response = await getInAnalysisData(this.queryParams)
+        if (response.code === 200) {
+          this.chartData.xAxis = response.data.xAxis
+          this.chartData.series = response.data.series
+          this.updateChart()
+        } else {
+          this.$message.error(response.msg)
+        }
+      } catch (error) {
+        console.error('获取统计数据失败', error) // 获取统计数据失败
+        this.$message.error('获取统计数据失败') // 获取统计数据失败
+      }
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.chart-wrapper {
+  margin-top: 20px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.chart-scroll-container {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+</style>

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>

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

@@ -0,0 +1,223 @@
+<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 @change="onWarehouseChange">
+          <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="roadwayId">
+        <el-select v-model="queryParams.roadwayId" placeholder="请选择巷道" clearable @change="handleQuery">
+          <el-option
+            v-for="item in roadwayOptions"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </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 { getSpaceStatusCounts } from "@/api/kpi/spaceAnalysis"
+import { listWarehouse } from "@/api/bas/warehouse";
+import { getRoadways } from "@/api/kpi/spacePlan";
+export default {
+  name: "spaceAnalysis",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 仓库选项
+      warehouseOptions: [],
+      // 巷道选项
+      roadwayOptions: [],
+      // 查询参数
+      queryParams: {
+        warehouseId: null,
+        roadwayId: null
+      },
+      // 图表实例
+      chart: null,
+      // 图表数据（状态计数）
+      chartData: {},
+      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;
+        // 默认选择第一个仓库并加载巷道
+        // if (!this.queryParams.warehouseId && this.warehouseOptions.length) {
+        //   this.queryParams.warehouseId = this.warehouseOptions[0].warehouseId;
+        // }
+        this.getRoadwayList();
+      });
+    }
+    ,
+    /** 仓库切换 */
+    onWarehouseChange() {
+      this.queryParams.roadwayId = null;
+      this.getRoadwayList();
+    }
+    ,
+    /** 查询巷道列表 */
+    getRoadwayList() {
+      if (!this.queryParams.warehouseId) return;
+      getRoadways({ warehouseId: this.queryParams.warehouseId }).then(res => {
+        this.roadwayOptions = (res.data && res.data.data) || [];
+        // 默认选择第一个巷道
+        // if (!this.queryParams.roadwayId && this.roadwayOptions.length) {
+        //   this.queryParams.roadwayId = this.roadwayOptions[0].value;
+        // }
+
+        this.handleQuery();
+      });
+    }
+    ,
+    /** 搜索按钮操作 */
+    handleQuery() {
+      // if (!this.queryParams.warehouseId || !this.queryParams.roadwayId) return;
+      getSpaceStatusCounts(this.queryParams).then(response => {
+        if (response.code === 200) {
+          this.chartData = response.data.data || {};
+          this.updateChart();
+        } else {
+          this.$message.error(response.msg);
+        }
+      }).catch(error => {
+        console.error('获取数据失败:', error);
+        this.$message.error('获取数据失败');
+      });
+    }
+    ,
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      // 保持默认仓库，重新加载巷道并刷新
+      if (this.warehouseOptions.length) {
+        this.queryParams.warehouseId = this.warehouseOptions[0].warehouseId;
+      }
+      this.queryParams.roadwayId = null;
+      this.getRoadwayList();
+    }
+    ,
+    /** 初始化图表 */
+    initChart() {
+      this.chart = echarts.init(this.$refs.spaceChart);
+      this.updateChart();
+    }
+    ,
+    /** 状态码转换为国际化文本 */
+    getStatusText(statusCode) {
+      const statusMap = {
+        '1': '空闲',
+        '2': '占用',
+        '3': '入库分配',
+        '4': '出库分配',
+        '5': '入库需盘点',
+        '6': '出库需盘点'
+      };
+      return statusMap[statusCode] || statusCode;
+    }
+    ,
+    /** 更新图表数据为饼图 */
+    updateChart() {
+      const counts = this.chartData || {};
+      const statusCodes = ['1','2','3','4','5','6'];
+      const pieData = statusCodes.map(code => ({
+        name: this.getStatusText(code),
+        value: counts[code] || 0
+      }));
+
+      const option = {
+        title: {
+          text: '货位状态分析',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          top: "5%",
+          textStyle: {
+            fontSize: 15,
+            color: "#292c2c"
+          },
+        },
+        series: [{
+          name: '货位状态',
+          type: 'pie',
+          radius: '60%',
+          center: ['50%', '60%'],
+          data: pieData,
+          label: {
+            show: true,
+            formatter: '{b}: {c}'
+          }
+        }]
+      };
+      if (this.chart) {
+        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>

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

@@ -0,0 +1,420 @@
+<template>
+  <div class="app-container">
+    <div class="search-box">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <!-- 仓库 -->
+        <el-form-item label="仓库" prop="warehouseId">
+          <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库"  @change="handleWarehouseChange">
+            <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="巷道">
+          <el-select v-model="queryParams.roadwayId" style="width: 150px" @change="handleRoadwayChange">
+            <el-option v-for="item in roadwayOptions" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <!-- 排 -->
+        <el-form-item label="排">
+          <el-select v-model="queryParams.thePlatoon" style="width: 150px" @change="handlePlatoonChange">
+            <el-option v-for="item in platoonOptions" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="chart-container">
+      <div id="container" v-show="queryParams.warehouseId !== '04'" style="height: 80vh"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {getRoadways, getPlatoons, getChartData, getChartMag} from "@/api/kpi/spacePlan"
+import {listWarehouse} from "@/api/bas/warehouse";
+import VueI18n from 'vue-i18n';
+
+export default {
+  name: 'SpacePlan',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        warehouseId: '01',
+        roadwayId: '1',
+        thePlatoon: '',
+        platoon: '1',
+        specifications: '',
+        quantity_x: '',
+        quantity_j: '',
+        layer_quantity: '',
+        classgroup_number: '',
+        class_workshop_date_time: '',
+        class_now_date_time: '',
+        print_date: '',
+        lot_no: '',
+
+      },
+      // 仓库选项
+      warehouseOptions: [],
+      // 巷道选项
+      roadwayOptions: [],
+      // 排号选项
+      platoonOptions: [],
+      // 图表实例
+      normalChart: null,
+      specialChart: null,
+      // 加载状态记录
+      loadingKeys: {},
+      // 图表数据
+      chartData: {
+        x: [],
+        y: [],
+        empty: [],
+        full: [],
+        inAllot: [],
+        outAllot: [],
+        inCheck: [],
+        outCheck: [],
+        resultsOf: [],
+        outCargo: [],
+        theLocked: []
+      },
+      queryWarehouseParam:{
+        pageNum: 1,
+        pageSize: 99,
+        typeData:[1]
+      }
+    }
+  },
+  mounted() {
+this.getWarehouseList()
+    this.initCharts()
+    this.handleWarehouseChange()
+  },
+  methods: {
+    /** 查询仓库列表 */
+    getWarehouseList() {
+
+      listWarehouse(this.queryWarehouseParam).then(response => {
+        this.warehouseOptions = response.rows;
+      });
+      // this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
+    },
+    // 初始化图表
+    initCharts() {
+      this.normalChart = echarts.init(document.getElementById('container'))
+    },
+    // 仓库变化处理
+    handleWarehouseChange() {
+      // 重置巷道和排号
+      this.queryParams.roadwayId = ''
+      this.queryParams.thePlatoon = ''
+      this.roadwayOptions = []
+      this.platoonOptions = []
+      // 获取巷道列表
+      getRoadways(this.queryParams).then(response => {
+        const roadways = response.data.data
+        if (roadways && roadways.length > 0) {
+          this.roadwayOptions = roadways
+          this.queryParams.roadwayId = roadways[0].value
+          this.handleRoadwayChange()
+        }
+      })
+    },
+    // 巷道变化处理
+    handleRoadwayChange() {
+      // 重置排号
+      this.queryParams.thePlatoon = ''
+      this.platoonOptions = []
+      // 获取排号列表
+      getPlatoons(this.queryParams).then(response => {
+        const platoons = response.data.data
+        if (platoons && platoons.length > 0) {
+          this.platoonOptions = platoons
+          this.queryParams.thePlatoon = platoons[0].value
+          this.loadChartData()
+        }
+      })
+    },
+    handlePlatoonChange() {
+      this.loadChartData()
+    },
+    // 加载普通仓库图表数据
+    loadChartData() {
+      getChartData(this.queryParams).then(response => {
+        const data = response.data
+        // 调整坐标值以匹配实际位置
+        const adjustCoordinates = (data) => {
+          return data.map(item => [item[0] - 1, item[1] - 1, item[2]]);
+        };
+        this.chartData.x = eval('(' + data["column"] + ')');
+        this.chartData.y = eval('(' + data["floor"] + ')');
+        this.chartData.empty = adjustCoordinates(eval('(' + data["empty"] + ')'));
+        this.chartData.full = adjustCoordinates(eval('(' + data["full"] + ')'));
+        this.chartData.inAllot = adjustCoordinates(eval('(' + data["inAllot"] + ')'));
+        this.chartData.outAllot = adjustCoordinates(eval('(' + data["outAllot"] + ')'));
+        this.chartData.inCheck = adjustCoordinates(eval('(' + data["inCheck"] + ')'));
+        this.chartData.outCheck = adjustCoordinates(eval('(' + data["outCheck"] + ')'));
+        this.updateNormalChart()
+      })
+
+
+    },
+
+    // 更新普通仓库图表
+    updateNormalChart() {
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return this.formatTooltip(params)
+          }
+        },
+        title: {
+          // 标题：库位分布平面图
+          text: '库位分布平面图',
+          // 子标题：排
+          subtext: this.queryParams.thePlatoon + '排'
+        },
+        grid: {
+          width: '90%',
+          height: '70%',
+          top: '20%',
+          left: '5%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.x,
+          splitArea: {show: true}
+        },
+        yAxis: {
+          type: 'category',
+          data: this.chartData.y,
+          splitArea: {show: true}
+        },
+        visualMap: {
+          show: false,
+          min: 1,
+          max: 6,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          inRange: {
+            color: ['#AEEEEE', '#FF9900', '#FFFF00', '#00CC00', '#FF0000', '#0000FF']
+          }
+        },
+        legend: {
+          data: [
+            {
+              // 图例：空位
+              name: '空位',
+              itemStyle: { color: '#AEEEEE' }
+            },
+            {
+              // 图例：满位
+              name: '满位',
+              itemStyle: { color: '#FF9900' }
+            },
+            {
+              // 图例：入库分配
+              name: '入库分配',
+              itemStyle: { color: '#FFFF00' }
+            },
+            {
+              // 图例：出库分配
+              name: '出库分配',
+              itemStyle: { color: '#FF0000' }
+            },
+            {
+              // 图例：入库需盘点
+              name: '入库需盘点',
+              itemStyle: { color: '#FF0000' }
+            },
+            {
+              // 图例：出库需盘点
+              name: '出库需盘点',
+              itemStyle: { color: '#0000FF' }
+            }
+          ],
+          textStyle: {
+            color: '#333'
+          }
+        },
+        series: [
+          {
+            // 空位
+            name: '空位',
+            type: 'heatmap',
+            data: this.chartData.empty,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          {
+            // 满位
+            name: '满位',
+            type: 'heatmap',
+            data: this.chartData.full,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          {
+            // 入库分配
+            name: '入库分配',
+            type: 'heatmap',
+            data: this.chartData.inAllot,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          {
+            // 出库分配
+            name: '出库分配',
+            type: 'heatmap',
+            data: this.chartData.outAllot,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          {
+            // 入库需盘点
+            name: '入库需盘点',
+            type: 'heatmap',
+            data: this.chartData.inCheck,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          {
+            // 出库需盘点
+            name: '出库需盘点',
+            type: 'heatmap',
+            data: this.chartData.outCheck,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          }
+        ]
+      }
+      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) {
+      if (params.seriesName !== '满位') {
+        // 排
+        if  (this.$i18n.locale ==='zh-cn') {
+          return params.seriesName + '<br>排' + this.queryParams.thePlatoon + '列' + (params.data[0] + 1) + '层' + (params.data[1] + 1);
+        }
+        else{
+          return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排 ' + (params.data[0] + 1) + '列 ' + (params.data[1] + 1) + '层';
+        }
+
+      }
+
+      const returnData = {
+        "thePlatoon": this.queryParams.thePlatoon,
+        "theColumn": params.data[0] + 1,
+        "theFloor": params.data[1] + 1,
+        "warehouseId": this.queryParams.warehouseId
+      };
+
+      // 生成唯一标识
+      const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
+
+      // 如果已经在加载中，返回基本信息
+      if (this.loadingKeys && this.loadingKeys[key]) {
+        if (this.$i18n.locale === 'zh-cn') {
+          return `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>加载中...`;
+        } else {
+          return `${params.seriesName}<br>${this.queryParams.thePlatoon}排 ${params.data[0] + 1}列 ${params.data[1] + 1}层<br>加载中...`;
+        }
+      }
+
+      // 返回基本信息
+      const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
+
+      // 设置加载状态
+      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;
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+.search-box {
+  background-color: #fff;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.chart-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
+