Merge branch 'visu_firecontrol' of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization into visu_firecontrol

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 四平市态势感知平台
+VUE_APP_TITLE = 通榆县乡村振兴监管平台
 
 # 开发环境配置
 ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 四平市态势感知平台
+VUE_APP_TITLE = 通榆县乡村振兴监管平台
 
 # 生产环境配置
 ENV = 'production'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 四平市态势感知平台
+VUE_APP_TITLE = 通榆县乡村振兴监管平台
 
 NODE_ENV = production
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.4.0",
-  "description": "四平市态势感知平台",
+  "description": "通榆县乡村振兴监管平台",
   "author": "若依",
   "license": "MIT",
   "scripts": {
@@ -42,7 +42,6 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",
-    "dept-selector": "http://121.37.83.100:8081/repository/sooka-npm/dept-selector/-/dept-selector-0.1.10.tgz",
     "echarts": "^4.9.0",
     "element-ui": "2.15.6",
     "file-saver": "2.0.5",

src/api/bigdata.js

@@ -0,0 +1,177 @@
+import request from '@/utils/request'
+
+// 事件来源，类型统计
+export function getSjlylxtj(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
+    data: param,
+    method: 'post',
+  })
+}
+
+//水鹤分布
+export function getShfbtj() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataWatercraneDeptCount',
+    method: 'post',
+  })
+}
+
+//设备类型统计
+export function getShlxtj() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getCameaCount',
+    method: 'post',
+  })
+}
+
+//综合信息
+export function getZhxx(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataZhxx',
+    data: param,
+    method: 'post',
+  })
+}
+
+//起火原因
+export function getQhyy(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectEventByYearGroupByFireSource',
+    data: param,
+    method: 'post',
+  })
+}
+
+//重点区域
+export function getZdqy() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataImportareaDeptCount',
+    method: 'post',
+  })
+}
+
+
+//设备上报事件数量
+export function getSbsbsjsl(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getAIEventNum',
+    data: param,
+    method: 'post',
+  })
+}
+
+//取水口
+export function getQsk() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataWaterintakeDeptCount',
+    method: 'post',
+  })
+}
+
+//事件趋势
+export function getSjqs(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getEventTrend',
+    data: param,
+    method: 'post',
+  })
+}
+
+//消防力量分布
+export function getXfllfb() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataFireforceDeptCount',
+    method: 'post',
+  })
+}
+
+//天气趋势
+export function getTqqs(param) {
+  if (param == null) {
+    let myDate = new Date();
+    let month = myDate.getMonth() + 1;
+    if (month < 10) {
+      month = "0" + month
+    }
+    param = {day: myDate.getFullYear() + "-" + month}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataByYearMonthFegin',
+    data : param,
+    method: 'post',
+  })
+}
+
+//专职站
+export function getZzz() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataFirecontrolFulltimeStationDeptCount',
+    method: 'post',
+  })
+}
+
+//消火栓
+export function getXhs() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataFirehydrantDeptCount',
+    method: 'post',
+  })
+}
+
+//泡沫液
+export function getPmy() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataFirecontrolFoamLiquidDeptCount',
+    method: 'post',
+  })
+}
+
+//泡沫液
+export function getSbfb() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getSbfb',
+    method: 'post',
+  })
+}
+
+//热力图
+export function getRlt(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getHeatMap',
+    method: 'post',
+    data : param
+  })
+}
+
+

src/api/forest.js

@@ -85,7 +85,7 @@ export function getEventByReportorOrder(param) {
 // 日志文件上传
 export function eventLogUpload(param) {
   return request({
-    url: '/center-event/eventcatalogue/upload',
+    url: '/center-event/centereventtfirelog',
     method: 'post',
     data: param
   })
@@ -93,11 +93,12 @@ export function eventLogUpload(param) {
 // 日志发送
 export function sendEventLog(param) {
   return request({
-    url: '/center-event/eventcatalogue/uploadConext',
+    url: '/center-event/centereventtfirelog',
     method: 'post',
     data: param
   })
 }
+
 // 事件处理流程
 export function updateCentereventTEventcatalogueStatus(param) {
   return request({
@@ -191,3 +192,44 @@ export function uploadBase64(param) {
     data:param
   })
 }
+
+// 通过事件code查询事件责任部门
+export function centereventtdepteventList(param) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/centereventtdepteventList',
+    method: 'post',
+    data:param
+  })
+}
+// 通过责任部门查询责任人
+export function dutysystemList(param) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/dutysystemList',
+    method: 'post',
+    data:param
+  })
+}
+
+// 事件责任制添加联系人
+export function dutysystemAdd(param) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/dutysystemAdd',
+    method: 'post',
+    data:param
+  })
+}
+// 事件责任制删除联系人
+export function dutysystemRemove(param) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/dutysystemRemove',
+    method: 'get',
+    params:param
+  })
+}
+// 事件短信联系人
+export function userFeginlist(param) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/userFeginlist',
+    method: 'post'
+  })
+}

src/api/monitor.js

@@ -15,10 +15,17 @@ export function selectCameraByDeptId(deptId) {
     data:{"deptId":deptId}
   })
 }
-// 获取重点区域
+// 获取重点区域列表
 export function selectKeyAreaList() {
   return request({
-    url: '/center-data/importarea/listFegin',
+    url: '/center-firecontrol/VisuForestCloudMapController/importarealistFegin',
+    method: 'get',
+  })
+}
+// 获取重点区域
+export function getRegionalFlag(id) {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudMapController/getRegionalFlag/'+id,
     method: 'get',
   })
 }

src/components/TVWall.vue

@@ -457,7 +457,7 @@ export default {
         },
         cbConnectError: function() { // 创建WebControl实例失败
           that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
@@ -465,7 +465,7 @@ export default {
               that.initPlugin()
             }, 3000)
           } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
         cbConnectClose: function(bNormalClose) {
@@ -481,11 +481,11 @@ export default {
       let that=this
       this.getPubKey(function() {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
-        var appkey = '22654202'                           //综合安防管理平台提供的appkey，必填
-        var secret = that.setEncrypt('d7HlmRIaiXp3MQBmsuUg')   //综合安防管理平台提供的secret，必填
-        var ip = '218.27.1.154'                           //综合安防管理平台IP地址，必填
+        var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
+        var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
+        var ip = '36.49.108.22'                           //综合安防管理平台IP地址，必填
         var playMode = 0                                  //初始播放模式：0-预览，1-回放
-        var port = 54321                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
+        var port = 1443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
         var snapDir = 'D:\\SnapDir'                       //抓图存储路径
         var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
         var layout = '3x3'                                //playMode指定模式的布局

src/components/eventLocation.vue

@@ -344,7 +344,7 @@
                   markersMap.icon = 'sj-icon-map-banjie'
                 } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
                   markersMap.click = 'showEventDialog'
-                  markersMap.icon = 'sj-icon-map-guidnag'
+                  markersMap.icon = 'sj-icon-map-guidang'
                 }
                 markersMap.parameter = this.eventList[i].eventCode
                 markersMap.lng = this.eventList[i].longitude

src/components/star.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="stars">
+    <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
+  </div>
+</template>
+ 
+<script>
+ 
+export default {
+  name: 'StarBackground',
+  props: {},
+  data() {
+    return {
+      starsCount: 1500,
+      distance: 1000
+    }
+  },
+  mounted() {
+    this.initStars()
+  },
+  methods: {
+    initStars() {
+      let starArr = this.$refs.star
+      starArr.forEach(item => {
+        let speed = 0.2 + (Math.random() * 1)
+        let thisDistance = this.distance + (Math.random() * 300)
+        item.style.transformOrigin = `0 0 ${thisDistance}px`
+        item.style.transform = `translate3d(0, 0, -${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed}, ${speed})`
+      })
+    }
+  }
+}
+</script>
+ 
+<style scoped lang="scss">
+@keyframes rotate {
+  0% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+  }
+  100% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+  }
+}
+ 
+.stars {
+  transform: perspective(500px);
+  transform-style: preserve-3d;
+  position: absolute;
+  perspective-origin: 50% 100%;
+  left: 50%;
+  animation: rotate 90s infinite linear;
+  bottom: -200px;
+}
+ 
+.star {
+  width: 3px;
+  height: 2px;
+  background: #39ffe8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+  border-radius: 2px;
+  box-shadow: 0 0 5px rgba($color: #00f6ff, $alpha: 1);
+  // box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  // -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  // -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+}
+</style>

src/components/supermap.vue

@@ -584,7 +584,6 @@ export default {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
           this.isAggregationMyGroup.clearLayers()
         }
-        if (this.isAggregationLayers != null && this.isAggregationLayers.length > 0) {
           this.map.removeLayer(this.isAggregationLayers)
           this.isAggregationLayers = []
           this.radiusLayers = []
@@ -598,11 +597,11 @@ export default {
             //最大缩放级别点击聚合图标展开图标
             spiderfyOnMaxZoom: true
           })
-        }
       } else {
         if (this.myGroup != undefined && this.myGroup != false) {
           this.myGroup.clearLayers()
         }
+        this.map.removeLayer(this.layers)
         this.layers = []
       }
     },
@@ -974,7 +973,7 @@ export default {
         })
         let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
           icon: icon
-        }).addTo(this.map)
+        })
         if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
           let html = markersList[i].bindPopupHtml
           if (keepBindPopup) {
@@ -1008,14 +1007,15 @@ export default {
         if (isAggregation) {
           _that.isAggregationLayers.addLayer(markerClick)
           _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
-          this.map.addLayer(_that.isAggregationLayers)
         } else {
           _that.layers.push(markerClick)
           _that.myGroup = window.L.layerGroup(_that.layers)
-          this.map.addLayer(_that.myGroup)
         }
-
       }
+      if (_that.myGroup != undefined && _that.myGroup != false) {
+        _that.map.addLayer(_that.myGroup)
+      }
+      _that.map.addLayer(_that.isAggregationLayers)
     },
     setMarkersByType: function(markersList, type) { //地图标点(根据类型,可取消落点 clearMByType方法)
       const _that = this
@@ -1033,7 +1033,7 @@ export default {
         })
         let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
           icon: icon
