zhgdlarge/src/views/sevenLargeScreen/greenConstruct/electricityMonitor/topCenter.vue

<template>
	<Card title="实时监测">
		<div class="electricity-top-center">
			<div class="left-box">
				<!-- <div class="electricity-count">{{ meterRead.degree || 0 }} kw·h</div> -->
				<div class="electricity-count">47.39 kw·h</div>
				<div class="electricity-icon">
					<img src="@/assets/images/greenConstruct/electricity.png" alt="" />
				</div>
			</div>
			<div class="right-box">
				<div class="yesterday-use">
					<div class="text">昨日用电(kw·h)</div>
					<!-- <div class="num">{{ meterRead.yesterdayElectricityConsumption || 0 }}</div> -->
					<div class="num">0.59</div>
				</div>
				<div class="yesterday-chain">
					<div class="text">环比</div>
					<!-- <div class="num">
						{{ meterRead.todayMonthOnMonthElectricityConsumption || 0
						}}<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span>
					</div> -->
					<div class="num">96<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span></div>
				</div>
				<div class="month-use">
					<div class="text">本月用电(kw·h)</div>
					<!-- <div class="num">{{ meterRead.thisMonthElectricityConsumption || 0 }}</div> -->
					<div class="num">4.87</div>
				</div>
				<div class="month-chain">
					<div class="text">环比</div>
					<!-- <div class="num">
						{{ meterRead.monthOnMonthElectricityConsumptionThisMonth || 0
						}}<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span>
					</div> -->
					<div class="num">28<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span></div>
				</div>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import { getElectricityTotal } from "@/api/modules/greenConstruct";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
import mitts from "@/utils/bus"; //兄弟组件传值

let meterId = ref("" as any);
// 获取电表读数
const meterRead = ref({} as any);
const getMeterTotal = async () => {
	const res: any = await getElectricityTotal({ projectSn: store.sn, ammeterNo: meterId.value });
	console.log("获取电表读数", res);
	meterRead.value = res.result;
};

onMounted(async () => {
	mitts.on("electricId", e => {
		// console.log("当前电表对应的electricId", e);
		meterId.value = e;
		getMeterTotal();
	});
	// getMeterTotal();
});

onBeforeUnmount(async () => {
	mitts.off("electricId");
});
</script>

<style scoped lang="scss">
.electricity-top-center {
	width: 100%;
	height: 100%;
	margin-left: 3%;
	position: relative;
	display: flex;
	.left-box {
		width: 50%;
		.electricity-count {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			height: 10%;
			margin: auto;
			margin-top: 8%;
			background: url("@/assets/images/listTitle.png") no-repeat;
			background-size: 100% 100%;
			font-size: 20px;
			font-family: OPPOSans-Bold, OPPOSans;
			font-weight: bold;
			color: #ffffff;
		}
		.electricity-icon {
			width: 60%;
			height: 50%;
			margin: auto;
			margin-top: 15%;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
	.right-box {
		width: 50%;
		margin-left: 3%;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		.yesterday-use {
			width: 30%;
			height: 30%;
			margin-top: 10%;
			margin-right: 15%;
			background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
			background-size: 100% 100%;
			.text {
				font-size: 16px;
				color: #65d7f9;
				margin-top: 5%;
			}
			.num {
				transform: skew(-5deg);
				font-family: sadigitalNumber;
				font-size: 24px;
				margin-top: 7%;
				font-weight: bold;
				background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.yesterday-chain {
			width: 30%;
			height: 30%;
			margin-top: 10%;
			margin-right: 15%;
			background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
			background-size: 100% 100%;
			.text {
				font-size: 16px;
				color: #65d7f9;
				margin-top: 5%;
			}
			.num {
				transform: skew(-5deg);
				font-family: sadigitalNumber;
				font-size: 24px;
				margin-top: 7%;
				font-weight: bold;
				background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.month-use {
			width: 30%;
			height: 30%;
			margin-right: 15%;
			background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
			background-size: 100% 100%;
			.text {
				font-size: 16px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
				margin-top: 5%;
			}
			.num {
				transform: skew(-5deg);
				font-family: sadigitalNumber;
				font-size: 24px;
				margin-top: 7%;
				font-weight: bold;
				background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.month-chain {
			width: 30%;
			height: 30%;
			background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
			background-size: 100% 100%;
			.text {
				margin-top: 5%;
				font-size: 16px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
			}
			.num {
				transform: skew(-5deg);
				font-family: sadigitalNumber;
				font-size: 24px;
				margin-top: 7%;
				font-weight: bold;
				background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
}
</style>