振兴乡村首页

src/api/afforestation.js

@@ -1,17 +0,0 @@
-import request from '@/utils/request'
-
-// 获取
-export function getAfforestation(year) {
-  return request({
-    url: '/center-fire/VisuAfforestationController/getAfforestation?year='+year,
-    method: 'get',
-  })
-}
-// 点击左侧人员列表获取轨迹
-export function getAfforestationArea(afforestationId) {
-  return request({
-    url: '/center-fire/VisuAfforestationController/getAfforestationArea?afforestationId='+afforestationId,
-    method: 'get',
-  })
-}
-

src/api/animal.js

@@ -1,16 +0,0 @@
-import request from '@/utils/request'
-
-// 获取初始化数据
-export function getInit() {
-  return request({
-    url: '/center-fire/VisuForestAnimalController/init',
-    method: 'get',
-  })
-}
-// 点击左侧动物列表
-export function selectForestAnimalListByType(type) {
-  return request({
-    url: '/center-fire/VisuForestAnimalController/selectForestAnimalListByType/'+type,
-    method: 'get',
-  })
-}

src/api/datacenter.js

@@ -1,26 +0,0 @@
-import request from '@/utils/request'
-
-// 获取左侧菜单列表
-export function getResource() {
-  return request({
-    url: '/center-fire/VisuForestDataCenterController/getResource',
-    method: 'post',
-  })
-}
-
-//点击左侧菜单列表查询落点
-export function getResourcePoint(resourceTable) {
-  return request({
-    url: '/center-fire/VisuForestDataCenterController/getResourcePoint',
-    method: 'post',
-    data:{"resourceTable":resourceTable}
-  })
-}
-//点击右侧菜单列表查询落点
-export function getResourcePointByDeptId(resourceTable,deptId) {
-  return request({
-    url: '/center-fire/VisuForestDataCenterController/getResourcePoint',
-    method: 'post',
-    data:{"resourceTable":resourceTable,"deptId":deptId}
-  })
-}

src/api/disaster.js

@@ -1,18 +0,0 @@
-import request from '@/utils/request'
-
-// 获取初始化数据
-export function getInit(year) {
-  return request({
-    url: '/center-fire/VisuForestFireLossController/init',
-    method: 'post',
-    data:{"year":year}
-  })
-}
-// 点击列表获取数据
-export function selectFireLoseByid(param) {
-  return request({
-    url: '/center-fire/VisuForestFireLossController/selectFireLoseByid',
-    method: 'post',
-    data:param
-  })
-}

src/api/leader.js

@@ -1,31 +0,0 @@
-import request from '@/utils/request'
-
-// 获取左侧
-export function getRy() {
-  return request({
-    url: '/center-fire/VisuForestCloudMapController/getRy',
-    method: 'post',
-  })
-}
-
-// 获取左侧人员列表
-export function getForestLeader(linJob,linType) {
-  return request({
-    url: '/center-fire/VisuForestLeaderController/getForestLeader?linJob='+linJob+"&linType="+linType,
-    method: 'get',
-  })
-}
-// 点击左侧人员列表获取轨迹
-export function getLeaderTrack(trackById) {
-  return request({
-    url: '/center-fire/VisuForestLeaderController/getLeaderTrack?trackById='+trackById,
-    method: 'get',
-  })
-}
-// 巡林计划
-export function getPlanList(trackById) {
-  return request({
-    url: '/center-fire/VisuForestLeaderController/getPlanList',
-    method: 'get',
-  })
-}

src/api/monitor.js

@@ -1,24 +0,0 @@
-import request from '@/utils/request'
-
-// 获取左侧动态感知设备
-export function selectDeviceType() {
-  return request({
-    url: '/center-fire/VisuForestMonitorCenterController/selectDeviceType',
-    method: 'post',
-  })
-}
-// 根据设备类型查看列表
-export function selectCameraByDeptId(deptId) {
-  return request({
-    url: '/center-fire/VisuForestMonitorCenterController/selectCameraByDeptId',
-    method: 'post',
-    data:{"deptId":deptId}
-  })
-}
-// 获取重点区域
-export function selectKeyAreaList() {
-  return request({
-    url: '/center-data/importarea/listFegin',
-    method: 'get',
-  })
-}

src/router/index.js

@@ -42,62 +42,6 @@ export const constantRoutes = [{
 			title: '林业云图'
 		}
 	},
-	{
-		//数据中心
-		path: '/datacenter',
-		name: 'datacenter',
-		component: () => import('@/views/datacenter'),
-		meta: {
-			title: '数据中心'
-		}
-	},
-	{
-		//监控中心
-		path: '/monitor',
-		name: 'monitor',
-		component: () => import('@/views/monitor'),
-		meta: {
-			title: '监控中心'
-		}
-	}, {
-		path: '/disaster',
-		name: 'disaster',
-		component: () => import('@/views/disaster'),
-		meta: {
-			title: '灾后评估'
-		}
-	},
-  {
-		path: '/leader',
-		name: 'leader',
-		component: () => import('@/views/leader'),
-		meta: {
-			title: '网格化'
-		}
-	}, {
-		path: '/afforestation',
-		name: 'afforestation',
-		component: () => import('@/views/afforestation'),
-		meta: {
-			title: '植树造林'
-		}
-	},
-  // {
-  //   path: '/',
-  //   name: '',
-  //   component: () => import('@/views/animal'),
-  //   meta: {
-  //     title: '动物保护'
-  //   }
-  // },
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '珍惜古树'
-    }
-  },
   {
     path: '/bigdata',
     name: 'bigdata',
@@ -124,64 +68,6 @@ export const constantRoutesNew = [{
 			title: '林业云图'
 		}
 	},
-	{
-		//数据中心
-		path: '/datacenter',
-		name: 'datacenter',
-		component: () => import('@/views/datacenter'),
-		meta: {
-			title: '数据中心'
-		}
-	},
-	{
-		//监控中心
-		path: '/monitor',
-		name: 'monitor',
-		component: () => import('@/views/monitor'),
-		meta: {
-			title: '监控中心'
-		}
-	},
-	{
-		path: '/disaster',
-		name: 'disaster',
-		component: () => import('@/views/disaster'),
-		meta: {
-			title: '灾后评估'
-		}
-	},
-	{
-		path: '/leader',
-		name: 'leader',
-		component: () => import('@/views/leader'),
-		meta: {
-			title: '网格化'
-		}
-	},
-	{
-		path: '/afforestation',
-		name: 'afforestation',
-		component: () => import('@/views/afforestation'),
-		meta: {
-			title: '植树造林'
-		}
-	},
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '动物保护'
-    }
-  },
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '珍惜古树'
-    }
-  },
   {
     path: '/bigdata',
     name: 'bigdata',

src/views/afforestation.vue

@@ -1,295 +0,0 @@
-<!--植树造林-->
-<template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar" :class="indentleft" ref="left">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title" style="margin: 1rem 0; padding-right:1rem">
-              <el-date-picker v-model="pickYear" @change="getInit()" type="year" placeholder="选择年">
-              </el-date-picker>
-            </div>
-            <div class="i-list-con h-19">
-              <div class="d-l-con" :class="{on:listCurrentIndex1 == item.id}" v-for="(item,index) in afforestationList"
-                   @click="getAfforestationArea(item.id)">
-                <div class="d-l-l-text">
-                  <i class="i-small"></i>
-                  <h4>{{ item.planName }}</h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="i-list-con h-51">
-              <div class="d-l-con" :class="{on:listCurrentIndex2 == item.points}"
-                   v-for="(item,index) in AfforestationAreaList" @click="setGraphicsList(item.points)">
-                <div class="d-l-l-text">
-                  <i class="i-small"></i>
-                  <h4>区域{{ index + 1 }}</h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
-      <!--底部 -->
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
-
-    </div>
-    <eventLocation ref="eventLocation"></eventLocation>
-    <TVWall ref="TVWall"></TVWall>
-  </div>
-</template>
-
-<script>
-import {
-  getAfforestation, getAfforestationArea
-} from '@/api/afforestation'
-/** ----------------------------------摄像头预览开始------------------------------------- */
-import {
-  getDahuaVideoServer
-} from '@/api/dahua/dahua'
-import DHWs from '@/dahua/lib/DHWs'
-
-/** ----------------------------------摄像头预览结束------------------------------------- */
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-
-let echarts = require('echarts')
-export default {
-  dicts: ['event_source'],
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  created() {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.getInit()
-  },
-  data() {
-    return {
-      listCurrentIndex1: '',
-      listCurrentIndex2: '',
-      pickYear: new Date(), //选择年份
-      afforestationList: [],
-      AfforestationAreaList: [],
-      graphicsList: [],//地图区域
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false
-
-    }
-  },
-
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
-          this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
-          this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
-          this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
-          this.$refs.bottomMenu.showChangChild = false
-        }
-      }
-
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-
-    getInit() {
-      this.listCurrentIndex1 = ''
-      this.listCurrentIndex2 = ''
-      let that = this
-      this.afforestationList = []
-      this.AfforestationAreaList = []
-      //获取左侧菜单列表
-      getAfforestation(this.pickYear.getYear() + 1900).then(res => {
-        this.afforestationList = res.data
-        setTimeout(() => {
-          this.$refs.supermap.clearG()
-        }, 1000)
-      })
-    },
-    getAfforestationArea(afforestationId) {
-      this.listCurrentIndex1 = afforestationId
-      let that = this
-      //获取左侧菜单列表
-      getAfforestationArea(afforestationId).then(res => {
-        this.AfforestationAreaList = res.data
-      })
-    },
-    setGraphicsList(points) {
-      this.listCurrentIndex2 = points
-      this.graphicsList = []
-      if (points != null && points != '') {
-        this.graphicsList = JSON.parse(points)
-        this.$refs.supermap.clearG()
-        this.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
-      } else {
-        this.$refs.supermap.clearG()
-      }
-    },
-
-    //吉祥物收起左右框
-    indent() {
-      let list = document.getElementsByClassName('el-tooltip__popper')
-      list[list.length - 1].style.display = 'none'
-      if (this.indentStyle == '') {
-        this.indentStyle = 'indent-style'
-        this.indentleft = 'indent-left'
-        this.indentright = 'indent-right'
-        this.indentText = '展开左右栏'
-      } else if (this.indentText == '展开左右栏') {
-        this.indentStyle = ''
-        this.indentleft = ''
-        this.indentright = ''
-        this.indentText = '收起左右栏'
-      }
-    },
-    dropLocation(lat, lng) {
-      this.$refs.supermap.dropLocation(lat, lng)
-    },
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    alertLogin: function() {
-      this.$modal.msg('登录中....')
-    },
-    alertLoginSuccess: function() {
-      this.$modal.msgSuccess('登录成功！')
-    },
-    alertLoginFailed: function() {
-      this.$modal.msgError('登陆失败！')
-    },
-    alertReinstall: function() {
-      this.$modal.msgWarning('请重新安装客户端')
-    },
-    /** 预览按钮操作 */
-    preview(channelCode) {
-      getDahuaVideoServer().then(newResponse => {
-        this.ws.detectConnectQt().then(res => {
-          if (res) { // 连接客户端成功
-            this.alertLogin()
-            this.ws.login({
-              loginIp: newResponse.loginIp,
-              loginPort: newResponse.loginPort,
-              userName: newResponse.userName,
-              userPwd: newResponse.userPwd,
-              token: '',
-              https: 1
-            })
-            this.ws.on('loginState', (res) => {
-              this.isLogin = res
-              console.log('---res-----', res)
-              if (res) {
-                this.alertLoginSuccess()
-                this.activePanel = 'key2'
-                this.realTimeVideoDialog(channelCode)
-              } else {
-                this.alertLoginFailed()
-              }
-            })
-          } else { // 连接客户端失败
-            this.alertReinstall()
-          }
-        })
-      })
-    },
-    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
-      if (!this.isLogin) {
-        this.$Message.info('正在登陆客户端，请稍等......')
-        return false
-      }
-      this.ws.openVideo(cameraParams)
-    }
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-.el-table__header {
-  width: auto !important;
-}
-
-.d-dialog-con {
-  position: absolute;
-  left: -19rem;
-  top: 0;
-}
-</style>

