diff --git a/src/assets/images/edgeProtection/realtimeIcon.png b/src/assets/images/edgeProtection/realtimeIcon.png
new file mode 100644
index 00000000..87d81f05
Binary files /dev/null and b/src/assets/images/edgeProtection/realtimeIcon.png differ
diff --git a/src/assets/images/edgeProtection/textBg.png b/src/assets/images/edgeProtection/textBg.png
new file mode 100644
index 00000000..0fc6cf90
Binary files /dev/null and b/src/assets/images/edgeProtection/textBg.png differ
diff --git a/src/assets/images/edgeProtection/warn1.png b/src/assets/images/edgeProtection/warn1.png
new file mode 100644
index 00000000..74eda487
Binary files /dev/null and b/src/assets/images/edgeProtection/warn1.png differ
diff --git a/src/assets/images/edgeProtection/warn2.png b/src/assets/images/edgeProtection/warn2.png
new file mode 100644
index 00000000..a786278e
Binary files /dev/null and b/src/assets/images/edgeProtection/warn2.png differ
diff --git a/src/assets/images/edgeProtection/warn3.png b/src/assets/images/edgeProtection/warn3.png
new file mode 100644
index 00000000..b7560d69
Binary files /dev/null and b/src/assets/images/edgeProtection/warn3.png differ
diff --git a/src/assets/images/edgeProtection/warn4.png b/src/assets/images/edgeProtection/warn4.png
new file mode 100644
index 00000000..f7e55fba
Binary files /dev/null and b/src/assets/images/edgeProtection/warn4.png differ
diff --git a/src/assets/images/lineSymbol2.png b/src/assets/images/lineSymbol2.png
new file mode 100644
index 00000000..c8fb15b8
Binary files /dev/null and b/src/assets/images/lineSymbol2.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 1534d1d5..55f1e186 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -107,6 +107,16 @@ export const staticRouter: RouteRecordRaw[] = [
 				path: "/standardCureRoom",
 				name: "标养室监测",
 				component: () => import("@/views/sevenLargeScreen/digitalConstruction/standardCureRoom/index.vue")
+			},
+			{
+				path: "/edgeProtection",
+				name: "临边防护",
+				component: () => import("@/views/sevenLargeScreen/safetyManagement/edgeProtection/index.vue")
+			},
+			{
+				path: "/toxicGasMonitor",
+				name: "有毒气体监测",
+				component: () => import("@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/index.vue")
 			}
 		],
 		meta: {
diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
index 53678b17..355ed8a8 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
@@ -5,9 +5,9 @@
 				<div class="tabList">
 					<div>序号</div>
 					<div>抓拍照片</div>
-					<div>设备名称</div>
+					<div style="margin-right: 1%">设备名称</div>
 					<div>告警类型</div>
-					<div>告警时间</div>
+					<div style="margin-right: 1%">告警时间</div>
 					<div>操作</div>
 				</div>
 
@@ -15,11 +15,11 @@
 					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
 						<div>{{ index + 1 }}</div>
 						<div class="list-img">
-							<img src="@/assets/images/noData.png" alt="" />
+							<img src="@/assets/images/vehicleManagement/car.png" alt="" />
 						</div>
 						<!-- <div>{{ item.dev }}</div> -->
 						<div>{{ item.devName }}</div>
-						<div style="padding-left: 1%">{{ item.warnType }}</div>
+						<div>{{ item.warnType }}</div>
 						<div>{{ item.warnTime }}</div>
 						<div style="color: #65d7f9; cursor: pointer" @click="showDialog = !showDialog">查看详情</div>
 					</div>
@@ -300,10 +300,9 @@ onMounted(async () => {});
 			color: #ccc;
 			font-size: calc(100vw * 14 / 1920);
 			line-height: 30px;
-			justify-content: space-around;
 			div {
 				text-align: center;
-				width: 10%;
+				width: 16%;
 			}
 		}
 		.listBox {
@@ -312,22 +311,22 @@ onMounted(async () => {});
 			.listStyle {
 				display: flex;
 				align-items: center;
-				justify-content: space-around;
 				color: #fff;
 				height: 10%;
 				font-size: calc(100vw * 12 / 1920);
 				.list-img {
-					width: 10%;
-					height: 50%;
+					width: 15%;
+					height: 70%;
 					box-sizing: border-box;
 					img {
-						width: 50%;
+						width: 100%;
 						height: 100%;
+						object-fit: contain;
 					}
 				}
 				div {
 					text-align: center;
-					width: 10%;
+					width: 18%;
 					white-space: nowrap;
 				}
 			}
diff --git a/src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomLeft.vue b/src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomLeft.vue
index 30ee396b..c53617da 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomLeft.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomLeft.vue
@@ -13,7 +13,7 @@
 						<div>{{ index + 1 }}</div>
 						<!-- <div>{{ item.dev }}</div> -->
 						<div>{{ item.devName }}</div>
-						<div>{{ item.warnTime }}</div>
+						<div style="margin-right: 0.5%">{{ item.warnTime }}</div>
 						<div>{{ item.warnType }}</div>
 					</div>
 					<div class="notoDta" v-if="list.length == 0">
@@ -126,99 +126,23 @@ onMounted(async () => {});
 	left: 0%;
 	background: rgba(7, 28, 49, 0.5);
 	z-index: 20;
-	.dialog-content {
-		position: absolute;
-		box-sizing: border-box;
-		padding: 1%;
-		left: 38%;
-		top: 30%;
-		width: 25%;
-		height: 45%;
-		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
-		background-size: 100% 100%;
-		z-index: 21;
-		.close-icon {
-			position: absolute;
-			right: 3%;
-			top: 3%;
-			cursor: pointer;
-			color: #ffffff;
-			font-size: calc(100vw * 18 / 1920);
-		}
-		.dialog-title {
-			color: #ffffff;
-			font-weight: bold;
-			font-size: calc(100vw * 18 / 1920);
-			font-family: "OPPOSans-Bold";
-		}
-		.dialog-detail {
-			width: 100%;
-			height: 25%;
-			display: flex;
-			justify-content: space-between;
-			margin-top: 5%;
-			.small-pic {
-				width: 18%;
-				img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.detail-text {
-				width: 80%;
-				.text-box {
-					height: 25%;
-					display: flex;
-					align-items: center;
-					background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
-					background-size: 100% 100%;
-					.type {
-						width: 25%;
-						margin-left: 3%;
-						color: #a1accb;
-						font-size: calc(100vw * 12 / 1920);
-					}
-					.text {
-						font-size: calc(100vw * 12 / 1920);
-						color: #ffffff;
-					}
-				}
-			}
-		}
-		.pic-title {
-			color: #ffffff;
-			font-weight: bold;
-			font-size: calc(100vw * 18 / 1920);
-			font-family: "OPPOSans-Bold";
-			margin-top: 5%;
-		}
-		.big-pic {
-			width: 100%;
-			height: 50%;
-			margin-top: 5%;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
 }
 .bottom-left {
 	width: 100%;
 	height: 100%;
-	.title {
-		height: 10%;
-		line-height: 35px;
-		text-align: left;
-		font-size: calc(100vw * 18 / 1920);
-		color: #ffffff;
-		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
-		background-size: 100% 100%;
-		i {
-			margin-left: 50px;
-			font-family: OPPOSansH;
-		}
-	}
+	// .title {
+	// 	height: 10%;
+	// 	line-height: 35px;
+	// 	text-align: left;
+	// 	font-size: calc(100vw * 18 / 1920);
+	// 	color: #ffffff;
+	// 	background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
+	// 	background-size: 100% 100%;
+	// 	i {
+	// 		margin-left: 50px;
+	// 		font-family: OPPOSansH;
+	// 	}
+	// }
 	.left-content {
 		height: 100%;
 		width: 100%;
@@ -239,7 +163,7 @@ onMounted(async () => {});
 			line-height: 30px;
 			div {
 				text-align: center;
-				width: 25%;
+				width: 24%;
 			}
 		}
 		.listBox {
@@ -262,7 +186,7 @@ onMounted(async () => {});
 				}
 				div {
 					text-align: center;
-					width: 25%;
+					width: 24%;
 					white-space: nowrap;
 				}
 			}
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 62a33314..7fed83dc 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -139,6 +139,14 @@ let menuList = ref([
 			{
 				menuName: "安全管理",
 				companyPath: "/securityManagement"
+			},
+			{
+				menuName: "有毒气体监测",
+				companyPath: "/toxicGasMonitor"
+			},
+			{
+				menuName: "临边防护",
+				companyPath: "/edgeProtection"
 			}
 		]
 	},
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomLeft.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomLeft.vue
new file mode 100644
index 00000000..e19a4496
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomLeft.vue
@@ -0,0 +1,258 @@
+<template>
+	<Card title="实时数据">
+		<div class="bottom-box">
+			<div class="list-content">
+				<div class="tabList">
+					<div>序号</div>
+					<div style="width: 25%">上报时间</div>
+					<div>设备名称</div>
+					<div style="width: 15%">设备编号</div>
+					<div>电量</div>
+					<div>防翻越</div>
+					<div>人员靠近</div>
+				</div>
+				<div class="listBox">
+					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+						<div>{{ index + 1 }}</div>
+						<div style="width: 25%">{{ item.reportTime }}</div>
+						<div>{{ item.devName }}</div>
+						<div style="width: 15%; margin-right: 0.5%">{{ item.devCode }}</div>
+						<div>{{ item.quantityElectricity }}</div>
+						<div :style="{ color: item.antiCrossType == 1 ? '#EC6266' : '#FFFFFF' }">
+							{{ item.antiCrossType == 0 ? "正常" : "报警" }}
+						</div>
+						<div :style="{ color: item.personApproachType == 1 ? '#EC6266' : '#FFFFFF' }">
+							{{ item.personApproachType == 0 ? "正常" : "报警" }}
+						</div>
+					</div>
+					<div class="notoDta" v-if="list.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let showDialog = ref(false as any);
+let rangeTime = ref("" as any);
+const list = reactive([
+	{
+		id: 1,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "90%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+	{
+		id: 2,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "80%",
+		antiCrossType: 1,
+		personApproachType: 0
+	},
+	{
+		id: 3,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "70%",
+		antiCrossType: 1,
+		personApproachType: 0
+	},
+	{
+		id: 4,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "98%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+	{
+		id: 5,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "80%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+	{
+		id: 6,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "75%",
+		antiCrossType: 1,
+		personApproachType: 0
+	},
+	{
+		id: 7,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "91%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+
+	{
+		id: 8,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "60%",
+		antiCrossType: 1,
+		personApproachType: 0
+	},
+	{
+		id: 9,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "40%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+	{
+		id: 10,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "87%",
+		antiCrossType: 1,
+		personApproachType: 0
+	},
+	{
+		id: 11,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "90%",
+		antiCrossType: 0,
+		personApproachType: 1
+	},
+	{
+		id: 12,
+		reportTime: "2023-01-01 12:00:00",
+		devName: "防护栏杆",
+		devCode: "LB59010292",
+		quantityElectricity: "58%",
+		antiCrossType: 1,
+		personApproachType: 0
+	}
+]);
+
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+// 选择框样式
+:deep(.el-input__wrapper) {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+:deep(.el-range-separator) {
+	color: #ccc;
+	font-size: 10px;
+}
+:deep(.el-range-input) {
+	color: #ccc;
+	font-size: 10px;
+}
+.bottom-box {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.time-range {
+		position: absolute;
+		right: 1%;
+		top: 5%;
+	}
+	.title {
+		height: 10%;
+		line-height: 35px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			margin-left: 50px;
+			font-family: OPPOSansH;
+		}
+	}
+	.list-content {
+		height: 100%;
+		width: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.tabList {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 10%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: calc(100vw * 14 / 1920);
+			line-height: 30px;
+			// justify-content: space-around;
+			div {
+				text-align: center;
+				white-space: nowrap;
+				width: 11.5%;
+			}
+		}
+		.listBox {
+			height: 90%;
+			overflow: scroll;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				color: #fff;
+				height: 10%;
+				font-size: calc(100vw * 12 / 1920);
+				div {
+					text-align: center;
+					white-space: nowrap;
+					width: 11.5%;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomRight.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomRight.vue
new file mode 100644
index 00000000..9abbd0e2
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomRight.vue
@@ -0,0 +1,267 @@
+<template>
+	<Card title="报警数据">
+		<div class="bottom-box">
+			<div class="time-range">
+				<el-date-picker
+					v-model="rangeTime"
+					type="daterange"
+					range-separator="至"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+					value-format="YYYY-MM-DD"
+					:clearable="false"
+				/>
+			</div>
+			<div class="list-content">
+				<div class="tab-list">
+					<div>序号</div>
+					<div>安装位置</div>
+					<div>设备名称</div>
+					<div>编号</div>
+					<div>监测对象</div>
+					<div>报警类型</div>
+					<div>报警时间</div>
+				</div>
+				<div class="list-box">
+					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+						<div>{{ index + 1 }}</div>
+						<div>{{ item.installPosition }}</div>
+						<div>{{ item.devName }}</div>
+						<div>{{ item.devCode }}</div>
+						<div style="margin-right: 0.5%">{{ item.monitorObj }}</div>
+						<div>{{ item.warnType }}</div>
+						<div>{{ item.warnTime }}</div>
+					</div>
+					<div class="notoDta" v-if="list.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let showDialog = ref(false as any);
+let rangeTime = ref("" as any);
+const list = reactive([
+	{
+		id: 1,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 6,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 7,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+
+	{
+		id: 8,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 9,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 10,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 11,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 12,
+		installPosition: "深基坑周围",
+		devName: "防护栏杆",
+		devCode: "lbfh1234",
+		monitorObj: "磁锁",
+		warnType: "线锁报警",
+		warnTime: "2023-01-01 12:00:00"
+	}
+]);
+
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+// 选择框样式
+:deep(.el-input__wrapper) {
+	width: 100%;
+	height: 1%;
+	background: #0d2956;
+}
+:deep(.el-range-separator) {
+	color: #ccc;
+	font-size: 10px;
+}
+:deep(.el-range-input) {
+	color: #ccc;
+	font-size: 10px;
+}
+.bottom-box {
+	width: 100%;
+	height: 100%;
+	padding-top: 4%;
+	position: relative;
+	.time-range {
+		width: 16%;
+		position: absolute;
+		right: 3%;
+		top: 3%;
+	}
+	.title {
+		height: 10%;
+		line-height: 35px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			margin-left: 50px;
+			font-family: OPPOSansH;
+		}
+	}
+	.list-content {
+		height: 89%;
+		width: 100%;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background-size: 100% 100%;
+		.tab-list {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 10%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: calc(100vw * 14 / 1920);
+			line-height: 30px;
+			// justify-content: space-around;
+			div {
+				text-align: center;
+				white-space: nowrap;
+				width: 14%;
+			}
+		}
+		.list-box {
+			height: 87%;
+			overflow: scroll;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				color: #fff;
+				height: 8%;
+				font-size: calc(100vw * 12 / 1920);
+				div {
+					text-align: center;
+					white-space: nowrap;
+					width: 14%;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/index.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/index.vue
new file mode 100644
index 00000000..06004e60
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/index.vue
@@ -0,0 +1,85 @@
+<template>
+	<div class="distributionBox">
+		<div class="top">
+			<div class="topLeft">
+				<TopLeft></TopLeft>
+			</div>
+			<div class="topCenter">
+				<TopCenter></TopCenter>
+			</div>
+			<div class="topRight">
+				<TopRight></TopRight>
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="bottomLeft">
+				<BottomLeft></BottomLeft>
+			</div>
+			<div class="bottomRight">
+				<BottomRight></BottomRight>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import TopLeft from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topLeft.vue";
+import TopCenter from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topCenter.vue";
+import TopRight from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topRight.vue";
+import BottomLeft from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomLeft.vue";
+import BottomRight from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomRight.vue";
+export default {
+	components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight }
+};
+</script>
+
+<style lang="scss" scoped>
+.distributionBox {
+	width: 100%;
+	height: 100%;
+	.top {
+		width: 100%;
+		height: 49%;
+		display: flex;
+		margin-bottom: 1%;
+		.topLeft {
+			width: 33%;
+			// background-color: orchid;
+		}
+		.topCenter {
+			margin: 0% 1%;
+			width: 33%;
+			:deep(.h-card) {
+				// .content {
+				// 	margin-top: 1.5% !important;
+				// }
+			}
+		}
+		.topRight {
+			width: 33%;
+		}
+	}
+	.bottom {
+		width: 100%;
+		height: 48%;
+		display: flex;
+		.bottomLeft {
+			width: 33%;
+			margin-right: 1%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+		}
+		.bottomRight {
+			width: 66%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topCenter.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topCenter.vue
new file mode 100644
index 00000000..0d061550
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topCenter.vue
@@ -0,0 +1,85 @@
+<template>
+	<Card title="实时监测">
+		<div class="edge-center-top">
+			<div class="warn-box">
+				<div class="box-content" v-for="(item, index) in list" :key="item.id">
+					<div class="num" :style="{ color: item.color }">{{ item.num }}</div>
+					<div class="text">{{ item.text }}</div>
+				</div>
+			</div>
+			<div class="top-center-icon">
+				<img src="@/assets/images/edgeProtection/realtimeIcon.png" alt="" />
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		num: "1024",
+		text: "今日报警",
+		color: "#4AC0F3"
+	},
+	{
+		id: 2,
+		num: "1024",
+		text: "电量过低",
+		color: "#82FBEA"
+	},
+	{
+		id: 3,
+		num: "1024",
+		text: "人员靠近",
+		color: "#EEA959"
+	},
+	{
+		id: 4,
+		num: "1024",
+		text: "翻越报警",
+		color: "#EC6266"
+	}
+]);
+</script>
+
+<style scoped lang="scss">
+.top-center-icon {
+	width: 90%;
+	height: 45%;
+	margin: auto;
+	margin-top: 12%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+}
+.edge-center-top {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.warn-box {
+		display: flex;
+		justify-content: space-around;
+		padding: 0 5%;
+		.box-content {
+			text-align: center;
+			margin-top: 6%;
+			.num {
+				transform: skew(-5deg);
+				font-size: 26px;
+				font-family: sadigitalNumber;
+				color: #4ac0f3;
+			}
+			.text {
+				font-size: 14px;
+				margin-top: 15%;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				color: #ccc;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topLeft.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topLeft.vue
new file mode 100644
index 00000000..abffb2db
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topLeft.vue
@@ -0,0 +1,96 @@
+<template>
+	<Card title="报警统计(次)">
+		<div class="top-left">
+			<div class="warn-box">
+				<div class="warn-icon" style="margin-top: 5%">
+					<img src="@/assets/images/edgeProtection/warn1.png" alt="" />
+				</div>
+				<div class="warn-detail" style="margin-top: 5%">
+					<div class="warn-text">报警总数</div>
+					<div class="warn-num">75</div>
+				</div>
+			</div>
+			<div class="warn-box">
+				<div class="warn-icon" style="margin-top: 5%">
+					<img src="@/assets/images/edgeProtection/warn2.png" alt="" />
+				</div>
+				<div class="warn-detail" style="margin-top: 5%">
+					<div class="warn-text">电量过低</div>
+					<div class="warn-num">75</div>
+				</div>
+			</div>
+			<div class="warn-box">
+				<div class="warn-icon">
+					<img src="@/assets/images/edgeProtection/warn3.png" alt="" />
+				</div>
+				<div class="warn-detail">
+					<div class="warn-text">人员靠近</div>
+					<div class="warn-num">498</div>
+				</div>
+			</div>
+			<div class="warn-box">
+				<div class="warn-icon">
+					<img src="@/assets/images/edgeProtection/warn4.png" alt="" />
+				</div>
+				<div class="warn-detail">
+					<div class="warn-text">翻越报警</div>
+					<div class="warn-num">468</div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.top-left {
+	width: 100%;
+	height: 100%;
+	margin-left: 3%;
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	.warn-box {
+		display: flex;
+		width: 50%;
+		height: 40%;
+		.warn-icon {
+			width: 50%;
+			height: 100%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.warn-detail {
+			width: 50%;
+			height: 100%;
+			position: relative;
+			.warn-text {
+				width: 100%;
+				height: 20%;
+				padding-top: 1%;
+				position: absolute;
+				display: flex;
+				justify-content: center;
+				left: -25%;
+				top: 12%;
+				font-size: 16px;
+				font-family: OPPOSans-Regular, OPPOSans;
+				color: #ccc;
+				background: url("@/assets/images/edgeProtection/textBg.png") no-repeat;
+				background-size: 100% 100%;
+			}
+			.warn-num {
+				margin-top: 40%;
+				font-size: 36px;
+				font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
+				color: #ffffff;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topRight.vue b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topRight.vue
new file mode 100644
index 00000000..0c03aacd
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/edgeProtection/topRight.vue
@@ -0,0 +1,338 @@
+<template>
+	<Card title="近7日趋势(次)">
+		<div class="top-right-box">
+			<div class="history-content">
+				<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// 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([
+	"2023-08-24",
+	"2023-08-25",
+	"2023-08-26",
+	"2023-08-27",
+	"2023-08-28",
+	"2023-08-29",
+	"2023-08-30"
+] as any);
+// Y轴单位
+let unit = ref("单位:V" as any);
+// Y轴数据
+let yData = ref([10, 65, 20, 25, 15, 25, 12] as any);
+// 图表数据项
+let option = ref(null as any);
+
+// 选中
+let checked = ref(1);
+function getNowData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+function getWeekData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+function getMonthData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		title: {
+			// text: '日用气量分析',
+			textStyle: {
+				align: "center",
+				color: "#fff",
+				fontSize: 20
+			},
+			top: "2%",
+			left: "center"
+		},
+		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: "10%",
+			left: "10%",
+			right: "10%",
+			bottom: "8%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "category",
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					interval: 0
+				},
+				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"
+					}
+				},
+				interval: 10,
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				type: "line",
+				// smooth: true, //是否平滑
+				showAllSymbol: true,
+				symbol: `image://${symbolIcon}`,
+				// symbol: "circle",
+				smooth: 0.8,
+				symbolSize: 30,
+				label: {
+					show: false,
+					position: "top",
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				itemStyle: {
+					color: "#4AC0F3",
+					borderColor: "#4AC0F3",
+					borderWidth: 5,
+					shadowColor: "rgba(0, 0, 0, .6)",
+					shadowBlur: 0,
+					lineStyle: {
+						width: 0.1,
+						normal: {
+							color: "#fff",
+							shadowBlur: 0
+						}
+					}
+				},
+				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: yData.value
+			}
+		]
+	};
+}
+
+function drawChart() {
+	initOption();
+	console.log("绘制前数据", yData.value);
+	let edgeWeekTrend = echarts.init(document.getElementById("edgeWeekTrend"));
+	edgeWeekTrend.setOption(option.value);
+}
+
+//获取当前前七天的日期
+function generateWeek() {
+	// 获取当前日期
+	const today = new Date();
+	// 存放日期
+	let dateArr = [];
+	// 返回最近七天的日期
+	for (let i = 0; i < 7; i++) {
+		// 每次循环，将日期递减一天
+		const date = new Date(today);
+		date.setDate(today.getDate() - i);
+
+		// 格式化日期为yyyy-mm-dd格式
+		const dateString = date.toISOString().split("T")[0];
+		dateArr.unshift(dateString);
+		console.log(dateArr, "周日期");
+	}
+	twenty_four_time.value = dateArr;
+}
+
+onMounted(async () => {
+	generateWeek();
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.top-right-box {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.history-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.rightHeader {
+			width: 20%;
+			display: flex;
+			position: absolute;
+			z-index: 10;
+			color: #fff;
+			font-size: 10px;
+			text-align: center;
+			line-height: 20px;
+			right: -1%;
+			top: 5%;
+			.Selected {
+				height: 5%;
+				background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+				background-size: 100% 100%;
+				cursor: pointer;
+			}
+			.day {
+				padding: 0 6%;
+				margin-right: 5%;
+				z-index: 99;
+			}
+			.week {
+				padding: 0 6%;
+				margin-right: 5%;
+				z-index: 99;
+			}
+			.month {
+				padding: 0 6%;
+				z-index: 99;
+			}
+			.active {
+				background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+	}
+}
+::v-deep .el-input__wrapper {
+	background: #112d59;
+}
+::v-deep .el-input__inner {
+	color: #fff;
+}
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
+}
+</style>