zhgdlarge/src/views/commandScreen/dialogCompnnents/month-safe-score.vue

<template>
	<div class="political-outlook">
		<div class="content">
			<div class="all-score">
				<span>综合得分：{{ countData.total || 0 }}</span>
			</div>
			<div class="all-title">
				<span>月度安全综合评分表</span>
			</div>
			<div class="all-subTitle">
				<span>工程名称：{{projectData.projectName || ""}}</span>
				<span>表格日期：{{currentDate}}</span>
			</div>
			<div class="table-one">
				<div class="tabList">
					<div>考核分类</div>
					<div>考核指标</div>
					<div>指标说明</div>
					<div>单模块权重</div>
					<div>模块权重</div>
					<div>模块得分</div>
				</div>
				<el-scrollbar class="listBox" ref="refScrollbar">
					<div class="table-head-nine">
						<div class="table-head-nine-part1" v-for="(value2, key2, index2) in value" :key="index2">
							<div class="category-title">
								<span>{{ key2 }}</span>
							</div>
							<div class="category-content">
								<div v-for="(item, index3) in value2" :key="index3">
									<div>
										<span>{{ index3 }}</span>
									</div>
									<div>{{item.name}}</div>
									<div>
										<span>{{item.value}}</span>
									</div>
								</div>
							</div>
							<div class="category-other">
								<span v-if="key2 == '隐患治理排查'">25%</span>
								<span v-else-if="key2 == '危大工程'">15%</span>
								<span v-else-if="key2 == '风险管理'">15%</span>
								<span v-else-if="key2 == '安全教育'">25%</span>
							</div>
							<div class="category-other">
								<span v-if="key2 == '隐患治理排查'">{{ countData.hiddenDangerScore || 0 }}</span>
								<span v-else-if="key2 == '危大工程'">{{ countData.dangerEngScore || 0 }}</span>
								<span v-else-if="key2 == '风险管理'">{{ countData.riskscore || 0 }}</span>
								<span v-else-if="key2 == '安全教育'">25</span>
							</div>
						</div>
						<div class="table-head-nine-part2">
							<div class="category-title">
								<span>AI报警</span>
							</div>
							<div class="category-title">
								<span>AI违章抓拍</span>
							</div>
							<div class="category-title">
								<span>告警数量月度环比对比</span>
							</div>
							<div class="category-title">
								<span>100%</span>
							</div>
							<div class="category-title">
								<span>{{ countData.aiScore || 0 }}</span>
							</div>
						</div>
						<div class="table-head-nine-part3">
							<div><span>综合得分</span></div>
							<div>
								<span>{{ countData.total || 0 }}</span>
							</div>
						</div>
					</div>
					<!-- <div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
						<div>{{ item.workerName }}</div>
						<div>{{ item.rectifiedNum }}</div>
						<div>{{ item.overTimeRectifiedNum }}</div>
						<div>{{ item.overTimeNotRectifiedNum }}</div>
						<div>{{ item.rectifiedNumRatio }}</div>
						<div>{{ item.rectifiedNumRatioTimely }}</div>
					</div>
					<div class="notoDta" v-if="partyMemberList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div> -->
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { getMemberJobStatusApi, getStatScoreApi } from "@/api/modules/agjtCommandApi";
import { getProjectDetail } from "@/api/modules/projectOverview";
import moment from "moment";
const store = GlobalStore();
const props = defineProps(["tip"]);
const currentDate = ref("" as any);
let pageNo = ref(1 as any);
let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const partyMemberList = ref({} as any);
const value = ref({
	"隐患治理排查": {
		"隐患整改率": {name: "隐患整改率=已整改（除了待整改和已撤回）/隐患总数（不包含排查记录）/隐患总数x100%",value: "30%"},
		"隐患及时整改率": {name: "及时整改率=状态是已整改（除了待整改和已撤回）的未超期整改的隐患记录数/状态是已整改（除了待整改和已撤回）的隐患总数x100%",value: "30%"},
		"隐患闭合率": {name: "隐患闭合率=状态是合格的隐患记录/隐患总数x100%",value: "20%"},
		"隐患自检数量": {name: "每周完成项目自检次数",value: "20%"},
	},
	"危大工程": {
		"危大工程排查覆盖率": {name: "危大工程排查覆盖率=实际排查天数/应排查天数x100%(在施危大工程应每天排查)",value: "60%"},
		"旁站记录更新": {name: "每周至少针对在施危大工程完成旁站记录次数",value: "40%"},
	},
	"风险管理": {
		"风险排查执行率": {name: "有排查记录的风险/生成待办任务的风险x100%",value: "99%"},
		"风险辨识数量": {name: "至少识别3个风险",value: "1%"},
	},
	"安全教育": {
		"三级入场教育完成率": {name: "三级入场教育完成率=三级教育完成人数/所有在岗人数",value: "100%"}
	}
});
const countData = ref({} as any)
const projectData = ref({} as any);
//获取项目信息
const getProjectInfo = async () => {
	const res = await getProjectDetail({ projectSn: store.sn });
	console.log("获取项目信息666", res);
	// console.log("获取工程类别", projectTypeEnum);
	projectData.value = res.result;
};
// 获取统计数据
const getStatScoreFn = async () => {
	let requestData: any = {
		projectSn: store.sn
	};
	const res: any = await getStatScoreApi(requestData);
	console.log("综合评分详情", res);
	countData.value = res.result;
};

