Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="宏仁玻璃布仓看板" :sysInitTimeNum="sysTimeNum"></Header>
		<div class="dv-content-body">
			<!-- 顶部头表 -->
			<div class="dv-content-body-bottom-list">
				<div class="AGVtop">
					<headLeft ref="headLeft" class="AGV-start" />
					<headCenter ref="headCenter" class="AGV-conten" />
					<headRight ref="headRight" class="location" />
				</div>
				<div class="AGVbody">
					<bodyLeft ref="bodyLeft" class="AGV-start" />
					<bodyCenter ref="bodyCenter" class="AGV-conten2" />
					<bodyRight ref="bodyRight" class="AGV-conten" />
				</div>
				<div class="AGVbittle">
					<footerLeft ref="footerLeft" class="AGV-running" />
					<footerRight ref="footerRight" class="AGV-conten" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Header from '@/layout/appHead'
import headLeft from '@/components/headLeft'
import headCenter from '@/components/headCenter'
import headRight from '@/components/headRight'

import bodyLeft from '@/components/bodyLeft'
import bodyCenter from '@/components/bodyCenter'
import bodyRight from '@/components/bodyRight'

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

export default {
	data() {
		return {
			baseUrlOff: 'http://172.16.30.219:5221/api/Index/GetWebFWSInfo',
			// baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLine: window.appConfig.baseUrlintTwo,
			sysData: {},
			sysInitTimeNum: 20,
			sysTimeNum: 20,
		}
	},
	components: {
		Header,
		headLeft,
		headCenter,
		headRight,
		bodyLeft,
		bodyCenter,
		bodyRight,
		footerLeft,
		footerRight,
	},

	methods: {
		getAGVDataOne() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				logTitle: 'AGV-路线信息',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				// isHanderAjaxSuccessActionLoad: true,
				// type: 'post',
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

				setTimeout(() => {
					this.$refs.headLeft.sed(res.data.data)
					this.$refs.headCenter.getData(res.data.data)
					this.$refs.headRight.sed(res.data.data)
					this.$refs.footerLeft.sed(res.data.data)
					this.$refs.footerRight.sed(res.data.data)
				}, 300)
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data.data == null || res.data.data.length == 0) {
				this.sysData = []
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		intInterval: function () {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.getAGVDataOne()
			})
		},
		setData() {
			const data1 = {
				d1: 1644,
				d2: 577,
				d3: 214,
				d4: 6456,
				d5: 35.1,
				d6: 1067,
				d7: 277,
				d8: 6812

			}
			this.$refs.headLeft.sed(data1)

			const data2 = [
				{
					type: "堆垛机",
					name: "1号堆垛机",
					status: "运行",
					info: "-"
				},
				{
					type: "RGV",
					name: "1号RGV",
					status: "运行",
					info: "-"
				},
				{
					type: "RGV",
					name: "2号RGV",
					status: "运行",
					info: "-"
				}
			]
			this.$refs.headCenter.getData(data2)

			const data3 = [
				['1号堆垛机', '激光感应障碍物', '01-09 15:33/1'],
				['1号RGV', '与前RGV通讯失败', '01-09 13:08/1'],
				['2号RGV', '激光感应障碍物', '01-09 10:54/1'],
				['1号RGV', 'agv处于中位异常', '01-09 09:22/0']
			]
			this.$refs.bodyLeft.sed(data3)

			const data4 = [
				['1号堆垛机', '11', '10', '1'],
				['1号RGV', '20', '20', '1'],
				['2号RGV', '22', '21', '1']
			]
			this.$refs.footerRight.sed(data4)

			const data5 = {
				x: ['1号堆垛机', '1号RGV', '2号RGV'],
				running: [50, 40, 44],
				free: [49, 59, 55],
				error: [1, 1, 0.9],
			}
			this.$refs.bodyCenter.getwarehouseHealthbar(data5)

			const data6 = [
				['ZHD50174', 'P2025/B041905', 'B041905', '01-09 15:22'],
				['ZHD50112', 'P2025/B042703', 'B042703', '01-09 14:12'],
				['ZHD50013', 'P2025/B013102', 'B013102', '01-09 11:45']
			]
			this.$refs.headRight.sed(data6)

			const data7 = [
				['ZHD00003', 'D010308/P14017', 'P14017', '01-09 17:12'],
				['ZHD50223', 'A040205/P1106', 'P0112', '01-09 15:33'],
				['ZHD50112', 'C020201/P3009', 'P3009', '01-09 12:55']
			]
			this.$refs.bodyRight.sed(data7)
		}
	},
	mounted() {
		debugger
		this.setData()
		// this.getAGVDataOne()
		// this.intInterval()
	},
}
</script>

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

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

.dv-content-body-bottom-list {
	width: 98.8%;
	height: 98%;
	margin: auto;
	flex-wrap: wrap;

	.AGVtop {
		width: 100%;
		height: 32%;
		display: flex;
	}

	.AGVbody {
		width: 100%;
		height: 32%;
		display: flex;
		margin-top: 0.7%;
	}

	.AGVbittle {
		width: 100%;
		height: 32%;
		display: flex;
		margin-top: 0.7%;
	}

	.AGV-running {
		width: 66%;
		height: 101.3%;
		border: 2px solid #3879c9;
		justify-content: space-between;
		align-items: center;
		margin: 0px 0 10px 7px;
	}

	.AGV-start {
		width: 32%;
		height: 100%;
		border: 2px solid #3879c9;
		justify-content: space-between;
		align-items: center;
		margin: 0px 0 10px 7px;
	}

	.location {
		width: 33%;
		height: 100%;
		border: 2px solid #3879c9;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		margin: 0px 0 10px 7px;
	}

	.AGV-conten {
		width: 33%;
		height: 100%;
		border: 2px solid #3879c9;
		justify-content: space-between;
		align-items: center;
		margin: 0px 0 10px 7px;
	}

	.AGV-conten2 {
		width: 33.3%;
		height: 101.3%;
		border: 2px solid #3879c9;
		justify-content: space-between;
		align-items: center;
		margin: 0px 0 10px 7px;
	}

	.box {
		flex: 1;
		/* 左右各占50%宽度 */
		height: 100%;
		display: flex;
		flex-direction: column;
		/* 内部item上下排列 */
		justify-content: space-around;
		/* item均匀分布 */
		align-items: center;
		/* item水平居中 */
	}

	/* 每个小项样式：宽85%、高18%、边框、内部左右排列 */
	.item {
		width: 80%;
		height: 17%;
		border-radius: 5px;
		border: 1px solid #67c8fb;
		display: flex;
		justify-content: space-between;
		/* 名称左、数值右 */
		align-items: center;
		/* 内容垂直居中 */
		padding: 0 5px;
		/* 内容不贴边框 */
		background-color: #062448;
	}

	/* 名称/数值样式区分 */
	.name {
		color: #fff;
		font-size: 14px;
	}

	.value {
		color: #67c8fb;
		font-size: 14px;
		font-weight: bold;
	}
}
</style>