diff --git a/public/img/process/loading.png b/public/img/process/loading.png
new file mode 100644
index 0000000..71380b1
Binary files /dev/null and b/public/img/process/loading.png differ
diff --git a/public/img/process/no.png b/public/img/process/no.png
new file mode 100644
index 0000000..d654487
Binary files /dev/null and b/public/img/process/no.png differ
diff --git a/public/img/process/node1.png b/public/img/process/node1.png
new file mode 100644
index 0000000..cbfc072
Binary files /dev/null and b/public/img/process/node1.png differ
diff --git a/public/img/process/node2.png b/public/img/process/node2.png
new file mode 100644
index 0000000..216f659
Binary files /dev/null and b/public/img/process/node2.png differ
diff --git a/public/img/process/node3.png b/public/img/process/node3.png
new file mode 100644
index 0000000..1251794
Binary files /dev/null and b/public/img/process/node3.png differ
diff --git a/public/img/process/node4.png b/public/img/process/node4.png
new file mode 100644
index 0000000..f6d4019
Binary files /dev/null and b/public/img/process/node4.png differ
diff --git a/public/img/process/node5.png b/public/img/process/node5.png
new file mode 100644
index 0000000..62bb4b7
Binary files /dev/null and b/public/img/process/node5.png differ
diff --git a/public/img/process/serch.png b/public/img/process/serch.png
new file mode 100644
index 0000000..86bd0c8
Binary files /dev/null and b/public/img/process/serch.png differ
diff --git a/public/img/process/yes.png b/public/img/process/yes.png
new file mode 100644
index 0000000..6bfcb31
Binary files /dev/null and b/public/img/process/yes.png differ
diff --git a/src/page/index/sidebar/opsSidebar.vue b/src/page/index/sidebar/opsSidebar.vue
index 098af36..44e010c 100644
--- a/src/page/index/sidebar/opsSidebar.vue
+++ b/src/page/index/sidebar/opsSidebar.vue
@@ -31,7 +31,7 @@
               <span>业务数据运维</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="/opsVisualization/index">服务监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/alarmProcess">服务监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">Redis监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">网络监控</el-menu-item>
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 61bd781..2279955 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -244,4 +244,26 @@ export default [{
 			import( /* webpackChunkName: "views" */ '@/views/system/systemSetting')
 	}]
 },
+{
+	path: '/opsVisualization',
+	component: Layout,
+	redirect: '/opsVisualization/index',
+	children: [{
+		path: 'index',
+		name: 'index',
+		meta: {
+			i18n: 'dashboard'
+		},
+		component: () =>
+			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/index')
+	}, {
+		path: 'alarmProcess',
+		name: 'alarmProcess',
+		meta: {
+			i18n: 'dashboard'
+		},
+		component: () =>
+			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/alarmProcess')
+	}]
+},
 ]
