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

<template>
	<div class="political-outlook">
		<div class="content">
			<div class="all-score">
				<span>综合得分：{{ tableInfo.score || 0 }}</span>
			</div>
			<div class="all-title">
				<span>月度安全综合评分表</span>
			</div>
			<div class="all-subTitle">
				<span>工程名称：{{ projectData.projectName || "" }}</span>
				<!-- <span>表格日期：{{ currentDate }}</span> -->
				<span
					>按月筛选：<el-date-picker @change="getScores" v-model="currentDate" type="month" placeholder="Pick a month"
				/></span>
			</div>
			<div class="table-one">
				<div class="tabList">
					<div>项目名称及分值<text>(点击进入各分项查看扣分详情)</text></div>
				</div>
				<div class="tabbody">
					<table>
						<thead>
							<tr>
								<th></th>
								<th v-for="item in tableInfo.tableBody" :key="item" @click="openPeopleCountDialog(item)">{{ item.name }}</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>单模块权重</td>
								<td v-for="item in tableInfo.tableBody.map(ele => ele.weight)" :key="item">{{ item }}%</td>
							</tr>
							<tr>
								<td style="color: #ff0000">单项扣分</td>
								<td style="color: #ff0000" v-for="item in tableInfo.tableBody.map(ele => ele.deductScore)" :key="item">
									{{ item }}
								</td>
							</tr>
							<tr>
								<td>单项得分</td>
								<td v-for="item in tableInfo.tableBody.map(ele => ele.score)" :key="item">{{ item }}</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td>总计得分</td>
								<td :colspan="tableInfo.tableBody.length">{{ tableInfo.score }}</td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
		<dataDialog ref="partyBuildRefMore"></dataDialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { GlobalStore } from "@/stores";
import { getStatScoreApi, getScoresApi } from "@/api/modules/agjtCommandApi";
import { getProjectDetail } from "@/api/modules/projectOverview";
import dataDialog from "./data-dialog.vue";
import moment from "moment";
const store = GlobalStore();
const props = defineProps(["tip"]);
const currentDate = ref("" as any);

// 表单
const tableInfo = reactive({
	tableBody: [] as any[],
	score: 0
});

const partyBuildRefMore = ref();
// 弹窗
const openPeopleCountDialog = (obj: any) => {
	partyBuildRefMore.value.openDialog({
		index: 14,
		type: 5,
		title: "检查评分表",
		tableItem: obj,
		currentDate: currentDate.value
	});
	// console.log(partyBuildRef.value);
};

