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

<template>
	<Card title="按分包单位分析">
		<div class="rightHeader">
			<div class="day Selected" @click="getNowData">实时</div>
			<div class="year Selected" @click="getTodayData">今日</div>
		</div>
		<div id="echartsBottom" style="width: 100%; height: 100%"></div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } 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();

const labelimg = ref(new URL("@/assets/images/larborManagement/greenX.png", import.meta.url).href);
const labelimg2 = ref(new URL("@/assets/images/larborManagement/orangeX.png", import.meta.url).href);
let option = ref({
	grid: {
		left: "10%",
		top: "25%",
		right: "3%",
		bottom: "12%"
	},
	// "legend": {
	//     "data": [
	//         "信息",
	//         "往下场所",
	//         "关系",
	//         "关联",
	//         "人",
	//         "物",
	//         "组织"
	//     ],
	//     "top": "92%",
	//     "icon": "circle",
	//     "textStyle": {
	//         "color": "#0DCAD2"
	//     }
	// },
	color: ["#A3EAFF", "#ECD64F", "#00E4F0", "#44D16D"],
	tooltip: {
		position: "top"
	},
	xAxis: {
		data: ["XX有限公司", "XX有限公司", "XX有限公司", "XX有限公司"],
		triggerEvent: true,
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		},
		axisLabel: {
			width: 10,
			show: true,
			rotate: 0,
			interval: 2,
			textStyle: {
				// padding: [14, 0, 0, 0],
				fontSize: 12,
				color: "#fff"
			}
		}
	},
	yAxis: {
		name: "单位：人数",
		triggerEvent: true,
		nameTextStyle: {
			color: "#fff",
			fontSize: 12
			// padding: [0, 0, 10, -20]
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: "#14346c"
			}
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: "#14346c"
			}
		},
		axisLabel: {
			show: true,
			textStyle: {
				color: "#fff",
				fontSize: 12
			}
		}
	},
	series: [
		{
			type: "pictorialBar",
			data: [
				{
					label: {
						show: true,
						position: "top",
						formatter: function (params) {
							var index = params.dataIndex;
							var str = "{c|}";
							return str;
						},
						rich: {
							c: {
								fontSize: 18,
								color: "#fff",
								padding: [2, 0, 2, 0],
								backgroundColor: {
									image: labelimg
								},
								align: "center",
								// verticalAlign: "bottom",
								height: 25,
								lineHeight: 0,
								width: 25
							}
						}
					},
					itemStyle: {
						normal: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(199, 250, 242)"
									},
									{
										offset: 1,
										color: "rgba(76, 153, 154,0.5)"
									}
								],
								global: false
							}
						}
					}
				},
				{
					label: {
						show: true,
						position: "top",
						formatter: function (params) {
							var index = params.dataIndex;
							var str = "{c|}";
							return str;
						},
						rich: {
							c: {
								fontSize: 18,
								color: "#fff",
								padding: [-4, 0, 8, 0],
								backgroundColor: {
									image: labelimg
								},
								align: "center",
								// verticalAlign: "bottom",
								height: 25,
								lineHeight: 0,
								width: 25
							}
						}
					},
					itemStyle: {
						normal: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(199, 250, 242)"
									},
									{
										offset: 1,
										color: "rgba(76, 153, 154,0.5)"
									}
								],
								global: false
							}
						}
					}
				},
				{
					label: {
						show: true,
						position: "top",
						formatter: function (params) {
							var index = params.dataIndex;
							var str = "{c|}";
							return str;
						},
						rich: {
							c: {
								fontSize: 18,
								color: "#fff",
								padding: [-4, 0, 8, 0],
								backgroundColor: {
									image: labelimg
								},
								align: "center",
								// verticalAlign: "bottom",
								height: 25,
								lineHeight: 0,
								width: 25
							}
						}
					},
					itemStyle: {
						normal: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(199, 250, 242)"
									},
									{
										offset: 1,
										color: "rgba(76, 153, 154,0.5)"
									}
								],
								global: false
							}
						}
					}
				},
				{
					label: {
						show: true,
						formatter: function (params) {
							var index = params.dataIndex;
							var str = "{c|}";
							return str;
						},
						position: "top",
						rich: {
							c: {
								fontSize: 18,
								color: "#fff",
								padding: [-4, 0, 8, 0],
								backgroundColor: {
									image: labelimg
								},
								align: "center",
								// verticalAlign: "bottom",
								height: 25,
								lineHeight: 0,
								width: 25
							}
						}
					},
					itemStyle: {
						normal: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(199, 250, 242)"
									},
									{
										offset: 1,
										color: "rgba(76, 153, 154,0.5)"
									}
								],
								global: false
							}
						}
					}
				}
			],
			stack: "a",
			symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
		}
	]
});
function draw() {
	let echartsTest = echarts.init(document.getElementById("echartsBottom"));
	console.log("按分包单位分析绘图数据", option.value);
	echartsTest.setOption(option.value);
}
//获取按分包单位分析数据
// let timer = null

onMounted(async () => {
	await getProjectWorkerList();
	draw();
});

function getNowData() {
	yData.value = companyWorkTotalData.value.map((item: any) => item.presencePersonNum);
	option.value.series[0].data = option.value.series[0].data.map((item, index) => {
		return {
			...item,
			value: yData.value[index]
		};
	});
	draw();
	// option.value.xAxis.data = xData.value;
	// presencePersonNum
}
function getTodayData() {
	yData.value = companyWorkTotalData.value.map((item: any) => item.attendancePersonNum);
	option.value.series[0].data = option.value.series[0].data.map((item, index) => {
		return {
			...item,
			value: yData.value[index]
		};
	});
	draw();
	// option.value.xAxis.data = xData.value;
	// attendancePersonNum
}

let companyWorkTotalData = ref([] as any);
let xData = ref([] as any);
let yData = ref([] as any);
async function getProjectWorkerList() {
	let res = await getComapnyWorkTotalListApi({
		projectSn: store.sn
	});
	if (res.result) {
		res.result.forEach((item: any) => {
			// 只取有数据的工种
			if (item.totalPersonNum > 0) {
				companyWorkTotalData.value.push(item);
				xData.value.push(item.enterpriseName);
				yData.value.push(item.totalPersonNum);
			}
		});
		console.log("按分包单位分析数据", companyWorkTotalData.value);
		// console.log(option.value.series[0].data, `series_old`);
		option.value.series[0].data = option.value.series[0].data.map((item, index) => {
			return {
				...item,
				value: yData.value[index]
			};
		});
		option.value.xAxis.data = xData.value;
		// option.value.yAxis.data = yData;
		// 接口成功获取新值
		// optionData.value = getData(data);
		// 初始化option
		draw();
		console.log(option.value.series[0].data, `series`);
		// initOption();
	}
	// let res: any = await getComapnyWorkTotalListApi({
	// 	projectSn: store.sn
	// });
}
</script>

<style lang="scss" scoped>
.rightHeader {
	width: 20%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	left: 80%;
	top: 75.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%;
	}
	.Selected:hover {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
</style>