事件详情地图

src/api/forest.js

@@ -23,3 +23,19 @@ export function getDeptEventCount(param) {
     data: param
   })
 }
+// 右侧获取天气
+export function getWeather(param) {
+  return request({
+    url: '/center-fire/VisuForestCloudMapController/getWeather',
+    method: 'post',
+    data: param
+  })
+}
+// 右侧获取事件列表
+export function getEventList(param) {
+  return request({
+    url: '/center-fire/VisuForestCloudMapController/getEventList',
+    method: 'post',
+    data: param
+  })
+}

src/assets/styles/base.scss

@@ -18,16 +18,16 @@ $eventBG:#0b284e;
 
 
 //渐变
-$GradualGreen:180deg, rgba($color: #124799, $alpha: .8) , 
+$GradualGreen:180deg, rgba($color: #124799, $alpha: .8) ,
 rgba($color: #04151e, $alpha: .8);
 
-$conBg:180deg, rgba($color: #0f162c, $alpha: 1) , 
+$conBg:180deg, rgba($color: #0f162c, $alpha: 1) ,
 rgba($color: #040b1f, $alpha: 1);
 
-$btmMemu:180deg, rgba($color: #0d1620, $alpha: 1) , 
+$btmMemu:180deg, rgba($color: #0d1620, $alpha: 1) ,
 rgba($color: #020f2a, $alpha: 1);
 
-$boxBG:180deg, rgba($color: #0d2760, $alpha: 1) , 
+$boxBG:180deg, rgba($color: #0d2760, $alpha: 1) ,
 rgba($color: #081a41, $alpha: 1);
 
 //内阴影
@@ -60,13 +60,16 @@ $state-wcl:#ff9c00;
 $state-wyc:#1cef84;
 
 $eventStateColor-xsb:#11b57e;
-$eventStateColor-yqr:#f18425;
-$eventStateColor-ywc:#9179f1;
+$eventStateColor-sb:#11b57e;
+$eventStateColor-qs:#f18425;
+$eventStateColor-wb: #c2bc43;
+$eventStateColor-cf: #a23737;
+$eventStateColor-bj: #6ae08f;
+$eventStateColor-gd: #0bef03;
 
 $eventStateColor-cb:#e63b4a;
 $eventStateColor-yqs:#015bff;
 $eventStateColor-ld:#fe6d02;
-$eventStateColor-bj:#30cb2e;
 $eventStateColor-tb:#7835f2;
 
 
@@ -324,7 +327,7 @@ div::-webkit-scrollbar {
 }
 .line-h-1{
 	line-height: 1rem;
-	
+
 }
 
 .w-100p{
@@ -373,12 +376,12 @@ div::-webkit-scrollbar {
 	margin-right: 1rem;
 }
 .justify-content-bt{
-	
+
 	justify-content:space-between
 }
 .justify-content-end{
 	justify-content:end
-}	
+}
 .text-right{
 	text-align: right;
 }
@@ -415,7 +418,7 @@ div::-webkit-scrollbar {
 		line-height: 1rem;
 		padding-bottom: .2rem;
 		border-bottom: 1px solid $fBlueHover ;
-	
+
 	}
 }
 .t-a-center{
@@ -434,7 +437,7 @@ div::-webkit-scrollbar {
 			top: 0;
 			right: 0;
 			z-index: 1000;
-			
+
 			button{
 			color: #3cd7ef;
 			    background: 180deg, rgba(9, 30, 54, 0.8), rgba(6, 27, 39, 0.8);
@@ -457,11 +460,11 @@ div::-webkit-scrollbar {
 				padding:0.5rem  1rem;
 				cursor: pointer;
 			}
-			
+
 }
 
 //弹层样式
-	
+
 .dia-event-info{
 	   .el-row{
 		    height: 75vh;
@@ -476,7 +479,7 @@ div::-webkit-scrollbar {
 		   		  align-items: center;
 		   		  border: 1px $barBorder;
 		   		  padding: 0.5 1rem;
-		   		
+
 		   		  .dia-left-top-tit{
 		   			  padding: .5rem;
 		   			  background: linear-gradient($boxBG);
@@ -502,10 +505,10 @@ div::-webkit-scrollbar {
 			       width: 90%;
 				   border-radius: 1rem;
 			       height: 4rem;
-			   
+
 		   }
 	   }
-	   
+
       .dia-right{
 		  height: 75vh;
 		   position: absolute;
@@ -531,15 +534,15 @@ div::-webkit-scrollbar {
 				justify-content: space-between;
 				padding: .5rem 0;
 				.z-info-btm-grp-left{
-					
+
 				}
-				
+
 				.z-info-btm-grp-right{
-					
+
 				}
 			}
 			.z-info-btm-input{
-				
+
 				width: 100%;
 				display: flex;
 				flex-direction: column;
@@ -555,7 +558,7 @@ div::-webkit-scrollbar {
 				}
 			}
 		   }
-		   
+
 	  }
 
 }
@@ -568,7 +571,7 @@ div::-webkit-scrollbar {
 		overflow: hidden;
 		background: linear-gradient($conBg);
 		position: absolute;
-		
+
 		.map-tip{
 			.d-l-con{
 				width: 100%;
@@ -661,7 +664,7 @@ div::-webkit-scrollbar {
 
 			.leftbar,.rightbar {
 				position: absolute;
-				font-size: 14px;				
+				font-size: 14px;
 				top: 11vh;
 				height: auto;
 				display: flex;
@@ -677,7 +680,7 @@ div::-webkit-scrollbar {
 				-webkit-transform: translateX(0);
 				transform: translateX(0);
 				transition: all 0.5s ease-in-out;
-				
+
 			}
 			.rightbar{
 				width: 19rem;
@@ -691,7 +694,7 @@ div::-webkit-scrollbar {
 				.right-item2{
 					width: 18rem;
 				}
-				
+
 			}
 			.rightbar-index{
 				width: 36rem !important;
@@ -869,7 +872,7 @@ div::-webkit-scrollbar {
 					.el-input__inner:hover{
 						background: #00335c;
 					}
-					
+
 					.el-input__icon{
 						line-height: .5rem;
 						height: auto;
@@ -912,7 +915,7 @@ div::-webkit-scrollbar {
 						color: $inBlue;
 						padding: .2rem 0 0 .8rem;
 					    text-align: center;
-						
+
 					}
 					.weather-info{
 						color: $inBlue;
@@ -930,7 +933,7 @@ div::-webkit-scrollbar {
 						margin: 1rem auto;
 						display: flex;
 						align-items: center;
-						
+
 						.state-block1,.state-block2,.state-block3,.state-block4,.state-block5{
 							width: 20%;
 							height: .2rem;
@@ -953,7 +956,7 @@ div::-webkit-scrollbar {
 						.state-on{
 							height: .6rem;
 						}
-						
+
 					}
 					//事件列表
 					.event-list-search{
@@ -965,8 +968,8 @@ div::-webkit-scrollbar {
 							color: $inBlue;
 						}
 					}
-				
-					
+
+
 					// 清除el折叠样式
 					.el-collapse{
 						border: none;
@@ -1080,12 +1083,12 @@ div::-webkit-scrollbar {
 								border:1px $barBorder;
 								.el-card__body{
 									padding: 1rem;
-									
+
 								}
 							}
 						}
-						
-						
+
+
 					}
 
 					.mg-t-8 {
@@ -1124,7 +1127,7 @@ div::-webkit-scrollbar {
 			}
 			.d-evnet-list-con{
 				padding: .5rem .5rem !important;
-				align-items:  flex-start !important; 
+				align-items:  flex-start !important;
 			}
 			.sj-collapse{
 				width: 100% !important;
@@ -1176,7 +1179,7 @@ div::-webkit-scrollbar {
 					.el-table__cell{
 						border-right: 1px $tableBorder; ;
 					}
-					
+
 				}
 				.el-table::before {
 					background:  $searchBG;
@@ -1229,8 +1232,8 @@ div::-webkit-scrollbar {
 				.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
 					background-color: #0f3655;
 				}
-				
-				
+
+
 				.icon-con{
 					display: flex;
 					margin-bottom: 1rem;
@@ -1244,7 +1247,7 @@ div::-webkit-scrollbar {
 						height: 1.5rem;
 						font-size: 1rem;
 					}
-					
+
 					.icon-mid{
 						width: 2.5rem;
 						height: 2.5rem;
@@ -1287,17 +1290,17 @@ div::-webkit-scrollbar {
 							line-height: 1rem;
 							margin-right: .3rem;
 						}
-					
+
 						h6 {
 							font-size: 1.2rem;
 							font-family: $fontLED;
 							color: $fBlue;
 						}
 					}
-					
+
 				}
-				
-				
+
+
 
 				.el-tag--dark {
 					border: 0
@@ -1321,7 +1324,7 @@ div::-webkit-scrollbar {
 					h4 {
 						font-size: .7rem;
 						margin: 0;
-						
+
 						font-weight: normal;
 						display: block;
 						max-width: 90%;
@@ -1365,7 +1368,7 @@ div::-webkit-scrollbar {
 				}
 				.event-list-text {
 					width: 77% !important;
-					display: flex; 
+					display: flex;
 					align-items: left;
 					flex-direction: column !important;
 					h3 {
@@ -1376,7 +1379,7 @@ div::-webkit-scrollbar {
 						display: block;
 						line-height: 1rem;
 						padding-bottom: .2rem;
-									
+
 					}
 					h4 {
 						font-size: .7rem;
@@ -1387,16 +1390,16 @@ div::-webkit-scrollbar {
 						line-height: 1rem;
 						padding-bottom: .1rem;
 						justify-content:space-between;
-						
+
 						span{
 							margin-right: .5rem;
 						}
-				
+
 					}
 					i{
 					 margin-right: .6rem;
 					}
-				
+
 					.i-small {
 						width: .5rem;
 						height: .5rem;
@@ -1409,7 +1412,7 @@ div::-webkit-scrollbar {
 						display: inline-block;
 						background: none;
 					}
-				
+
 				}
 				.state-wcl , .state-wyc{
 					font-size: 0.7rem!important;
@@ -1447,7 +1450,7 @@ div::-webkit-scrollbar {
 					align-content: center;
 					justify-content: space-between;
 					color: $white;
-					
+
 					.bgt-state-frequency{
 						width: 1.2rem;
 						height: 1.2rem;
@@ -1455,12 +1458,12 @@ div::-webkit-scrollbar {
 						background-color: #1294a0;
 						text-align: center;
 						line-height: 1.2rem;
-						
+
 					}
 					.bgt-state-minute{
-						
+
 					}
-					
+
 				}
 				.bgt-info{
 					width: 60%;
@@ -1468,17 +1471,35 @@ div::-webkit-scrollbar {
 					flex-direction: column;
 					//事件状态
 					//新上报
-					.event-state-xsb{
+					.event-state-sb{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-sb;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-sb{
+							width: fit-content;
+							background-color: $eventStateColor-sb;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
+					.event-state-qs{
 						display:flex;
 						align-items: center;
 						i{
-							color:$eventStateColor-xsb;
+							color:$eventStateColor-qs;
 							font-size: 1rem;
 							margin-left: -.5rem;
 						}
-						.event-list-state-xsb{
+						.event-list-state-qs{
 							width: fit-content;
-							background-color: $eventStateColor-xsb;
+							background-color: $eventStateColor-qs;
 							color: $white;
 							padding: .4rem;
 							margin-left: -.5rem;
@@ -1486,17 +1507,17 @@ div::-webkit-scrollbar {
 							border-radius: .2rem;
 						}
 					}
-					.event-state-yqr{
+					.event-state-wb{
 						display:flex;
 						align-items: center;
 						i{
-							color:$eventStateColor-yqr;
+							color:$eventStateColor-wb;
 							font-size: 1rem;
 							margin-left: -.5rem;
 						}
-						.event-list-state-yqr{
+						.event-list-state-wb{
 							width: fit-content;
-							background-color: $eventStateColor-yqr;
+							background-color: $eventStateColor-wb;
 							color: $white;
 							padding: .4rem;
 							margin-left: -.5rem;
@@ -1504,17 +1525,17 @@ div::-webkit-scrollbar {
 							border-radius: .2rem;
 						}
 					}
-					.event-state-ywc{
+					.event-state-cf{
 						display:flex;
 						align-items: center;
 						i{
-							color:$eventStateColor-ywc;
+							color:$eventStateColor-cf;
 							font-size: 1rem;
 							margin-left: -.5rem;
 						}
-						.event-list-state-ywc{
+						.event-list-state-cf{
 							width: fit-content;
-							background-color: $eventStateColor-ywc;
+							background-color: $eventStateColor-cf;
 							color: $white;
 							padding: .4rem;
 							margin-left: -.5rem;
@@ -1522,7 +1543,43 @@ div::-webkit-scrollbar {
 							border-radius: .2rem;
 						}
 					}
-					
+					.event-state-bj{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-bj;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-bj{
+							width: fit-content;
+							background-color: $eventStateColor-bj;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
+					.event-state-gd{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-gd;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-gd{
+							width: fit-content;
+							background-color: $eventStateColor-gd;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
+
 					.bgt-info-name{
 						color: $inBlue;
 						font-weight: bolder;
@@ -1536,15 +1593,15 @@ div::-webkit-scrollbar {
 							}
 						}
 					}
-					
+
 				}
 				.bgt-img{
 					img{
 						margin-right: .5rem;
 					}
 				}
-				
-			
+
+
 
 			}
 			.d-l-con:hover,
@@ -1572,8 +1629,8 @@ div::-webkit-scrollbar {
 
 
 			}
-			
-			
+
+
 			.d-l-con-icon {
 				font-size: .7rem;
 				cursor: pointer;
@@ -1673,7 +1730,7 @@ div::-webkit-scrollbar {
 							line-height: 1rem;
 							margin-right: .3rem;
 						}
-					
+
 						h6 {
 							font-size: 1.2rem;
 							font-family: $fontLED;
@@ -1691,7 +1748,7 @@ div::-webkit-scrollbar {
 						margin-top: .5rem;
 						justify-content: space-around;
 					}
-					
+
 				}
 				.icon-con:hover ,.on{
 					box-shadow: $shadowListHover;
@@ -1699,19 +1756,19 @@ div::-webkit-scrollbar {
 						h5 {
 							color: $white;
 						}
-					
+
 						h6 {
 							color: $white;
 						}
 					}
-					
+
 				}
-							
-			
+
+
 				.el-tag--dark {
 					border: 0
 				}
-			
+
 				.list-tit {
 					color: $fListTitle !important;
 					font-size: 0.5rem !important;
@@ -1719,12 +1776,12 @@ div::-webkit-scrollbar {
 					display: block;
 					max-width: 90%;
 				}
-			
+
 				.d-l-l-text {
 					display: flex;
 					align-items: center;
 					flex: 1;
-			
+
 					h4 {
 						font-size: .7rem;
 						margin: 0;
@@ -1733,12 +1790,12 @@ div::-webkit-scrollbar {
 						display: block;
 						max-width: 90%;
 						line-height: 1rem;
-			
+
 					}
 					i{
 					 margin-right: .6rem;
 					}
-			
+
 					.i-small {
 						width: .5rem;
 						height: .5rem;
@@ -1751,7 +1808,7 @@ div::-webkit-scrollbar {
 						display: inline-block;
 						background: none;
 					}
-			
+
 				}
 				.state-wcl , .state-wyc{
 					font-size: 0.7rem!important;
@@ -1766,7 +1823,7 @@ div::-webkit-scrollbar {
 				.state-wyc{
 					color:$state-wyc;
 				}
-			
+
 				.d-l-l-count {
 					width: 25%;
 					font-size: 1.2rem;
@@ -1775,9 +1832,9 @@ div::-webkit-scrollbar {
 					color: $fBlueG;
 					line-height: 1.2rem;
 				}
-				
-			
-			
+
+
+
 			}
 
 //一体化弹层
@@ -1813,7 +1870,7 @@ div::-webkit-scrollbar {
 					font-weight: normal;
 				}
 			}
-			
+
 		}
 		.el-picker-panel__content{
 			width: 100%;
@@ -1846,17 +1903,17 @@ div::-webkit-scrollbar {
     margin-top: 10vh !important;
 }
 
-	
+
 .el-select-dropdown__item{
 	span{
 		padding-left: 1rem;
 	}
-	
-}			
+
+}
 .el-form-item{
 			margin-bottom: 1rem;
 		}
-		
+
 .e-btm-btn{
 		width: 100%;
 		height: 3rem;
@@ -1868,7 +1925,7 @@ div::-webkit-scrollbar {
 		.el-select-dropdown{
 			margin-left: 1rem;
 			padding-left: 1rem;
-		}		
+		}
 		.el-input__inner{
 							background: $searchBG;
 							border: 1px solid #2a3a60;
@@ -2009,7 +2066,7 @@ div::-webkit-scrollbar {
 			}
 		}
 	}
-	
+
     .event-info-con{
 		width: 100%;
 		display: flex;
@@ -2050,7 +2107,7 @@ div::-webkit-scrollbar {
     .el-dialog:not(.is-fullscreen) {
       margin-top: 5.5vh !important;
     }
-	
+
   }
   .bignav{
 	  white-space: nowrap!important;
@@ -2077,4 +2134,4 @@ div::-webkit-scrollbar {
 	-webkit-transform: translateX(-20rem) !important;
 	transform: translateX(-20rem)  !important;
 	transition: all 0.5s ease-in-out  !important;
-}
+}

src/router/index.js

@@ -106,9 +106,9 @@ export const constantRoutes = [{
 		}
 	},
 	{
-		path: '/dialog',
-		name: 'dialog',
-		component: () => import('@/views/dialog'),
+		path: '/eventdetailsdialog',
+		name: 'eventdetailsdialog',
+		component: () => import('@/views/eventdetailsdialog'),
 		meta: {
 			title: '事件弹出层'
 		}
@@ -199,9 +199,9 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
-		path: '/dialog',
-		name: 'dialog',
-		component: () => import('@/views/dialog'),
+		path: '/eventdetailsdialog',
+		name: 'eventdetailsdialog',
+		component: () => import('@/views/eventdetailsdialog'),
 		meta: {
 			title: '事件弹出层'
 		}

src/views/eventdetailsdialog.vue

@@ -206,7 +206,8 @@ export default {
     }
   },
   methods: {
-    showEventDialog() {
+    showEventDialog(id) {
+      alert(id)
       this.eventDialog = true
     }
   }