zhgdlarge/src/views/commandScreen/commandCenter/leftBottom.vue

<template>
	<div class="leftBottom">
		<div class="header">
			<div class="hLeft">安全教育智能分析</div>
			<div class="hRight"></div>
		</div>
		<div class="content">
			<div class="contentTop">
				<div id="echartsEdu" style="width: 100%; height: 100%"></div>
			</div>
			<div class="centerBottom">
				<div class="leftTop">
					<div class="header">
						<div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
						<div class="hRight">
							<el-date-picker
								style="width: 85%"
								v-model="dateRange"
								type="daterange"
								value-format="YYYY-MM-DD"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="dateChange"
							/>
						</div>
					</div>
					<div class="content">
						<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
							<el-tab-pane :label="'整改人'" name="first"></el-tab-pane>
							<el-tab-pane :label="'检查人'" name="second"></el-tab-pane>
							<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
						</el-tabs>
						<div class="tabList">
							<div>排名</div>
							<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
							<div v-if="activeIndex === '2'">分包单位</div>
							<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
							<div v-if="activeIndex === '1'">发起隐患数</div>
							<div>整改率</div>
							<div>及时整改率</div>
						</div>
						<div class="listBox">
							<el-scrollbar height="150">
								<div v-for="(item, index) in tabList" :key="index" class="listStyle">
									<div>{{ index + 1 }}</div>
									<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.workerName }}</div>
									<div v-if="activeIndex === '2'" :title="item.enterpriseName">{{ item.enterpriseName }}</div>
									<div v-if="activeIndex === '0' || activeIndex === '2'">{{ item.rectifiedNum }}</div>
									<div v-if="activeIndex === '1'">{{ item.createDangerNum }}</div>
									<div>{{ item.rectifiedNumRatio }}</div>
									<div>{{ item.rectifiedNumRatioTimely }}</div>
								</div>
							</el-scrollbar>
							<div class="notoDta" v-if="tabList.length == 0">
								<img src="@/assets/images/noData.png" alt="" />
								<p>暂无数据</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
import type { TabsPaneContext, ElMessageBox } from "element-plus";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const emits = defineEmits(["openDialog"]);
const activeName = ref("first");
const activeIndex = ref("0" as any);
const dateRange = ref([]);
const tabList = ref([] as any);
const inspectTabList = ref([] as any);
let listData = ref([
	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" }
]);

