syy

src/assets/styles/hz_body.css

@@ -72,3 +72,4 @@ i,b,u{
   font-size: 12px;
   display: block;
 }
+

src/assets/styles/sb_body.css

@@ -0,0 +1,405 @@
+.hz_body{
+  position: relative;
+}
+i,b,u{
+  font-style: normal;
+  text-decoration: none;
+}
+.hei56{
+  height: 56vh;
+}
+.hei30{
+  height: 30vh;
+}
+.hei64{
+  height: 64vh;
+}
+/*哨兵*/
+/*//头部通用*/
+.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 a{
+  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;
+}
+.s_header .head_btn a 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 a.on{
+  background: url("../../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
+  box-shadow: none;
+}
+.con_left{
+  position: absolute;
+  z-index: 99;
+  left: 30px;
+  top:100px;
+  width: 320px;
+  background: rgba(0,0,0,0.25);
+  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!important;
+  font-family: 'ysbth';
+  font-size: 20px;
+  color: #fff;
+  margin-bottom: 10px!important;
+  position: relative;
+}
+.list_tit i{
+  display: block;
+  background: url("../../assets/images/sentinel/hz_list_tit2.png") no-repeat center;
+width: 154px;
+  height: 34px;
+  line-height: 34px;
+  font-size: 14px;
+  color: #fff;
+  position: absolute;
+  right: 7px;
+  top:24px;
+  text-align: center;
+  font-family: normal;
+}
+.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;
+}
+
+.con_right{
+  position: absolute;
+  z-index: 99;
+  right: 30px;
+  top:100px;
+  width: 320px;
+  background: rgba(0,0,0,0.25);
+  padding: 0px 10px 20px 10px!important;
+}
+
+/*分页*/
+.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;
+}
+
+/*弹框*/
+.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);
+}
+
+.tk_bor h1{
+  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;
+}
+
+.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%);
+}
+.red_div .tk_bor{
+  border: 3px solid rgba(255, 50, 50, 0.36);
+  box-shadow: 0px 0px 24px rgba(255, 38, 0, 0.71);
+  background: rgba(73,31,32,0.70);
+}
+.red_div .tk1::after{
+  background: url("../../assets/images/sentinel/hz_down2.png") no-repeat left;
+}
+.red_div .tk_bor h1{
+  background: url("../../assets/images/sentinel/hz_k2.png") no-repeat left;
+}
+.red_div .tk_bor p{
+  background: url("../../assets/images/sentinel/hz_k2.png") no-repeat left;
+  background-size: 12px;
+}
+.red_div .tk_bor p a{
+  color: #ffda10;
+  text-underline-offset: 0.4em;
+  text-decoration: underline;
+}
+.red_div .tk_bor p a:hover{
+  color: #ffda10;
+  text-underline-offset: 0.4em;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+
+.hei_scroll{
+  overflow-y: scroll;
+}
+.hei_scroll::-webkit-scrollbar{
+  width: 0px;
+  height: 0px;
+}
+
+
+/*通用列表*/
+.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;
+}
+.list_tit2{
+  margin-bottom: 20px!important;
+}
+.yjsj_list span.dt2{
+    width: 100px;
+    text-align: left;
+}
+.yjsj_list span.dt3{
+  width: 130px;
+  text-align: left;
+}
+.visual-con .el-input__inner {
+  border: 1px solid #3bb8a4;
+  background-color: rgba(20, 107, 115, 0.4);
+  color: #fff;
+}
+
+
+/*弹框样式*/
+.el-dialog {
+  background: rgba(34, 42, 48, 0.71);
+  box-shadow: rgba(105, 226, 255, 0.6) 0px 0px 18px;
+  /*box-shadow: rgba(30, 168, 255, 0.35) 0px 0px 18px inset;*/
+  border: 1px solid rgba(37, 139, 153, 0.7);
+}
+.el-dialog__header{
+  background-color:initial;
+  background-image: url("../images/sentinel/hz_k.png");
+  background-repeat:no-repeat;
+  background-position:15px;
+
+  padding-left: 40px!important;
+}
+.el-dialog__title{
+  color: #e0e5fa!important;
+  font-size: 18px!important;
+  font-weight: 900!important;
+}
+.el-dialog__headerbtn .el-dialog__close {
+  color: #2da0b5;
+}

src/router/index.js

