KPI分析
This commit is contained in:
@@ -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"> <!– 仓库 –>-->
|
||||
<!-- <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"
|
||||
@@ -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) {
|
||||
|
||||
@@ -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"> <!– 仓库 –>-->
|
||||
<!-- <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"
|
||||
@@ -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) {
|
||||
|
||||
@@ -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">-->
|
||||
<!-- <!– 仓库 –>-->
|
||||
<!-- <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>-->
|
||||
|
||||
<!-- 柱状图容器 -->
|
||||
<div class="chart-container" style="height: 700px">
|
||||
|
||||
@@ -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 = {};
|
||||
|
||||
Reference in New Issue
Block a user