zhgdlarge/src/views/sevenLargeScreen/laborManagement/rightCenter.vue

<template>
	<Card title="部门管理人员出勤分析">
		<div class="box">
		<div class="num">{{ max }}</div>
		<div class="styleImg"></div>
		<div id="echartsRight" style="width: 100%; height: 100%"></div>
		<div class="rightHeader">
			<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">实时</div>
			<div class="year Selected" @click="getTodayData(2)" :class="checked == 2 ? 'active' : ''">今日</div>
		</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { getworkerAttendanceTrendApi } from "@/api/modules/labor";
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let checked = ref(1);
let totalData = ref([
	{
		name: "XX有限公司1",
		value: 12,
		radio: 0.13
	},
	{
		name: "XX有限公司2",
		value: 52,
		radio: 0.01
	},
	{
		name: "XX有限公司3",
		value: 15,
		radio: 3.9
	},
	{
		name: "XX有限公司4",
		value: 56,
		radio: 10.5
	},
	{
		name: "XX有限公司5",
		value: 17,
		radio: 0.4
	},
	{
		name: "XX有限公司6",
		value: 19,
		radio: 85.3
	}
]);
let trafficWay = ref([
	{
		name: "XX有限公司1",
		value: 12
	},
	{
		name: "XX有限公司2",
		value: 52
	},
	{
		name: "XX有限公司3",
		value: 15
	},
	{
		name: "XX有限公司4",
		value: 56
	},
	{
		name: "XX有限公司5",
		value: 17
	},
	{
		name: "XX有限公司6",
		value: 19
	}
]);
let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);

let option = ref({} as any);
let seriesOption = ref({} as any);
let data = ref([] as any);
let dataName = ref([] as any);