-        }).addTo(this.map)
+        })
         if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
           let html = markersList[i].bindPopupHtml
           if (keepBindPopup) {
@@ -1187,13 +1187,10 @@ export default {
       }
     },
     dropLocation: function(lat, lng) { //落点定位
-
-      this.map.flyTo([lat, lng], 14, { duration: 2 })
-
-      // this.controlLevel(12)
-      // setTimeout(() => {
-      //   this.map.panTo([lat, lng])
-      // }, 1000)
+      this.map.flyTo([lat, lng], 13, { duration: 2 })
+    },
+    dropLocation10: function(lat, lng) { //落点定位
+      this.map.flyTo([lat, lng], 10, { duration: 2 })
     },
     controlLevel: function(level) { //控制地图缩放级别
       this.map.setZoom(level)
@@ -1266,7 +1263,7 @@ export default {
 		align-items: center;
 		.input-group-addon{
 			color: $inBlue;
-			
+
 		}
 		.form-control{
 			padding: 0 .3rem;

src/components/v-fastmenu.vue

@@ -22,7 +22,7 @@
 						<el-button type="primary" size="small" @click="resetPwd">修改密码</el-button>
 						<el-button type="warning" size="small" @click="logout">退出登录</el-button>
 					</div>
-					<a href="https://117.78.49.164:15001/index58" style="border-top: 1px solid #334780;"><i class="el-icon-s-home"></i>返回首页</a>
+          <el-link type="primary" @click="backToMainPage" style="border-top: 1px solid #334780;" icon="el-icon-s-home">返回首页</el-link>
 <!--					<a href="#"><i class="el-icon-monitor"></i>管理系统</a>-->
 				</div>
 				<div slot="reference" style="text-align: center; width:4rem;height:3rem;">
@@ -69,6 +69,15 @@ import { getUserProfile } from "@/api/system/user";
       this.getUser()
     },
 		methods: {
+      backToMainPage(){
+        let href = window.location.href
+        let protacal = href.substr(0,href.indexOf("://")+3)
+        let mo = href.lastIndexOf(":") > 6  ? href.lastIndexOf(":") : href.lastIndexOf("/")
+        let ip = href.substr(href.indexOf("://")+3,mo);
+        let url =href.substr(0,mo)
+        let toUrl = url +":15001/index58"
+        window.location.href = toUrl
+      },
       getUser(){
         getUserProfile().then(response => {
           this.nickName=response.data.nickName

src/components/v-header.vue

@@ -5,7 +5,7 @@
 		<!--中间LOGO -->
 		<div class="title">
 			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-left2.png" /> -->
-			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />四平市态势感知平台 {{titlename}}
+			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />通榆县乡村振兴监管平台 {{titlename}}
 			</h3>
 			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-right2.png" /> -->
 		</div>

src/components/vBottomMenu.vue

@@ -742,7 +742,7 @@ export default {
           } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_5') {
             markersMap.icon = 'sj-icon-map-banjie'
           } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_6') {
-            markersMap.icon = 'sj-icon-map-guidnag'
+            markersMap.icon = 'sj-icon-map-guidang'
           }
           markersMap.lng = res.data.catalogue[0].longitude
           markersMap.lat = res.data.catalogue[0].latitude

src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: '若依管理系统',
+      title: '通榆县乡村振兴监管平台',
       logo: logoImg
     }
   }

src/main.js

@@ -28,6 +28,7 @@ import './permission' // permission control
 //DataV动效组件
 import dataV from '@jiaminghi/data-view'
 
+
 // //WebSocket封装方法
 // import * as socketApi from '@/api/socket'
 // Vue.prototype.socketApi = socketApi

src/router/index.js

@@ -35,18 +35,18 @@ export const constantRoutes = [
 		redirect: 'forest',
 	},
 	{
-		//消防云图
+		//应急云图
 		path: '/forest',
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '消防云图'
+			title: '应急云图'
 		}
 	},
 	{
 		//数据中心
 		path: '/datacenter',
-		name: 'datacenter',
+		name: '',
 		component: () => import('@/views/datacenter'),
 		meta: {
 			title: '数据中心'
@@ -80,12 +80,12 @@ export const constantRoutesNew = [{
 		redirect: 'forest',
 	},
 	{
-		//消防云图
+		//应急云图
 		path: '/forest',
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '消防云图'
+			title: '应急云图'
 		}
 	},
 	{

src/views/bigdata/bigdata.vue

@@ -5,7 +5,7 @@
     <div class="header">
       <!-- title -->
       <div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png"/>
-        <h3 class="title">数字四平态势感知监管平台-数字消防-统计分析</h3>
+        <h3 class="title">通榆县乡村振兴监管平台-数字消防-统计分析</h3>
       </div>
       <div class="bignav">
         <img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
@@ -29,9 +29,9 @@
         </div>
         <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>
-          <chartForestFarm></chartForestFarm>
+          <chartWaterCrane></chartWaterCrane>
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -72,9 +72,9 @@
         </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>
+            <span>取水口</span>
           </div>
-          <chartAncientTree></chartAncientTree>
+          <chartWaterIntake></chartWaterIntake>
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -88,9 +88,9 @@
       <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>
-          <chartGridDistribution></chartGridDistribution>
+          <chartFireFighting></chartFireFighting>
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -103,21 +103,21 @@
       <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>
-          <chartGridStaff></chartGridStaff>
+          <chartFullTimeStation></chartFullTimeStation>
         </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>
+            <span>消火栓</span>
           </div>
-          <chartFireBrigade></chartFireBrigade>
+          <chartFireHydrant></chartFireHydrant>
         </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>
+            <span>泡沫液</span>
           </div>
-          <chartWeatherStation></chartWeatherStation>
+          <chartFoamLiquid></chartFoamLiquid>
         </div>
       </div>
       <!-- 第六纵向-->
@@ -135,318 +135,330 @@
 </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: '数据中心'
+  import tabbar from './tabbar.vue' //区域切换
+  import bigdataSupermap from '@/components/supermap' //超图
+
+  //echarts
+  import chartEvent from './chart-event.vue' //1  事件、、
+  import chartWaterCrane from './chart-waterCrane.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 chartWaterIntake from './chart-waterIntake.vue' //8  取水口、、
+  import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+  import chartFireFighting from './chart-fireFighting.vue' //10 消防力量分布、、
+  import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
+  import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
+  import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
+  import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+
+  import {getRlt} from '@/api/bigdata'
+
+  export default {
+    components: {
+      bigdataSupermap,
+      tabbar,
+      chartEvent,
+      chartWaterCrane,
+      chartEquipmentType,
+      chartFireCause,
+      chartDeviceReportingEvents,
+      chartEventTrend,
+      chartKeyArea,
+      chartWaterIntake,
+      chartWeatherTrends,
+      chartFireFighting,
+      chartFireHydrant,
+      chartFullTimeStation,
+      chartFoamLiquid,
+      chartEquipmentDistribution
+    },
+    data() {
+      return {
+        visited: '',
+        navbar: [{
+          //应急云图
+          path: '/forest',
+          name: '应急云图'
         },
-        {
-          //监控中心
-          path: '/monitor',
-          name: '监控中心'
-        },
-        {
-          //统计分析
-          path: '/bigdata',
-          name: '统计分析'
-        }
+          {
+            //数据中心
+            path: '/datacenter',
+            name: '数据中心'
+          },
+          {
+            //监控中心
+            path: '/monitor',
+            name: '监控中心'
+          },
+          {
+            //统计分析
+            path: '/bigdata',
+            name: '统计分析'
+          }
 
-      ],
-      total: 0, //事件总数
-      untreated: 0, //事件-未处理
-      processing: 0 // 事件-处理中
+        ],
+        total: 0, //事件总数
+        untreated: 0, //事件-未处理
+        processing: 0 // 事件-处理中
+      }
+    },
+
+    methods: {
+      rlt() {
+        let that = this
+        getRlt().then(resp => {
+          setTimeout(() => {
+            //事件分布
+            that.$refs.bigdataSupermap.loadHeatMap(resp.data)
+          }, 5000)
+        })
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.rlt()
     }
-  },
-  created() {
-  },
-  mounted() {
-    setTimeout(() => {
-      this.$refs.bigdataSupermap.loadHeatMap() //事件分布
-    }, 5000)
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
+  @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;
+  .bigdata-con {
+    width: -webkit-fit-content;
+    height: 100%;
+    background: #01020c;
 
-    .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;
-      }
+    .el-loading-mask {
+      background: none;
     }
 
-    .bignav {
-      height: 40px;
-      position: fixed;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 0;
-      z-index: 1000;
-      border-radius: 5px;
+    .header {
+      height: 3rem;
       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;
+      .header-left {
+        position: fixed;
+        left: 10px;
+        top: 5px;
         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;
+        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;
+        }
       }
 
-      .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;
-
-      }
-    }
+      .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;
+    .bigdata-body {
+      margin: 15px;
+      display: flex;
+      align-items: top;
+      // justify-content: center;
 
-    .twins-con {
-      width: 100% !important;
     }
 
-    .b-49 {
-      width: 49% !important;
+    .flex-r {
+      display: flex;
+      flex-direction: row !important;
+      align-content: flex-start;
+      justify-content: space-between
     }
 
-    .b-con {
-      width: 100%;
-      height: 28.5vh;
+    .bigdata-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
 
-      box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-      -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+      .twins-con {
+        width: 100% !important;
+      }
 
-      // 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);
-        }
+      .b-49 {
+        width: 49% !important;
       }
 
-      .twins {
+      .b-con {
         width: 100%;
-        display: flex;
-        position: relative;
+        height: 28.5vh;
+
+        box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+        -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
 
-        .count {
+        // display: flex;
+        // flex-direction: column;
+        .b-tit {
           width: 100%;
-          color: #fff;
-          font-size: 12px;
-          position: absolute;
           display: flex;
           align-items: center;
-          left: 1rem;
-          top: 9px;
-          z-index: 100;
+          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);
+          }
+        }
 
-          .count-z {
-            display: flex;
-            margin: 0 .5rem;
+        .twins {
+          width: 100%;
+          display: flex;
+          position: relative;
 
-            span {
-              margin-left: .4rem;
-              font-size: 1rem;
-              color: #2ee0fb !important;
-              font-weight: bolder;
+          .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;
+      }
 
-    .tall {
-      height: 59vh !important;
-    }
+      .taller {
+        height: 89.5vh !important;
+      }
 
-    .taller {
-      height: 89.5vh !important;
-    }
+      .three {
+        display: flex;
+        flex-direction: column;
+      }
 
-    .three {
-      display: flex;
-      flex-direction: column;
-    }
+      .el-row {
+        width: 100%;
+      }
 
-    .el-row {
-      width: 100%;
-    }
 
+      .bigdata-map {
+        width: 100%;
+        height: 59vh;
+        position: relative;
+        background: #00101f;
 
-    .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;
+        .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;
+          span {
+            font-size: 16px;
+            color: #d50000;
+          }
         }
+
       }
 
     }
 
-  }
-
-  .wid-li-1 {
-    width: 396px;
-  }
+    .wid-li-1 {
+      width: 396px;
+    }
 
-  .wid-li-2 {
-    width: 760px;
-  }
+    .wid-li-2 {
+      width: 760px;
+    }
 
-  .wid-li-3 {
-    width: 850px;
-  }
+    .wid-li-3 {
+      width: 850px;
+    }
 
-  .wid-li-4 {
-    width: 304px;
-  }
+    .wid-li-4 {
+      width: 304px;
+    }
 
-  .mg-b-20 {
-    margin-bottom: 2vh;
-  }
+    .mg-b-20 {
+      margin-bottom: 2vh;
+    }
 
-  .m-l-15 {
-    margin-left: .5%;
+    .m-l-15 {
+      margin-left: .5%;
+    }
   }
-}
 </style>

src/views/bigdata/chart-ancientTree.vue

@@ -1,174 +0,0 @@
-<!-- **************************************NO.8 养殖场分布*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="farm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('farm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				var data =  [20, 80, 100, 40, 34];
-				option = {
-				    color: ["#41FF80"],
-				    title: {
-				        show: false
-				    },
-				    grid: {
-				        top: '15%',
-				        right: '12%',
-				        bottom: '22%',
-				        left: '15%'
-				    },
-				    tooltip: {
-				        show: false
-				    },
-				    xAxis: {
-				        data: [
-				            "双辽市",
-				            "梨树县",
-				            "伊通县",
-				            "铁东区",
-				            "铁西区",
-				        ],
-				        axisLine: {
-				            show: true, //隐藏X轴轴线
-				            lineStyle: {
-				                color: '#2D455A'
-				            }
-				        },
-				        axisTick: {
-				            show: false //隐藏X轴刻度
-				        },
-				        axisLabel: {
-				            show: true,
-				            margin: 14,
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#ffffff' //X轴文字颜色
-				            }
-				        }
-				    },
-				    yAxis: [{
-				        type: 'value',
-				        gridIndex: 0,
-				        interval: 25,
-				        // splitNumber: 4,
-				        splitLine: {
-				            show: true,
-				            lineStyle: {
-				                type: 'solid',
-				                color: '#325A9F',
-				                width: 1
-				            }
-				        },
-				        axisTick: {
-				            show: false
-				        },
-				        axisLine: {
-				            show: false
-				        },
-				        axisLabel: {
-				            show: true,
-				            formatter: '{value}',
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#6ad8ff' //X轴文字颜色
-				            }
-				        }
-				    }],
-				    series: [{
-				            name: '养殖场分布',
-				            type: 'bar',
-				            barWidth: 8,
-				            itemStyle: {
-				                normal: {
-				                    label: {
-				                        show: true, //开启显示
-				                        position: 'top', //在上方显示
-				                        textStyle: { //数值样式
-				                            color: '#fff',
-				                        }
-				                    },
-				                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				                            offset: 0,
-				                            color: '#fffa55'
-				                        },
-				                        {
-				                            offset: 0.5,
-				                            color: '#55ff18'
-				                        },
-				                        {
-				                            offset: 1,
-				                            color: '#29eeff'
-				                        }
-				                    ])
-				                }
-				            },
-				            data:data,
-				            z: 10,
-				            zlevel: 0
-				        },
-				        {
-				            // 分隔
-				            type: 'pictorialBar',
-				            itemStyle: {
-				                normal: {
-				                    color: '#0F375F'
-				                }
-				            },
-				            symbolRepeat: 'fixed',
-				            symbolMargin: 2,
-				            symbol: 'rect',
-				            symbolClip: true,
-				            symbolSize: [8, 2],
-				            symbolPosition: 'start',
-				            symbolOffset: [0, -1],
-				            // symbolBoundingData: this.total,
-				            data:data,
-				            width: "100%",
-				            z: 0,
-				            zlevel: 1
-				        }
-				    ]
-				};
-				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-deviceReportingEvents.vue

@@ -1,149 +1,159 @@
 <!-- **************************************NO.5 林场*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="forestfarm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="forestfarm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'forestfarm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('forestfarm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				option = {
-				        tooltip: {
-				          trigger: 'axis',
-				          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-				            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-				          }
-				        },
-				        grid: {
-				          left: '10%',
-				          right: '10%',
-				          bottom: '10%',
-				          top:'16%',
-				          containLabel: true
-				        },
-				        
-				        xAxis: {
-				          type: 'category',
-				          data: ['双辽市','梨树县','伊通县','铁东区','铁西区'],
-				          axisLine: {
-				            lineStyle: {
-				              color: '#1cc6a1'
-				
-				            }
-				          },
-				          axisLabel: {
-				            // interval: 0,
-				            // rotate: 40,
-				            textStyle: {
-				              fontFamily: 'Microsoft YaHei'
-				            }
-				          },
-				        },
-				
-				        yAxis: {
-				          type: 'value',
-				          max:'500',
-				          axisLine: {
-				            show: false,
-				            lineStyle: {
-				              color: '#19b1e8'
-				            }
-				          },
-				          splitLine: {
-				            show: true,
-				            lineStyle: {
-				              color: 'rgba(255,255,255,0.1)'
-				            }
-				          },
-				          axisLabel: {}
-				        },
-				        
-				        series: [{
-				          type: 'bar',
-				          barWidth: '15%',
-				          itemStyle: {
-				            normal: {
-				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                    offset: 0,
-				                    color: '#fccb05'
-				                }, {
-				                    offset: 1,
-				                    color: '#1689f5'
-				                }]),
-				                barBorderRadius: 12,
-				            },
-				          },
-				          data: [400, 400, 300, 300, 300]
-				        }]
-				      };
-				
-				      var app = {
-				        currentIndex: -1,
-				      };
-				      setInterval(function () {
-				        var dataLen = option.series[0].data.length;
-				
-				        // 取消之前高亮的图形
-				        myChart.dispatchAction({
-				          type: 'downplay',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				        app.currentIndex = (app.currentIndex + 1) % dataLen;
-				        //console.log(app.currentIndex);
-				        // 高亮当前图形
-				        myChart.dispatchAction({
-				          type: 'highlight',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex,
-				        });
-				        // 显示 tooltip
-				        myChart.dispatchAction({
-				          type: 'showTip',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				
-				
-				      }, 1000);
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
+  import * as echarts from 'echarts';
+  import {getSbsbsjsl} from '@/api/bigdata'
+
+  export default {
+    name: 'forestfarm',
+    data() {
+      return {
+        count: 0,
+        data_sbsjsbsl_num:[],
+        data_sbsjsbsl_reportor:[]
+      }
+    },
+    mounted() {
+      this.sbsbsjsl();
+    },
+
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
+      sbsbsjsl() {
+        let that = this
+        getSbsbsjsl(null).then(resp => {
+          that.data_sbsjsbsl_num = resp.data.num
+          that.data_sbsjsbsl_reportor = resp.data.reportor
+          this.myEcharts()
+        })
+      },
+
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('forestfarm');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '10%',
+            right: '10%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true
+          },
+
+          xAxis: {
+            type: 'category',
+            data: that.data_sbsjsbsl_reportor,
+            axisLine: {
+              lineStyle: {
+                color: '#1cc6a1'
+
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            },
+          },
+
+          yAxis: {
+            type: 'value',
+            max: '500',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#19b1e8'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+              }
+            },
+            axisLabel: {}
+          },
+
+          series: [{
+            type: 'bar',
+            barWidth: '15%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#fccb05'
+                }, {
+                  offset: 1,
+                  color: '#1689f5'
+                }]),
+                barBorderRadius: 12,
+              },
+            },
+            data: that.data_sbsjsbsl_num
+          }]
+        };
+
+        var app = {
+          currentIndex: -1,
+        };
+        setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+
+
+        }, 1000);
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-equipmentDistribution.vue

@@ -1,393 +1,395 @@
 <!-- **************************************NO.16 摄像头*************************************** -->
 <template>