@@ -84,14 +84,23 @@ export const constantRoutesNew = [{
 	},
 	{
 		//哨兵设备中心
-		path: '/Sentinel',
-		name: 'Sentinel',
-		component: () => import('@/views/Sentinel'),
+		path: '/SenEquipmentCenter',
+		name: 'SenEquipmentCenter',
+		component: () => import('@/views/SenEquipmentCenter'),
 		meta: {
 			// title: '水利云图'
-			title: '哨兵'
+			title: '哨兵-设备中心'
 		}
-	},
+	},{
+        //哨兵事件中心
+        path: '/SenEventCenter',
+        name: 'SenEventCenter',
+        component: () => import('@/views/SenEventCenter'),
+        meta: {
+            // title: '水利云图'
+            title: '哨兵-事件中心'
+        }
+    },
 	{
 		//哨兵用户中心
 		path: '/useCenter',

src/views/Sentinel.vue

@@ -101,7 +101,7 @@
 		selectDailyThreshold
 	} from "@/api/sentinel"
 
-	import '../assets/styles/hz_body.css';
+	import '../assets/styles/sb_body.css';
 
 	import {
 		selectConfigKey
@@ -450,216 +450,9 @@
 		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 a{
-		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 a 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 a.on ,.s_header .head_btn a: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.25);
-		padding: 0px 10px 20px 10px!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%;
@@ -685,85 +478,6 @@
 		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);
-	}
-	.tk_bor h1{
-		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;
-	}
-	.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: 250px;
 		height: 200px;

src/views/SenEventCenter.vue

