zhgdlarge/src/views/sevenLargeScreen/safetyManagement/tunnelPosition/index.vue

<template>
	<div class="tunnelContent">
		<div class="select-right">
			<el-select v-model="selectDay" style="width: 85%" size="small">
				<el-option
					v-for="(item, index) in tunnelList"
					:key="index"
					:label="item.tunnelName"
					:value="item.id"
					@click="checkId(item, index)"
				/>
			</el-select>
		</div>
		<div class="left">
			<leftTop class="leftTop"></leftTop>
			<leftCenter class="leftCenter" :sonData="sonData"></leftCenter>
			<leftBottom class="leftBottom" :alarmEcharts="alarmEcharts"></leftBottom>
		</div>
		<div class="right">
			<rightTop class="rightTop" :activeImgUrl="activeImgUrl" :pointTunnelList="pointTunnelList"></rightTop>
			<div class="rightBottom">
				<rightBottomLeft class="rightBottomLeft" :workerEcharts="workerEcharts"></rightBottomLeft>
				<rightBottomRight class="rightBottomRight" :mapPeopleData="mapPeopleData"></rightBottomRight>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from "vue";
import leftTop from "./leftTop.vue";
import leftCenter from "./leftCenter.vue";
import leftBottom from "./leftBottom.vue";
import rightTop from "./rightTop.vue";
import rightBottomLeft from "./rightBottomLeft.vue";
import rightBottomRight from "./rightBottomRight.vue";
import {
	getLocationTunnelApi, //今日统计
	getTagLowVoltageAlarmApi, //报警信息
	getCountRealTimeLocationWorkerApi, //班组统计
	getRealTimeLocationWorkerApi //地图上的人（场内人员名单）
} from "@/api/modules/tunnelPosition";
import { GlobalStore } from "@/stores";
const BASEURL = import.meta.env.VITE_API_URL;

const store = GlobalStore();
let selectDay = ref("");
let tunnelList = ref([] as any);
let sonData = ref([] as any);
let activeImgUrl = ref("");
//获取隧道下拉
const getSelectData = async () => {
	const res = await getLocationTunnelApi({
		projectSn: store.sn
	});
	tunnelList.value = res.result;
	selectDay.value = res.result[0].id;
	checkId(res.result[0], 0);
};
//获取报警信息
const alarmEcharts = ref([] as any);
const getAlarmData = async () => {
	const res = await getTagLowVoltageAlarmApi({
		type: 1, //一个周的范围
		locationTunnelId: selectDay.value
	});
	alarmEcharts.value = res.result;
	// console.log("获取报警信息::", res);
};
//获取班组统计
const workerEcharts = ref([] as any);

const getnWorkerData = async () => {
	const res = await getCountRealTimeLocationWorkerApi({
		locationTunnelId: selectDay.value
	});
	// console.log("获取班组统计::", res);
	workerEcharts.value = res.result;
};
//获取地图上的人（场内人员名单）
const mapPeopleData = ref([] as any);
const pointTunnelList = ref([] as any);
const getRealTimeLocationData = async (tunnelLength: any, width: any) => {
	const res = await getRealTimeLocationWorkerApi({
		locationTunnelId: selectDay.value
	});
	if (res.result) {
		mapPeopleData.value = res.result;
		pointTunnelList.value = [];
		res.result.forEach(item => {
			//渲染隧道人员点位信息
			//x轴：nx÷隧道长度*总像素=点的x轴
			let xPx = (item.inlX / tunnelLength) * width;
			let pointTunneObj = {
				topPx: item.py,
				leftPx: xPx,
				name: item.personName
			};
			pointTunnelList.value.push(pointTunneObj);
		});
	}
};
//切换隧道
const checkId = async(val: any, index: any) => {
	activeImgUrl.value = "";
	sonData.value = [];
	tunnelList.value.forEach((item: any) => {
		if (val.id == item.id) {
			sonData.value = item;
		}
	});
	let width = 0;
	if (val.planarGraph && val.planarGraph != "" && val.planarGraph != null) {
		let Img = JSON.parse(val.planarGraph);
		activeImgUrl.value = Img[0].url;
		//获取图片大小
		let img = new Image();
		img.src = BASEURL + "/image/" + Img[0].url;
		img.onload = function () {
			width = img.width;
			getRealTimeLocationData(val.tunnelLength, width);
		};
	
	} else {
		activeImgUrl.value = "";
	}
	getnWorkerData();
	 getAlarmData();
};
onMounted(() => {
	getSelectData();
});
</script>
<style lang="scss" scoped>
.tunnelContent {
	width: 100%;
	height: 100%;
	display: flex;

	.select-right {
		position: absolute;

		top: 18.5%;
		left: 90%;
	}

	.left {
		width: 26%;

		.leftTop {
			height: 28%;
		}

		.leftCenter {
			height: 30%;
			margin: 9% 0 8.5% 0;
		}

		.leftBottom {
			height: 29.5%;
		}
	}

	.right {
		width: 73%;
		margin-left: 1%;

		.rightTop {
			height: 66%;
		}

		.rightBottom {
			margin-top: 1%;
			height: 32%;
			display: flex;

			.rightBottomLeft {
				width: 35%;
			}

			.rightBottomRight {
				width: 63.5%;
				margin-left: 1.5%;
			}
		}
	}
}

:deep(.el-input__wrapper) {
	background: #112d59;
	padding-left: 10%;
}

:deep(.el-input__inner) {
	color: #fff;
}

:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}
</style>