-	<div class="chart-container">
-		<!-- <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>
+  <div class="chart-container">
+    <!-- <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>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'camera',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			// this.myEcharts1();
-			this.myEcharts2();
-			// this.myEcharts3();
+  import * as echarts from 'echarts';
+  import {getSbfb} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'camera',
+    data() {
+      return {
+        count: 0,
+        data_sbfb:[]
+      }
+    },
+    mounted() {
+      this.sbfb()
+      // this.myEcharts1();
+      this.myEcharts2();
+      // this.myEcharts3();
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
-			myEcharts1() {
-				var chartDom = document.getElementById('camera1');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						dimensions: ['name', '摄像头'],
-						source: [{
-								name: '双辽市',
-								'摄像头': 50
-							},
-							{
-								name: '梨树县',
-								'摄像头': 40
-							},
-							{
-								name: '伊通县',
-								'摄像头': 30
-							},
-							{
-								name: '铁东区',
-								'摄像头': 20
-							},
-							{
-								name: '铁西区',
-								'摄像头': 30
-							}
-						]
-					},
-					tooltip: {
-						trigger: 'item',
-						position: function(point, params, dom, rect, size) {
-							const x = point[0];
-							const y = point[1];
-				 		const viewWidth = size.viewSize[0];
-							const viewHeight = size.viewSize[1];
-							const boxWidth = size.contentSize[0];
-				 		const boxHeight = size.contentSize[1];
-							let posX = 0;
-							let posY = 0;
-				 		if (x < boxWidth) {
-								// 左边放不开
-								posX = 5;
-							} else {
-								// 左边放的下
-								posX = x - boxWidth;
-							}
-							if (y < boxHeight) {
-								// 上边放不开
-								posY = 5;
-							} else {
-								// 上边放得下
-								posY = y - boxHeight;
-							}
-							return [posX, posY];
-						},
-					},
-					angleAxis: {
-						max(value) {
-							return value.max * 1.1;
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-				  axisLine: {
-							show: false
-						},
-						splitLine: {
-							show: false
-						},
-						startAngle: 270
-					},
-					radiusAxis: {
-						type: 'category',
-						minorTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-					},
-					polar: {
-				 	radius: ['40%', '90%'],
-				 },
-					// angleAxis:{
-					//     clockwise:false
-					// },
-					series: [{
-						type: 'bar',
-						coordinateSystem: 'polar',
-						itemStyle: {
-				  	color(params) {
-								const idx = params.dataIndex;
-								return dfColor[idx];
-							},
-						},
-						barWidth: 5,
-						roundCap: true,
-						showBackground: true,
-						backgroundStyle: {
-							color: 'RGBA(0, 69, 117, 0.5)',
-						},
-					}],
-				};
-				option && myChart.setOption(option);
-			},
+    },
 
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
-			myEcharts2() {
-				var chartDom = document.getElementById('camera2');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						source: [
-							["类型1", 1200],
-							["类型2", 1000],
-							["类型3", 746],
-							["类型4", 636],
-							["类型5", 581],
-							["类型6", 426],
-							["类型7", 326]
-						],
-					},
-					tooltip: {
-						trigger: 'item',
+    methods: {
+      sbfb() {
+        let that = this
+        getSbfb().then(resp => {
+          that.myEcharts2();
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
+      myEcharts1() {
+        var chartDom = document.getElementById('camera1');
+        var myChart = echarts.init(chartDom);
+        var option;
+        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
+        option = {
+          dataset: {
+            dimensions: ['name', '摄像头'],
+            source: [{
+              name: '双辽市',
+              '摄像头': 50
+            },
+              {
+                name: '梨树县',
+                '摄像头': 40
+              },
+              {
+                name: '伊通县',
+                '摄像头': 30
+              },
+              {
+                name: '铁东区',
+                '摄像头': 20
+              },
+              {
+                name: '铁西区',
+                '摄像头': 30
+              }
+            ]
+          },
+          tooltip: {
+            trigger: 'item',
+            position: function (point, params, dom, rect, size) {
+              const x = point[0];
+              const y = point[1];
+              const viewWidth = size.viewSize[0];
+              const viewHeight = size.viewSize[1];
+              const boxWidth = size.contentSize[0];
+              const boxHeight = size.contentSize[1];
+              let posX = 0;
+              let posY = 0;
+              if (x < boxWidth) {
+                // 左边放不开
+                posX = 5;
+              } else {
+                // 左边放的下
+                posX = x - boxWidth;
+              }
+              if (y < boxHeight) {
+                // 上边放不开
+                posY = 5;
+              } else {
+                // 上边放得下
+                posY = y - boxHeight;
+              }
+              return [posX, posY];
+            },
+          },
+          angleAxis: {
+            max(value) {
+              return value.max * 1.1;
+            },
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            startAngle: 270
+          },
+          radiusAxis: {
+            type: 'category',
+            minorTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+          },
+          polar: {
+            radius: ['40%', '90%'],
+          },
+          // angleAxis:{
+          //     clockwise:false
+          // },
+          series: [{
+            type: 'bar',
+            coordinateSystem: 'polar',
+            itemStyle: {
+              color(params) {
+                const idx = params.dataIndex;
+                return dfColor[idx];
+              },
+            },
+            barWidth: 5,
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'RGBA(0, 69, 117, 0.5)',
+            },
+          }],
+        };
+        option && myChart.setOption(option);
+      },
 
-					},
-					grid: {
-						top: "0%",
-						left: "6%",
-						// right: "4%",
-						bottom: "5%",
-						width: '75%',
-						containLabel: true,
-					},
-					xAxis: {
-						show: false,
-						type: "value",
-					},
-					yAxis: {
-						type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
-						inverse: true,
-						axisLabel: {
-							show: true,
-							textStyle: {
-								color: '#5deaff',
-								fontSize: '12'
-							}
-						},
-				  splitLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-					},
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
+      myEcharts2() {
+        let that = this
+        var chartDom = document.getElementById('camera2');
+        var myChart = echarts.init(chartDom);
+        var option;
+        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
+        option = {
+          dataset: {
+            source: that.data_sbfb,
+          },
+          tooltip: {
+            trigger: 'item',
 
-					series: [{
+          },
+          grid: {
+            top: "0%",
+            left: "6%",
+            // right: "4%",
+            bottom: "5%",
+            width: '75%',
+            containLabel: true,
+          },
+          xAxis: {
+            show: false,
+            type: "value",
+          },
+          yAxis: {
+            type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#5deaff',
+                fontSize: '12'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+          },
 
-						type: "bar",
-						animationCurve: "easeOutBack",
-						barWidth: 8,
-						label: {
-							show: true,
-							position: "right",
-							offset: [0, 0],
-							color: "#88dfd5",
-							// fontSize: "12",
-							style: {
-				   	fill: "#fff"
-							},
-						},
-						backgroundBar: {
-							show: true,
-							style: {
-								fill: "rgba(97,152,255,0.30)",
-							},
-						},
-						barStyle: {
-							stroke: "rgba(41,244,236,1)",
-						},
-						gradient: {
-							color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
-						},
-						itemStyle: {
-							label: {
-								show: true
-							},
-							labelLine: {
-								show: false,
-							},
-							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				 				offset: 0,
-									color: "rgba(41,244,236,0)"
-								},
-								{
-									offset: 1,
-									color: "rgba(41,244,236,1)"
-								},
-							]),
-							borderColor: "#a2f9f7",
-							shadowBlur: 16,
-							shadowColor: "#a2f9f7",
-						},
-					}, ],
-				};
-				option && myChart.setOption(option);
-			},
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
-			myEcharts3() {
-				var chartDom = document.getElementById('camera3');
-				var myChart = echarts.init(chartDom);
-				var option;
-				option = {
-					color: ['#3D91F7', '#61BE67'],
-					tooltip: {},
-					legend: {
-						show: true,
-						icon: "circle",
-						bottom: 30,
-						center: 0,
-						itemWidth: 14,
-						itemHeight: 14,
-						itemGap: 21,
-						orient: "horizontal",
-						data: ['a', 'b'],
-						textStyle: {
-							color: '#8C8C8C'
-						},
-					},
+          series: [{
 
-					radar: {
-						// shape: 'circle',
-						radius: '80%',
-						triggerEvent: true,
-						name: {
-							textStyle: {
-								color: '#fff',
-								fontSize: '10',
-								borderRadius: 3,
-								padding: [3, 5]
-							}
-						},
-						nameGap: '2',
-						indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
-								name: '型号1',
-								max: 6500
-							},
-							{
-								name: '型号2',
-								max: 16000
-							},
-							{
-								name: '型号3',
-								max: 30000
-							},
-							{
-								name: '型号4',
-								max: 38000
-							},
-							{
-								name: '型号5',
-								max: 52000
-							},
-							{
-								name: '型号6',
-								max: 25000
-							},
-							{
-								name: '型号7',
-								max: 25000
-							}
-						],
-						splitArea: {
-							areaStyle: {
-								color: [
-									'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
-									'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
-									'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
-								].reverse()
-							}
-						},
-						// axisLabel:{//展示刻度
-						//     show: true
-						// },
-						axisLine: { //指向外圈文本的分隔线样式
-							lineStyle: {
-								color: 'rgba(0,0,0,0)'
-							}
-						},
-						splitLine: {
-							lineStyle: {
-								width: 2,
-								color: [
-									'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
-									'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
-									'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
-								].reverse()
-							}
-						},
+            type: "bar",
+            animationCurve: "easeOutBack",
+            barWidth: 8,
+            label: {
+              show: true,
+              position: "right",
+              offset: [0, 0],
+              color: "#88dfd5",
+              // fontSize: "12",
+              style: {
+                fill: "#fff"
+              },
+            },
+            backgroundBar: {
+              show: true,
+              style: {
+                fill: "rgba(97,152,255,0.30)",
+              },
+            },
+            barStyle: {
+              stroke: "rgba(41,244,236,1)",
+            },
+            gradient: {
+              color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
+            },
+            itemStyle: {
+              label: {
+                show: true
+              },
+              labelLine: {
+                show: false,
+              },
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: "rgba(41,244,236,0)"
+              },
+                {
+                  offset: 1,
+                  color: "rgba(41,244,236,1)"
+                },
+              ]),
+              borderColor: "#a2f9f7",
+              shadowBlur: 16,
+              shadowColor: "#a2f9f7",
+            },
+          },],
+        };
+        option && myChart.setOption(option);
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
+      myEcharts3() {
+        var chartDom = document.getElementById('camera3');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          color: ['#3D91F7', '#61BE67'],
+          tooltip: {},
+          legend: {
+            show: true,
+            icon: "circle",
+            bottom: 30,
+            center: 0,
+            itemWidth: 14,
+            itemHeight: 14,
+            itemGap: 21,
+            orient: "horizontal",
+            data: ['a', 'b'],
+            textStyle: {
+              color: '#8C8C8C'
+            },
+          },
 
-					},
+          radar: {
+            // shape: 'circle',
+            radius: '80%',
+            triggerEvent: true,
+            name: {
+              textStyle: {
+                color: '#fff',
+                fontSize: '10',
+                borderRadius: 3,
+                padding: [3, 5]
+              }
+            },
+            nameGap: '2',
+            indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
+              name: '型号1',
+              max: 6500
+            },
+              {
+                name: '型号2',
+                max: 16000
+              },
+              {
+                name: '型号3',
+                max: 30000
+              },
+              {
+                name: '型号4',
+                max: 38000
+              },
+              {
+                name: '型号5',
+                max: 52000
+              },
+              {
+                name: '型号6',
+                max: 25000
+              },
+              {
+                name: '型号7',
+                max: 25000
+              }
+            ],
+            splitArea: {
+              areaStyle: {
+                color: [
+                  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
+                  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
+                  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
+                ].reverse()
+              }
+            },
+            // axisLabel:{//展示刻度
+            //     show: true
+            // },
+            axisLine: { //指向外圈文本的分隔线样式
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                width: 2,
+                color: [
+                  'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
+                  'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
+                  'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
+                ].reverse()
+              }
+            },
 
-					series: [{
-						name: '型号统计',
-						type: 'radar',
-						//areaStyle: {normal: {}},
-						areaStyle: {
-							normal: {
-								color: 'rgba(252,211,3, 0.3)'
-							}
-						},
-						symbolSize: 0,
-						lineStyle: {
-							normal: {
-								color: 'rgba(252,211,3, 1)',
-								width: 1
-				  	}
-						},
-						data: [{
-							value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
-							name: '型号统计',
+          },
 
+          series: [{
+            name: '型号统计',
+            type: 'radar',
+            //areaStyle: {normal: {}},
+            areaStyle: {
+              normal: {
+                color: 'rgba(252,211,3, 0.3)'
+              }
+            },
+            symbolSize: 0,
+            lineStyle: {
+              normal: {
+                color: 'rgba(252,211,3, 1)',
+                width: 1
+              }
+            },
+            data: [{
+              value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
+              name: '型号统计',
 
 
-						}]
-					}]
-				};
-				option && myChart.setOption(option);
-			},
+            }]
+          }]
+        };
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

src/views/bigdata/chart-equipmentType.vue

@@ -1,117 +1,135 @@
 <!-- **************************************NO.3 企业*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="enterprise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="enterprise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'enterprise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getShlxtj} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'enterprise',
+    data() {
+      return {
+        count: 0,
+        data_deviceCount: [],
+        data_deviceType: [],
+        deviceTypeCount: []
+      }
+    },
+    mounted() {
+      this.sblxtj()
+    },
 