diff --git a/src/views/opsVisualization/alarmProcess.vue b/src/views/opsVisualization/alarmProcess.vue
new file mode 100644
index 0000000..5f2c544
--- /dev/null
+++ b/src/views/opsVisualization/alarmProcess.vue
@@ -0,0 +1,423 @@
+<template>
+	<div class="content">
+		<div class="process">
+			<div class="title">报警节点示意图</div>
+			<div class="main">
+				<div class="process-example">
+					<div class="example-title">示例：</div>
+					<div class="example-box">
+						<div class="point blue"></div>
+						<div class="value">正常</div>
+					</div>
+					<div class="example-box margin-right-left-20">
+						<div class="point red"></div>
+						<div class="value">报警</div>
+					</div>
+					<div class="example-box">
+						<div class="point grey"></div>
+						<div class="value">静默</div>
+					</div>
+				</div>
+				<div class="process-center">
+					<div class="process-node-box">
+						<div class="node-img">
+							<img class="nav_img" src="../../../public/img/process/node1.png">
+							<div class="node-text">脚本</div>
+						</div>
+						<div class="yes-no">
+							<div class="yes"></div>
+							<img class="nav_img" src="../../../public/img/process/yes.png">
+						</div>
+						<div class="node-img">
+							<img class="nav_img" src="../../../public/img/process/node2.png">
+							<div class="node-text">电子围栏服务</div>
+						</div>
+						<div class="yes-no">
+							<div class="yes"></div>
+							<img class="nav_img" src="../../../public/img/process/yes.png">
+						</div>
+						<div class="node-img">
+							<img class="nav_img" src="../../../public/img/process/node3.png">
+							<div class="node-text">网关</div>
+						</div>
+						<div class="yes-no">
+							<div class="yes"></div>
+							<img class="nav_img" src="../../../public/img/process/yes.png">
+						</div>
+						<div class="node-img">
+							<div class="baojing">dtu断联报警</div>
+							<img class="nav_img" src="../../../public/img/process/node4.png">
+							<div class="node-text">dtu</div>
+						</div>
+						<div class="yes-no">
+							<div class="no"></div>
+							<img class="nav_img" src="../../../public/img/process/no.png">
+						</div>
+						<div class="node-img">
+							<img class="nav_img" src="../../../public/img/process/node5.png">
+							<div class="node-text">电子围栏</div>
+						</div>
+					</div>
+					<div class="process-more">
+						<div class="button">查看更多报警信息</div>
+					</div>
+				</div>
+				<div class="process-bottom">
+					<div class="line">
+						<div class="item">
+							<div class="item-box">
+								<div class="time">2024-5-17 08:51:12</div>
+								<div class="point red"></div>
+								<div class="name">dtu断联报警</div>
+								<div class="code">dtu编号：SJK001</div>
+								<div class="btn red-btn">
+									<img class="img" src="../../../public/img/process/serch.png" alt="">
+									<div class="text">请检查dtu设备</div>
+								</div>
+							</div>
+							<div class="item-box">
+								<div class="time">2024-5-17 08:51:13</div>
+								<div class="point grey"></div>
+								<div class="name">静默</div>
+								<div class="code">设备编号：SHUIBIAO1</div>
+								<div class="btn grey-btn">
+									<img class="img" src="../../../public/img/process/loading.png" alt="">
+									<div class="text">等待重新链接</div>
+								</div>
+							</div>
+						</div>
+						<div class="restart">
+							<div class="restart-title">操作：</div>
+							<div class="restart-btn">一键重启</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="method">
+			<div class="title">报警解决方法</div>
+			<div class="main">
+				<div class="text-box">
+					<div class="label">设备位置：</div>
+					<div class="value">
+						<div class="item">园区2号围栏</div>
+					</div>
+				</div>
+				<div class="text-box">
+					<div class="label">排查方法：</div>
+					<div class="value">
+						<div class="item">1.检查电源是否正常，重新接入或更换电源；</div>
+						<div class="item">2.检查是否过载，重新调整系统负载或更换更高性能的设备；</div>
+						<div class="item">3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；</div>
+						<div class="item">4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+
+		}
+	},
+	created() {
+
+	},	
+	mounted() {
+
+	},
+	methods: {
+
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+	padding: 20px !important;
+	.process{
+		width: calc(100% - 218px);
+		margin-left: 218px;
+		height: 584px;
+		background: #FFFFFF;
+		border-radius: 0px 0px 0px 0px;
+		border: 1px solid #D1D1D1;
+		display: flex;
+		flex-direction: column;
+		.title{
+			width: 100%;
+			height: 40px;
+			background: #E5E5E5;
+			border-radius: 0px 0px 0px 0px;
+			border: 1px solid #D1D1D1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 18px;
+			color: #333333;
+		}
+		.main{
+			display: flex;
+			flex-direction: column;
+			padding: 30px;
+			height: 50%;
+			.process-example{
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				.example-title{
+					color: #999999;
+					margin-right: 6px;
+					font-size: 14px;
+				}
+				.example-box{
+					display: flex;
+					align-items: center;
+					.point{
+						width: 11px;
+						height: 11px;
+						border-radius: 10px;
+						margin-right: 11px;
+					}
+					.value{
+						color: #999999;
+						font-size: 14px;
+					}
+				}
+				.margin-right-left-20{
+					margin: 0 20px;
+				}
+			}
+			.process-center{
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				margin-top: 75px;
+				.process-node-box{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.node-img{
+						width: 69px;
+						height: 69px;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						position: relative;
+						.baojing{
+							width: 133px;
+							height: 31px;
+							background: #FFF3F3;
+							border-radius: 0px 0px 0px 0px;
+							border: 1px solid #EE6464;
+							font-size: 16px;
+							color: #E14B33;
+							position: absolute;
+							top: -55px;
+							transform: translateY(-50%);
+							display: flex;
+							justify-content: center;
+							align-items: center;
+						}
+						.nav_img{
+							width: 100%;
+							height: 100%;
+							// margin-bottom: 20px;
+						}
+						.node-text{
+							position: absolute;
+							transform: translateY(-50%);
+							width: 100px;
+							text-align: center;
+							top: 100px;
+						}
+					}
+					.yes-no{
+						width: 163px;
+						height: 17px;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						position: relative;
+						.yes{
+							width: 167px;
+							height: 17px;
+							background: #21A2E5;
+							opacity: 0.18;
+							position: absolute;
+						}
+						.no{
+							width: 167px;
+							height: 17px;
+							background: #A5A5A5;
+							opacity: 0.18;
+							position: absolute;
+						}
+						.nav_img{
+							width: 24px;
+							height: 24px;
+							opacity: 1;
+							z-index: 10;
+						}
+					}
+				}
+				.process-more{
+					.button{
+						width: 190px;
+						height: 40px;
+						background: #FFFFFF;
+						border-radius: 0px 0px 0px 0px;
+						border: 1px solid #2B8EE5;
+						color: #2B8EE5;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						cursor: pointer;
+					}
+				}
+			}
+			.process-bottom{
+				border-top: 1px solid #D1D1D1;
+				margin-top: 200px;
+				display: flex;
+				flex-direction: column;
+				.line{
+					margin-top: 20px;
+					display: flex;
+					align-items: flex-start;
+					justify-content: center;
+				}
+				.item{
+					display: flex;
+					flex-direction: column;
+					.item-box{
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						margin-bottom: 20px;
+						.point{
+							width: 10px;
+							height: 10px;
+							margin: 0 20px;
+							border-radius: 10px;
+						}
+						.name{
+							width: 200px;
+						}
+						.code{
+							width: 250px;
+							margin-left: 40px;
+						}
+						.btn{
+							margin-left: 20px;
+							width: 185px;
+							height: 31px;
+							border-radius: 0px 0px 0px 0px;
+							display: flex;
+							justify-content: space-around;
+							align-items: center;
+							font-size: 16px;
+							.img{
+								width: 15px;
+								height: 15px;
+							}
+						}
+						.red-btn{
+							background: #FFF3F3;
+							border: 1px solid #EE6464;
+							.text{
+								color: #E14B33;
+							}
+						}
+						.grey-btn{
+							background: #F5F5F5;
+							border: 1px solid #999999;
+							.text{
+								color: #999999;
+							}
+						}
+					}
+				}
+				.restart{
+					margin-left: 72px;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+					.restart-text{
+						font-size: 16px;
+						color: #333333;
+					}
+					.restart-btn{
+						width: 93px;
+						height: 31px;
+						background: #2B8EE5;
+						border-radius: 0px 0px 0px 0px;
+						font-size: 16px;
+						color: #FFFFFF;
+						margin-left: 7px;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+			}
+		}
+	}
+	.method{
+		flex: 1;
+		margin-top: 30px;
+		width: calc(100% - 218px);
+		// height: 326px;
+		margin-left: 218px;
+		background: #FFFFFF;
+		border-radius: 0px 0px 0px 0px;
+		border: 1px solid #D1D1D1;
+		display: flex;
+		flex-direction: column;
+		.title{
+			width: 100%;
+			height: 40px;
+			background: #E5E5E5;
+			border-radius: 0px 0px 0px 0px;
+			border: 1px solid #D1D1D1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 18px;
+			color: #333333;
+		}
+		.main{
+			display: flex;
+			flex-direction: column;
+			padding: 22px;
+			// height: 50%;
+			overflow: auto;
+			.text-box{
+				margin-bottom: 22px;
+				display: flex;
+				.label{
+				}
+				.value{
+					.item{
+						margin-bottom: 12px;
+					}
+				}
+			}
+		}
+	}
+	.blue{
+		background: #21A2E5;
+	}
+	.red{
+		background: #E96955;
+	}
+	.grey{
+		background: #E1E1E1;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/opsVisualization/index.vue b/src/views/opsVisualization/index.vue
index 39853b5..67be32d 100644
--- a/src/views/opsVisualization/index.vue
+++ b/src/views/opsVisualization/index.vue
@@ -3,7 +3,7 @@
     <el-col :span="3">
       <div class="box">
         <el-row class="tac">
-          <el-col :span="12">
+          <el-col :span="12" style="width: 100%">
             <el-menu
               default-active="2"
               class="el-menu-vertical-demo"
diff --git a/vue.config.js b/vue.config.js
index 8d74d9b..f3fac99 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,7 +30,7 @@ module.exports = {
         // target: 'http://192.168.3.58:8001',
         // target: 'http://192.168.1.105:8001',
         // target: 'http://192.168.1.34:8001',
-        target: 'http://192.168.1.102:8001',
+        target: 'http://192.168.1.5:8001',
         // target: 'http://192.168.1.106:8001',
         // target: 'http://192.168.0.115:8001',
         ws: true,
@@ -53,7 +53,7 @@ module.exports = {
         // target: 'http://192.168.79.129',
         // target: "http://192.168.1.106",
         // target: "http://192.168.1.105:80",
-        target: "http://192.168.1.102:80",
+        target: "http://192.168.1.5:80",
         // target: "http://192.168.1.34:80",
         // target: "http://192.168.0.115",
         // target: "http://10.90.100.204",