UI

src/views/bigdata/bigdata.vue

@@ -5,10 +5,12 @@
 		<div class="header">
 			<!-- title -->
 			<div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png" />
-				<h3 class="title">数字四平态势感知监管平台-数字消防-统计分析</h3></div>
+				<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>
+				<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" />
@@ -48,135 +50,91 @@
 			<!-- 第二纵向-->
 			<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"/>
+					<!-- 地图 -->
+					<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-1 m-l-15">
-				<div class="b-con mg-b-20">
+			<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>
 					<chartDanger></chartDanger>
 				</div>
-				<div class="b-con mg-b-20">
+				<div class="b-con mg-b-20 b-49">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>重点区域统计</span>
+						<span>设备、上报事件数量</span>
 					</div>
 					<chartForestFarm></chartForestFarm>
 				</div>
-				<div class="b-con">
+				<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>
-					<chartPit></chartPit>
-				</div>
-			</div>
-			<!-- 第四纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>设备上报数量统计</span>
+						<span>重点区域</span>
 					</div>
 					<chartFreelyraise></chartFreelyraise>
 				</div>
-				<div class="b-con mg-b-20">
+				<div class="b-con mg-b-20 b-49">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>珍惜古树统计</span>
+						<span>珍惜古树</span>
 					</div>
 					<chartFarm></chartFarm>
 				</div>
 				<div class="b-con">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>散养户、养殖场养殖种类布统计</span>
+						<span>事件趋势</span>
 					</div>
-					<chartFarmtype></chartFarmtype>
+					<chartPit></chartPit><strong></strong>
 				</div>
 			</div>
-			<!-- 第五纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
+			<!-- 第四纵向-->
+			<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>
+						<span>网格分布到乡镇</span>
 					</div>
 					<chartCollection></chartCollection>
 				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>水鹤分布统计</span>
-					</div>
-					<chartCaterCrane></chartCaterCrane>
-				</div>
 				<div class="b-con">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>处理中心分布统计</span>
+						<span>天气趋势</span>
 					</div>
-					<chartProcessing></chartProcessing>
+					<chartFarmtype></chartFarmtype>
 				</div>
 			</div>
-			<!-- 第六纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
+			<!-- 第五纵向-->
+			<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>
+						<span>网格人员</span>
 					</div>
 					<chartHydrant></chartHydrant>
 				</div>
-				<div class="b-con mg-b-20">
+				<div class="b-con mg-b-20 b-49">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>泡沫液分布统计</span>
+						<span>防火队</span>
 					</div>
-					<chartFoam></chartFoam>
+					<chartProcessing></chartProcessing>
 				</div>
-				<div class="b-con">
+				<div class="b-con mg-b-20 b-49">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>取水口分布统计</span>
+						<span>气象站</span>
 					</div>
-					<chartWaterIntake></chartWaterIntake>
+					<chartFoam></chartFoam>
 				</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>
+						<span>设备分布到乡镇</span>
 					</div>
 					<chartCamera></chartCamera>
 				</div>
 			</div>
-			<!-- 第八纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20 tall">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>探测器分布、类型统计</span>
-					</div>
-					<chartDetector></chartDetector>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>消防力量分布统计</span>
-					</div>
-					<chartFireControl></chartFireControl>
-				</div>
-			</div>
-      <!-- 第九纵向-->
-      <div class="bigdata-list wid-li-1 m-l-15">
-        <div class="b-con mg-b-20 tall">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>探测器分布、类型统计</span>
-          </div>
-          <chartDetector></chartDetector>
-        </div>
-        <div class="b-con mg-b-20">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>消防力量分布统计</span>
-          </div>
-          <chartFireControl></chartFireControl>
-        </div>
-      </div>
 		</div>
 
 	</div>
@@ -184,7 +142,7 @@
 
 <script>
 	import tabbar from './tabbar.vue' //区域切换
-  import bigdataSupermap from '@/components/supermap' //超图
+	import bigdataSupermap from '@/components/supermap' //超图
 
 	//echarts
 	import chartEvent from './chart-event.vue' //1  事件