-		methods:{
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('enterprise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				 var value = [987, 634, 413, 312, 123];
-				var temp = 0;
-				option = {
-				  
-				    tooltip: {
-				        trigger: 'item',
-				        formatter: '{a} <br/>{b} : {c} ',
-				    },
-				   
-				    legend: {
-				        // show: false,
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:19,
-						top:'2%',
-				        data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				    },
-				    series: [
-				        {
-				            name: '企业分布',
-				            type: 'funnel',
-							top:'25%',
-				            left: '10%',
-				            width: '70%',
-							height:'68%',
-							
-				            label: {
-				                show: true,
-				                color: '#07faa9',
-				                formatter: function () {
-				                    for (var i in value) {
-				                        console.log(value[i]);
-				                        if (i == temp) {
-				                            temp++;
-				                            return value[i] ;
-				                        }
-				                    }
-				                },
-				            },
-				            labelLine: {
-				                show: true,
-				            },
-				            itemStyle: {
-				                opacity: 1,
-				            },
-				            emphasis: {
-				                label: {
-				                    position: 'inside',
-				                    // formatter: '{b}Expected: {c}%',
-				                },
-				            },
-				            data: [
-				                { value: 100, name: '双辽市', itemStyle: { color: '#4672F7' } },
-				                { value: 80, name: '梨树县', itemStyle: { color: '#4C9DFF' } },
-				                { value: 60, name: '伊通县', itemStyle: { color: '#36DC88' } },
-				                { value: 40, name: '铁东区', itemStyle: { color: '#FBC71B' } },
-				                { value: 20, name: '铁西区', itemStyle: { color: '#F9A646' } },
-				            ],
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
+    methods: {
+      color16() {//十六进制颜色随机
+        var r = Math.floor(Math.random() * 256)
+        var g = Math.floor(Math.random() * 256)
+        var b = Math.floor(Math.random() * 256)
+        //var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
+        var color = '#' + (Array(6).join(0) + (r.toString(16) + g.toString
+        (16) + b.toString(16))).slice(-6)
+        return color
+      },
+      sblxtj() {
+        let that = this
+        getShlxtj().then(resp => {
+          that.data_deviceCount = resp.data.deviceCount
+          that.data_deviceType = resp.data.deviceType
+          for (let i = 0; i < resp.data.deviceCount.length; i++) {
+            that.deviceTypeCount.push({
+              value: resp.data.deviceCount[i],
+              name: resp.data.deviceType[i],
+              itemStyle: {color: that.color16()}
+            })
+          }
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-		},
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('enterprise');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        var value = that.data_deviceCount;
+        var temp = 0;
+        option = {
 
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ',
+          },
 
-	}
-</script>
+          legend: {
+            // show: false,
+            textStyle: {
+              color: '#fffff',
+              fontSize: 10
+            },
+            itemWidth: 19,
+            top: '2%',
+            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
+          },
+          series: [
+            {
+              name: '企业分布',
+              type: 'funnel',
+              top: '25%',
+              left: '10%',
+              width: '70%',
+              height: '68%',
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+              label: {
+                show: true,
+                color: '#07faa9',
+                formatter: function () {
+                  for (var i in value) {
+                    if (i == temp) {
+                      temp++;
+                      return value[i];
+                    }
+                  }
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              itemStyle: {
+                opacity: 1,
+              },
+              emphasis: {
+                label: {
+                  position: 'inside',
+                  // formatter: '{b}Expected: {c}%',
+                },
+              },
+              data: that.deviceTypeCount,
+            },
+          ],
+        };
+        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-event.vue

@@ -1,314 +1,285 @@
 <!-- **************************************NO.2 事件类型 分类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="event" style="width: 50%; height:21vh;">
-		</div>
-		<div id="event2" style="width: 50%; height:21vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="event" style="width: 50%; height:21vh;">
+    </div>
+    <div id="event2" style="width: 50%; height:21vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'event',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-			this.myEcharts2()
+  import * as echarts from 'echarts';
+  import {getSjlylxtj} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'event',
+    data() {
+      return {
+        count: 0,
+        data_type:[],
+        data_source:[]
+      }
+    },
+    mounted() {
+      this.sjlylxtj()
+    },
 
-		methods:{
-			// 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
-			//http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('event');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				
-				
-				option = {
-				  color: color,
-				  tooltip: {
-				    trigger: 'item',
-					position: 'top'
-				  },
-				  series: [
-				    {
-				      name: '事件类型',
-				      type: 'pie',
-					  center:['50%','60%'],
-				      radius: ['55%', '70%'],
-				      avoidLabelOverlap: false,
-				      
-				      label: {
-				        show: false,
-				        position: 'center'
-				      },
-				      emphasis: {
-				        label: {
-				          show: true,
-				          fontSize: '12',
-				          fontWeight: 'bold'
-				        }
-				      },
-				      labelLine: {
-				        show: false
-				      },
-				      data: [
-				        { value: 1048, name: '事件1' },
-				        { value: 735, name: '事件2' },
-				        { value: 580, name: '事件3' },
-				        { value: 484, name: '事件4' },
-				        { value: 300, name: '事件5' }
-				      ]
-				    },
-					
-				  ]
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
-			myEcharts2() {
-				
-				
-				var chartDom = document.getElementById('event2');
-				var myChart = echarts.init(chartDom);
-				 let dashedPic =
-				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-				var option;
-				let chartData = [
-				    {
-				        name: '双辽市',
-				        value: 40083,
-				        unit: '列',
-				    },
-				    {
-				        name: '梨树县',
-				        value: 33974,
-				        unit: '列',
-				    },
-				    {
-				        name: '伊通县',
-				        value: 15400,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁东区',
-				        value: 11021,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁西区',
-				        value: 30696,
-				        unit: '列',
-				    },
-				
-				];
-				let arrName = [];
-				let arrValue = [];
-				let sum = 0;
-				let pieSeries = [],
-				    lineYAxis = [];
-				
-				// 数据处理
-				chartData.forEach((v, i) => {
-				    arrName.push(v.name);
-				    arrValue.push(v.value);
-				    sum = sum + v.value;
-				});
-				
-				// 图表option整理
-				chartData.forEach((v, i) => {
-				    pieSeries.push({
-				        name: '沪昆线到达晚点情况',
-				        type: 'pie',
-				        clockWise: false,
-				        hoverAnimation: false,
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderRadius: 20,
-				        },
-				        data: [
-				            {
-				                value: v.value,
-				                name: v.name,
-				                 itemStyle: {
-				                    normal: {
-				                        borderWidth: 5,
-				                        borderColor:color[i]
-				                    }
-				                }
-				            },
-				            {
-				                value: sum - v.value,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    pieSeries.push({
-				        name: '',
-				        type: 'pie',
-				        silent: true,
-				        z: 1,
-				        clockWise: false, //顺时加载
-				        hoverAnimation: false, //鼠标移入变大
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderCap: 'round',
-				            borderJoin: 'round',
-				        },
-				        data: [
-				            {
-				                value: 7.5,
-				                itemStyle: {
-				                    color: '#E3F0FF',
-				                },
-				            },
-				            {
-				                value: 2.5,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
-				    lineYAxis.push({
-				        value: i,
-				        textStyle: {
-				            rich: {
-				                circle: {
-				                    color: color[i],
-				                    padding: [0, 0],
-				                },
-				            },
-				        },
-				    });
-				});
-				
-				option = {
-				    color: color,
-				    grid: {
-				        top: '20%',
-				        bottom: '45%',
-				        left: '40%',
-				        containLabel: false,
-				    },
-				    yAxis: [
-				        {
-				            type: 'category',
-				            inverse: true,
-				            axisLine: {
-				                show: false,
-				            },
-				            axisTick: {
-				                show: false,
-				            },
-				            axisLabel: {
-				                formatter: function (params) {
-				                    let item = chartData[params];
-				                    console.log(item);
-				                    return (
-				                        '{circle|●}{name|' +
-				                        item.name +
-				                        '}{bd||}{percent|' +
-				                        item.percent +
-				                        '}'
-				                    );
-				                },
-				                interval: 0,
-				                inside: true,
-				                textStyle: {
-				                    color: '#333',
-				                    fontSize: 10,
-				                    rich: {
-				                        line: {
-				                            width: 170,
-				                            height: 5,
-				                            backgroundColor: { image: dashedPic },
-				                        },
-				                        name: {
-				                            color: '#fff',
-				                            fontSize: 10,
-				                        },
-				                        bd: {
-				                            color: '#72afff',
-				                            padding: [0, 5],
-				                            fontSize: 10,
-				                        },
-				                        percent: {
-				                            color: '#5cdad0',
-				                            fontSize: 10,
-				                        },
-				                        value: {
-				                            color: '#333',
-				                            fontSize: 16,
-				                            fontWeight: 500,
-				                            padding: [0, 0, 0, 10],
-				                        },
-				                        unit: {
-				                            fontSize: 14,
-				                        },
-				                    },
-				                },
-				                show: true,
-				            },
-				            data: lineYAxis,
-				        },
-				    ],
-				    xAxis: [
-				        {
-				            show: false,
-				        },
-				    ],
-				    series: pieSeries,
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
+    methods: {
 
+      sjlylxtj() {
+        let that = this
+        getSjlylxtj(null).then(resp => {
+          that.data_type = resp.data.type
+          that.data_source = resp.data.source
+          that.myEcharts()
+          that.myEcharts2()
+        })
+      },
+      // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
+      //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('event');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        option = {
+          color: color,
+          tooltip: {
+            trigger: 'item',
+            position: 'top'
+          },
+          series: [
+            {
+              name: '事件类型',
+              type: 'pie',
+              center: ['50%', '60%'],
+              radius: ['55%', '70%'],
+              avoidLabelOverlap: false,
 
-		},
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '12',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: that.data_type
+            },
 
+          ]
+        };
 
-	}
-</script>
+        option && myChart.setOption(option);
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+      },
+      myEcharts2() {
+        let that = this
+        var chartDom = document.getElementById('event2');
+        var myChart = echarts.init(chartDom);
+        let dashedPic =
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
+        let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#E148EB'];
+        var option;
+        let chartData = that.data_source;
+        let arrName = [];
+        let arrValue = [];
+        let sum = 0;
+        let pieSeries = [],
+          lineYAxis = [];
+
+        // 数据处理
+        chartData.forEach((v, i) => {
+          arrName.push(v.name);
+          arrValue.push(v.value);
+          sum = sum + v.value;
+        });
+
+        // 图表option整理
+        chartData.forEach((v, i) => {
+          pieSeries.push({
+            name: '沪昆线到达晚点情况',
+            type: 'pie',
+            clockWise: false,
+            hoverAnimation: false,
+            radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+            center: ['35%', '60%'],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              borderRadius: 20,
+            },
+            data: [
+              {
+                value: v.value,
+                name: v.name,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 5,
+                    borderColor: color[i]
+                  }
+                }
+              },
+              {
+                value: sum - v.value,
+                name: '',
+                itemStyle: {
+                  color: 'rgba(0,0,0,0)',
+                },
+              },
+            ],
+          });
+          pieSeries.push({
+            name: '',
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+            center: ['35%', '60%'],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              borderCap: 'round',
+              borderJoin: 'round',
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: '#E3F0FF',
+                },
+              },
+              {
+                value: 2.5,
+                name: '',
+                itemStyle: {
+                  color: 'rgba(0,0,0,0)',
+                },
+              },
+            ],
+          });
+          v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
+          lineYAxis.push({
+            value: i,
+            textStyle: {
+              rich: {
+                circle: {
+                  color: color[i],
+                  padding: [0, 0],
+                },
+              },
+            },
+          });
+        });
+
+        option = {
+          color: color,
+          grid: {
+            top: '20%',
+            bottom: '45%',
+            left: '40%',
+            containLabel: false,
+          },
+          yAxis: [
+            {
+              type: 'category',
+              inverse: true,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                formatter: function (params) {
+                  let item = chartData[params];
+                  return (
+                    '{circle|●}{name|' +
+                    item.name +
+                    '}{bd||}{percent|' +
+                    item.percent +
+                    '}'
+                  );
+                },
+                interval: 0,
+                inside: true,
+                textStyle: {
+                  color: '#333',
+                  fontSize: 10,
+                  rich: {
+                    line: {
+                      width: 170,
+                      height: 5,
+                      backgroundColor: {image: dashedPic},
+                    },
+                    name: {
+                      color: '#fff',
+                      fontSize: 10,
+                    },
+                    bd: {
+                      color: '#72afff',
+                      padding: [0, 5],
+                      fontSize: 10,
+                    },
+                    percent: {
+                      color: '#5cdad0',
+                      fontSize: 10,
+                    },
+                    value: {
+                      color: '#333',
+                      fontSize: 16,
+                      fontWeight: 500,
+                      padding: [0, 0, 0, 10],
+                    },
+                    unit: {
+                      fontSize: 14,
+                    },
+                  },
+                },
+                show: true,
+              },
+              data: lineYAxis,
+            },
+          ],
+          xAxis: [
+            {
+              show: false,
+            },
+          ],
+          series: pieSeries,
+        };
+
+        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-eventTrend.vue

@@ -1,48 +1,48 @@
 <!-- **************************************NO.6 矿坑*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="pit" style="width: 100%; height:24vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="pit" style="width: 100%; height:24vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'pit',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getSjqs} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'pit',
+    data() {
+      return {
+        count: 0,
+        data_sjqs_month: [],
+        data_sjqs_num: []
+      }
+    },
+    mounted() {
+      this.sjqs()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
 
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('pit');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
-				var option;
+      sjqs() {
+        let that = this
+        getSjqs().then(resp => {
+          that.data_sjqs_month = resp.data.mouth
+          that.data_sjqs_num = resp.data.num
+          that.myEcharts()
+        })
+      },
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('pit');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
         option = {
           xAxis: {
-            data: [
-              '2021-05-17',
-              '2021-05-18',
-              '2021-05-19',
-              '2021-05-20',
-              '2021-05-21',
-              '2021-05-24',
-              '2021-05-25',
-              '2021-05-26',
-              '2021-05-27',
-            ],
+            data: that.data_sjqs_month,
           },
           yAxis: {
             axisLabel: {
@@ -87,25 +87,25 @@
               shadowColor: 'rgba(194, 47, 67)',
               shadowBlur: 0,
               shadowOffsetX: 0,
-              data: [1.56, -1.34, 0.57, 2.34, -0.45, 0.57, 2.34, 1.2, 0.34],
+              data:  that.data_sjqs_num,
             },
           ],
         };
-				option && myChart.setOption(option);
-			},
+        option && myChart.setOption(option);
+      },
 
-		},
+    },
 
 
-	}
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+  .chart-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-fireBrigade.vue

@@ -1,171 +0,0 @@
-<!-- **************************************NO.12 处理中心*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="processing" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'processing',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('processing');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let dataList = [{
-				    name: '双辽市',
-				    value: '56'
-				}, {
-				    name: '梨树县',
-				    value: '75'
-				}, {
-				    name: '伊通县',
-				    value: '85'
-				}, {
-				    name: '铁东区',
-				    value: '78'
-				}, {
-				    name: '铁西区',
-				    value: '76'
-				}];
-				
-				option = {
-				        grid: {
-				            left: "16%", //距离左边的距离
-				            right: "12%", //距离右边的距离
-				            bottom: "15%", //距离下边的距离
-				            top: "10%" //距离上边的距离
-				        },
-				        title: {
-				            text: '',
-				            left: 26,
-				            top: 26,
-				            textStyle: {
-				                color: '#FFFFFF',
-				                fontSize: 15,
-				                fontWeight: 50000,
-				                fontFamily: 'PingFang SC'
-				            }
-				        },
-				        tooltip: {
-				            trigger: "axis",
-				            axisPointer: {
-				                type: "shadow",
-				                crossStyle: {
-				                    color: "#134d74"
-				                }
-				            },
-				        },
-				        xAxis: [{
-				            type: "category",
-				            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				            axisLabel: {
-				                textStyle: {
-				                    color: "#42a7ff",
-				                    fontSize: 10,
-				                }
-				            },
-				            axisLine: {
-				                show: false
-				            },
-				            axisTick: {
-				                show: false
-				            }
-				        }],
-				        yAxis: [{
-				                type: "value",
-				                axisLabel: {
-				                    formatter: "{value}%",
-				                    textStyle: {
-				                        color: "#42a7ff",
-				                        fontSize: 10,
-				                    },
-				                },
-				                splitLine: {
-				                    lineStyle: {
-				                        color: "#1f3335"
-				                    }
-				                },
-				                axisLine: {
-				                    show: false
-				                },
-				                axisTick: {
-				                    show: false
-				                }
-				            },
-				            
-				        ],
-				        dataZoom: [{
-				            type: 'inside',
-				            start: 0,
-				            end: dataList.length > 15 ? 35 : 100
-				        }],
-				        series: [{
-				                name: "",
-				                type: "bar",
-				                data: dataList,
-				                barGap: '-100%',
-				                barCategoryGap: '80%',
-				                itemStyle: {
-				                    normal: {
-				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                                offset: 0,
-				                                color: 'rgba(27,168,240,1)'
-				                            },
-				                            {
-				                                offset: 1,
-				                                color: 'rgba(32,40,95,0.3)'
-				                            }
-				                        ])
-				                    },
-				                    emphasis: {
-				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                                offset: 0,
-				                                color: 'rgba(27,168,240,1)'
-				                            },
-				                            {
-				                                offset: 1,
-				                                color: 'rgba(27,168,240,0.3)'
-				                            }
-				                        ])
-				                    }
-				                },
-				            },
-				            
-				        ]
-				};
-				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-fireCause.vue

@@ -1,289 +1,278 @@
 <!-- **************************************NO.4 隐患*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="danger" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="danger" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'danger',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getQhyy} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'danger',
