zhgdyun/src/views/sevenLargeScreen/safetyManagement/safeEducation/topRight.vue

<template>
	<Card title="近七日人员培训记录">
		<div class="edge-bottom-left">
			<div class="list-content">
				<div class="tab-list">
					<div>序号</div>
					<div>姓名</div>
					<div>性别</div>
					<div>年龄</div>
					<div>班组</div>
					<div>是否合格</div>
					<div>培训得分</div>
				</div>
				<el-scrollbar class="list-box" @scroll="handleScroll" ref="refScrollbarer">
					<div v-for="(item, index) in list" class="list-style" :key="item.id">
						<div>{{ index + 1 }}</div>
						<div>{{ item.workerName }}</div>
						<div>{{ item.sex == 1 ? '男' : '女' }}</div>
						<div>{{ item.age }}</div>
						<div>{{ item.teamName }}</div>
						<div :style="{ color: item.isQualified != 1 ? '#EC6266' : '#FFFFFF' }">
							{{ item.isQualified
							== 1 ? "合格" : "不合格" }}
						</div>
						<div>{{ item.score }}</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, nextTick } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

import { safeWorkerPage } from "@/api/modules/safeEdgeProtection";

let showDialog = ref(false as any);
let rangeTime = ref("" as any);
const list = ref([
	// {
	// 	id: 1,
	// 	personName: "梁雷",
	// 	personGrade: "女",
	// 	personAge: "54",
	// 	teamGroup: "木工班组",
	// 	passType: 0,
	// 	trainScore: 78
	// },
]);

onMounted(async () => {
	getProgressListData();
});

const refScrollbarer = ref(null as any); // 绑定到滚动的盒子上
const moreScroll = ref(true as any);

const pagInfo = ref({
	pageNo: 1, //页数
	pageSize: 30, //条数
	total: 0 //总条数
});

// 智能安全帽--查询报警信息
function getProgressListData() {
	let data = {
		pageNo: pagInfo.value.pageNo,
		pageSize: pagInfo.value.pageSize,
		projectSn: store.sn,
		videoType: 1
	};
	safeWorkerPage(data).then(res => {
		moreScroll.value = false;
		if (res.code == 200 && res.result.records.length > 0) {
			console.log("========近七日人员培训记录======", res.result.records);
			list.value = list.value.concat(res.result.records);
			// listData.value = res.result.records
			// console.log("listData.value=============", listData.value);

			pagInfo.value.total = res.result.total;
			nextTick(() => {
				moreScroll.value = true;
			});
		}
	});
}

// 新智能安全帽-分页
function handleScroll(event) {
	// console.log("event", event);

	refScrollbarer.value.wrapRef.addEventListener("scroll", (e: any) => {
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;

		// console.log("event", event);

		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight - 1) {
			if (moreScroll.value) {
				console.log("===================加载第二页===================");
				pagInfo.value.pageNo += 1;
				console.log("pagInfo.value.pageNo", pagInfo.value.pageNo);
				moreScroll.value = false;
				getProgressListData();
			}
		}
	});

	// const { scrollTop, scrollHeight, clientHeight } = event.target;
	// // 判断是否滚动到底部
	// if (scrollTop + clientHeight >= scrollHeight) {
	// 	// 触发滚动到底部的事件
	// 	console.log("===================加载第二页===================");
	// }
}
</script>

<style lang="scss" scoped>
// 选择框样式
:deep(.el-input__wrapper) {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
:deep(.el-range-separator) {
	color: #ccc;
	font-size: 10px;
}
:deep(.el-range-input) {
	color: #ccc;
	font-size: 10px;
}
.edge-bottom-left {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 3%;
	.time-range {
		position: absolute;
		right: 1%;
		top: 5%;
	}
	.title {
		height: 10%;
		line-height: 35px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.list-content {
		height: 100%;
		width: 100%;
		.tab-list {
			display: flex;
			align-items: center;
			width: 100%;
			height: 6%;
			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: 14%;
			}
		}
		.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: 10%;
				font-size: 12px;
				line-height: 23px;
				div {
					text-align: center;
					white-space: nowrap;
					width: 14%;
					white-space: nowrap; /* 强制文本在一行内显示 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 超出部分显示省略号 */
				}
			}
			.list-style:hover {
				background: #091f3f;
			}
		}
	}
}
.not-data {
	top: 50%;
	// width: 12%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>