From 2e062b9a6c69068108575c2787a723e44679c749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com>
Date: Wed, 12 Jul 2023 16:46:53 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E6=8C=89=E5=B7=A5=E7=A7=8D=E5=88=86=E6=9E=90=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/labor.ts                      |  10 +
 .../laborManagement/rightTop.vue              | 196 +++++++++---------
 2 files changed, 108 insertions(+), 98 deletions(-)

diff --git a/src/api/modules/labor.ts b/src/api/modules/labor.ts
index 5430235..e4cfa8e 100644
--- a/src/api/modules/labor.ts
+++ b/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);
+};
diff --git a/src/views/sevenLargeScreen/laborManagement/rightTop.vue b/src/views/sevenLargeScreen/laborManagement/rightTop.vue
index 6d95c9c..12bf3e5 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">实时</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,
-			name: "名字"
+			value: 400,
+			name: "名字1"
 		},
 		{
-			value: 500,
-			name: "名字"
+			value: 1500,
+			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) {
-	let resObj = {};
-	for (let i = 0; i < array.length; i++) {
-		resObj[array[i][key]] = array[i];
-	}
-	return resObj;
-}
+// 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) {
 	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,101 +113,102 @@ function getData(data) {
 	}
 	return res;
 }
-let objData = reactive(array2obj(data, "name"));
-let optionData = reactive(getData(data));
-const option = reactive({
-	legend: {
-		show: true,
-		itemGap: 15,
-		itemWidth: 15,
-		itemHeight: 15,
-		icon: "rect",
-		orient: "horizontal",
-		// x: "right",
-		right: 300,
-		left: 260,
-		bottom: 10,
-		align: "left",
-		formatter: function (name) {
-			return "{title|" + name + "}{value|" + objData[name].value + "}";
-		},
-		textStyle: {
-			rich: {
-				title: {
-					width: 40,
-					color: "#fff",
-					padding: [0, 0, 0, 10]
-				},
-				value: {
-					color: "#fff",
-					padding: [0, 40]
-				}
-			}
-		}
-	},
-	color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", " #ec6266"],
-	// grid: {
-	// 	top: "0",
-	// 	left: "40%",
-	// 	right: "20%",
-	// 	containLabel: false
-	// },
-	yAxis: [
-		{
-			type: "category",
-			inverse: true,
-			axisLine: {
-				show: false
-			},
-			axisTick: {
-				show: false
-			},
-			axisLabel: {
-				interval: 0,
-				inside: true,
-				textStyle: {
-					color: "#fff",
-					fontSize: 16
-				},
-				show: true
-			},
-			data: optionData.yAxis
-		}
-	],
-	xAxis: [
-		{
-			show: false
-		}
-	],
-	series: optionData.series
-});
+// let objData = array2obj(data, "name");
+let option = ref({} as any)
+let optionData = ref(null as any);
 
+// 初始化option 绘制图表
+function initOption() {
+	option.value = {
+		legend: {
+			show: true,
+			itemGap: 20,
+			itemWidth: 40,
+			itemHeight: 10,
+			icon: "rect",
+			orient: "horizontal",
+			// x: "right",
+			right: 300,
+			left: 260,
+			bottom: 10,
+			align: "left",
+			textStyle: {
+				color: "#EEEEEE"
+			}
+		},
+		color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", "#ec6266"],
+		yAxis: [
+			{
+				type: "category",
+				inverse: true,
+				axisLine: {
+					show: false
+				},
+				axisTick: {
+					show: false
+				},
+				axisLabel: {
+					interval: 0,
+					inside: true,
+					textStyle: {
+						color: "#EEEEEE",
+						fontSize: 16
+					},
+					show: true
+				},
+				data: optionData.value.yAxis
+			}
+		],
+		xAxis: [
+			{
+				show: false
+			}
+		],
+		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,
-				name: item.totalPersonNum
-			});
+			// 只取有数据的工种
+			if (item.workerNum > 0) {
+				// 计算工人总和
+				max.value = max.value + item.workerNum;
+				projectWorkerTypeOption.push({
+					value: item.workerNum,
+					name: item.typeName
+				});
+			}
 		});
+		data = projectWorkerTypeOption;
+		optionData.value = getData(data);
+		// 初始化option
+		initOption();
+		// console.log(option.value,'调用接口后绘图')
 	}
-	setTimeout(() => {
-		draw();
-	}, 500);
+
 };
 
 onMounted(async () => {
-	getProjectWorkerList();
+	// console.log('挂载时',optionData)
+	await getProjectWorkerList();
+	draw();
 });
 </script>
 

From 31df8dcfd2b73fbd4d5cdd872e7f4d5ccf264ad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com>
Date: Thu, 13 Jul 2023 16:51:58 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8A=B3=E5=8A=A1?=
 =?UTF-8?q?=E7=8F=AD=E7=BB=84=E5=87=BA=E5=8B=A4=E5=88=86=E6=9E=90=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../laborManagement/horizontaL.vue            | 275 +++++++++---------
 1 file changed, 144 insertions(+), 131 deletions(-)

diff --git a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
index 619c88c..89f9a66 100644
--- a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
+++ b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
@@ -32,43 +32,22 @@ const form = ref({
 });
 let xData = ref([] as any);
 let yData = ref([] as any);