+    data() {
+      return {
+        count: 0,
+        data_qhyy_firesource:[],
+        data_qhyy_num:[]
+      }
+    },
+    mounted() {
+      this.qhyy()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-			myEcharts() {
+      qhyy() {
+        let that = this
+        getQhyy().then(resp => {
+          that.data_qhyy_firesource = resp.data.firesource
+          that.data_qhyy_num = resp.data.num
+          that.myEcharts()
+        })
+      },
 
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('danger');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        let data = that.data_qhyy_num
+        let indicator = that.data_qhyy_firesource
+        option = {
 
-				var chartDom = document.getElementById('danger');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				let data = [582, 421, 622, 625, 265]
-				let indicator = [{
-						name: '双辽市',
-						max: 1000
-					},
-					{
-						name: '梨树县',
-						max: 1000
-					},
-					{
-						name: '伊通县',
-						max: 1000
-					},
-					{
-						name: '铁东区',
-						max: 1000
-					},
-					{
-						name: '铁西区',
-						max: 1000
-					},
-				]
+          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 + '}'
+                ]
+                //   }
 
-				option = {
+                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:600,
+                  //     align:'center'
+                  // },
+                }
 
-					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 + '}'
-								]
-								//   }
+              }
+            },
+            nameGap: 0,
+            indicator: indicator,
+            splitLine: {
+              show: false
 
-								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:600,
-									//     align:'center'
-									// },
-								}
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          series: [{
+            // name: '家庭融合包',
+            type: 'radar',
+            data: [data],
+            // value:14,
+            label: {
+              show: true,
+              formatter: function (params) {
+                return params.value;
+              },
+              color: '#ffffff',
+              // position:[-20,-10,-10,-10],
+              align: 'right',
+              distance: 10,
+              align: 'right'
+            },
+            symbolSize: [6, 6],
+            lineStyle: { //边缘颜色
+              width: 0
+            },
+            itemStyle: {
+              borderWidth: 1,
+              color: '#fff',
+              borderColor: '#F2F063',
+            },
+            areaStyle: {
+              color: '#7D77F1',
+              opacity: 0.6
+            }
+          },
+            {
+              type: 'radar',
+              data: [
+                [1000, 1000, 1000, 1000, 1000, 1000],
+              ],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							}
-						},
-						nameGap: 0,
-						indicator: indicator,
-						splitLine: {
-							show: false
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.06
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [900, 900, 900, 900, 900, 900],
+              ],
 
-						},
-						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,
-								align: 'right'
-							},
-							symbolSize: [6, 6],
-							lineStyle: { //边缘颜色
-								width: 0
-							},
-							itemStyle: {
-								borderWidth: 1,
-								color: '#fff',
-								borderColor: '#F2F063',
-							},
-							areaStyle: {
-								color: '#7D77F1',
-								opacity: 0.6
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[1000, 1000, 1000, 1000, 1000, 1000],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#2C72C8'
+              },
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.06
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[900, 900, 900, 900, 900, 900],
-							],
+              areaStyle: {
+                color: '#2C72C8',
+                opacity: 0.12
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [800, 800, 800, 800, 800, 800]
+              ],
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#2C72C8'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							areaStyle: {
-								color: '#2C72C8',
-								opacity: 0.12
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[800, 800, 800, 800, 800, 800]
-							],
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.18
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [700, 700, 700, 700, 700, 700]
+              ],
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.18
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[700, 700, 700, 700, 700, 700]
-							],
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.19
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [600, 600, 600, 600, 600, 600],
+              ],
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.19
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[600, 600, 600, 600, 600, 600],
-							],
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.17
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [500, 500, 500, 500, 500, 500],
+              ],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.16
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [400, 400, 400, 400, 400, 400],
+              ],
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.17
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[500, 500, 500, 500, 500, 500],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.16
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[400, 400, 400, 400, 400, 400],
-							],
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.13
+              }
+            },
+          ]
+        };
+        option && myChart.setOption(option);
+      },
 
-							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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-fireFighting.vue

@@ -0,0 +1,125 @@
+<!-- **************************************NO.10 收集点*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="collection" style="width: 100%; height:50vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import {getXfllfb} from '@/api/bigdata'
+
+  export default {
+    name: 'collection',
+    data() {
+      return {
+        count: 0,
+        data_xfllfb: []
+      }
+    },
+    mounted() {
+      this.xfllfb()
+    },
+
+    methods: {
+      xfllfb() {
+        let that = this
+        getXfllfb().then(resp => {
+          that.data_xfllfb = resp.data
+          that.myEcharts()
+        })
+      },
+
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('collection');
+        var myChart = echarts.init(chartDom);
+        var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+        var option;
+        let bgColor = '#fff';
+        let title = '总量';
+        let echartData = that.data_xfllfb
+
+        let formatNumber = function (num) {
+          let reg = /(?=(\B)(\d{3})+$)/g;
+          return num.toString().replace(reg, ',');
+        };
+        let total = echartData.reduce((a, b) => {
+          return a + b.value * 1;
+        }, 0);
+
+        option = {
+          color: color,
+          series: [
+            {
+              type: 'pie',
+              radius: ['60%', '80%'],
+              center: ['50%', '50%'],
+              data: echartData,
+              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-fireHydrant.vue

@@ -0,0 +1,168 @@
+<!-- **************************************NO.12 处理中心*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="processing" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import {getXhs} from '@/api/bigdata'
+
+  export default {
+    name: 'processing',
+    data() {
+      return {
+        count: 0,
+        data_xhs:[],
+        data_xhx_name:[]
+      }
+    },
+    mounted() {
+      this.xhs()
+    },
+
+    methods: {
+      xhs() {
+        let that = this
+        getXhs().then(resp => {
+          that.data_xhs = resp.data
+          that.data_xhs.forEach(function (item,index) {
+            that.data_xhx_name.push(item.name)
+          })
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('processing');
+        var myChart = echarts.init(chartDom);
+        var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+        var option;
+        let dataList = that.data_xhs
+
+        option = {
+          grid: {
+            left: "16%", //距离左边的距离
+            right: "12%", //距离右边的距离
+            bottom: "15%", //距离下边的距离
+            top: "10%" //距离上边的距离
+          },
+          title: {
+            text: '',
+            left: 26,
+            top: 26,
+            textStyle: {
+              color: '#FFFFFF',
+              fontSize: 15,
+              fontWeight: 50000,
+              fontFamily: 'PingFang SC'
+            }
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+              crossStyle: {
+                color: "#134d74"
+              }
+            },
+          },
+          xAxis: [{
+            type: "category",
+            data: that.data_xhx_name,
+            axisLabel: {
+              textStyle: {
+                color: "#42a7ff",
+                fontSize: 10,
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            type: "value",
+            axisLabel: {
+              formatter: "{value}%",
+              textStyle: {
+                color: "#42a7ff",
+                fontSize: 10,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1f3335"
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            }
+          },
+
+          ],
+          dataZoom: [{
+            type: 'inside',
+            start: 0,
+            end: dataList.length > 15 ? 35 : 100
+          }],
+          series: [{
+            name: "",
+            type: "bar",
+            data: dataList,
+            barGap: '-100%',
+            barCategoryGap: '80%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(27,168,240,1)'
+                },
+                  {
+                    offset: 1,
+                    color: 'rgba(32,40,95,0.3)'
+                  }
+                ])
+              },
+              emphasis: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(27,168,240,1)'
+                },
+                  {
+                    offset: 1,
+                    color: 'rgba(27,168,240,0.3)'
+                  }
+                ])
+              }
+            },
+          },
+
+          ]
+        };
+        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-foamLiquid.vue

@@ -0,0 +1,148 @@
+<!-- **************************************NO.14 泡沫液*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="foam" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import {getPmy} from '@/api/bigdata'
+
+  export default {
+    name: 'foam',
+    data() {
+      return {
+        count: 0,
+        data_pmy_name:[],
+        data_pmy_value:[]
+      }
+    },
+    mounted() {
+      this.pmy()
+
+    },
+
+    methods: {
+
+      pmy() {
+        let that = this
+        getPmy().then(resp => {
+          that.data_pmy_name = resp.data.name
+          that.data_pmy_value = resp.data.value
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=daPJGrcYMpZanpxR
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('foam');
+        var myChart = echarts.init(chartDom);
+        var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
+        var option;
+        option = {
+          grid: {
+            top: '5%',
+            left: '10%',
+            right: '12%',
+            bottom: '0',
+            containLabel: true
+          },
+          tooltip: {},
+          xAxis: {
+            show: false,
+            type: 'value'
+          },
+          yAxis: [{
+            type: 'category',
+            inverse: true,
+            data: that.data_pmy_name,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#ADD6FF',
+                fontSize: '12'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+          },
+            {
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#ADD6FF',
+                  fontSize: '12'
+                }
+              },
+              data:that.data_pmy_value
+            }
+          ],
+
+          series: [{
+            name: "受理数", // bar图的外边框
+            type: "bar",
+            barWidth: "20%",
+            yAxisIndex: 0,
+            data: [500, 500, 500, 500, 500].map((item, i) => {
+              return {
+                value: item,
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                  barBorderColor: zdslColorList[i],
+                  borderWidth: 1,
+                  shadowColor: "#33CCFF",
+                  shadowBlur: 4
+                }
+              }
+            }),
+          },
+            {
+              name: "受理数", //这个是Bar图
+              type: 'bar',
+              yAxisIndex: 1,
+              barWidth: "10%",
+              data: [150, 298, 206, 75, 154]
+            }
+          ],
+          itemStyle: {
+            color: function (params) {
+              return zdslColorList[params.dataIndex]
+            }
+          }
+        }
+        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-gridStaff.vue

@@ -1,32 +1,42 @@
 <!-- **************************************NO.13 消火栓*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="hydrant" style="width: 100%; height:55vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="hydrant" style="width: 100%; height:55vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'hydrant',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getZzz} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'hydrant',
+    data() {
+      return {
+        count: 0,
+        data_zzz: []
+      }
+    },
+    mounted() {
+      this.zzz()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
-			myEcharts() {
+    methods: {
+      zzz() {
+        let that = this
+        getZzz().then(resp => {
+          that.data_zzz = resp.data
+          that.myEcharts()
+        })
+      },
 
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('hydrant');
+        var myChart = echarts.init(chartDom);
 
-				var chartDom = document.getElementById('hydrant');
-				var myChart = echarts.init(chartDom);
         function rand(m, n) {
           if (!n) {
             return Math.floor(Math.random() * m);
@@ -55,17 +65,17 @@
           return val;
         }
 
-        var arr = [];
-        for (var i = 0; i < 10; i++) {
-          arr.push({
-            name: '类目名称' + rand(99),
-            amount: rand(99999) / 100 // 采购金额
-          });
-        }
+        var arr = that.data_zzz
+        // for (var i = 0; i < 10; i++) {
+        //   arr.push({
+        //     name: '类目名称' + rand(99),
+        //     amount: rand(99999) / 100 // 采购金额
+        //   });
+        // }
 
         var max = getMax(arr, 'amount'),
           angleAxisData = getValArr(arr, 'name');
-        $.each(arr, function(i, e) {
+        $.each(arr, function (i, e) {
           e.value = (e.amount / max * 100).toFixed(2);
         });
         var option = {
@@ -137,7 +147,7 @@
             type: 'bar',
             data: arr,
             itemStyle: {
-              color: function(params) {
+              color: function (params) {
                 var colorList = ['#5cc6ca', '#d87a7f', '#f5b97f', '#5ab1ef', '#b6a2de', '#8d98b3', '#e5d02d', '#97b552', '#956f6d', '#d0579c'];
                 return colorList[params.dataIndex];
               }
@@ -145,21 +155,21 @@
             coordinateSystem: 'polar',
           }]
         };
-				option && myChart.setOption(option);
-			},
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-gridDistribution.vue

@@ -1,137 +0,0 @@
-<!-- **************************************NO.10 收集点*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="collection" style="width: 100%; height:50vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'collection',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('collection');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let bgColor = '#fff';
-				let title = '总量';
-				let echartData = [
-				    {
-				        name: '双辽市',
-				        value: '3720',
-				    },
-				    {
-				        name: '梨树县',
-				        value: '2920',
-				    },
-				    {
-				        name: '伊通县',
-				        value: '2200',
-				    },
-				    {
-				        name: '铁东区',
-				        value: '1420',
-				    },
-					{
-					    name: '铁西区',
-					    value: '1620',
-					},
-				];
-				
-				let formatNumber = function (num) {
-				    let reg = /(?=(\B)(\d{3})+$)/g;
-				    return num.toString().replace(reg, ',');
-				};
-				let total = echartData.reduce((a, b) => {
-				    return a + b.value * 1;
-				}, 0);
-				
-				option = {
-				    color: color,
-				    series: [
-				        {
-				            type: 'pie',
-				            radius: ['60%', '80%'],
-				            center: ['50%', '50%'],
-				            data: echartData,
-				            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-keyArea.vue

@@ -1,378 +1,367 @@
 <!-- **************************************NO.7 散养户分布*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="freelyraise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="freelyraise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'freelyraise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getZdqy} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'freelyraise',
+    data() {
+      return {
+        count: 0,
+        data_zdqy: []
+      }
+    },
+    mounted() {
+      this.zdqy();
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
+    methods: {
 
-			myEcharts() {
+      zdqy() {
+        let that = this
+        getZdqy().then(resp => {
+          that.data_zdqy = resp.data
+          this.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
 
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('freelyraise');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
+        let data = that.data_zdqy
 
-				var chartDom = document.getElementById('freelyraise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				let data = [{
-						"name": "双辽市",
-						"num": "18.987691"
-					},
-					{
-						"name": "梨树县",
-						"num": "20.377176"
-					},
-					{
-						"name": "伊通县",
-						"num": "19.127404"
-					},
-					{
-						"name": "铁东区",
-						"num": "18.40882"
-					},
-					{
-						"name": "铁西区",
-						"num": "17.980597"
-					},
-				]
+        function contains(arr, dst) {
+          var i = arr.length;
+          while ((i -= 1)) {
+            if (arr[i] == dst) {
+              return i;
+            }
+          }
+          return false;
+        }
 
-				function contains(arr, dst) {
-					var i = arr.length;
-					while ((i -= 1)) {
-						if (arr[i] == dst) {
-							return i;
-						}
-					}
-					return false;
-				}
+        var attackSourcesColor = [
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#EB3B5A"
+          },
+            {
+              offset: 1,
+              color: "#FE9C5A"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#FA8231"
+          },
+            {
+              offset: 1,
+              color: "#FFD14C"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#F7B731"
+          },
+            {
+              offset: 1,
+              color: "#FFEE96"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#21fe8f"
+          },
+            {
+              offset: 1,
+              color: "#38911f"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#395CFE"
+          },
+            {
+              offset: 1,
+              color: "#2EC7CF"
+            }
+          ])
 
-			 var attackSourcesColor = [
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#EB3B5A"
-						},
-						{
-							offset: 1,
-							color: "#FE9C5A"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#FA8231"
-						},
-						{
-							offset: 1,
-							color: "#FFD14C"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#F7B731"
-						},
-						{
-							offset: 1,
-							color: "#FFEE96"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#21fe8f"
-						},
-						{
-							offset: 1,
-							color: "#38911f"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#395CFE"
-						},
-						{
-							offset: 1,
-							color: "#2EC7CF"
-						}
-					])
-					
-				];
-				var attackSourcesColor1 = [
-					"#EB3B5A",
-					"#FA8231",
-					"#F7B731",
-					"#38911f",
-					"#3860FC",
-					"#F57474",
-					"#56D0E3",
-					"#1089E7",
-					"#F57474",
-					"#1089E7",
-					"#F57474",
-					"#F57474"
-				];
-				var attaData = [];
-				var attaName = [];
-				var topName = []
-				data.forEach((it, index) => {
-					attaData[index] = parseFloat(it.num).toFixed(0);
-					//attaData[index] = parseInt(it.num);
-					attaName[index] = it.name;
-					topName[index] = `${it.name}`
-				});
-				var salvProMax = [];
-				var max = attaData[0];
-				for (let i = 0; i < attaData.length; i++) {
-					max = max < attaData[i + 1] ? attaData[i + 1] : max;
-				}
-				for (let i = 0; i < attaData.length; i++) {
-					salvProMax.push(max); //背景按最大值
-				}
+        ];
+        var attackSourcesColor1 = [
+          "#EB3B5A",
+          "#FA8231",
+          "#F7B731",
+          "#38911f",
+          "#3860FC",
+          "#F57474",
+          "#56D0E3",
+          "#1089E7",
+          "#F57474",
+          "#1089E7",
+          "#F57474",
+          "#F57474"
+        ];
+        var attaData = [];
+        var attaName = [];
+        var topName = []
+        data.forEach((it, index) => {
+          attaData[index] = parseFloat(it.num).toFixed(0);
+          //attaData[index] = parseInt(it.num);
+          attaName[index] = it.name;
+          topName[index] = `${it.name}`
+        });
+        var salvProMax = [];
+        var max = attaData[0];
+        for (let i = 0; i < attaData.length; i++) {
+          max = max < attaData[i + 1] ? attaData[i + 1] : max;
+        }
+        for (let i = 0; i < attaData.length; i++) {
+          salvProMax.push(max); //背景按最大值
+        }
 
-				function attackSourcesDataFmt(sData) {
-					var sss = [];
-					sData.forEach(function(item, i) {
-						let itemStyle = {
-							color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
-						};
-						sss.push({
-							value: item,
-							itemStyle: itemStyle
-						});
-					});
-					return sss;
-				}
+        function attackSourcesDataFmt(sData) {
+          var sss = [];
+          sData.forEach(function (item, i) {
+            let itemStyle = {
+              color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
+            };
+            sss.push({
+              value: item,
+              itemStyle: itemStyle
+            });
+          });
+          return sss;
+        }
 
-				option = {
-					tooltip: {
-						show: false,
-						backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
-						textStyle: {
-							fontSize: 12
-						}
-			  },
-					color: ["#F7B731"],
-					legend: {
-						show: false,
-						pageIconSize: [12, 12],
-						itemWidth: 20,
-						itemHeight: 10,
-						textStyle: {
-							//图例文字的样式
-							fontSize: 12,
-							color: "#fff"
-						},
-						selectedMode: false,
-						data: ["个人所得(亿元)"]
-					},
-					grid: {
-						left: '12%',
-						width: '70%',
-						bottom: '5%',
-						top: "8%",
-					},
-					xAxis: {
-						type: "value",
+        option = {
+          tooltip: {
+            show: false,
+            backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
+            textStyle: {
+              fontSize: 12
+            }
+          },
+          color: ["#F7B731"],
+          legend: {
+            show: false,
+            pageIconSize: [12, 12],
+            itemWidth: 20,
+            itemHeight: 10,
+            textStyle: {
+              //图例文字的样式
+              fontSize: 12,
+              color: "#fff"
+            },
+            selectedMode: false,
+            data: ["个人所得(亿元)"]
+          },
+          grid: {
+            left: '12%',
+            width: '70%',
+            bottom: '5%',
+            top: "8%",
+          },
+          xAxis: {
+            type: "value",
 
-						splitLine: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-			  	},
-						axisLine: {
-							show: false
-						}
-					},
-					yAxis: [{ //左侧排行数字
-							type: "category",
-							inverse: true,
-			  		axisLine: {
-								show: false
-							},
-							axisTick: {
-								show: false
-							},
-							axisPointer: {
-								label: {
-									show: true,
-									//margin: 30
-								}
-			 			},
-							padding: [5, 0, 0, 0],
-							postion: "right",
-							data: attaName,
-							axisLabel: {
-								margin: 30,
-								fontSize: 12,
-			  			align: "left",
-								padding: [2, 0, 0, 0],
-								color: "#000",
-								rich: {
-									nt1: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[0],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										lineHeight: "5",
-										padding: [0, 1, 2, 1]
-										// padding:[0,0,2,0],
-									},
-									nt2: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[1],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt3: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[2],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[3],
-										width: 15,
-			  					height: 15,
-										fontSize: 12,
-										align: "center",
-										lineHeight: 3,
-										borderRadius: 100,
-										padding: [0, 1, 2, 1],
-										lineHeight: 5
-									}
-								},
-								
-							}
-						},
-						{ //右侧名字
-							type: "category",
-							inverse: true,
-							axisTick: "none",
-							axisLine: "none",
-							show: true,
-							axisLabel: {
-								textStyle: {
-									color: "#fff",
-									fontSize: "12"
-								}
-							},
-							//data: attackSourcesDataFmt(attaName) 
-							data: attackSourcesDataFmt(attaData) //数字
-						},
-						{ //名称
-							type: 'category',
-							offset: -10,
-							position: "left",
-							axisLabel: {
-								color: `#fff`,
-								fontSize: 10
-							},
-			  		axisLine: {
-								show: false
-							},
-							inverse: true,
-							axisTick: {
-								show: false
-							},
-							axisLabel: {
-								interval: 0,
-								color: ["#fff"],
-								align: "left",
-								verticalAlign: "bottom",
-								lineHeight: 32,
-								fontSize: 12
-							},
-							data: topName
-			 		},
-					],
-					series: [{ //条形图数值
-							zlevel: 1,
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: "8px",
-							animationDuration: 1500,
-							data: attackSourcesDataFmt(attaData),
-							align: "center",
-							itemStyle: {
-								normal: {
-									barBorderRadius: 10
-								}
-							},
-							label: {
-								show: false,
-			 				fontSize: 12,
-			  			color: "#fff",
-								textBorderWidth: 2,
-								padding: [2, 0, 0, 0]
-							}
-						},
-						{ //最大值背景条形图
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: 8,
-							barGap: "-100%",
-							margin: "20",
-							data: salvProMax,
-							textStyle: {
-								//图例文字的样式
-								fontSize: 12,
-								color: "#fff"
-							},
-							itemStyle: {
-								normal: {
-									color: "#05325F",
-									//width:"100%",
-									fontSize: 12,
-									barBorderRadius: 30
-								},
-							}
-						}
-					]
-				};
-				option && myChart.setOption(option);
-			},
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          yAxis: [{ //左侧排行数字
+            type: "category",
+            inverse: true,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisPointer: {
+              label: {
+                show: true,
+                //margin: 30
+              }
+            },
+            padding: [5, 0, 0, 0],
+            postion: "right",
+            data: attaName,
+            axisLabel: {
+              margin: 30,
+              fontSize: 12,
+              align: "left",
+              padding: [2, 0, 0, 0],
+              color: "#000",
+              rich: {
+                nt1: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[0],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  lineHeight: "5",
+                  padding: [0, 1, 2, 1]
+                  // padding:[0,0,2,0],
+                },
+                nt2: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[1],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1]
+                },
+                nt3: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[2],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1]
+                },
+                nt: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[3],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  lineHeight: 3,
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1],
+                  lineHeight: 5
+                }
+              },
 
-		},
+            }
+          },
+            { //右侧名字
+              type: "category",
+              inverse: true,
+              axisTick: "none",
+              axisLine: "none",
+              show: true,
+              axisLabel: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "12"
+                }
+              },
+              //data: attackSourcesDataFmt(attaName)
+              data: attackSourcesDataFmt(attaData) //数字
+            },
+            { //名称
+              type: 'category',
+              offset: -10,
+              position: "left",
+              axisLabel: {
+                color: `#fff`,
+                fontSize: 10
+              },
+              axisLine: {
+                show: false
+              },
+              inverse: true,
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                interval: 0,
+                color: ["#fff"],
+                align: "left",
+                verticalAlign: "bottom",
+                lineHeight: 32,
+                fontSize: 12
+              },
+              data: topName
+            },
+          ],
+          series: [{ //条形图数值
+            zlevel: 1,
+            name: "个人所得(亿元)",
+            type: "bar",
+            barWidth: "8px",
+            animationDuration: 1500,
+            data: attackSourcesDataFmt(attaData),
+            align: "center",
+            itemStyle: {
+              normal: {
+                barBorderRadius: 10
+              }
+            },
+            label: {
+              show: false,
+              fontSize: 12,
+              color: "#fff",
+              textBorderWidth: 2,
+              padding: [2, 0, 0, 0]
+            }
+          },
+            { //最大值背景条形图
+              name: "个人所得(亿元)",
+              type: "bar",
+              barWidth: 8,
+              barGap: "-100%",
+              margin: "20",
+              data: salvProMax,
+              textStyle: {
+                //图例文字的样式
+                fontSize: 12,
+                color: "#fff"
+              },
+              itemStyle: {
+                normal: {
+                  color: "#05325F",
+                  //width:"100%",
+                  fontSize: 12,
+                  barBorderRadius: 30
+                },
+              }
+            }
+          ]
+        };
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-waterIntake.vue