//获取数据
const getMemberCountList = async (tip: any) => {
	let requestData: any = {
		projectSn: store.sn,
		pageSize: 100,
		pageNo: 1
	};
	const res: any = await getMemberJobStatusApi(requestData);
	console.log("获取人员信息列表", res);
	if (tip == "more") {
		partyMemberList.value = partyMemberList.value.concat(res.result.records);
	} else {
		partyMemberList.value = res.result.records;
	}
	// 为图片拼接IP
	// partyMemberList.value.map((item:any) => {
	// 	item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
	// })
	if (res.result.pages == pageNo.value) {
		moreScroll.value = false;
	} else {
		pageNo.value = pageNo.value + 1;
	}
};

onMounted(async () => {
	currentDate.value = moment(new Date()).format("YYYY-MM-DD")
	await getProjectInfo();
	await getMemberCountList("search");
	await getStatScoreFn();
	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 - 1) {
			// console.log("加载更多");
			if (moreScroll.value) {
				getMemberCountList("more");
			}
		}
	});
});
</script>

<style lang="scss" scoped>
@mixin flex {
	display: flex;
	align-items: center;
}
.political-outlook {
	height: 97%;
	margin: 0 60px;
	.content {
		height: 95%;
		width: 100%;
		margin-top: 10px;
		// background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		padding: 20px 15px;
		.all-subTitle {
			font-size: 16px;
			color: white;
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}
		.all-title {
			text-align: center;
			font-size: 18px;
			color: white;
			margin-top: 10px;
		}
		.all-score {
			width: 100%;
			height: 31px;
			line-height: 31px;
			background: linear-gradient(90deg, rgba(52, 146, 252, 0.43) 0%, #3186e8 31%, rgba(21, 43, 78, 0.02) 100%);
			margin-top: 10px;
			text-indent: 2em;
			span {
				font-size: 18px;
				color: white;
				font-style: italic;
			}
		}
		.table-one {
			height: 88%;
			.tabList {
				display: flex;
				// 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;
				align-items: center;
				margin-top: 2%;
				div {
					text-align: center;
					width: 17%;
				}
			}
			.listBox {
				height: 70%;
				.listStyle {
					display: flex;
					align-items: center;
					text-align: center;
					color: #fff;
					font-size: 12px;
					padding: 5px 0px;
					.list-img {
						.el-img {
							width: 30px;
							height: 30px;
							img {
								display: flex;
								align-items: center;
								width: 100%;
								height: 100%;
							}
						}
					}
					div {
						width: 17%;
						white-space: nowrap; //单行
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.listStyle:hover {
					background: #091f3f;
				}
			}
			.table-head-nine {
				display: flex;
				flex-direction: column;
				.table-head-nine-part1 {
					display: flex;
					// align-items: center;
					text-align: center;
					color: white;
					font-size: 14px;
					margin-bottom: 5px;
					.category-title {
						width: 17%;
						height: auto;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						background-color: #102959;
						// overflow-wrap: anywhere;
						// text-align: left !important;
					}
					.category-other {
						width: 17%;
						height: auto;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						background-color: #041E51;
					}
					.category-content {
						width: 49%;
						>div:nth-child(2n - 1){
							background-color: #041E51;
						}
						>div:nth-child(2n){
							background-color: #102959;
						}
						> div {
							width: 100%;
							height: auto;
							display: flex;
							>div{
								width: 33.3%;
								height: auto;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							>div:nth-child(2){
								line-height: 20px;
								text-align: left;
								justify-content: flex-start;
							}
						}
					}
				}
				.table-head-nine-part2 {
					display: flex;
					text-align: center;
					color: white;
					font-size: 14px;
					margin-bottom: 5px;
					>div{
						height: 30px;
						line-height: 30px;
					}
					> div:nth-child(1) {
						width: 17%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
						background-color: #102959;
					}
					>div:not(:first-child){
						background-color: #041E51;
					}
					> div:nth-child(2) {
						width: 17%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
					}
					> div:nth-child(3) {
						width: 32%;
						text-align: left;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
					}
					> div:nth-child(4) {
						width: 17%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
					}
					> div:nth-child(5) {
						width: 17%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
					}
				}
				.table-head-nine-part3 {
					display: flex;
					text-align: center;
					color: white;
					font-size: 14px;
					>div{
						height: 30px;
						line-height: 30px;
					}
					> div:nth-child(1) {
						width: 17%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
						background-color: #102959;
						> span:not(:first-child) {
							border-top: 1px solid #086d93;
						}
					}
					> div:nth-child(2) {
						width: 83%;
						display: flex;
						flex-direction: column;
						white-space: nowrap;
						background-color: #041E51;
					}
				}
			}
		}
		:deep() {
			.el-tabs__item {
				color: white;
			}
			.el-tabs__item.is-active {
				color: white;
			}
		}
	}
}
.notoDta {
	top: 35%;
	width: 20%;
	left: 40%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
// element 组件样式
:deep() {
	.el-date-editor .el-range-input,
	.el-range-separator {
		color: #fff;
	}
	.el-input__wrapper {
		background: #112d59;
	}
	.el-input__inner {
		color: #fff;
	}
	.el-button {
		background-color: #2758c0;
		color: white;
		border-color: transparent;
	}
}
// ::v-deep .el-select .el-input .el-select__caret {
// 	color: #fff;
// }
</style>