UI

src/assets/styles/base.scss

@@ -29,6 +29,7 @@ $fListTitle:#2ac6c6;
 $barBgc: rgba($color: #051520, $alpha: .9);
 $barShadow: rgba($color: #033551, $alpha: .5) 0px 0px 18px inset;
 $barBorder: solid rgba($color: #134040, $alpha: .7);
+$tableBorder: solid rgba($color: #288686, $alpha: .7);
 //icon
 $iconBg:#f5ad1b,#58b35d,#0FA2FF,#da8ec5,#78bfc2,#a28e52,#ff6063,#96bd5b,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;
 $iconColor:#32e583,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;
@@ -205,9 +206,13 @@ div::-webkit-scrollbar {
 .h-43{
 		height: 42vh;
 }
+.h-51{
+	height: 51vh;
+}
 .h-60{
 	height: 59vh;
 }
+
 .h-63{
   height: 62vh;
 }
@@ -232,6 +237,9 @@ div::-webkit-scrollbar {
 	width: 100% !important;
 	max-width: 100% !important;
 }
+.w-25{
+	width: 25rem !important;
+}
 .w-50{
 	width: 50% !important;
 }
@@ -266,6 +274,23 @@ div::-webkit-scrollbar {
 .el-radio{
 	margin-right: 1rem;
 }
+.justify-content-bt{
+	
+	justify-content:space-between
+}
+.justify-content-end{
+	justify-content:end
+}	
+.text-right{
+	text-align: right;
+}
+.flex-c{
+	flex-direction:column !important;
+}
+.flex-r{
+	flex-direction: row !important;
+}
+
 
 .d-tit {
 	display: flex;
@@ -813,6 +838,52 @@ div::-webkit-scrollbar {
 						background:nth($iconBg, $i);
 					}
 				}
+				.el-table--border, .el-table--border::after{
+					border: 1px $tableBorder;
+					background-color:#071927
+				}
+				.el-table--border{
+					.el-table--group{
+						border: 1px $tableBorder;
+					}
+				}
+				.el-table::before {
+					background:  #071927;
+				}
+				.el-table {
+					background:  #071927;
+					color:$inBlue;
+					thead{
+					}
+					.el-table__header-wrapper{
+						th{
+							color:$inBlue;
+							font-size: .8rem;
+						}
+					}
+					thead.is-group{
+						.el-table__cell{
+							text-align: center;
+							background: #071927;
+							border-bottom: 1px $tableBorder;
+							border-right:1px $tableBorder;
+							padding: 0;
+							font-weight: normal;
+						}
+					}
+				}
+				.el-table__empty-block{
+					min-height: auto;
+				}
+				.el-table__empty-text{
+					line-height: 30px;
+				}
+				.el-table__header{
+					width: auto!important
+				}
+				.el-table__empty-block{
+					width: auto!important
+				}
 				.icon-con{
 					display: flex;
 					margin-bottom: 1rem;
@@ -893,17 +964,24 @@ div::-webkit-scrollbar {
 					display: flex;
 					align-items: center;
 					flex: 1;
+					color: $fListTitle;
 
 					h4 {
 						font-size: .7rem;
 						margin: 0;
-						color: $fListTitle;
+						
 						font-weight: normal;
 						display: block;
 						max-width: 90%;
 						line-height: 1rem;
 
 					}
+					h3{
+						padding:.3rem;
+					}
+					h2{
+						padding-top:.5rem;
+					}
 					.text-gray{
 						color: $textGray;
 					}
@@ -1201,7 +1279,11 @@ div::-webkit-scrollbar {
 //一体化弹层
 
 //覆盖elementUI
-
+.el-popper[x-placement^=bottom] {
+	.popper__arrow::after{
+		border-bottom-color:#1cefff
+	}
+}
 .el-date-picker{//时间选择器
 		width: 17.5rem;
 		.el-year-table{
@@ -1232,6 +1314,7 @@ div::-webkit-scrollbar {
 		.el-picker-panel__content{
 			width: 100%;
 			margin: 0;
+			padding-bottom:1rem ;
 		}
 		.el-picker-panel__icon-btn{
 			color: #01d1eb;
@@ -1244,7 +1327,7 @@ div::-webkit-scrollbar {
 		}
 }
 .el-picker-panel{
-	background: #071927;
+	background: #143650;
 	border: 1px solid #2a3a60;
 	color: #1a9696;
 }

src/views/disaster.vue

@@ -9,14 +9,151 @@
 			<div class="leftbar" :class="indentleft" ref="left">
 				<div class="forthis">
 					<div class="this-title">
-						    <el-date-picker
-						      v-model="pickYear"
-						      type="year"
-						      placeholder="选择年"
-							>
-						    </el-date-picker>
+						<el-date-picker v-model="pickYear" type="year" placeholder="选择年">
+						</el-date-picker>
 					</div>
 					<div class="i-list-con h-73">
+						<div class="d-l-con-icon">
+							<div class="icon-con w-50 m-btm-no">
+								<div class="icon icon-dot"></div>
+								<div class="icon-text flex-r">
+									<h5>20次</h5>
+									<h5>火灾次数</h5>
+								</div>
+							</div>
+							<div class="icon-con w-50 m-btm-no">
+								<div class="icon icon-dot"></div>
+								<div class="icon-text flex-r">
+									<h5>20万元</h5>
+									<h5>损失总计</h5>
+								</div>
+							</div>
+						</div>
+						<div class="d-l-con flex-c">
+							<div class="d-l-l-text">
+								<h2>火灾损失价值</h2>
+							</div>
+							<div class="d-l-l-text ">
+								<h3>合计：10万元</h3>
+							</div>
+							<el-table>
+								<el-table-column prop="date" label="林木资源">
+									<el-table-column prop="date" label="成林" width="50%">
+										<el-table-column prop="date" label="蓄积">
+											<el-table-column prop="date" label="米">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="价值" width="50%">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+									<el-table-column prop="date" label="幼树">
+										<el-table-column prop="date" label="株数">
+											<el-table-column prop="date" label="万株">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="价值">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+							<el-table style="margin-top: 1rem;">
+								<el-table-column prop="date" label="人员伤亡">
+									<el-table-column prop="date" label="轻伤" width="50%">
+										<el-table-column prop="date" label="人数">
+											<el-table-column prop="date" label="人">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用" width="50%">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+									<el-table-column prop="date" label="重伤">
+										<el-table-column prop="date" label="人数">
+											<el-table-column prop="date" label="人">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+									<el-table-column prop="date" label="死亡">
+										<el-table-column prop="date" label="人数">
+											<el-table-column prop="date" label="人">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+							<el-table style="margin-top: 1rem;">
+								<el-table-column prop="date" label="其他火灾损失">
+									<el-table-column prop="date" label="万元">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+						<div class="d-l-con flex-c">
+							<div class="d-l-l-text">
+								<h2>扑火费用支出</h2>
+							</div>
+							<div class="d-l-l-text ">
+								<h3>合计：10万元</h3>
+							</div>
+							<el-table style="margin-top: 1rem;">
+								<el-table-column prop="date" label="人员伤亡">
+									<el-table-column prop="date" label="人工费" width="50%">
+										<el-table-column prop="date" label="人工">
+											<el-table-column prop="date" label="工日">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用" width="50%">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+									<el-table-column prop="date" label="车辆费">
+										<el-table-column prop="date" label="合计">
+											<el-table-column prop="date" label="台">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="汽车">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用">
+											<el-table-column prop="date" label="人">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+									<el-table-column prop="date" label="飞行费">
+										<el-table-column prop="date" label="飞机">
+											<el-table-column prop="date" label="架次">
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="费用">
+											<el-table-column prop="date" label="万元">
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+							<el-table style="margin-top: 1rem;">
+								<el-table-column prop="date" label="其他火灾费用">
+									<el-table-column prop="date" label="万元">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+
 					</div>
 				</div>
 			</div>
@@ -29,11 +166,148 @@
 			<div class="rightbar" :class="indentright" ref="right">
 				<div class="forthis">
 					<div class="this-title">
-						<span>事件列表</span>
-						<!-- <span>23</span> -->
+						<span>列表</span>
 					</div>
-					<div class="i-list-con h-73">
+					<div class="i-list-con h-19">
+					  <div class="d-l-con" v-for="(item,index) in 10">
+					  	<div class="d-l-l-text">
+					  		<i class="i-small"></i>
+					  		<h4>啊多少分安师大发安师大发</h4>
+					  	</div>
+					  </div>
+					</div>
+				</div>
+				<div class="forthis">
+					<div class="i-list-con h-51">
+						<div class="forthis">
+							<div class="d-l-con flex-c">
+								<div class="d-l-l-text">
+									<h2>火灾损失价值</h2>
+								</div>
+								<div class="d-l-l-text ">
+									<h3>合计：10万元</h3>
+								</div>
+								<el-table>
+									<el-table-column prop="date" label="林木资源">
+										<el-table-column prop="date" label="成林" width="50%">
+											<el-table-column prop="date" label="蓄积">
+												<el-table-column prop="date" label="米">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="价值" width="50%">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="幼树">
+											<el-table-column prop="date" label="株数">
+												<el-table-column prop="date" label="万株">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="价值">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table>
+								<el-table style="margin-top: 1rem;">
+									<el-table-column prop="date" label="人员伤亡">
+										<el-table-column prop="date" label="轻伤" width="50%">
+											<el-table-column prop="date" label="人数">
+												<el-table-column prop="date" label="人">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用" width="50%">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="重伤">
+											<el-table-column prop="date" label="人数">
+												<el-table-column prop="date" label="人">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="死亡">
+											<el-table-column prop="date" label="人数">
+												<el-table-column prop="date" label="人">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table>
+								<el-table style="margin-top: 1rem;">
+									<el-table-column prop="date" label="其他火灾损失">
+										<el-table-column prop="date" label="万元">
+										</el-table-column>
+									</el-table-column>
+								</el-table>
+							</div>
+							<div class="d-l-con flex-c">
+								<div class="d-l-l-text">
+									<h2>扑火费用支出</h2>
+								</div>
+								<div class="d-l-l-text ">
+									<h3>合计：10万元</h3>
+								</div>
+								<el-table style="margin-top: 1rem;">
+									<el-table-column prop="date" label="人员伤亡">
+										<el-table-column prop="date" label="人工费" width="50%">
+											<el-table-column prop="date" label="人工">
+												<el-table-column prop="date" label="工日">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用" width="50%">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="车辆费">
+											<el-table-column prop="date" label="合计">
+												<el-table-column prop="date" label="台">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="汽车">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用">
+												<el-table-column prop="date" label="人">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+										<el-table-column prop="date" label="飞行费">
+											<el-table-column prop="date" label="飞机">
+												<el-table-column prop="date" label="架次">
+												</el-table-column>
+											</el-table-column>
+											<el-table-column prop="date" label="费用">
+												<el-table-column prop="date" label="万元">
+												</el-table-column>
+											</el-table-column>
+										</el-table-column>
+									</el-table-column>
+								</el-table>
+								<el-table style="margin-top: 1rem;">
+									<el-table-column prop="date" label="其他火灾费用">
+										<el-table-column prop="date" label="万元">
+										</el-table-column>
+									</el-table-column>
+								</el-table>
+							</div>
+						</div>
 						
+
+
 					</div>
 				</div>
 			</div>
@@ -104,11 +378,10 @@
 			window.choseLayerSwitching = this.choseLayerSwitching
 			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
 		},
-		mounted() {
-		},
+		mounted() {},
 		data() {
 			return {
-				pickYear:'',//选择年份
+				pickYear: '', //选择年份
 				/** ----------------------------------摄像头预览开始------------------------------------- */
 				activePanel: 'key1',
 				isLogin: false,
@@ -180,7 +453,7 @@
 						label: '归档'
 					}
 				],
-				
+
 				//左右缩进
 				indentStyle: '',
 				indentleft: '',
@@ -460,28 +733,28 @@
 						that.markersMapList.push(information)
 						// 查询火点附近摄像头
 						selectFjsxt(that.information[3].content, that.information[4].content).then(
-						response => {
-							console.log("vv", response.data)
-							if (response.data != null && response.data.length > 0) {
-								for (let i = 0; i < response.data.length; i++) {
-									let marke = {};
-									marke.lng = response.data[i].longitude;
-									marke.lat = response.data[i].latitude;
-									let code = response.data[i].channelCode.split(",");
-									marke.bindPopupHtml = response.data[i].cameraName;
-									marke.click = "preview";
-									marke.parameter = code;
-									marke.keepBindPopup = false;
-									marke.isAggregation = false;
-									marke.icon = "camera";
-									that.markersMapList.push(marke)
+							response => {
+								console.log("vv", response.data)
+								if (response.data != null && response.data.length > 0) {
+									for (let i = 0; i < response.data.length; i++) {
+										let marke = {};
+										marke.lng = response.data[i].longitude;
+										marke.lat = response.data[i].latitude;
+										let code = response.data[i].channelCode.split(",");
+										marke.bindPopupHtml = response.data[i].cameraName;
+										marke.click = "preview";
+										marke.parameter = code;
+										marke.keepBindPopup = false;
+										marke.isAggregation = false;
+										marke.icon = "camera";
+										that.markersMapList.push(marke)
+									}
 								}
-							}
-							that.$refs.supermapNotProcessed.dropLocation(information.lat, information
-								.lng)
-							that.$refs.supermapNotProcessed.clearM(false)
-							that.$refs.supermapNotProcessed.setMarkers(that.markersMapList)
-						})
+								that.$refs.supermapNotProcessed.dropLocation(information.lat, information
+									.lng)
+								that.$refs.supermapNotProcessed.clearM(false)
+								that.$refs.supermapNotProcessed.setMarkers(that.markersMapList)
+							})
 					}, 1000);
 
 				}
@@ -1073,4 +1346,13 @@
 
 <style lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
+
+	.el-table__header {
+		width: auto !important;
+	}
+	.d-dialog-con{
+		position: absolute;
+		left: -19rem;
+		top: 0;
+	}
 </style>