@@ -0,0 +1,179 @@
+<!-- **************************************NO.8 养殖场分布*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="farm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import {getQsk} from '@/api/bigdata'
+
+  export default {
+    name: 'farm',
+    data() {
+      return {
+        count: 0,
+        data_qsk_name:[],
+        data_qsk_value:[]
+      }
+    },
+    mounted() {
+      this.qsk()
+
+    },
+
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
+
+      qsk() {
+        let that = this
+        getQsk().then(resp => {
+          that.data_qsk_name = resp.data.name
+          that.data_qsk_value = resp.data.value
+          that.myEcharts()
+        })
+      },
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('farm');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
+        var data = that.data_qsk_value
+        option = {
+          color: ["#41FF80"],
+          title: {
+            show: false
+          },
+          grid: {
+            top: '15%',
+            right: '12%',
+            bottom: '22%',
+            left: '15%'
+          },
+          tooltip: {
+            show: false
+          },
+          xAxis: {
+            data:that.data_qsk_name,
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: '#2D455A'
+              }
+            },
+            axisTick: {
+              show: false //隐藏X轴刻度
+            },
+            axisLabel: {
+              show: true,
+              margin: 14,
+              fontSize: 10,
+              textStyle: {
+                color: '#ffffff' //X轴文字颜色
+              }
+            }
+          },
+          yAxis: [{
+            type: 'value',
+            gridIndex: 0,
+            interval: 25,
+            // splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'solid',
+                color: '#325A9F',
+                width: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value}',
+              fontSize: 10,
+              textStyle: {
+                color: '#6ad8ff' //X轴文字颜色
+              }
+            }
+          }],
+          series: [{
+            name: '养殖场分布',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: 'top', //在上方显示
+                  textStyle: { //数值样式
+                    color: '#fff',
+                  }
+                },
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: '#fffa55'
+                },
+                  {
+                    offset: 0.5,
+                    color: '#55ff18'
+                  },
+                  {
+                    offset: 1,
+                    color: '#29eeff'
+                  }
+                ])
+              }
+            },
+            data: data,
+            z: 10,
+            zlevel: 0
+          },
+            {
+              // 分隔
+              type: 'pictorialBar',
+              itemStyle: {
+                normal: {
+                  color: '#0F375F'
+                }
+              },
+              symbolRepeat: 'fixed',
+              symbolMargin: 2,
+              symbol: 'rect',
+              symbolClip: true,
+              symbolSize: [8, 2],
+              symbolPosition: 'start',
+              symbolOffset: [0, -1],
+              // symbolBoundingData: this.total,
+              data: data,
+              width: "100%",
+              z: 0,
+              zlevel: 1
+            }
+          ]
+        };
+        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-weatherStation.vue

@@ -1,137 +0,0 @@
-<!-- **************************************NO.14 泡沫液*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="foam" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'foam',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=daPJGrcYMpZanpxR
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('foam');
-				var myChart = echarts.init(chartDom);
-				var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
-				var option;
-				  option = {
-				      grid: {
-				          top: '5%',
-				          left: '10%',
-				          right: '12%',
-				          bottom: '0',
-				          containLabel: true
-				      },
-				      tooltip: {
-				      },
-				      xAxis: {
-				          show: false,
-				          type: 'value'
-				      },
-				      yAxis: [{
-				              type: 'category',
-							  inverse:true,
-				              data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				          },
-				          {
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              data: [150, 298, 206, 75, 154]
-				          }
-				      ],
-				 
-				      series: [{
-				              name: "受理数", // bar图的外边框
-				              type: "bar",
-				              barWidth: "20%",
-				              yAxisIndex: 0,
-				              data: [500, 500, 500, 500, 500].map((item, i) => {
-				                  return {
-				                      value: item,
-				                      itemStyle: {
-				                          color: "rgba(0,0,0,0)",
-				                          barBorderColor: zdslColorList[i],
-				                          borderWidth: 1,
-				                          shadowColor: "#33CCFF",
-				                          shadowBlur: 4
-				                      }
-				                  }
-				              }),
-				          },
-				          {
-				              name: "受理数", //这个是Bar图
-				              type: 'bar',
-				              yAxisIndex: 1,
-				              barWidth: "10%",
-				              data: [150, 298, 206, 75, 154]
-				          }
-				      ],
-				      itemStyle: {
-				          color: function(params) {
-				              return zdslColorList[params.dataIndex]
-				          }
-				      }
-				  }
-				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-weatherTrends.vue

@@ -1,37 +1,48 @@
 <!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="farmtype" style="width: 100%; height:24vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="farmtype" style="width: 100%; height:24vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farmtype',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getTqqs} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'farmtype',
+    data() {
+      return {
+        count: 0,
+        data_tqqs_day:[],
+        data_tqqs_heigh:[],
+        data_tqqs_low:[]
+      }
+    },
+    mounted() {
+      this.tqqs()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('farmtype');
-				var myChart = echarts.init(chartDom);
-        var xData = ['2022年1月','2022年2月','2022年3月','2022年4月','2022年5月','2022年6月','2022年7月','2022年8月','2022年9月','2022年10月','2022年11月','2022年12月'];
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+      tqqs() {
+        let that = this
+        getTqqs().then(resp =>{
+          that.data_tqqs_day = resp.data.day
+          that.data_tqqs_heigh = resp.data.heigh
+          that.data_tqqs_low = resp.data.low
+          that.myEcharts()
+        })
+      },
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('farmtype');
+        var myChart = echarts.init(chartDom);
+        var xData = that.data_tqqs_day
         var option;
         option = {
-          backgroundColor:'#232d36',
+          backgroundColor: '#232d36',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -63,39 +74,39 @@
             right: '5%',
             bottom: '15%',
           },
-          legend:{
-            data:['最高气温','最低气温'],
-            textStyle:{
-              color:'#fff',
+          legend: {
+            data: ['最高气温', '最低气温'],
+            textStyle: {
+              color: '#fff',
               align: 'center',
               fontSize: 16
             },
-            x:'center'
+            x: 'center'
           },
           xAxis: [{
             type: 'category',
             // 轴线
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4',
               }
             },
             // 轴刻度线
-            axisTick:{
-              show:false,
+            axisTick: {
+              show: false,
             },
             // 坐标轴名称
             axisLabel: {
               color: '#fff',
-              margin:6,
+              margin: 6,
             },
             // 轴分隔线
             splitLine: {
               show: false
             },
             // 轴两侧留白
-            boundaryGap: ['5%','5%'],
+            boundaryGap: ['5%', '5%'],
             data: xData
 
           }],
@@ -110,7 +121,7 @@
             },
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4'
               }
             },
