Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="料箱库信息看板"></Header>
		<div class="dv-content-body">
			<!-- 顶部头表 -->
			<div class="dv-content-body-head-list">
				<!-- <div :class="eqstatus(item.name)" v-for="item in topData" :key="item.index">
					<div class="qty">{{ item.number }}</div>
					<div class="text">{{ item.name }}</div>
				</div> -->
				<div class="dv-content-body-head-list-delit2">
					<div class="qty">{{ topForm.total_locations }}</div>
					<div class="text">总库位</div>
				</div>
				<div class="dv-content-body-head-list-delit3">
					<div class="qty">{{ topForm.free_locations }}</div>
					<div class="text">空闲库位</div>
				</div>
				<div class="dv-content-body-head-list-delit1">
					<div class="qty">{{ topForm.used_locations }}</div>
					<div class="text">已使用库位</div>
				</div>
				<!-- <div class="dv-content-body-head-list-delit2">
					<div class="qty">123456</div>
					<div class="text">库位</div>
				</div>
				<div class="dv-content-body-head-list-delit3">
					<div class="qty">123456</div>
					<div class="text">库位</div>
				</div> -->
			</div>
			<!-- 中间图表 -->
			<div class="dv-content-body-center-list">
				<bodyCenterLeft ref="bodyCenterLeft"></bodyCenterLeft>
				<bodyCenterRight ref="bodyCenterRight"></bodyCenterRight>
			</div>
			<!-- 底部图表 -->
			<div class="dv-content-body-bottom-list">
				<footerLeft ref="footerLeft"></footerLeft>
				<footerRight ref="footerRight"></footerRight>
			</div>
		</div>
	</div>
</template>

<script>
import Header from '@/layout/appHead'

import bodyCenterLeft from '@/components/inventoryInformation/bodyCenterLeft'
import bodyCenterRight from '@/components/inventoryInformation/bodyCenterRight'

import footerLeft from '@/components/inventoryInformation/footerLeft'
import footerRight from '@/components/inventoryInformation/footerRight'

export default {
	data() {
		return {
			baseUrlOff: 'http://172.16.43.203:8012/api/Board/GetInventoryInfoLX',
			baseUrlOnLine: window.appConfig.inventoryInformationLX,

			sysData: {},
			sysInitTimeNum: window.appConfig.sysTimeNum,
			sysTimeNum: window.appConfig.sysTimeNum,
			topData: [],
			topForm: {
				total_locations: 0,
				free_locations: 0,
				used_locations: 0
			},
			timer: null,
			refreshTimer: null
		}
	},
	components: {
		Header,

		bodyCenterLeft,
		bodyCenterRight,

		footerLeft,
		footerRight,
	},

	methods: {
		getECSData() {
			try {
				let opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
					logTitle: 'ECS',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					isHanderAjaxSuccessActionLoad: true,
				}
				let callBackFn = (res) => {
					try {
						if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

						// 检查数据结构是否完整
						if (!res.data || !res.data.data) {
							''.Log('数据结构不完整', 'getECSData')
							return
						}

						this.topForm.free_locations = res.data.data.free_locations || 0;
						this.topForm.used_locations = res.data.data.used_locations || 0;
						this.topForm.total_locations = res.data.data.total_locations || 0;

						// 安全调用子组件方法
						if (this.$refs.bodyCenterLeft) this.$refs.bodyCenterLeft.getData(res.data.data.in || [])
						if (this.$refs.bodyCenterRight) this.$refs.bodyCenterRight.getData(res.data.data.out || [])
						if (this.$refs.footerLeft) this.$refs.footerLeft.getData(res.data.data.equipmentAlarms || [])
						if (this.$refs.footerRight) this.$refs.footerRight.getData(res.data.data.taskInfos || [])
					} catch (error) {
						''.Log('处理数据时出错: ' + error.message, 'getECSData')
					}
				}
				''.ajax(this, opt, callBackFn)
			} catch (error) {
				''.Log('发起请求时出错: ' + error.message, 'getECSData')
			}
		},
		eqstatus(w) {
			if (w == '库存总量') {
				return 'dv-content-body-head-list-delit2'
			} else if (w == '物料品数') {
				return 'dv-content-body-head-list-delit3'
			} else {
				return 'dv-content-body-head-list-delit1'
			}
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data.data == null) {
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},

		getAllWMSData() { },
		getData() {
			const data = {
				total_locations: 5320,
				free_locations: 3892,
				used_locations: 1428,
				in: [
					{
						"day": "2026-03-06",
						"count": "93"
					},
					{
						"day": "2026-03-07",
						"count": "0"
					},
					{
						"day": "2026-03-08",
						"count": "0"
					},
					{
						"day": "2026-03-09",
						"count": "209"
					},
					{
						"day": "2026-03-10",
						"count": "116"
					},
					{
						"day": "2026-03-11",
						"count": "1"
					},
					{
						"day": "2026-03-12",
						"count": "3"
					}
				],
				out: [
					{
						"day": "2026-03-06",
						"count": "2"
					},
					{
						"day": "2026-03-07",
						"count": "0"
					},
					{
						"day": "2026-03-08",
						"count": "0"
					},
					{
						"day": "2026-03-09",
						"count": "6"
					},
					{
						"day": "2026-03-10",
						"count": "0"
					},
					{
						"day": "2026-03-11",
						"count": "1"
					},
					{
						"day": "2026-03-12",
						"count": "1"
					}
				],
				equipmentAlarms: [
					{
						"code": "SRM03",
						"alarmCode": "F8132",
						"msg": "F8132_备用",
						"startTime": "2026-03-12 10:19:45"
					},
					{
						"code": "SRM03",
						"alarmCode": "F8914",
						"msg": "F8914_货叉2电机2：自动模式下，货叉不在中心原点位置故障",
						"startTime": "2026-03-12 10:19:45"
					}
				],
				taskInfos: [
					{
						"taskId": "5448",
						"taskType": "入库",
						"taskStatus": "执行中",
						"from": "P2011",
						"to": "L065215",
						"created": "2026-03-10 14:29:35"
					},
					{
						"taskId": "5452",
						"taskType": "入库",
						"taskStatus": "执行中",
						"from": "P3041",
						"to": "L065219",
						"created": "2026-03-10 14:53:27"
					},
					{
						"taskId": "5453",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065301",
						"created": "2026-03-10 14:53:37"
					},
					{
						"taskId": "5454",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065302",
						"created": "2026-03-10 14:53:49"
					},
					{
						"taskId": "5455",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065303",
						"created": "2026-03-10 14:54:05"
					},
					{
						"taskId": "5456",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065304",
						"created": "2026-03-10 14:54:17"
					},
					{
						"taskId": "5457",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065305",
						"created": "2026-03-10 14:54:29"
					},
					{
						"taskId": "5458",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065306",
						"created": "2026-03-10 14:54:39"
					},
					{
						"taskId": "5459",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065307",
						"created": "2026-03-10 14:54:50"
					},
					{
						"taskId": "5460",
						"taskType": "入库",
						"taskStatus": "待执行",
						"from": "P3041",
						"to": "L065308",
						"created": "2026-03-10 14:55:07"
					}
				]
			}


			this.topForm.free_locations = data.free_locations;
			this.topForm.used_locations = data.used_locations;
			this.topForm.total_locations = data.total_locations;
			this.$refs.bodyCenterLeft.getData(data.in)
			this.$refs.bodyCenterRight.getData(data.out)
			this.$refs.footerLeft.getData(data.equipmentAlarms)
			this.$refs.footerRight.getData(data.taskInfos)
		},

		intInterval: function () {
			// 数据刷新定时器
			this.timer = ''.intInterval(this, this.sysInitTimeNum, () => {
				this.getECSData()
			})
			// 页面自动刷新机制，每2小时刷新一次以释放内存
			this.refreshTimer = setInterval(() => {
				window.location.reload()
			}, 3600000) // 2小时
		},
	},
	mounted() {
		//eslint-disable-next-line no-debugger
		// debugger
		this.getECSData()
		// this.getData()
		// 【发布的时候要取消注释】
		this.intInterval()
	},
	beforeDestroy() {
		// 清除定时器
		if (this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
		// 清除页面刷新定时器
		if (this.refreshTimer) {
			clearInterval(this.refreshTimer)
			this.refreshTimer = null
		}
	},
}
</script>