function _pie3() {
	let dataArr = [];
	for (var i = 0; i < 100; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#5A5DE0",
						borderWidth: 4,
						borderColor: "#87E0FB"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 20,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}
// //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
// function getCirlPoint(x0, y0, r, angle) {
// 	let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
// 	let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
// 	return {
// 		x: x1,
// 		y: y1
// 	};
// }

let max = ref(0 as Number);
let projectWorkerTypeData = ref(null as any);
//获取部门管理人员分析数据
// let timer = null
const getProjectWorkerList = async () => {
	const res: any = await getworkerAttendanceTrendApi({
		projectSn: store.sn,
		personType: 2
	});
	console.log("部门管理人员分析数据", res);
	let projectWorkerTypeOption: any = [];
	if (res.result) {
		res.result.projectCompanyWorkTotalList.forEach(item => {
			// 计算工人总和 在场——实时   出勤——今日
			max.value = item.presencePersonNum - 0 + max.value;
			dataName.value.push(item.enterpriseName);
			projectWorkerTypeOption.push({
				value: item.presencePersonNum,
				name: item.enterpriseName
			});
		});
		projectWorkerTypeData.value = res.result.projectCompanyWorkTotalList;
		// 接口成功获取新值
		totalData.value = projectWorkerTypeOption;
		trafficWay.value = projectWorkerTypeOption;
		// optionData.value = getData(data);
		// 初始化option
		initOption();
		console.log(totalData.value, "调用接口后绘图", data.value);
	}
	// 处理data
	for (let i = 0; i < trafficWay.value.length; i++) {
		data.value.push({
			value: trafficWay.value[i].value,
			name: trafficWay.value[i].name,
			itemStyle: {
				normal: {
					borderWidth: 0,
					shadowBlur: 2,
					borderColor: color.value[i],
					shadowColor: color.value[i]
				}
			}
		});
	}
};

function initOption() {
	console.log("data", data.value);

	seriesOption.value = [
		{
			name: "",
			type: "pie",
			center: ["26%", "52%"],
			clockWise: false,
			radius: [70, 60],
			hoverAnimation: false,
			itemStyle: {
				normal: {
					label: {
						show: false
					}
				}
			},
			data: data.value
		},
		{
			type: "pie",
			center: ["26%", "52%"],

			radius: [50, 50],
			zlevel: 2,
			silent: true,
			label: {
				normal: {
					show: false
				}
			},
			labelLine: {
				normal: {
					show: false
				}
			},
			data: _pie3()
		}
	];

	option.value = {
		// backgroundColor: "#0A2E5D",
		color: color,
		center: ["27%", "45%"],

		title: {
			text: "出勤总人数",
			top: "128",

			textAlign: "center",
			left: "25%",
			textStyle: {
				color: "#fff",
				fontSize: 14,
				fontWeight: "400"
			}
		},
		tooltip: {
			show: true
		},
		legend: {
			type: "scroll",
			show: true,
			icon: "rect",
			itemGap: 20,
			itemWidth: 15,
			itemHeight: 15,
			orient: "vertical",
			x: "right",
			data: dataName.value,
			top: 40,
			right: 400,
			left: 250,
			bottom: 30,
			align: "left",
			textStyle: {
				color: "#fff"
			},
			formatter: function (name) {
				// 根据name获取对应的数据值
				var dataValue = data.value.find(function (item) {
					return item.name === name;
				});
				if (dataValue) {
					return name + "   " + dataValue.value;
				} else {
					return name;
				}
			
			}
			
		},
		toolbox: {
			show: false
		},
		series: seriesOption.value
	};
}

function getNowData(type: any) {
	checked.value = type;
	let projectWorkerTypeOption: any = [];
	max.value = 0;
	projectWorkerTypeData.value.forEach(item => {
		if (item.presencePersonNum >= 0) {
			// 计算实时总和
			max.value = item.presencePersonNum - 0 + max.value;
			// 取
			projectWorkerTypeOption.push({
				value: item.presencePersonNum,
				name: item.typeName
			});
		}
	});
	console.log("部门管理出勤分析", projectWorkerTypeData);

	totalData.value = projectWorkerTypeOption;
	trafficWay.value = projectWorkerTypeOption;
	// optionData.value = getData(data);
	// 初始化option
	draw();
	// 处理data
	// data.value.length = 0;
	// for (let i = 0; i < trafficWay.value.length; i++) {
	// 	data.value.push({
	// 		value: trafficWay.value[i].value,
	// 		name: trafficWay.value[i].name,
	// 		itemStyle: {
	// 			normal: {
	// 				borderWidth: 0,
	// 				shadowBlur: 2,
	// 				borderColor: color.value[i],
	// 				shadowCgetNowDataolor: color.value[i]
	// 			}
	// 		}
	// 	});
	// }
}
function getTodayData(type: any) {
	checked.value = type;
	// console.log("部门管理出勤分析", projectWorkerTypeData);
	max.value = 0;
	let projectWorkerTypeOption: any = [];
	projectWorkerTypeData.value.forEach(item => {
		if (item.attendancePersonNum >= 0) {
			// 计算今日总和
			max.value = item.attendancePersonNum - 0 + max.value;
			// 取
			projectWorkerTypeOption.push({
				value: item.attendancePersonNum,
				name: item.typeName
			});
		}
	});
	totalData.value = projectWorkerTypeOption;
	trafficWay.value = projectWorkerTypeOption;
	// optionData.value = getData(data);
	// 初始化option
	draw();
	// 处理data
	// data.value.length = 0;
	// for (let i = 0; i < trafficWay.value.length; i++) {
	// 	data.value.push({
	// 		value: trafficWay.value[i].value,
	// 		name: trafficWay.value[i].name,
	// 		itemStyle: {
	// 			normal: {
	// 				borderWidth: 0,
	// 				shadowBlur: 2,
	// 				borderColor: color.value[i],
	// 				shadowColor: color.value[i]
	// 			}
	// 		}
	// 	});
	// }
}

onMounted(async () => {
	await getProjectWorkerList();
	draw();
});
onBeforeUnmount(() => {
	echarts.dispose;
});

// 图表绘制
function draw() {
	let chartDom = document.getElementById("echartsRight");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("echartsRight"));
	echartsTest.setOption(option.value);
	console.log("右中出勤绘图数据", option.value);
}
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	position: relative;
}
.num {
	width: 2%;
	font-family: sadigitalNumber;
	font-size: calc(100vw * 24 / 1920);
	color: #fff;
	position: absolute;
	top: 35%;
	left: 23%;
	z-index: 9;
	text-align: center;
}
.styleImg {
	left: 4%;
	top: 4%;
	width: 45%;
	position: absolute;
	height: 70%;
	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
	background-size: cover;
}

.rightHeader {
	width: 88%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	left: 16%;
	top: 5%;
	.Selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		width: 15%;
		margin-right: 5%;
		margin-left: 55%;
	}
	.year {
		width: 15%;
		margin-right: 8%;
	}
	.active {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
::v-deep .h-card .content {
	height: 85%;
}
</style>