From 0d94579acf444bd710b59bd42089cc82620985c3 Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Thu, 25 Jul 2024 15:48:10 +0800
Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E4=BF=AE=E6=94=B9=E7=99=BE?=
 =?UTF-8?q?=E8=89=B2=E5=A1=94=E5=90=8A=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../towerCraneMonitoring/leftCenter.vue       | 216 +++++++++---------
 1 file changed, 108 insertions(+), 108 deletions(-)

diff --git a/src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue b/src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue
index ffc9ea7..e5aa7a9 100644
--- a/src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue
+++ b/src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue
@@ -2,49 +2,48 @@
 	<Card title="群塔报警对比分析">
 		<div class="box">
 			<div class="num" v-if="towerAlarmData">{{ towerAlarmData.alarmNum }}</div>
-		<div class="rightHeader">
-			<div
-				class="day"
-				:class="airType == 1 ? 'active' : ''"
-				@click="
-					airType = 1;
-					getTowerNumAndAlarmList(1);
-				"
-			>
-				近7天
-			</div>
-			<div
-				class="year"
-				:class="airType == 2 ? 'active' : ''"
-				@click="
-					airType = 2;
-					getTowerNumAndAlarmList(2);
-				"
-			>
-				近30天
-			</div>
-			<div class="time">
-				<el-date-picker
-					v-model="rangeTime"
-					type="daterange"
-					range-separator="至"
-					start-placeholder="开始日期"
-					end-placeholder="结束日期"
-					value-format="YYYY-MM-DD"
-					:clearable="false"
-					@change="timeChange"
-				/>
+			<div class="rightHeader">
+				<div
+					class="day"
+					:class="airType == 1 ? 'active' : ''"
+					@click="
+						airType = 1;
+						getTowerNumAndAlarmList(1);
+					"
+				>
+					近7天
+				</div>
+				<div
+					class="year"
+					:class="airType == 2 ? 'active' : ''"
+					@click="
+						airType = 2;
+						getTowerNumAndAlarmList(2);
+					"
+				>
+					近30天
+				</div>
+				<div class="time">
+					<el-date-picker
+						v-model="rangeTime"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						value-format="YYYY-MM-DD"
+						:clearable="false"
+						@change="timeChange"
+					/>
+				</div>
 			</div>
+			<div class="styleImg"></div>
+			<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
 		</div>
-		<div class="styleImg"></div>
-		<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
-		</div>
-	
 	</Card>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
 import { getDistinguishedNumApi } from "@/api/modules/tower";
@@ -110,14 +109,13 @@ let totalData = ref([
 		value: 19
 	}
 ]);