src/views/animal.vue

@@ -1,485 +0,0 @@
-<template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar w-6" :class="indentleft" ref="left">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="i-list-con h-78">
-              <div class="d-l-con-icon">
-                <div class="icon-con  m-btm-no icon-animal-con" :class="animalcount" @click="getInit()">
-                  <!--   -->
-                  <!--<div class="icon icon-dot"></div>-->
-                  <div class="icon-text animal-text">
-                    <h6>9</h6>
-                    <h5>总数</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="d-l-con-icon">
-                <div class="icon-con icon-animal-con" :class="{on:iconCurrentIndex1==item.type}"
-                     v-for="(item,index) in animalDwfb" @click="selectForestAnimalListByType(item.type)">
-                  <div class="iconfont icon icon-normal icon-animal">
-                    <img :src="item.src">
-                  </div>
-                  <div class="icon-text icon-animal-text">
-                    <h5>{{ item.name }}</h5>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'animalMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
-      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
-      <!--      </button>-->
-      <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>事件分布</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-73">
-              <div class="d-l-con-icon">
-                <div class="h-19 overflow-y w100">
-                  <div class="d-l-con" v-for="(item,index) in animalSjfb">
-                    <div class="d-l-l-text">
-                      <i class="i-small"></i>
-                      <h4>{{ item.deptName }}</h4>
-                    </div>
-                    <div class="d-l-l-count">{{ item.count }}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="d-l-con">
-                <div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
-              </div>
-              <div class="d-l-con d-evnet-list-con" :class="{on:listCurrentIndex1==index}"
-                   v-for="(item,index) in animalSjlb"
-                   @click="dropLocation(item.latitude,item.longitude,index)">
-                <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
-                <div class="event-list-text">
-                  <h3>{{ item.eventTitle }}</h3>
-                  <h4><span>摄像头</span><span>新上报</span><span>{{ item.reportTime }}</span>
-                  </h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-
-      </div>
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
-<!--          src="@/assets/images/mascot.png"/>-->
-<!--        </div>-->
-<!--      </el-tooltip>-->
-
-    </div>
-    <eventLocation ref="eventLocation"></eventLocation>
-    <TVWall ref="TVWall"></TVWall>
-  </div>
-</template>
-
-<script>
-import {
-  getInit,
-  selectForestAnimalListByType
-} from '@/api/animal'
-
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-
-let echarts = require('echarts')
-export default {
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  data() {
-    return {
-      animalcount: '',
-      iconCurrentIndex1: '',
-      listCurrentIndex1: '',
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false,
-
-      //虚拟数据
-      animalDwfb: [{
-        name: '虎',
-        src: require('../assets/images/dwbh/hu-1.png'),
-        type: 'forest_animal_hu'
-      }, {
-        name: '豹',
-        src: require('../assets/images/dwbh/bao-1.png'),
-        type: 'forest_animal_bao'
-      }, {
-        name: '蛇',
-        src: require('../assets/images/dwbh/she-1.png'),
-        type: 'forest_animal_she'
-      }, {
-        name: '鹰',
-        src: require('../assets/images/dwbh/ying-1.png'),
-        type: 'forest_animal_ying'
-      }, {
-        name: '兔',
-        src: require('../assets/images/dwbh/tuzi-1.png'),
-        type: 'forest_animal_tu'
-      }, {
-        name: '狐狸',
-        src: require('../assets/images/dwbh/huli-1.png'),
-        type: 'forest_animal_huli'
-      }, {
-        name: '狗熊',
-        src: require('../assets/images/dwbh/gouxiong-1.png'),
-        type: 'forest_animal_gouxiong'
-      }, {
-        name: '野鸡',
-        src: require('../assets/images/dwbh/yeji-1.png'),
-        type: 'forest_animal_yeji'
-      }, {
-        name: '狍子',
-        src: require('../assets/images/dwbh/paozi-1.png'),
-        type: 'forest_animal_paozi'
-      }],
-      animalSjfb: [],
-      animalSjlb: [],
-      markersList: [] //点位列表
-    }
-  },
-  created() {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.getInit()
-  },
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
-          this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
-          this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
-          this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
-          this.$refs.bottomMenu.showChangChild = false
-        }
-      }
-
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    dropLocation(lat, lng, index) {
-      this.listCurrentIndex1 = index
-      this.$refs.supermap.dropLocation(lat, lng)
-    },
-    //初始化
-    getInit() {
-      this.iconCurrentIndex1 = ''
-      this.animalcount = 'on'
-      let that = this
-      //获取左侧菜单列表
-      getInit().then(res => {
-        this.animalSjfb = res.data.visuForestAnimalBOList
-        this.animalSjlb = res.data.visuForestVgdEventBOList
-
-        that.markersList = []
-        if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
-          0) {
-          for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'marker',
-              bindPopupHtml: '',
-              click: '',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.visuForestVgdEventBOList.length > 50) {
-              markersMap.isAggregation = true
-            }
-            markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
-            markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
-              ',' + res.data.visuForestVgdEventBOList[i]
-                .latitude + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            that.markersList.push(markersMap)
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.setMarkers(that.markersList)
-          }, 1000)
-        } else {
-          setTimeout(() => {
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.clearM(true)
-          }, 1000)
-        }
-      })
-    },
-
-    selectForestAnimalListByType(type) {
-      this.iconCurrentIndex1 = type
-      this.animalcount = ''
-      let that = this
-      //获取左侧菜单列表
-      selectForestAnimalListByType(type).then(res => {
-        this.animalSjfb = res.data.visuForestAnimalBOList
-        this.animalSjlb = res.data.visuForestVgdEventBOList
-        that.markersList = []
-        if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
-          0) {
-          for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'marker',
-              bindPopupHtml: '',
-              click: '',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.visuForestVgdEventBOList.length > 50) {
-              markersMap.isAggregation = true
-            }
-            markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
-            markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
-              ',' + res.data.visuForestVgdEventBOList[i]
-                .latitude + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            that.markersList.push(markersMap)
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.setMarkers(that.markersList)
-          }, 1000)
-        } else {
-          setTimeout(() => {
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.clearM(true)
-          }, 1000)
-        }
-      })
-    },
-
-    //事件chart
-    eventChart() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('animal-chart'))
-      myChart.setOption({
-        color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        toolbox: {
-          show: true
-        },
-        series: [{
-          name: '事件分类',
-          type: 'pie',
-          roseType: true,
-          radius: [30, 70],
-          label: {
-            show: true,
-            formatter: '{b}\n{c} '
-          },
-          data: this.eventChartData
-        }]
-      })
-
-    },
-    //吉祥物收起左右框
-    indent() {
-      let list = document.getElementsByClassName('el-tooltip__popper')
-      list[list.length - 1].style.display = 'none'
-      if (this.indentStyle == '') {
-        this.indentStyle = 'indent-style'
-        this.indentleft = 'indent-left'
-        this.indentright = 'indent-right'
-        this.indentText = '展开左右栏'
-      } else if (this.indentText == '展开左右栏') {
-        this.indentStyle = ''
-        this.indentleft = ''
-        this.indentright = ''
-        this.indentText = '收起左右栏'
-      }
-    }
-  }
-
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-//动物保护
-.icon-animal-con {
-  width: 100%;
-  display: block !important;
-}
-
-.icon-animal {
-  display: block;
-  margin: 2px auto;
-  background: none !important;
-}
-
-.icon-animal-text {
-  display: block !important;
-  text-align: center !important;
-  padding: 0.5rem 0.5rem 0rem 0.5rem;
-}
-
-.animal-text {
-  background: #f5ad1b;
-  border: 0.2px solid rgba(19, 64, 64, 0.7);
-  height: 3.2rem;
-  width: 4rem;
-  text-align: center;
-  margin: 0px auto;
-  border-radius: 0.5rem;
-  color: #fff !important;
-}
-
-.animal-text h6 {
-  color: #fff !important;
-}
-
-.w100 {
-  width: 100% !important;
-}
-
-.animal-img {
-  height: 3rem !important;
-}
-
-.w-6 {
-  width: 6rem !important;
-}
-</style>

