zhgdlarge/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue

<template>
	<div class="leftTop">
		<Card title="安全质量隐患报告">
			<div class="box-content">
				<el-scrollbar class="list-box" ref="refScrollbar">
					<div v-for="item in list" class="listStyle" :key="item.id">
						<div>{{ item.dangerItemContent }}</div>
						<div>
							<span>整改结果：</span>
							<span v-if="item.overTime" style="color: #e25f64">已逾期</span>
							<span v-else :style="{ color: item.status ? statusNameFilter(item.status).color : '' }">{{
								item.status ? statusNameFilter(item.status).name : ""
							}}</span>
						</div>
						<div>
							<div>
								<span>整改人：</span>
								<span>{{ item.changeName || "" }}</span>
							</div>
							<div>
								<span>检查人：</span>
								<span>{{ item.inspectManName || "" }}</span>
							</div>
							<div>
								<span>检查日期：</span>
								<span>{{ item.inspectTime || "" }}</span>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</Card>
	</div>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getXzSecurityQualitylnspectionRecordlistApi } from "@/api/modules/projectOverview";
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const store = GlobalStore();
const rectification = ref([
	{ id: 1, name: "无需整改", color: "#a1accb" },
	{ id: 2, name: "待整改", color: "#698ed2" },
	{ id: 3, name: "待复查", color: "#EEA959" },
	{ id: 4, name: "待核验", color: "#a1accb" },
	{ id: 5, name: "合格", color: "#82FBEA" }
]);
// 名称筛选
const statusNameFilter = (status: any): any => {
	let findItem = rectification.value.find((item: any) => {
		return item.id == status;
	});
	return findItem;
};
const list = ref([]) as any;
const pageNo = ref(1 as any);
const moreScroll = ref(true as any);
const getXzSecurityQualitylnspectionRecordlist = async (tip: any) => {
	const res: any = await getXzSecurityQualitylnspectionRecordlistApi({
		pageNo: tip == "search" ? 1 : pageNo.value,
		pageSize: 10,
		projectSn: store.sn,
		status: 60
	});
	if (tip == "more") {
		const newResult = res.result.page.records.map((item: any) => {
			return {
				...item,
				whiteSpace: false
			};
		});
		list.value = list.value.concat(newResult);
	} else {
		list.value = res.result.page.records;
	}

	if (res.result.page.pages == pageNo.value) {
		moreScroll.value = false;
	} else {
		pageNo.value = pageNo.value + 1;
	}
};
onMounted(async () => {
	await getXzSecurityQualitylnspectionRecordlist("search");
	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;
		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight - 1) {
			if (moreScroll.value) {
				getXzSecurityQualitylnspectionRecordlist("more");
			}
		}
	});
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.box-content {
		width: 100%;
		height: 100%;
		padding-top: 1%;
		.list-box {
			height: 94%;
			padding: 5px 24px;
			.listStyle {
				display: flex;
				flex-direction: column;
				background: rgba(9, 30, 62, 0.5);
				box-shadow: 0px 3px 4px 0px rgba(17, 141, 255, 0.5), inset 0px 0px 10px 0px #118dff;
				border-radius: 0px 0px 0px 0px;
				border: 1px solid;
				opacity: 0.7;
				border-image: linear-gradient(359deg, rgba(17, 141, 255, 1), rgba(17, 141, 255, 0)) 1 1;
				padding: 9px 13px;
				margin-bottom: 10px;
				> div:nth-child(1) {
					font-family: ABeeZee, ABeeZee;
					font-weight: 400;
					font-size: 16px;
					color: #ffffff;
					line-height: 16px;
					font-style: normal;
					text-transform: none;
					margin-bottom: 5px;
				}
				> div:nth-child(2) {
					font-family: ABeeZee, ABeeZee;
					font-weight: 400;
					font-size: 13px;
					color: #ffffff;
					font-style: normal;
					text-transform: none;
					margin-bottom: 5px;
				}
				> div:nth-child(3) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 2px;
					> div:nth-child(1) {
						font-family: ABeeZee, ABeeZee;
						font-weight: 400;
						font-size: 13px;
						color: #ffffff;
						font-style: normal;
						text-transform: none;
						> span:nth-child(2) {
							color: #01e1ff;
						}
					}
					> div:not(:nth-child(1)) {
						font-family: ABeeZee, ABeeZee;
						font-weight: 400;
						font-size: 13px;
						color: #8893a1;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
		.not-data {
			top: 40%;
			width: 30%;
			left: 35%;
			position: absolute;
			text-align: center;
			img {
				width: 50%;
			}
			p {
				color: #fff;
				font-size: 14px;
			}
		}
	}
}

::v-deep .h-card .content {
	height: 80%;
}
</style>