Add - 哨兵 路由归纳

src/router/index.js

@@ -73,43 +73,51 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
-		//哨兵驾驶舱
-		path: '/SentryCockpit',
-		name: 'SentryCockpit',
-		component: () => import('@/views/SentryCockpit'),
+		//哨兵监管平台
+		path: '/SentryPage',
+		name: 'SentryPage',
+		component: () => import('@/views/SentryPage'),
 		meta: {
-			// title: '水利云图'
-			title: '哨兵驾驶舱'
-		}
-	},
-	{
-		//哨兵设备中心
-		path: '/SenEquipmentCenter',
-		name: 'SenEquipmentCenter',
-		component: () => import('@/views/SenEquipmentCenter'),
-		meta: {
-			// title: '水利云图'
-			title: '哨兵-设备中心'
-		}
-	},{
-        //哨兵事件中心
-        path: '/SenEventCenter',
-        name: 'SenEventCenter',
-        component: () => import('@/views/SenEventCenter'),
-        meta: {
-            // title: '水利云图'
-            title: '哨兵-事件中心'
-        }
-    },
-	{
-		//哨兵用户中心
-		path: '/useCenter',
-		name: 'useCenter',
-		component: () => import('@/views/useCenter'),
-		meta: {
-			// title: '水利云图'
-			title: '哨兵'
-		}
+			title: '哨兵监管平台'
+		},
+		children:[
+			{
+				//哨兵驾驶舱
+				path: '/SentryCockpit',
+				name: 'SentryCockpit',
+				component: () => import('@/views/SentryCockpit'),
+				meta: {
+					title: '哨兵驾驶舱'
+				}
+			},
+			{
+				//哨兵设备中心
+				path: '/SenEquipmentCenter',
+				name: 'SenEquipmentCenter',
+				component: () => import('@/views/SenEquipmentCenter'),
+				meta: {
+					title: '哨兵-设备中心'
+				}
+			},
+			{
+				//哨兵事件中心
+				path: '/SenEventCenter',
+				name: 'SenEventCenter',
+				component: () => import('@/views/SenEventCenter'),
+				meta: {
+					title: '哨兵-事件中心'
+				}
+			},
+			{
+				//哨兵用户中心
+				path: '/useCenter',
+				name: 'useCenter',
+				component: () => import('@/views/useCenter'),
+				meta: {
+					title: '哨兵'
+				}
+			},
+		]
 	},
 	{
 		path: '/login',

src/views/SenEquipmentCenter.vue

@@ -1,28 +1,6 @@
 <!--设备中心-->
 <template>
 	<div class="visual-con hz_body">
-		<div class="s_header">
-			<div class="head_btn">
-        <router-link to="/SentryCockpit">
-          <i>驾驶舱</i>
-        </router-link>
-        <router-link class="on"  to="/SenEquipmentCenter">
-          <i>设备中心</i>
-        </router-link>
-			</div>
-			<div class="header_tit"><i>{{title}}</i></div>
-			<div class="head_btn">
-        <router-link to="/SenEventCenter">
-          <i>事件中心</i>
-        </router-link>
-        <router-link to="/useCenter">
-          <i>用户中心</i>
-        </router-link>
-			</div>
-			<div class="head_tx">
-				<span><img src="../assets/images/sentinel/hz_tx.png"/></span>
-			</div>
-		</div>
 		<!--主体-->
 		<div class="con_left">
 			<div class="list_tit">设备列表</div>
@@ -154,7 +132,7 @@
 		},
 		mounted() {
 			// 初始化地图数据
-			this.getSuperMapUrl();
+			// this.getSuperMapUrl();
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
@@ -167,7 +145,7 @@
 				title:'四平市智慧哨兵监管平台',
 				deviceList:[],       		 	// 设备列表
 				deviceListSearch:[],        	// 设备列表检索
-        deviceTotal:0,
+        		deviceTotal:0,
 				listParams:{
 					brand:'',
 					deviceName:'',
@@ -186,7 +164,7 @@
 				this.isVisible = false
 			},
 			dropLocation(lat, lng) {
-				this.$refs.supermap.dropLocation(lat*1, lng*1)
+				this.$parent.$refs.supermap.dropLocation(lat*1, lng*1)
 			},
 			pageNumHasChanged(e){
 				this.getListDeviceAll()
@@ -196,7 +174,7 @@
 				listDeviceAll(this.listParams).then(res => {
 					this.deviceList = res.rows
 					this.deviceListSearch = res.rows
-          this.deviceTotal = res.total
+          			this.deviceTotal = res.total
 					let deviceMarkersList = []
 					// hz_qy
 					if (res.rows != null && res.rows.length > 0) {
@@ -220,13 +198,13 @@
 							deviceMarkersList.push(markersMap);
 						}
 						setTimeout(() => {
-							this.$refs.supermap.clearM();
-							this.$refs.supermap.setMarkers(deviceMarkersList);
+							this.$parent.$refs.supermap.clearM();
+							this.$parent.$refs.supermap.setMarkers(deviceMarkersList);
 						}, 3000);
 					} else {
 						setTimeout(() => {
-							this.$refs.supermap.clearM();
-							this.$refs.supermap.clearMRadius();
+							this.$parent.$refs.supermap.clearM();
+							this.$parent.$refs.supermap.clearMRadius();
 						}, 1000);
 					}
 				})
@@ -276,7 +254,7 @@
 					} else if (mapDeptId == "370") {
 						num = 5;
 					}