@@ -0,0 +1,524 @@
+<!--设备中心-->
+<template>
+	<div class="visual-con hz_body">
+		<div class="s_header">
+			<div class="head_btn">
+				<a><i>驾驶舱</i></a>
+				<a><i>设备中心</i></a>
+			</div>
+			<div class="header_tit"><i>{{title}}</i></div>
+			<div class="head_btn">
+				<a class="on"><i>事件中心</i></a>
+				<a><i>用户中心</i></a>
+			</div>
+			<div class="head_tx">
+				<span><img src="../assets/images/sentinel/hz_tx.png"/></span>
+			</div>
+		</div>
+		<!--主体-->
+		<div class="spsb_down">
+			<el-date-picker
+					v-model="value"
+					type="date"
+					placeholder="选择日期">
+			</el-date-picker>
+		</div>
+		<div class="con_left">
+			<div class="list_tit">预警中心</div>
+			<div class="yjzx_div">
+				<div class="yjzx_k1">
+					<img src="../assets/images/sentinel/sb_icon1.png"/>
+					<span>总计</span>
+					<b>235</b>
+				</div>
+				<div class="yjzx_k2">
+					<p><span>震动预警</span><b>60</b></p>
+					<p><span>水位预警</span><b>70</b></p>
+					<p><span>位移预警</span><b>45</b></p>
+					<p><span>泄露预警</span><b>60</b></p>
+				</div>
+			</div>
+			<div class="list_tit">事件列表</div>
+			<el-select v-model="value" placeholder="请选择">
+				<el-option
+						v-for="item in options"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value">
+				</el-option>
+			</el-select>
+			<el-input
+					placeholder="请输入内容"
+					suffix-icon="el-icon-search"
+					v-model="input1">
+			</el-input>
+			<dl class="sp_list">
+				<dt><span class="dt1">序号</span><span class="dt2">设备名称</span><span class="dt3">定位</span></dt>
+				<div class="hei_scroll hei30">
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+				</div>
+			</dl>
+			<el-pagination
+					background
+					layout="prev, pager, next"
+					:total="100">
+			</el-pagination>
+		</div>
+		<div class="con_right">
+			<div class="list_tit list_tit2">应急中心<i>发起应急事件</i></div>
+			<el-input
+					placeholder="请输入事件名称"
+					suffix-icon="el-icon-search"
+					v-model="input1">
+			</el-input>
+			<dl class="sp_list yjsj_list">
+				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>
+				<div class="hei_scroll hei64">
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+				</div>
+			</dl>
+			<el-pagination
+					background
+					layout="prev, pager, next"
+					:total="100">
+			</el-pagination>
+		</div>
+		<div class="visual-body">
+			<!--弹框演示模板 开始-->
+			<img src="../assets/images/sentinel/hz_qy4.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 red_div">
+				<div class="tk1 tk_bor">
+					<h1>事件详情<i>使用中</i></h1>
+					<p>事件名称：超级大姐发生燃气事件</p>
+					<p>上报设备：燃气哨兵</p>
+					<p>上报时间：2025/02/06 11:45:11</p>
+					<p>事件类型：燃气事件</p>
+					<p>所在街道：紫气大路</p>
+					<p>事件坐标：43°43′5% 125°19</p>
+					<p>所属部门：燃气</p>
+					<p>处理流程：<a  @click="dialogVisible = true">详情</a></p>
+				</div>
+				<div class="tk2 tk_bor"  v-if="isVisible">
+					<h1>哨兵详情</h1>
+					<div id="sbxqChart" ref="MyChart"></div>
+				</div>
+			</div>
+			<!--弹框演示模板 结束-->
+
+            <!--弹框 开始-->
+            <el-dialog
+                    title="事件处理流程"
+                    :visible.sync="dialogVisible"
+                    width="70%"
+                    :before-close="handleClose">
+
+                <div class="sjlc_con">
+                    <div class="sjlc_div">
+                        <i><img src="../assets/images/sentinel/sb_icon2.png" /></i>
+                        <h4>事件上报</h4>
+                        <p>事件名称：超级大街燃气爆炸</p>
+                        <p>上报时间：2025/02/06 11:56:25</p>
+                        <p>上报设备：GBD15</p>
+                        <p>预警类型：燃气爆炸</p>
+                        <p>事件坐标：43°43′5% 125°19</p>
+                    </div>
+                    <u></u>
+                    <div class="sjlc_div">
+                        <i><img src="../assets/images/sentinel/sb_icon3.png" /></i>
+                        <h4>事件研判</h4>
+                        <p>事件名称：超级大街燃气爆炸</p>
+                        <p>上报时间：2025/02/06 11:56:25</p>
+                        <p>上报设备：GBD15</p>
+                        <p>预警类型：燃气爆炸</p>
+                        <p>事件坐标：43°43′5% 125°19</p>
+                    </div>
+                    <u class="date"></u>
+                    <div class="sjlc_div date_div">
+                        <i><img src="../assets/images/sentinel/sb_icon4.png" /></i>
+                        <h4>事件派发</h4>
+                        <p>事件名称：超级大街燃气爆炸</p>
+                        <p>上报时间：2025/02/06 11:56:25</p>
+                        <p>上报设备：GBD15</p>
+                        <p>预警类型：燃气爆炸</p>
+                        <p>事件坐标：43°43′5% 125°19</p>
+                    </div>
+                    <u></u>
+                    <div class="sjlc_div">
+                        <i><img src="../assets/images/sentinel/sb_icon5.png" /></i>
+                        <h4>事件处置</h4>
+                        <p>事件名称：超级大街燃气爆炸</p>
+                        <p>上报时间：2025/02/06 11:56:25</p>
+                        <p>上报设备：GBD15</p>
+                        <p>预警类型：燃气爆炸</p>
+                        <p>事件坐标：43°43′5% 125°19</p>
+                    </div>
+                    <u></u>
+                    <div class="sjlc_div">
+                        <i><img src="../assets/images/sentinel/sb_icon6.png" /></i>
+                        <h4>已经办结</h4>
+                        <p>事件名称：超级大街燃气爆炸</p>
+                        <p>上报时间：2025/02/06 11:56:25</p>
+                        <p>上报设备：GBD15</p>
+                        <p>预警类型：燃气爆炸</p>
+                        <p>事件坐标：43°43′5% 125°19</p>
+                    </div>
+                </div>
+				<div class="sjcl_media_con">
+					<div class="sjcl_media">
+						<img src="../assets/images/sentinel/sb_img1.png"/>
+					</div>
+					<div class="sjcl_img">
+						<img src="../assets/images/sentinel/sb_img2.png"/>
+						<img src="../assets/images/sentinel/sb_img2.png"/>
+						<img src="../assets/images/sentinel/sb_img2.png"/>
+						<img src="../assets/images/sentinel/sb_img2.png"/>
+					</div>
+				</div>
+
+            </el-dialog>
+            <!--弹框 结束-->
+
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			</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/sb_body.css';
+
+	import {
+		selectConfigKey
+	} from "@/api/system/config";
+	// import * as echarts from 'echarts'
+	let echarts = require("echarts");
+	export default {
+		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"
+					}]
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '四平市智慧哨兵监管平台'
+			}, 1000);
+		},
+		data() {
+			return {
+				title:'四平市智慧哨兵监管平台',
+                dialogVisible: false,
+				pickerOptions: {
+					disabledDate(time) {
+						return time.getTime() > Date.now();
+					},
+					shortcuts: [{
+						text: '今天',
+						onClick(picker) {
+							picker.$emit('pick', new Date());
+						}
+					}, {
+						text: '昨天',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24);
+							picker.$emit('pick', date);
+						}
+					}, {
+						text: '一周前',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+							picker.$emit('pick', date);
+						}
+					}]
+				},
+				value: '',
+				input:'',
+				input1: '',
+				title:'四平市智慧哨兵监管平台',
+				options: [{
+					value: '选项1',
+					label: '华生1'
+				}, {
+					value: '选项2',
+					label: '华生2'
+				}, {
+					value: '选项3',
+					label: '华生3'
+				}, {
+					value: '选项4',
+					label: '华生4'
+				}, {
+					value: '选项5',
+					label: '华生5'
+				}],
+
+			}
+		},
+		methods: {
+			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);
+				});
+			},
+// 弹框开启
+            handleClose(done) {
+                this.$confirm('确认关闭？')
+                    .then(_ => {
+                        done();
+                    })
+                    .catch(_ => {});
+            }
+        }
+	}
+</script>
+<style rel="stylesheet/scss" lang="scss">
+	.spsb_down{
+		position: absolute;
+		top:52px;
+		left: 30px;
+		z-index: 999;
+		.el-input__inner{
+			background: linear-gradient(to right, rgb(37,50,54) 0%, rgb(43,140,152) 100%);
+			border: 1px solid;
+			border-image: linear-gradient(to top, #aafae0, #59f2cc, #4ab2ec) 1;
+
+		}
+	}
+	.yjzx_div{
+		display: flex;
+		flex-direction: row;
+		text-align: center;
+		margin: 15px 0px!important;
+		.yjzx_k1{
+			background: url("../assets/images/sentinel/sb_btnbg.png") no-repeat center;
+			background-size: 100% 100%;
+			width: 127px;
+			height: 211px;
+			img{
+				display: block;
+				margin: 55px auto 20px auto;
+			}
+
+		}
+		.yjzx_k2{
+			height: 211px;
+			width: 260px;
+			p{
+				display: inline-block;
+				background: url("../assets/images/sentinel/sb_btnbg2.png") no-repeat center;
+				background-size: 100% 100%;
+				width: 88px;
+				height: 101px;
+			}
+			:nth-child(1){
+				margin-right: 7px;
+				margin-bottom: 7px;
+			}
+			:nth-child(3){
+				margin-right: 7px;
+			}
+			span{
+				padding-top: 20px;
+			}
+			b{
+				padding-top: 10px;
+			}
+		}
+		span{
+			display: block;
+			font-size: 16px;
+			color: #ceebee;
+			height: 30px;
+			line-height: 30px;
+		}
+		b{
+			display: block;
+			font-size: 24px;
+			font-family: ysbth;
+			color: #fff;
+		}
+	}
+    .qydw1{
+        position: absolute;
+        top: 63.5%;
+        left: 38.2%;
+        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;
+    }
+    .sjlc_con{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .sjlc_div{
+            background: rgba(50, 161, 175, 0.2);
+            border: 1px solid #1e6a78;
+            width: 250px;
+            height: 300px;
+            padding: 25px;
+            i{
+                display: block;
+                width: 50px;
+                height: 50px;
+                background:linear-gradient(to bottom,rgba(51,140,161,1),rgba(42,104,135,0.7));
+                border-radius: 50%;
+                margin: 5px auto;
+                text-align: center;
+                img{
+                    margin: 12px auto!important;
+                    display: inline-block;
+                }
+            }
+			h4{
+				font-size: 18px;
+				font-weight: 900;
+				color: #fff;
+				text-align: center;
+				height: 40px;
+				line-height: 40px;
+			}
+			p{
+				font-size: 14px;
+				color: #fff;
+				line-height: 30px;
+			}
+        }
+		.date_div{
+			background: linear-gradient(to top,rgba(170, 250, 224, 0.7),rgba(89, 242, 204, 0.8),rgba(74, 178, 236, 0.7));
+			border: 1px solid #26cda0;
+			i{
+				display: block;
+				width: 60px;
+				height: 60px;
+				background:linear-gradient(to bottom,rgba(38,255,196,1),rgba(0,198,255,0.7));
+				border-radius: 50%;
+				margin: 5px auto;
+				text-align: center;
+				img{
+					margin: 14px auto!important;
+				}
+			}
+		}
+        u{
+            background: url("../assets/images/sentinel/sb_icon7.png") no-repeat center;
+            display: block;
+            width: 10px;
+            height: 16px;
+            margin: auto auto;
+        }
+		.date{
+			background: url("../assets/images/sentinel/sb_icon8.png") no-repeat center;
+
+		}
+    }
+	.sjcl_media_con{
+		display: flex;
+		flex-direction: row;
+		margin-top: 20px!important;
+		.sjcl_media{
+			width: 839px;
+			height: 512px;
+			margin-right: 15px;
+		}
+		.sjcl_img{
+			width: 527px;
+			img{
+				display: inline-block;
+				width: 255px;
+				height: 247px;
+			}
+			:nth-child(1){
+				margin-right: 10px!important;
+				margin-bottom: 15px!important;
+			}
+			:nth-child(2){
+				margin-bottom: 15px!important;
+			}
+			:nth-child(3){
+				margin-right: 10px!important;
+			}
+		}
+	}
+
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import '@/assets/styles/base.scss';
+</style>