From 44138c463f5abd2f264141e5912b98b69b8be11a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com>
Date: Fri, 14 Jul 2023 17:44:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8A=B3=E5=8A=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8F=B3=E4=B8=8B=E8=A7=92=E4=BB=8A=E6=97=A5-?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../distributionMonitoring/bottomLeft.vue     |   2 +-
 .../distributionMonitoring/topCenter.vue      |  17 +-
 .../laborManagement/rightBottom.vue           | 692 +++++++++---------
 .../laborManagement/rightTop.vue              |  55 +-
 4 files changed, 375 insertions(+), 391 deletions(-)

diff --git a/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue b/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
index ee8ee03..a9bbeb3 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
@@ -267,7 +267,7 @@ function initOption() {
 
 function drawChart() {
 	initOption();
-	console.log("绘制前数据", yData.value)
+	console.log("绘制前数据", yData.value);
 	let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
 	EchartsTime.setOption(option.value);
 }
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
index 04dedcf..4c271db 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
@@ -63,7 +63,12 @@ import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
 import mitts from "@/utils/bus"; //兄弟组件传值
 // import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
-const store = GlobalStore();
+
+function selectChange(e: any) {
+	//发送设备编号
+	mitts.emit("devSn", e);
+}
+
 // 下拉框存放的value
 let devValue = ref(1 as any);
 let noiseList = ref([
@@ -76,18 +81,14 @@ let noiseList = ref([
 		label: "电箱2"
 	}
 ]);
-function selectChange(e: any) {
-	//发送设备编号
-	mitts.emit("devSn", e);
-}
-
+const store = GlobalStore();
 const getDevOption = async () => {
 	const res: any = await getDevListApi({
 		projectSn: store.sn
 	});
 	if (res.result) {
 		devValue.value = res.result[0].devSn;
-		noiseList.value = res.result.map(item => {
+		noiseList.value = res.result.map((item: any) => {
 			return {
 				value: item.devSn,
 				label: item.devName
@@ -98,7 +99,7 @@ const getDevOption = async () => {
 };
 
 // let devSn = ref("" as any);
-let realTimeData = ref(null as any)
+let realTimeData = ref(null as any);
 const getRealTimeList = async () => {
 	const res: any = await getRealTimeDataApi({
 		projectSn: store.sn,
diff --git a/src/views/sevenLargeScreen/laborManagement/rightBottom.vue b/src/views/sevenLargeScreen/laborManagement/rightBottom.vue
index e2e5158..c91a6e3 100644
--- a/src/views/sevenLargeScreen/laborManagement/rightBottom.vue
+++ b/src/views/sevenLargeScreen/laborManagement/rightBottom.vue
@@ -1,14 +1,14 @@
 <template>
 	<Card title="按分包单位分析">
 		<div class="rightHeader">
-			<div class="day Selected">实时</div>
-			<div class="year Selected">今日</div>
+			<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>
+<script lang="ts" setup>
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
 import { getComapnyWorkTotalListApi } from "@/api/modules/labor";
@@ -16,351 +16,365 @@ import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 
-export default {
-	components: {
-		Card
+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%"
 	},
-	setup() {
-		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: 0,
-					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: [
+	// "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",
+			name: "提示框值",
+			data: [
 				{
-					type: "pictorialBar",
-					name: "提示框值",
-					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;
 						},
-						{
-							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
 								},
-								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
-									}
-								}
+								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();
-		});
-
-		async function getProjectWorkerList() {
-			let res = await getComapnyWorkTotalListApi({
-				projectSn: store.sn
-			});
-			let xData = [];
-			let yData = [];
-			console.log("按分包单位分析数据", res);
-			if (res.result) {
-				res.result.forEach(item => {
-					// 只取有数据的工种
-					if (item.totalPersonNum > 0) {
-						xData.push(item.enterpriseName);
-						yData.push(item.totalPersonNum);
-						// 计算工人总和
-						// max.value = max.value + item.totalPersonNum;
-						// projectWorkerTypeOption.push({
-						// 	value: item.totalPersonNum,
-						// 	name: item.enterpriseName
-						// });
 					}
-				});
-				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[index]
-					};
-				});
-				option.value.xAxis.data = xData;
-				// 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
-			// });
+				},
+				{
+					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>
diff --git a/src/views/sevenLargeScreen/laborManagement/rightTop.vue b/src/views/sevenLargeScreen/laborManagement/rightTop.vue
index c714d05..41a25b3 100644
--- a/src/views/sevenLargeScreen/laborManagement/rightTop.vue
+++ b/src/views/sevenLargeScreen/laborManagement/rightTop.vue
@@ -1,10 +1,10 @@
 <template>
 	<Card title="按工种分析">
 		<div class="rightHeader">
-			<!-- <div class="day Selected">实时</div> -->
-			<!-- <div class="year Selected">今日</div> -->
+			<!-- <div class="day Selected" @click="getNowData">实时</div> -->
+			<!-- <div class="year Selected" @click="getTodayData">今日</div> -->
 		</div>
-		<div class="num">{{max}}</div>
+		<div class="num">{{ max }}</div>
 		<div id="echartTop" style="width: 100%; height: 100%"></div>
 	</Card>
 </template>
@@ -31,42 +31,8 @@ let data = reactive(
 		return b.value - a.value;
 	})
 );
-// let data = reactive(
-// 	[
-// 		{
-// 			name: "塔吊司机",
-// 			value: 1969
-// 		},
-// 		{
-// 			name: "架子工",
-// 			value: 1476
-// 		},
-// 		{
-// 			name: "电焊工",
-// 			value: 1500
-// 		},
-// 		{
-// 			name: "钢筋工",
-// 			value: 1476
-// 		},
-// 		{
-// 			name: "抹灰工",
-// 			value: 2997
-// 		}
-// 	].sort(function (a, b) {
-// 		return b.value - a.value;
-// 	})
-// );
 
-// function array2obj(array, key) {
-// 	let resObj = {};
-// 	for (let i = 0; i < array.length; i++) {
-// 		resObj[array[i][key]] = array[i];
-// 	}
-// 	return resObj;
-// }
-
-function getData(data) {
+function getData(data: any) {
 	let res = {
 		series: [],
 		yAxis: []
@@ -114,7 +80,7 @@ function getData(data) {
 	return res;
 }
 // let objData = array2obj(data, "name");
-let option = ref({} as any)
+let option = ref({} as any);
 let optionData = ref(null as any);
 
 // 初始化option 绘制图表
@@ -123,8 +89,8 @@ function initOption() {
 		legend: {
 			show: true,
 			itemGap: 20,
-			itemWidth: 40,
-			itemHeight: 10,
+			itemWidth: 15,
+			itemHeight: 15,
 			icon: "rect",
 			orient: "horizontal",
 			// x: "right",
@@ -174,8 +140,8 @@ function draw() {
 	// console.log('绘图数据',option.value);
 }
 // 存储最大值
-let max = ref(0 as any)
-
+let max = ref(0 as any);
+let projectWorkerTypeData = ref([] as any);
 //获取工种分析数据
 // let timer = null
 const getProjectWorkerList = async () => {
@@ -190,6 +156,9 @@ const getProjectWorkerList = async () => {
 			if (item.workerNum > 0) {
 				// 计算工人总和
 				max.value = max.value + item.workerNum;
+				// 所有数据
+				projectWorkerTypeData.value.push(item);
+				// 取
 				projectWorkerTypeOption.push({
 					value: item.workerNum,
 					name: item.typeName