-					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+					this.$parent.$refs.supermap.removeAllviewer(mapDeptId, -1);
 				});
 			},
 			toggleDisplay(deviceCode) {

src/views/SenEventCenter.vue

@@ -1,28 +1,6 @@
 <!--设备中心-->
 <template>
 	<div class="visual-con hz_body">
-		<div class="s_header">
-			<div class="head_btn">
-        <router-link to="/SentryCockpit">
-          <i>驾驶舱</i>
-        </router-link>
-        <router-link  to="/SenEquipmentCenter">
-          <i>设备中心</i>
-        </router-link>
-			</div>
-			<div class="header_tit"><i>{{title}}</i></div>
-			<div class="head_btn">
-        <router-link class="on" to="/SenEventCenter">
-          <i>事件中心</i>
-        </router-link>
-        <router-link to="/useCenter">
-          <i>用户中心</i>
-        </router-link>
-			</div>
-			<div class="head_tx">
-				<span><img src="../assets/images/sentinel/hz_tx.png"/></span>
-			</div>
-		</div>
 		<!--主体-->
 		<div class="spsb_down">
 			<el-date-picker
@@ -252,7 +230,7 @@
 		},
 		mounted() {
 			// 初始化地图数据
-			this.getSuperMapUrl();
+			// this.getSuperMapUrl();
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);

src/views/SentryCockpit.vue

@@ -1,28 +1,6 @@
 <!--哨兵驾驶舱-->
 <template>
 	<div class="visual-con hz_body">
-		<div class="s_header">
-			<div class="head_btn">
-        <router-link class="on" to="/SentryCockpit">
-          <i>驾驶舱</i>
-        </router-link>
-        <router-link to="/SenEquipmentCenter">
-          <i>设备中心</i>
-        </router-link>
-			</div>
-			<div class="header_tit"><i>{{title}}</i></div>
-			<div class="head_btn">
-        <router-link to="/SenEventCenter">
-          <i>事件中心</i>
-        </router-link>
-        <router-link to="/useCenter">
-          <i>用户中心</i>
-        </router-link>
-			</div>
-			<div class="head_tx">
-				<span><img src="../assets/images/sentinel/hz_tx.png" /></span>
-			</div>
-		</div>
 		<!--主体-->
 		<div class="con_left con_left_js">
 			<div class="list_tit">设备列表</div>
@@ -47,40 +25,11 @@
 			<div class="list_tit">事件分析</div>
 			<div class="sj_fx" ref="sjfx"></div>
 		</div>
