<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">
				<el-select v-model="towerValue" class="m-2" placeholder="Select" size="small" @change="selectTower">
					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="contentSmall" v-if="towerDetailData">
				<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="lineB" v-show="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineB.png" alt="" /></div>
						<div class="lineA" v-show="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineA.png" alt="" /></div>
						<div class="lineC" v-show="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineC.png" alt="" /></div>
						<div class="lineD" v-show="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineD.png" alt="" /></div>
						<div class="lineAdata" v-show="dataShow">
							<div>荷载比</div>
							<!-- 后端没有该字段，待定 -->
							<div style="color: #65d7f9">0%</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 38%">
							<div>力矩比</div>
							<div style="color: #65d7f9">{{ towerDetail.torqueRatio || 0 }}%</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 31%; top: 71%">
							<div>吊重</div>
							<div style="color: #65d7f9">{{ towerDetail.loading || 0 }}t</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 36%; top: 71%">
							<div>幅度</div>
							<div style="color: #65d7f9">{{ towerDetail.ranger || 0 }}m</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 41%; top: 71%">
							<div>高度</div>
							<div style="color: #65d7f9">{{ towerDetail.height || 0 }}m</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 69.7%; top: 40%">
							<div>风速</div>
							<div style="color: #65d7f9">{{ towerDetail.windspeed || 0 }}m/s</div>
						</div>
						<div class="lineAdata" v-show="dataShow" style="left: 65%; top: 71%">
							<div>转角</div>
							<div style="color: #65d7f9">{{ towerDetail.angle || 0 }}°</div>
						</div>
						<div class="lineBdata" v-show="dataShow">
							<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.runMinuteTime || "未知" }}</div>
									<div><span class="textColor"> 今日吊次：</span>{{ item.cycleNum || 0 }}次</div>
									<div><span class="textColor"> 今日吊重：</span>{{ item.totalLoading || 0 }}T</div>
									<!-- <div><span class="textColor"> 今日工效：</span>1T/min</div> -->
									<div><span class="textColor"> 今日报警：</span>{{ item.alarmNum || 0 }}次</div>
								</div>
							</div>
							<div class="rightInfo" v-for="(item, index) in driverInfo" :key="index">
								<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>{{ item.workerName || "未知" }}</div>
									<div><span class="textColor"> 性别：</span>{{ item.sex == 1 ? "男" : item.sex == 2 ? "女" : "未知" }}</div>
									<div><span class="textColor"> 年龄：</span>{{ item.age || "未知" }}</div>
									<div><span class="textColor"> 工作年限：</span>{{ item.workYear || "未知" }}</div>
									<div><span class="textColor"> 本次连续工作时长：</span>{{ item.continuousWorkingTime || "未知" }}</div>
									<div>
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											身份证号:</span
										>{{ item.idCard || "未知" }}
									</div>
									<div>
										<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
											特种资格证书编号:</span
										>{{ item.specialCertificateNumber || "未知" }}
									</div>
								</div>
								<div class="driverPhoto"><img :src="item.imageUrl" alt="" /></div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="bottomList">
						<p>力矩</p>
						<p class="number">{{list.torque||0}}%</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">0.2%</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">0.2%</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">0.2%</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">0.2%</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>
	</div>
</template>

<script lang="ts" setup>
import Monitor from "@/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue";
import { onMounted, ref } from "vue";
// import * as echarts from "echarts";
import mitts from "@/utils/bus"; //兄弟组件传值

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([
	{
		value: 1,
		label: "2#塔吊"
	}
]);
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";
	} else {
		towerA.style.transform = "translateX(-250px)";
		image.src = "src/assets/images/towerCraneMonitoring/towerB.png";
	}
	getTowerData();
}


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

	getTowerDetail();
	getTowerData();
}
// 获取塔吊详情
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;
		mitts.emit("serialNumberId", res.result.videoList[0].serialNumber);
		console.log("塔吊信息详情", res.result);
	}
};
//获取塔吊实时数据
let towerDetail = ref(null as any);
const getTowerData = async () => {
	const res = await getNewestTowerApi({
		devSn: towerDevSn.value
	});
	if (res.result) {
		towerDetail.value = res.result;
	}
	console.log("获取塔吊实时数据", res);
};

// 获取塔吊列表
const getTowerNumAndAlarmList = async () => {
	const res: any = await getTowerNumAndAlarmApi({
		projectSn: store.sn
	});
	if (res.result) {
		noiseList.value = res.result.deviceList.map((item: any) => {
			return {
				value: item.id,
				label: item.devName
			};
		});
		console.log("塔吊option", noiseList.value);
		towerValue.value = noiseList.value[0].value;
		await getTowerDetail();
		await getTowerData();
		await getSelectTower();
		await getDriverInfoList();
		await getNewestData()
	}
};

//获取运行状态
let towerList = ref([] as any);
const getSelectTower = async () => {
	const res = await getTowerCurrentCountApi({
		projectSn: store.sn
	});
	if (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) {
		driverInfo.value = res.result.devWorker.workerList;
	}
};

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

onMounted(async () => {
	await getTowerNumAndAlarmList();
});
</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;
		// }
		.towerInfo {
			margin: 1% 1.5%;
			width: 10%;
			height: 5%;
			position: absolute;
		}
		.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%;
					.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: 36%;
						top: 40%;
						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: 53vw;
						top: 49vh;
						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: 44vh;
						left: 43vw;
						img {
							width: 50%;
						}
					}
					.lineB {
						position: absolute;
						top: 44vh;
						left: 66vw;
						img {
							width: 50%;
						}
					}
					.lineC {
						position: absolute;
						top: 66vh;
						left: 39vw;
						img {
							width: 50%;
						}
					}
					.lineD {
						position: absolute;
						top: 71vh;
						left: 61vw;
						img {
							width: 50%;
						}
					}
					.lineAdata {
						width: 4%;
						height: 7%;
						top: 40%;
						position: absolute;
						background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
						background-size: 100% 100%;
						left: 33.5%;
						font-size: calc(100vw * 16 / 1920);
						div {
							margin: 10% 0 0 16%;
						}
					}
					.lineBdata {
						width: 4%;
						height: 7%;
						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 {
								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>