let dataList2 = ref([
	{
		value: 0,
		show: true,
		name: "未教育人员",
		// 设置文本颜色
		// textStyle: {
		// 	color: '#038cf5'
		// },
		itemStyle: {
			normal: {
				color: "#038cf5",
				borderWidth: 20
			}
		}
	},
	{
		value: 0,
		show: true,
		name: "完成人员",
		// 设置文本颜色
		// textStyle: {
		// 	color: '#01d6f4'
		// }
		itemStyle: {
			normal: {
				color: "#01d6f4",
				borderWidth: 20
			}
		}
	},
	{
		value: 0,
		show: true,
		name: "现场人员",
		itemStyle: {
			normal: {
				color: "#03e9f6",
				borderWidth: 20
			}
		}
	}
]);
// 打开弹窗
const openDialogData = (obj: any) => {
	emits("openDialog", obj);
};
const dateChange = () => {
	if (activeIndex.value == "0") {
		getMemberJobStatusFn();
	} else if (activeIndex.value == "1") {
		getInspectManStatusFn();
	} else if (activeIndex.value == "2") {
		getEnterpriseStatusFn();
	}
}
//获取人员数据
const getPersonList = async () => {
	const res: any = await getPersonTypeAndEduStatisticsApi({
		projectSn: store.sn
	});
	if (res.result) {
		dataList2.value[1].value = res.result.personType.toaltPerson.totalPerson;
		dataList2.value[2].value = res.result.personType.toaltPerson.totalPerson;
		console.log("安全教育智能分析666", res);
		drawEchart2();
	}
};
// 获取人员履职情况分析数据--整改人
const getMemberJobStatusFn = async () => {
	let requestData: any = {
		projectSn: store.sn,
		pageSize: 5,
		pageNo: 1
	};
	if (dateRange.value && dateRange.value.length > 0) {
		requestData.inspectTime_begin = dateRange.value[0];
		requestData.inspectTime_end = dateRange.value[1];
	}
	const res: any = await getMemberJobStatusApi(requestData);
	console.log("人员履职情况res--整改人", res);
	if (res.result) {
		tabList.value = res.result.records;
	} else {
		tabList.value = [];
	}
};
// 获取人员履职情况分析数据--检查人
const getInspectManStatusFn = async () => {
	let requestData: any = {
		projectSn: store.sn,
		pageSize: 5,
		pageNo: 1
	};
	if (dateRange.value && dateRange.value.length > 0) {
		requestData.inspectTime_begin = dateRange.value[0];
		requestData.inspectTime_end = dateRange.value[1];
	}
	const res: any = await getInspectManStatusApi(requestData);
	console.log("人员履职情况res--检查人", res);
	if (res.result) {
		tabList.value = res.result.records;
	} else {
		tabList.value = [];
	}
};
// 获取人员履职情况分析数据--按分包单位分析
const getEnterpriseStatusFn = async () => {
	let requestData: any = {
		projectSn: store.sn,
		pageSize: 5,
		pageNo: 1
	};
	if (dateRange.value && dateRange.value.length > 0) {
		requestData.inspectTime_begin = dateRange.value[0];
		requestData.inspectTime_end = dateRange.value[1];
	}
	const res: any = await getEnterpriseStatusApi(requestData);
	console.log("人员履职情况res--按分包单位分析", res);
	if (res.result) {
		tabList.value = res.result.records;
	} else {
		tabList.value = [];
	}
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
	activeIndex.value = tab.index;
	console.log(tab);
	if (tab.index == "0") {
		getMemberJobStatusFn();
	} else if (tab.index == "1") {
		getInspectManStatusFn();
	} else if (tab.index == "2") {
		getEnterpriseStatusFn();
	}
	console.log("activeIndex", activeIndex.value);
};
function Pie() {
	let dataArr = [];
	for (var i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#7cf4f1",
						borderWidth: 0,
						borderColor: "#7f6546"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}

function drawEchart2() {
	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
	let option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			text: "100%",
			subtext: "入场三级教育\n完成率",
			x: "24%",
			y: "center",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 26,
				fontWeight: "normal"
				// align: "center",
				// width: "200px",
				// fontFamily: "sadigitalNumber"
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 12,
				fontWeight: "normal"
				// align: "center",
			}
		},
		legend: {
			selectedMode: false, // 取消图例上的点击事件
			icon: "rect",
			type: "plain",
			orient: "vertical",
			left: "55%",
			top: "28%",
			align: "left",
			itemGap: 30,
			itemWidth: 8, // 设置宽度
			itemHeight: 7, // 设置高度
			symbolKeepAspect: false,
			textStyle: {
				// color: "#000",
				rich: {
					name: {
						verticalAlign: "right",
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value1: {
						align: "left",
						fontSize: 14,
						color: "#FBDC00",
						fontFamily: "Source Han Sans CN, Source Han Sans CN",
						fontWeight: "bold"
					},
					value2: {
						align: "left",
						fontSize: 14,
						color: "#0DAF27",
						fontFamily: "Source Han Sans CN, Source Han Sans CN",
						fontWeight: "bold"
					},
					value3: {
						align: "left",
						fontSize: 14,
						color: "#047EFF",
						fontFamily: "Source Han Sans CN, Source Han Sans CN",
						fontWeight: "bold"
					}
				}
			},
			data: dataList2.value.map(item => {
				if (item.show) {
					return item.name;
				}
			}),
			formatter: function (data) {
				console.log(data, 666777);
				if (dataList2.value && dataList2.value.length) {
					for (var i = 0; i < dataList2.value.length; i++) {
						if (data === dataList2.value[i].name) {
							var value = dataList2.value[i].value;
							var percentage = value + "%";
							console.log(value, 888);
							if (data == "未教育人员") {
								return "{name| " + data + "}  {gap|       }" + "{value1|" + value + " " + "}";
							} else if (data == "完成人员") {
								return "{name| " + data + "}  {gap|       }" + "{value2|" + value + " " + "}";
							} else if (data == "现场人员") {
								return "{name| " + data + "}  {gap|       }" + "{value3|" + value + " " + "}";
							}
						}
					}
				}
			}
		},
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "90%",
				startAngle: 235,
				endAngle: -50,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								100 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "#526277"
									},
									{
										offset: 0.25,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 0.7,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 1,
										color: "#526277"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "80%",
				startAngle: 245,
				endAngle: -115,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								200 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0.8,
										color: "#52bef0"
									},
									{
										offset: 0.5,
										color: "#13356b"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "pie",
				radius: [65, 75],
				center: ["25%", "55%"],
				hoverAnimation: true,
				itemStyle: {
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList2.value
			},
			{
				type: "pie",
				radius: ["57", "60"],
				center: ["25%", "55%"],
				label: {
					show: false
				},

				data: Pie()
			}
		]
	};
	echartsTest.setOption(option, true);
	// window.addEventListener("resize", () => {
	// 	console.log(666)
	// 	echartsTest.resize();
	// })
}
onMounted(async () => {
	getMemberJobStatusFn();
	getPersonList();
});
</script>

