KPI分析

This commit is contained in:
猫猫guowen
2025-09-18 10:55:41 +08:00
parent 0a0d4c44db
commit 0361c5846f
5 changed files with 175 additions and 83 deletions

View File

@@ -1,16 +1,16 @@
<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="warehouseId"> &lt;!&ndash; 仓库 &ndash;&gt;-->
<!-- <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> &lt;!&ndash; 请选择仓库 &ndash;&gt;-->
<!-- <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"
@@ -62,6 +62,8 @@ export default {
xAxis: [],
series: []
},
// 图表颜色
chartColors: ['#409EFF', '#67C23A'],
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
@@ -115,27 +117,54 @@ export default {
updateChart() {
const option = {
title: {
text: '入库数量统计' // 入库数量统计
text: '入库数量统计' // 入库数量统计(按巷道)
},
tooltip: {
trigger: 'axis'
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',
data: this.chartData.xAxis
boundaryGap: false,
data: this.chartData.xAxis,
axisLabel: {
rotate: 0
}
},
yAxis: {
type: 'value',
name: '入库数量' // 入库数量
},
series: [{
name: '入库数量', // 入库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: this.chartData.series,
smooth: true
}]
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option)
this.chart.setOption(option, true)
},
/** 处理日期范围变化 */
handleDateRangeChange(val) {

View File

@@ -1,16 +1,16 @@
<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="warehouseId"> &lt;!&ndash; 仓库 &ndash;&gt;-->
<!-- <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> &lt;!&ndash; 请选择仓库 &ndash;&gt;-->
<!-- <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"
@@ -62,6 +62,8 @@ export default {
xAxis: [],
series: []
},
// 图表颜色
chartColors: ['#409EFF', '#67C23A'],
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
@@ -115,27 +117,51 @@ export default {
updateChart() {
const option = {
title: {
text: '出库数量统计' // 出库数量统计
text: '出库数量统计' // 出库数量统计(按巷道)
},
tooltip: {
trigger: 'axis'
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: '出库数量' // 出库数量
},
series: [{
name: '出库数量', // 出库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: this.chartData.series,
smooth: true
}]
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option)
this.chart.setOption(option, true)
},
/** 处理日期范围变化 */
handleDateRangeChange(val) {

View File

@@ -1,24 +1,24 @@
<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>
<!-- 【搜索】按钮 -->
<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>
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">-->
<!-- &lt;!&ndash; 仓库 &ndash;&gt;-->
<!-- <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>-->
<!-- &lt;!&ndash; 【搜索】按钮 &ndash;&gt;-->
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!-- &lt;!&ndash; 【重置】按钮 &ndash;&gt;-->
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- 柱状图容器 -->
<div class="chart-container" style="height: 700px">

View File

@@ -3,16 +3,16 @@
<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="仓库" 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">
@@ -250,7 +250,7 @@ this.getWarehouseList()
series: [
{
// 空位
name: this.$t('KPIAnalysis_CargoPlan.legendEmpty'),
name: '空位',
type: 'heatmap',
data: this.chartData.empty,
itemStyle: {
@@ -260,7 +260,7 @@ this.getWarehouseList()
},
{
// 满位
name: this.$t('KPIAnalysis_CargoPlan.legendOccupied'),
name: '满位',
type: 'heatmap',
data: this.chartData.full,
itemStyle: {
@@ -270,7 +270,7 @@ this.getWarehouseList()
},
{
// 入库分配
name: this.$t('KPIAnalysis_CargoPlan.legendStockInAssigned'),
name: '入库分配',
type: 'heatmap',
data: this.chartData.inAllot,
itemStyle: {
@@ -280,7 +280,7 @@ this.getWarehouseList()
},
{
// 出库分配
name: this.$t('KPIAnalysis_CargoPlan.legendStockOutAssigned'),
name: '出库分配',
type: 'heatmap',
data: this.chartData.outAllot,
itemStyle: {
@@ -290,7 +290,7 @@ this.getWarehouseList()
},
{
// 入库需盘点
name: this.$t('KPIAnalysis_CargoPlan.legendStockInException'),
name: '入库需盘点',
type: 'heatmap',
data: this.chartData.inCheck,
itemStyle: {
@@ -300,7 +300,7 @@ this.getWarehouseList()
},
{
// 出库需盘点
name: this.$t('KPIAnalysis_CargoPlan.legendStockOutException'),
name: '出库需盘点',
type: 'heatmap',
data: this.chartData.outCheck,
itemStyle: {
@@ -355,7 +355,7 @@ this.getWarehouseList()
}
// 返回基本信息
const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}${this.$t('KPIAnalysis_CargoPlan.row')}${params.data[0] + 1}${this.$t('KPIAnalysis_CargoPlan.column')}${params.data[1] + 1}${this.$t('KPIAnalysis_CargoPlan.floor')}`;
const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
// 设置加载状态
if (!this.loadingKeys) this.loadingKeys = {};