zhgdlarge/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue

<template>
	<Card title="点位图">
		<div class="pit-top-left">
			<div class="point-state-top">
				<div class="common">
					<div class="background"></div>
					<div class="state-text">正常</div>
				</div>
				<div class="warn">
					<div class="background"></div>
					<div class="state-text">超出报警值</div>
				</div>
				<div class="control">
					<div class="background"></div>
					<div class="state-text">超出控制值</div>
				</div>
			</div>
			<div class="point-map">
				<img src="@/assets/images/foundationPitMonitor/pointPic.png" alt="" />
				<div class="point-list" v-for="item in list" :key="item.id">
					<div
						class="point-item"
						:class="
							item.alarmState == 1
								? 'changeColor1'
								: item.alarmState == 2
								? 'changeColor2'
								: item.alarmState == 3
								? 'changeColor3'
								: ''
						"
						:style="{
							left: item.xMap + 'px',
							top: item.yMap + 'px'
						}"
						@click="openDialog(item)"
					></div>
					<div
						class="item-dialog"
						:style="{
							left: item.xMap + 20 + 'px',
							top: item.yMap - 10 + 'px'
						}"
						v-if="item.id === currentIndex && showDialog"
						@click="closeDialog"
					>
						<div class="triangle"></div>
						<div class="dialog-title">{{ item.pointName }}</div>
						<div class="dialog-text">监测类型:地下水位</div>
						<div class="dialog-text">单次变化值:0.56mm</div>
						<div class="dialog-text">累计变化值:2.04mm</div>
						<div class="dialog-text">变化速率:0.96mm/d</div>
						<div class="dialog-text">采集时间:2023-01-01 15:00:00</div>
						<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
						<div class="dialog-text">当前累计变化值为2.04mm,超过报警值10mm,偏差为39.1mm</div>
					</div>
				</div>
			</div>
			<div class="check-time">已安全监测: 2065天19时30分28秒</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
let currentIndex = ref(1 as any);
let showDialog = ref(false as any);
function openDialog(item: any) {
	currentIndex.value = item.id;
	showDialog.value = true;
}
function closeDialog() {
	showDialog.value = false;
	console.log("点击");
}
const list = reactive([
	{
		id: 1,
		alarmState: 1,
		xMap: 150,
		yMap: 70,
		pointName: "基坑监测点001"
	},
	{
		id: 2,
		alarmState: 2,
		xMap: 120,
		yMap: 70,
		pointName: "基坑监测点002"
	},
	{
		id: 3,
		alarmState: 1,
		xMap: 180,
		yMap: 90,
		pointName: "基坑监测点003"
	},
	{
		id: 4,
		alarmState: 3,
		xMap: 80,
		yMap: 100,
		pointName: "基坑监测点004"
	}
]);
</script>

<style scoped lang="scss">
.item-dialog {
	width: 189px;
	padding: 2%;
	left: 100%;
	top: -40%;
	z-index: 10;
	color: #ffffff;
	font-size: 12px;
	opacity: 0.8;
	background-color: #000000;
	position: absolute;
	.dialog-title {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding-bottom: 2%;
	}
	.dialog-time {
		margin-top: 4%;
		width: 100%;
		text-align: right;
	}
	.dialog-text {
		margin-top: 5%;
		letter-spacing: 0.5px;
	}
	.triangle {
		position: absolute;
		width: 0;
		height: 0;
		left: -4%;
		top: 5%;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 12px solid #000000;
	}
}
.changeColor1 {
	background: #48da39;
}
.changeColor2 {
	background: #eea959;
}
.changeColor3 {
	background: #ec6266;
}
.pit-top-left {
	width: 100%;
	height: 100%;
	position: relative;
	.point-map {
		width: 80%;
		height: 70%;
		margin: 0 auto;
		margin-top: 5%;
		position: relative;
		img {
			width: 100%;
			height: 100%;
		}
		.point-list {
			.point-item {
				width: 20px;
				height: 20px;
				cursor: pointer;
				border-radius: 50%;
				position: absolute;
			}
		}
	}
	.point-state-top {
		width: 100%;
		display: flex;
		padding-top: 5%;
		margin-left: 5%;
		.common {
			width: 25%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #48da39;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
		.warn {
			width: 30%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #eea959;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
		.control {
			width: 30%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #ec6266;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
	}
	.check-time {
		width: 100%;
		text-align: center;
		font-size: 16px;
		margin-top: 3%;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #ffffff;
	}
}
</style>