zhgdlarge/src/views/sevenLargeScreen/elevatorMonitoring/leftCenter.vue

<template>
	<Card title="电梯报警分析">
		<div class="leftCenterBox">
			<div class="time">
				<el-date-picker
					v-model="value1"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="timeValue"
				/>
			</div>
			<div class="textInfo">
				<span
					>本周期内出现倾斜、风速、上限位、下限位、人数、载重、超速报警，请重点关注施工电梯过程中的维保并加强塔司、班组人员...</span
				>
			</div>
			<p style="color: #fff; font-size: 14px; margin-left: 5%">报警总数:{{ alarmTotal || 0 }}</p>
			<div class="carBox">
				<!-- <span class="carNum">
					<div class="num">5</div>
					<div class="text">倾斜</div>
				</span> -->
				<span class="carNum" v-for="(item, index) in listData" :key="index">
					<div class="num2">{{ item.num }}</div>
					<div class="text2">{{ item.typeName }}</div>
				</span>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Card from "@/components/card.vue";
import { getAlarmTypeApi } from "@/api/modules/elevator";
import { GlobalStore } from "@/stores";

const store = GlobalStore();
const value1 = ref("");
let listData = ref([] as any);
let alarmTotal = ref("" as any);

//获取报警分析数据
const getAlarmTypeList = async () => {
	const res = await getAlarmTypeApi({
		projectSn: store.sn
	});
	if (res.result) {
		alarmTotal.value = res.result.alarmNum;
		listData.value = res.result.typeNumList.slice(0, 7);
	}
};
onMounted(() => {
	getAlarmTypeList();
});
</script>

<style lang="scss" scoped>
.leftCenterBox {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.time {
		position: absolute;
		z-index: 999;
		left: 15%;
		margin-top: 0.5%;
	}
	.textInfo {
		height: 23%;
		margin: 11% 5% 0 5%;
		padding: 0% 2% 0 4%;

		background: url("@/assets/images/towerCraneMonitoring/carContent.png") no-repeat;
		background-size: 100% 100%;
		span {
			color: #fff;
			line-height: 25px;
		}
	}
	.carBox {
		width: 100%;
		height: 40%;
		margin: -1% 0% 2% 5%;
		display: flex;
		// overflow: scroll;
		// white-space: nowrap;
		.carNum {
			width: 13%;
			height: 90%;
			display: block;
			margin-top: -1%;
			background: url("@/assets/images/elevatorMonitoring/blue.webp") no-repeat;
			background-size: 100% 100%;
			color: #fff;
			text-align: center;
			line-height: 3vh;
			.num {
				padding-top: 22%;
				font-size: calc(100vw * 26 / 1920);
				font-family: sadigitalNumber;
				font-weight: 700;
				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;
			}
			.text {
				font-size: calc(100vw * 12 / 1920);
			}
			.num2 {
				padding-top: 22%;
				font-size: calc(100vw * 26 / 1920);
				font-family: sadigitalNumber;
				font-weight: 700;
				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;
			}
			.text2 {
				font-size: calc(100vw * 12 / 1920);
				color: #65d7f9;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 9%;
			}
		}
	}
}
::v-deep .el-input__wrapper {
	width: 50%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>