统计分析

src/views/bigdata/bigdata.vue

@@ -1,451 +1,452 @@
 <!--一体化首页-->
 <template>
-	<div class="bigdata-con">
-		<!-- 头部B -->
-		<div class="header">
-			<!-- title -->
-			<div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png" />
-				<h3 class="title">数字四平态势感知监管平台-数字消防-统计分析</h3>
-			</div>
-			<div class="bignav">
-				<img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
-				<router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list"
-					:class="index===navbar.length-1?'on':''" exact>
-					{{navbar.name}}
-				</router-link>
-				<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
-			</div>
-		</div>
-		<!-- 头部E -->
-
-		<div class="bigdata-body">
-			<!-- 第一纵向-->
-			<div class="bigdata-list wid-li-1">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>事件来源，类型统计</span>
-					</div>
-						<chartEvent></chartEvent>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>林场分布统计</span>
-					</div>
-					<chartForestFarm></chartForestFarm>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>设备类型统计</span>
-					</div>
-					<chartEquipmentType></chartEquipmentType>
-				</div>
-			</div>
-			<!-- 第二纵向-->
-			<div class="bigdata-list wid-li-2 m-l-15">
-				<div class="bigdata-map mg-b-20">
-					<!-- 地图 -->
-					<bigdataSupermap ref="bigdataSupermap" style="width: 100%;height: 59vh;" class="indexSupermapClass"
-						:mapDiv="'bigdataMap'" dynamicPlotting="false" :mapSite="{doubleClickZoom:false}"
-						:codes="['9fa5']" :isSideBySide="false" />
-				</div>
-				<tabbar></tabbar>
-			</div>
-			<!-- 第三纵向-->
-			<div class="bigdata-list wid-li-3 m-l-15 flex-r">
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>起火原因统计</span>
-					</div>
-					<chartFireCause></chartFireCause>
-				</div>
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>设备上报事件数量</span>
-					</div>
-					<chartDeviceReportingEvents></chartDeviceReportingEvents>
-				</div>
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>重点区域</span>
-					</div>
-					<chartKeyArea></chartKeyArea>
-				</div>
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>珍惜古树</span>
-					</div>
-					<chartAncientTree></chartAncientTree>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>事件趋势</span>
-					</div>
-					<chartEventTrend></chartEventTrend><strong></strong>
-				</div>
-			</div>
-			<!-- 第四纵向-->
-			<div class="bigdata-list wid-li-3 m-l-15 flex-r">
-				<div class="b-con mg-b-20 tall">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>网格分布</span>
-					</div>
-					<chartGridDistribution></chartGridDistribution>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>天气趋势</span>
-					</div>
-					<chartWeatherTrends></chartWeatherTrends>
-				</div>
-			</div>
-			<!-- 第五纵向-->
-			<div class="bigdata-list wid-li-3 m-l-15 flex-r">
-				<div class="b-con mg-b-20 tall">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>网格人员</span>
-					</div>
-					<chartGridStaff></chartGridStaff>
-				</div>
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>防火队</span>
-					</div>
-					<chartFireBrigade></chartFireBrigade>
-				</div>
-				<div class="b-con mg-b-20 b-49">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>气象站</span>
-					</div>
-					<chartWeatherStation></chartWeatherStation>
-				</div>
-			</div>
-			<!-- 第六纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20 taller">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>设备分布</span>
-					</div>
-					<chartEquipmentDistribution></chartEquipmentDistribution>
-				</div>
-			</div>
-		</div>
-
-	</div>
+  <div class="bigdata-con">
+    <!-- 头部B -->
+    <div class="header">
+      <!-- title -->
+      <div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png"/>
+        <h3 class="title">数字四平态势感知监管平台-数字消防-统计分析</h3>
+      </div>
+      <div class="bignav">
+        <img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
+        <router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list"
+                     :class="index===navbar.length-1?'on':''" exact>
+          {{ navbar.name }}
+        </router-link>
+        <img src="@/assets/images/integrated/bigdata-header-nav-right.png"/>
+      </div>
+    </div>
+    <!-- 头部E -->
+
+    <div class="bigdata-body">
+      <!-- 第一纵向-->
+      <div class="bigdata-list wid-li-1">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>事件来源，类型统计</span>
+          </div>
+          <chartEvent></chartEvent>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>林场分布统计</span>
+          </div>
+          <chartForestFarm></chartForestFarm>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备类型统计</span>
+          </div>
+          <chartEquipmentType></chartEquipmentType>
+        </div>
+      </div>
+      <!-- 第二纵向-->
+      <div class="bigdata-list wid-li-2 m-l-15">
+        <div class="bigdata-map mg-b-20">
+          <!-- 地图 -->
+          <bigdataSupermap ref="bigdataSupermap" style="width: 100%;height: 59vh;" class="indexSupermapClass"
+                           :mapDiv="'bigdataMap'" dynamicPlotting="false" :mapSite="{doubleClickZoom:false}"
+                           :codes="['9fa5']" :isSideBySide="false"/>
+        </div>
+        <tabbar></tabbar>
+      </div>
+      <!-- 第三纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>起火原因统计</span>
+          </div>
+          <chartFireCause></chartFireCause>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备上报事件数量</span>
+          </div>
+          <chartDeviceReportingEvents></chartDeviceReportingEvents>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>重点区域</span>
+          </div>
+          <chartKeyArea></chartKeyArea>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>珍惜古树</span>
+          </div>
+          <chartAncientTree></chartAncientTree>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>事件趋势</span>
+          </div>
+          <chartEventTrend></chartEventTrend>
+          <strong></strong>
+        </div>
+      </div>
+      <!-- 第四纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>网格分布</span>
+          </div>
+          <chartGridDistribution></chartGridDistribution>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>天气趋势</span>
+          </div>
+          <chartWeatherTrends></chartWeatherTrends>
+        </div>
+      </div>
+      <!-- 第五纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>网格人员</span>
+          </div>
+          <chartGridStaff></chartGridStaff>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>防火队</span>
+          </div>
+          <chartFireBrigade></chartFireBrigade>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>气象站</span>
+          </div>
+          <chartWeatherStation></chartWeatherStation>
+        </div>
+      </div>
+      <!-- 第六纵向-->
+      <div class="bigdata-list wid-li-1 m-l-15">
+        <div class="b-con mg-b-20 taller">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备分布</span>
+          </div>
+          <chartEquipmentDistribution></chartEquipmentDistribution>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
-	import tabbar from './tabbar.vue' //区域切换
-	import bigdataSupermap from '@/components/supermap' //超图
-
-	//echarts
-	import chartEvent from './chart-event.vue' //1  事件、、
-	import chartForestFarm from './chart-forestFarm.vue' //2  林场分布、、
-	import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
-	import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
-	import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
-	import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
-	import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
-	import chartAncientTree from './chart-ancientTree.vue' //8  珍惜古树、、
-	import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
-	import chartGridDistribution from './chart-gridDistribution.vue' //10 网格分布、、
-	import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
-	import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
-	import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
-	import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
-
-
-	export default {
-		components: {
-			bigdataSupermap,
-			tabbar,
-			chartEvent,
-			chartForestFarm,
-			chartEquipmentType,
-			chartFireCause,
-			chartDeviceReportingEvents,
-			chartEventTrend,
-			chartKeyArea,
-			chartAncientTree,
-			chartWeatherTrends,
-			chartGridDistribution,
-			chartFireBrigade,
-			chartGridStaff,
-			chartWeatherStation,
-			chartEquipmentDistribution,
-		},
-		data() {
-			return {
-				visited: '',
-				navbar: [{
-						//消防云图
-						path: '/forest',
-						name: '消防云图',
-					},
-					{
-						//数据中心
-						path: '/datacenter',
-						name: '数据中心',
-					},
-					{
-						//监控中心
-						path: '/monitor',
-						name: '监控中心',
-					},
-					{
-						//统计分析
-						path: '/bigdata',
-						name: '统计分析',
-					},
-
-				],
-				total: 0, //事件总数
-				untreated: 0, //事件-未处理
-				processing: 0 // 事件-处理中
-			}
-		},
-		created() {},
-		mounted() {
-			setTimeout(() => {
-				this.$refs.bigdataSupermap.loadHeatMap() //事件分布
-			}, 5000)
-		},
-	}
+import tabbar from './tabbar.vue' //区域切换
+import bigdataSupermap from '@/components/supermap' //超图
+
+//echarts
+import chartEvent from './chart-event.vue' //1  事件、、
+import chartForestFarm from './chart-forestFarm.vue' //2  林场分布、、
+import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
+import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
+import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
+import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
+import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
+import chartAncientTree from './chart-ancientTree.vue' //8  珍惜古树、、
+import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+import chartGridDistribution from './chart-gridDistribution.vue' //10 网格分布、、
+import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
+import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
+import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
+import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+
+export default {
+  components: {
+    bigdataSupermap,
+    tabbar,
+    chartEvent,
+    chartForestFarm,
+    chartEquipmentType,
+    chartFireCause,
+    chartDeviceReportingEvents,
+    chartEventTrend,
+    chartKeyArea,
+    chartAncientTree,
+    chartWeatherTrends,
+    chartGridDistribution,
+    chartFireBrigade,
+    chartGridStaff,
+    chartWeatherStation,
+    chartEquipmentDistribution
+  },
+  data() {
+    return {
+      visited: '',
+      navbar: [{
+        //消防云图
+        path: '/forest',
+        name: '消防云图'
+      },
+        {
+          //数据中心
+          path: '/datacenter',
+          name: '数据中心'
+        },
+        {
+          //监控中心
+          path: '/monitor',
+          name: '监控中心'
+        },
+        {
+          //统计分析
+          path: '/bigdata',
+          name: '统计分析'
+        }
+
+      ],
+      total: 0, //事件总数
+      untreated: 0, //事件-未处理
+      processing: 0 // 事件-处理中
+    }
+  },
+  created() {
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$refs.bigdataSupermap.loadHeatMap() //事件分布
+    }, 5000)
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
-
-
-	.bigdata-con {
-		width: -webkit-fit-content;
-		height: 100%;
-		background: #01020c;
-
-		.el-loading-mask {
-			background: none;
-		}
-
-		.header {
-			height: 3rem;
-			display: flex;
-			align-items: center;
-
-			.header-left {
-				position: fixed;
-				left: 10px;
-				top: 5px;
-				display: flex;
-				align-items: center;
-				color: $inBlue;
-				font-family: $fontFk;
-
-				.title {
-					margin: 0 auto;
-					text-align: center;
-					background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-					color: #fff;
-					font-size: 28px;
-				}
-			}
-
-			.bignav {
-				height: 40px;
-				position: fixed;
-				left: 50%;
-				transform: translateX(-50%);
-				top: 0;
-				z-index: 1000;
-				border-radius: 5px;
-				display: flex;
-				justify-content: cetner;
-				align-items: center;
-
-				.bignav-list {
-					background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
-					float: left;
-					display: flex;
-					justify-content: cetner;
-					align-items: center;
-					color: #fff;
-					height: 40px;
-					font-size: 12px;
-					padding: 0 23px;
-					cursor: pointer;
-					-webkit-transform: translateY(0);
-					transform: translateY(0);
-					transition: all 0.3s ease-in-out;
-				}
-
-				.router-link-active,
-				.bignav-list:hover {
-					filter: brightness(2.3);
-					-webkit-transform: translateY(2px);
-					transform: translateY(2px);
-					color: $inBlueHover;
-					border-bottom: 1px solid $inBlueHover;
-					transition: all 0.3s ease-in-out;
-
-				}
-			}
-
-
-		}
-
-		.bigdata-body {
-			margin: 15px;
-			display: flex;
-			align-items: top;
-			// justify-content: center;
-
-		}
-
-		.flex-r {
-			display: flex;
-			flex-direction: row !important;
-			align-content: flex-start;
-			justify-content: space-between
-		}
-
-		.bigdata-list {
-			display: flex;
-			flex-direction: column;
-			flex-wrap: wrap;
-
-			.twins-con {
-				width: 100% !important;
-			}
-
-			.b-49 {
-				width: 49% !important;
-			}
-
-			.b-con {
-				width: 100%;
-				height: 28.5vh;
-
-				box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-					-0 -0 30px rgba($color: #163696, $alpha: .5) inset;
-
-				// display: flex;
-				// flex-direction: column;
-				.b-tit {
-					width: 100%;
-					display: flex;
-					align-items: center;
-					padding: 10px;
-
-					span {
-						font-size: 15px;
-						color: #00ceec;
-						margin-left: 5px;
-						text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
-							-0 -0 10px rgba($color: #41fff8, $alpha: .9);
-					}
-				}
-
-				.twins {
-					width: 100%;
-					display: flex;
-					position: relative;
-
-					.count {
-						width: 100%;
-						color: #fff;
-						font-size: 12px;
-						position: absolute;
-						display: flex;
-						align-items: center;
-						left: 1rem;
-						top: 9px;
-						z-index: 100;
-
-						.count-z {
-							display: flex;
-							margin: 0 .5rem;
-
-							span {
-								margin-left: .4rem;
-								font-size: 1rem;
-								color: #2ee0fb !important;
-								font-weight: bolder;
-							}
-						}
-
-
-					}
-				}
-
-			}
-
-			.tall {
-				height: 59vh !important;
-			}
-
-			.taller {
-				height: 89.5vh !important;
-			}
-
-			.three {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.el-row {
-				width: 100%;
-			}
-
-
-			.bigdata-map {
-				width: 100%;
-				height: 59vh;
-				position: relative;
-				background: #00101f;
-
-				.event-count {
-					color: #fff;
-					font-size: 14px;
-					font-weight: bolder;
-					padding: 10px;
-					background-color: #000000;
-					position: absolute;
-					top: 10px;
-					left: 10px;
-					z-index: 1000;
-
-					span {
-						font-size: 16px;
-						color: #d50000;
-					}
-				}
-
-			}
-
-		}
-
-		.wid-li-1 {
-			width: 396px;
-		}
-
-		.wid-li-2 {
-			width: 760px;
-		}
-
-		.wid-li-3 {
-			width: 850px;
-		}
-
-		.wid-li-4 {
-			width: 304px;
-		}
-
-		.mg-b-20 {
-			margin-bottom: 2vh;
-		}
-
-		.m-l-15 {
-			margin-left: .5%;
-		}
-	}
+@import '@/assets/styles/base.scss';
+
+
+.bigdata-con {
+  width: -webkit-fit-content;
+  height: 100%;
+  background: #01020c;
+
+  .el-loading-mask {
+    background: none;
+  }
+
+  .header {
+    height: 3rem;
+    display: flex;
+    align-items: center;
+
+    .header-left {
+      position: fixed;
+      left: 10px;
+      top: 5px;
+      display: flex;
+      align-items: center;
+      color: $inBlue;
+      font-family: $fontFk;
+
+      .title {
+        margin: 0 auto;
+        text-align: center;
+        background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: #fff;
+        font-size: 28px;
+      }
+    }
+
+    .bignav {
+      height: 40px;
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 0;
+      z-index: 1000;
+      border-radius: 5px;
+      display: flex;
+      justify-content: cetner;
+      align-items: center;
+
+      .bignav-list {
+        background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
+        float: left;
+        display: flex;
+        justify-content: cetner;
+        align-items: center;
+        color: #fff;
+        height: 40px;
+        font-size: 12px;
+        padding: 0 23px;
+        cursor: pointer;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        transition: all 0.3s ease-in-out;
+      }
+
+      .router-link-active,
+      .bignav-list:hover {
+        filter: brightness(2.3);
+        -webkit-transform: translateY(2px);
+        transform: translateY(2px);
+        color: $inBlueHover;
+        border-bottom: 1px solid $inBlueHover;
+        transition: all 0.3s ease-in-out;
+
+      }
+    }
+
+
+  }
+
+  .bigdata-body {
+    margin: 15px;
+    display: flex;
+    align-items: top;
+    // justify-content: center;
+
+  }
+
+  .flex-r {
+    display: flex;
+    flex-direction: row !important;
+    align-content: flex-start;
+    justify-content: space-between
+  }
+
+  .bigdata-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    .twins-con {
+      width: 100% !important;
+    }
+
+    .b-49 {
+      width: 49% !important;
+    }
+
+    .b-con {
+      width: 100%;
+      height: 28.5vh;
+
+      box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+      -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+
+      // display: flex;
+      // flex-direction: column;
+      .b-tit {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 10px;
+
+        span {
+          font-size: 15px;
+          color: #00ceec;
+          margin-left: 5px;
+          text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
+          -0 -0 10px rgba($color: #41fff8, $alpha: .9);
+        }
+      }
+
+      .twins {
+        width: 100%;
+        display: flex;
+        position: relative;
+
+        .count {
+          width: 100%;
+          color: #fff;
+          font-size: 12px;
+          position: absolute;
+          display: flex;
+          align-items: center;
+          left: 1rem;
+          top: 9px;
+          z-index: 100;
+
+          .count-z {
+            display: flex;
+            margin: 0 .5rem;
+
+            span {
+              margin-left: .4rem;
+              font-size: 1rem;
+              color: #2ee0fb !important;
+              font-weight: bolder;
+            }
+          }
+
+
+        }
+      }
+
+    }
+
+    .tall {
+      height: 59vh !important;
+    }
+
+    .taller {
+      height: 89.5vh !important;
+    }
+
+    .three {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .el-row {
+      width: 100%;
+    }
+
+
+    .bigdata-map {
+      width: 100%;
+      height: 59vh;
+      position: relative;
+      background: #00101f;
+
+      .event-count {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bolder;
+        padding: 10px;
+        background-color: #000000;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 1000;
+
+        span {
+          font-size: 16px;
+          color: #d50000;
+        }
+      }
+
+    }
+
+  }
+
+  .wid-li-1 {
+    width: 396px;
+  }
+
+  .wid-li-2 {
+    width: 760px;
+  }
+
+  .wid-li-3 {
+    width: 850px;
+  }
+
+  .wid-li-4 {
+    width: 304px;
+  }
+
+  .mg-b-20 {
+    margin-bottom: 2vh;
+  }
+
+  .m-l-15 {
+    margin-left: .5%;
+  }
+}
 </style>