zhgdlarge/src/views/sevenLargeScreen/safetyManagement/securityControl/centerBottom.vue

<template>
	<Card title="吊篮检测数据">
		<div class="hang-basket-content">
			<div class="list-content">
				<div class="tab-list">
					<div style="width: 5%">序号</div>
					<div>挂篮有人</div>
					<div>风速(m/s)</div>
					<div style="width: 10%">倾角(°)</div>
					<div style="width: 15%">底膜高度(mm)</div>
					<div>底膜高度差(mm)</div>
					<div style="width: 18%">后梁锚杆(KN)</div>
					<div>监测时间</div>
				</div>
				<el-scrollbar class="list-box" ref="refScrollbar">
					<div v-for="(item, index) in list" class="list-style" :key="item.id">
						<div style="width: 5%">{{ index + 1 }}</div>
						<div v-if="item.hangingBasketSomeone < 3" :style="{ color: warnType[item.hangingBasketSomeone].color }">
							{{ warnType[item.hangingBasketSomeone].name }}
						</div>
						<div v-else>-</div>
						<div>{{ item.windSpeed }}</div>
						<div style="width: 10%">{{ item.inclination }}</div>
						<div style="width: 15%">
							左 <span class="listNumber">{{ item.bottomFilmHeightLeft }}</span> 右
							<span class="listNumber">{{ item.bottomFilmHeightRight }}</span>
						</div>
						<div>{{ item.bottomFilmHeightDifference }}</div>
						<div style="width: 18%">
							左 <span class="listNumber">{{ item.leftRearBeamAnchor }}</span> 右
							<span class="listNumber">{{ item.rightRearBeamAnchor }}</span>
						</div>
						<div>{{ item.createDate }}</div>
					</div>
					<div class="not-data" v-if="list.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</el-scrollbar>
			</div>
		</div>
	</Card>
</template>

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

const warnType = ref([
	{
		id: 1,
		name: "未知",
		color: "#EC6266"
	},
	{
		id: 2,
		name: "有人",
		color: "#65D7F9"
	},
	{
		id: 3,
		name: "无人",
		color: "#FFFFFF"
	}
]);

const store = GlobalStore();
let showDialog = ref(false as any);
let rangeTime = ref("" as any);
const list = ref([]);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const ScrollbarTop = ref(0);

let moreScroll = ref(true as any);

let pageNo = ref(1 as any);
let pageSize = ref(20 as any);

// 检测数据
const getAlarmList = async () => {
	const res: any = await hangBasketDetectDataPage({ projectSn: store.sn, pageNo: 1, pageSize: pageSize.value });
	console.log("检测数据", res);
	list.value = res.result.records;
	if (res.result.pages == pageNo.value) {
		moreScroll.value = false;
	} else {
		pageNo.value = pageNo.value + 1;
	}
	// console.log("当前页数", pageNo.value);
};

// 下拉加载
const getMoreSmokeRecordList = async () => {
	const res: any = await hangBasketDetectDataPage({ projectSn: store.sn, pageNo: pageNo.value, pageSize: pageSize.value });
	// console.log("下拉加载检测数据", res);
	list.value = list.value.concat(res.result.records);
	if (res.result.pages == pageNo.value) {
		moreScroll.value = false;
	} else {
		pageNo.value = pageNo.value + 1;
	}
	// console.log("当前列表", list.value);
	// console.log("当前页数", pageNo.value);
};

onMounted(async () => {
	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
		// console.log("滚动容器", e);
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;
		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight) {
			console.log("加载更多");
			if (moreScroll.value) {
				getMoreSmokeRecordList();
			}
		}
		ScrollbarTop.value = scrollTop;
	});
	getAlarmList();
});
</script>

<style lang="scss" scoped>
.listNumber {
	color: #65d7f9;
}

.hang-basket-content {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 2%;
	.list-content {
		height: 100%;
		width: 100%;
		.tab-list {
			display: flex;
			align-items: center;
			width: 100%;
			height: 8%;
			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
			background-size: 100% 100%;
			// position: absolute;
			left: 75.5%;
			top: 75%;
			color: #ccc;
			font-size: calc(100vw * 14 / 1920);
			line-height: 30px;
			// justify-content: space-around;
			div {
				text-align: center;
				white-space: nowrap;
				width: 12%;
			}
		}
		.list-box {
			height: 90%;
			.list-style:nth-child(even) {
				background: rgba(39, 88, 192, 0.06);
			}
			.list-style {
				display: flex;
				align-items: center;
				color: #fff;
				height: 8%;
				font-size: 12px;
				line-height: 25px;
				div {
					text-align: center;
					white-space: nowrap;
					width: 12%;
				}
			}
			.list-style:hover {
				background: #091f3f;
			}
		}
	}
}
.not-data {
	top: 33%;
	width: 30%;
	left: 34%;
	text-align: center;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>