Board / HH-board-2026 · Files

<template>
	<div class="dv-content-body-center-list-left">
		<div class="divee">
			<!-- <div class="agvStle" v-for="(item, index) in contents" :key="index">
				<div :class="eqName(item.status)">
					{{ item.status }}
				</div>
				<div class="imgStyle">
					<div class="imgCSS">
						<img style="height: 100%;" src="../assets/img/img1.png" alt="" />
					</div>
					<div class="taskStatus">{{ item.agvNumber }}</div>
				</div>
				<div class="BottomStyleTop">
					<div class="BottomStyle">任务号：{{ item.taskNo }}</div>
					<div class="BottomStyle">速度：{{ item.speed }}m/min</div>
					<div class="dianchiCss">
						<div style="width: 29%;">电量：</div>
						<div style="width: 56%;height: 56%;" :id="createChartId(index)"></div>
						<div style="width: 6%;font-size: 1vw;">{{ item.battery }}%</div>
					</div>
				</div>
			</div> -->
			<!-- 堆垛机 -->
            <div class="agvStle" v-for="(item, index) in contents" :key="index">
                <div :class="eqName(item.status)">
					{{ item.status }}
				</div>
                <div class="imgStyle-ddj">
					<div class="imgCSS">
						<img style="height: 100%;" src="../assets/img/ddj.png" alt="" />
					</div>
					<div class="taskStatus">{{ item.equipmentCode }}</div>
				</div>
            </div>
			<!-- <div class="agvStle">
				<div class="WCSStle-status"></div>
				<div class="imgStyle-ddj">
					<div class="imgCSS">
						<img style="height: 100%;" src="../assets/img/ddj.png" alt="" />
					</div>
					<div class="taskStatus">堆垛机001</div>
				</div>
			</div>
			<div class="agvStle">
				<div class="WCSStle-status"></div>
				<div class="imgStyle-ddj">
					<div class="imgCSS">
						<img style="height: 100%;" src="../assets/img/ddj.png" alt="" />
					</div>
					<div class="taskStatus">堆垛机002</div>
				</div>
			</div>
            <div class="agvStle">
				<div class="WCSStle-status"></div>
				<div class="imgStyle-ddj">
					<div class="imgCSS">
						<img style="height: 100%;" src="../assets/img/ddj.png" alt="" />
					</div>
					<div class="taskStatus">堆垛机003</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			sysData: {},
			contents: [],
			show: '',
		}
	},
	methods: {
		createChartId(index) {
			return 'main_' + index
		},
		getData(data) {
			this.contents = data
			// this.show = show

			// setTimeout(() => {
			// 	for (let i = 0; i < this.contents.length; i++) {
			// 		let myChart = this.$echarts.init(document.getElementById('main_' + i))
			// 		dianLiangOne.series[1].data = [this.contents[i].battery]
			// 		myChart.clear()
			// 		myChart.setOption(dianLiangOne)
			// 		window.onresize = myChart.resize
			// 	}
			// }, 200)
		},
		eqName(name) {
			if (name == '无状态') {
				return 'agvStle-yolle'
			} else if (name == '自动暂停') {
				return 'agvStle-yolle'
			} else if (name == '自动空闲') {
				return 'agvStle-yolle'
			} else if (name == '自动忙碌') {
				return 'agvStle-status'
			} else if (name == '充电中') {
				return 'agvStle-status'
			} else if (name == '离线') {
				return 'agvStle-status-lixian'
			} else if (name == '手动') {
				return 'agvStle-yolle'
			} else if (name == '故障') {
				return 'agvStle-status-red'
			} else if (name == '待机') {
                return 'agvStle-yolle'
            } else if (name == '运行') {
                return 'agvStle-status'
            }
		},
	},
	mounted() {
		// this.getData()
		// this.getDianliang()
		// this.getDianliangTwo()
	},
}
</script>

<style lang="less" scoped>
.dv-content-body-center-list-left {
	width: 33vw;
	height: 95%;
	border: 1.5px solid hsl(208.57deg 51.22% 40.2%);
}
.divee {
	display: flex;
	width: 100%;
	height: 99%;
	//border: 1px solid #133a71;
}
.agvStle {
	display: flex;
	flex-direction: column;
	width: 33%;
	height: 100%;
	border: 1px #133a71 solid;
}
.agvStle-status {
	height: 9%;
	width: 20%;
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
	background-color: #009966;
}
.WCSStle-status {
	height: 9%;
	width: 15%;
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
}
.agvStle-yolle {
	height: 9%;
	width: 20%;
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
	background-color: #fdb300;
}
.agvStle-status-red {
	height: 9%;
	width: 20%;
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
	background-color: red;
}
.agvStle-status-lixian {
	height: 9%;
	width: 20%;
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
	background-color: rgb(154, 146, 146);
}
.imgStyle {
	height: 56%;
	width: 100%;
	margin-top: 1vw;
	.imgCSS {
		height: 60%;
		width: 100%;
		text-align: center;
	}

	.taskStatus {
		text-align: center;
		font-size: 1vw;
		color: #fff;
		margin-top: 1vh;
	}
}
.imgStyle-ddj {
	height: 86%;
	width: 100%;
	.imgCSS {
		height: 91%;
		width: 100%;
		text-align: center;
	}

	.taskStatus {
		text-align: center;
		font-size: 1vw;
		color: #fff;
		margin-top: 1vh;
	}
}
.BottomStyleTop {
	height: 28%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.BottomStyle {
	font-size: 1vw;
	color: aliceblue;
	margin-left: 2vw;
}
.dianchiCss {
	width: 85%;
	height: 30px;
	display: flex;
	font-size: 1vw;
	color: aliceblue;
	margin-left: 2vw;
	align-items: center;
}
</style>