UI

src/assets/styles/base.scss

@@ -13,12 +13,13 @@ $listText:#1a7988;
 $textGray:#ccc;
 $grayBlue:#5685a0;
 $tipHover:#2082ba;
+$eventBG:#0b284e;
 
 
 
 //渐变
-$GradualGreen:180deg, rgba($color: #091e36, $alpha: .8) , 
-rgba($color: #061b27, $alpha: .8);
+$GradualGreen:180deg, rgba($color: #124799, $alpha: .8) , 
+rgba($color: #04151e, $alpha: .8);
 
 $conBg:180deg, rgba($color: #0f162c, $alpha: 1) , 
 rgba($color: #040b1f, $alpha: 1);
@@ -26,9 +27,12 @@ rgba($color: #040b1f, $alpha: 1);
 $btmMemu:180deg, rgba($color: #0d1620, $alpha: 1) , 
 rgba($color: #020f2a, $alpha: 1);
 
+$boxBG:180deg, rgba($color: #0d2760, $alpha: 1) , 
+rgba($color: #081a41, $alpha: 1);
+
 //内阴影
 $shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha:.8);
-$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #19db3f, $alpha: .09) inset;
+$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #0dc0db, $alpha: .09) inset;
 $shadowListHover:rgba($color: #0567c2, $alpha: .7) 0px 0px 50px inset;
 $shadowListHoverI:0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($color: #41fff8, $alpha: .9);
 $shadowTip: 0 0 1rem 0 rgba($color: #387ee7, $alpha:.8) inset;
@@ -40,8 +44,8 @@ $fBlueHover:#07ffc1;
 $fBlueG:#0bf3f7;
 $fListTitle:#2bacf7;
 $barBgc: rgba($color: #051520, $alpha: .9);
-$barShadow: rgba($color: #033551, $alpha: .5) 0px 0px 18px inset;
-$barBorder: solid rgba($color: #134040, $alpha: .7);
+$barShadow: rgba($color: #078ad1, $alpha: .8) 0px 0px 18px inset;
+$barBorder: solid rgba($color: #33467f, $alpha: .7);
 $tableBorder: solid rgba($color: #288686, $alpha: .7);
 $countBorder: solid rgba($color: #00aeff, $alpha: .9);
 $searchBorder: solid rgba($color: #33467f, $alpha: 1);
@@ -231,10 +235,10 @@ div::-webkit-scrollbar {
 	height: 18vh;
 }
 .h-19{
-	height: 19vh;
+	height: 19vh!important;
 }
 .h-20{
-	height: 20vh;
+	height: 20vh  !important;
 }
 .h-21{
 	height: 21vh;
@@ -243,10 +247,10 @@ div::-webkit-scrollbar {
 	height: 22vh;
 }
 .h-23{
-	height: 23vh;
+	height: 23vh !important;
 }
 .h-25{
-	height: 25vh;
+	height: 25vh !important;
 }
 .h-26{
 	height: 26vh !important;
@@ -281,10 +285,17 @@ div::-webkit-scrollbar {
 }
 
 .h-40 {
-		height: 40vh;
+		height: 40vh!important;
 }
 .h-43{
-		height: 42vh;
+		height: 42vh !important;
+}
+.h-45{
+		height: 45vh !important;
+}
+
+.h-50{
+	height: 50vh !important;
 }
 .h-51{
 	height: 51vh;
@@ -329,6 +340,10 @@ div::-webkit-scrollbar {
 .w-10{
 	width: 10rem !important;
 }
+.top-2{
+			  top:2vh !important;
+			  position: relative !important;
+		  }
 .flex-d{
 	flex-direction: column !important;
 }
@@ -439,6 +454,107 @@ div::-webkit-scrollbar {
 				padding:0.5rem  1rem;
 				cursor: pointer;
 			}
+			
+}
+
+//弹层样式
+	
+.dia-event-info{
+	   .el-row{
+		    height: 75vh;
+	   }
+	   .dia-left{
+		   height: 75vh;
+		   position: absolute;
+		   .dia-left-top{
+		   		  width: 20rem;
+		   		  display: flex;
+		   		  color: $inBlue;
+		   		  align-items: center;
+		   		  border: 1px $barBorder;
+		   		  padding: 0.5 1rem;
+		   		
+		   		  .dia-left-top-tit{
+		   			  padding: .5rem;
+		   			  background: linear-gradient($boxBG);
+		   		  }
+		   		  .dia-left-top-carousel{
+		   			  width: 15rem;
+		   			  padding-left: 1rem;
+		   			  overflow: hidden;
+		   			  .el-carousel__indicator{
+		   				  display: none;
+		   			  }
+		   			  .el-carousel__item{
+		   				  display: flex;
+		   				  align-items: center;
+		   			  }
+		   		  }
+		   }
+		   .dia-left-btm-tool{
+			       position: absolute;
+			       bottom: 0;
+			       left: 0;
+			       border: 1px $barBorder;
+			       width: 90%;
+				   border-radius: 1rem;
+			       height: 4rem;
+			   
+		   }
+	   }
+	   
+      .dia-right{
+		  height: 75vh;
+		   position: absolute;
+		   right: 0;
+		   color:$inBlue;
+		   button{
+		   	padding: 0 .3rem;
+		   	height: 1.5rem;
+		   	background-color: #112543;
+		   	color: $inBlue;
+		   	border: 1px $searchBorder;
+		   }
+		   button:hover{
+		   	text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+		   }
+		   .z-info-btm-grp{
+		   	width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			.z-info-btm-grp-top{
+				display: flex;
+				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;
+				.z-info-btm-input-btn{
+					padding: .5rem 0;
+					display: flex;
+					justify-content: flex-end;
+				}
+				.el-textarea__inner{
+					background: $eventBG;
+					border: 1px $searchBorder;
+					color: $inBlue;
+				}
+			}
+		   }
+		   
+	  }
+
 }
 
 // 一体化可视化模板
@@ -894,7 +1010,7 @@ div::-webkit-scrollbar {
 						flex-direction: column;
 
 						.this-con-list-info {
-							padding-bottom: 1rem;
+							padding-bottom: .5rem;
 							float: left;
 							color: #6da0c3;
 						}
@@ -936,21 +1052,37 @@ div::-webkit-scrollbar {
 							}
 
 							.z-info-list-con {
-								width: 85%;
 								display: flex;
 								flex-direction: column;
-								margin-left: 1rem;
 
 								.z-info {
-									padding: 1rem;
-									background: #102a3c;
-									margin-top: 1rem;
+									width: 100%;
+									// background: $eventBG;
+									margin-top: .5rem;
 									border-radius: .3rem;
 									display: flex;
 									flex-direction: column;
 								}
 							}
 						}
+						.el-timeline{
+							.el-timeline-item__tail {
+							    border-left: 2px solid #28567f;
+							    }
+							.el-timeline-item__timestamp{
+								color: $inBlue;
+							}
+							.el-card{
+								background: $eventBG;
+								border:1px $barBorder;
+								.el-card__body{
+									padding: 1rem;
+									
+								}
+							}
+						}
+						
+						
 					}
 
 					.mg-t-8 {
@@ -959,7 +1091,7 @@ div::-webkit-scrollbar {
 
 					.user-and-time {
 						display: flex;
-						align-items: center;
+						flex-direction: column;
 
 						span:first-child {
 							font-size: .8rem;
@@ -972,7 +1104,6 @@ div::-webkit-scrollbar {
 							font-size: .8rem;
 							color: #6da0c3;
 							display: inline-block;
-							margin-left: 1rem;
 							padding-top: .2rem;
 						}
 
@@ -1709,7 +1840,7 @@ div::-webkit-scrollbar {
 	color: #10c0ff!important;
 }
 .el-dialog:not(.is-fullscreen) {
-    margin-top: 15vh !important;
+    margin-top: 10vh !important;
 }
 
 	
@@ -1799,7 +1930,7 @@ div::-webkit-scrollbar {
 
   .el-dialog {
     background: #04080c;
-    box-shadow: rgba($color: #033551, $alpha: 1.0) 0px 0px 18px inset;
+    box-shadow:$barShadow;
 	border: 1px $barBorder;
   }
 

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/integrated/index','/integrated/bigdata','/integrated/forest', '/integrated/fire-forest', '/integrated/monitor','/integrated/date']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/integrated/index','/integrated/bigdata','/integrated/forest', '/integrated/fire-forest', '/integrated/monitor','/integrated/date','/integrated/dialog']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -105,6 +105,14 @@ export const constantRoutes = [{
 			title: '日历组件'
 		}
 	},
+	{
+		path: '/dialog',
+		name: 'dialog',
+		component: () => import('@/views/dialog'),
+		meta: {
+			title: '事件弹出层'
+		}
+	},
 ]
 
 
@@ -191,6 +199,14 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
+		path: '/dialog',
+		name: 'dialog',
+		component: () => import('@/views/dialog'),
+		meta: {
+			title: '事件弹出层'
+		}
+	},
+	{
 		path: '/login',
 		component: () => import('@/views/system/login'),
 		hidden: true

src/views/dialog.vue

@@ -0,0 +1,212 @@
+<template>
+	<div class="visual-con">
+		<!--头部-->
+		<vheader></vheader>
+		<!--主体-->
+		<div class="visual-body">
+			<button @click="showEventDialog"
+				style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情</button>
+			<!-- 弹层 -->
+			<el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" width="90%"
+				@close="cancelEventShow()">
+				<div class="dia-event-info">
+					<el-row>
+						<!-- 左侧 -->
+						<el-col :span="18" class="dia-left">
+							<!-- 应急预案 -->
+							<div class="dia-left-top">
+								<div class="dia-left-top-tit">应急预案</div>
+								<div class="dia-left-top-carousel">
+									<el-carousel height="30px" direction="vertical" :interval="2000">
+										<el-carousel-item v-for="item in 3" :key="item">
+											<a href="#">这是一条应急预案</a>
+										</el-carousel-item>
+									</el-carousel>
+								</div>
+							</div>
+							<!-- 应急预案end -->
+							<!-- 左侧资源 -->
+							<div class="leftbar w-10 top-2">
+								<div class="forthis">
+									<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
+										<div class="i-list-con h-51">
+											<div class="d-l-con-icon">
+												<div class="icon-con" v-for="(item,index) in resourcesList">
+													<div class="iconfont icon icon-normal" :class="item.icon"></div>
+													<div class="icon-text">
+														<h6>{{item.count}}</h6>
+														<h5>{{item.resourceName}}</h5>
+													</div>
+												</div>
+											</div>
+										</div>
+									</dv-border-box-7>
+								</div>
+							</div>
+							<!-- 左侧资源end -->
+							<!-- 底部工具栏 -->
+							<div class="dia-left-btm-tool">
+
+							</div>
+							<!-- 底部工具栏end -->
+						</el-col>
+						<!-- 左侧end -->
+						<!-- 右侧 -->
+						<el-col :span="6" class="dia-right">
+
+							<div class="e-right">
+								<div class="forthis">
+									<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']" style="padding-bottom:1rem ;">
+										<div class="i-list-con">
+											<div class="this-con h-45">
+												<div class="z-info-list" style="margin-top: 0;">
+													<el-timeline>
+														<el-timeline-item color="#2bacf7" timestamp="2018/4/12"
+															placement="top" v-for="(item,index) in 5">
+															<el-card>
+																<div class="z-info-list-con">
+																	<div class="user-and-time flex-d">
+																		<span>中心管理员</span><span><i
+																				class="el-icon-location"></i> 定位</span>
+																	</div>
+																	<div class="z-info">
+																		<div class="this-con-list-info">
+																			请处理单位及时处理
+																		</div>
+																		<div>
+																			<el-image :src="url"
+																				:preview-src-list="srcList"
+																				style="width:3rem; height:3rem;margin: 2px;"
+																				v-for="(item,index) in 10">
+																			</el-image>
+																		</div>
+																	</div>
+																</div>
+															</el-card>
+														</el-timeline-item>
+													</el-timeline>
+												</div>
+											</div>
+										</div>
+									</dv-border-box-7>
+								</div>
+								<div class="forthis">
+									<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
+										<div class="i-list-con">
+											<div class="this-con h-25 no-padding">
+												<div class="z-info-list" style="margin-top: 0;">
+													<div class="z-info-btm-grp">
+														<div class="z-info-btm-grp-top">
+															<div class="z-info-btm-grp-left">
+																<el-button size="small" icon="el-icon-s-flag">责任制
+																</el-button>
+																<el-button size="small" icon="el-icon-upload">上传
+																</el-button>
+																<el-button size="small" icon="el-icon-download">保存
+																</el-button>
+															</div>
+															<div class="z-info-btm-grp-right">
+																<el-button size="small" icon="el-icon-mic">会议
+																</el-button>
+															</div>
+														</div>
+														<div class="z-info-btm-input">
+															<el-input type="textarea" v-model="feedback"
+																:autosize="{ minRows: 7, maxRows: 7}" placeholder="请输入反馈信息">
+															</el-input>
+															<div class="z-info-btm-input-btn">
+																<el-button size="small" icon="el-icon-chat-dot-square">发送
+																</el-button>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</div>
+									</dv-border-box-7>
+								</div>
+							</div>
+
+						</el-col>
+						<!-- 左侧end -->
+					</el-row>
+				</div>
+			</el-dialog>
+		</div>
+		<vBottomMenu ref="bottomMenu"></vBottomMenu>
+	</div>
+</template>
+
+<script>
+	import vheader from '@/components/v-header.vue' //一体化共用头部
+	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+	export default {
+		components: {
+			vheader,
+			vBottomMenu,
+		},
+		data() {
+			return {
+				eventDialog: false,
+				resourcesList: [{
+						resourceName: '取水口',
+						count: '1',
+						icon: 'sj-icon-waterintake'
+					},
+					{
+						resourceName: '水鹤',
+						count: '1',
+						icon: 'sj-icon-watercrane'
+					},
+					{
+						resourceName: '消防栓',
+						count: '1',
+						icon: 'sj-icon-firehydrant'
+					},
+					{
+						resourceName: '起降点',
+						count: '1',
+						icon: 'sj-icon-landing'
+					},
+					{
+						resourceName: '检查站',
+						count: '1',
+						icon: 'sj-icon-checkpoint'
+					},
+					{
+						resourceName: '防火队',
+						count: '1',
+						icon: 'sj-icon-fireteam'
+					},
+					{
+						resourceName: '重点区域',
+						count: '1',
+						icon: 'sj-icon-tcqh'
+					},
+					{
+						resourceName: '摄像头',
+						count: '1',
+						icon: 'sj-icon-jkzx'
+					}
+				],
+				//图片虚拟
+				url: require('@/assets/images/visual/img-sample.png'),
+				srcList: [
+					require('@/assets/images/visual/img-sample.png'),
+					require('@/assets/images/visual/img-sample2.png'),
+				],
+				//文本域
+				feedback: '',
+
+			}
+		},
+		methods: {
+			showEventDialog() {
+				this.eventDialog = true
+			}
+		}
+	}
+</script>
+
+<style>
+</style>