zhgdlarge/src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue

<template>
	<Card title="安全隐患统计">
		<div class="centerTopBox">
			<div class="line"></div>
			<div class="lineDate1 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg9.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>已整改数</i></div>
					<div class="numStyle">
						<i>{{ safeHazardTotal.alreadyRectificationNum || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="lineDate2 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg6.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>累积通过</i></div>
					<div class="numStyle">
						<i>{{ safeHazardTotal.closeNum || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="lineDate3 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg7.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>未整改数</i></div>
					<div class="numStyle">
						<i>{{ safeHazardTotal.rectificationNum || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="lineDate4 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg10.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>隐患总数</i></div>
					<div class="numStyle">
						<i>{{ safeHazardTotal.totalNum || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="lineDate5 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg8.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>超期未关闭</i></div>
					<div class="numStyle2">
						<i>{{ safeHazardTotal.overdueNotCloseNum || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="lineDate6 data">
				<div class="img">
					<img src="@/assets/images/securityManagement/safeImg5.png" alt="" />
				</div>
				<div class="num">
					<div class="text"><i>待复查数</i></div>
					<div class="numStyle">
						<i>{{ safeHazardTotal.reviewNum || 0 }}</i>
					</div>
				</div>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { getQualityStatistics } from "@/api/modules/newSecurityManagement";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// 安全隐患统计
const safeHazardTotal = ref({} as any);
const getHazardTotal = async () => {
	const res: any = await getQualityStatistics({ projectSn: store.sn });
	console.log("安全隐患统计", res);
	safeHazardTotal.value = res.result.total;
};
defineExpose({
	getHazardTotal
});
onMounted(async () => {
	await getHazardTotal();
});
</script>

<style scoped lang="scss">
.centerTopBox {
	width: 100%;
	height: 100%;
	background: url("@/assets/images/securityManagement/safeImg1.png") no-repeat;
	background-size: 100% 100%;
	position: relative;
	.line {
		width: 100%;
		height: 100%;
		width: 80%;
		height: 85%;
		left: 10%;
		background: url("@/assets/images/securityManagement/safeImg2.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}
	.data {
		color: #fff;
		display: flex;
		width: 25%;
		height: 20%;
		position: absolute;
	}
	img {
		width: 50%;
	}
	.num {
		width: 50%;
		margin-left: -25%;
		.text {
			font-size: 14px;
			background: url("@/assets/images/securityManagement/safeImg3.png") no-repeat;
			background-size: 100% 100%;
		}
		.numStyle {
			font-size: 20px;
			font-weight: bold;
			margin-top: 15%;
			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
			background-size: 100% 100%;
			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.numStyle2 {
			font-size: 20px;
			font-weight: bold;
			margin-top: 15%;
			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
			background-size: 100% 100%;
			background-image: linear-gradient(to right, rgba(236, 98, 102, 1), rgba(255, 255, 255, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.lineDate1 {
		left: 5%;
		top: 10%;
	}
	.lineDate2 {
		left: 2%;
		top: 45%;
	}
	.lineDate3 {
		left: 5%;
		top: 80%;
	}
	.lineDate4 {
		left: 71%;
		top: 10%;
	}
	.lineDate5 {
		left: 75%;
		top: 45%;
	}
	.lineDate6 {
		left: 71%;
		top: 80%;
	}
}
</style>