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

<template>
	<Card title="电梯报警分析">
		<div class="leftCenterBox">
			<div class="time">
				<el-date-picker
					v-model="rangeTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="timeChange"
					value-format="YYYY-MM-DD"
				/>
			</div>
			<div class="textInfo">
				<span
					>本周期内大概会出现倾斜、风速、上限位、下限位、人数、载重、超速报警，请重点关注施工电梯过程中的维保并加强塔司、班组人员...</span
				>
			</div>
			<p style="color: #fff; font-size: 14px; margin-left: 5%">报警总数:{{ alarmTotal || 0 }}</p>
			<el-scrollbar>
				<div class="scrollbar-flex-content carBox">
					<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>
			</el-scrollbar>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Card from "@/components/card.vue";
import { getAlarmTypeApi } from "@/api/modules/elevator";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
let rangeTime = ref("" as any);
let listData = ref([] as any);
let alarmTotal = ref("" as any);
// let startTime = ref("" as any);
// let endTime = ref("" as any);
let devId = ref("" as any);
//获取报警分析数据
const getAlarmTypeList = async () => {
	const res = await getAlarmTypeApi({
		// devSn: devId.value,
		projectSn: store.sn,
		queryStartTime: rangeTime.value[0],
		queryEndTime: rangeTime.value[1]
	});
	if (res.result) {
		alarmTotal.value = res.result.alarmNum;
		listData.value = res.result.typeNumList;
	}
};
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
const selectNowDate = () => {
	var date = new Date(),
		year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate(),
		hours = date.getHours(), //获取当前小时数(0-23)
		minutes = date.getMinutes(), //获取当前分钟数(0-59)
		seconds = date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
	minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
	seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
	// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
	var timer = year + "-" + month + "-" + day;
	rangeTime.value = [timer, timer];
	console.log(timer);
	// return timer;
};
function timeChange(e: any) {
	// console.log('选择日期',e)
	// if(e) {
	// 	startTime.value = e[0];
	// 	endTime.value = e[1];
	// }
	if (e) {
		getAlarmTypeList();
	}
}
onMounted(() => {
	selectNowDate()
	getAlarmTypeList();

	// mitts.on("elevaTorSelectId", e => {
	// 	devId.value = e;
	// 	console.log("收到设备ID", e);
	// 	getAlarmTypeList();
	// 	// gerUserVideo();
	// 	// setTimeout(() => {
	// 	// 	gerUserVideo();
	// 	// }, 500);
	// });
});

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

<style lang="scss" scoped>
.leftCenterBox {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	.time {
		position: absolute;
		z-index: 999;
		left: 56%;
		margin-top: 1%;
	}
	.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: 10%;
			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%;
			}
		}
	}
}
.scrollbar-flex-content {
	display: flex;
}
.scrollbar-demo-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 50px;
	margin: 10px;
	text-align: center;
	border-radius: 4px;
	background: var(--el-color-danger-light-9);
	color: var(--el-color-danger);
}
::v-deep .el-input__wrapper {
	width: 87%;
	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>