-		<div class="visual-body">
-			<!--弹框演示模板 开始-->
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw1" />
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw2" />
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw3" />
-			<div class="tk_div">
-				<div class="tk1 tk_bor">
-					<h1>管道基本信息
-					<div class="icon">
-						<img src="../assets/images/sentinel/xg.png" alt="" />
-						<img src="../assets/images/sentinel/bc.png" alt="" />
-					</div>
-
-					</h1>
-					<p>管道编号：RQHSBJ20250503</p>
-					<p>管道名称：紫气大路管道</p>
-					<p>所属行业：燃气</p>
-					<p>所属企业：华生</p>
-					<p>管道种类：XXX</p>
-					<p>管道运输介质：XXX</p>
-					<p>管道深度：6000</p>
-					<p>管道建设时间：2025年2月20日</p>
-				</div>
-				<div class="tk2 tk_bor" v-if="isVisible">
-					<h1>哨兵详情</h1>
-					<div id="sbxqChart" ref="MyChart"></div>
-				</div>
-			</div>
-			<!--弹框演示模板 结束-->
-
+		<div class="visual-body" style="height: 100%;">
 
 			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
-			</supermap>
+			<!-- <supermap ref="supermap" style="width: 100%;height: 100vh;">
+			</supermap> -->
 		</div>
 	</div>
 </template>
@@ -98,7 +47,7 @@
 	} from "@/api/system/config";
 	import * as echarts from 'echarts'
 	export default {
-		name: 'MyChart',
+		name: 'SentryCockpit',
 		components: {
 			supermap,
 		},
@@ -123,7 +72,7 @@
 			this.yhfxChart();
 			this.sjfxChart();
 			// 初始化地图数据
-			this.getSuperMapUrl();
+			// this.getSuperMapUrl();
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);

src/views/SentryPage.vue

