项目初始化

RuoYi-App-master/pages/charts/spaceAnalysis.vue

@@ -0,0 +1,209 @@
+<template>
+	<view class="container">
+		<view class="warehouse-selector">
+			<uni-forms>
+				<uni-forms-item :label="$t('spaceAnalysis.warehouse')">
+					<uni-data-select
+						v-model="selectedWarehouseId"
+						:localdata="warehouseList"
+						:clear="false"
+						:placeholder="$t('spaceAnalysis.warehousePlaceholder')"
+						@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: this.$t('spaceAnalysis.cargoSpaceStatus'),
+					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: this.$t('spaceAnalysis.aisleStatistics'),
+					fontSize: 15
+				},
+				legend: {
+					show: true
+				},
+				xAxis: {
+					fontSize: 12
+				},
+				yAxis: {
+					name: this.$t('spaceAnalysis.quantity'),
+					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${this.$t('spaceAnalysis.aisle')}`],
+						series: [{
+								    name: this.$t('spaceAnalysis.inboundQuantity'),
+								    data:[res.data["in"]]
+								},{
+									name: this.$t('spaceAnalysis.outboundQuantity'),
+									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>