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

<template>
	<div class="leftTop">
		<Card title="审批数据汇总">
			<div class="diy-title">（近七日）</div>
			<div class="box-content" v-show="showOne">
				<div id="echartsDataCountOne" style="width: 100%; height: 100%"></div>
			</div>
			<div class="box-content" v-show="!showOne">
				<div class="change-echart" @click="showOne = true">
					<el-icon color="#54B5E9" size="22"><ArrowLeft /></el-icon>
					<span>返回</span>
				</div>
				<div id="echartsDataCountTwo" style="width: 100%; height: 100%"></div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import { COMPANY } from "@/config/config";
import { ref, onMounted, nextTick, reactive } from "vue";
import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi";
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
import * as echarts from "echarts";
const store = GlobalStore();
// ts
type Props = {
	statisticsCount?: any; // 传入人员数据
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	statisticsCount: {}
});
const typeData = ref("");
const showOne = ref(true);
let dataList = ref([
	{
		enumType: "",
		value: 142,
		show: true,
		name: "人员",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#59F7CA"
		}
	},
	{
		enumType: "",
		value: 246,
		show: true,
		name: "车辆",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#62F2F8"
		}
	},
	{
		enumType: "",
		value: 315,
		show: true,
		name: "材料",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#F2BA48"
		}
	},
	{
		enumType: "",
		value: 420,
		show: true,
		name: "访客",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#81C4E5"
		}
	},
	{
		enumType: "",
		value: 263,
		show: true,
		name: "特殊作业",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#FDFDFC"
		}
	}
]);
const stateInfo = reactive({
	dataInfo: {
		passed: 0,
		rejected: 0,
		underApproval: 0
	},
	dataDetail: {
		num: 0,
		name: "待审批"
	}
});
// 审批数据汇总图形
const drawOneEchart = () => {
	const echartsOne = echarts.init(document.getElementById("echartsDataCountOne"));
	let option = {
		color: ["#26FFCB", "#24CBFF", "#2651FF"],
		tooltip: {
			trigger: "item"
		},
		series: [
			{
				// name: "Access From",
				type: "pie",
				top: "2%",
				radius: ["35%", "60%"],
				avoidLabelOverlap: false,
				minAngle: 35,
				label: {
					padding: [0, -50],
					lineHeight: 30,
					color: "#0FD4F1",
					show: true,
					// position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
					formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
					rich: {
						b: {
							fontFamily: "ABeeZee, ABeeZee",
							fontWeight: "400",
							fontSize: 15,
							color: "#FFFFFF"
						},
						c: {
							fontFamily: "ABeeZee, ABeeZee",
							fontWeight: "400",
							fontSize: 21,
							color: "#0FD4F1"
						}
					}
				},
				labelLine: {
					lineStyle: {
						color: "#3FBEFF"
					},
					show: true, // 是否显示标签线
					length: 30, // 标签线长度
					length2: 80 // 第二段标签线长度，默认为长度
				},
				data: [
					{ value: stateInfo.dataInfo.underApproval, name: "审批中" },
					{ value: stateInfo.dataInfo.rejected, name: "已驳回" },
					{ value: stateInfo.dataInfo.passed, name: "已通过" }
				]
			}
		]
	};
	echartsOne.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsOne);
		echartsOne.resize();
	});

	//图例点击事件
	// 为饼图添加点击事件
	echartsOne.on("click", function (params: any) {
		// 控制台输出点击的数据的信息
		console.log(params, 666);
		typeData.value = params.data;
		showOne.value = false;
		const obj = {
			审批中: "RUNNING",
			已驳回: "REFUSE",
			已通过: "PASS"
		} as any;
		nextTick(() => {
			getStatDetailByState(false, obj[params.name]);
		});
		// 您可以在这里添加您的逻辑代码
		// 例如：弹出自定义的对话框或者执行其他操作
	});
};
// 审批数据汇总图形
const drawTwoEchart = () => {
	const echartsOne = echarts.init(document.getElementById("echartsDataCountTwo"));
	let option = {
		color: ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"],
		animation: false, // 取消动画
		tooltip: {
			trigger: "item"
		},
		title: {
			text: stateInfo.dataDetail.num,
			subtext: stateInfo.dataDetail.name,
			x: "24%",
			y: "40%",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 20,
				fontWeight: "normal",
				// align: "center",
				fontFamily: "ABeeZee, ABeeZee"
			},
			subtextStyle: {
				color: "#9BB7D4",
				fontSize: 16,
				fontWeight: "normal",
				fontFamily: "ABeeZee, ABeeZee"
				// align: "center"
			}
		},
		legend: [
			{
				title: "风险图",
				selectedMode: true, // 取消图例上的点击事件
				icon: "circle",
				// type: "plain",
				orient: "vertical",
				type: "scroll", //legend要多，进行分页处理
				right: "3%",
				top: "20%",
				// bottom: "12%",
				align: "left",
				itemGap: 12,
				itemWidth: 30, // 设置宽度
				itemHeight: 9, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					width: 150,
					color: "#000",
					rich: {
						name: {
							align: "left",
							fontSize: 14,
							color: "#9BB7D4"
							// width: 60
						},
						value: {
							align: "left",
							fontSize: 16,
							color: "#9BB7D4"
						},
						value1: {
							align: "left",
							fontSize: 16,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map((item, index) => {
					if (item.show) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								if (data == "无") return;
								let value = dataList.value[i].value;
								let percentage = dataList.value[i].percentage + "%";
								const newData = data.length > 10 ? data.substr(0, 10) + "..." : data;
								return "{name| " + newData + "}  {gap|  }" + `{value|${value}} {gap|  } {value1|${percentage}}`;
							}
						}
					}
				}
			}
		],
		series: [
			// 外侧光线(数据只是用于占位)
			{
				name: "",
				type: "pie",
				radius: [100, 95],
				center: ["25%", "50%"],
				hoverAnimation: false,
				tooltip: {
					trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
				},
				itemStyle: {
					show: false,
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{
						enumType: "",
						value: 5,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 7,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#F6FCFD"
							}
						}
					},
					{
						enumType: "",
						value: 2,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 24,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#1FC1DB"
							}
						}
					},
					{
						enumType: "",
						value: 2,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 7,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#FFFFFF"
							}
						}
					},
					{
						enumType: "",
						value: 3,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 50,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#1FC1DB"
							}
						}
					}
				]
			},
			{
				name: "",
				type: "pie",
				radius: [60, 80],
				center: ["25%", "50%"],
				hoverAnimation: true,
				itemStyle: {
					borderWidth: 3,
					borderColor: "#000"
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList.value
			},
			{
				type: "pie",
				radius: ["52", "55"],
				center: ["25%", "50%"],
				label: {
					show: false
				},
				tooltip: {
					trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
				},
				data: [
					{
						value: 100,
						itemStyle: {
							color: {
								type: "linear",
								x: 1,
								y: 0.7,
								x2: 1,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(30,216,246,1)"
									},
									{
										offset: 1,
										color: "rgba(11,37,69,0)"
									}
								],
								global: false
							}
						}
					}
				]
			}
		]
	};
	echartsOne.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsOne);
		echartsOne.resize();
	});
};
// 获取审批数据汇总
const getStatByState = async (showLoading: boolean) => {
	const res: any = await getStatByStateApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("审批数据汇总", res);
		stateInfo.dataInfo = res.result;
	}
	drawOneEchart();
};
// 获取审批数据汇总详情
const getStatDetailByState = async (showLoading: boolean, state: string) => {
	const res: any = await getStatDetailByStateApi(
		{
			projectSn: store.sn,
			state: state
		},
		showLoading
	);
	if (res.result) {
		console.log("审批数据汇总详情", res);
		stateInfo.dataDetail = res.result[0];
		const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"];
		dataList.value = res.result
			.map((item: any, index: number) => {
				if (index == 0) return;
				return {
					enumType: "",
					percentage: item.ratio,
					value: item.num,
					show: true,
					name: item.name,
					greatFaultLevelNumJzrRate: "",
					rectificationNum: "",
					rectificationNumJzrRate: "",
					rectificationName: "",
					itemStyle: {
						color: colorList[index]
					}
				};
			})
			.filter((item: any) => item);
	}
	drawTwoEchart();
};
const setIntervalFn = (showLoading: boolean) => {
	getStatByState(showLoading);
};
onMounted(async () => {
	setIntervalFn(false);
	// 定时三十秒刷新
	setInterval(() => {
		setIntervalFn(true);
	}, 30000);
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.diy-title {
		position: absolute;
		top: 3.5%;
		left: 34%;
		font-family: OPPOSansH;
		font-size: 14px;
		color: #6b7b99;
		letter-spacing: 2px; /* 设置文字间距为2像素 */
	}
	.box-content {
		width: 100%;
		height: 100%;
		position: relative;
		.change-echart {
			display: flex;
			align-items: center;
			position: absolute;
			top: 3%;
			right: 2%;
			z-index: 10;
			cursor: pointer;
			> span {
				color: white;
				font-size: 16px;
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>