zhgdlarge/src/views/sevenLargeScreen/safetyManagement/securityControl/monitoringInfo.vue

<template>
	<div class="rightBox">
		<!-- <div class="title"><i>塔吊监控信息</i></div> -->
		<div class="content">
			<div class="towerInfo">
				<span style="margin-right: 6%">塔吊信息</span>
				<span><img src="@/assets/images/towerCraneMonitoring/infoIcon.png" alt="" /></span>
			</div>
			<div class="selectRight" v-if="towerDetailData">
				<el-select v-model="towerValue" class="m-2" placeholder="Select" size="small">
					<el-option
						v-for="(item, index) in noiseList"
						:key="index"
						:label="item.devName"
						:value="item.id"
						@click="selectTower(item.devSn)"
					/>
				</el-select>
			</div>
			<div class="contentSmall" v-if="towerDetailData != null">
				<div class="top">
					<div class="leftTowerImg">
						<div class="titleData">
							<div class="dataOne">
								<p class="text">前臂长(m)</p>
								<p class="num">{{ towerDetailData.forearmLength || 0 }}</p>
							</div>
							<div class="dataTwo">
								<p class="text2">塔臂高(m)</p>
								<p class="num2">{{ towerDetailData.referenceHeight || 0 }}</p>
							</div>
							<div class="dataOne">
								<p class="text">后臂长(m)</p>
								<p class="num">{{ towerDetailData.posteriorArmLength || 0 }}</p>
							</div>
						</div>
						<div class="centerEleImg">
							<img src="@/assets/images/towerCraneMonitoring/towerBg.png" alt="" />
							<div class="btn" @click="moveAnimation()"></div>
						</div>
						<!-- <div class="towerA"><img id="image" src="@/assets/images/towerCraneMonitoring/towerA.png" alt="" /></div> -->
						<div class="towerA"><img id="image" :src="towerClose" alt="" /></div>
						<div class="lineB" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineB.png" alt="" /></div>
						<div class="lineA" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineA.png" alt="" /></div>
						<div class="lineC" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineC.png" alt="" /></div>
						<div class="lineD" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineD.png" alt="" /></div>
						<div class="lineAdata" v-if="dataShow">
							<div>荷载比</div>
							<!-- 后端没有该字段，待定 -->
							<div style="color: #65d7f9">{{ towerDetail.loadRatio || 0 }}%</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 15%">
							<div>力矩比</div>
							<div style="color: #65d7f9">{{ towerDetail.torqueRatio || 0 }}%</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 5%; top: 67%">
							<div>吊重</div>
							<div style="color: #65d7f9">{{ towerDetail.loading || 0 }}kg</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 11%; top: 67%">
							<div>幅度</div>
							<div style="color: #65d7f9">{{ towerDetail.ranger || 0 }}m</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 17%; top: 67%">
							<div>高度</div>
							<div style="color: #65d7f9">{{ towerDetail.height || 0 }}m</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 57%; top: 27%">
							<div>风速</div>
							<div style="color: #65d7f9">{{ towerDetail.windspeed || 0 }}m/s</div>
						</div>
						<div class="lineAdata" v-if="dataShow" style="left: 51%; top: 65%">
							<div>转角</div>
							<div style="color: #65d7f9">{{ towerDetail.angle || 0 }}°</div>
						</div>
						<div class="lineBdata" v-if="dataShow" style="left: 57%; top: 65%">
							<div>倾角</div>
							<div style="color: #ec6266">{{ towerDetail.obliguity || 0 }}°</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" v-for="(item, index) in towerList" :key="index">
									<!-- <div style="color: #65d7f9">人脸识别系统</div>
									<div style="color: #65d7f9">塔吊考勤记录</div> -->
									<div><span class="textColor"> 工作时长：</span>{{ item.runMinuteTimeName || 0 }}</div>
									<div><span class="textColor"> 今日吊次：</span>{{ item.cycleNum || 0 }}次</div>
									<div><span class="textColor"> 今日吊重：</span>{{ item.totalLoading || 0 }}kg</div>
									<!-- <div><span class="textColor"> 今日工效：</span>1T/min</div> -->
									<div><span class="textColor"> 今日报警：</span>{{ item.alarmNum || 0 }}次</div>
								</div>
							</div>
							<div class="rightInfo">
								<div class="titleStatus">
									<span style="color: #fff; cursor: pointer" v-if="isShow == false" @click="infoBtn">司机信息</span>
									<span style="color: #ccc; cursor: pointer" v-else @click="infoBtn">司机信息</span>
									<span
										><img style="margin-left: 4%; width: 6%" src="@/assets/images/towerCraneMonitoring/setUp.png" alt="" />
									</span>
									<span v-if="isShow == true" style="margin-left: 6%; color: #fff; cursor: pointer" @click="deviceInf"
										>设备信息</span
									>
									<span v-else style="margin-left: 6%; color: #ccc; cursor: pointer" @click="deviceInf">设备信息</span>
								</div>
								<!-- 司机信息 -->
								<div class="infoBox" v-show="isShowTime == true">
									<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.continuousWorkingTimeName || 0 }}</div>
									<div style="width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											身份证号:</span
										>{{ driverInfo.idCard || "未知" }}
									</div>
									<div style="width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
										<span class="textColor" style="width: 10%; 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="BASEURL + '/image/' + driverInfo.imageUrl" alt="" /></div>
								<!-- 设备信息 -->
								<div class="infoBox" v-show="isShow == true">
									<div style="width: 98%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											出厂日期：</span
										>{{ towerDetailData.factoryTime || "未知" }}
									</div>
									<div style="width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
										<span class="textColor"> 设备备案编号：</span>{{ towerDetailData.superintendNo || "未知" }}
									</div>
									<div><span class="textColor"> 规格型号：</span>{{ towerDetailData.devModel || "未知" }}</div>
									<div><span class="textColor"> 产权单位：</span>{{ towerDetailData.propertyUnit || "未知" }}</div>
									<div>
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											安装单位：</span
										>{{ towerDetailData.installationUnit || "未知" }}
									</div>
									<div>
										<span class="textColor" style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											制造厂家：</span
										>{{ towerDetailData.factoryName || "未知" }}
									</div>
									<div>
										<span class="textColor" style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											拆除单位：</span
										>{{ towerDetailData.demolitionUnit || "未知" }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="bottomList">
						<p>力矩</p>
						<p class="number">{{ list.torque || 0 }}kg.m</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>高度</p>
						<p class="number">{{ list.height || 0 }}m</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>幅度</p>
						<p class="number">{{ list.ranger || 0 }}m</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>高度限位</p>
						<p class="number">{{ list.heightAlarm == 0 ? "正常" : list.heightAlarm == 1 ? "报警" : "预警" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>幅度限位</p>
						<p class="number">{{ list.minRangeAlarm == 0 ? "正常" : list.minRangeAlarm == 1 ? "报警" : "预警" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>回转限位</p>
						<p class="number">{{ list.posAngleAlarm == 0 ? "正常" : list.posAngleAlarm0 == 1 ? "报警" : "预警" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>多机防撞</p>
						<p class="number">{{ list.multiAlarmAll == 0 ? "正常" : list.multiAlarmAll == 1 ? "报警" : "预警" }}</p>
						<div class="bg"></div>
					</div>
					<!-- <div class="bottomList">
						<p>障碍物碰撞</p>
						<p class="number">0.2%</p>
						<div class="bg"></div>
					</div> -->
					<div class="bottomList">
						<p>禁入区</p>
						<p class="number">{{ list.forbidEntryAlarm == 0 ? "正常" : list.forbidEntryAlarm == 1 ? "报警" : "预警" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>传感器故障</p>
						<p class="number">{{ list.weightError == 0 ? "无故障" : "有故障" }}</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>风速</p>
						<p class="number">{{ list.windspeed || 0 }}m/s</p>
						<div class="bg"></div>
					</div>
					<div class="bottomList">
						<p>倾角</p>
						<p class="number">{{ list.obliguity || 0 }}°</p>
						<div class="bg"></div>
					</div>
				</div>
			</div>
			<div class="notoDta" v-else>
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import Monitor from "@/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue";
import towerClose from "@/assets/images/towerCraneMonitoring/towerA.png";
import towerOpen from "@/assets/images/towerCraneMonitoring/towerB.png";

import { onMounted, ref, onBeforeUnmount } from "vue";
// import * as echarts from "echarts";
import mitts from "@/utils/bus"; //兄弟组件传值
const BASEURL = import.meta.env.VITE_API_URL;

import {
	getQueryByIdApi,
	getTowerNumAndAlarmApi,
	getNewestTowerApi,
	getTowerCurrentCountApi,
	getRelatedInfoApi,
	getNewestDataApi
} from "@/api/modules/tower";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let towerValue = ref("暂无数据" as any);
let dataShow = ref(false);
let noiseList = ref([]);
let isShowTime = ref(true); //司机信息
let isShow = ref(false); //设备信息

//司机点击
const infoBtn = () => {
	isShowTime.value = true;
	isShow.value = false;
};
//设备信息
const deviceInf = () => {
	isShow.value = true;
	isShowTime.value = false;
};
//中间塔吊点击事件
function moveAnimation() {
	dataShow.value = !dataShow.value;
	const towerA = document.querySelector(".towerA");
	const image = document.querySelector("#image");

	if (towerA.style.transform === "translateX(-250px)") {
		towerA.style.transform = "translateX(0)";
		// image.src = "src/assets/images/towerCraneMonitoring/towerA.png";
		image.src = towerClose;
	} else {
		towerA.style.transform = "translateX(-250px)";
		// image.src = "src/assets/images/towerCraneMonitoring/towerB.png";
		image.src = towerOpen;
	}
	getTowerData();
}

// 下拉框选中
function selectTower(e: any) {
	console.log("下拉框选中传的值", e);
	towerDevSn.value = e;
	mitts.emit("selectId", e);
	// console.log('发送的id',e);

	getTowerData();
	getDriverInfoList();
	getNewestData();
	getSelectTower();
	getTowerDetail();
}
// 获取塔吊详情
// 进入页面播放ID
let towerVideoId = ref("" as any);
let towerDevSn = ref("" as any);
let towerDetailData = ref(null as any);
const getTowerDetail = async () => {
	const res: any = await getQueryByIdApi({
		// projectSn: store.sn,
		id: towerValue.value
	});
	if (res.result) {
		towerDetailData.value = res.result;
		// towerDevSn.value = res.result.devSn;
		console.log("塔吊信息详情", res.result);
		if (res.result.videoList.length > 0) {
			towerVideoId.value = res.result.videoList[0].serialNumber;
			setTimeout(() => {
				mitts.emit("serialNumberId", res.result.videoList[0]);
			}, 2000);
		} else {
			mitts.emit("serialNumberId", "");
		}
	}
};
//获取塔吊实时数据
let towerDetail = ref(null as any);
const getTowerData = async () => {
	const res = await getNewestTowerApi({
		devSn: towerDevSn.value
	});
	if (res.result != null) {
		towerDetail.value = res.result;
	} else {
		towerDetail.value = [];
	}
	console.log("获取塔吊实时数据", res);
};

// 获取塔吊列表
const getTowerNumAndAlarmList = async () => {
	const res: any = await getTowerNumAndAlarmApi({
		projectSn: store.sn
	});
	if (res.result) {
		console.log("获取塔吊列表", res);
		if (res.result.deviceList.length > 0) {
			towerValue.value = res.result.deviceList[0].id;
			towerDevSn.value = res.result.deviceList[0].devSn;
			noiseList.value = res.result.deviceList;
			console.log("塔吊option", noiseList.value);
			mitts.emit("selectId", towerValue.value);

			await getTowerData();
			await getSelectTower();
			await getDriverInfoList();
			await getNewestData();
			await getTowerDetail();
		}
	}
};

//获取运行状态
let towerList = ref([] as any);
const getSelectTower = async () => {
	towerList.value.length = 0;
	const res = await getTowerCurrentCountApi({
		projectSn: store.sn
	});
	if (res.result) {
		console.log("运行状态", res.result);
		res.result.forEach((item: any) => {
			if (item.devSn == towerDevSn.value) {
				towerList.value.push(item);
			}
		});
	}
};

//获取司机信息
let driverInfo = ref([] as any);
const getDriverInfoList = async () => {
	const res = await getRelatedInfoApi({
		devSn: towerDevSn.value
	});
	if (res.result) {
		console.log("获取司机信息", res.result);
		if(res.result.devWorker.workerList[0]){
			driverInfo.value = res.result.devWorker.workerList[0];
		}else{
			driverInfo.value = {
				addTime: '',
				age: '',
				continuousWorkingTime: '',
				continuousWorkingTimeName: '',
				idCard: '',
				imageUrl: '',
				phoneNumber: '',
				sex: '',
				specialCertificateNumber: '',
				workerName: '',
			}
		}
	}
};

//获取右下实时数据
let list = ref({} as any);
const getNewestData = async () => {
	const res = await getNewestDataApi({
		devSn: towerDevSn.value
	});
	if (res.result) {
		list.value = res.result;
		// setTimeout(() => {
		// 	mitts.emit("serialNumberId", towerVideoId.value);
		// }, 2000);
	}
	console.log("获取右下实时数据", res);
};

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

onMounted(async () => {
	await getTowerNumAndAlarmList();
});
//  
onBeforeUnmount(async () => {
	mitts.off("serialNumberId");
});
</script>

<style lang="scss" scoped>
.rightBox {
	width: 100%;
	height: 97%;
	.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);
		position: relative;
		// .main {
		// 	border-radius: 8px;
		// 	flex: 1;
		// 	height: 80vh;
		// }
		.towerInfo {
			margin: 1% 1.5%;
			width: 10%;
			height: 5%;
			position: absolute;
		}
		.selectRight {
			position: absolute;
			left: 58%;
			width: 7%;
			top: 2%;
			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%;
					.titleData {
						width: 100%;
						height: 25%;
						display: flex;
						.dataOne {
							width: 15%;
							height: 80%;
							background: url("@/assets/images/towerCraneMonitoring/blueImg.webp") no-repeat;
							background-size: 100% 100%;
							margin-left: 15%;
							margin-top: 2%;
							text-align: center;
							.text {
								color: #65d7f9;
								font-size: calc(100vw * 16 / 1920);
							}
							.num {
								font-size: calc(100vw * 24 / 1920);
								font-family: sadigitalNumber;
								font-weight: 700;
								background-image: linear-gradient(to right, rgba(101, 215, 249, 1), rgba(255, 255, 255, 1));
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								margin-top: -2%;
							}
						}
						.dataTwo {
							width: 15%;
							height: 80%;
							background: url("@/assets/images/towerCraneMonitoring/puperImg.webp") no-repeat;
							background-size: 100% 100%;
							margin-left: 15%;
							margin-top: 2%;
							text-align: center;
							.text2 {
								font-size: calc(100vw * 16 / 1920);
							}
							.num2 {
								font-size: calc(100vw * 24 / 1920);
								font-family: sadigitalNumber;
								font-weight: 700;
								background-image: linear-gradient(to right, rgba(244, 208, 101, 1), rgba(218, 216, 180, 1));
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								margin-top: -2%;
							}
						}
					}
					.centerEleImg {
						position: absolute;
						left: 10%;
						top: 28%;
						img {
							width: 35vw;
							height: 40vh;
						}
						.btn {
							top: 5vw;
							position: absolute;
							width: 15%;
							height: 26%;
							left: 21vw;
							cursor: pointer;
							z-index: 99;
						}
					}
					.towerA {
						position: absolute;
						left: 24vw;
						top: 32vh;
						img {
							width: 50%;
						}
						transition: transform 0.3s ease; /* 添加过渡效果 */
						transform: translateX(0); /* 初始位置为0 */
					}

					.towerB {
						position: absolute;
						left: 39vw;
						top: 49vh;
						img {
							width: 50%;
						}
					}
					.lineA {
						position: absolute;
						top: 27vh;
						left: 15vw;
						img {
							width: 50%;
						}
					}
					.lineB {
						position: absolute;
						top: 26vh;
						left: 36vw;
						img {
							width: 50%;
						}
					}
					.lineC {
						position: absolute;
						top: 50vh;
						left: 10vw;
						img {
							width: 50%;
						}
					}
					.lineD {
						position: absolute;
						top: 52vh;
						left: 32vw;
						img {
							width: 50%;
						}
					}
					.lineAdata {
						width: 5%;
						height: 9%;
						top: 29%;
						position: absolute;
						background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
						background-size: 100% 100%;
						left: 9%;
						font-size: calc(100vw * 16 / 1920);
						div {
							margin: 10% 0 0 16%;
						}
					}
					.lineBdata {
						width: 5%;
						height: 9%;
						top: 71%;
						position: absolute;
						background: url("@/assets/images/elevatorMonitoring/redWanning.png") no-repeat;
						background-size: 100% 100%;
						left: 69.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 {
								margin-top: 4%;
								margin-left: 5%;
							}
						}
						.driverPhoto {
							top: 59%;
							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%;
					}
				}
			}
		}
	}
}
.notoDta {
	width: 20%;
	height: 20%;
	margin-top: 20%;
	margin-left: 40%;
	img {
		width: 30%;
		margin: 6% 36%;
	}
	p {
		width: 100%;
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -5% 41%;
	}
}
::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>