@@ -0,0 +1,805 @@
+
+ <!--
+ *@description: 哨兵基础页
+ *@author: yh Fu
+ *@date: 2025-08-29 11:16:01
+ *@version: V1.0.5
+ -->
+
+
+ <template>
+    <div class="visual-con hz_body">
+		<div class="s_header">
+			<div class="head_btn">
+                <div @click="jumpTo('/SentryCockpit',0)" :class="routerIdx == 0 ? 'on' : ''">
+                    <i>驾驶舱</i>
+                </div>
+                <div @click="jumpTo('/SenEquipmentCenter',1)" :class="routerIdx == 1 ? 'on' : ''">
+                    <i>设备中心</i>
+                </div>
+            </div>
+            <div class="header_tit"><i>{{title}}</i></div>
+            <div class="head_btn">
+                <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
+                    <i>事件中心</i>
+                </div>
+                <div @click="jumpTo('/useCenter',3)" :class="routerIdx == 3 ? 'on' : ''">
+                    <i>用户中心</i>
+                </div>
+			</div>
+			<div class="head_tx">
+				<span><img src="../assets/images/sentinel/hz_tx.png" /></span>
+			</div>
+		</div>
+		<div class="visual-body">
+            <!--主体-->
+            <router-view>
+
+            </router-view>
+            <!-- 哨兵详情弹窗 -->
+            <div class="tk_div" v-show="isDetailVisible">
+				<div class="tk1 tk_bor" style="width: 371px;height: 310px;">
+					<h1>
+						<span :title="detailInfo.deviceName || '--'" style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
+						<i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
+						<i>{{ detailInfo.workingStatus == '0' ? '在线' : '离线' }}</i>
+					</h1>
+					<p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
+					<p>设备类型：{{ detailInfo.deviceTypeText || '--' }}</p>
+					<p>设备监测指标：{{ detailInfo.threshold || '--' }}</p>
+					<p>品牌：{{ detailInfo.brand || '--' }}</p>
+					<p>所在街道：{{ detailInfo.address || '--' }}</p>
+					<p>历史数值：<a  @click="toggleDisplay(detailInfo.deviceCode)">详情</a></p>
+				</div>
+				<div class="tk2 tk_bor"  v-if="isVisible" style="position: absolute;width: 466px;height: 455px;left: 98%;">
+					<h1>哨兵详情</h1>
+					<div id="sbxqChart" ref="MyChart"></div>
+				</div>
+			</div>
+
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
+			</supermap>
+		</div>
+	</div>
+ </template>
+
+ <script>
+    import Cookies from 'js-cookie'
+	import supermap from '@/components/supermap-2.5d' //超图
+	import {
+		getUserProfile
+	} from "@/api/system/user";
+
+	import '../assets/styles/hz_body.css';
+	import {
+		selectConfigKey
+	} from "@/api/system/config";
+    import {
+		selectByDeviceId,
+        selectDailyThreshold
+	} from "@/api/sentinel"
+    let echarts = require("echarts");
+
+    export default {
+        name: 'MyChart',
+        components: {
+            supermap
+        },
+        metaInfo() {
+            return {
+                title: '四平市智慧哨兵监管平台',
+                meta: [{
+                        charset: "utf-8"
+                    },
+                    {
+                        name: "viewport",
+                        content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+                    }
+                ]
+            }
+        },
+        data() {
+			return {
+				title: '四平市智慧哨兵监管平台',
+                routerIdx:0,                    // 当前导航索引
+                detailInfo:{},                  // 设备详情信息
+                isVisible: false,               // 初始时设置为false，不显示内容
+                isDetailVisible:false,          // 设备弹窗显隐flag
+			}
+		},
+        created() {
+
+        },
+        mounted() {
+            // 初始定向到驾驶舱
+            this.$router.push({
+                path:'/SentryCockpit'
+            })
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '四平市智慧哨兵监管平台'
+			}, 1000);
+
+		},
+        methods:{
+            closeDetail(){
+				this.isDetailVisible = false
+				this.isVisible = false
+			},
+            preview(e){
+				selectByDeviceId({id:e.id}).then(res => {
+					this.detailInfo = res.data
+					this.isDetailVisible = true
+				})
+			},
+            toggleDisplay(deviceCode) {
+				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
+				if(this.isVisible){
+					selectDailyThreshold(deviceCode).then(res => {
+						this.initChart(res.data)
+					})
+				}
+			},
+            jumpTo(path,idx){
+                if(this.routerIdx == idx) return;
+                // 重置哨兵详情态
+                this.isDetailVisible = false
+				this.isVisible = false
+                // 地图清点
+                this.$refs.supermap.clearM();
+                this.routerIdx = idx
+                this.$router.push({
+                    path
+                })
+            },
+            initChart(data){
+				// 基于准备好的dom，初始化echarts实例
+				const myChart = echarts.init(document.getElementById('sbxqChart'))
+				let xdata = data.time //x轴
+				let dataArr = data.value //value
+				let dashedArr = data.threshold
+				let titleName = "阈值";
+				let titleNames = "实际值";
+				let option = {
+					backgroundColor: "rgba(25,44,59,.4)",
+					grid: {
+						left: "5%",
+						bottom: "10%",
+						top: "18%",
+						containLabel: true,
+					},
+					tooltip: {
+						trigger: "axis",
+						axisPointer: {
+							type: "shadow",
+						},
+					},
+					legend: {
+						show: true,
+						x: "center",
+						y: 20,
+						textStyle: {
+							color: "#fff", // 图例文字颜色
+							fontSize: 16,
+						},
+					},
+					xAxis: {
+						type: "category",
+						boundaryGap: false,
+						data: xdata,
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: "#fff",
+							},
+						},
+						axisLine: {
+							lineStyle: {
+								color: "transparent",
+								width: 2, //这里是为了突出显示加上的
+							},
+						},
+					},
+					"dataZoom": [
+						{
+							"show": true,
+							"height": 12,
+							"xAxisIndex": [
+							0
+							],
+							"bottom": "8%",
+							"start": 0,
+							"end": 50,
+							"handleIcon": "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+							"handleSize": "110%",
+							"handleStyle": {
+							"color": "#d3dee5"
+							},
+							"textStyle": {
+							"color": "#fff"
+							},
+							"borderColor": "#90979c"
+						},
+						{
+							"type": "inside",
+							"show": true,
+							"height": 15,
+							"start": 1,
+							"end": 35
+						}
+					],
+					yAxis: [
+						{
+							type: "value",
+							name: "(%vol)",
+							nameTextStyle: {
+								color: "#fff",
+							},
+							axisLabel: {
+								formatter: "{value}",
+								textStyle: {
+									color: "#fff",
+								},
+							},
+							axisLine: {
+								lineStyle: {
+									color: "transparent",
+									width: 2, //这里是为了突出显示加上的
+								},
+							},
+							axisTick: {
+								show: false,
+							},
+							splitLine: {
+								show: true,
+								lineStyle: {
+									color: "#11366e",
+								},
+							},
+						},
+					],
+					series: [
+						{
+							name: titleName,
+							type: "line",
+							smooth: true,
+							symbol: "none",
+							itemStyle: {
+								normal: {
+									lineStyle: {
+										type: "dashed",
+									},
+									color: "#01F699", //拐点的颜色
+									borderColor: "#01F699", //拐点边框的颜色
+								},
+							},
+							data: dashedArr,
+						},
+						{
+							name: titleNames,
+							type: "line",
+							stack: "总量",
+							smooth: true, //平滑曲线显示
+							symbol: "circle", //标记的图形为实心圆
+							symbolSize: 8,
+							itemStyle: {
+								normal: {
+									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+										{
+											offset: 0,
+											color: "rgba(3,191,255,1)",
+										},
+										{
+											offset: 1,
+											color: "rgba(18,93,236,1)",
+										},
+									]),
+									areaStyle: {
+										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+											{
+												offset: 0,
+												color: "rgba(3,191,255,.3)",
+											},
+											{
+												offset: 1,
+												color: "rgba(18,93,236,.3)",
+											},
+										]),
+									},
+								},
+							},
+							data: dataArr,
+						},
+					],
+				};
+				myChart.setOption(option);
+			},
+            getSuperMapUrl() {
+				getUserProfile().then(response => {
+					let mapDeptId = response.mapDeptId
+					let num = 0;
+					if (mapDeptId == "365") {
+						num = 0;
+					} else if (mapDeptId == "369") {
+						num = 1;
+					} else if (mapDeptId == "371") {
+						num = 2;
+					} else if (mapDeptId == "373") {
+						num = 3;
+					} else if (mapDeptId == "372") {
+						num = 4;
+					} else if (mapDeptId == "370") {
+						num = 5;
+					}
+					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+				});
+			},
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.visual-con .el-input__inner {
+		border: 1px solid #3bb8a4;
+		background-color: rgba(20, 107, 115, 0.3);
+		color: #fff;
+	}
+
+
+	.hz_body {
+		position: relative;
+	}
+
+	i,
+	b,
+	u {
+		font-style: normal;
+		text-decoration: none;
+	}
+
+	/*//头部通用*/
+	.s_header {
+		width: 100%;
+		height: 110px;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		z-index: 99;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background: url("../assets/images/sentinel/hz_header.png") no-repeat center;
+		background-size: contain;
+	}
+
+	.s_header .header_tit {
+		display: block;
+		width: 1000px;
+		height: 109px;
+		line-height: 65px;
+		text-align: center;
+
+
+	}
+
+	.s_header .header_tit i {
+		font-family: 'ysbth';
+		font-size: 40px;
+		/*text-shadow: 3px 5.196px 0px rgba(17, 20, 22, 0.22);*/
+		letter-spacing: 4px;
+		background: linear-gradient(180deg, #fff 0%, #b0d3f1 100%);
+		-webkit-background-clip: text;
+		color: transparent;
+		mix-blend-mode: screen;
+		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
+		display: block;
+		text-align: center;
+	}
+
+	.s_header .head_btn {
+		width: 316px;
+	}
+
+	.s_header .head_tx {
+		display: block;
+		position: absolute;
+		right: 20px;
+	}
+
+	.s_header .head_btn div {
+		display: inline-block;
+		background: url("../assets/images/sentinel/hz_btnbg.png") no-repeat center;
+		width: 138px;
+		margin: 0px 10px;
+		height: 29px;
+		line-height: 29px;
+		text-align: center;
+		transition: all 0.3s;
+	}
+
+	.s_header .head_btn div i {
+		display: block;
+		font-family: 'ysbth';
+		font-size: 20px;
+		background: linear-gradient(180deg, #95dded 60%, #fff 40%);
+		-webkit-background-clip: text;
+		color: transparent;
+		mix-blend-mode: screen;
+		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
+		display: block;
+		text-align: center;
+	}
+
+	.s_header .head_btn div.on,
+	.s_header .head_btn div:hover {
+		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
+		box-shadow: none;
+		filter: brightness(170%);
+	}
+
+	.con_left {
+		position: absolute;
+		z-index: 99;
+		left: 30px;
+		top: 100px;
+		width: 320px;
+		background: rgba(0, 0, 0, 0.55);
+		padding: 0px 10px 20px 10px !important;
+	}
+
+	.con_right {
+		position: absolute;
+		z-index: 99;
+		right: 30px;
+		top: 100px;
+		width: 320px;
+		background: rgba(0, 0, 0, 0.55);
+		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;
+		}
+	}
+
+
+	.con_left_js {
+		width: 400px !important;
+	}
+
+	.con_left .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;
+	}
+
+	.con_left .el-select {
+		width: 100%;
+		margin-bottom: 8px;
+	}
+
+	.el-select-dropdown {
+		border: 1px solid #3bb7a3;
+		background-color: #0c3038;
+	}
+
+	.el-select-dropdown__item {
+		color: #b0d3f1;
+	}
+
+	.el-select-dropdown__item.hover,
+	.con_left .el-select-dropdown__item:hover {
+		background-color: #0a4c5c;
+	}
+
+	.el-select-dropdown__item.selected {
+		color: #3bb7a3;
+	}
+
+	.el-input__inner {
+		color: #b0d3f1;
+		height: 35px;
+		line-height: 35px;
+	}
+
+	.el-input__icon {
+		line-height: 35px;
+		color: #5bf9e0;
+	}
+
+	.sp_list {
+		margin-top: 10px !important;
+	}
+
+	.sp_list dt {
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+
+	}
+
+	.sp_list dd {
+		display: flex;
+		flex-direction: row;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+
+	.sp_list dd:hover {
+		filter: brightness(170%) hue-rotate(-20deg);
+	}
+
+	.sp_list dd:nth-child(odd) {
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+	}
+
+	.sp_list dd:nth-child(even) {
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.38), rgba(38, 75, 80, 0.38));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+	}
+
+	.sp_list span {
+		display: inline-block;
+		text-align: left;
+		font-size: 14px;
+		color: #acdfe5;
+		height: 38px;
+		line-height: 38px;
+	}
+
+	.sp_list span.dt1 {
+		width: 60px;
+		background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
+		padding-left: 15px;
+	}
+
+	.sp_list span.dt2 {
+		width: 200px;
+		text-align: left;
+	}
+
+	.sp_list span.dt3 {
+		width: 40px;
+		text-align: center;
+		line-height: 38px;
+		position: relative;
+	}
+
+	.sp_list span.dt3 img {
+		display: inline-block;
+		position: absolute;
+		top: 10px;
+		left: 11px;
+	}
+
+	.el-pagination {
+		width: 100%;
+		margin-top: 20px !important;
+	}
+
+	.el-pagination.is-background .btn-next,
+	.el-pagination.is-background .btn-prev,
+	.el-pagination.is-background .el-pager li {
+		margin: 0 2px;
+		background-color: unset !important;
+		color: #47c5b0;
+		min-width: 26px;
+	}
+
+	.el-pagination.is-background .el-pager li:not(.disabled).active {
+		background-color: #47c5b0 !important;
+		color: #FFF;
+	}
+
+	.el-pagination.is-background .el-pager li:not(.disabled):hover {
+		background-color: #47c5b0 !important;
+		color: #FFF;
+	}
+
+	.el-pager li:hover {
+		background-color: #47c5b0 !important;
+		color: #FFF;
+	}
+
+	.hei_scroll {
+		overflow-y: scroll;
+	}
+
+	.hei_scroll::-webkit-scrollbar {
+		width: 0px;
+		height: 0px;
+	}
+
+	.hei56 {
+		height: 56vh;
+	}
+
+	.qydw1 {
+		position: absolute;
+		top: 60%;
+		left: 40%;
+		display: block;
+		width: 54px;
+		height: 77px;
+	}
+
+	.qydw2 {
+		position: absolute;
+		top: 50%;
+		left: 70%;
+		display: block;
+		width: 54px;
+		height: 77px;
+	}
+
+	.qydw3 {
+		position: absolute;
+		top: 40%;
+		left: 80%;
+		display: block;
+		width: 54px;
+		height: 77px;
+	}
+
+	.tk_div {
+		position: absolute;
+		top: 24%;
+		left: 32.2%;
+		z-index: 98;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.tk_bor {
+		padding: 15px !important;
+		border: 3px solid #28727e;
+		box-shadow: 0px 0px 24px #28727e;
+		background: rgba(0, 0, 0, 0.39);
+	}
+
+	.info-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 20px !important;
+
+		p {
+			width: 50%;
+			padding-left: 20px;
+			background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+			background-size: 12px;
+			font-size: 14px;
+			color: #fff;
+			line-height: 60px;
+		}
+	}
+
+	.tk_bor h1 {
+        display: flex;
+        align-items: center;
+		justify-content: space-between;
+		padding-left: 20px;
+		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+		font-size: 18px;
+		color: #e0e5fa;
+		font-weight: bold;
+		height: 38px;
+		line-height: 38px;
+	}
+
+	.tk_bor h1 i {
+		display: inline-block;
+		float: right;
+		background: #3bad96;
+		padding: 0px 10px;
+		color: #fff;
+		font-size: 16px;
+		height: 30px;
+		line-height: 30px;
+		position: relative;
+		border-radius: 4px;
+	}
+
+	.tk_bor h1 i::after {
+		display: block;
+		content: '';
+		border-bottom: 9px solid transparent;
+		border-right: 9px solid #3bad96;
+		border-top: 9px solid transparent;
+		position: absolute;
+		left: -8px;
+		top: 8px;
+	}
+
+	.tk_bor p {
+		padding-left: 20px;
+		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+		background-size: 12px;
+		font-size: 16px;
+		color: #fff;
+		line-height: 35px;
+	}
+
+	.tk_bor p a {
+		color: #6bf5f2;
+		text-underline-offset: 0.4em;
+		text-decoration: underline;
+	}
+
+	.tk_bor p a:hover {
+		color: #6bf5f2;
+		text-underline-offset: 0.4em;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+    .tk_bor .icon{
+		display: flex;
+		align-items: center;
+		float: right;
+
+		img{
+			margin-left: 10px;
+		}
+	}
+	.tk1 {
+		position: relative;
+		margin-right: 20px !important;
+	}
+
+	.tk1::after {
+		display: block;
+		content: '';
+		background: url("../assets/images/sentinel/hz_down.png") no-repeat left;
+		width: 46px;
+		height: 40px;
+		position: absolute;
+		bottom: -40px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	#sbxqChart {
+		width: 100%;
+		height: 91%;
+	}
+
+
+	//图表设备分析
+	.sb_fx {
+		width: 100%;
+		height: 300px;
+	}
+
+	.yh_fx {
+		width: 100%;
+		height: 260px;
+	}
+
+	.sj_fx {
+		width: 100%;
+		height: 280px;
+	}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import '@/assets/styles/base.scss';
+</style>

src/views/lookall.vue

@@ -117,7 +117,7 @@
 							{
 								btnName:'智慧哨兵',
 								btnSrc:require("@/assets/lookall/sb-icon.png"),
-                src:'/SenEquipmentCenter'
+                				src:'/SentryPage'
 							},
 							{
 								btnName:'城市生命线',