Add - 哨兵-预警中心 界面提交

src/router/index.js

@@ -100,6 +100,15 @@ export const constantRoutesNew = [{
 				}
 			},
 			{
+				//哨兵预警中心
+				path: '/SenWarningCenter',
+				name: 'SenWarningCenter',
+				component: () => import('@/views/SenWarningCenter'),
+				meta: {
+					title: '哨兵-预警中心'
+				}
+			},
+			{
 				//哨兵事件中心
 				path: '/SenEventCenter',
 				name: 'SenEventCenter',

src/views/SenWarningCenter.vue

@@ -0,0 +1,111 @@
+/*
+ *@description: 哨兵-预警中心
+ *@author: yh Fu
+ *@date: 2025-09-23 08:34:13
+ *@version: V1.0.5
+*/
+
+<template>
+    <div>
+        <div class="con_right con_left_js" style="top: 70px;">
+			<div class="list_tit">可燃气体泄露预警说明</div>
+			<!-- 预警说明内容主体 -->
+            <div class="text_content">
+                <h4>预警名称：可燃性气体泄漏预警</h4>
+                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
+                <h4>预警阈值：3%</h4>
+            </div>
+		</div>
+        <div class="con_right con_left_js" style="top: 240px;">
+			<div class="list_tit">位移预警说明</div>
+			<!-- 预警说明内容主体 -->
+            <div class="text_content">
+                <h4>预警名称：可燃性气体泄漏预警</h4>
+                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
+                <h4>预警阈值：3%</h4>
+            </div>
+		</div>
+        <div class="con_right con_left_js" style="top: 410px;">
+			<div class="list_tit">振动预警说明</div>
+			<!-- 预警说明内容主体 -->
+            <div class="text_content">
+                <h4>预警名称：可燃性气体泄漏预警</h4>
+                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
+                <h4>预警阈值：3%</h4>
+            </div>
+		</div>
+        <div class="con_right con_left_js" style="top: 580px;">
+			<div class="list_tit">水位预警说明</div>
+			<!-- 预警说明内容主体 -->
+            <div class="text_content">
+                <h4>预警名称：可燃性气体泄漏预警</h4>
+                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
+                <h4>预警阈值：3%</h4>
+            </div>
+		</div>
+        <div class="con_right con_left_js" style="top: 747px;">
+			<div class="list_tit">异常流量预警说明</div>
+			<!-- 预警说明内容主体 -->
+            <div class="text_content">
+                <h4>预警名称：可燃性气体泄漏预警</h4>
+                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
+                <h4>预警阈值：3%</h4>
+            </div>
+		</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+        }
+    },
+    mounted(){
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .con_right {
+		position: absolute;
+		z-index: 99;
+		right: 30px;
+		top: 100px;
+		width: 320px;
+        height: 17%;
+		background: linear-gradient(to left, rgba(21,38,48,.6), rgba(21,38,48,.2));
+		padding: 0px 10px 20px 10px !important;
+
+		.list_tit {
+			background: url("../assets/images/sentinel/hz_list_tit.png") no-repeat center;
+			background-size: 100% 100%;
+			height: 44px;
+			line-height: 44px;
+			padding-left: 20px;
+			font-family: 'ysbth';
+			font-size: 20px;
+			color: #fff;
+			margin-bottom: 10px;
+		}
+
+        .text_content{
+            padding-left: 6%;
+            height: 25%;
+            color: #fff;
+            font-size: 14px;
+            >h4{
+                margin-top: 3%;
+            }
+        }
+	}
+
+
+	.con_left_js {
+		width: 400px !important;
+	}
+
+
+</style>

src/views/SentryPage.vue

@@ -21,6 +21,9 @@
       </div>
       <div class="header_tit"><i>{{title}}</i></div>
       <div class="head_btn">
+		  <div @click="jumpTo('/SenWarningCenter',4)" :class="routerIdx == 4 ? 'on' : ''">
+              <i>预警中心</i>
+          </div>
           <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
               <i>事件中心</i>
           </div>
@@ -672,6 +675,7 @@
 
 	.s_header .head_btn {
 		width: 316px;
+		padding-top: 0.4%;
 	}
 
 	.s_header .head_tx {
@@ -682,19 +686,20 @@
 
 	.s_header .head_btn div {
 		display: inline-block;
-		background: url("../assets/images/sentinel/hz_btnbg.png") no-repeat center;
-		width: 138px;
-		margin: 0px 10px;
+		background: url("../assets/images/sentinel/hz_btnbg.png") 0 0 no-repeat;
+		background-size: 100% 100%;
+		width: 100px;
 		height: 29px;
 		line-height: 29px;
 		text-align: center;
 		transition: all 0.3s;
+		cursor: pointer;
 	}
 
 	.s_header .head_btn div i {
 		display: block;
 		font-family: 'ysbth';
-		font-size: 20px;
+		font-size: 17px;
 		background: linear-gradient(180deg, #95dded 60%, #fff 40%);
 		-webkit-background-clip: text;
 		color: transparent;
@@ -706,7 +711,8 @@
 
 	.s_header .head_btn div.on,
 	.s_header .head_btn div:hover {
-		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
+		background: url("../assets/images/sentinel/hz_btnbg_on.png") 0 0 no-repeat;
+		background-size: 100% 100%;
 		box-shadow: none;
 		filter: brightness(170%);
 	}