@@ -209,7 +167,7 @@
 
 	export default {
 		components: {
-      bigdataSupermap,
+			bigdataSupermap,
 			tabbar,
 			chartEvent,
 			chartPopulation,
@@ -233,27 +191,26 @@
 		data() {
 			return {
 				visited: '',
-				navbar: [
-          {
-            //消防云图
-            path: '/forest',
-            name: '消防云图',
-          },
-          {
-            //数据中心
-            path: '/datacenter',
-            name: '数据中心',
-          },
-          {
-            //监控中心
-            path: '/monitor',
-            name: '监控中心',
-          },
-          {
-            //统计分析
-            path: '/bigdata',
-            name: '统计分析',
-          },
+				navbar: [{
+						//消防云图
+						path: '/forest',
+						name: '消防云图',
+					},
+					{
+						//数据中心
+						path: '/datacenter',
+						name: '数据中心',
+					},
+					{
+						//监控中心
+						path: '/monitor',
+						name: '监控中心',
+					},
+					{
+						//统计分析
+						path: '/bigdata',
+						name: '统计分析',
+					},
 
 				],
 				total: 0, //事件总数
@@ -261,13 +218,12 @@
 				processing: 0 // 事件-处理中
 			}
 		},
-    created() {
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$refs.bigdataSupermap.loadHeatMap()//事件分布
-      }, 5000)
-    },
+		created() {},
+		mounted() {
+			setTimeout(() => {
+				this.$refs.bigdataSupermap.loadHeatMap() //事件分布
+			}, 5000)
+		},
 	}
 </script>
 
@@ -360,6 +316,13 @@
 
 		}
 
+		.flex-r {
+			display: flex;
+			flex-direction: row !important;
+			align-content: flex-start;
+			justify-content: space-between
+		}
+
 		.bigdata-list {
 			display: flex;
 			flex-direction: column;
@@ -369,6 +332,10 @@
 				width: 100% !important;
 			}
 
+			.b-49 {
+				width: 49% !important;
+			}
+
 			.b-con {
 				width: 100%;
 				height: 28.5vh;

src/views/bigdata/chart-camera.vue

@@ -1,12 +1,12 @@
 <!-- **************************************NO.16 摄像头*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="camera1" style="width: 100%; height:25vh; ">
-		</div>
-		<div id="camera2" style="width: 100%; height:30vh; ">
-		</div>
-		<div id="camera3" style="width: 100%; height:30vh; ">
+		<!-- <div id="camera1" style="width: 100%; height:25vh; ">
+		</div> -->
+		<div id="camera2" style="width: 100%; height:85vh; ">
 		</div>
+		<!-- <div id="camera3" style="width: 100%; height:30vh; ">
+		</div> -->
 	</div>
 </template>
 
@@ -20,9 +20,9 @@
 			}
 		},
 		mounted() {
-			this.myEcharts1();
+			// this.myEcharts1();
 			this.myEcharts2();
-			this.myEcharts3();
+			// this.myEcharts3();
 
 		},
 
@@ -168,7 +168,7 @@
 
 					},
 					grid: {
-						top: "10%",
+						top: "0%",
 						left: "6%",
 						// right: "4%",
 						bottom: "5%",
@@ -204,7 +204,7 @@
 
 						type: "bar",
 						animationCurve: "easeOutBack",
-						barWidth: 5,
+						barWidth: 8,
 						label: {
 							show: true,
 							position: "right",

src/views/bigdata/chart-collection.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.10 收集点*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="collection" style="width: 100%; height:23vh;">
+		<div id="collection" style="width: 100%; height:50vh;">
 		</div>
 	</div>
 </template>
@@ -67,7 +67,7 @@
 				    series: [
 				        {
 				            type: 'pie',
-				            radius: ['50%', '70%'],
+				            radius: ['60%', '80%'],
 				            center: ['50%', '50%'],
 				            data: echartData,
 				            hoverAnimation: false,

src/views/bigdata/chart-hydrant.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.13 消火栓*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="hydrant" style="width: 100%; height:23vh;">
+		<div id="hydrant" style="width: 100%; height:50vh;">
 		</div>
 	</div>
 </template>
@@ -95,7 +95,7 @@
 				        name: '',
 				        type: 'pie',
 				        clockWise:true,
-				        radius: [70, 70],
+				        radius: ['70%', '80%'],
 				        hoverAnimation: true,
 				        itemStyle: {
 				            normal: {
@@ -144,13 +144,13 @@
 				    },
 				    {
 				        type: 'pie',
-				        radius: [60, 60],
+				       radius: ['58%', '58%'],
 				        hoverAnimation: false,
 				        clockWise: false,
 				        itemStyle: {
 				            normal: {
 				                borderColor: 'rgba(2,178,247,0.2)',
-				                borderWidth: 10,
+				                borderWidth: 30,
 				            },
 				        },
 				        label: {

src/views/bigdata/tabbar.vue

@@ -148,6 +148,7 @@
 			color: #fff;
 			font-size: 12px;
 			height: 32px;
+			line-height: 32px;
 			padding: 0 10px;
 		}