src/views/bigdata/bigdata.vue

@@ -185,36 +185,36 @@ export default {
           path: '/forest',
           name: '林业云图'
         },
-        {
-          //数据中心
-          path: '/datacenter',
-          name: '数据中心'
-        },
-        {
-          //监控中心
-          path: '/monitor',
-          name: '监控中心'
-        },
-        {
-          path: '/disaster',
-          name: '灾后评估'
-        },
-        {
-          path: '/leader',
-          name: '网格化'
-        },
-        {
-          path: '/afforestation',
-          name: '植树造林'
-        },
-        {
-          path: '/',
-          name: '动物保护'
-        },
-        {
-          path: '/',
-          name: '珍惜古树'
-        },
+        // {
+        //   //数据中心
+        //   path: '/datacenter',
+        //   name: '数据中心'
+        // },
+        // {
+        //   //监控中心
+        //   path: '/monitor',
+        //   name: '监控中心'
+        // },
+        // {
+        //   path: '/disaster',
+        //   name: '灾后评估'
+        // },
+        // {
+        //   path: '/leader',
+        //   name: '网格化'
+        // },
+        // {
+        //   path: '/afforestation',
+        //   name: '植树造林'
+        // },
+        // {
+        //   path: '/',
+        //   name: '动物保护'
+        // },
+        // {
+        //   path: '/',
+        //   name: '珍惜古树'
+        // },
         {
           path: '/bigdata',
           name: '统计分析'

src/views/disaster.vue

@@ -1,807 +0,0 @@
-<!--灾后评估-->
-<template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar" :class="indentleft" ref="left">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title" style="margin: 1rem 0; padding-right:1rem">
-              <el-date-picker v-model="pickYear" @change="getInit()" type="year" placeholder="选择年">
-              </el-date-picker>
-            </div>
-            <div class="i-list-con h-73">
-              <div class="d-l-con-icon">
-                <div class="icon-con  m-btm-no">
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text flex-r">
-                    <h5>{{ numberFiresYear }}次</h5>
-                    <h5>火灾次数</h5>
-                  </div>
-                </div>
-                <div class="icon-con m-btm-no">
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text flex-r">
-                    <h5>{{ forestFireLossTotal }}万元</h5>
-                    <h5>损失总计</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="d-l-con flex-c">
-                <div class="d-l-l-text">
-                  <h2>火灾损失价值</h2>
-                </div>
-                <div class="d-l-l-text ">
-                  <h3>合计：{{ fireLossTotalYear }}万元</h3>
-                </div>
-                <el-table :data="forestResourcesYear">
-                  <el-table-column label="林木资源">
-                    <el-table-column label="成林" width="50%">
-                      <el-table-column label="蓄积">
-                        <el-table-column prop="forestArea" label="米">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column prop="worth" label="价值" width="50%">
-                        <el-table-column prop="forestPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                    <el-table-column prop="youngTree" label="幼树">
-                      <el-table-column prop="number" label="株数">
-                        <el-table-column prop="treesNumber" label="万株">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column prop="worth" label="价值">
-                        <el-table-column prop="treesPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-                <el-table style="margin-top: 1rem;" :data="casualtiesYear">
-                  <el-table-column prop="date" label="人员伤亡">
-                    <el-table-column label="轻伤" width="50%">
-                      <el-table-column label="人数">
-                        <el-table-column prop="minorInjuriesNumber" label="人">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用" width="50%">
-                        <el-table-column prop="minorInjuriesPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                    <el-table-column label="重伤">
-                      <el-table-column label="人数">
-                        <el-table-column prop="seriouslyInjuredNumber" label="人">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用">
-                        <el-table-column prop="seriouslyInjuredPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                    <el-table-column label="死亡">
-                      <el-table-column label="人数">
-                        <el-table-column prop="deathNumber" label="人">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用">
-                        <el-table-column prop="deathPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-                <el-table style="margin-top: 1rem;" :data="elseFireLossPriceYear">
-                  <el-table-column label="其他火灾损失">
-                    <el-table-column prop="elseFireLossPrice" label="万元">
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-              </div>
-              <div class="d-l-con flex-c">
-                <div class="d-l-l-text">
-                  <h2>扑火费用支出</h2>
-                </div>
-                <div class="d-l-l-text ">
-                  <h3>合计：{{ blazesPriceTotalYear }}万元</h3>
-                </div>
-                <el-table style="margin-top: 1rem;" :data="fireFightingCasualtiesYear">
-                  <el-table-column prop="date" label="人员伤亡">
-                    <el-table-column label="人工费" width="50%">
-                      <el-table-column label="人工">
-                        <el-table-column prop="artificialDays" label="工日">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用" width="50%">
-                        <el-table-column prop="artificialPrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                    <el-table-column prop="vehicleFee" label="车辆费">
-                      <el-table-column label="合计">
-                        <el-table-column prop="vehicleNumber" label="台">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="汽车">
-                        <el-table-column prop="carNumber" label="台">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用">
-                        <el-table-column prop="vehiclePrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                    <el-table-column prop="flightFee" label="飞行费">
-                      <el-table-column label="飞机">
-                        <el-table-column prop="planeNumber" label="架次">
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="费用">
-                        <el-table-column prop="planePrice" label="万元">
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-                <el-table style="margin-top: 1rem;" :data="otherFireCostsYear">
-                  <el-table-column label="其他火灾费用">
-                    <el-table-column prop="elseBlazesPrice" label="万元">
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-              </div>
-
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
-      <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>列表</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-19">
-              <div class="d-l-con" :class="{on:listCurrentIndex==index}" v-for="(item,index) in fireList"
-                   :key="index" @click="choseFireList(item.id,item.eventId,index)">
-                <div class="d-l-l-text">
-                  <i class="i-small"></i>
-                  <h4>{{ pickYear.getYear() + 1900 }}年第{{ index + 1 }}场火灾</h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="i-list-con h-55">
-              <div class="forthis">
-                <div class="d-l-con flex-c">
-                  <div class="d-l-l-text">
-                    <h2>火灾损失价值</h2>
-                  </div>
-                  <div class="d-l-l-text ">
-                    <h3>合计：{{ fireLossTotal }}万元</h3>
-                  </div>
-                  <el-table :data="forestResources">
-                    <el-table-column label="林木资源">
-                      <el-table-column label="成林" width="50%">
-                        <el-table-column label="蓄积">
-                          <el-table-column prop="forestArea" label="米">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column prop="worth" label="价值" width="50%">
-                          <el-table-column prop="forestPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="幼树">
-                        <el-table-column label="株数">
-                          <el-table-column prop="treesNumber" label="万株">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column prop="worth" label="价值">
-                          <el-table-column prop="treesPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table>
-                  <el-table style="margin-top: 1rem;" :data="casualties">
-                    <el-table-column label="人员伤亡">
-                      <el-table-column label="轻伤" width="50%">
-                        <el-table-column label="人数">
-                          <el-table-column prop="minorInjuriesNumber" label="人">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用" width="50%">
-                          <el-table-column prop="minorInjuriesPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="重伤">
-                        <el-table-column label="人数">
-                          <el-table-column prop="seriouslyInjuredNumber" label="人">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用">
-                          <el-table-column prop="seriouslyInjuredPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="死亡">
-                        <el-table-column label="人数">
-                          <el-table-column prop="deathNumber" label="人">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用">
-                          <el-table-column prop="deathPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table>
-                  <el-table style="margin-top: 1rem;" :data="elseFireLossPrice">
-                    <el-table-column label="其他火灾损失">
-                      <el-table-column prop="elseFireLossPrice" label="万元">
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table>
-                </div>
-                <div class="d-l-con flex-c">
-                  <div class="d-l-l-text">
-                    <h2>扑火费用支出</h2>
-                  </div>
-                  <div class="d-l-l-text ">
-                    <h3>合计：{{ blazesPriceTotal }}万元</h3>
-                  </div>
-                  <el-table style="margin-top: 1rem;" :data="fireFightingCasualties">
-                    <el-table-column label="人员伤亡">
-                      <el-table-column prop="artificial" label="人工费" width="50%">
-                        <el-table-column label="人工">
-                          <el-table-column prop="artificialDays" label="工日">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用" width="50%">
-                          <el-table-column prop="artificialPrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column label="车辆费">
-                        <el-table-column label="合计">
-                          <el-table-column prop="vehicleNumber" label="台">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="汽车">
-                          <el-table-column prop="carNumber" label="台">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用">
-                          <el-table-column prop="vehiclePrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                      <el-table-column prop="flightFee" label="飞行费">
-                        <el-table-column label="飞机">
-                          <el-table-column prop="planeNumber" label="架次">
-                          </el-table-column>
-                        </el-table-column>
-                        <el-table-column label="费用">
-                          <el-table-column prop="planePrice" label="万元">
-                          </el-table-column>
-                        </el-table-column>
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table>
-                  <el-table style="margin-top: 1rem;" :data="otherFireCosts">
-                    <el-table-column label="其他火灾费用">
-                      <el-table-column prop="elseBlazesPrice" label="万元">
-                      </el-table-column>
-                    </el-table-column>
-                  </el-table>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
-<!--          src="@/assets/images/mascot.png"/></div>-->
-<!--      </el-tooltip>-->
-    </div>
-    <eventLocation ref="eventLocation"></eventLocation>
-    <TVWall ref="TVWall"></TVWall>
-  </div>
-</template>
-
-<script>
-import {
-  getInit,
-  selectFireLoseByid
-} from '@/api/disaster'
-
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-
-// import echarts from 'echarts'
-let echarts = require('echarts')
-export default {
-  dicts: ['event_source'],
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  created() {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.getInit()
-  },
-  data() {
-    return {
-      listCurrentIndex: 0,
-      numberFiresYear: 0,
-      forestFireLossTotal: 0,
-      fireLossTotalYear: 0,
-      forestResourcesYear: [{
-        forestArea: '0',
-        forestPrice: '0',
-        treesNumber: '0',
-        treesPrice: '0'
-      }],
-      casualtiesYear: [{
-        minorInjuriesNumber: '0',
-        minorInjuriesPrice: '0',
-        seriouslyInjuredNumber: '0',
-        seriouslyInjuredPrice: '0',
-        deathNumber: '0',
-        deathPrice: '0'
-      }],
-      elseFireLossPriceYear: [{
-        elseFireLossPrice: '0'
-      }],
-      blazesPriceTotalYear: 0,
-      fireFightingCasualtiesYear: [{
-        artificialDays: '0',
-        artificialPrice: '0',
-        vehicleNumber: '0',
-        carNumber: '0',
-        vehiclePrice: '0',
-        planeNumber: '0',
-        planePrice: '0'
-      }],
-      otherFireCostsYear: [{
-        elseBlazesPrice: '0'
-      }],
-
-      fireLossTotal: 0,
-      forestResources: [{
-        forestArea: '0',
-        forestPrice: '0',
-        treesNumber: '0',
-        treesPrice: '0'
-      }],
-      casualties: [{
-        minorInjuriesNumber: '0',
-        minorInjuriesPrice: '0',
-        seriouslyInjuredNumber: '0',
-        seriouslyInjuredPrice: '0',
-        deathNumber: '0',
-        deathPrice: '0'
-      }],
-      elseFireLossPrice: [{
-        elseFireLossPrice: '0'
-      }],
-      blazesPriceTotal: 0,
-      fireFightingCasualties: [{
-        artificialDays: '0',
-        artificialPrice: '0',
-        vehicleNumber: '0',
-        carNumber: '0',
-        vehiclePrice: '0',
-        planeNumber: '0',
-        planePrice: '0'
-      }],
-      otherFireCosts: [{
-        elseBlazesPrice: '0'
-      }],
-
-      pickYear: new Date(), //选择年份
-      graphicsList: [], //地图区域
-      fireList: [], //右侧活在列表
-      eventChartData: [], //左侧eachar图表数据
-
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false
-    }
-  },
-
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
-          this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
-          this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
-          this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
-          this.$refs.bottomMenu.showChangChild = false
-        }
-      }
-
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    choseFireList(id,eventId, index) {
-      this.listCurrentIndex = index
-      let that = this
-      selectFireLoseByid({id:id,eventId:eventId}).then(res => {
-        this.graphicsList = []
-        //地图标记
-        if (res.data.regionalFlagBOList != null && res.data.regionalFlagBOList.length > 0) {
-          for (let i = 0; i < res.data.regionalFlagBOList.length; i++) {
-            let latlng = {
-              lat: res.data.regionalFlagBOList[i].latitude,
-              lng: res.data.regionalFlagBOList[i].longitude
-            }
-            this.graphicsList.push(latlng)
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearG()
-            that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
-          }, 1000)
-        } else {
-          that.$refs.supermap.clearG()
-        }
-        //右侧
-        this.fireLossTotal = res.data.visuForestFireLossBO.fireLossTotal != null ? res.data
-          .visuForestFireLossBO.fireLossTotal : 0
-        this.forestResources[0].forestArea = res.data.visuForestFireLossBO.forestArea != null ? res
-          .data.visuForestFireLossBO.forestArea : 0
-        this.forestResources[0].forestPrice = res.data.visuForestFireLossBO.forestPrice != null ? res
-          .data.visuForestFireLossBO.forestPrice : 0
-        this.forestResources[0].treesNumber = res.data.visuForestFireLossBO.treesNumber != null ? res
-          .data.visuForestFireLossBO.treesNumber : 0
-        this.forestResources[0].treesPrice = res.data.visuForestFireLossBO.treesPrice != null ? res
-          .data.visuForestFireLossBO.treesPrice : 0
-
-        this.casualties[0].minorInjuriesNumber = res.data.visuForestFireLossBO.minorInjuriesNumber !=
-        null ? res.data.visuForestFireLossBO.minorInjuriesNumber : 0
-        this.casualties[0].minorInjuriesPrice = res.data.visuForestFireLossBO.minorInjuriesPrice !=
-        null ? res.data.visuForestFireLossBO.minorInjuriesPrice : 0
-        this.casualties[0].seriouslyInjuredNumber = res.data.visuForestFireLossBO
-          .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBO.seriouslyInjuredNumber : 0
-        this.casualties[0].seriouslyInjuredPrice = res.data.visuForestFireLossBO
-          .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBO.seriouslyInjuredPrice : 0
-        this.casualties[0].deathNumber = res.data.visuForestFireLossBO.deathNumber != null ? res.data
-          .visuForestFireLossBO.deathNumber : 0
-        this.casualties[0].deathPrice = res.data.visuForestFireLossBO.deathPrice != null ? res.data
-          .visuForestFireLossBO.deathPrice : 0
-        this.elseFireLossPrice[0].elseFireLossPrice = res.data.visuForestFireLossBO
-          .elseFireLossPrice != null ? res.data.visuForestFireLossBO.elseFireLossPrice : 0
-        this.blazesPriceTotal = res.data.visuForestFireLossBO.blazesPriceTotal != null ? res.data
-          .visuForestFireLossBO.blazesPriceTotal : 0
-
-        this.fireFightingCasualties[0].artificialDays = res.data.visuForestFireLossBO.artificialDays !=
-        null ? res.data.visuForestFireLossBO.artificialDays : 0
-        this.fireFightingCasualties[0].artificialPrice = res.data.visuForestFireLossBO
-          .artificialPrice != null ? res.data.visuForestFireLossBO.artificialPrice : 0
-        this.fireFightingCasualties[0].vehicleNumber = res.data.visuForestFireLossBO.vehicleNumber !=
-        null ? res.data.visuForestFireLossBO.vehicleNumber : 0
-        this.fireFightingCasualties[0].carNumber = res.data.visuForestFireLossBO.carNumber != null ?
-          res.data.visuForestFireLossBO.carNumber : 0
-        this.fireFightingCasualties[0].vehiclePrice = res.data.visuForestFireLossBO.vehiclePrice !=
-        null ? res.data.visuForestFireLossBO.vehiclePrice : 0
-        this.fireFightingCasualties[0].planeNumber = res.data.visuForestFireLossBO.planeNumber !=
-        null ? res.data.visuForestFireLossBO.planeNumber : 0
-        this.fireFightingCasualties[0].planePrice = res.data.visuForestFireLossBO.planePrice != null ?
-          res.data.visuForestFireLossBO.planePrice : 0
-
-        this.otherFireCosts[0].elseBlazesPrice = res.data.visuForestFireLossBO.elseBlazesPrice !=
-        null ? res.data.visuForestFireLossBO.elseBlazesPrice : 0
-      })
-    },
-
-    getInit() {
-      let that = this
-      setTimeout(() => {
-        that.graphicsList = []
-        that.$refs.supermap.clearG()
-      }, 1000)
-      //获取左侧菜单列表
-      getInit(this.pickYear.getYear() + 1900).then(res => {
-        this.fireList = []
-        // //地图标记
-        // if (res.data.regionalFlagBOList != null && res.data.regionalFlagBOList.length > 0) {
-        //   for (let i = 0; i < res.data.regionalFlagBOList.length; i++) {
-        //     let latlng = {
-        //       lat: res.data.regionalFlagBOList[i].latitude,
-        //       lng: res.data.regionalFlagBOList[i].longitude
-        //     }
-        //     this.graphicsList.push(latlng)
-        //   }
-        //   setTimeout(() => {
-        //     that.$refs.supermap.clearG()
-        //     that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
-        //   }, 1000)
-        // }else {
-        //   that.$refs.supermap.clearG()
-        // }
-
-        //右侧列表
-        if (res.data.visuForestFireLossTimeBOList != null && res.data.visuForestFireLossTimeBOList
-          .length > 0) {
-          this.numberFiresYear = res.data.visuForestFireLossTimeBOList.length
-          this.fireList = res.data.visuForestFireLossTimeBOList
-        } else {
-          this.numberFiresYear = 0
-        }
-
-        //左侧
-        if (res.data.visuForestFireLossBO != null) {
-          this.forestFireLossTotal = res.data.visuForestFireLossBO.forestFireLossTotal != null ? res
-            .data.visuForestFireLossBO.forestFireLossTotal : 0
-          this.fireLossTotalYear = res.data.visuForestFireLossBO.fireLossTotal != null ? res.data
-            .visuForestFireLossBO.fireLossTotal : 0
-          this.forestResourcesYear[0].forestArea = res.data.visuForestFireLossBO.forestArea != null ?
-            res.data.visuForestFireLossBO.forestArea : 0
-          this.forestResourcesYear[0].forestPrice = res.data.visuForestFireLossBO.forestPrice !=
-          null ? res.data.visuForestFireLossBO.forestPrice : 0
-          this.forestResourcesYear[0].treesNumber = res.data.visuForestFireLossBO.treesNumber !=
-          null ? res.data.visuForestFireLossBO.treesNumber : 0
-          this.forestResourcesYear[0].treesPrice = res.data.visuForestFireLossBO.treesPrice != null ?
-            res.data.visuForestFireLossBO.treesPrice : 0
-
-          this.casualtiesYear[0].minorInjuriesNumber = res.data.visuForestFireLossBO
-            .minorInjuriesNumber != null ? res.data.visuForestFireLossBO.minorInjuriesNumber : 0
-          this.casualtiesYear[0].minorInjuriesPrice = res.data.visuForestFireLossBO
-            .minorInjuriesPrice != null ? res.data.visuForestFireLossBO.minorInjuriesPrice : 0
-          this.casualtiesYear[0].seriouslyInjuredNumber = res.data.visuForestFireLossBO
-            .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBO
-            .seriouslyInjuredNumber : 0
-          this.casualtiesYear[0].seriouslyInjuredPrice = res.data.visuForestFireLossBO
-            .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBO.seriouslyInjuredPrice :
-            0
-          this.casualtiesYear[0].deathNumber = res.data.visuForestFireLossBO.deathNumber != null ?
-            res.data.visuForestFireLossBO.deathNumber : 0
-          this.casualtiesYear[0].deathPrice = res.data.visuForestFireLossBO.deathPrice != null ? res
-            .data.visuForestFireLossBO.deathPrice : 0
-          this.elseFireLossPriceYear[0].elseFireLossPrice = res.data.visuForestFireLossBO
-            .elseFireLossPrice != null ? res.data.visuForestFireLossBO.elseFireLossPrice : 0
-          this.blazesPriceTotalYear = res.data.visuForestFireLossBO.blazesPriceTotal != null ? res
-            .data.visuForestFireLossBO.blazesPriceTotal : 0
-
-          this.fireFightingCasualtiesYear[0].artificialDays = res.data.visuForestFireLossBO
-            .artificialDays != null ? res.data.visuForestFireLossBO.artificialDays : 0
-          this.fireFightingCasualtiesYear[0].artificialPrice = res.data.visuForestFireLossBO
-            .artificialPrice != null ? res.data.visuForestFireLossBO.artificialPrice : 0
-          this.fireFightingCasualtiesYear[0].vehicleNumber = res.data.visuForestFireLossBO
-            .vehicleNumber != null ? res.data.visuForestFireLossBO.vehicleNumber : 0
-          this.fireFightingCasualtiesYear[0].carNumber = res.data.visuForestFireLossBO.carNumber !=
-          null ? res.data.visuForestFireLossBO.carNumber : 0
-          this.fireFightingCasualtiesYear[0].vehiclePrice = res.data.visuForestFireLossBO
-            .vehiclePrice != null ? res.data.visuForestFireLossBO.vehiclePrice : 0
-          this.fireFightingCasualtiesYear[0].planeNumber = res.data.visuForestFireLossBO
-            .planeNumber != null ? res.data.visuForestFireLossBO.planeNumber : 0
-          this.fireFightingCasualtiesYear[0].planePrice = res.data.visuForestFireLossBO.planePrice !=
-          null ? res.data.visuForestFireLossBO.planePrice : 0
-
-          this.otherFireCostsYear[0].elseBlazesPrice = res.data.visuForestFireLossBO
-            .elseBlazesPrice != null ? res.data.visuForestFireLossBO.elseBlazesPrice : 0
-        } else {
-          this.forestFireLossTotal = 0
-          this.fireLossTotalYear = 0
-          this.forestResourcesYear[0].forestArea = 0
-          this.forestResourcesYear[0].forestPrice = 0
-          this.forestResourcesYear[0].treesNumber = 0
-          this.forestResourcesYear[0].treesPrice = 0
-
-          this.casualtiesYear[0].minorInjuriesNumber = 0
-          this.casualtiesYear[0].minorInjuriesPrice = 0
-          this.casualtiesYear[0].seriouslyInjuredNumber = 0
-          this.casualtiesYear[0].seriouslyInjuredPrice = 0
-          this.casualtiesYear[0].deathNumber = 0
-          this.casualtiesYear[0].deathPrice = 0
-          this.elseFireLossPriceYear[0].elseFireLossPrice = 0
-          this.blazesPriceTotalYear = 0
-
-          this.fireFightingCasualtiesYear[0].artificialDays = 0
-          this.fireFightingCasualtiesYear[0].artificialPrice = 0
-          this.fireFightingCasualtiesYear[0].vehicleNumber = 0
-          this.fireFightingCasualtiesYear[0].carNumber = 0
-          this.fireFightingCasualtiesYear[0].vehiclePrice = 0
-          this.fireFightingCasualtiesYear[0].planeNumber = 0
-          this.fireFightingCasualtiesYear[0].planePrice = 0
-
-          this.otherFireCostsYear[0].elseBlazesPrice = 0
-        }
-
-        //右侧
-        this.fireLossTotal = res.data.visuForestFireLossBOFirst.fireLossTotal != null ? res.data
-          .visuForestFireLossBOFirst.fireLossTotal : 0
-        this.forestResources[0].forestArea = res.data.visuForestFireLossBOFirst.forestArea != null ?
-          res.data.visuForestFireLossBOFirst.forestArea : 0
-        this.forestResources[0].forestPrice = res.data.visuForestFireLossBOFirst.forestPrice != null ?
-          res.data.visuForestFireLossBOFirst.forestPrice : 0
-        this.forestResources[0].treesNumber = res.data.visuForestFireLossBOFirst.treesNumber != null ?
-          res.data.visuForestFireLossBOFirst.treesNumber : 0
-        this.forestResources[0].treesPrice = res.data.visuForestFireLossBOFirst.treesPrice != null ?
-          res.data.visuForestFireLossBOFirst.treesPrice : 0
-
-        this.casualties[0].minorInjuriesNumber = res.data.visuForestFireLossBOFirst
-          .minorInjuriesNumber != null ? res.data.visuForestFireLossBOFirst.minorInjuriesNumber : 0
-        this.casualties[0].minorInjuriesPrice = res.data.visuForestFireLossBOFirst
-          .minorInjuriesPrice != null ? res.data.visuForestFireLossBOFirst.minorInjuriesPrice : 0
-        this.casualties[0].seriouslyInjuredNumber = res.data.visuForestFireLossBOFirst
-          .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBOFirst
-          .seriouslyInjuredNumber : 0
-        this.casualties[0].seriouslyInjuredPrice = res.data.visuForestFireLossBOFirst
-          .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBOFirst.seriouslyInjuredPrice :
-          0
-        this.casualties[0].deathNumber = res.data.visuForestFireLossBOFirst.deathNumber != null ? res
-          .data.visuForestFireLossBOFirst.deathNumber : 0
-        this.casualties[0].deathPrice = res.data.visuForestFireLossBOFirst.deathPrice != null ? res
-          .data.visuForestFireLossBOFirst.deathPrice : 0
-        this.elseFireLossPrice[0].elseFireLossPrice = res.data.visuForestFireLossBOFirst
-          .elseFireLossPrice != null ? res.data.visuForestFireLossBOFirst.elseFireLossPrice : 0
-        this.blazesPriceTotal = res.data.visuForestFireLossBOFirst.blazesPriceTotal != null ? res.data
-          .visuForestFireLossBOFirst.blazesPriceTotal : 0
-
-        this.fireFightingCasualties[0].artificialDays = res.data.visuForestFireLossBOFirst
-          .artificialDays != null ? res.data.visuForestFireLossBOFirst.artificialDays : 0
-        this.fireFightingCasualties[0].artificialPrice = res.data.visuForestFireLossBOFirst
-          .artificialPrice != null ? res.data.visuForestFireLossBOFirst.artificialPrice : 0
-        this.fireFightingCasualties[0].vehicleNumber = res.data.visuForestFireLossBOFirst
-          .vehicleNumber != null ? res.data.visuForestFireLossBOFirst.vehicleNumber : 0
-        this.fireFightingCasualties[0].carNumber = res.data.visuForestFireLossBOFirst.carNumber !=
-        null ? res.data.visuForestFireLossBOFirst.carNumber : 0
-        this.fireFightingCasualties[0].vehiclePrice = res.data.visuForestFireLossBOFirst
-          .vehiclePrice != null ? res.data.visuForestFireLossBOFirst.vehiclePrice : 0
-        this.fireFightingCasualties[0].planeNumber = res.data.visuForestFireLossBOFirst.planeNumber !=
-        null ? res.data.visuForestFireLossBOFirst.planeNumber : 0
-        this.fireFightingCasualties[0].planePrice = res.data.visuForestFireLossBOFirst.planePrice !=
-        null ? res.data.visuForestFireLossBOFirst.planePrice : 0
-
-        this.otherFireCosts[0].elseBlazesPrice = res.data.visuForestFireLossBOFirst.elseBlazesPrice !=
-        null ? res.data.visuForestFireLossBOFirst.elseBlazesPrice : 0
-      })
-    },
-    //事件chart
-    eventChart() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('event-chart'))
-
-      myChart.setOption({
-        color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        toolbox: {
-          show: true
-        },
-        series: [{
-          name: '事件分类',
-          type: 'pie',
-          roseType: true,
-          radius: [30, 70],
-          label: {
-            show: true,
-            formatter: '{b}\n{c} '
-          },
-          data: this.eventChartData
-        }]
-      })
-
-    },
-    //吉祥物收起左右框
-    indent() {
-      let list = document.getElementsByClassName('el-tooltip__popper')
-      list[list.length - 1].style.display = 'none'
-      if (this.indentStyle == '') {
-        this.indentStyle = 'indent-style'
-        this.indentleft = 'indent-left'
-        this.indentright = 'indent-right'
-        this.indentText = '展开左右栏'
-      } else if (this.indentText == '展开左右栏') {
-        this.indentStyle = ''
-        this.indentleft = ''
-        this.indentright = ''
-        this.indentText = '收起左右栏'
-      }
-    },
-    dropLocation(lat, lng) {
-      this.$refs.supermap.dropLocation(lat, lng)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-.el-table__header {
-  width: auto !important;
-}
-
-.d-dialog-con {
-  position: absolute;
-  left: -19rem;
-  top: 0;
-}
-</style>

src/views/leader.vue

@@ -1,390 +0,0 @@
-<template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar" :class="indentleft" ref="left">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>人员分布</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-25">
-              <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
-              <div class="d-l-con-icon">
-                <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.jobValue}"
-                     v-for="(item,index) in visuForestCloudRYBO"
-                     @click="getForestLeader(item.jobValue,item.jobType)">
-                  <div class="icon icon-mid el-icon-user"></div>
-                  <div class="icon-text">
-                    <h5>{{ item.job }}</h5>
-                    <h6>{{ item.number }}</h6>
-                  </div>
-                </div>
-                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
-                <div class="icon icon-mid el-icon-user"></div>
-                <div class="icon-text">
-                  <h5>{{item.job}}</h5>
-                  <h6>{{item.number}}</h6>
-                </div>
-              </div> -->
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-        <!--        avatar: ""-->
-        <!--        deptName: "锦程社区第一网格"-->
-        <!--        nickName: "李猛"-->
-        <!--        userId: 102-->
-        <!--        userName: "limeng"-->
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="i-list-con h-27">
-              <div class="d-l-con-icon">
-                <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
-                     v-for="(item,index) in peopleList" @click="getLeaderTrack(item.userId)">
-                  <div class="icon icon-mid el-icon-user"></div>
-                  <div class="icon-text personnel-name">
-                    <h6>{{ item.nickName }}</h6>
-                    <h5>{{ item.deptName }}</h5>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
-      <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>巡林计划</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-73">
-
-              <div class="h-19 overflow-y">
-                <div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
-                     v-for="(item,index) in xunLinListOne"
-                     @click="setConnectList(item.planLine,item.planName)">
-                  <div class="d-l-l-text">
-                    <i class="i-small"></i>
-                    <h4>{{ item.planName }}</h4>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-
-
-      </div>
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent">-->
-<!--          <img src="@/assets/images/mascot.png"/>-->
-<!--        </div>-->
-<!--      </el-tooltip>-->
-    </div>
-    <eventLocation ref="eventLocation"></eventLocation>
-    <TVWall ref="TVWall"></TVWall>
-  </div>
-</template>
-
-<script>
-import {
-  getForestLeader,
-  getLeaderTrack,
-  getPlanList,
-  getRy
-} from '@/api/leader'
-
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-
-let echarts = require('echarts')
-export default {
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  data() {
-    return {
-      iconCurrentIndex1: '1',
-      listCurrentIndex1: '',
-      listCurrentIndex2: '',
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false,
-      visuForestCloudRYBO: [], //人员类型列表
-      peopleList: [], //人员列表
-      connectList: [], //画线
-      xunLinListOne: [], //巡林计划
-      zrs: 0, //总人数
-      zxrs: 0 //在线人数
-    }
-  },
-  created() {
-    this.getInit()
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
-          this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
-          this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
-          this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
-          this.$refs.bottomMenu.showChangChild = false
-        }
-      }
-
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-
-    //初始化
-    getInit() {
-      let that = this
-      this.iconCurrentIndex1 = '1'
-      this.listCurrentIndex1 = ''
-      this.listCurrentIndex2 = ''
-      //获取左侧菜单列表
-      getRy().then(res => {
-        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
-        that.zrs = res.data.visuForestCloudRyZxBO.zrs
-        that.zxrs = res.data.visuForestCloudRyZxBO.zxrs
-        this.personnelChart()
-      })
-      //获取巡林计划
-      getPlanList().then(res => {
-        this.xunLinListOne = res.data
-      })
-    },
-    //获取左侧人员列表
-    getForestLeader(linJob, linType) {
-      this.listCurrentIndex1 = ''
-      this.listCurrentIndex2 = ''
-      this.iconCurrentIndex1 = linJob
-      this.peopleList = []
-      getForestLeader(linJob, linType).then(res => {
-        this.peopleList = res.data
-      })
-      this.connectList = []
-      this.$refs.supermap.clearC()
-    },
-    //点击左侧人员列表获取轨迹
-    getLeaderTrack(userId) {
-      this.listCurrentIndex1 = userId
-      let that = this
-      this.connectList = []
-      getLeaderTrack(userId).then(res => {
-        if (res.data != null && res.data.length > 0) {
-          for (let i = 0; i < res.data.length; i++) {
-            let latlng = {
-              lat: res.data[i].latitude,
-              lng: res.data[i].longitude
-            }
-            this.connectList.push(latlng)
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearC()
-            that.$refs.supermap.setConnectList(this.connectList, 'red')
-          }, 1000)
-        } else {
-          that.$refs.supermap.clearC()
-        }
-      })
-    },
-
-    setConnectList(points, planName) {
-      this.listCurrentIndex2 = planName
-      this.connectList = []
-      if (points != null && points != '') {
-        this.connectList = JSON.parse(points)
-        this.$refs.supermap.setConnectTwoList(this.connectList, 'red')
-      }
-    },
-
-    //吉祥物收起左右框
-    indent() {
-      let list = document.getElementsByClassName('el-tooltip__popper')
-      list[list.length - 1].style.display = 'none'
-      if (this.indentStyle == '') {
-        this.indentStyle = 'indent-style'
-        this.indentleft = 'indent-left'
-        this.indentright = 'indent-right'
-        this.indentText = '展开左右栏'
-      } else if (this.indentText == '展开左右栏') {
-        this.indentStyle = ''
-        this.indentleft = ''
-        this.indentright = ''
-        this.indentText = '收起左右栏'
-      }
-    },
-    //人员chart
-    personnelChart() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('personnel-chart'))
-      // 绘制图表
-      const handred = this.zrs
-      let point = this.zxrs
-      myChart.setOption({
-        title: [{
-          text: '总人数：' + handred + '人' + '\n' + '\n' + '在线人数：' + point + '人',
-          x: '48%',
-          y: '25%',
-          textStyle: {
-            fontWeight: 'normal',
-            color: '#02d6fc',
-            fontSize: '14'
-          }
-        }],
-        series: [{
-          name: 'circle',
-          type: 'pie',
-          center: ['22%', '50%'],
-          radius: ['60%', '70%'],
-          clockWise: true,
-          label: {
-            normal: {
-              position: 'center'
-
-            }
-          },
-          itemStyle: {
-            normal: {
-              label: {
-                show: false
-              },
-              labelLine: {
-                show: false
-              }
-            }
-          },
-          data: [{
-            value: point,
-            name: '当前在线',
-            label: {
-              show: true, //单独显示该数据项
-              formatter: '{c}人',
-              labelLayout: {
-                top: '50%'
-              },
-              textStyle: {
-                color: '#02d6fc',
-                fontSize: 14
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: { // 完成的圆环的颜色
-                  colorStops: [{
-                    offset: 0,
-                    color: '#02d6fc' // 0% 处的颜色
-                  }, {
-                    offset: 1,
-                    color: '#367bec' // 100% 处的颜色
-                  }]
-                },
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false
-                }
-              }
-            }
-          }, {
-            value: handred - point,
-            itemStyle: {
-              color: '#666'
-            }
-          }]
-        }]
-      })
-    }
-  }
-
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-.h-27 {
-  height: 27rem;
-}
-</style>

