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

<template>
	<Card title="按分包单位分析">
		<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 id="echartsBottom" style="width: 100%; height: 100%"></div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getComapnyWorkTotalListApi } from "@/api/modules/labor";
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let checked = ref(1);
function draw(xData: any, yData: any) {
	let chartDom = document.getElementById("echartsBottom");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("echartsBottom"));
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
			},
			borderRadius: 5,
			// borderColor: "#6baab2",
			borderWidth: 5,
			formatter: function (params) {
				// params[0].data.nameCode
				let dot =
					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
				return params[0].name + "<br>" + params[0].value;
			}
		},
		grid: {
			left: "6%",
			right: "4%",
			bottom: "10%",
			top: "30%",
			containLabel: true
		},
		xAxis: {
			show: false,
			data: xData,
			triggerEvent: true,
			axisTick: {
				show: true,
				lineStyle: {
					color: "red"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				rotate: 0,
				interval: 0,
				textStyle: {
					padding: [0, 0, 0, 0],
					fontSize: 12,
					color: "#193c81"
				}
			}
		},
		yAxis: {
			name: "单位：人",
			triggerEvent: true,
			nameTextStyle: {
				color: "#fff",
				fontSize: 10,
				padding: [0, 0, 10, 0]
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			}
		},
		// color: ["#e54035"],
		series: [
			{
				name: "数量",
				barMinHeight: 10,
				type: "pictorialBar",
				barCategoryGap: "5%",
				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						//barBorderRadius: 5,
						//渐变色
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "#071b34"
							},
							{
								offset: 0.5,
								color: "#7bf0e1"
							},
							{
								offset: 1,
								color: "#3a787f"
							}
						])
					}
				},
				label: {
					normal: {
						show: true,
						position: "top",
						textStyle: {
							color: "#fff",
							fontSize: 12
						}
					}
				},
				data: yData,
				z: 10
			},
			{
				name: "hill",
				type: "bar",
				barWidth: "60%",
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						color: "rgba(11,47,68,.8)"
					}
				},
				// data: 200,
				z: 9
			}
		]
	};
	console.log("按分包单位分析绘图数据", option);
	echartsTest.setOption(option);
}
//切换实时
function getNowData(type: any) {
	checked.value = type;
	yData.value = companyWorkTotalData.value.map((item: any) => item.presencePersonNum);
	xData.value = companyWorkTotalData.value.map((item: any) => item.enterpriseName);

	draw(xData.value, yData.value);
}
//切换今日
function getTodayData(type: any) {
	checked.value = type;
	yData.value = companyWorkTotalData.value.map((item: any) => item.attendancePersonNum);
	xData.value = companyWorkTotalData.value.map((item: any) => item.enterpriseName);

	draw(xData.value, yData.value);
}

let companyWorkTotalData = ref([] as any);
let xData = ref([] as any);
let yData = ref([] as any);
async function getProjectWorkerList() {
	let res: any = await getComapnyWorkTotalListApi({
		projectSn: store.sn
	});
	if (res.result.length !== 0) {
		companyWorkTotalData.value = res.result;
		getNowData(1);
	} else {
		companyWorkTotalData.value = [];
		xData.value = [];
		yData.value = [];
		draw(xData.value, yData.value);
	}
}

async function getProjectWorkerList2() {
	let res:any = await getComapnyWorkTotalListApi({
		projectSn: store.sn
	});
	if (res.result.length !== 0) {
		if (res.result) {
			let emptyArr: any = [];
			xData.value = emptyArr;
			yData.value = emptyArr;
			companyWorkTotalData.value = res.result;
			getNowData(1);
		}
	} else {
		companyWorkTotalData.value = [];
		xData.value = [];
		yData.value = [];
		draw(xData.value, yData.value);
	}
}

//将方法暴露给父组件
defineExpose({
	getProjectWorkerList2
});
onMounted(async () => {
	await getProjectWorkerList();
});
</script>

<style lang="scss" scoped>
.rightHeader {
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	// width: 20%;
	// left: 80%;
	// top: 79%;
	width: 88%;
	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%;
	}
}
:deep() {
	.content {
		height: 75%;
		position: relative;
	}
}
</style>