@@ -128,7 +139,7 @@
           }],
           series: [
             {
-              name:'最高气温',
+              name: '最高气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
@@ -160,14 +171,14 @@
               //         ], false),
               //     }
               // },
-              data: [4,7,8,12,15,23,24,24,25,28,27,24,21,23]//data.values
+              data: that.data_tqqs_heigh
             },
             {
-              name:'最低气温',
+              name: '最低气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
-              symbolSize:4,
+              symbolSize: 4,
               lineStyle: {
                 normal: {
                   color: "#13EFB7",
@@ -195,25 +206,25 @@
                   ], false),
                 }
               },
-              data: [3,5,4,2,1,7,6,3,4,5,6,7,1,2]//data.values
+              data: that.data_tqqs_low
             },
           ]
         };
-				option && myChart.setOption(option);
-			},
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/tabbar.vue

@@ -1,207 +1,234 @@
 <template>
-	<div class="bigdata-map-tabbar">
-				<el-row :gutter="20">
-					<el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
-						<div class="list-content">
-							<span>{{regionNum.count}}</span>
-							<h5>{{regionNum.name}}</h5>
-						</div>
-					</el-col>
-				</el-row>
-	</div>
+  <div class="bigdata-map-tabbar">
+    <el-row :gutter="20">
+      <el-col :span="4" v-for="(item,index) in data_zhxx_data" :key="index">
+        <div class="list-content">
+          <span>{{item.value}}</span>
+          <h5>{{item.name}}</h5>
+        </div>
+      </el-col>
+    </el-row>
+    <!--<el-row :gutter="20">
+      <el-col :span="4" v-for="(item,index) in data_zhxx_event" :key="index">
+        <div class="list-content">
+          <span>{{item.value}}</span>
+          <h5>{{item.name}}</h5>
+        </div>
+      </el-col>
+    </el-row>-->
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				//tab默认停留项el-tab-pane > name = "?"
-				activeName: 'sp',
-				//地区分类tabtitle
-				district:[
-					{
-						label:'四平市',
-						name:'sp',
-						id:''
-					},
-					{
-						label:'双辽市',
-						name:'sl',
-						id:''
-					},
-					{
-						label:'梨树县',
-						name:'ls',
-						id:''
-					},
-					{
-						label:'伊通县',
-						name:'yt',
-						id:''
-					},
-					{
-						label:'铁东区',
-						name:'td',
-						id:''
-					},
-					{
-						label:'铁西区',
-						name:'tx',
-						id:''
-					},
-				],
-				// 本地区内分类项数量
-				regionNum:[
-					{
-				       count:641,
-					   name:'事件'
-					},
-					{
-					   count:351,
-					   name:'隐患'
-					},
-					{
-					   count:785,
-					   name:'人口'
-					},
-					{
-					   count:512,
-					   name:'企业'
-					},
-					{
-					   count:786,
-					   name:'林场'
-					},
-					{
-					   count:544,
-					   name:'矿坑'
-					},
-					{
-					   count:320,
-					   name:'收集点'
-					},
-					{
-					   count:321,
-					   name:'水鹤'
-					},
-					{
-					   count:400,
-					   name:'取水口'
-					},
-					{
-					   count:654,
-					   name:'消火栓'
-					},
-					{
-					   count:806,
-					   name:'摄像头'
-					},
-					{
-					   count:312,
-					   name:'养殖场'
-					},
-					{
-					   count:713,
-					   name:'处理中心'
-					},
-					{
-					   count:132,
-					   name:'泡沫液'
-					},
-					{
-					   count:466,
-					   name:'泡沫液'
-					},
-					{
-					   count:897,
-					   name:'消防力量'
-					},
-					{
-					   count:132,
-					   name:'探测器'
-					}
-				]
-			};
-		},
-		methods: {
-			handleClick(tab, event) {
-				console.log(tab, event);
-			}
-		}
-	};
+  import {getZhxx} from '@/api/bigdata'
+
+  export default {
+    data() {
+      return {
+        data_zhxx_data: [],
+        data_zhxx_event: [],
+        //tab默认停留项el-tab-pane > name = "?"
+        activeName: 'sp',
+        //地区分类tabtitle
+        district: [
+          {
+            label: '四平市',
+            name: 'sp',
+            id: ''
+          },
+          {
+            label: '双辽市',
+            name: 'sl',
+            id: ''
+          },
+          {
+            label: '梨树县',
+            name: 'ls',
+            id: ''
+          },
+          {
+            label: '伊通县',
+            name: 'yt',
+            id: ''
+          },
+          {
+            label: '铁东区',
+            name: 'td',
+            id: ''
+          },
+          {
+            label: '铁西区',
+            name: 'tx',
+            id: ''
+          },
+        ],
+        // 本地区内分类项数量
+        regionNum: [
+          {
+            count: 641,
+            name: '事件'
+          },
+          {
+            count: 351,
+            name: '隐患'
+          },
+          {
+            count: 785,
+            name: '人口'
+          },
+          {
+            count: 512,
+            name: '企业'
+          },
+          {
+            count: 786,
+            name: '林场'
+          },
+          {
+            count: 544,
+            name: '矿坑'
+          },
+          {
+            count: 320,
+            name: '收集点'
+          },
+          {
+            count: 321,
+            name: '水鹤'
+          },
+          {
+            count: 400,
+            name: '取水口'
+          },
+          {
+            count: 654,
+            name: '消火栓'
+          },
+          {
+            count: 806,
+            name: '摄像头'
+          },
+          {
+            count: 312,
+            name: '养殖场'
+          },
+          {
+            count: 713,
+            name: '处理中心'
+          },
+          {
+            count: 132,
+            name: '泡沫液'
+          },
+          {
+            count: 466,
+            name: '泡沫液'
+          },
+          {
+            count: 897,
+            name: '消防力量'
+          },
+          {
+            count: 132,
+            name: '探测器'
+          }
+        ]
+      };
+    },
+
+    mounted() {
+      this.zhxx()
+    },
+    methods: {
+
+      zhxx() {
+        let that = this
+        getZhxx().then(resp => {
+          that.data_zhxx_data = [...resp.data.event, ...resp.data.data]
+        })
+      },
+
+
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-	@import '@/assets/styles/base.scss';
-	.bigdata-map-tabbar {
-		width: 100%;
-		height: 28.5vh;
-		padding: 0 1rem 1rem 1rem!important;
-		box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-			-0 -0 20px rgba($color: #163696, $alpha: .6) inset;
-
-		.el-tabs__item {
-			color: #fff;
-			font-size: 12px;
-			height: 32px;
-			line-height: 32px;
-			padding: 0 10px;
-		}
-
-		.el-tabs__item.is-active {
-			color: #3ec6fc;
-		}
-
-		.el-tabs__nav-wrap::after {
-			background: none;
-		}
-
-		.el-tabs__active-bar {
-			// background-color: #ffbc30;
-			border-radius: 20px;
-		}
-
-		.el-tab-pane {
-			color: #fff;
-		}
-
-		.el-tabs__nav-next,
-		.el-tabs__nav-prev {
-			line-height: 40px;
-		}
-
-		.el-tabs__header {
-			margin: 0 0 10px;
-		}
-
-		.list-content {
-			width: 95%;
-			margin: 0 auto;
-			text-align: center;
-			margin-top: 1rem;
-
-			h5 {
-				width: 100%;
-				color: #0aaef2;
-				padding: .2rem 0;
-				border: 1px solid #091641;
-				font-size: 12px;
-			}
-
-			span {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				font-size: 12px;
-				color: $white;
-				padding: .5rem 0;
-				font-weight: bolder;
-				border: 1px solid #091641;
-				border-bottom:none ;
-			}
-		}
-		.list-content:hover{
-			filter: brightness(2.3);
-		}
-	}
+  @import '@/assets/styles/base.scss';
+
+  .bigdata-map-tabbar {
+    width: 100%;
+    height: 28.5vh;
+    padding: 0 1rem 1rem 1rem !important;
+    box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+    -0 -0 20px rgba($color: #163696, $alpha: .6) inset;
+
+    .el-tabs__item {
+      color: #fff;
+      font-size: 12px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 10px;
+    }
+
+    .el-tabs__item.is-active {
+      color: #3ec6fc;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background: none;
+    }
+
+    .el-tabs__active-bar {
+      // background-color: #ffbc30;
+      border-radius: 20px;
+    }
+
+    .el-tab-pane {
+      color: #fff;
+    }
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      line-height: 40px;
+    }
+
+    .el-tabs__header {
+      margin: 0 0 10px;
+    }
+
+    .list-content {
+      width: 95%;
+      margin: 0 auto;
+      text-align: center;
+      margin-top: 1rem;
+
+      h5 {
+        width: 100%;
+        color: #0aaef2;
+        padding: .2rem 0;
+        border: 1px solid #091641;
+        font-size: 12px;
+      }
+
+      span {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: $white;
+        padding: .5rem 0;
+        font-weight: bolder;
+        border: 1px solid #091641;
+        border-bottom: none;
+      }
+    }
+
+    .list-content:hover {
+      filter: brightness(2.3);
+    }
+  }
 </style>

src/views/datacenter.vue

@@ -302,7 +302,6 @@ export default {
           that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data
             .resourceTable.split('_').slice(-1))
         })
-        console.log(that.resourcesList)
 
       })
     },

src/views/eventLogUpload.vue

@@ -125,11 +125,11 @@ export default {
       let fileUrl=[]
       if(this.fileList!=null&&this.fileList.length>0){
         for (let i = 0; i < this.fileList.length; i++) {
-          let file={url:this.fileList[i].url,webname:this.fileList[i].webName}
+          let file={attachPath:this.fileList[i].url,fileName:this.fileList[i].webName,busIndx: "bus_indx_forest",busSource: "PC"}
           fileUrl.push(file)
         }
       }
-      let param={ eventCode:this.eventCode,fileUrl: fileUrl }
+      let param={ eventCode:this.eventCode,operation:"bus_oper_type_2",operationType:"log_oper_type_1",fileList: fileUrl }
       //日志文件上传
       eventLogUpload(param).then(res => {
         if(res.code==200){

src/views/forest.vue

@@ -279,7 +279,7 @@
                 <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
                      @click="dropLocation(item.latitude,item.longitude)">
                   <div class="bgt-img">
-                    <img v-if="item.picturePath!=null&&item.picturePath!=''&& isAssetTypeAnImage(item.picturePath)"
+                    <img v-if="item.picturePath!=null&&item.picturePath!=''&& item.pictureType == 'image'"
                          :src="item.picturePath"
                          style="width: 93px;height: 64px"/>
                     <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px"/>
@@ -373,7 +373,7 @@
                 <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
               </div>
               <div class="i-list-con small-bottom-margin h-19">
-                <dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 20vh; padding:.5rem 1rem"/>
+                <dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 300px; padding:.5rem 1rem"/>
               </div>
             </dv-border-box-13>
           </div>
@@ -468,7 +468,7 @@ export default {
       //基本情况
       forestInfo: '', //基本情况
       //左侧获取事件信息统计
-      totalStr: '',
+      totalStr: '000000',
       aiTotal: '',
       newReport: '',
       otherTotal: '',
@@ -559,27 +559,27 @@ export default {
             keepBindPopup: false,
             isAggregation: false
           }
-          if (this.eventList.length > 50) {
+          if (this.eventList.length > 200) {
             markersMap.isAggregation = true
           }
           if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
             markersMap.click = 'showEventDialog'
             markersMap.icon = 'sj-icon-map-xinshangbao'
-            markersMap.isAggregation = false
           }
           if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
             markersMap.click = 'showEventDialog'
             markersMap.icon = 'sj-icon-map-cuiban'
-            markersMap.isAggregation = false
           } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
             markersMap.click = 'showEventDialog'
             markersMap.icon = 'sj-icon-map-qianshou'
+            markersMap.isAggregation = false
           } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
             markersMap.click = 'showEventDialog'
             markersMap.icon = 'sj-icon-map-banjie'
+            markersMap.isAggregation = false
           } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
             markersMap.click = 'showEventDialog'
-            markersMap.icon = 'sj-icon-map-guidnag'
+            markersMap.icon = 'sj-icon-map-guidang'
           }
           markersMap.parameter = this.eventList[i].eventCode
           markersMap.lng = this.eventList[i].longitude
@@ -606,7 +606,7 @@ export default {
             '                </div>' +
             '                </div>' +
             '                </span>'
-          if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+          if (this.eventList[i].pictureType == 'image' && this.eventList[i].picturePath != null && this.eventList[i].picturePath != '') {
             markersMap.bindPopupHtml += '<span>' +
               '                  <div class="d-l-con">' +
               '                  <div class="d-l-l-text">' +
@@ -918,27 +918,27 @@ export default {
               keepBindPopup: false,
               isAggregation: false
             }
-            if (this.eventList.length > 50) {
+            if (this.eventList.length > 200) {
               markersMap.isAggregation = true
             }
             if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-xinshangbao'
-              markersMap.isAggregation = false
             }
             if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-cuiban'
-              markersMap.isAggregation = false
             } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-qianshou'
+              markersMap.isAggregation = false
             } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-banjie'
+              markersMap.isAggregation = false
             } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
               markersMap.click = 'showEventDialog'
-              markersMap.icon = 'sj-icon-map-guidnag'
+              markersMap.icon = 'sj-icon-map-guidang'
             }
             markersMap.parameter = this.eventList[i].eventCode
             markersMap.lng = this.eventList[i].longitude
@@ -965,7 +965,7 @@ export default {
               '                </div>' +
               '                </div>' +
               '                </span>'
-            if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+            if (this.eventList[i].pictureType == 'image' && this.eventList[i].picturePath != null && this.eventList[i].picturePath != '') {
               markersMap.bindPopupHtml += '<span>' +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
@@ -990,15 +990,6 @@ export default {
         }
       })
     },
-    // 判断是否为图片
-    isAssetTypeAnImage(filePath) {
-      //获取最后一个.的位置
-      var index = filePath.lastIndexOf('.')
-      //获取后缀
-      var ext = filePath.substr(index + 1)
-      let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
-      return aa
-    },
     getEventByEventType(day) {
       let that = this
       //右侧获取事件分类

src/views/monitor.vue

@@ -99,7 +99,7 @@
               <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-25">
-              <div class="d-l-con" v-for="(item,index) in keyAreaList" @click="">
+              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
                 <div class="d-l-l-text">
                   <i class="i-small"></i>
                   <h4>{{ item.areaName }}</h4>
@@ -132,7 +132,8 @@
 import {
   selectDeviceType,
   selectCameraByDeptId,
-  selectKeyAreaList
+  selectKeyAreaList,
+  getRegionalFlag
 } from '@/api/monitor'
 
 import supermap from '@/components/supermap' //超图
@@ -183,6 +184,7 @@ export default {
       iconCurrentIndex1: '-1',
       listCurrentIndex1: '-1',
       listCurrentIndex2: '-1',
+      listCurrentIndex3: '-1',
       /** ----------------------------------摄像头预览开始------------------------------------- */
       //大华
       activePanel: 'key1',
@@ -216,6 +218,38 @@ export default {
     }
   },
   methods: {
+    selectKeyAreaList() {
+      this.keyAreaList=[]
+      //获取重点区域列表
+      let that = this
+      selectKeyAreaList().then(res => {
+        that.keyAreaList = res.data
+      })
+    },
+    getRegionalFlag(id){
+      //获取重点区域
+      this.listCurrentIndex3=id
+      let that = this
+      getRegionalFlag(id).then(res => {
+        that.graphicsList=[]
+        //地图标记
+        if (res.data != null && res.data.length > 0) {
+          for (let i = 0; i < res.data.length; i++) {
+            let latlng = {
+              lat: res.data[i].lat,
+              lng: res.data[i].lng
+            }
+            that.graphicsList.push(latlng)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearG()
+            that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
+          }, 1000)
+        } else {
+          that.$refs.supermap.clearG()
+        }
+      })
+    },
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     showDialog(click) {
       if (click == 'eventLocation') {
@@ -374,18 +408,12 @@ export default {
         }]
       })
     },
