Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="AGV可视化" ></Header>
		<div class="dv-content-body">
			<!-- 顶部头表 -->
			<div class="dv-content-body-bottom-list">
				<dv-border-box-8 :dur="35" :color="[, '#ffffff']">
					<div style="width: 100;height: 5%;">
						<!-- <span class="div-span-title">AGV路线图</span> -->
					</div>
					<div style="display: flex; width: 100%;height: 90%;position: relative;">
						<div style="color: white;margin-left: 1vw;">
							<div
								style="display: flex;
                            justify-content: flex-start;
                            align-items: center;"
							>
								<div style="width: 1vw;height: 1vw;background: #98afdb;"></div>
								<div
									style=" font-size: 1vw;
                                       width: 8vw;
                                        margin-left: 0.3vw; "
								>
									过道
								</div>
							</div>

							<div
								style="display: flex;
                            justify-content: flex-start;
                            align-items: center;"
							>
								<div style="width: 1vw;height: 1vw;background: #006fdf;"></div>
								<div
									style=" font-size: 1vw;
                                        width: 8vw;
                                        margin-left: 0.3vw; "
								>
									AGV站点
								</div>
							</div>
							<div
								style="display: flex;
                            justify-content: flex-start;
                            align-items: center;"
							>
								<div style="width: 1vw;height: 1vw;background: #ff0000;"></div>
								<div
									style=" font-size: 1vw;
                                        width: 8vw;
                                        margin-left: 0.3vw; "
								>
									立库区点位
								</div>
							</div>
							<div
								style="display: flex;
                            justify-content: flex-start;
                            align-items: center;"
							>
								<div style="width: 1vw;height: 1vw;background: #90ee90;"></div>
								<div
									style=" font-size: 1vw;
                                        width: 8vw;
                                        margin-left: 0.3vw; "
								>
									充电桩点位
								</div>
							</div>
						</div>
						<div style="width: 100%;height: 90%;position: relative;left: -5vw;top: 2vw;">
							<div id="bubble-container"></div>
						</div>
					</div>
				</dv-border-box-8>
			</div>
		</div>
	</div>
</template>

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

import headLeft from '@/components/headLeft'
import headRight from '@/components/headRight'

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

export default {
	data() {
		return {
			baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLine: window.appConfig.baseUrlint,
			sysData: {},
			sysInitTimeNum: 55,
			sysTimeNum: 55,
			sysinfo: [],
		}
	},
	components: {
		Header,
		headLeft,
		headRight,
		footerLeft,
		footerCenter,
		footerRight,
	},

	methods: {
		getAGVData() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				// urlSuffix: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
				logTitle: 'AGV-位置状态',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBeforeFour(res, opt.logTitle)) return
				setTimeout(() => {
					this.sed()
				}, 300)
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBeforeFour(res, title) {
			if (res.data.data == null || res.data.data.length == 0) {
				this.sysData = []
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		sed() {
			this.agvLineData = this.sysData
			var agvLineDatas = this.agvLineData
			if (agvLineDatas) {
				function formatMarkInfo(agvLineDatas) {
					return agvLineDatas.map((item) => ({
						id: `a_${item.landmark}`,
						taskNumber: item.taskNo,
						carCode: item.agvNumber,
						speed: item.speed,
						status: item.status,
						startLandmark: item.startLandmark,
						endLandmark: item.endLandmark,
						battery: item.battery,
					}))
				}
				var markInfos = formatMarkInfo(agvLineDatas)
				window.findMarkInfo(markInfos, this.sysinfo)
				this.sysinfo = markInfos
			}
		},
		intInterval: function() {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.getAGVData()
			})
		},
	},
	mounted() {
		debugger
		let coordinatelist = window.coordinatelist
		let agvMarkList = []
		coordinatelist.forEach((i) => {
			agvMarkList.push({ ...i, top: i.y * 1.2 + 'vw', left: i.x * 1.2 + 2 + 'vw' })
		})
		window.initMarksLine('#bubble-container', agvMarkList)
		this.getAGVData()
		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-head-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 20%;
	}

	.dv-content-body-bottom-list {
		width: 98.8%;
		display: flex;
		height: 100%;
		justify-content: space-between;
		align-items: center;
		margin: auto;
	}
}
</style>
<style lang="scss">
.bubble {
	position: absolute;
	border: 1px solid yellow;
	top: -11.5vh;
	left: 230%;
	transform: translateX(-50%);
	background: transparent;
	border-radius: 8px;
	display: inline-block;
	width: 8vw;
	animation: blink 13s infinite;
	background-color: #010e2b;
	z-index: 99;
	//overflow: hidden; /* 添加这一行 */
}

.bubble::before {
	content: '';
	position: absolute;
	top: 107%;
	left: 19%;
	transform: translateX(-50%);
	width: 4%;
	height: 4px;
	background-color: red;
	border-style: solid;
	border-radius: 50%;
	animation: pulse 1s infinite;
	z-index: 2;
	opacity: 0; /* 添加这一行 */
	transition: opacity 0.5s; /* 添加这一行 */
}

.bubble.show::before {
	opacity: 1; /* 添加这一行 */
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}
</style>