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] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E9=85=8D=E7=94=B5=E7=AE=B1?=
 =?UTF-8?q?=E7=9B=91=E6=B5=8B=E5=A4=A7=E5=B1=8F=EF=BC=8C=E5=B7=A6=E4=B8=8A?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E6=8A=A5=E8=AD=A6=E5=88=97=E8=A1=A8=EF=BC=8C=E4=B8=AD=E9=97=B4?=
 =?UTF-8?q?=E9=85=8D=E7=94=B5=E7=AE=B1=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=EF=BC=8C=E8=AE=A1=E7=AE=97=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=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>