项目初始化
This commit is contained in:
刘汗青
216
ruoyi-ui/src/views/kpi/cargospace/index.vue
Normal file
216
ruoyi-ui/src/views/kpi/cargospace/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<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 @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.roadwayId"
|
||||
:label="item.roadwayName"
|
||||
:value="item.roadwayId"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/plugins/echarts.min.js'
|
||||
import {listWarehouse} from "@/api/bas/warehouse";
|
||||
import {listRoadway} from "@/api/bas/roadway";
|
||||
import {getSpaceStatusCounts} from "@/api/kpi/kpi";
|
||||
|
||||
export default {
|
||||
name: "spaceAnalysis",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 仓库选项
|
||||
warehouseOptions: [],
|
||||
// 巷道选项
|
||||
roadwayOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
warehouseId: null,
|
||||
roadwayId: null
|
||||
},
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 图表数据（状态计数）
|
||||
chartData: {},
|
||||
queryWarehouseParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
warehouseType: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
created() {
|
||||
this.getWarehouseList();
|
||||
this.handleQuery();
|
||||
}
|
||||
,
|
||||
mounted() {
|
||||
this.initChart();
|
||||
}
|
||||
,
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
}
|
||||
,
|
||||
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();
|
||||
});
|
||||
}
|
||||
,
|
||||
/** 仓库切换 */
|
||||
onWarehouseChange() {
|
||||
this.queryParams.roadwayId = null;
|
||||
this.getRoadwayList();
|
||||
}
|
||||
,
|
||||
/** 查询巷道列表 */
|
||||
getRoadwayList() {
|
||||
if (!this.queryParams.warehouseId) return;
|
||||
listRoadway({warehouseId: this.queryParams.warehouseId}).then(res => {
|
||||
this.roadwayOptions = (res.rows) || [];
|
||||
this.handleQuery();
|
||||
});
|
||||
}
|
||||
,
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
getSpaceStatusCounts(this.queryParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data || {};
|
||||
this.updateChart();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取数据失败:', error);
|
||||
this.$message.error('获取数据失败');
|
||||
});
|
||||
}
|
||||
,
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.roadwayId = null;
|
||||
this.queryParams.warehouseId = null;
|
||||
this.handleQuery();
|
||||
}
|
||||
,
|
||||
/** 初始化图表 */
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.spaceChart);
|
||||
this.updateChart();
|
||||
}
|
||||
,
|
||||
/** 状态码转换为国际化文本 */
|
||||
getStatusText(statusCode) {
|
||||
const statusMap = {
|
||||
'1': '空闲',
|
||||
'2': '占用',
|
||||
'3': '入库分配',
|
||||
'4': '出库分配',
|
||||
'5': '入库需盘点',
|
||||
'6': '出库需盘点'
|
||||
};
|
||||
return statusMap[statusCode] || statusCode;
|
||||
}
|
||||
,
|
||||
/** 更新图表数据为饼图 */
|
||||
updateChart() {
|
||||
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
|
||||
}));
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '货位状态分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
color: "#292c2c"
|
||||
},
|
||||
},
|
||||
color: ['#25abd9', '#fac858', '#91cc75', '#ee6666', '#73c0de', '#3ba272'], // 添加六个自定义颜色
|
||||
series: [{
|
||||
name: '货位状态',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
center: ['50%', '60%'],
|
||||
data: pieData,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
}
|
||||
}]
|
||||
};
|
||||
if (this.chart) {
|
||||
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>
|
||||
Reference in New Issue
Block a user