zyr/FT546MWS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KPI

Browse Source
This commit is contained in:
猫猫guowen
2025-12-29 16:35:26 +08:00
parent bec185c139
commit dc8f2d329a
8 changed files with 379 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ruoyi-ui/src/api/kpi/spacePlan.js
View File

@@ -9,6 +9,13 @@ export function getRoadways(query) {
params: query
})
}
export function getFloors(query) {
return request({
url: '/kpi/getFloors',
method: 'get',
params: query
})
}
//获取排列表
export function getPlatoons(query) {
return request({

128
ruoyi-ui/src/views/kpi/inAnalysis/indexByTime.vue
View File

@@ -1,20 +1,21 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<!-- <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="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"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@@ -46,7 +47,7 @@ export default {
return {
// 查询参数
queryParams: {
warehouseId: undefined,
warehouseId: null,
startTime: '',
endTime: '',
inOut:'1'
@@ -67,7 +68,7 @@ export default {
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1,2]
typeData:[1]
}
}
},
@@ -115,56 +116,63 @@ export default {
},
/** 更新图表数据 */
updateChart() {
const option = {
title: {
text: '入库数量统计' // 入库数量统计（按巷道）
},
tooltip: {
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,
axisLabel: {
rotate: 0
}
},
yAxis: {
type: 'value',
name: '入库数量', // 入库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
// 在调用setOption前检查chart实例是否存在
if (this.chart && typeof this.chart.setOption === 'function') {
const option = {
title: {
text: '入库数量统计' // 入库数量统计（按巷道）
},
lineStyle: {
width: 2
}
}))
tooltip: {
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,
axisLabel: {
rotate: 0
}
},
yAxis: {
type: 'value',
name: '入库数量', // 入库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option, true)
} else {
console.warn('Chart instance is not ready yet');
}
this.chart.setOption(option, true)
},
/** 处理日期范围变化 */
handleDateRangeChange(val) {

120
ruoyi-ui/src/views/kpi/outAnalysis/indexByTime.vue
View File

@@ -1,20 +1,21 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<!-- <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="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"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@@ -46,7 +47,7 @@ export default {
return {
// 查询参数
queryParams: {
warehouseId: undefined,
warehouseId: null,
startTime: '',
endTime: '',
inOut:'2'
@@ -67,7 +68,7 @@ export default {
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1,2]
typeData:[1]
}
}
},
@@ -115,53 +116,58 @@ export default {
},
/** 更新图表数据 */
updateChart() {
const option = {
title: {
text: '出库数量统计' // 出库数量统计（按巷道）
},
tooltip: {
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: '出库数量', // 出库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
// 在调用setOption前检查chart实例是否存在
if (this.chart && typeof this.chart.setOption === 'function') {
const option = {
title: {
text: '出库数量统计' // 出库数量统计（按巷道）
},
lineStyle: {
width: 2
}
}))
tooltip: {
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: '出库数量', // 出库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option, true)
} else {
console.warn('Chart instance is not ready yet');
}
this.chart.setOption(option, true)
},
/** 处理日期范围变化 */
handleDateRangeChange(val) {

135
ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue
View File

@@ -2,33 +2,33 @@
<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="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-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>-->
<!-- &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>
<!-- 饼状图容器 -->
@@ -54,19 +54,10 @@ export default {
// 仓库选项
warehouseOptions: [],
// 巷道选项
roadwayOptions: [
{
value: "1",
name: "一巷道"
},
{
value: "2",
name: "二巷道"
}
],
roadwayOptions: [],
// 查询参数
queryParams: {
// warehouseId: null,
warehouseId: null,
roadwayId: null
},
// 图表实例
@@ -82,7 +73,7 @@ export default {
}
,
created() {
// this.getWarehouseList();
this.getWarehouseList();
this.handleQuery();
}
,
@@ -99,37 +90,37 @@ export default {
,
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();
// });
// }
// ,
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();
// }
// ,
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();
// });
// }
// ,
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;
@@ -149,9 +140,12 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
// 保持默认仓库，重新加载巷道并刷新
if (this.warehouseOptions.length) {
this.queryParams.warehouseId = this.warehouseOptions[0].warehouseId;
}
this.queryParams.roadwayId = null;
this.getRoadwayList();
}
,
/** 初始化图表 */
@@ -198,6 +192,7 @@ export default {
color: "#292c2c"
},
},
color: ['#25abd9', '#fac858', '#91cc75', '#ee6666', '#73c0de', '#3ba272'], // 添加六个自定义颜色
series: [{
name: '货位状态',
type: 'pie',

118
ruoyi-ui/src/views/kpi/spacePlan/index.vue
View File

@@ -3,28 +3,28 @@
<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="巷道">
<el-select v-model="queryParams.roadwayId" style="width: 150px" @change="handleRoadwayChange">
<el-option v-for="item in roadwayOptions" :key="item.value" :label="item.label" :value="item.value"/>
<!-- <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.theFloor" style="width: 150px" @change="handleFloorChange">
<el-option v-for="item in floorOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<!-- 排 -->
<el-form-item label="排">
<el-select v-model="queryParams.thePlatoon" style="width: 150px" @change="handlePlatoonChange">
<el-option v-for="item in platoonOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<!-- <el-form-item label="排">
<el-select v-model="queryParams.thePlatoon" style="width: 150px" @change="handlePlatoonChange">
<el-option v-for="item in platoonOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>-->
</el-form>
</div>
@@ -36,7 +36,7 @@
<script>
import * as echarts from 'echarts'
import {getRoadways, getPlatoons, getChartData, getChartMag} from "@/api/kpi/spacePlan"
import {getRoadways, getPlatoons, getChartData, getChartMag, getFloors} from "@/api/kpi/spacePlan"
import {listWarehouse} from "@/api/bas/warehouse";
import VueI18n from 'vue-i18n';
@@ -49,6 +49,7 @@ export default {
warehouseId: '01',
roadwayId: '1',
thePlatoon: '',
theFloor: '1',
platoon: '1',
specifications: '',
quantity_x: '',
@@ -65,6 +66,7 @@ export default {
warehouseOptions: [],
// 巷道选项
roadwayOptions: [],
floorOptions: [],
// 排号选项
platoonOptions: [],
// 图表实例
@@ -89,12 +91,12 @@ export default {
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1,2]
typeData:[1]
}
}
},
mounted() {
this.getWarehouseList()
this.getWarehouseList()
this.initCharts()
this.handleWarehouseChange()
},
@@ -116,34 +118,28 @@ this.getWarehouseList()
// 重置巷道和排号
this.queryParams.roadwayId = ''
this.queryParams.thePlatoon = ''
this.roadwayOptions = []
this.floorOptions = []
this.platoonOptions = []
// 获取巷道列表
getRoadways(this.queryParams).then(response => {
const roadways = response.data.data
if (roadways && roadways.length > 0) {
this.roadwayOptions = roadways
this.queryParams.roadwayId = roadways[0].value
this.handleRoadwayChange()
// 获取层数列表
getFloors({ warehouseId: this.queryParams.warehouseId }).then(response => {
const floors = response.data.data || []
if (floors && floors.length > 0) {
this.floorOptions = floors.map(f => {
const lbl = f.label != null ? f.label : (f.name != null ? f.name : (f.title != null ? f.title : (f.value != null ? (String(f.value) + '排') : '')))
const val = f.value != null ? String(f.value) : String((lbl || '').replace(/[^\d]/g, ''))
return { label: lbl, value: val }
})
this.queryParams.theFloor = this.floorOptions[0].value
this.loadChartData()
} else {
this.floorOptions = []
this.queryParams.theFloor = null
}
})
},
// 巷道变化处理
handleRoadwayChange() {
// 重置排号
this.queryParams.thePlatoon = ''
this.platoonOptions = []
// 获取排号列表
getPlatoons(this.queryParams).then(response => {
const platoons = response.data.data
if (platoons && platoons.length > 0) {
this.platoonOptions = platoons
this.queryParams.thePlatoon = platoons[0].value
this.loadChartData()
}
})
},
handlePlatoonChange() {
handleFloorChange() {
console.log( this.queryParams.theFloor)
this.loadChartData()
},
// 加载普通仓库图表数据
@@ -178,10 +174,11 @@ this.getWarehouseList()
}
},
title: {
// 标题：库位分布平面图
text: '库位分布平面图',
// 子标题：排
subtext: this.queryParams.thePlatoon + '排'
subtext: (() => {
const sel = this.floorOptions.find(o => String(o.value) === String(this.queryParams.theFloor))
return sel && sel.label ? sel.label : ''
})()
},
grid: {
width: '90%',
@@ -230,7 +227,7 @@ this.getWarehouseList()
{
// 图例：出库分配
name: '出库分配',
itemStyle: { color: '#FF0000' }
itemStyle: { color: '#00cc00' }
},
{
// 图例：入库需盘点
@@ -327,35 +324,39 @@ this.getWarehouseList()
if (params.seriesName !== '满位') {
// 排
if (this.$i18n.locale ==='zh-cn') {
return params.seriesName + '<br>排' + this.queryParams.thePlatoon + '列' + (params.data[0] + 1) + '层' + (params.data[1] + 1);
return params.seriesName + '<br>' + (params.data[1] + 1) + '排' + (params.data[0] + 1) + '列' + this.queryParams.theFloor+ '层';
}
else{
return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排 ' + (params.data[0] + 1) + '列 ' + (params.data[1] + 1) + '层';
return params.seriesName + '<br>' + (params.data[1] + 1) + '排' + (params.data[0] + 1) + '列' + this.queryParams.theFloor+ '层';
}
}
const returnData = {
"thePlatoon": this.queryParams.thePlatoon,
"thePlatoon": params.data[1] + 1,
"theColumn": params.data[0] + 1,
"theFloor": params.data[1] + 1,
"theFloor": this.queryParams.theFloor,
"warehouseId": this.queryParams.warehouseId
};
// 生成唯一标识
const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
// 如果已经在加载中，返回基本信息
if (this.loadingKeys && this.loadingKeys[key]) {
if (this.$i18n.locale === 'zh-cn') {
return `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>加载中...`;
return params.seriesName + '<br>' + (params.data[1] + 1) + '排' + (params.data[0] + 1) + '列' + this.queryParams.theFloor + '层';
} else {
return `${params.seriesName}<br>${this.queryParams.thePlatoon}排 ${params.data[0] + 1}列 ${params.data[1] + 1}层<br>加载中...`;
return params.seriesName + '<br>' + (params.data[1] + 1) + '排' + (params.data[0] + 1) + '列' + this.queryParams.theFloor+ '层';
}
}
// 返回基本信息
const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
const baseStr = `${params.seriesName}<br>${(params.data[1] + 1)}排${params.data[0] + 1}列${this.queryParams.theFloor}层`;
// 设置加载状态
if (!this.loadingKeys) this.loadingKeys = {};
@@ -371,8 +372,8 @@ this.getWarehouseList()
tooltip: {
formatter: (p) => {
if (p.seriesName === params.seriesName &&
p.data[0] === params.data[0] &&
p.data[1] === params.data[1]) {
p.data[0] === params.data[0] &&
p.data[1] === params.data[1]) {
return str;
}
return this.formatTooltip(p);
@@ -417,4 +418,3 @@ this.getWarehouseList()
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>