210 lines
4.2 KiB
Vue
210 lines
4.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="warehouse-selector">
|
|
<uni-forms>
|
|
<uni-forms-item label="仓库：">
|
|
<uni-data-select
|
|
v-model="selectedWarehouseId"
|
|
:localdata="warehouseList"
|
|
:clear="false"
|
|
placeholder="请选择仓库"
|
|
@change="handleWarehouseChange"
|
|
/>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
<view class="charts-container">
|
|
<view class="chart-box">
|
|
<qiun-data-charts type="pie" :opts="pieOpts" :chartData="pieData" />
|
|
</view>
|
|
<view class="chart-box">
|
|
<qiun-data-charts type="column" :opts="columnOpts" :chartData="columnData" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getBasWarehouList } from '@/api/bas/bas'
|
|
import { getCargoSpaceStatusData, getAisleStatisticsData } from '@/api/charts/spaceAnalysis'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
warehouseList: [],
|
|
selectedWarehouseId: '',
|
|
pieData: {
|
|
// series: [{
|
|
// data: [{
|
|
// name: '空货位',
|
|
// value: 30
|
|
// }, {
|
|
// name: '满货位',
|
|
// value: 30
|
|
// }, {
|
|
// name: '入库已分配',
|
|
// value: 10
|
|
// }, {
|
|
// name: '出库已分配',
|
|
// value: 10
|
|
// }, {
|
|
// name: '入库需盘点',
|
|
// value: 10
|
|
// }, {
|
|
// name: '出库需盘点',
|
|
// value: 10
|
|
// }]
|
|
// }]
|
|
},
|
|
pieOpts: {
|
|
title: {
|
|
name: '货位状态分布',
|
|
fontSize: 15
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
itemGap: 10
|
|
},
|
|
extra: {
|
|
pie: {
|
|
labelLine: true,
|
|
radiusPercent: 70
|
|
}
|
|
},
|
|
color: ['#2F9688', '#F1A541', '#4ECBB4', '#6D78DE', '#F6C45D', '#E96C5B']
|
|
},
|
|
columnData: {
|
|
// categories: ['A巷道', 'B巷道', 'C巷道', 'D巷道', 'E巷道'],
|
|
// series: [{
|
|
// name: '入库数量',
|
|
// data: [35, 28, 42, 25, 30]
|
|
// }, {
|
|
// name: '出库数量',
|
|
// data: [28, 22, 38, 20, 25]
|
|
// }]
|
|
},
|
|
columnOpts: {
|
|
title: {
|
|
name: '巷道出入库统计',
|
|
fontSize: 15
|
|
},
|
|
legend: {
|
|
show: true
|
|
},
|
|
xAxis: {
|
|
fontSize: 12
|
|
},
|
|
yAxis: {
|
|
name: '数量',
|
|
fontSize: 12
|
|
},
|
|
extra: {
|
|
column: {
|
|
width: 20,
|
|
activeBgColor: '#000000',
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getWarehouseList()
|
|
},
|
|
methods: {
|
|
// 获取仓库列表
|
|
getWarehouseList() {
|
|
getBasWarehouList({
|
|
typeData: ["1","2"],
|
|
pageNum: 1,
|
|
pageSize: 100
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
this.warehouseList = res.rows.map(item => {
|
|
return {
|
|
value: item.warehouseId,
|
|
text: item.warehouseName
|
|
}
|
|
})
|
|
|
|
// 如果有仓库，默认选择第一个并加载数据
|
|
if (this.warehouseList.length > 0) {
|
|
this.selectedWarehouseId = this.warehouseList[0].value
|
|
this.loadChartData(this.selectedWarehouseId)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// // 处理仓库选择变化
|
|
handleWarehouseChange(warehouseId) {
|
|
this.loadChartData(warehouseId)
|
|
},
|
|
// 加载图表数据
|
|
loadChartData(warehouseId) {
|
|
// // 加载货位状态分布数据
|
|
getCargoSpaceStatusData(warehouseId).then(res => {
|
|
if (res.code === 200 && res.data) {
|
|
// 更新饼图数据
|
|
this.pieData = {
|
|
series: [{
|
|
data: res.data.data
|
|
}]
|
|
}
|
|
}
|
|
})
|
|
|
|
// 加载巷道出入库统计数据
|
|
getAisleStatisticsData(warehouseId).then(res => {
|
|
if (res.code === 200 && res.data) {
|
|
// 更新柱状图数据
|
|
this.columnData = {
|
|
categories: ['1巷道'],
|
|
series: [{
|
|
name: '入库数量',
|
|
data:[res.data["in"]]
|
|
},{
|
|
name: '出库数量',
|
|
data:[res.data["out"]]
|
|
}]
|
|
}
|
|
|
|
// 将columnData转换为字符串并输出到控制台
|
|
console.log(JSON.stringify(this.columnData, null, 2))
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.warehouse-selector {
|
|
margin-bottom: 30rpx;
|
|
padding: 20rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.charts-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.chart-box {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
position: relative;
|
|
}
|
|
</style>
|