对接右上按工种分析接口

src/api/modules/labor.ts

@@ -29,3 +29,13 @@ export const getEnterpriseInfoApi = (params: {}) => {
 export const getWorkerInfoApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/workerInfo/selectAllProjectTeamList`, params);
 };
+
+// 右中 获取部门管理人员出勤分析
+export const getworkerAttendanceTrendApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/workerAttendance/queryAttendanceOfEachCompany`, params);
+};
+
+// 查询右下 获取按分包单位分析
+export const getComapnyWorkTotalListApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/workerInfo/selectProjectComapnyWorkTotalList`, params);
+};

src/views/sevenLargeScreen/laborManagement/rightTop.vue

@@ -1,10 +1,10 @@
 <template>
 	<Card title="按工种分析">
 		<div class="rightHeader">
-			<div class="day Selected">实时</div>
+			<!-- <div class="day Selected">实时</div> -->
-			<div class="year Selected">今日</div>
+			<!-- <div class="year Selected">今日</div> -->
 		</div>
-		<div class="num">168</div>
+		<div class="num">{{max}}</div>
 		<div id="echartTop" style="width: 100%; height: 100%"></div>
 	</Card>
 </template>
@@ -20,12 +20,12 @@ const store = GlobalStore();
 let data = reactive(
 	[
 		{
-			value: 300,
+			value: 400,
-			name: "名字"
+			name: "名字1"
 		},
 		{
-			value: 500,
+			value: 1500,
-			name: "名字"
+			name: "名字2"
 		}
 	].sort(function (a, b) {
 		return b.value - a.value;
@@ -57,15 +57,14 @@ let data = reactive(
 // 		return b.value - a.value;
 // 	})
 // );
-let max = reactive(Math.max(...data.map(item => item.value)) + 1000);
 
-function array2obj(array, key) {
+// function array2obj(array, key) {
-	let resObj = {};
+// 	let resObj = {};
-	for (let i = 0; i < array.length; i++) {
+// 	for (let i = 0; i < array.length; i++) {
-		resObj[array[i][key]] = array[i];
+// 		resObj[array[i][key]] = array[i];
-	}
+// 	}
-	return resObj;
+// 	return resObj;
-}
+// }
 
 function getData(data) {
 	let res = {
@@ -81,14 +80,14 @@ function getData(data) {
 			radius: [87 - i * 10 + "%", 82 - i * 10 + "%"],
 			center: ["25%", "50%"],
 			label: {
-				show: false
+				show: true
 			},
 			itemStyle: {
 				label: {
-					show: false
+					show: true
 				},
 				labelLine: {
-					show: false
+					show: true
 				},
 				borderWidth: 10
 			},
@@ -98,7 +97,7 @@ function getData(data) {
 					name: data[i].name
 				},
 				{
-					value: max - data[i].value,
+					value: max.value,
 					name: "",
 					itemStyle: {
 						color: "rgba(9, 26, 61)",
@@ -114,14 +113,18 @@ function getData(data) {
 	}
 	return res;
 }
-let objData = reactive(array2obj(data, "name"));
+// let objData = array2obj(data, "name");
-let optionData = reactive(getData(data));
+let option = ref({} as any)
-const option = reactive({
+let optionData = ref(null as any);
+
+// 初始化option 绘制图表
+function initOption() {
+	option.value = {
 		legend: {
 			show: true,
-		itemGap: 15,
+			itemGap: 20,
-		itemWidth: 15,
+			itemWidth: 40,
-		itemHeight: 15,
+			itemHeight: 10,
 			icon: "rect",
 			orient: "horizontal",
 			// x: "right",
@@ -129,30 +132,11 @@ const option = reactive({
 			left: 260,
 			bottom: 10,
 			align: "left",
-		formatter: function (name) {
-			return "{title|" + name + "}{value|" + objData[name].value + "}";
-		},
 			textStyle: {
-			rich: {
+				color: "#EEEEEE"
-				title: {
-					width: 40,
-					color: "#fff",
-					padding: [0, 0, 0, 10]
-				},
-				value: {
-					color: "#fff",
-					padding: [0, 40]
-				}
-			}
 			}
 		},
-	color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", " #ec6266"],
+		color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", "#ec6266"],
-	// grid: {
-	// 	top: "0",
-	// 	left: "40%",
-	// 	right: "20%",
-	// 	containLabel: false
-	// },
 		yAxis: [
 			{
 				type: "category",
@@ -167,12 +151,12 @@ const option = reactive({
 					interval: 0,
 					inside: true,
 					textStyle: {
-					color: "#fff",
+						color: "#EEEEEE",
 						fontSize: 16
 					},
 					show: true
 				},
-			data: optionData.yAxis
+				data: optionData.value.yAxis
 			}
 		],
 		xAxis: [
@@ -180,35 +164,51 @@ const option = reactive({
 				show: false
 			}
 		],
-	series: optionData.series
+		series: optionData.value.series
-});
+	};
-
+}
+// 图表绘制
 function draw() {
 	let echartsTest = echarts.init(document.getElementById("echartTop"));
-	echartsTest.setOption(option);
+	echartsTest.setOption(option.value);
+	// console.log('绘图数据',option.value);
 }
+// 存储最大值
+let max = ref(0 as any)
+
 //获取工种分析数据
+// let timer = null
 const getProjectWorkerList = async () => {
-	const res = await selectProjectWorkerTypeTotalListApi({
+	const res: any = await selectProjectWorkerTypeTotalListApi({
 		projectSn: store.sn
 	});
 	console.log("获取工种分析数据", res);
-
+	let projectWorkerTypeOption: any = [];
 	if (res.result) {
 		res.result.forEach(item => {
-			data.push({
+			// 只取有数据的工种
-				value: item.typeName,
+			if (item.workerNum > 0) {
-				name: item.totalPersonNum
+				// 计算工人总和
-			});
+				max.value = max.value + item.workerNum;
+				projectWorkerTypeOption.push({
+					value: item.workerNum,
+					name: item.typeName
 				});
 			}
-	setTimeout(() => {
+		});
-		draw();
+		data = projectWorkerTypeOption;
-	}, 500);
+		optionData.value = getData(data);
+		// 初始化option
+		initOption();
+		// console.log(option.value,'调用接口后绘图')
+	}
+
 };
 
 onMounted(async () => {
-	getProjectWorkerList();
+	// console.log('挂载时',optionData)
+	await getProjectWorkerList();
+	draw();
 });
 </script>