<style lang="scss" scoped>
.leftBottom {
	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	background-size: 100% 100%;
	height: 100%;
	.header {
		display: flex;
		justify-content: space-between;
		padding: 20px 20px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #0059ff;
		// height: 10%;
		.hLeft {
			width: 50%;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
		.hRight {
			width: 50%;
		}
	}
	.content {
		height: 90%;
		// background-color: #fff;
		.contentTop {
			height: 40%;
		}
		.centerBottom {
			// width: 100%;
			height: 60%;
			// background-color: #fff;
			position: relative;
			.leftTop {
				width: 100%;
				height: 35%;
				.header {
					// width: 100%;
					// height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20px 20px;
					border-bottom: 1px solid #0059ff;
					.hLeft {
						width: 50%;
						font-size: 20px;
						font-weight: bold;
						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
					}
					.hRight {
						width: 50%;
					}
				}
				.content {
					padding: 0 20px;
					::v-deep .el-tabs__item {
						color: #fff;
					}
					::v-deep .el-tabs__nav-wrap::after {
						background-color: rgba(255, 0, 0, 0);
					}
					.tabList {
						display: flex;
						width: 100%;
						height: 30%;
						// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
						background-color: #00224f;
						background-size: 100% 100%;
						left: 75.5%;
						top: 75%;
						color: #fff;
						font-size: 14px;
						line-height: 30px;
						justify-content: space-around;
						text-align: center;

						div {
							width: 100px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.listBox {
						// height: 10%;
						.listStyle {
							display: flex;
							justify-content: space-around;
							color: #fff;
							height: 12%;
							line-height: 25px;
							font-size: 12px;
							text-align: center;
							div {
								width: 100px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						.listStyle:hover {
							background: #003c84;
						}
					}
					.notoDta {
						top: 52%;
						width: 45%;
						left: 28%;
						text-align: center;
						position: absolute;
						img {
							width: 40%;
							margin: 5% 30%;
						}
						p {
							color: #fff;
							font-size: 14px;
							margin: -6% 37%;
						}
					}
				}
			}
			::v-deep .el-input__inner {
				color: #fff;
			}
			::v-deep .el-select .el-input .el-select__caret {
				color: #fff;
			}
			::v-deep .el-input__wrapper {
				width: 85%;
				height: 0%;
				background: #0d2956;
			}
			::v-deep .el-range-separator {
				color: #ccc;
				font-size: 10px;
			}
			::v-deep .el-range-input {
				color: #ccc;
				font-size: 10px;
			}
			.dialogContainer {
				padding: 0 50px;
				// height: 600px;
				::v-deep .el-tabs__item {
					color: #fff;
				}
				::v-deep .el-tabs__nav-wrap::after {
					background-color: rgba(255, 0, 0, 0);
				}
				.tabList {
					display: flex;
					width: 100%;
					height: 14%;
					background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
					// background-color: #00224f;
					background-size: 100% 100%;
					left: 75.5%;
					top: 75%;
					color: #fff;
					font-size: 14px;
					line-height: 30px;
					justify-content: space-around;
					text-align: center;

					div {
						width: 100px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.listBox {
					// height: 10%;
					.listStyle {
						display: flex;
						justify-content: space-around;
						color: #fff;
						height: 12%;
						line-height: 25px;
						font-size: 12px;
						text-align: center;
						div {
							width: 100px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.listStyle:hover {
						background: #003c84;
					}
				}
				.notoDta {
					top: 40%;
					width: 30%;
					left: 35%;
					text-align: center;
					position: absolute;
					img {
						width: 40%;
						margin: 5% 30%;
					}
					p {
						color: #fff;
						font-size: 14px;
						margin: -6% 37%;
					}
				}
			}
			::v-deep .el-dialog {
				background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
				// background-color: #fff;
				background-size: 100% 100%;
				margin-top: 12%;
			}
			::v-deep .el-dialog__headerbtn {
				right: 35px;
				top: 25px;
			}
			::v-deep .el-dialog .el-dialog__header .el-dialog__title {
				margin-left: 30px;
				margin-top: 10px;
				font-size: 18px;
				color: #fff;
				position: absolute;
			}
			::v-deep el-dialog__header {
				margin-top: 20px;
			}
		}
	}
}
</style>