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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" :label-width="$t('KPIAnalysis_CargoSpace.lblWidthSearch')">
      <!-- 仓库 -->
      <el-form-item :label="$t('KPIAnalysis_CargoSpace.warehouse')" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" :placeholder="$t('KPIAnalysis_CargoSpace.placeholderWarehouse')" 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">{{ $t('KPIAnalysis_CargoSpace.btnSearch') }}</el-button>
        <!-- 【重置】按钮 -->
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('KPIAnalysis_CargoSpace.btnReset') }}</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"
import {listWarehouse} from "@/api/bas/warehouse";
export default {
  name: "spaceAnalysis",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 仓库选项
      warehouseOptions: [],
      // 查询参数
      queryParams: {
        warehouseId: "01",  // 默认选择仓库1
      },
      // 图表实例
      chart: null,
      // 图表数据（模拟数据）
      chartData:[]
    }
  }
  ,
  created() {
    this.getWarehouseList();
    this.handleQuery();
  }
  ,
  mounted() {
    this.initChart();
  }
  ,
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
  ,
  methods: {
    /** 查询仓库列表 */
    getWarehouseList() {
      // TODO: 调用获取仓库列表接口
      listWarehouse().then(response => {
        this.warehouseOptions = response.rows;
      });
      // this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
    }
    ,
    /** 搜索按钮操作 */
    handleQuery() {
      getSpaceAnalysisList(this.queryParams).then(response => {
        if (response.code === 200) {
          this.chartData = response.data;
          this.updateChart();
        } else {
          this.$message.error(response.msg);
        }
      }).catch(error => {
        // 提示：获取数据失败
        console.error(this.$t('KPIAnalysis_CargoSpace.errorGetData') + ':', error);
        this.$message.error(this.$t('KPIAnalysis_CargoSpace.errorGetData'));
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.warehouseId = "01";  // 重置时仍选择仓库1
      this.handleQuery();
    }
    ,
    /** 初始化图表 */
    initChart() {
      this.chart = echarts.init(this.$refs.spaceChart);
      this.updateChart();
    }
    ,
    /** 更新图表数据 */
    updateChart() {
      console.log('chartData:', this.chartData);
      if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) {
        // 提示：无效的图表数据
        console.warn(this.$t('KPIAnalysis_CargoSpace.warnInvalidChartData'));
        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: {
          // 巷道1-4
          color: roadway === '巷道1' ? '#1890ff' :
                 roadway === '巷道2' ? '#52c41a' :
                 roadway === '巷道3' ? '#1890ff' :
                 roadway === '巷道4' ? '#52c41a' : '#1890ff'
        },
        label: {
          show: true,
          position: 'top'
        }
      }));
      // 提示：生成的系列配置
      console.log(this.$t('KPIAnalysis_CargoSpace.config'), series);

      const option = {
        title: {
          // 货位状态分析
          text: this.$t('KPIAnalysis_CargoSpace.textChartCargoSpace'),
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: "5%",
          textStyle: {
            fontSize: 15,
            color: "#292c2c"
          },
        },
        xAxis: {
          type: 'category',
          data: this.chartData.data.map(item => item.status),
          axisLabel: {
            interval: 0,
            rotate: 0
          }
        },
        yAxis: {
          type: 'value',
          // 数量
          name: this.$t('KPIAnalysis_CargoSpace.textValue')
        },
        series: series
      };
      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>