zhgdlarge/src/views/sevenLargeScreen/distributionMonitoring/topRight.vue

<template>
	<div class="topRightBox" v-if="boxAlarmData">
		<div class="title"><i>报警列表</i></div>
		<div class="content">
			<div class="titleData">
				<div class="numPolice police">
					<div class="numText">总报警次数</div>
					<div class="num">{{ boxAlarmData.alarmNum.totalAlarmNum }}</div>
				</div>
				<div class="monthPolice police2">
					<div class="numText2">本月报警次数</div>
					<div class="num2">{{ boxAlarmData.alarmNum.monthAlarmNum }}</div>
				</div>
				<div class="dayPolice police">
					<div class="numText">今日报警次数</div>
					<div class="num">{{ boxAlarmData.alarmNum.dayAlarmNum }}</div>
				</div>
			</div>
			<div class="tableBox">
				<div class="tabList">
					<div class="tabOne">报警设备</div>
					<div class="tabTwo">报警时间</div>
					<div class="tabThree">报警类型</div>
				</div>
				<el-scrollbar style="height: 85%">
					<div class="listBox">
						<div v-for="item in boxAlarmData.list" class="listStyle" :key="item.id" v-if="boxAlarmData.list.length > 0">
							<div class="dev" style="margin-left: 5%">{{ item.devName }}</div>
							<div class="time">{{ item.creatTime }}</div>
							<div class="type" style="margin-right: 5%">{{ item.alarmType }}</div>
						</div>
						<div class="notoDta" v-else>
							<img src="@/assets/images/noData.png" alt="" />
							<p>暂无数据</p>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
// import * as echarts from "echarts";
import { getBoxAlarmStatisticsApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let boxAlarmData = ref(null as any);
const getBoxAlarmList = async () => {
	const res: any = await getBoxAlarmStatisticsApi({
		projectSn: store.sn
	});
	if (res.result) {
		boxAlarmData.value = res.result;
		console.log("右中报警数据", res.result);
	}
};

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

<style lang="scss" scoped>
.topRightBox {
	width: 100%;
	height: 100%;
	.title {
		height: 8%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleImg.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 90%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		.titleData {
			height: 35%;
			// background-color: orange;
			display: flex;
			.police {
				width: 28%;
				height: 90%;
				background: pink;
				margin: 3% 2% 0 4%;
				background: url("@/assets/images/distributionMonitoring/bjlbRight1.webp") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				.numText {
					margin-top: 15%;
					font-size: calc(100vw * 16 / 1920);
					color: #65d7f9;
				}
				.num {
					font-size: calc(100vw * 24 / 1920);
					font-family: sadigitalNumber;
					font-weight: 700;
					margin-top: 10%;
					background-image: linear-gradient(to right, rgba(101, 215, 249, 1), rgba(255, 255, 255, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.police2 {
				width: 28%;
				height: 90%;
				background: pink;
				margin: 3% 2% 0 4%;
				background: url("@/assets/images/distributionMonitoring/bjlbRight2.webp") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				.numText2 {
					margin-top: 15%;
					font-size: calc(100vw * 16 / 1920);
				}
				.num2 {
					font-size: calc(100vw * 24 / 1920);
					font-family: sadigitalNumber;
					font-weight: 700;
					margin-top: 10%;
					background-image: linear-gradient(to right, rgba(244, 208, 101, 1), rgba(218, 216, 180, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
		.tableBox {
			width: 100%;
			height: 60%;
			margin-top: 5%;
			.tabList {
				display: flex;
				width: 100%;
				height: 11%;
				background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
				background-size: 100% 100%;
				// position: absolute;
				left: 75.5%;
				top: 75%;
				color: #7b86a3;
				font-size: calc(100vw * 14 / 1920);
				line-height: 30px;
				justify-content: space-around;
			}
			.listBox {
				.listStyle {
					display: flex;
					// justify-content: space-around;
					color: #fff;
					height: 12%;
					line-height: 25px;
					font-size: calc(100vw * 12 / 1920);
					.dev {
						width: 25%;
						padding-left: 7%;
					}
					.time {
						width: 40%;
					}
					.type {
						width: 20%;
					}
				}
				.listStyle:hover {
					background: #091f3f;
				}
			}
			.notoDta {
				margin-left: 10%;
				margin-top: 8%;
				img {
					width: 16%;
					margin: 6% 36%;
				}
				p {
					color: #fff;
					font-size: calc(100vw * 14 / 1920);
					margin: -5% 38%;
				}
			}
		}
	}
}
</style>