-let data = ref([]);
+let data = ref([] as any[]);
 let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
 let seriesOption = ref([] as any);
 let option = ref([] as any);
 let rangeTime = ref("" as any);
 
 function initOption() {
-	
 	seriesOption.value = [
 		{
 			name: "",
@@ -163,7 +161,7 @@ function initOption() {
 
 		title: {
 			text: "报警总数",
-			top: "150",
+			top: "160",
 
 			textAlign: "center",
 			left: "24%",
@@ -177,7 +175,7 @@ function initOption() {
 			show: false
 		},
 		legend: {
-			type:'scroll',
+			type: "scroll",
 			show: true,
 			icon: "rect",
 			itemGap: 20,
@@ -186,26 +184,26 @@ function initOption() {
 			orient: "vertical",
 			x: "right",
 			formatter: function (name) {
-			let num;
-			for (let i = 0; i < totalData.value.length; i++) {
-				if (totalData.value[i].name === name) {
-					let cont = 9;
-					let stringArr = "  ";
-					// if (name.length == 4) {
-					// 	cont = 19;
-					// } else if (name.length == 5) {
-					// 	cont = 20;
-					// }
-					// for (let j = 0; j < cont; j++) {
-					// 	stringArr += "";
-					// }
-					num =name + stringArr + totalData.value[i].value;
+				let num;
+				for (let i = 0; i < totalData.value.length; i++) {
+					if (totalData.value[i].name === name) {
+						let cont = 9;
+						let stringArr = "  ";
+						// if (name.length == 4) {
+						// 	cont = 19;
+						// } else if (name.length == 5) {
+						// 	cont = 20;
+						// }
+						// for (let j = 0; j < cont; j++) {
+						// 	stringArr += "";
+						// }
+						num = name + stringArr + totalData.value[i].value;
+					}
 				}
-			}
-			return num;
-		},
+				return num;
+			},
 			data: dataName.value,
-			top:50,
+			top: 50,
 			right: 400,
 			left: 280,
 			bottom: 0,
@@ -253,43 +251,44 @@ function _pie3() {
 	return dataArr;
 }
 let dataName = ref([] as any);
+const echartsTest = ref(null as any);
 let towerAlarmData = ref(null as any);
 const getTowerNumAndAlarmList = async (type: any) => {
 	if (type == 1) {
 		//近七天
-		var currentDate = new Date();
-		var pastDate = new Date();
+		let currentDate = new Date();
+		let pastDate = new Date();
 		pastDate.setDate(pastDate.getDate() - 7);
-		var currentYear = currentDate.getFullYear();
-		var currentMonth = currentDate.getMonth() + 1;
-		var currentDay = currentDate.getDate();
-		var pastYear = pastDate.getFullYear();
-		var pastMonth = pastDate.getMonth() + 1;
-		var pastDay = pastDate.getDate();
+		let currentYear = currentDate.getFullYear();
+		let currentMonth = currentDate.getMonth() + 1;
+		let currentDay = currentDate.getDate();
+		let pastYear = pastDate.getFullYear();
+		let pastMonth = pastDate.getMonth() + 1;
+		let pastDay = pastDate.getDate();
 		currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
 		currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
 		pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
 		pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
-		var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
-		var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
+		let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
+		let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
 		rangeTime.value = [pastTimer, currentTimer];
 	} else if (type == 2) {
 		//近30天
-		var currentDate = new Date();
-		var pastDate = new Date();
+		let currentDate = new Date();
+		let pastDate = new Date();
 		pastDate.setDate(pastDate.getDate() - 30);
-		var currentYear = currentDate.getFullYear();
-		var currentMonth = currentDate.getMonth() + 1;
-		var currentDay = currentDate.getDate();
-		var pastYear = pastDate.getFullYear();
-		var pastMonth = pastDate.getMonth() + 1;
-		var pastDay = pastDate.getDate();
+		let currentYear = currentDate.getFullYear();
+		let currentMonth = currentDate.getMonth() + 1;
+		let currentDay = currentDate.getDate();
+		let pastYear = pastDate.getFullYear();
+		let pastMonth = pastDate.getMonth() + 1;
+		let pastDay = pastDate.getDate();
 		currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
 		currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
 		pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
 		pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
-		var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
-		var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
+		let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
+		let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
 		rangeTime.value = [pastTimer, currentTimer];
 	}
 	const res: any = await getDistinguishedNumApi({
@@ -300,7 +299,8 @@ const getTowerNumAndAlarmList = async (type: any) => {
 	if (res.result) {
 		console.log("群塔报警对比分析", res.result);
 		let projectWorkerTypeOption: any = [];
-		
+		data.value = [];
+
 		res.result.typeNumList.forEach(item => {
 			// 只取有数据的工种
 			towerAlarmData.value = res.result;
@@ -318,23 +318,24 @@ const getTowerNumAndAlarmList = async (type: any) => {
 
 		trafficWay.value = projectWorkerTypeOption;
 		totalData.value = projectWorkerTypeOption;
-		
-		draw();
-
-	}
-
-	for (let i = 0; i < totalData.value.length; i++) {
-		data.value.push({
-			value: totalData.value[i].value,
-			name: totalData.value[i].name,
-			itemStyle: {
-				normal: {
-					borderWidth: 0,
-					shadowBlur: 2,
-					borderColor: color.value[i],
-					shadowColor: color.value[i]
+		for (let i = 0; i < totalData.value.length; i++) {
+			data.value.push({
+				value: totalData.value[i].value,
+				name: totalData.value[i].name,
+				itemStyle: {
+					normal: {
+						borderWidth: 0,
+						shadowBlur: 2,
+						borderColor: color.value[i],
+						shadowColor: color.value[i]
+					}
 				}
-			}
+			});
+		}
+		// console.log(data.value)
+		echartsTest.value && echartsTest.value.clear();
+		nextTick(() => {
+			draw();
 		});
 	}
 };
@@ -346,14 +347,13 @@ function timeChange(e: any) {
 onMounted(async () => {
 	// initOption();
 	await getTowerNumAndAlarmList(1);
-	draw();
+	// draw();
 });
 
 function draw() {
 	console.log("塔吊左侧圆环图", option.value);
-	let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
-	echartsTest.setOption(option.value, true);
-	
+	echartsTest.value = echarts.init(document.getElementById("echartsLeftCenter"));
+	echartsTest.value.setOption(option.value, true);
 }
 
 onBeforeUnmount(() => {
@@ -362,7 +362,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-.box{
+.box {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -374,8 +374,8 @@ onBeforeUnmount(() => {
 	font-size: calc(100vw * 24 / 1920);
 	color: #fff;
 	position: absolute;
-	top: 45%;
-	left: 18%;
+	top: 50%;
+	left: 16.5%;
 	z-index: 9;
 }
 .styleImg {
@@ -427,11 +427,11 @@ onBeforeUnmount(() => {
 	}
 }
 .time {
-		position: absolute;
-		z-index: 999;
-		left: 37%;
-		margin-top: -18%;
-	}
+	position: absolute;
+	z-index: 999;
+	left: 37%;
+	margin-top: -18%;
+}
 ::v-deep .el-input__wrapper {
 	width: 85%;
 	height: 0%;