<style lang="scss" scoped>
.app-body {
	height: 100%;
	width: 100%;

	.dv-content-body {
		height: 90%;
		width: 100%;
		// background: rebeccapurple;
	}

	.dv-content-body-head-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		width: 98%;
		height: 23.5%;
	}

	.dv-content-body-head-list-delit1 {
		width: 30%;
		height: 13vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 3px solid hsl(208.57deg 51.22% 40.2%);
		box-shadow: inset 0 0 30px hsl(201, 86%, 50%);

		.qty {
			width: 100%;
			font-size: 6vh;
			font-family: electronicFont;
			color: hsl(200.68deg 94.87% 69.41%);
			text-align: center;
		}

		.text {
			width: 100%;
			color: hsl(200.68deg 94.87% 69.41%);
			text-align: center;
		}
	}

	.dv-content-body-head-list-delit2 {
		width: 30%;
		height: 13vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 3px solid hsl(264.77deg 77.48% 43.53%);
		box-shadow: inset 0 0 30px hsl(264.77deg 77.48% 43.53%);

		.qty {
			width: 100%;
			font-size: 6vh;
			font-family: electronicFont;
			color: hsl(264.77deg 77.48% 43.53%);
			text-align: center;
		}

		.text {
			width: 100%;
			color: hsl(264.77deg 77.48% 43.53%);
			text-align: center;
		}
	}

	.dv-content-body-head-list-delit3 {
		width: 30%;
		height: 13vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 3px solid hsl(160deg 100% 30%);
		box-shadow: inset 0 0 30px hsl(160deg 100% 30%);

		.qty {
			width: 100%;
			font-size: 6vh;
			font-family: electronicFont;
			color: hsl(160deg 100% 30%);
			text-align: center;
		}

		.text {
			width: 100%;
			color: hsl(160deg 100% 30%);
			text-align: center;
		}
	}

	.dv-content-body-center-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		width: 98%;
		height: 37.5%;
	}

	.dv-content-body-bottom-list {
		display: flex;
		margin: auto;
		width: 98%;
		height: 37%;
		justify-content: space-between;
		align-items: center;
	}
}
</style>