// 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({});
const countData = ref({} as any);
const projectData = ref({} as any);
//获取项目信息
const getProjectInfo = async () => {
	const res = await getProjectDetail({ projectSn: store.sn }, false);
	projectData.value = res.result;
};
// 获取统计数据
const getStatScoreFn = async () => {
	let requestData: any = {
		projectSn: store.sn
	};
	const res: any = await getStatScoreApi(requestData, false);
	countData.value = res.result;
	value.value = {
		隐患治理排查: {
			隐患整改率: {
				name: "隐患整改率=已整改（除了待整改和已撤回）/隐患总数（不包含排查记录）x100%",
				value: "40%",
				score: res.result.hiddenDangerScoreClz.zgl ? res.result.hiddenDangerScoreClz.zgl : 0,
				deduction: res.result.hiddenDangerScoreClz.zglkf ? res.result.hiddenDangerScoreClz.zglkf : 0
			},
			隐患及时整改率: {
				name: "及时整改率=状态是已整改（除了待整改和已撤回）的未超期整改的隐患记录数/状态是已整改（除了待整改和已撤回）的隐患总数x100%",
				value: "30%",
				score: res.result.hiddenDangerScoreClz.jszgl ? res.result.hiddenDangerScoreClz.jszgl : 0,
				deduction: res.result.hiddenDangerScoreClz.jszglkf ? res.result.hiddenDangerScoreClz.jszglkf : 0
			},
			隐患闭合率: {
				name: "隐患闭合率=状态是合格的隐患记录/隐患总数x100%",
				value: "30%",
				score: res.result.hiddenDangerScoreClz.bhl ? res.result.hiddenDangerScoreClz.bhl : 0,
				deduction: res.result.hiddenDangerScoreClz.bhlkf ? res.result.hiddenDangerScoreClz.bhlkf : 0
			},
			项目自检数量: {
				name: "每周完成项目自检次数\n每周正常7次自检",
				value: "0%",
				score: res.result.hiddenDangerScoreClz.zj ? res.result.hiddenDangerScoreClz.zj : 0,
				deduction: res.result.hiddenDangerScoreClz.zjkf ? res.result.hiddenDangerScoreClz.zjkf : 0
			}
		},
		危大工程: {
			危大工程排查覆盖率: {
				name: "危大工程排查覆盖率=实际排查天数/应排查天数x100%(在施危大工程应每天排查)",
				value: "60%",
				score: res.result.dangerEngScoreClz.pcfgl ? res.result.dangerEngScoreClz.pcfgl : 0,
				deduction: res.result.dangerEngScoreClz.pcfglkf ? res.result.dangerEngScoreClz.pcfglkf : 0
			},
			旁站记录更新: {
				name: "实际旁站记录次数/应完成旁站记录x100%(在施危大工程应每天旁站)",
				value: "40%",
				score: res.result.dangerEngScoreClz.pzjl ? res.result.dangerEngScoreClz.pzjl : 0,
				deduction: res.result.dangerEngScoreClz.pzjlkf ? res.result.dangerEngScoreClz.pzjlkf : 0
			}
		},
		风险管理: {
			风险排查执行率: {
				name: "有排查记录不同的风险/生成待办任务不同的风险x100%",
				value: "99%",
				score: res.result.riskScoreClz.fxpczxl ? res.result.riskScoreClz.fxpczxl : 0,
				deduction: res.result.riskScoreClz.fxpczxlkf ? res.result.riskScoreClz.fxpczxlkf : 0
			},
			风险辨识数量: {
				name: "排查和待办任务中至少识别3个不同的风险",
				value: "1%",
				score: res.result.riskScoreClz.fxbsull ? res.result.riskScoreClz.fxbsull : 0,
				deduction: res.result.riskScoreClz.fxbsullkf ? res.result.riskScoreClz.fxbsullkf : 0
			}
		},
		安全教育: {
			三级入场教育完成率: {
				name: "三级入场教育完成率=三级教育完成人数/所有在岗人数",
				value: "100%",
				score: res.result.eduModuleScore ? res.result.eduModuleScore : 0,
				deduction: res.result.eduModuleDeScore ? res.result.eduModuleDeScore : 0
			}
		}
	};
};

// 获取月度安全综合评分（十种）
const getScores = async () => {
	let requestData: any = {
		projectSn: store.sn,
		month: currentDate.value
	};
	const res: any = await getScoresApi(requestData);
	tableInfo.tableBody = res.result.safetyTypeScores;
	tableInfo.score = res.result.score;
	console.log(res);
};

onMounted(async () => {
	currentDate.value = moment(new Date()).format("YYYY-MM");
	getProjectInfo();
	getStatScoreFn();
	getScores();
	// 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) {
	// 			getMemberCountList("more");
	// 		}
	// 	}
	// });
});
</script>

<style lang="scss" scoped>
.tabbody {
	margin-top: 20px;
	table {
		width: 100%;
		height: 100%;
		font-size: 16px;
	}
	tr {
		height: 60px;
	}
	td {
		text-align: center;
	}
	th:not(:first-child) {
		cursor: pointer;
	}
	table,
	td,
	th {
		border: 1px solid #dbdbdb;
		border-collapse: collapse;
		color: white;
	}
}

@mixin flex {
	display: flex;
	align-items: center;
}

.political-outlook {
	height: 97%;
	margin: 0 20px;
	padding: 0 40px;
	// background-color: #fff;
	transform: translateY(40px) translateX(-13px);
	.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: 0px;
		}
		.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;
				justify-content: center;
				font-size: 16px;
				margin-top: 2%;
				text {
					font-size: 14px;
				}
			}
			.listBox {
				height: 73%;
				// background-color: #fff;
				.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>