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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" :label-width="$t('KPIAnalysis_Roadway.lblWidthSearch')">
      <!-- 仓库 -->
      <el-form-item :label="$t('KPIAnalysis_Roadway.warehouse')" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" :placeholder="$t('KPIAnalysis_Roadway.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 :label="$t('KPIAnalysis_Roadway.dateStart')" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          :placeholder="$t('KPIAnalysis_Roadway.placeholderDateStart')"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          clearable
        />
      </el-form-item>
      <!-- 结束时间 -->
      <el-form-item :label="$t('KPIAnalysis_Roadway.dateEnd')" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          :placeholder="$t('KPIAnalysis_Roadway.placeholderDateEnd')"
          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">{{ $t('KPIAnalysis_Roadway.btnSearch') }}</el-button>
        <!-- 【重置】按钮 -->
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('KPIAnalysis_Roadway.btnReset') }}</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: "01",  // 默认选择仓库1
        startTime: null,
        endTime: null
      },
      // 图表实例
      chart: null,
      // 图表数据
      chartData: {
        tunnels: [],
        inCounts: [],
        outCounts: []
      }
    }
  },
  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() {
      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: this.$t('KPIAnalysis_Roadway.textChartRoadway'),
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          // 【入库数量】、【出库数量】
          data: [this.$t('KPIAnalysis_Roadway.quantityOfStockIn'), this.$t('KPIAnalysis_Roadway.quantityOfStockOut')],
          top: '30px'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.tunnels,
          axisLabel: {
            interval: 0,
            rotate: 0
          }
        },
        yAxis: {
          type: 'value',
          // 数量
          name: this.$t('KPIAnalysis_Roadway.textValue')
        },
        series: [
          {
            // 入库数量
            name: this.$t('KPIAnalysis_Roadway.quantityOfStockIn'),
            data: this.chartData.inCounts,
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              color: '#1890ff'
            },
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            // 出库数量
            name: this.$t('KPIAnalysis_Roadway.quantityOfStockOut'),
            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>