手持机
This commit is contained in:
@@ -87,6 +87,12 @@ public class KpiController extends BaseController {
|
||||
return success(kpiService.getSpaceAnalysis(warehouseId));
|
||||
}
|
||||
|
||||
@GetMapping("/spaceStatusCounts")
|
||||
public AjaxResult getSpaceStatusCounts(String warehouseId,
|
||||
String roadwayId) {
|
||||
return success(kpiService.getSpaceStatusCounts(warehouseId, roadwayId));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取货位巷道数据
|
||||
*
|
||||
|
||||
@@ -32,6 +32,7 @@ public interface KpiService {
|
||||
*/
|
||||
Map<String, Object> getRoadwayAnalysis(String warehouseId, String startTime, String endTime);
|
||||
|
||||
Map<String, Object> getSpaceStatusCounts(String warehouseId, String roadwayId);
|
||||
|
||||
|
||||
Map<String, Object> getSpaceAnalysis(String warehouseId);
|
||||
|
||||
@@ -289,6 +289,35 @@ public class KpiServiceImpl implements KpiService
|
||||
return response;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> getSpaceStatusCounts(String warehouseId, String roadwayId) {
|
||||
BasCargoSpace query = new BasCargoSpace();
|
||||
query.setWarehouseId(warehouseId);
|
||||
query.setRoadwayId(roadwayId);
|
||||
List<BasCargoSpace> list = basCargoSpaceMapper.selectBasCargoSpaceList(query);
|
||||
|
||||
Map<String, Integer> counts = new HashMap<>();
|
||||
counts.put("1", 0); // 空闲
|
||||
counts.put("2", 0); // 占用
|
||||
counts.put("3", 0); // 入库分配
|
||||
counts.put("4", 0); // 出库分配
|
||||
counts.put("5", 0); // 入库待检
|
||||
counts.put("6", 0); // 出库待检
|
||||
|
||||
for (BasCargoSpace space : list) {
|
||||
String status = space.getStatus();
|
||||
if (status != null && counts.containsKey(status)) {
|
||||
counts.put(status, counts.get(status) + 1);
|
||||
}
|
||||
}
|
||||
|
||||
Map<String, Object> res = new HashMap<>();
|
||||
res.put("data", counts);
|
||||
return res;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@Override
|
||||
public Map<String, Object> getRoadways(String warehouseId){
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
|
||||
@@ -7,3 +7,10 @@ export function getSpaceAnalysisList(query) {
|
||||
params: query
|
||||
})
|
||||
}
|
||||
export function getSpaceStatusCounts(query) {
|
||||
return request({
|
||||
url: '/kpi/spaceStatusCounts',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">-->
|
||||
<!-- <!– 仓库 –>-->
|
||||
<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-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable @change="onWarehouseChange">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in warehouseOptions"-->
|
||||
<!-- :key="dict.warehouseId"-->
|
||||
@@ -12,15 +12,26 @@
|
||||
<!-- />-->
|
||||
<!-- </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-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>
|
||||
@@ -29,8 +40,9 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/plugins/echarts.min.js'
|
||||
import { getSpaceAnalysisList } from "@/api/kpi/spaceAnalysis"
|
||||
import {listWarehouse} from "@/api/bas/warehouse";
|
||||
import { getSpaceStatusCounts } from "@/api/kpi/spaceAnalysis"
|
||||
import { listWarehouse } from "@/api/bas/warehouse";
|
||||
import { getRoadways } from "@/api/kpi/spacePlan";
|
||||
export default {
|
||||
name: "spaceAnalysis",
|
||||
data() {
|
||||
@@ -41,24 +53,36 @@ export default {
|
||||
showSearch: true,
|
||||
// 仓库选项
|
||||
warehouseOptions: [],
|
||||
// 巷道选项
|
||||
roadwayOptions: [
|
||||
{
|
||||
value: "1",
|
||||
name: "一巷道"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "二巷道"
|
||||
}
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
warehouseId: null // 默认选择仓库1
|
||||
// warehouseId: null,
|
||||
roadwayId: null
|
||||
},
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 图表数据(模拟数据)
|
||||
chartData:[],
|
||||
// 图表数据(状态计数)
|
||||
chartData: {},
|
||||
queryWarehouseParam:{
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
typeData:[1,2]
|
||||
typeData:[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
created() {
|
||||
this.getWarehouseList();
|
||||
// this.getWarehouseList();
|
||||
this.handleQuery();
|
||||
}
|
||||
,
|
||||
@@ -75,34 +99,59 @@ export default {
|
||||
,
|
||||
methods: {
|
||||
/** 查询仓库列表 */
|
||||
getWarehouseList() {
|
||||
|
||||
listWarehouse(this.queryWarehouseParam).then(response => {
|
||||
this.warehouseOptions = response.rows;
|
||||
});
|
||||
// this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
|
||||
}
|
||||
,
|
||||
// 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() {
|
||||
getSpaceAnalysisList(this.queryParams).then(response => {
|
||||
// if (!this.queryParams.warehouseId || !this.queryParams.roadwayId) return;
|
||||
getSpaceStatusCounts(this.queryParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data;
|
||||
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");
|
||||
this.queryParams.warehouseId = "01"; // 重置时仍选择仓库1
|
||||
this.handleQuery();
|
||||
|
||||
|
||||
}
|
||||
,
|
||||
/** 初始化图表 */
|
||||
@@ -118,57 +167,29 @@ export default {
|
||||
'2': '占用',
|
||||
'3': '入库分配',
|
||||
'4': '出库分配',
|
||||
'5': '入库待检',
|
||||
'6': '出库待检'
|
||||
'5': '入库需盘点',
|
||||
'6': '出库需盘点'
|
||||
};
|
||||
return statusMap[statusCode] || statusCode;
|
||||
},
|
||||
/** 更新图表数据 */
|
||||
}
|
||||
,
|
||||
/** 更新图表数据为饼图 */
|
||||
updateChart() {
|
||||
console.log('chartData:', this.chartData);
|
||||
if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) {
|
||||
// 提示:无效的图表数据
|
||||
console.warn('无效的图表数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取数据中所有的巷道字段
|
||||
const firstItem = this.chartData.data[0];
|
||||
// 巷道
|
||||
const roadwayFields = Object.keys(firstItem).filter(key => key.startsWith('巷道'));
|
||||
|
||||
// 准备系列配置
|
||||
const series = roadwayFields.map(roadway => ({
|
||||
name: roadway,
|
||||
type: 'bar',
|
||||
data: this.chartData.data.map(item => item[roadway]),
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
// 巷道1-4
|
||||
color: roadway === '巷道1' ? '#1890ff' :
|
||||
roadway === '巷道2' ? '#52c41a' :
|
||||
roadway === '巷道3' ? '#1890ff' :
|
||||
roadway === '巷道4' ? '#52c41a' : '#1890ff'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
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
|
||||
}));
|
||||
// 提示:生成的系列配置
|
||||
console.log('系列配置:', series);
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
// 货位状态分析
|
||||
text: '货位状态分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
@@ -177,22 +198,21 @@ export default {
|
||||
color: "#292c2c"
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.chartData.data.map(item => this.getStatusText(item.status)),
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0
|
||||
series: [{
|
||||
name: '货位状态',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
center: ['50%', '60%'],
|
||||
data: pieData,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// 数量
|
||||
name: '数量'
|
||||
},
|
||||
series: series
|
||||
}]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user