-    selectKeyAreaList() {
-      //获取重点区域
-      let that = this
-      selectKeyAreaList().then(res => {
-        that.keyAreaList = res
-      })
-    },
     selectDeviceType(index) {
       this.iconCurrentIndex1 = index
       //获取左侧动态感知设备
       let that = this
       selectDeviceType().then(res => {
+        that.cameraMarkersList = []
         that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
 
         that.region = res.data.visuForestCloudTodaySjfbBOList
@@ -426,6 +454,7 @@ export default {
 
             markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
             markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
+            markersMap.radius = res.data.visuForestCloudCameraBOList[i].cameraRadius
             markersMap.bindPopupHtml = '<div class="map-tip">' +
               '<span>' +
               '                  <div class="d-l-con">' +
@@ -443,8 +472,24 @@ export default {
               '                </div>' +
               '                </div>' +
               '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + res.data.visuForestCloudCameraBOList[i]
+                .cameraFactory + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data.visuForestCloudCameraBOList[i]
+                .cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
               '</div>'
-            this.cameraMarkersList.push(markersMap)
+            that.cameraMarkersList.push(markersMap)
             //   cameraAccount: "1"
             // cameraCode: "1000010"
             // cameraFactory: "2"
@@ -465,7 +510,7 @@ export default {
           setTimeout(() => {
             that.$refs.supermap.clearM(true)
             that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
+            that.$refs.supermap.setMarkersRadius(that.cameraMarkersList)
           }, 1000)
         }
       })
@@ -506,6 +551,7 @@ export default {
 
             markersMap.lng = res.data[i].longitude
             markersMap.lat = res.data[i].latitude
+            markersMap.radius = res.data[i].cameraRadius
             markersMap.bindPopupHtml = '<div class="map-tip">' +
               '<span>' +
               '                  <div class="d-l-con">' +
@@ -522,6 +568,22 @@ export default {
               '                </div>' +
               '                </div>' +
               '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + res.data[i]
+                .cameraFactory + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data[i]
+                .cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
               '</div>'
             this.cameraMarkersList.push(markersMap)
             //   cameraAccount: "1"
@@ -544,7 +606,7 @@ export default {
           setTimeout(() => {
             that.$refs.supermap.clearM(true)
             that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
+            that.$refs.supermap.setMarkersRadius(that.cameraMarkersList)
           }, 1000)
         }
       })
@@ -664,7 +726,7 @@ export default {
         },
         cbConnectError: function() { // 创建WebControl实例失败
           that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
@@ -672,13 +734,13 @@ export default {
               that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
             }, 3000)
           } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
         cbConnectClose: function(bNormalClose) {
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
-          console.log('cbConnectClose')
+
           that.oWebControl = null
         }
       })
@@ -756,7 +818,7 @@ export default {
           keyLength: 1024
         })
       }).then(function(oData) {
-        console.log(oData)
+
         if (oData.responseMsg.data) {
           that.pubKey = oData.responseMsg.data
           callback()

src/views/system/login.vue

@@ -1,271 +1,279 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">数字四平态势感知监管平台</h3>
-      <div class="login-container">
-        <h4>请登录</h4>
-        <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="m-b-15">
-            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-                    @keyup.enter.native="handleLogin" class="m-b-15">
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="code" v-if="captchaOnOff">
-          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-                    @keyup.enter.native="handleLogin">
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-          </el-input>
-          <div class="login-code">
-            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-          </div>
-        </el-form-item>
-        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-        <el-form-item style="width:100%;">
-          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                     @click.native.prevent="handleLogin">
-            <span v-if="!loading">登 录</span>
-            <span v-else>登 录 中...</span>
-          </el-button>
-          <div style="float: right;" v-if="register">
-            <router-link class="link-type" :to="'/register'">立即注册</router-link>
-          </div>
-        </el-form-item>
-      </div>
-    </el-form>
-  </div>
+	<div class="login">
+		  <StarBackground />
+		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+			<h3 class="title"> 通榆县乡村振兴综合监管平台</h3>
+			<h3 class="title">数字应急</h3>
+			<div class="login-container">
+				<h4>请登录</h4>
+				<el-form-item prop="username">
+					<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
+						class="m-b-15">
+						<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="password">
+					<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+						@keyup.enter.native="handleLogin" class="m-b-15">
+						<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="code" v-if="captchaOnOff">
+					<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+						@keyup.enter.native="handleLogin">
+						<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+					</el-input>
+					<div class="login-code">
+						<img :src="codeUrl" @click="getCode" class="login-code-img" />
+					</div>
+				</el-form-item>
+<!--				<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
+				<el-form-item style="width:100%;">
+					<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+						@click.native.prevent="handleLogin">
+						<span v-if="!loading">登 录</span>
+						<span v-else>登 录 中...</span>
+					</el-button>
+					<div style="float: right;" v-if="register">
+						<router-link class="link-type" :to="'/register'">立即注册</router-link>
+					</div>
+				</el-form-item>
+			</div>
+		</el-form>
+	</div>
 </template>
 
 <script>
-  import {
-    getCodeImg
-  } from '@/api/login'
-  import Cookies from 'js-cookie'
-  import {
-    encrypt,
-    decrypt
-  } from '@/utils/jsencrypt'
+	import StarBackground from '@/components/star'
+	import {
+		getCodeImg
+	} from '@/api/login'
+	import Cookies from 'js-cookie'
+	import {
+		encrypt,
+		decrypt
+	} from '@/utils/jsencrypt'
 
-  export default {
-    name: 'Login',
-    data() {
-      return {
-        codeUrl: '',
-        loginForm: {
-          username: 'admin',
-          password: 'admin123',
-          rememberMe: false,
-          code: '',
-          uuid: ''
-        },
-        loginRules: {
-          username: [{
-            required: true,
-            trigger: 'blur',
-            message: '请输入您的账号'
-          }],
-          password: [{
-            required: true,
-            trigger: 'blur',
-            message: '请输入您的密码'
-          }],
-          code: [{
-            required: true,
-            trigger: 'change',
-            message: '请输入验证码'
-          }]
-        },
-        loading: false,
-        // 验证码开关
-        captchaOnOff: true,
-        // 注册开关
-        register: false,
-        redirect: undefined
-      }
-    },
-    watch: {
-      $route: {
-        handler: function(route) {
-          this.redirect = route.query && route.query.redirect
-        },
-        immediate: true
-      }
-    },
-    created() {
-      this.getCode()
-      this.getCookie()
-    },
-    methods: {
-      getCode() {
-        getCodeImg().then(res => {
-          this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
-          if (this.captchaOnOff) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.loginForm.uuid = res.uuid
-          }
-        })
-      },
-      getCookie() {
-        const username = Cookies.get('username')
-        const password = Cookies.get('password')
-        const rememberMe = Cookies.get('rememberMe')
-        this.loginForm = {
-          username: username === undefined ? this.loginForm.username : username,
-          password: password === undefined ? this.loginForm.password : decrypt(password),
-          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-        }
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            // if (this.loginForm.rememberMe) {
-            //无论如何我都记-孙一石
-            if (true) {
-              Cookies.set('username', this.loginForm.username, {
-                expires: 30
-              })
-              Cookies.set('password', encrypt(this.loginForm.password), {
-                expires: 30
-              })
-              Cookies.set('rememberMe', this.loginForm.rememberMe, {
-                expires: 30
-              })
-            } else {
-              Cookies.remove('username')
-              Cookies.remove('password')
-              Cookies.remove('rememberMe')
-            }
-            this.$store.dispatch('Login', this.loginForm).then(() => {
-              console.log('!@!@!@', this.redirect)
-              this.$router.push({
-                //path: this.redirect || '/'
-                path: '/'
-              }).catch(() => {
-              })
-            }).catch(() => {
-              this.loading = false
-              if (this.captchaOnOff) {
-                this.getCode()
-              }
-            })
-          }
-        })
-      }
-    }
-  }
+	export default {
+		beforeCreate: function() {
+		    document.getElementsByTagName('body')[0].style.overflow = 'hidden'
+		  },
+		name: 'Login',
+		components:{
+			StarBackground
+		},
+		data() {
+			return {
+				codeUrl: '',
+				loginForm: {
+					username: 'admin',
+					password: 'admin123',
+					rememberMe: false,
+					code: '',
+					uuid: ''
+				},
+				loginRules: {
+					username: [{
+						required: true,
+						trigger: 'blur',
+						message: '请输入您的账号'
+					}],
+					password: [{
+						required: true,
+						trigger: 'blur',
+						message: '请输入您的密码'
+					}],
+					code: [{
+						required: true,
+						trigger: 'change',
+						message: '请输入验证码'
+					}]
+				},
+				loading: false,
+				// 验证码开关
+				captchaOnOff: true,
+				// 注册开关
+				register: false,
+				redirect: undefined
+			}
+		},
+		watch: {
+			$route: {
+				handler: function(route) {
+					this.redirect = route.query && route.query.redirect
+				},
+				immediate: true
+			}
+		},
+		created() {
+			this.getCode()
+			this.getCookie()
+		},
+		methods: {
+			getCode() {
+				getCodeImg().then(res => {
+					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
+					if (this.captchaOnOff) {
+						this.codeUrl = 'data:image/gif;base64,' + res.img
+						this.loginForm.uuid = res.uuid
+					}
+				})
+			},
+			getCookie() {
+				const username = Cookies.get('username')
+				const password = Cookies.get('password')
+				const rememberMe = Cookies.get('rememberMe')
+				this.loginForm = {
+					username: username === undefined ? this.loginForm.username : username,
+					password: password === undefined ? this.loginForm.password : decrypt(password),
+					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+				}
+			},
+			handleLogin() {
+				this.$refs.loginForm.validate(valid => {
+					if (valid) {
+						this.loading = true
+						// if (this.loginForm.rememberMe) {
+						//无论如何我都记-孙一石
+						if (true) {
+							Cookies.set('username', this.loginForm.username, {
+								expires: 30
+							})
+							Cookies.set('password', encrypt(this.loginForm.password), {
+								expires: 30
+							})
+							Cookies.set('rememberMe', this.loginForm.rememberMe, {
+								expires: 30
+							})
+						} else {
+							Cookies.remove('username')
+							Cookies.remove('password')
+							Cookies.remove('rememberMe')
+						}
+						this.$store.dispatch('Login', this.loginForm).then(() => {
+							console.log('!@!@!@', this.redirect)
+							this.$router.push({
+								//path: this.redirect || '/'
+								path: '/'
+							}).catch(() => {})
+						}).catch(() => {
+							this.loading = false
+							if (this.captchaOnOff) {
+								this.getCode()
+							}
+						})
+					}
+				})
+			}
+		}
+	}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
+	@import '@/assets/styles/base.scss';
 
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background: url("../../assets/images/login/login.jpg") center;
-    background-size: cover;
-  }
+	.login {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		background: url("../../assets/images/login/login-ty.jpg") center;
+		background-size: cover;
+	}
 
-  .m-b-15 {
-    margin-bottom: 15px;
-  }
+	.m-b-15 {
+		margin-bottom: 15px;
+	}
 
-  .title {
-    margin: 0px auto 30px auto;
-    text-align: center;
-    color: #fff;
-    font-family: $fontFk;
-    font-size: 38px;
+	.title {
+		margin: 0px auto 30px auto;
+		text-align: center;
+		color: #fff;
+		font-family: $fontFk;
+		font-size: 38px;
 
-  }
+	}
 
-  .login-form {
-    border-radius: 6px;
-    margin-left: 25%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+	.login-form {
+		border-radius: 6px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 
-    h3 {
-      text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
-    }
+		h3 {
+			text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
+		}
 
-    .login-container {
-      border-radius: 6px;
-      background: rgba($color: #fff, $alpha: .7);
-      width: 450px;
-      padding: 30px;
-      box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
+		.login-container {
+			border-radius: 6px;
+			background: rgba($color: #fff, $alpha: .7);
+			width: 450px;
+			padding: 30px;
+			box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
 
-      h4 {
-        border-bottom: #3e6bfb 1px solid;
-        width: fit-content;
-        display: inline-block;
-        margin-top: 0;
-        padding-bottom: 5px;
-        margin-bottom: 20px;
-      }
-    }
+			h4 {
+				border-bottom: #3e6bfb 1px solid;
+				width: fit-content;
+				display: inline-block;
+				margin-top: 0;
+				padding-bottom: 5px;
+				margin-bottom: 20px;
+			}
+		}
 
-    .el-input {
-      height: 38px;
+		.el-input {
+			height: 38px;
 
-      input {
-        height: 38px;
-      }
-    }
+			input {
+				height: 38px;
+			}
+		}
 
-    .input-icon {
-      height: 39px;
-      width: 14px;
-      margin-left: 2px;
-      color: #3e69fb;
-    }
+		.input-icon {
+			height: 39px;
+			width: 14px;
+			margin-left: 2px;
+			color: #3e69fb;
+		}
 
-    .el-button--primary {
-      font-size: 20px;
-      background: #3e69fb;
-      padding: 15px
-    }
-  }
+		.el-button--primary {
+			font-size: 20px;
+			background: #3e69fb;
+			padding: 15px
+		}
+	}
 
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
+	.login-tip {
+		font-size: 13px;
+		text-align: center;
+		color: #bfbfbf;
+	}
 
-  .login-code {
-    width: 33%;
-    height: 38px;
-    float: right;
+	.login-code {
+		width: 33%;
+		height: 38px;
+		float: right;
 
-    img {
-      cursor: pointer;
-      vertical-align: middle;
-    }
-  }
+		img {
+			cursor: pointer;
+			vertical-align: middle;
+		}
+	}
 
-  .el-login-footer {
-    height: 40px;
-    line-height: 40px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    font-family: Arial;
-    font-size: 12px;
-    letter-spacing: 1px;
-  }
+	.el-login-footer {
+		height: 40px;
+		line-height: 40px;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		text-align: center;
+		color: #fff;
+		font-family: Arial;
+		font-size: 12px;
+		letter-spacing: 1px;
+	}
 
-  .login-code-img {
-    height: 38px;
-  }
+	.login-code-img {
+		height: 38px;
+	}
 </style>

src/views/system/register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">四平市态势感知平台</h3>
+      <h3 class="title">通榆县乡村振兴监管平台</h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />