林业可视化验收功能清单增加接口

src/api/bigdata.js

@@ -172,6 +172,87 @@ export function getRlt(param) {
 
 
 
+//各林场巡查队伍当日在职情况（在职、缺岗)
+export function selectGwRs() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectGwRs',
+    method: 'get'
+  })
+}
+// 森林资源统计
+export function selectCenterdataTForestResourcesSum() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectCenterdataTForestResourcesSum',
+    method: 'get'
+  })
+}
+//车辆信息统计
+export function selectCarCount() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectCarCount',
+    method: 'get'
+  })
+}
+// 防火设备统计
+export function selectDeviceCount() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectDeviceCount',
+    method: 'get'
+  })
+}
+//巡查出勤排名（正负排名）
+export function selectCqpm() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectCqpm',
+    method: 'get'
+  })
+}
+//植树造林计划、面积、完成情况等
+export function selectCenterdataTForestPlanHz() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectCenterdataTForestPlanHz',
+    method: 'get'
+  })
+}
+//火灾等级统计分析
+export function getEventCountGroupByFireRisk() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventCountGroupByFireRisk',
+    method: 'get'
+  })
+}
+//火灾种类统计分析
+export function getEventCountGroupByFireType() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventCountGroupByFireType',
+    method: 'get'
+  })
+}
+//火险高发统计分析
+export function getEventDeptStatistics() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventDeptStatistics',
+    method: 'get'
+  })
+}
+
+//按时间、事件类别统计事件数据（年度、月份、四类事件数量）
+export function getEventTypeYearStatistics() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventTypeYearStatistics',
+    method: 'get'
+  })
+}
+
+//历次火灾涉及组成
+export function getEventInfoList() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventInfoList',
+    method: 'get'
+  })
+}
+
+
 
 
 

src/components/TVWall.vue

@@ -24,6 +24,8 @@
         <!--视频窗口展示---海康-->
         <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
       </div>
+
+      <!--<div id="dom1" class="dom1"></div>-->
     </el-dialog>
   </div>
 
@@ -262,6 +264,8 @@ export default {
     }
   },
   created() {
+    const DHWsInstance = DHWs.getInstance()
+    this.ws = DHWsInstance
   },
   methods: {
     cancelEventLocationShow() {
@@ -280,25 +284,23 @@ export default {
     showTVWall() {
       let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
-      // const DHWsInstance = DHWs.getInstance()
-      // this.ws = DHWsInstance
       // this.ws.addEventListener('connectStateChange', data => {
       //   if (data) {
       //     console.log('连接成功')
       //   } else {
       //     console.log('连接失败，下载客户端')
       //     this.alertReinstall()
-      //     // this.isShowTipe && this.$modal.confirm({
-      //     //   title: '下载客户端',
-      //     //   content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-      //     //   onOk: () => {
-      //     //     //这里写下载方法
-      //     //     this.isShowTipe = false
-      //     //   },
-      //     //   onCancel: () => {
-      //     //     this.isShowTipe = false
-      //     //   }
-      //     // });
+      //     this.isShowTipe && this.$modal.confirm({
+      //       title: '下载客户端',
+      //       content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
+      //       onOk: () => {
+      //         //这里写下载方法
+      //         this.isShowTipe = false
+      //       },
+      //       onCancel: () => {
+      //         this.isShowTipe = false
+      //       }
+      //     });
       //   }
       // })
       // this.preview()
@@ -311,7 +313,7 @@ export default {
       setTimeout(function() {
         that.playhk();
       }, 5000)
-      /** ----------------------------------海康摄像头预览结束------------------------------------- */
+      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
       this.TVWallVisible = true
     },
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
@@ -335,12 +337,16 @@ export default {
             if (res) { // 连接客户端成功
               this.alertLogin()
               this.ws.login({
-                loginIp: newResponse.loginIp,
-                loginPort: newResponse.loginPort,
-                userName: newResponse.userName,
-                userPwd: newResponse.userPwd,
+                // loginIp: newResponse.loginIp,
+                // loginPort: newResponse.loginPort,
+                // userName: newResponse.userName,
+                // userPwd: newResponse.userPwd,
+                loginIp: '192.168.100.100',
+                loginPort: 8314,
+                userName: 'system',
+                userPwd: 'Admin@123',
                 token: '',
-                https: 1
+                https: 0
               })
               this.ws.on('loginState', (res) => {
                 this.isLogin = res
@@ -372,7 +378,7 @@ export default {
             'splitNum': 1,
             'channelList': [
               {
-                'channelId': '8ORBqXFlA1D77U45SM1ROC'
+                'channelId': '1000013$1$0$0'
               }
             ]
           },

src/views/bigdata/bigdata.vue

@@ -18,179 +18,268 @@
 		</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 class="bigdata-list wid-li-1 m-l-15 m-r-15" style="width:500px">
-				<div class="b-con mg-b-20 taller" style="overflow-y:hidden;">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>历次火灾涉及组成</span>
-					</div>
-					<dv-scroll-board :config="config"/>
-					<!-- 示例说明 http://datav.jiaminghi.com/guide/scrollBoard.html#%E5%AE%9A%E5%88%B6%E5%85%83%E7%B4%A0 -->
-					<!-- 应用 https://www.cnblogs.com/Fancy1486450630/p/16260846.html -->
-					
-				</div>
-			</div>
-		</div>
-
-	</div>
+    <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 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>
+          </div>
+          <chartFirecontrol></chartFirecontrol>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <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>
+          </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>
+          </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>
+          <chartFarmtype></chartFarmtype>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>植树造林计划、面积、完成情况等</span>
+          </div>
+          <chartDanger></chartDanger>
+        </div>
+      </div>
+      <!-- 第九纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>按时间、事件类别统计事件数据（年度、月份、四类事件数量）</span>
+          </div>
+          <chartFireTypeYear></chartFireTypeYear>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>火险高发统计分析</span>
+          </div>
+          <chartFireIncidence></chartFireIncidence>
+        </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>
+          <chartFireGrade></chartFireGrade>
+        </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>
+          <chartFireType></chartFireType>
+        </div>
+      </div>
+
+      <!-- 第十纵向 列表-->
+      <div class="bigdata-list wid-li-1 m-l-15 m-r-15" style="width:500px">
+        <div class="b-con mg-b-20 taller" style="overflow-y:hidden;">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>历次火灾涉及组成</span>
+          </div>
+          <dv-scroll-board :config="config"/>
+        </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 设备分布、、
-	import {
-		getRlt
-	} from '@/api/bigdata'
-	import {
-		fontConfig
-	} from '@/api/login'
-
-	export default {
-		components: {
-			bigdataSupermap,
-			tabbar,
-			chartEvent,
-			chartForestFarm,
-			chartEquipmentType,
-			chartFireCause,
-			chartDeviceReportingEvents,
-			chartEventTrend,
-			chartKeyArea,
-			chartAncientTree,
-			chartWeatherTrends,
-			chartGridDistribution,
-			chartFireBrigade,
-			chartGridStaff,
-			chartWeatherStation,
-			chartEquipmentDistribution
-		},
-		data() {
+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 设备分布、、
+
+import chartFirecontrol from './chart-firecontrol.vue' //17 各林场巡查队伍当日在职情况（在职、缺岗)
+import chartFarm from './chart-farm.vue' //18 森林资源统计
+import chartPit from './chart-pit.vue' //19 车辆信息统计
+import chartCollection from './chart-collection.vue' //20 防火设备统计
+import chartFarmtype from './chart-farmtype.vue' //21 巡查出勤排名（正负排名）
+import chartDanger from './chart-danger.vue' //22 植树造林计划、面积、完成情况等
+
+import chartFireGrade from './chart-fireGrade.vue' //22 火灾等级统计分析
+import chartFireType from './chart-fireType.vue' //23 火灾种类统计分析
+import chartFireIncidence from './chart-fireIncidence.vue' //24 火险高发统计分析
+
+import chartFireTypeYear from './chart-fireTypeYear.vue' //25 按时间、事件类别统计事件数据（年度、月份、四类事件数量）
+
+
+
+
+import { getRlt,getEventInfoList } from '@/api/bigdata'
+import { fontConfig } from '@/api/login'
+
+export default {
+  components: {
+    bigdataSupermap,
+    tabbar,
+    chartEvent,
+    chartForestFarm,
+    chartEquipmentType,
+    chartFireCause,
+    chartDeviceReportingEvents,
+    chartEventTrend,
+    chartKeyArea,
+    chartAncientTree,
+    chartWeatherTrends,
+    chartGridDistribution,
+    chartFireBrigade,
+    chartGridStaff,
+    chartWeatherStation,
+    chartEquipmentDistribution,
+    chartFirecontrol,
+    chartFarm,
+    chartPit,
+    chartCollection,
+    chartFarmtype,
+    chartDanger,
+    chartFireGrade,
+    chartFireType,
+    chartFireIncidence,
+    chartFireTypeYear
+  },
+  data() {
 
 			return {
 				systemTitle: {
@@ -244,41 +333,25 @@
 
 				//列表
 				config: { //消息中心数据所有
-					header: ['总面积', '总人数', '林木组成', '林令', '数密度'],
+					header: ['总面积', '总人数', '林木组成', '林令', '疏密度'],
 					indexHeader: '序号',
-					rowNum: 13, // 表行数 表行数小于数据行数时才会出现自动滚动
+					rowNum: 11, // 表行数 表行数小于数据行数时才会出现自动滚动
 					headerBGC: 'rgb(74, 144, 204);', // 表头背景色
 					oddRowBGC: 'rgb(9 48 79);', // 奇数行背景色
 					evenRowBGC: 'rgba(1, 84, 120, 0.266666666666667)', // 偶数行背景色
-					waitTime: 2000, // 轮播时间间隔(ms)
+					waitTime: 3000, // 轮播时间间隔(ms)
 					align: 'center',
 					index: false,
 					carousel: 'page',
 					// columnWidth: [60], // 剩下两列宽度将自动计算
 					headerHeight: 50,
-					data: [
-						['行1列1', '行1列2', '行1列3', '行1列1', '行1列2'],
-						['行2列1', '行2列2', '行2列3', '行1列1', '行1列2'],
-						['行3列1', '行3列2', '行3列3', '行1列1', '行1列2'],
-						['行4列1', '行4列2', '行4列3', '行1列1', '行1列2'],
-						['行5列1', '行5列2', '行5列3', '行1列1', '行1列2'],
-						['行6列1', '行6列2', '行6列3', '行1列1', '行1列2'],
-						['行7列1', '行7列2', '行7列3', '行1列1', '行1列2'],
-						['行8列1', '行8列2', '行8列3', '行1列1', '行1列2'],
-						['行9列1', '行9列2', '行9列3', '行1列1', '行1列2'],
-						['行10列1', '行10列2', '行10列3', '行1列1', '行1列2'],
-						['行10列1', '行10列2', '行10列3', '行1列1', '行1列2'],
-						['行10列1', '行10列2', '行10列3', '行1列1', '行1列2'],
-						['行10列1', '行10列2', '行10列3', '行1列1', '行1列2'],
-					]
+					data: []
 				},
-
-
-
 			}
 		},
 		created() {
-			this.fontConfig()
+			this.fontConfig();
+			this.getEventInfoList();
 		},
 		methods: {
 			rlt() {
@@ -295,7 +368,22 @@
 					this.systemTitle.title = res.data.fontTitle
 					this.systemTitle.subTitle = res.data.subTitle
 				})
-			}
+			},
+
+      getEventInfoList(){
+        getEventInfoList().then(res => {
+          for(let i in res.data){
+            const data = [];
+            data.push(res.data[i].areaTotal);
+            data.push(res.data[i].peopleTotal);
+            data.push(res.data[i].forestComposition);
+            data.push(res.data[i].forestToken);
+            data.push(res.data[i].porosities);
+            this.config.data.push(data);
+          }
+          this.config = {...this.config};//必不可少，不可省略
+        })
+      }
 		},
 		mounted() {
 			this.rlt()
@@ -546,7 +634,7 @@
 		.m-r-15 {
 			margin-right: .5%;
 		}
-		
+
 			.scrollHeight {
 				width: 100%;
 				height: 100%;

src/views/bigdata/chart-collection.vue

@@ -0,0 +1,117 @@
+<!-- **************************************NO.10 收集点*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="collection1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectDeviceCount } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'collection1',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.selectDeviceCount();
+    },
+
+    methods: {
+      selectDeviceCount(){
+        selectDeviceCount().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+				var chartDom = document.getElementById('collection1');
+				var myChart = echarts.init(chartDom);
+				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+				var option;
+				let bgColor = '#fff';
+				let title = '总量';
+
+				let formatNumber = function (num) {
+				    let reg = /(?=(\B)(\d{3})+$)/g;
+				    return num.toString().replace(reg, ',');
+				};
+				let total = data.reduce((a, b) => {
+				    return a + b.value * 1;
+				}, 0);
+
+				option = {
+				    color: color,
+				    series: [
+				        {
+				            type: 'pie',
+				            radius: ['50%', '70%'],
+				            center: ['50%', '50%'],
+				            data: data,
+				            hoverAnimation: false,
+				            itemStyle: {
+				                normal: {
+				                    borderWidth:1,
+				                },
+
+				                emphasis: {
+				                    borderColor: bgColor,
+				                    borderWidth: 2,
+				                         shadowBlur: 8,
+				                borderColor: "#00ffff",
+				                shadowColor: "#00ffff",
+				                },
+				            },
+				            labelLine: {
+				                normal: {
+				                    length: 20,
+				                    length2:10,
+				                    lineStyle: {
+				                        color: '#356781',
+				                    },
+				                },
+				            },
+				            label: {
+				                normal: {
+				                    formatter: (params) => {
+				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
+				                    },
+				                    rich: {
+				                        icon: {
+				                            fontSize: 10,
+				                        },
+				                        name: {
+				                            fontSize:10,
+				                            padding: [0, 3, 0, 4],
+				                            color: '#23c9ea',
+				                        },
+				                        value: {
+				                            fontSize: 10,
+				                            color: '#ffffff',
+				                        },
+				                    },
+				                },
+				            },
+				        },
+				    ],
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-danger.vue

@@ -0,0 +1,241 @@
+<!-- **************************************NO.4 隐患*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="danger1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectCenterdataTForestPlanHz } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'danger1',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.selectCenterdataTForestPlanHz();
+    },
+
+    methods: {
+      selectCenterdataTForestPlanHz(){
+        selectCenterdataTForestPlanHz().then(resp => {
+          const data = [];
+          data[0]=resp.data.totalywc;
+          data[1]=resp.data.totalwks;
+          data[2]=resp.data.totaljxz;
+          data[3]=resp.data.totalarea;
+          data[4]=resp.data.total;
+          this.myEcharts(data);
+        })
+      },
+
+			myEcharts(data) {
+
+
+				var chartDom = document.getElementById('danger1');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+				var option;
+				let indicator = [{
+						name: '已完成',
+						max: 20
+					},
+					{
+						name: '未开始',
+						max: 20
+					},
+					{
+						name: '进行中',
+						max: 20
+					},
+					{
+						name: '总面积',
+						max: 1000
+					},
+					{
+						name: '计划总数',
+						max: 100
+					},
+				]
+
+				option = {
+
+					radar: {
+						center: ['50%', '50%'],
+						radius: '89%',
+						name: {
+							formatter: function(name, indicator) {
+								let arr;
+								//   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
+								//         arr = [
+								//         '{a|'+name+'}{b|'+indicator.value+'万}'
+								//     ]
+								//   }else{
+								arr = [
+									'{a|' + name + '}'
+								]
+								//   }
+
+								return arr.join('\n')
+							},
+							textStyle: {
+								rich: { //根据文字的组设置格式
+									a: {
+										color: '#13ffdc',
+										fontSize: 12,
+										fontFamily: 'Source Han Sans CN',
+									},
+									// b:{
+									//     fontSize:14,
+									//     verticalAlign:'top',
+									//     width:57,
+									//     color:'#8E88FE',
+									//     fontWeight:60,
+									//     align:'center'
+									// },
+								}
+
+							}
+						},
+						nameGap: 0,
+						indicator: indicator,
+						splitLine: {
+							show: false
+
+						},
+						splitArea: {
+							show: false
+						},
+						axisLine: {
+							show: false
+						}
+					},
+					series: [{
+							// name: '家庭融合包',
+							type: 'radar',
+							data: [data],
+							// value:14,
+							label: {
+								show: true,
+								formatter: function(params) {
+									console.log(params)
+									return params.value ;
+								},
+								color: '#ffffff',
+								// position:[-20,-10,-10,-10],
+								align: 'right',
+								distance: 10,
+							},
+							symbolSize: [6, 6],
+							lineStyle: { //边缘颜色
+								width: 0
+							},
+							itemStyle: {
+								borderWidth: 1,
+								color: '#fff',
+								borderColor: '#F2F063',
+							},
+							areaStyle: {
+								color: '#7D77F1',
+								opacity: 0.6
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+								[20, 20, 20, 1000, 100],
+							],
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.06
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+                [10, 10, 10, 500, 50],
+							],
+
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.18
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+                [5, 5, 5, 250, 25],
+							],
+
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.17
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+                [2, 2, 2, 100, 10],
+							],
+
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.13
+							}
+						},
+					]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-farm.vue

@@ -0,0 +1,75 @@
+<!-- **************************************NO.8 养殖场分布*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="farm1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectCenterdataTForestResourcesSum } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'farm1',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.selectCenterdataTForestResourcesSum();
+    },
+
+    methods: {
+      selectCenterdataTForestResourcesSum(){
+        selectCenterdataTForestResourcesSum().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+        var chartDom = document.getElementById('farm1');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+        var option;
+        option = {
+          color:color,
+          tooltip : {
+            trigger: 'item',
+            formatter: "{b}: {c}"
+          },
+          toolbox: {
+            show : true,
+          },
+          series : [
+            {
+              type:'pie',
+              roseType: true,
+              radius : ['50%', '70%'],
+              label: {
+                show: true,
+                formatter: "{b} {c}",
+                textStyle: {
+                  fontSize: 10 ,
+                }
+              },
+              data:data
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-farmtype.vue

@@ -0,0 +1,183 @@
+<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="farmtype1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectCqpm } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'farmtype1',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.selectCqpm();
+    },
+
+    methods: {
+      selectCqpm(){
+        selectCqpm().then(resp => {
+          this.myEcharts(resp.data.grid,resp.data.data[0].data);
+        })
+      },
+
+			myEcharts(ydata,xdata) {
+
+        	var chartDom = document.getElementById('farmtype1');
+        	var myChart = echarts.init(chartDom);
+        	var option;
+
+          // let ydata = ['上海', '北京', '深圳', '天津', '河南', '新疆', '澳门'];
+          // let xdata = [12, 13, 14, 15, 16, 17, 18];
+          option = {
+            tooltip: {
+              trigger: "axis",
+            },
+            grid: {
+              left: "80",
+              right: "20",
+              bottom: "20",
+              top: "20",
+              containLabel: false,
+            },
+            xAxis: {
+              type: "value",
+              show: false,
+            },
+            yAxis: {
+              type: "category",
+              data: ydata,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                margin: 70,
+                width: 60,
+                align: "left",
+                overflow: "truncate",
+                formatter: function (value, index) {
+                  let ind = index + 1;
+                  if (ind == ydata.length) {
+                    return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
+                  } else if (ind + 1 == ydata.length) {
+                    return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
+                  } else if (ind + 2 == ydata.length) {
+                    return (
+                      "{three|" + (ydata.length - index) + "} {c|" + value + "}"
+                    );
+                  }
+                  if (ydata.length - index > 9) {
+                    return (
+                      "{five|" + (ydata.length - index) + "} {d|" + value + "}"
+                    );
+                  }
+                  return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
+                },
+                rich: {
+                  a: {
+                    color: "#59c9f9",
+                  },
+                  b: {
+                    color: "#59c9f9",
+                  },
+                  c: {
+                    color: "#59c9f9",
+                  },
+                  d: {
+                    color: "#59c9f9",
+                  },
+                  // 第一名
+                  one: {
+                    backgroundColor: "#E86452",
+                    color: "white",
+                    width: 12,
+                    height: 16,
+                    padding: [1, 0, 0, 5],
+                    borderRadius: 10,
+                    fontSize: 11,
+                  },
+                  // 第二名
+                  two: {
+                    backgroundColor: "#FF9845",
+                    color: "white",
+                    width: 12,
+                    height: 16,
+                    padding: [1, 0, 0, 5],
+                    borderRadius: 10,
+                    fontSize: 11,
+                  },
+                  // 第三名
+                  three: {
+                    backgroundColor: "#F6BD16",
+                    color: "white",
+                    width: 12,
+                    height: 16,
+                    padding: [1, 0, 0, 5],
+                    borderRadius: 10,
+                    fontSize: 11,
+                  },
+                  // 一位数
+                  four: {
+                    backgroundColor: "rgba(0,0,0,0.15)",
+                    color: "white",
+                    width: 12,
+                    height: 16,
+                    padding: [1, 0, 0, 5],
+                    borderRadius: 10,
+                    fontSize: 11,
+                  },
+                  // 两位数
+                  five: {
+                    backgroundColor: "rgba(0,0,0,0.15)",
+                    color: "white",
+                    width: 16,
+                    height: 16,
+                    padding: [1, 0, 0, 1],
+                    borderRadius: 10,
+                    fontSize: 11,
+                  },
+                },
+              },
+            },
+            series: [{
+              type: "bar",
+              showBackground: true,
+              label: {
+                show: true,
+                position: "right",
+                color: "rgba(0,0,0,0.45)",
+              },
+              barWidth: 20,
+              itemStyle: {
+                color: "#5B8FF9",
+              },
+              data: xdata,
+            }, ],
+          };
+          option && myChart.setOption(option);
+        },
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-fireGrade.vue

@@ -0,0 +1,75 @@
+<!-- **************************************NO.8 养殖场分布*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="fireGrade" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventCountGroupByFireRisk } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'fireGrade',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.getEventCountGroupByFireRisk();
+    },
+
+    methods: {
+      getEventCountGroupByFireRisk(){
+        getEventCountGroupByFireRisk().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+        var chartDom = document.getElementById('fireGrade');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+        var option;
+        option = {
+          color:color,
+          tooltip : {
+            trigger: 'item',
+            formatter: "{b}: {c}"
+          },
+          toolbox: {
+            show : true,
+          },
+          series : [
+            {
+              type:'pie',
+              roseType: true,
+              radius : ['50%', '70%'],
+              label: {
+                show: true,
+                formatter: "{b} {c}",
+                textStyle: {
+                  fontSize: 10 ,
+                }
+              },
+              data:data
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-fireIncidence.vue

@@ -0,0 +1,122 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="fireIncidence" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventDeptStatistics } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'fireIncidence',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			this.getEventDeptStatistics();
+		},
+
+		methods: {
+      getEventDeptStatistics(){
+        getEventDeptStatistics().then(resp => {
+          const xData=[];
+          const seriesData=[];
+          for (let i in resp.data) {
+            xData.push(resp.data[i].name);
+            seriesData.push(resp.data[i].value);
+          }
+          this.myEcharts(xData,{type:'bar',data:seriesData});
+        })
+      },
+      myEcharts(xData,seriesData) {
+				var chartDom = document.getElementById('fireIncidence');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: seriesData
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/views/bigdata/chart-fireType.vue

@@ -0,0 +1,75 @@
+<!-- **************************************NO.8 养殖场分布*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="fireType" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventCountGroupByFireType } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'fireType',
+		data() {
+			return {
+				count: 0
+			}
+		},
+    mounted() {
+      this.getEventCountGroupByFireType();
+    },
+
+    methods: {
+      getEventCountGroupByFireType(){
+        getEventCountGroupByFireType().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+        var chartDom = document.getElementById('fireType');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+        var option;
+        option = {
+          color:color,
+          tooltip : {
+            trigger: 'item',
+            formatter: "{b}: {c}"
+          },
+          toolbox: {
+            show : true,
+          },
+          series : [
+            {
+              type:'pie',
+              roseType: true,
+              radius : ['50%', '70%'],
+              label: {
+                show: true,
+                formatter: "{b} {c}",
+                textStyle: {
+                  fontSize: 10 ,
+                }
+              },
+              data:data
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-fireTypeYear.vue

@@ -0,0 +1,116 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="fireTypeYear" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventTypeYearStatistics } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'fireTypeYear',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			this.getEventTypeYearStatistics();
+		},
+
+		methods: {
+      getEventTypeYearStatistics(){
+        getEventTypeYearStatistics().then(resp => {
+          this.myEcharts(resp.data.month,resp.data.series);
+        })
+      },
+      myEcharts(xData,seriesData) {
+				var chartDom = document.getElementById('fireTypeYear');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: seriesData
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/views/bigdata/chart-firecontrol.vue

@@ -0,0 +1,116 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="firecontrol1" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectGwRs } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'firecontrol1',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			this.selectGwRs();
+		},
+
+		methods: {
+      selectGwRs(){
+        selectGwRs().then(resp => {
+          this.myEcharts(resp.data.grid,resp.data.data);
+        })
+      },
+      myEcharts(xData,seriesData) {
+				var chartDom = document.getElementById('firecontrol1');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: seriesData
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/views/bigdata/chart-pit.vue

@@ -0,0 +1,79 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="pit1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { selectCarCount } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'pit1',
+		data() {
+			return {
+				count: 0,
+
+        title:'',
+        visible:false,
+
+			}
+		},
+    mounted() {
+      this.selectCarCount();
+    },
+
+    methods: {
+      selectCarCount(){
+        selectCarCount().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+				var chartDom = document.getElementById('pit1');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+				var option;
+				option = {
+				    color:color,
+				    tooltip : {
+				        trigger: 'item',
+				        formatter: "{b}: {c}"
+				    },
+				    toolbox: {
+				        show : true,
+				    },
+				    series : [
+				        {
+				            type:'pie',
+				            roseType: true,
+				            radius : ['50%', '70%'],
+				            label: {
+				              show: true,
+				              formatter: "{b} {c}",
+                      textStyle: {
+                          fontSize: 10 ,
+                      }
+				            },
+				            data:data
+				        }
+				    ]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/forest.vue

@@ -276,10 +276,10 @@
                     prefix-icon="el-icon-search"
                     v-model="eventSearch" @change="getEventList(calendarDay,10,1,eventSearch)">
                   </el-input>
-                </div>
-                <div>
-                  <el-button type="button" @click="getEventList(calendarDay,10,pageNum-1)">上一页</el-button>
-                  <el-button type="button" @click="getEventList(calendarDay,10,pageNum+1)">下一页</el-button>
+                  <div>
+                    <el-button type="button" @click="getEventList(calendarDay,10,pageNum-1)">上一页</el-button>
+                    <el-button type="button" @click="getEventList(calendarDay,10,pageNum+1)">下一页</el-button>
+                  </div>
                 </div>
                 <div  class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
                      @click="dropLocation(item.latitude,item.longitude)" data-html2canvas-ignore>