FT541-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="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>