zhgdlarge/src/views/sevenLargeScreen/elevatorMonitoring/right.vue

<template>
	<div class="rightBox">
		<div class="title"><i>设备监控信息</i></div>
		<div class="content">
			<div class="selectRight">
				<el-select v-model="lifeValue" class="m-2" placeholder="Select" size="small">
					<el-option
						v-for="(item, index) in noiseList"
						:key="index"
						:label="item.devName"
						:value="item.id"
						@click="checkItem(item)"
					/>
				</el-select>
			</div>
			<div class="contentSmall">
				<div class="top">
					<div class="leftTowerImg">
						<div class="centerEleImg">
							<img src="@/assets/images/elevatorMonitoring/elevatorBg.png" alt="" />
						</div>
						<div class="lineA"><img src="@/assets/images/elevatorMonitoring/lineA.png" alt="" /></div>
						<div class="lineAdata">
							<div>载重</div>
							<div style="color: #65d7f9">{{ elevatorList.loading || 0 }}kg</div>
						</div>
						<div class="lineAdata" style="left: 62%">
							<div>速度</div>
							<div style="color: #65d7f9">{{ elevatorList.speed || 0 }}m/s</div>
						</div>
						<div class="lineB"><img src="@/assets/images/elevatorMonitoring/lineB.png" alt="" /></div>
						<div class="lineBdata">
							<div>X倾角</div>
							<div style="color: #ec6266">{{ elevatorList.dipAngleX || 0 }}°</div>
						</div>
						<div class="lineBdata" style="left: 61%">
							<div>Y倾角</div>
							<div style="color: #ec6266">{{ elevatorList.dipAngleY }}°</div>
						</div>
					</div>
					<div class="rightVideo">
						<div class="video">
							<Monitor></Monitor>
						</div>
						<div class="devInfo">
							<div class="leftInfo">
								<div class="titleStatus">运行状态</div>
								<div class="infoBox">
									<div style="color: #65d7f9">人脸识别系统</div>
									<div><span class="textColor"> 今日工作时长：</span>{{ lifeList.workTime || 0 }}min</div>
									<div><span class="textColor"> 今日装载次数：</span>{{ lifeList.loadingNum || 0 }}次</div>
									<div><span class="textColor"> 今日装载工效：</span>{{ lifeList.loadingErgonomic || 0 }}kg/min</div>
									<div><span class="textColor"> 今日装载重量：</span>{{ lifeList.loadingWeight || 0 }}kg</div>
									<div><span class="textColor"> 今日违章次数：</span>{{ lifeList.violationNum || 0 }}次</div>
								</div>
							</div>
							<div class="rightInfo">
								<div class="titleStatus">
									司机信息
									<span
										><img style="margin-left: 4%; width: 6%" src="@/assets/images/towerCraneMonitoring/setUp.png" alt="" />
									</span>
									<span style="margin-left: 6%; color: #ccc">设备信息</span>
								</div>
								<div class="infoBox">
									<!-- <div><span class="textColor">认证状态：</span>-</div> -->
									<div><span class="textColor"> 姓名：</span>{{ driverInfo.workerName || "未知" }}</div>
									<div><span class="textColor"> 性别：</span>{{ driverInfo.sex == 1 ? "男" : driverInfo.sex == 2 ? "女" : "未知" }}</div>
									<div><span class="textColor"> 年龄：</span>{{ driverInfo.age || "未知" }}</div>
									<div><span class="textColor"> 本次连续工作时长：</span>{{ driverInfo.continuousWorkingTime || "未知" }}</div>
									<div>
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											身份证号:</span
										>{{ driverInfo.idCard || "未知" }}
									</div>
									<div>
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											特种资格证书编号:</span
										>{{ driverInfo.specialCertificateNumber || "未知" }}
									</div>
									<div>
										<span class="textColor"> 资格证书：</span> <a style="color: #64d6f8; cursor: pointer;" @click="driverDetail">{{ "查看详情" }}</a>
									</div>
								</div>
								<div class="driverPhoto"><img :src="driverInfo.imageUrl" alt="" /></div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="bottomList">
						<p>防冲顶</p>
						<p class="number">{{ elevatorList.topAlarm == 1 ? "报警" : "正常" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>下限位</p>
						<p class="number">{{ elevatorList.bottomAlarm == 1 ? "报警" : "正常" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>速度</p>
						<p class="number">{{ elevatorList.speed || 0 }}m/s</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>载重</p>
						<p class="number">{{ elevatorList.loading || 0 }}kg</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>X倾角</p>
						<p class="number">{{ elevatorList.dipAngleX || 0 }}°</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>Y倾角</p>
						<p class="number">{{ elevatorList.dipAngleY || 0 }}°</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>前门锁</p>
						<p class="number">{{ elevatorList.frontDoorState == 1 ? "关" : "开" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>后门锁</p>
						<p class="number">{{ elevatorList.backDoorState == 1 ? "关" : "开" }}</p>
						<div class="bg"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import mitts from "@/utils/bus"; //兄弟组件传值
import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
import { getLifterListApi, getNewestLifterApi, getQueryTodayOperatingApi, getRelatedInfoApi } from "@/api/modules/elevator";
import { ref, reactive, onMounted } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const lifeValue = ref("" as any);
const noiseList = ref([] as any);
let lifterDevSn = ref("" as any);

// 下拉框选中
async function checkItem(val: any) {
	console.log("下拉框选中", val);

	lifterDevSn.value = val.devSn;
	mitts.emit("elevaTorSelectId", val.id);

	console.log("发送的id", val.id);

	// getLifterList()
	await getLifterData();
	await getSelectTower();
	await getDriverInfoList();
}

//获取设备下拉列表
const getLifterList = async () => {
	const res = await getLifterListApi({
		projectSn: store.sn
	});
	if (res.result) {
		noiseList.value = res.result;
		lifeValue.value = res.result[0].id;
		lifterDevSn.value = res.result[0].devSn;
	}
	await getLifterData();
	await getSelectTower();
	await getDriverInfoList();
};

//获取升降机实时数据
let elevatorList = ref({} as any);
const getLifterData = async () => {
	const res = await getNewestLifterApi({
		devSn: lifterDevSn.value
	});
	if (res.result) {
		elevatorList.value = res.result;
	}
	console.log("获取升降机实时数据", elevatorList.value);
};

//获取运行状态
let lifeList = ref({} as any);
const getSelectTower = async () => {
	const res = await getQueryTodayOperatingApi({
		projectSn: store.sn,
		devSn: lifterDevSn.value
	});
	if (res.result) {
		console.log("获取运行状态", res);
		lifeList.value = res.result;
	}
};

//获取司机信息
let driverInfo = ref([] as any);
const getDriverInfoList = async () => {
	const res = await getRelatedInfoApi({
		devSn: lifterDevSn.value
	});
	if (res.result) {
		driverInfo.value = res.result.devWorker.currentWorker;
		console.log("获取司机信息", res);
		// 全部数据获取完后异步发放设备ID给摄像头，实现进入页面播放摄像头
		setTimeout(() => {
			mitts.emit("elevaTorSelectId", lifeValue.value);
		}, 2500);
	}
};

//查看详情跳转
function driverDetail() {
	window.open("https://zlaq.mohurd.gov.cn/fwmh/bjxcjgl/fwmh/pages/construction_safety/qytzzyry/qytzzyry.html");
}

onMounted(() => {
	getLifterList();
});
</script>

<style lang="scss" scoped>
.rightBox {
	width: 100%;
	height: 100%;
	.title {
		height: 5%;
		line-height: 35px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 96%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		font-size: calc(100vw * 14 / 1920);
		// .main {
		// 	border-radius: 8px;
		// 	flex: 1;
		// 	height: 80vh;
		// }
		.selectRight {
			position: absolute;
			left: 68.4%;
			width: 6%;
			top: 18%;
			z-index: 9;
		}
		.contentSmall {
			width: 100%;
			height: 92%;
			margin: 4% 2%;
			.top {
				width: 100%;
				height: 80%;
				display: flex;
				.leftTowerImg {
					margin-right: 1%;
					width: 80%;
					height: 100%;
					background: url("@/assets/images/towerCraneMonitoring/contentSmallImg.png") no-repeat;
					background-size: 100% 100%;
					.centerEleImg {
						position: absolute;
						left: 31%;
						top: 20%;
						img {
							width: 38vw;
							height: 65vh;
						}
					}
					.lineA {
						position: absolute;
						top: 56vh;
						left: 53vw;
						img {
							width: 60%;
						}
					}
					.lineB {
						position: absolute;
						top: 70vh;
						left: 52vw;
						img {
							width: 60%;
						}
					}
					.lineAdata {
						width: 4%;
						height: 7%;
						top: 55%;
						position: absolute;
						background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
						background-size: 100% 100%;
						left: 57.5%;
						font-size: calc(100vw * 16 / 1920);
						div {
							margin: 10% 0 0 16%;
						}
					}
					.lineBdata {
						width: 4%;
						height: 7%;
						top: 70%;
						position: absolute;
						background: url("@/assets/images/elevatorMonitoring/redWanning.png") no-repeat;
						background-size: 100% 100%;
						left: 56.5%;
						font-size: calc(100vw * 16 / 1920);
						div {
							margin: 10% 0 0 16%;
						}
					}
				}
				.rightVideo {
					width: 40%;
					.video {
						height: 60%;
					}
					.devInfo {
						height: 40%;
						display: flex;
						.leftInfo {
							width: 50%;
							margin-right: 4%;
						}
						.rightInfo {
							width: 50%;
						}
						.titleStatus {
							height: 15%;
							background: url("@/assets/images/towerCraneMonitoring/titleStatus.png") no-repeat;
							background-size: 100% 100%;
							margin-top: 5%;
							margin-bottom: 2%;
							font-size: calc(100vw * 16 / 1920);
							line-height: 3.5vh;
							padding-left: 5%;
						}
						.infoBox {
							height: 80%;
							background: url("@/assets/images/towerCraneMonitoring/InfoImg.png") no-repeat;
							background-size: 100% 100%;
							overflow: hidden;
							.textColor {
								color: #ccc;
							}
							div {
								line-height: 2.7vh;
								margin-left: 5%;
							}
						}
						.driverPhoto {
							top: 64%;
							position: absolute;
							left: 94%;
							img {
								width: 55%;
							}
						}
					}
				}
			}
			.bottom {
				width: 100%;
				height: 17%;
				margin-top: 2%;
				display: flex;
				.bottomList {
					width: 8%;
					height: 85%;
					margin-right: 1%;
					background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
					background-size: 100% 100%;
					p {
						margin-left: 12%;
						font-size: calc(100vw * 16 / 1920);
					}
					.number {
						color: #65d7f9;
					}
					.bg {
						width: 80%;
						height: 4%;
						background-color: #65d7f9;
						margin-left: 12%;
						margin-top: -3%;
					}
				}
			}
		}
	}
}
::v-deep .el-input__wrapper {
	background: #112d59;
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>