src/views/monitor.vue

@@ -1,793 +0,0 @@
-<!--监控中心-->
-<template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar" :class="indentleft" ref="left">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>事态感知</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-73">
-              <div class="d-l-con-icon">
-                <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
-                     v-for="(item,index) in visuForestCloudMapDeviceBOList"
-                     v-on:click="selectDeviceType(index)">
-                  <!--   -->
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text">
-                    <h6>{{ item.deviceCount }}</h6>
-                    <h5>{{ item.deviceName }}</h5>
-                  </div>
-                </div>
-                <div class="icon-con w-33 m-btm-no">
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text">
-                    <h6>0</h6>
-                    <h5>传感器</h5>
-                  </div>
-                </div>
-                <div class="icon-con w-33 m-btm-no">
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text">
-                    <h6>0</h6>
-                    <h5>大喇叭</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="overflow-y" style="height: 33vh;">
-                <el-collapse accordion>
-                  <el-collapse-item v-for="(item,index) in region" :key="index">
-                    <!-- deptId -->
-                    <template slot="title">
-                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
-                           v-on:click="selectCameraByDeptId(item.deptId)">
-                        <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.deptName }}</h4>
-                        </div>
-                        <div class="d-l-l-count">{{ item.deptCount }}</div>
-                      </div>
-                    </template>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
-
-              <!-- 横向柱状 echart -->
-              <div class="overflow-y" style="height: 33vh;">
-                <div id="camera-chart" style="width: 100%;height:33vh;"></div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
-      </supermap>
-      <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>列表</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
-            </div>
-            <div class="i-list-con h-43">
-              <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
-                   :class="{on:listCurrentIndex2 == index}"
-                   v-on:click="dropLocation(item.latitude,item.longitude,index)">
-                <div class="d-l-l-text">
-                  <i class="iconfont sj-icon-jkzx icon-sxt"></i>
-                  <h4>{{ item.cameraName }}</h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="this-title">
-              <span>重点区域</span>
-              <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-l-text">
-                  <i class="i-small"></i>
-                  <h4>{{ item.areaName }}</h4>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
-<!--          src="@/assets/images/mascot.png"/></div>-->
-<!--      </el-tooltip>-->
-
-    </div>
-    <eventLocation ref="eventLocation"></eventLocation>
-    <TVWall ref="TVWall"></TVWall>
-    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
-               @close="cancelEventLocationShow()">
-      <div style="width:1020px;height:625px;position:relative;">
-        <!--视频窗口展示---海康-->
-        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  selectDeviceType,
-  selectCameraByDeptId,
-  selectKeyAreaList
-} from '@/api/monitor'
-
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-
-/** ----------------------------------摄像头预览开始------------------------------------- */
-import {
-  getDahuaVideoServer
-} from '@/api/dahua/dahua'
-import {
-  getHaiKangVideoServer
-} from '@/api/haikang/haikang'
-// import DHWs from '@/dahua/lib/DHWs'
-
-/** ----------------------------------摄像头预览结束------------------------------------- */
-  // import echarts from 'echarts'
-let echarts = require('echarts')
-
-export default {
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  created() {
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    // const DHWsInstance = DHWs.getInstance()
-    // this.ws = DHWsInstance
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.selectDeviceType(-1)
-    this.selectKeyAreaList()
-  },
-  data() {
-    return {
-      iconCurrentIndex1: '-1',
-      listCurrentIndex1: '-1',
-      listCurrentIndex2: '-1',
-      /** ----------------------------------摄像头预览开始------------------------------------- */
-      //大华
-      activePanel: 'key1',
-      isLogin: false,
-      cameraParams: [],
-      ws: null,
-      //海康
-      cameraTitle: '',
-      cameraVisible: false,
-      initCount: 0,
-      pubKey: '',
-      oWebControl: null,
-      /** ----------------------------------摄像头预览结束------------------------------------- */
-      visuForestCloudMapDeviceBOList: [],
-      visuForestCloudCameraBOList: [],
-      cameraMarkersList: [],
-      sourceData: [],
-      keyAreaList: [],//重点区域
-      iframeBoo: true,
-      open: false,
-      iframeVue: null,
-      activeName: 'info',
-      radio: '1',
-      region: [],
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false
-    }
-  },
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
-          this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
-          this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
-          this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
-          this.$refs.bottomMenu.showChangChild = false
-        }
-      }
-
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    cameraChat() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('camera-chart'))
-      // 绘制图表
-      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
-      myChart.setOption({
-        dataset: {
-          source: this.sourceData
-        },
-        tooltip: {
-          trigger: 'item'
-
-        },
-        grid: {
-          top: '5%',
-          left: '2%',
-          // right: "4%",
-          bottom: '-15%',
-          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
-          }
-        },
-
-        series: [{
-
-          type: 'bar',
-          animationCurve: 'easeOutBack',
-          barWidth: 5,
-          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.20)'
-            }
-          },
-          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,.5)'
-              }
-            ]),
-            borderColor: '#a2f9f7',
-            shadowBlur: 16,
-            shadowColor: '#a2f9f7'
-          }
-        }]
-      })
-    },
-    selectKeyAreaList() {
-      //获取重点区域
-      let that = this
-      selectKeyAreaList().then(res => {
-        that.keyAreaList = res
-      })
-    },
-    selectDeviceType(index) {
-      this.iconCurrentIndex1 = index
-      //获取左侧动态感知设备
-      let that = this
-      selectDeviceType().then(res => {
-        that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
-
-        that.region = res.data.visuForestCloudTodaySjfbBOList
-
-        if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
-          .length > 0) {
-          for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
-            let aa = []
-            aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
-            aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
-            this.sourceData.push(aa)
-          }
-        }
-
-        that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
-        this.cameraChat()
-        if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
-          .length > 0) {
-          for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'camera',
-              bindPopupHtml: '',
-              click: 'preview',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.visuForestCloudCameraBOList.length > 50) {
-              markersMap.isAggregation = true
-            }
-            if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = res.data.visuForestCloudCameraBOList[i].cameraCode
-            } else {
-              markersMap.parameter = []
-            }
-
-            markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
-            markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data.visuForestCloudCameraBOList[i].longitude +
-              ',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>摄像头名称：' + res.data.visuForestCloudCameraBOList[i]
-                .cameraName + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            this.cameraMarkersList.push(markersMap)
-            //   cameraAccount: "1"
-            // cameraCode: "1000010"
-            // cameraFactory: "2"
-            // cameraIp: "1"
-            // cameraName: "2"
-            // cameraPasword: "2"
-            // cameraPort: 2
-            // cameraRadius: 20
-            // cameraRegion: "3"
-            // dataDeptId: null
-            // dataStatus: null
-            // eventType: null
-            // height: "11"
-            // id: "0d165fc362514f79b12a899ea66295fd"
-            // latitude: "49.325625"
-            // longitude: "125.3333"
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 1000)
-        }
-      })
-    },
-    dropLocation(lat, lng, index) {
-      this.listCurrentIndex2 = index
-      this.$refs.supermap.dropLocation(lat, lng)
-    },
-    selectCameraByDeptId(depId) {
-      this.listCurrentIndex1 = depId
-      let that = this
-      that.cameraMarkersList = []
-      that.visuForestCloudCameraBOList = []
-      selectCameraByDeptId(depId).then(res => {
-        //根据设备类型查看列表
-        that.visuForestCloudCameraBOList = res.data
-
-        if (res.data != null && res.data.length > 0) {
-          for (let i = 0; i < res.data.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'camera',
-              bindPopupHtml: '',
-              click: 'preview',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.length > 50) {
-              markersMap.isAggregation = true
-            }
-            if (res.data[i].channelCode != null) {
-              markersMap.parameter = res.data[i].cameraCode
-            } else {
-              markersMap.parameter = []
-            }
-
-            markersMap.lng = res.data[i].longitude
-            markersMap.lat = res.data[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            this.cameraMarkersList.push(markersMap)
-            //   cameraAccount: "1"
-            // cameraCode: "1000010"
-            // cameraFactory: "2"
-            // cameraIp: "1"
-            // cameraName: "2"
-            // cameraPasword: "2"
-            // cameraPort: 2
-            // cameraRadius: 20
-            // cameraRegion: "3"
-            // dataDeptId: null
-            // dataStatus: null
-            // eventType: null
-            // height: "11"
-            // id: "0d165fc362514f79b12a899ea66295fd"
-            // latitude: "49.325625"
-            // longitude: "125.3333"
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 1000)
-        }
-      })
-    },
-    //吉祥物收起左右框
-    indent() {
-      let list = document.getElementsByClassName('el-tooltip__popper')
-      list[list.length - 1].style.display = 'none'
-      if (this.indentStyle == '') {
-        this.indentStyle = 'indent-style'
-        this.indentleft = 'indent-left'
-        this.indentright = 'indent-right'
-        this.indentText = '展开左右栏'
-      } else if (this.indentText == '展开左右栏') {
-        this.indentStyle = ''
-        this.indentleft = ''
-        this.indentright = ''
-        this.indentText = '收起左右栏'
-      }
-    },
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    alertLogin: function() {
-      this.$modal.msg('登录中....')
-    },
-    alertLoginSuccess: function() {
-      this.$modal.msgSuccess('登录成功！')
-    },
-    alertLoginFailed: function() {
-      this.$modal.msgError('登陆失败！')
-    },
-    alertReinstall: function() {
-      this.$modal.msgWarning('请重新安装客户端')
-    },
-    cancelEventLocationShow() {
-      if (this.oWebControl != null) {
-        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
-          },
-          function() {  // 断开与插件服务连接失败
-          })
-      }
-    },
-    /** 预览按钮操作 */
-    preview(cameraCode) {
-      let that = this
-      // getDahuaVideoServer().then(newResponse => {
-      //   console.log(newResponse)
-      //   this.ws.detectConnectQt().then(res => {
-      //     if (res) { // 连接客户端成功
-      //       this.alertLogin()
-      //       this.ws.login({
-      //         loginIp: newResponse.loginIp,
-      //         loginPort: newResponse.loginPort,
-      //         userName: newResponse.userName,
-      //         userPwd: newResponse.userPwd,
-      //         token: '',
-      //         https: 1
-      //       })
-      //       this.ws.on('loginState', (res) => {
-      //         this.isLogin = res
-      //         console.log('---res-----', res)
-      //         if (res) {
-      //           this.alertLoginSuccess()
-      //           this.activePanel = 'key2'
-      //           this.realTimeVideoDialog(channelCode)
-      //         } else {
-      //           this.alertLoginFailed()
-      //         }
-      //       })
-      //     } else { // 连接客户端失败
-      //       this.alertReinstall()
-      //     }
-      //   })
-      // })
-      that.cameraVisible = true
-      getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
-        that.cameraTitle = '摄像头-'+newResponse.data.cameraName
-        that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
-        setTimeout(function() {
-          that.playhk(newResponse.data.channelCode)
-        }, 5000)
-      })
-
-    },
-    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
-      if (!this.isLogin) {
-        this.$Message.info('正在登陆客户端，请稍等......')
-        return false
-      }
-      this.ws.openVideo(cameraParams)
-    },
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-
-
-    /** ----------------------------------海康摄像头预览开始------------------------------------- */
-    // 创建播放实例
-    initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
-      let that=this
-      that.oWebControl = new WebControl({
-        szPluginContainer: 'playWnd',                       // 指定容器id
-        iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function() {                     // 创建WebControl实例成功
-          that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
-            dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-          }).then(function() {                           // 启动插件服务成功
-            that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
-              cbIntegrationCallBack: cbIntegrationCallBack
-            })
-
-            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-              that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
-            })
-          }, function() { // 启动插件服务失败
-          })
-        },
-        cbConnectError: function() { // 创建WebControl实例失败
-          that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
-          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
-          initCount++
-          if (initCount < 3) {
-            setTimeout(function() {
-              that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
-            }, 3000)
-          } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
-          }
-        },
-        cbConnectClose: function(bNormalClose) {
-          // 异常断开：bNormalClose = false
-          // JS_Disconnect正常断开：bNormalClose = true
-          console.log('cbConnectClose')
-          that.oWebControl = null
-        }
-      })
-    },
-    //播放海康摄像头
-    playhk(channelCode) {
-      var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
-      var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
-      var transMode = 1                                      //传输协议：0-UDP，1-TCP
-      var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
-      var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
-
-      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
-      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
-
-      this.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify({
-          cameraIndexCode: cameraIndexCode,                //监控点编号
-          streamMode: streamMode,                         //主子码流标识
-          transMode: transMode,                           //传输协议
-          gpuMode: gpuMode,                               //是否开启GPU硬解
-          wndId: wndId                                     //可指定播放窗口
-        })
-      })
-    },
-    //初始化
-    init(newappkey,newloginIp,newsecret,newloginPort) {
-      let that = this
-      that.getPubKey(function() {
-        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
-        var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
-        var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
-        var ip = newloginIp                           //综合安防管理平台IP地址，必填
-        var playMode = 0                                  //初始播放模式：0-预览，1-回放
-        var port = Number(newloginPort)                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
-        var snapDir = 'D:\\SnapDir'                       //抓图存储路径
-        var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
-        var layout = '1x1'                                //playMode指定模式的布局
-        var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
-        var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
-        var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
-        var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
-        var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
-        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
-
-        that.oWebControl.JS_RequestInterface({
-          funcName: 'init',
-          argument: JSON.stringify({
-            appkey: appkey,                            //API网关提供的appkey
-            secret: secret,                            //API网关提供的secret
-            ip: ip,                                    //API网关IP地址
-            playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
-            port: port,                                //端口
-            snapDir: snapDir,                          //抓图存储路径
-            videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
-            layout: layout,                            //布局
-            enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
-            encryptedFields: encryptedFields,          //加密字段
-            showToolbar: showToolbar,                  //是否显示工具栏
-            showSmart: showSmart,                      //是否显示智能信息
-            buttonIDs: buttonIDs                       //自定义工具条按钮
-          })
-        }).then(function(oData) {
-          that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-        })
-      })
-    },
-    //获取公钥
-    getPubKey(callback) {
-      let that = this
-      that.oWebControl.JS_RequestInterface({
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({
-          keyLength: 1024
-        })
-      }).then(function(oData) {
-        console.log(oData)
-        if (oData.responseMsg.data) {
-          that.pubKey = oData.responseMsg.data
-          callback()
-        }
-      })
-    },
-//RSA加密
-    setEncrypt(value) {
-      var encrypt = new JSEncrypt()
-      encrypt.setPublicKey(this.pubKey)
-      return encrypt.encrypt(value)
-    },
-    /** ----------------------------------海康摄像头预览结束------------------------------------- */
-
-  }
-}
-
-// 推送消息
-function cbIntegrationCallBack(oData) {
-  console.log(JSON.stringify(oData.responseMsg))
-}
-</script>
-
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-.playWnd {
-  margin: 4px 0 0 8px;
-  width: 1020px; /*播放容器的宽和高设定*/
-  height: 600px;
-  border: 1px solid red;
-}
-</style>