-const option = reactive({
-	grid: {
-		left: "5%",
-		right: "5%",
-		bottom: "3%",
-		top: "18%",
-		containLabel: true
-	},
-	// backgroundColor: "#101129",
-	xAxis: {
-		show: true,
-		type: "value",
-		max: 100,
-		axisLabel: {
-			show: true,
-			textStyle: {
-				fontSize: "12",
-				color: "#fff"
-			}
+let option = ref(null as any);
+
+function initOption() {
+	option.value = {
+		grid: {
+			left: "5%",
+			right: "5%",
+			bottom: "3%",
+			top: "18%",
+			containLabel: true
 		},
-		axisLine: {
+		// backgroundColor: "#101129",
+		xAxis: {
 			show: true,
-			lineStyle: {
-				color: "#14336b"
-			}
-		},
-		splitLine: {
-			show: false,
-			lineStyle: {
-				color: "#14336b"
-			}
-		}
-	},
-	yAxis: [
-		{
-			type: "category",
-			inverse: true,
+			type: "value",
+			max: 100,
 			axisLabel: {
 				show: true,
 				textStyle: {
@@ -76,113 +55,141 @@ const option = reactive({
 					color: "#fff"
 				}
 			},
-
-			axisTick: {
-				show: false
-			},
 			axisLine: {
+				show: true,
 				lineStyle: {
 					color: "#14336b"
 				}
 			},
-			data: yData.value
-		},
-		{
-			axisTick: "none",
-			axisLine: "none",
-			axisLabel: {
-				textStyle: {
-					color: "#fff",
-					fontSize: "12"
-				}
-			},
-			data: []
-		},
-		{
-			type: "category",
-			inverse: true,
-			axisTick: "none",
-			axisLine: "none",
-			show: true
-			// data: [],
-		}
-	],
-	series: [
-		{
-			type: "bar",
-			showBackground: true,
-			backgroundStyle: {
-				color: "#14346c",
-				borderRadius: 30
-			},
-			label: {
+			splitLine: {
 				show: false,
-				// position:'right',
-				// formatter:'{@score}%',
-				textStyle: {
-					color: "#03fcfe",
-					fontSize: "12"
+				lineStyle: {
+					color: "#14336b"
 				}
-			},
-			itemStyle: {
-				normal: {
-					barBorderRadius: 10,
-					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-						{
-							offset: 0,
-							color: "#1d465c"
-						},
-						{
-							offset: 1,
-							color: "#82FBEA"
-						}
-					])
-				}
-			},
-			barWidth: 3,
-			data: xData.value
+			}
 		},
-		{
-			name: "内圆",
-			type: "scatter",
-			stack: "圆",
-			yAxisIndex: 0,
-			data: xData.value, //小白点，数据静态
-			label: false,
-			symbolSize: 2,
-			itemStyle: {
-				normal: {
-					borderColor: "#fff",
-					borderWidth: 4,
-					color: "#fff",
-					opacity: 1
-				}
+		yAxis: [
+			{
+				type: "category",
+				inverse: true,
+				axisLabel: {
+					show: true,
+					textStyle: {
+						fontSize: "12",
+						color: "#fff"
+					}
+				},
+
+				axisTick: {
+					show: false
+				},
+				axisLine: {
+					lineStyle: {
+						color: "#14336b"
+					}
+				},
+				data: yData.value
 			},
-			z: 3
-		},
-		{
-			name: "内圆框",
-			type: "scatter",
-			stack: "圆",
-			yAxisIndex: 0,
-			data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
-			label: false,
-			symbolSize: 15,
-			itemStyle: {
-				normal: {
-					borderColor: "#82FBEA",
-					borderWidth: 2,
+			{
+				axisTick: "none",
+				axisLine: "none",
+				axisLabel: {
+					textStyle: {
+						color: "#fff",
+						fontSize: "12"
+					}
+				},
+				data: []
+			},
+			{
+				type: "category",
+				inverse: true,
+				axisTick: "none",
+				axisLine: "none",
+				show: true
+				// data: [],
+			}
+		],
+		series: [
+			{
+				type: "bar",
+				showBackground: true,
+				backgroundStyle: {
 					color: "#14346c",
-					opacity: 1
-				}
+					borderRadius: 30
+				},
+				label: {
+					show: false,
+					// position:'right',
+					// formatter:'{@score}%',
+					textStyle: {
+						color: "#03fcfe",
+						fontSize: "12"
+					}
+				},
+				itemStyle: {
+					normal: {
+						barBorderRadius: 10,
+						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+							{
+								offset: 0,
+								color: "#1d465c"
+							},
+							{
+								offset: 1,
+								color: "#82FBEA"
+							}
+						])
+					}
+				},
+				barWidth: 3,
+				data: xData.value
 			},
-			z: 2
-		}
-	]
-});
+			{
+				name: "内圆",
+				type: "scatter",
+				stack: "圆",
+				yAxisIndex: 0,
+				data: xData.value, //小白点，数据静态
+				label: false,
+				symbolSize: 2,
+				itemStyle: {
+					normal: {
+						borderColor: "#fff",
+						borderWidth: 4,
+						color: "#fff",
+						opacity: 1
+					}
+				},
+				z: 3
+			},
+			{
+				name: "内圆框",
+				type: "scatter",
+				stack: "圆",
+				yAxisIndex: 0,
+				data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
+				label: false,
+				symbolSize: 15,
+				itemStyle: {
+					normal: {
+						borderColor: "#82FBEA",
+						borderWidth: 2,
+						color: "#14346c",
+						opacity: 1
+					}
+				},
+				z: 2
+			}
+		]
+	};
+}
+// let horizontalEcharts: any = null;
 function horizontalChart() {
+	initOption();
 	let horizontalEcharts = echarts.init(document.getElementById("horizontalEcharts"));
-	horizontalEcharts.setOption(option);
+	console.log(option.value, "绘图数据");
+	horizontalEcharts.setOption(option.value);
 }
 // //选择日期
 // const onDatePicker = () => {
@@ -192,27 +199,33 @@ function horizontalChart() {
 // };
 //获取劳务班组人员数据
 const getList = async val => {
+	// 清数据
 	const res: any = await getWorkerInfoApi({
 		projectSn: store.sn,
 		enterpriseId: val
 		// queryStartTime: form.queryStartTime.value,
 		// queryEndTime: form.queryEndTime.value
 	});
-	if (res.result[0]) {
+	// console.log(res.result.length,'长度')
+	if (res.result.length != 0) {
 		for (let index = 0; index < res.result.length; index++) {
 			xData.value[index] = res.result[index].totalPersonNum;
 			yData.value[index] = res.result[index].teamName;
 		}
 	} else {
+		console.log("没有数据");
 		xData.value = [];
 		yData.value = [];
 	}
-	console.log("获取劳务班组人员数据2", res);
+	// console.log("获取劳务班组人员数据2", res);
 	horizontalChart();
 };
 onMounted(async () => {
 	mitts.on("enterpriseId", e => {
+		// horizontalEcharts = echarts.init(document.getElementById('chart-view'))
 		// 清数据
+		xData.value = [];
+		yData.value = [];
 		getList(e);
 	});
 });

From 4ac3dd47beb94c4d29300ec149734d4bf2afa8cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com>
Date: Thu, 13 Jul 2023 18:03:45 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=20=E4=B8=83=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E5=A4=A7=E5=B1=8F=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/video.ts                      |  11 ++
 .../videoManagement/videoList.vue             | 115 +++++++-----------
 2 files changed, 54 insertions(+), 72 deletions(-)
 create mode 100644 src/api/modules/video.ts

diff --git a/src/api/modules/video.ts b/src/api/modules/video.ts
new file mode 100644
index 0000000..4db9374
--- /dev/null
+++ b/src/api/modules/video.ts
@@ -0,0 +1,11 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 根据分组查询视频列表
+export const selectProjectVideoListApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/videoItem/selectProjectVideoList`, params);
+};
+// 查询子账号视频列表
+export const selectUserVideoListApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/videoItem/selectUserVideoList`, params);
+};
diff --git a/src/views/sevenLargeScreen/videoManagement/videoList.vue b/src/views/sevenLargeScreen/videoManagement/videoList.vue
index b108d31..ed5edd6 100644
--- a/src/views/sevenLargeScreen/videoManagement/videoList.vue
+++ b/src/views/sevenLargeScreen/videoManagement/videoList.vue
@@ -1,89 +1,60 @@
 <template>
 	<div class="videoListBig">
 		<div class="title"><i>监控设备列表</i></div>
-		<div class="content">
-			<div class="decivList">
-				<div class="menuDev" v-for="item in VideoData.VideoList" :class="item.status == 0 ? 'online' : 'offline'">
-					<div class="decName">
-						<span v-show="item.status == 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
-						<span v-show="item.status == 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
-						<span> {{ item.videoName }}</span>
+		<vue-scroll style="height: 500px;">
+			<div class="content">
+				<div class="decivList">
+					<div class="menuDev" v-for="item in videoList" :key="item.id" :class="item.deviceState == 1 ? 'online' : 'offline'">
+						<div class="decName">
+							<!-- <span v-show="item.deviceState == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span> -->
+							<!-- <span v-show="item.deviceState == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span> -->
+							<span style="white-space: nowrap"> {{ item.videoName }}</span>
+						</div>
+						<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
 					</div>
-					<div class="status">{{ item.status == 0 ? "在线" : "离线" }}</div>
 				</div>
 			</div>
-		</div>
+		</vue-scroll>
 	</div>
 </template>
 
-<script>
-import { reactive } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { GlobalStore } from "@/stores";
+// import { useRouter } from "vue-router";
+import { selectProjectVideoListApi, selectUserVideoListApi } from "@/api/modules/video";
+// const router = useRouter();
+const store = GlobalStore();
 
-export default {
-	setup() {
-		let VideoData = reactive({
-			VideoList: [
-				{
-					videoName: "东侧枪机",
-					status: 0
-				},
-				{
-					videoName: "南侧枪机",
-					status: 1
-				},
-				{
-					videoName: "西侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 1
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				},
-				{
-					videoName: "北侧枪机",
-					status: 0
-				}
-			]
-		});
-		return {
-			VideoData
-		};
-	}
-};
+let videoList = ref([] as any);
+
+function loadData() {
+	selectProjectVideoListApi({
+		projectSn: store.sn
+	}).then(res => {
+		videoList.value = res.result.videoList[0].list;
+		console.log("视频列表", res);
+	});
+}
+function loadData2() {
+	selectUserVideoListApi({
+		projectSn: store.sn
+		// userId: store.userId
+	}).then(res => {
+		console.log("子账号视频列表", res);
+	});
+}
+
+onMounted(async () => {
+	loadData();
+	loadData2();
+});
 </script>
 
 <style lang="scss" scoped>
 .videoListBig {
 	width: 100%;
-	height: 100%;
+	overflow: scroll;
 	.title {
 		height: 5%;
 		line-height: 35px;
@@ -98,7 +69,7 @@ export default {
 		}
 	}
 	.content {
-		height: 95%;
+		height: 800px;
 		width: 100%;
 		margin-top: 10px;
 		background: url("@/assets/images/cardImg.png") no-repeat;

From 1ff0303729b46e2aa362a2a521182f80e68e14df 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 11:18:53 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E9=85=8D=E7=94=B5?=
 =?UTF-8?q?=E7=AE=B1=E7=9B=91=E6=B5=8B=E5=A4=A7=E5=B1=8F=EF=BC=8C=E5=B7=A6?=
 =?UTF-8?q?=E4=B8=8A=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E6=8A=A5=E8=AD=A6=E5=88=97=E8=A1=A8=EF=BC=8C=E4=B8=AD?=
 =?UTF-8?q?=E9=97=B4=E9=85=8D=E7=94=B5=E7=AE=B1=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8E=A5=E5=8F=A3=EF=BC=8C=E8=AE=A1=E7=AE=97=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92=E5=AE=9E=E6=97=B6=E6=97=B6=E9=97=B4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/distribution.ts               |  27 +
 .../distributionMonitoring/topCenter.vue      |  62 +-
 .../distributionMonitoring/topLeft.vue        | 849 +++++++++---------
 .../distributionMonitoring/topRight.vue       |  88 +-
 src/views/sevenLargeScreen/indexL.vue         |  86 +-
 5 files changed, 581 insertions(+), 531 deletions(-)
 create mode 100644 src/api/modules/distribution.ts

diff --git a/src/api/modules/distribution.ts b/src/api/modules/distribution.ts
new file mode 100644
index 0000000..aca149b
--- /dev/null
+++ b/src/api/modules/distribution.ts
@@ -0,0 +1,27 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 配电箱设备统计
+export const getDevStatisticsApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/electricalDev/selectElectricalDevStatistics`, params);
+};
+// 获取设备--实时数据
+export const getRealTimeDataApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/electricalData/getRealTimeDustNoiseData`, params);
+};
+// 配电箱报警统计
+export const getBoxAlarmStatisticsApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/electricAlarm/selectElectricAlarmStatistics`, params);
+};
+//获取 配电箱24小时实时数据
+export const getSelectDataListApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/electricalData/selectElectricalDataList`, params);
+};
+//获取设备--下拉列表
+export const getDevListApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/electricalDev/list`, params);
+};
+
+// export const getDevListApi = data => post('xmgl/electricalDev/list', data); //获取设备--下拉列表
+// export const getAlarmInfoListApi = data => post('xmgl/electricAlarm/list', data); //获取设备--报警信息
+// export const getHistoryApi = data => post('xmgl/electricalData/selectElectricalDataPage', data); //获取 配电箱 历史数据
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
index 6162b19..8a04494 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
@@ -4,7 +4,7 @@
 
 		<div class="content">
 			<div class="selectRight">
-				<el-select v-model="value" class="m-2" placeholder="Select" size="small">
+				<el-select v-model="devValue" class="m-2" placeholder="Select" size="small">
 					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</div>
@@ -56,24 +56,54 @@
 	</div>
 </template>
 
-<script>
-import { ref } from "vue";
+<script lang="ts" setup>
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+// import * as echarts from "echarts";
+import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+// 下拉框存放的value
+let devValue = ref("" as any);
+let noiseList = ref([
+	{
+		value: 0,
+		label: "电箱2"
+	}
+]
+);
 
-export default {
-	setup() {
-		const value = ref("电箱1");
-		const noiseList = [
-			{
-				value: 0,
-				label: "电箱2"
-			}
-		];
-		return {
-			value,
-			noiseList
-		};
+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 => {
+			return {
+				value: item.devSn,
+				label: item.devName
+			};
+		});
+		console.log("电箱option", noiseList.value);
 	}
 };
+
+// let devSn = ref("" as any);
+const getRealTimeList = async () => {
+	const res: any = await getRealTimeDataApi({
+		projectSn: store.sn,
+		devSn: devValue.value
+	});
+	if (res.result) {
+		console.log("当前电箱实时数据", res.result);
+	}
+};
+
+onMounted(async () => {
+	await getDevOption();
+	await getRealTimeList();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue b/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
index f39aa45..487e5d7 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
@@ -9,21 +9,21 @@
 				<div class="deviceData">
 					<div class="onlineDev">
 						<div class="dev">在线设备</div>
-						<div class="num">12</div>
+						<div class="num">{{ deviceData.onlineNum }}</div>
 					</div>
 					<div class="lineDev">
 						<div class="dev">离线设备</div>
-						<div class="num">6</div>
+						<div class="num">{{ deviceData.offlineNum }}</div>
 					</div>
 				</div>
 				<div class="decivList">
-					<div class="menuDev" v-for="item in deciData.devicList" :class="item.status == 0 ? 'online' : 'offline'">
+					<div class="menuDev" v-for="item in deviceData.list" :key="item.id" :class="item.isClosed != 0 ? 'online' : 'offline'">
 						<div class="decName">
-							<span v-show="item.status == 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
-							<span v-show="item.status == 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
-							<span> {{ item.decName }}</span>
+							<span v-show="item.isClosed != 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
+							<span v-show="item.isClosed != 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
+							<span> {{ item.devName }}</span>
 						</div>
-						<div class="status">{{ item.status == 0 ? "在线" : "离线" }}</div>
+						<div class="status">{{ item.isClosed != 0 ? "在线" : "离线" }}</div>
 					</div>
 				</div>
 			</div>
@@ -31,434 +31,445 @@
 	</div>
 </template>
 
-<script>
-import { reactive, ref, onMounted } from "vue";
+<script lang="ts" setup>
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
-export default {
-	setup() {
-		const data = reactive({
-			name: "应用",
-			value: 66
-		});
-		const posCenter = reactive(["50%", "64%"]);
-		const option = reactive({
-			series: [
+import { getDevStatisticsApi } from "@/api/modules/distribution";
+import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+const data = ref({
+	name: "应用",
+	value: 66
+});
+const posCenter = reactive(["50%", "64%"]);
+const option = reactive({
+	series: [
+		{
+			// 外围刻度
+			type: "gauge",
+			radius: "100%",
+			center: posCenter,
+			splitNumber: 10,
+			min: 0,
+			max: 100,
+			startAngle: 180,
+			endAngle: 0,
+			axisLine: {
+				show: true,
+				lineStyle: {
+					width: 18,
+					shadowBlur: 0,
+					color: [
+						[
+							1,
+							new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "rgba(151, 12, 12, 1)"
+								},
+								{
+									offset: 0.2,
+									color: "rgba(137, 14, 161, 1)"
+								},
+								{
+									offset: 0.4,
+									color: "rgba(119, 24, 254, 1)"
+								},
+								{
+									offset: 0.5,
+									color: "rgba(254, 122, 24, 1)"
+								},
+								{
+									offset: 0.8,
+									color: "rgba(255, 187, 56, 1)"
+								},
+								{
+									offset: 1,
+									color: "rgba(101, 215, 249, 1)"
+								}
+							])
+						]
+					]
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			splitLine: {
+				show: false
+			},
+			axisLabel: {
+				show: true,
+				color: "#fff",
+				fontSize: 10,
+				distance: -40
+			},
+			pointer: {
+				show: 0
+			}
+		},
+		{
+			// 内侧指针、数值显示
+			name: "",
+			type: "gauge",
+			radius: "95%",
+			center: posCenter,
+			startAngle: 180,
+			endAngle: 0,
+			min: 0, //最小刻度
+			max: 100, //最大刻度
+			splitNumber: 20, //刻度数量
+			axisLine: {
+				show: false
+			},
+			axisLabel: {
+				show: false
+			}, //刻度标签。
+			axisTick: {
+				show: false
+			}, //刻度样式
+			splitLine: {
+				show: true,
+				length: 5,
+				lineStyle: {
+					color: "#87E0FB",
+					width: 1
+				}
+			},
+			detail: {
+				show: false
+			},
+			itemStyle: {
+				normal: {
+					color: "#fff"
+				}
+			},
+			data: [
 				{
-					// 外围刻度
-					type: "gauge",
-					radius: "100%",
-					center: posCenter,
-					splitNumber: 10,
-					min: 0,
-					max: 100,
-					startAngle: 180,
-					endAngle: 0,
-					axisLine: {
-						show: true,
-						lineStyle: {
-							width: 18,
-							shadowBlur: 0,
-							color: [
-								[
-									1,
-									new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 0,
-											color: "rgba(151, 12, 12, 1)"
-										},
-										{
-											offset: 0.2,
-											color: "rgba(137, 14, 161, 1)"
-										},
-										{
-											offset: 0.4,
-											color: "rgba(119, 24, 254, 1)"
-										},
-										{
-											offset: 0.5,
-											color: "rgba(254, 122, 24, 1)"
-										},
-										{
-											offset: 0.8,
-											color: "rgba(255, 187, 56, 1)"
-										},
-										{
-											offset: 1,
-											color: "rgba(101, 215, 249, 1)"
-										}
-									])
-								]
-							]
-						}
-					},
-					axisTick: {
-						show: false
-					},
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: true,
-						color: "#fff",
-						fontSize: 10,
-						distance: -40
-					},
-					pointer: {
-						show: 0
+					value: data.value.value
+				}
+			],
+			z: 9
+		},
+		// 第三个圆
+		{
+			type: "gauge",
+			radius: "70%",
+			center: posCenter,
+			splitNumber: 4,
+			min: 0,
+			max: 100,
+			startAngle: 180,
+			endAngle: 0,
+			axisLine: {
+				show: true,
+				lineStyle: {
+					width: 2,
+					shadowBlur: 0,
+					color: [
+						[
+							1,
+							new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "rgb(1,192,229)"
+								},
+								{
+									offset: 1,
+									color: "#87E0FB "
+								}
+							])
+						]
+					]
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			splitLine: {
+				show: false
+			},
+			axisLabel: {
+				show: false
+			},
+			pointer: {
+				show: 0
+			},
+			detail: {
+				show: 0
+			}
+		},
+		// 第二个圆
+		{
+			type: "gauge",
+			radius: "45%",
+			center: posCenter,
+			splitNumber: 4,
+			min: 0,
+			max: 100,
+			startAngle: 180,
+			endAngle: 0,
+			axisLine: {
+				show: true,
+				lineStyle: {
+					width: 2,
+					shadowBlur: 0,
+					color: [
+						[
+							1,
+							new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "rgb(1,192,229)"
+								},
+								{
+									offset: 1,
+									color: "#87E0FB "
+								}
+							])
+						]
+					]
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			splitLine: {
+				show: false
+			},
+			axisLabel: {
+				show: false
+			},
+			pointer: {
+				show: 0
+			},
+			detail: {
+				show: 0
+			}
+		},
+		// 第一个圆
+		{
+			type: "gauge",
+			radius: "25%",
+			center: posCenter,
+			splitNumber: 4,
+			min: 0,
+			max: 100,
+			startAngle: 180,
+			endAngle: 0,
+
+			axisLine: {
+				show: true,
+				lineStyle: {
+					width: 200,
+					shadowBlur: 0,
+					color: [
+						[
+							1,
+							new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 1,
+									color: "rgba(135, 224, 251, 0.2)"
+								},
+								{
+									offset: 0.2,
+									color: "rgba(135, 224, 251, 0.7)"
+								}
+							])
+						],
+						[1, "transparent"]
+					]
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			splitLine: {
+				show: false
+			},
+			axisLabel: {
+				show: false
+			},
+			pointer: {
+				show: 0
+			},
+			detail: {
+				show: 0
+			}
+		},
+		{
+			type: "gauge",
+			radius: "70%",
+			center: posCenter,
+			splitNumber: 0, //刻度数量
+			startAngle: 180,
+			endAngle: 0,
+
+			axisLine: {
+				show: true,
+				lineStyle: {
+					width: 26,
+					color: [
+						[
+							data.value.value / 100,
+							new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0.5,
+									color: "rgba(135, 224, 251, 1)"
+								},
+								{
+									offset: 1,
+									color: "#fff"
+								}
+							])
+						],
+						[1, "transparent"]
+					]
+				}
+			},
+			//分隔线样式。
+			splitLine: {
+				show: false
+			},
+			axisLabel: {
+				show: false
+			},
+			axisTick: {
+				show: false
+			},
+			pointer: {
+				show: false
+			},
+			title: {
+				show: false
+			},
+			//仪表盘详情，用于显示数据。
+			detail: {
+				show: false
+			},
+			data: [
+				{
+					value: data.value.value,
+					itemStyle: {
+						color: "red"
 					}
-				},
+				}
+			]
+		},
+		{
+			//指针外环
+			type: "pie",
+			hoverAnimation: false,
+			legendHoverLink: false,
+			center: posCenter,
+			radius: ["8%", "6%"],
+			// width:5,
+			z: 10,
+			label: {
+				normal: {
+					show: false
+				}
+			},
+			labelLine: {
+				normal: {
+					show: false
+				}
+			},
+			data: [
 				{
-					// 内侧指针、数值显示
-					name: "",
-					type: "gauge",
-					radius: "95%",
-					center: posCenter,
-					startAngle: 180,
-					endAngle: 0,
-					min: 0, //最小刻度
-					max: 100, //最大刻度
-					splitNumber: 20, //刻度数量
-					axisLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					}, //刻度标签。
-					axisTick: {
-						show: false
-					}, //刻度样式
-					splitLine: {
-						show: true,
-						length: 5,
-						lineStyle: {
-							color: "#87E0FB",
-							width: 1
-						}
-					},
-					detail: {
-						show: false
-					},
+					value: 100,
 					itemStyle: {
 						normal: {
-							color: "#fff"
+							color: "#87E0FB"
 						}
-					},
-					data: [
-						{
-							value: data.value
-						}
-					],
-					z: 9
-				},
-				// 第三个圆
-				{
-					type: "gauge",
-					radius: "70%",
-					center: posCenter,
-					splitNumber: 4,
-					min: 0,
-					max: 100,
-					startAngle: 180,
-					endAngle: 0,
-					axisLine: {
-						show: true,
-						lineStyle: {
-							width: 2,
-							shadowBlur: 0,
-							color: [
-								[
-									1,
-									new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 0,
-											color: "rgb(1,192,229)"
-										},
-										{
-											offset: 1,
-											color: "#87E0FB "
-										}
-									])
-								]
-							]
-						}
-					},
-					axisTick: {
-						show: false
-					},
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					},
-					pointer: {
-						show: 0
-					},
-					detail: {
-						show: 0
 					}
-				},
-				// 第二个圆
-				{
-					type: "gauge",
-					radius: "45%",
-					center: posCenter,
-					splitNumber: 4,
-					min: 0,
-					max: 100,
-					startAngle: 180,
-					endAngle: 0,
-					axisLine: {
-						show: true,
-						lineStyle: {
-							width: 2,
-							shadowBlur: 0,
-							color: [
-								[
-									1,
-									new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 0,
-											color: "rgb(1,192,229)"
-										},
-										{
-											offset: 1,
-											color: "#87E0FB "
-										}
-									])
-								]
-							]
-						}
-					},
-					axisTick: {
-						show: false
-					},
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					},
-					pointer: {
-						show: 0
-					},
-					detail: {
-						show: 0
-					}
-				},
-				// 第一个圆
-				{
-					type: "gauge",
-					radius: "25%",
-					center: posCenter,
-					splitNumber: 4,
-					min: 0,
-					max: 100,
-					startAngle: 180,
-					endAngle: 0,
-
-					axisLine: {
-						show: true,
-						lineStyle: {
-							width: 200,
-							shadowBlur: 0,
-							color: [
-								[
-									1,
-									new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 1,
-											color: "rgba(135, 224, 251, 0.2)"
-										},
-										{
-											offset: 0.2,
-											color: "rgba(135, 224, 251, 0.7)"
-										}
-									])
-								],
-								[1, "transparent"]
-							]
-						}
-					},
-					axisTick: {
-						show: false
-					},
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					},
-					pointer: {
-						show: 0
-					},
-					detail: {
-						show: 0
-					}
-				},
-				{
-					type: "gauge",
-					radius: "70%",
-					center: posCenter,
-					splitNumber: 0, //刻度数量
-					startAngle: 180,
-					endAngle: 0,
-
-					axisLine: {
-						show: true,
-						lineStyle: {
-							width: 26,
-							color: [
-								[
-									data.value / 100,
-									new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 0.5,
-											color: "rgba(135, 224, 251, 1)"
-										},
-										{
-											offset: 1,
-											color: "#fff"
-										}
-									])
-								],
-								[1, "transparent"]
-							]
-						}
-					},
-					//分隔线样式。
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					},
-					axisTick: {
-						show: false
-					},
-					pointer: {
-						show: false
-					},
-					title: {
-						show: false
-					},
-					//仪表盘详情，用于显示数据。
-					detail: {
-						show: false
-					},
-					data: [
-						{
-							value: data.value,
-							itemStyle: {
-								color: "red"
-							}
-						}
-					]
-				},
-				{
-					//指针外环
-					type: "pie",
-					hoverAnimation: false,
-					legendHoverLink: false,
-					center: posCenter,
-					radius: ["8%", "6%"],
-					// width:5,
-					z: 10,
-					label: {
-						normal: {
-							show: false
-						}
-					},
-					labelLine: {
-						normal: {
-							show: false
-						}
-					},
-					data: [
-						{
-							value: 100,
-							itemStyle: {
-								normal: {
-									color: "#87E0FB"
-								}
-							}
-						}
-					]
-				},
-				{
-					//指针内环
-					type: "pie",
-					hoverAnimation: false,
-					legendHoverLink: false,
-					center: posCenter,
-					radius: ["-2%", "4%"],
-					z: 10,
-
-					axisLine: {
-						show: true
-					},
-					label: {
-						normal: {
-							show: false
-						}
-					},
-					labelLine: {
-						normal: {
-							show: false
-						}
-					},
-
-					data: [
-						{
-							value: 100,
-							itemStyle: {
-								normal: {
-									color: "rgba(7, 31, 60) "
-								}
-							}
-						}
-					]
 				}
 			]
-		});
-		let deciData = reactive({
-			devicList: [
+		},
+		{
+			//指针内环
+			type: "pie",
+			hoverAnimation: false,
+			legendHoverLink: false,
+			center: posCenter,
+			radius: ["-2%", "4%"],
+			z: 10,
+
+			axisLine: {
+				show: true
+			},
+			label: {
+				normal: {
+					show: false
+				}
+			},
+			labelLine: {
+				normal: {
+					show: false
+				}
+			},
+
+			data: [
 				{
-					decName: "配电箱设备1",
-					status: 0
-				},
-				{
-					decName: "配电箱设备2",
-					status: 1
-				},
-				{
-					decName: "配电箱设备3",
-					status: 0
-				},
-				{
-					decName: "配电箱设备4",
-					status: 0
-				},
-				{
-					decName: "配电箱设备5",
-					status: 0
+					value: 100,
+					itemStyle: {
+						normal: {
+							color: "rgba(7, 31, 60) "
+						}
+					}
 				}
 			]
-		});
-		function drawChart() {
-			let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
-			leftTopEcharts.setOption(option);
 		}
-		onMounted(() => {
-			drawChart();
-		});
-		return {
-			deciData,
-			data,
-			posCenter
-		};
+	]
+});
+let deciData = reactive({
+	devicList: [
+		{
+			decName: "配电箱设备1",
+			status: 0
+		},
+		{
+			decName: "配电箱设备2",
+			status: 1
+		},
+		{
+			decName: "配电箱设备3",
+			status: 0
+		},
+		{
+			decName: "配电箱设备4",
+			status: 0
+		},
+		{
+			decName: "配电箱设备5",
+			status: 0
+		}
+	]
+});
+function drawChart() {
+	let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
+	leftTopEcharts.setOption(option);
+}
+// 配电箱设备统计
+let deviceData = ref({} as any)
+
+const getDevStatisticsList = async () => {
+	const res: any = await getDevStatisticsApi({
+		projectSn: store.sn
+	});
+	if (res.result) {
+		deviceData.value = res.result;
+		data.value.value = res.result.grade;
+		drawChart();
 	}
+	console.log("配电箱实时数据", res);
 };
+
+onMounted(() => {
+	getDevStatisticsList();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topRight.vue b/src/views/sevenLargeScreen/distributionMonitoring/topRight.vue
index 5b38e5d..aa0e1b5 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topRight.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topRight.vue
@@ -1,19 +1,19 @@
 <template>
-	<div class="topRightBox">
+	<div class="topRightBox" v-if="boxAlarmData">
 		<div class="title"><i>报警列表</i></div>
 		<div class="content">
 			<div class="titleData">
 				<div class="numPolice police">
 					<div class="numText">总报警次数</div>
-					<div class="num">307</div>
+					<div class="num">{{ boxAlarmData.alarmNum.totalAlarmNum }}</div>
 				</div>
 				<div class="monthPolice police2">
 					<div class="numText2">本月报警次数</div>
-					<div class="num2">102</div>
+					<div class="num2">{{ boxAlarmData.alarmNum.monthAlarmNum }}</div>
 				</div>
 				<div class="dayPolice police">
 					<div class="numText">今日报警次数</div>
-					<div class="num">34</div>
+					<div class="num">{{ boxAlarmData.alarmNum.dayAlarmNum }}</div>
 				</div>
 			</div>
 			<div class="tableBox">
@@ -23,10 +23,10 @@
 					<div class="tabThree">报警类型</div>
 				</div>
 				<div class="listBox" ref="scrollRef">
-					<div v-for="item in list" class="listStyle">
-						<div class="dev" style="margin-left: 5%">{{ item.dev }}</div>
-						<div class="time">{{ item.time }}</div>
-						<div class="type" style="margin-right: 5%">{{ item.type }}</div>
+					<div v-for="item in boxAlarmData.list" class="listStyle" :key="item.id">
+						<div class="dev" style="margin-left: 5%">{{ item.devName }}</div>
+						<div class="time">{{ item.creatTime }}</div>
+						<div class="type" style="margin-right: 5%">{{ item.alarmType }}</div>
 					</div>
 				</div>
 			</div>
@@ -34,61 +34,27 @@
 	</div>
 </template>
 
-<script>
-import { reactive, ref } from "vue";
-import Card from "@/components/card.vue";
-export default {
-	components: {
-		Card
-	},
-	setup() {
-		const list = reactive([
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			},
-			{
-				dev: "配电箱1",
-				time: "2023-01-01 12:00:00",
-				type: "室内水浸"
-			}
-		]);
-		return {
-			list
-		};
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+// import * as echarts from "echarts";
+import { getBoxAlarmStatisticsApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let boxAlarmData = ref(null as any);
+const getBoxAlarmList = async () => {
+	const res: any = await getBoxAlarmStatisticsApi({
+		projectSn: store.sn
+	});
+	if (res.result) {
+		boxAlarmData.value = res.result;
+		console.log("右中报警数据", res.result);
 	}
 };
+
+onMounted(async () => {
+	await getBoxAlarmList();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 3b6c85d..2fa7fab 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -5,7 +5,7 @@
 				<p>数字化项目监管平台</p>
 			</span>
 			<div class="rightIcon">
-				<div class="time">2023-04-16 09:22:12</div>
+				<div class="time">{{ nowTime }}</div>
 				<div class="Icon">
 					<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
 				</div>
@@ -45,45 +45,61 @@
 	</div>
 </template>
 
-<script>
-import { reactive, onMounted } from "vue";
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
+let nowTime = ref("2023-04-16 09:22:12" as any);
 
-export default {
-	setup() {
-		let menuData = reactive({
-			menuList: [
-				{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
-				{ moduleName: "劳务管理", modulePath: "/laborManagement" },
-				{ moduleName: "视频管理", modulePath: "/videoManagement" },
-				{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
-				{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
-				{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
-				{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
-				{ moduleName: "BIM模型", modulePath: "/bImModel" }
-			],
-			activeIndex: 0
-		});
-		const router = useRouter();
+let menuData = reactive({
+	menuList: [
+		{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
+		{ moduleName: "劳务管理", modulePath: "/laborManagement" },
+		{ moduleName: "视频管理", modulePath: "/videoManagement" },
+		{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
+		{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
+		{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
+		{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
+		{ moduleName: "BIM模型", modulePath: "/bImModel" }
+	],
+	activeIndex: 0
+});
+const router = useRouter();
 
-		const menuClick = (item, index) => {
-			menuData.activeIndex = index;
-			console.log("点击了tab", item);
-			if (item.modulePath.includes("/")) {
-				router.push(item.modulePath);
-			}
-		};
-		onMounted(() => {
-			console.log("进入页面， ");
-
-			menuClick(menuData.menuList[0], menuData.activeIndex);
-		});
-		return {
-			menuData,
-			menuClick
-		};
+const menuClick = (item, index) => {
+	menuData.activeIndex = index;
+	console.log("点击了tab", item);
+	if (item.modulePath.includes("/")) {
+		router.push(item.modulePath);
 	}
 };
+onMounted(() => {
+	console.log("进入页面， ");
+	menuClick(menuData.menuList[0], menuData.activeIndex);
+	getNowTime();
+});
+
+let timer = ref(null as any);
+onBeforeUnmount(() => {
+	clearInterval(timer);
+});
+
+function getNowTime() {
+	let speed = 1000;
+	let theNowTime = function () {
+		nowTime.value = timeNumber();
+	};
+	timer.value = setInterval(theNowTime, speed);
+}
+function timeNumber() {
+	let today = new Date();
+	let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
+	let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
+	return date + "  " + time;
+}
+function twoDigits(val: any) {
+	if (val < 10) return "0" + val;
+	return val;
+}
 </script>
 
 <style lang="scss" scoped>

From 3f0884ffbade933178afa12c1de6b98fbdf8df90 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 16:46:12 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E9=85=8D=E7=94=B5?=
 =?UTF-8?q?=E7=AE=B1=E7=9B=91=E6=B5=8B=E4=BA=94=E4=B8=AA=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E6=80=BB=E7=BA=BF=E7=9A=84=E4=BD=BF=E7=94=A8=EF=BC=8C?=
 =?UTF-8?q?=E9=81=BF=E5=85=8D=E5=86=85=E5=AD=98=E6=B5=AA=E8=B4=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/vehicle.ts                    |  11 +
 .../distributionMonitoring/bottomLeft.vue     | 479 +++++++++++-------
 .../distributionMonitoring/bottomRight.vue    |  66 ++-
 .../distributionMonitoring/topCenter.vue      |  40 +-
 .../distributionMonitoring/topLeft.vue        |  50 +-
 .../sevenLargeScreen/headNoise/leftBottom.vue |   6 +-
 .../laborManagement/horizontaL.vue            |   6 +-
 7 files changed, 383 insertions(+), 275 deletions(-)
 create mode 100644 src/api/modules/vehicle.ts

diff --git a/src/api/modules/vehicle.ts b/src/api/modules/vehicle.ts
new file mode 100644
index 0000000..3cfc2ed
--- /dev/null
+++ b/src/api/modules/vehicle.ts
@@ -0,0 +1,11 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 获取车辆通过信息
+export const getCarPassRecordApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/carPassRecord/list`, params);
+};
+// 获取出入场记录
+export const getEntryAndExitRecordsApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/carPassRecord/getEntryAndExitRecordsToday`, params);
+};
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue b/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
index 551aed6..ee8ee03 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
@@ -3,7 +3,7 @@
 		<div class="title"><i>近24小时数据</i></div>
 		<div class="content">
 			<div class="selectRight">
-				<el-select v-model="value" class="m-2" placeholder="Select" size="small">
+				<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
 					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</div>
@@ -12,215 +12,302 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
-import { onMounted, reactive, ref } from "vue";
-export default {
-	setup() {
-		const value = ref("电压");
-		const noiseList = [
-			{
-				value: 0,
-				label: "电压1"
-			}
-		];
-		const option = reactive({
-			// backgroundColor: '#071c3a',
-			title: {
-				// text: '日用气量分析',
-				textStyle: {
-					align: "center",
-					color: "#fff",
-					fontSize: 20
-				},
-				top: "2%",
-				left: "center"
+import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+let twenty_four_time = ref([] as any);
+// Y轴单位
+let unit = ref("单位:V" as any);
+// Y轴数据
+let yData = ref([] as any);
+// 图表数据项
+let option = ref(null as any);
+// 下拉框绑定值
+const value = ref("电压");
+const noiseList = [
+	{
+		value: 1,
+		label: "电压"
+	},
+	{
+		value: 2,
+		label: "电流"
+	},
+	{
+		value: 3,
+		label: "漏电流"
+	},
+	{
+		value: 4,
+		label: "线缆温度"
+	},
+	{
+		value: 5,
+		label: "环境温度"
+	}
+];
+// 下拉框选中
+function selectChange(e: any) {
+	console.log(e, "下拉框");
+	if (e == 1) {
+		console.log("电压");
+		unit.value = "单位:V";
+		yData.value = allHourData.value.map((item: any) => item.voltageA);
+	}
+	if (e == 2) {
+		console.log("电流");
+		unit.value = "单位:A";
+		yData.value = allHourData.value.map((item: any) => item.phaseCurrentA);
+	}
+	if (e == 3) {
+		console.log("漏电流");
+		unit.value = "单位:A";
+		yData.value = allHourData.value.map((item: any) => item.electricLeakage);
+	}
+	if (e == 4) {
+		console.log("线缆温度");
+		unit.value = "单位:℃";
+		yData.value = allHourData.value.map((item: any) => item.cableTemperatureA);
+	}
+	if (e == 5) {
+		console.log("环境温度");
+		unit.value = "单位:℃";
+		yData.value = allHourData.value.map((item: any) => item.ambientTemperature);
+	}
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		title: {
+			// text: '日用气量分析',
+			textStyle: {
+				align: "center",
+				color: "#fff",
+				fontSize: 20
 			},
-			//  legend: {
-			//     color: ["#17B4FA", "#47D8BE", "#F9A589"],
-			//     // data: ['日用气量分析'],
-			//     left: 'center',
-			//      top: "8%",
-			//      textStyle: {
-			//         color: "#ffffff"
-			//     }
-			// },
-			tooltip: {
-				trigger: "axis",
-				axisPointer: {
+			top: "2%",
+			left: "center"
+		},
+		//  legend: {
+		//     color: ["#17B4FA", "#47D8BE", "#F9A589"],
+		//     // data: ['日用气量分析'],
+		//     left: 'center',
+		//      top: "8%",
+		//      textStyle: {
+		//         color: "#ffffff"
+		//     }
+		// },
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			}
+		},
+		grid: {
+			top: "20%",
+			left: "5%",
+			right: "4%",
+			bottom: "12%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "category",
+				axisLine: {
+					show: true,
 					lineStyle: {
-						color: {
-							type: "linear",
-							x: 0,
-							y: 0,
-							x2: 0,
-							y2: 1,
-							colorStops: [
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff"
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false,
+				data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				type: "value",
+				name: unit.value,
+				nameTextStyle: {
+					color: "#fff",
+					nameLocation: "start"
+				},
+				min: 0,
+				// max: 140,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				name: "扬尘",
+				type: "line",
+				// smooth: true, //是否平滑
+				showAllSymbol: true,
+				// symbol: 'image://./static/images/guang-circle.png',
+				symbol: "circle",
+				smooth: 0.5,
+				symbolSize: 10,
+				lineStyle: {
+					normal: {
+						color: "#fff",
+						shadowBlur: 0
+					}
+				},
+				label: {
+					show: false,
+					position: "top",
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				itemStyle: {
+					color: "#4AC0F3",
+					borderColor: "#4AC0F3",
+					borderWidth: 5,
+					shadowColor: "rgba(0, 0, 0, .6)",
+					shadowBlur: 0
+				},
+				tooltip: {
+					show: true
+				},
+				areaStyle: {
+					normal: {
+						color: new echarts.graphic.LinearGradient(
+							0,
+							0,
+							0,
+							1,
+							[
 								{
 									offset: 0,
-									color: "rgba(0, 255, 233,0)"
-								},
-								{
-									offset: 0.5,
-									color: "rgba(255, 255, 255,1)"
+									color: "rgba(74, 192, 243,0.5)"
 								},
 								{
 									offset: 1,
-									color: "rgba(0, 255, 233,0)"
+									color: "rgba(74, 192, 243, 0.1)"
 								}
 							],
-							global: false
-						}
+							false
+						),
+						shadowColor: "rgba(74, 192, 243, 1)",
+						shadowBlur: 20
 					}
-				}
-			},
-			grid: {
-				top: "20%",
-				left: "5%",
-				right: "4%",
-				bottom: "12%"
-				// containLabel: true
-			},
-			xAxis: [
-				{
-					type: "category",
-					axisLine: {
-						show: true,
-						lineStyle: {
-							color: "#14346C"
-						}
-					},
-					splitArea: {
-						// show: true,
-						color: "#f00",
-						lineStyle: {
-							color: "#f00"
-						}
-					},
-					axisLabel: {
-						color: "#fff"
-					},
-					splitLine: {
-						show: false
-					},
-					boundaryGap: false,
-					data: ["8：00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"]
-				}
-			],
+				},
+				data: yData.value
+			}
+		]
+	};
+}
 
-			yAxis: [
-				{
-					type: "value",
-					name: "单位:V",
-					nameTextStyle: {
-						color: "#fff",
-						nameLocation: "start"
-					},
-					min: 0,
-					// max: 140,
-					splitNumber: 3,
-					splitLine: {
-						show: true,
-						lineStyle: {
-							color: "#14346C"
-						}
-					},
-					axisLine: {
-						show: true,
-						lineStyle: {
-							color: "#14346C"
-						}
-					},
-					axisLabel: {
-						show: true,
-						margin: 20,
-						textStyle: {
-							color: "#fff"
-						}
-					},
-					axisTick: {
-						show: true
-					}
-				}
-			],
-			series: [
-				{
-					name: "扬尘",
-					type: "line",
-					// smooth: true, //是否平滑
-					showAllSymbol: true,
-					// symbol: 'image://./static/images/guang-circle.png',
-					symbol: "circle",
-					smooth: 0.5,
-					symbolSize: 10,
-					lineStyle: {
-						normal: {
-							color: "#fff",
-							shadowBlur: 0
-						}
-					},
-					label: {
-						show: false,
-						position: "top",
-						textStyle: {
-							color: "#fff"
-						}
-					},
-					itemStyle: {
-						color: "#4AC0F3",
-						borderColor: "#4AC0F3",
-						borderWidth: 5,
-						shadowColor: "rgba(0, 0, 0, .6)",
-						shadowBlur: 0
-					},
-					lineStyle: {
-						normal: {
-							width: 1
-						}
-					},
-					tooltip: {
-						show: true
-					},
-					areaStyle: {
-						normal: {
-							color: new echarts.graphic.LinearGradient(
-								0,
-								0,
-								0,
-								1,
-								[
-									{
-										offset: 0,
-										color: "rgba(74, 192, 243,0.5)"
-									},
-									{
-										offset: 1,
-										color: "rgba(74, 192, 243, 0.1)"
-									}
-								],
-								false
-							),
-							shadowColor: "rgba(74, 192, 243, 1)",
-							shadowBlur: 20
-						}
-					},
-					data: [502.84, 205.97, 332.79, 281.55, 598.35, 214.02, 101.5, 215.5, 602.5, 406.5, 412, 305.6]
-				}
-			]
-		});
-		function drawChart() {
-			let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
-			EchartsTime.setOption(option);
-		}
-		onMounted(async () => {
-			drawChart();
-		});
-		return {
-			value,
-			noiseList
-		};
+function drawChart() {
+	initOption();
+	console.log("绘制前数据", yData.value)
+	let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
+	EchartsTime.setOption(option.value);
+}
+
+//获取当前时间-24小时
+function generateTimes() {
+	let timeArrays = new Array(24).fill("");
+	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
+	return timeArrays;
+}
+let allHourData = ref([] as any);
+let devSn = ref(1 as any);
+const getSelectDataList = async () => {
+	const res: any = await getSelectDataListApi({
+		devSn: devSn.value,
+		projectSn: store.sn
+	});
+	if (res.result) {
+		allHourData.value = res.result.slice(0, 24);
+		yData.value = allHourData.value.map((item: any) => item.voltageA);
+		drawChart();
+		// console.log("24小时实时数据", allHourData.value);
 	}
 };
+
+onMounted(async () => {
+	mitts.on("devSn", e => {
+		console.log("24小时数据对应的devSn");
+		devSn.value = e;
+		getSelectDataList();
+	});
+	twenty_four_time.value = generateTimes();
+	// console.log(twenty_four_time.value, "小时制");
+	getSelectDataList();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue b/src/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue
index 0440b74..d9ce6bb 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue
@@ -2,49 +2,40 @@
 	<div class="bottomRightBox">
 		<div class="title"><i>设备监控台</i></div>
 		<div class="content">
-			<div class="equipmentMonitoring" v-for="item in deciData.devicList">
-				<div class="equipmentList" :class="item.status == 0 ? 'online' : 'offline'">
-					<p>{{ item.status == 0 ? "在线" : "离线" }}</p>
-					<p class="bottomText">{{ item.decName }}</p>
+			<div class="equipmentMonitoring" v-for="item in deviceData.list" :key="item.id">
+				<div class="equipmentList" :class="item.isClosed != 0 ? 'online' : 'offline'">
+					<p>{{ item.isClosed != 0 ? "在线" : "离线" }}</p>
+					<p class="bottomText">{{ item.devName }}</p>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-import { reactive } from "vue";
-export default {
-	setup() {
-		let deciData = reactive({
-			devicList: [
-				{
-					decName: "A号电箱",
-					status: 0
-				},
-				{
-					decName: "B号电箱",
-					status: 1
-				},
-				{
-					decName: "C号电箱",
-					status: 0
-				},
-				{
-					decName: "D号电箱",
-					status: 0
-				},
-				{
-					decName: "E号电箱",
-					status: 0
-				}
-			]
-		});
-		return {
-			deciData
-		};
+<script lang="ts" setup>
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+// import * as echarts from "echarts";
+import { getDevStatisticsApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+// 配电箱设备统计
+let deviceData = ref({} as any);
+
+const getDevStatisticsList = async () => {
+	const res: any = await getDevStatisticsApi({
+		projectSn: store.sn
+	});
+	if (res.result) {
+		deviceData.value = res.result;
 	}
+	console.log("配电箱实时数据", res);
 };
+
+onMounted(() => {
+	getDevStatisticsList();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -74,10 +65,11 @@ export default {
 			width: 100%;
 			height: 100%;
 			display: flex !important;
+			justify-content: center;
+			align-items: center;
 			.equipmentList {
-				width: 85%;
+				width: 160px;
 				height: 50%;
-				margin: 30% 5%;
 				text-align: center;
 				p {
 					font-size: calc(100vw * 20 / 1920);
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
index 8a04494..b23a095 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class="topCenterBox">
+	<div class="topCenterBox" v-if="realTimeData">
 		<div class="title"><i>配电箱实时数据</i></div>
 
 		<div class="content">
 			<div class="selectRight">
-				<el-select v-model="devValue" class="m-2" placeholder="Select" size="small">
+				<el-select v-model="devValue" class="m-2" placeholder="Select" size="small" @change="selectChange">
 					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</div>
@@ -14,35 +14,35 @@
 				</div>
 				<div class="menListWd menu">
 					<span class="text">环境温度</span>
-					<p class="textColor2">26℃</p>
+					<p class="textColor2">{{ realTimeData.ambientTemperature || 0 }}℃</p>
 				</div>
 				<div class="menListXl menu">
 					<span class="text">A箱电压</span>
-					<p class="textColor1">220V</p>
+					<p class="textColor1">{{ realTimeData.voltageA || 0 }}V</p>
 				</div>
 				<div class="menListDl menu">
 					<span class="text">A箱线缆温度</span>
-					<p class="textColor2">26℃</p>
+					<p class="textColor2">{{ realTimeData.cableTemperatureA || 0 }}℃</p>
 				</div>
 				<div class="menListLdl menu">
 					<span class="text">A箱电流</span>
-					<p class="textColor3">2kA</p>
+					<p class="textColor3">{{ realTimeData.phaseCurrentA || 0 }}kA</p>
 				</div>
 				<div class="menListBdl menu">
 					<span class="text">漏电流</span>
-					<p class="textColor3">2mA</p>
+					<p class="textColor3">{{ realTimeData.electricLeakage || 0 }}mA</p>
 				</div>
 				<div class="menListBxl menu">
 					<span class="text">B箱电流</span>
-					<p class="textColor3">26kA</p>
+					<p class="textColor3">{{ realTimeData.phaseCurrentB || 0 }}kA</p>
 				</div>
 				<div class="menListBwd menu">
 					<span class="text">B箱线缆温度</span>
-					<p class="textColor2">26℃</p>
+					<p class="textColor2">{{ realTimeData.cableTemperatureB || 0 }}℃</p>
 				</div>
 				<div class="menListBdy menu">
 					<span class="text">B箱电压</span>
-					<p class="textColor1">220V</p>
+					<p class="textColor1">{{ realTimeData.voltageB || 0 }}V</p>
 				</div>
 				<!-- <div class="menListDy menu"><span>A箱电压</span><span class="textColor">220V</span></div>
 				<div class="menListXl menu"><span>A箱线缆温度</span><span class="textColor">26℃</span></div>
@@ -60,18 +60,26 @@
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 // import * as echarts from "echarts";
 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();
 // 下拉框存放的value
-let devValue = ref("" as any);
+let devValue = ref(1 as any);
 let noiseList = ref([
 	{
-		value: 0,
+		value: 1,
+		label: "电箱1"
+	},
+	{
+		value: 10051,
 		label: "电箱2"
 	}
-]
-);
+]);
+function selectChange(e: any) {
+	//发送设备编号
+	mitts.emit("devSn", e);
+}
 
 const getDevOption = async () => {
 	const res: any = await getDevListApi({
@@ -90,18 +98,20 @@ const getDevOption = async () => {
 };
 
 // let devSn = ref("" as any);
+let realTimeData = ref(null as any)
 const getRealTimeList = async () => {
 	const res: any = await getRealTimeDataApi({
 		projectSn: store.sn,
 		devSn: devValue.value
 	});
 	if (res.result) {
+		realTimeData.value = res.result;
 		console.log("当前电箱实时数据", res.result);
 	}
 };
 
 onMounted(async () => {
-	await getDevOption();
+	// await getDevOption();
 	await getRealTimeList();
 });
 </script>
diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue b/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
index 487e5d7..d80428a 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue
@@ -424,36 +424,36 @@ const option = reactive({
 		}
 	]
 });
-let deciData = reactive({
-	devicList: [
-		{
-			decName: "配电箱设备1",
-			status: 0
-		},
-		{
-			decName: "配电箱设备2",
-			status: 1
-		},
-		{
-			decName: "配电箱设备3",
-			status: 0
-		},
-		{
-			decName: "配电箱设备4",
-			status: 0
-		},
-		{
-			decName: "配电箱设备5",
-			status: 0
-		}
-	]
-});
+// let deciData = reactive({
+// 	devicList: [
+// 		{
+// 			decName: "配电箱设备1",
+// 			status: 0
+// 		},
+// 		{
+// 			decName: "配电箱设备2",
+// 			status: 1
+// 		},
+// 		{
+// 			decName: "配电箱设备3",
+// 			status: 0
+// 		},
+// 		{
+// 			decName: "配电箱设备4",
+// 			status: 0
+// 		},
+// 		{
+// 			decName: "配电箱设备5",
+// 			status: 0
+// 		}
+// 	]
+// });
 function drawChart() {
 	let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
 	leftTopEcharts.setOption(option);
 }
 // 配电箱设备统计
-let deviceData = ref({} as any)
+let deviceData = ref({} as any);
 
 const getDevStatisticsList = async () => {
 	const res: any = await getDevStatisticsApi({
diff --git a/src/views/sevenLargeScreen/headNoise/leftBottom.vue b/src/views/sevenLargeScreen/headNoise/leftBottom.vue
index b7a7f14..5df4dbf 100644
--- a/src/views/sevenLargeScreen/headNoise/leftBottom.vue
+++ b/src/views/sevenLargeScreen/headNoise/leftBottom.vue
@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { GlobalStore } from "@/stores";
 import { selectDustNoiseDataApi } from "@/api/modules/headNoise";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref,onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
 import mitts from "@/utils/bus"; //兄弟组件传值
@@ -281,6 +281,10 @@ onMounted(async () => {
 		getList();
 	});
 });
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("currentDevDetail");
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
index 89f9a66..b21ba02 100644
--- a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
+++ b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import * as echarts from "echarts";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, onBeforeUnmount, ref } from "vue";
 import mitts from "@/utils/bus"; //兄弟组件传值
 import { GlobalStore } from "@/stores";
 import { getWorkerInfoApi } from "@/api/modules/labor";
@@ -229,6 +229,10 @@ onMounted(async () => {
 		getList(e);
 	});
 });
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("enterpriseId");
+});
 </script>
 
 <style lang="scss" scoped>

From cd425813250c94f02f5e303603cb23b6bd0de040 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 16:53:26 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=B8=8B=E6=8B=89=E6=A1=86=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
index b23a095..04dedcf 100644
--- a/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
+++ b/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
@@ -111,7 +111,7 @@ const getRealTimeList = async () => {
 };
 
 onMounted(async () => {
-	// await getDevOption();
+	await getDevOption();
 	await getRealTimeList();
 });
 </script>