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

<template>
	<Card title="高支模监测">
		<div class="formwork-bottom-left">
			<div class="list-content">
				<div class="tab-list">
					<div>序号</div>
					<div>时间</div>
					<div>测量点名称</div>
					<div>状态</div>
					<div>监测时长</div>
				</div>
				<el-scrollbar class="list-box">
					<div v-for="(item, index) in list" class="list-style" :key="item.id">
						<div>{{ index + 1 }}</div>
						<div>{{ item.realTime?.substring(0,10) }}</div>
						<div>{{ item.measurePointName }}</div>
						<div :style="{ color: formworkOption[item.alarmState - 1].color }">
							{{ formworkOption[item.alarmState - 1].label }}
						</div>
						<div>{{ item.monitorDuration }}</div>
					</div>
					<div class="not-data" v-if="list.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div></el-scrollbar
				>
			</div>
		</div>
		<div class="formwork-center-top">
			<div class="monitor-point">
				<div class="point-text">总监测点位数</div>
				<div class="point-num">{{pointData.totalPointNum}}</div>
			</div>
			<div class="stop-point">
				<div class="point-text">监测中点位数</div>
				<div class="point-num">{{pointData.monitoringPointNum}}</div>
			</div>
			<div class="finish-point">
				<div class="point-text">报警点位数</div>
				<div class="point-num">{{pointData.alarmPointNum}}</div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import { ref, onMounted } from "vue";
import { monitorDynamic, measurePointCount } from "@/api/modules/highFormwork";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let formworkOption = ref([
	{
		label: "正常",
		color: "#81F279"
	},
	{
		label: "预警",
		color: "#4AC0F3"
	},
	{
		label: "报警",
		color: "#EC6266"
	}
]);
const list = ref([] as any);
// 获取高支模监测动态
const getMonitorDynamic = async () => {
	const res: any = await monitorDynamic({ projectSn: store.sn });
	console.log("获取高支模监测动态", res);
	list.value = res.result;
};

const pointData = ref<any>({
	totalPointNum: 0,
	alarmPointNum: 0,
	monitoringPointNum: 0
})
// 获取监测点位数量
const getPointCount = async () => {
	const res: any = await measurePointCount({ projectSn: store.sn });
	console.log("监测点位数量", res);
	for(let i in pointData.value){
		pointData.value[i] = res.result[i]
	}
};

onMounted(async () => {
	await getMonitorDynamic();
	await getPointCount();
});
</script>

<style lang="scss" scoped>
.formwork-center-top {
	width: 100%;
	height: 36%;
	position: relative;
	text-align: center;
	.monitor-point {
		width: 27%;
		height: 60%;
		left: 6%;
		top: 7%;
		background: url("@/assets/images/highFormwork/leftIcon.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		.point-text {
			font-size: 12px;
			font-family: OPPOSans-Regular, OPPOSans;
			color: #ffffff;
			margin-top: 23%;
		}
		.point-num {
			font-size: 26px;
			font-family: D-DIN-DIN-Bold, D-DIN-DIN;
			font-weight: bold;
			letter-spacing: 1px;
			background: linear-gradient(180deg, #ffffff 0%, #65d7f9 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.stop-point {
		background: url("@/assets/images/highFormwork/leftIcon.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		width: 27%;
		height: 60%;
		left: 50%;
		bottom: 4%;
		transform: translateX(-50%);
		.point-text {
			margin-top: 23%;
			font-size: 12px;
			font-family: OPPOSans-Regular, OPPOSans;
			color: #ffffff;
		}
		.point-num {
			font-size: 26px;
			font-family: D-DIN-DIN-Bold, D-DIN-DIN;
			font-weight: bold;
			letter-spacing: 1px;
			background: linear-gradient(180deg, #fbf2c9 0%, #f2da8c 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.finish-point {
		background: url("@/assets/images/highFormwork/rightIcon.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		width: 27%;
		height: 60%;
		right: 4%;
		top: 7%;
		.point-text {
			margin-top: 23%;
			font-size: 12px;
			font-family: OPPOSans-Regular, OPPOSans;
			color: #ffffff;
		}
		.point-num {
			font-size: 26px;
			font-family: D-DIN-DIN-Bold, D-DIN-DIN;
			font-weight: bold;
			letter-spacing: 1px;
			background: linear-gradient(180deg, #ffffff 0%, #a6bded 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}
// 选择框样式
:deep(.el-input__wrapper) {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
:deep(.el-range-separator) {
	color: #ccc;
	font-size: 10px;
}
:deep(.el-range-input) {
	color: #ccc;
	font-size: 10px;
}
.formwork-bottom-left {
	width: 100%;
	height: 60%;
	box-sizing: border-box;
	padding: 4%;
	position: relative;
	.list-content {
		height: 100%;
		width: 100%;
		.tab-list {
			display: flex;
			align-items: center;
			width: 100%;
			height: 10%;
			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
			background-size: 100% 100%;
			// position: absolute;
			left: 75.5%;
			top: 75%;
			color: #ccc;
			font-size: 14px;
			line-height: 30px;
			// justify-content: space-around;
			div {
				text-align: center;
				white-space: nowrap;
				width: 20%;
			}
		}
		.list-box {
			height: 90%;
			.list-style:nth-child(even) {
				background: #091f3f;
			}
			.list-style {
				display: flex;
				align-items: center;
				color: #fff;
				line-height: 23px;
				font-size: 12px;
				div {
					text-align: center;
					white-space: nowrap;
					width: 20%;
				}
			}
			.list-style:hover {
				background: #091f3f;
			}
		}
	}
}
.not-data {
	top: 24%;
	width: 60%;
	left: 20%;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
		text-align: center;
	}
}
</style>