|
|
@@ -1,485 +1,485 @@
|
|
|
<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'"
|
|
|
- :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 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>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ <TVWall ref="TVWall"></TVWall>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getInit,
|
|
|
- selectForestAnimalListByType
|
|
|
- } from '@/api/animal'
|
|
|
+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' //电视墙弹窗
|
|
|
+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,
|
|
|
+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()
|
|
|
+ //虚拟数据
|
|
|
+ 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
|
|
|
- } 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
|
|
|
+ },
|
|
|
+ //选择图层
|
|
|
+ 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)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ 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)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ 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
|
|
|
- }]
|
|
|
- })
|
|
|
+ //事件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 = '收起左右栏'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ //吉祥物收起左右框
|
|
|
+ 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';
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
|
|
|
- //动物保护
|
|
|
- .icon-animal-con {
|
|
|
- width: 100%;
|
|
|
- display: block !important;
|
|
|
- }
|
|
|
+//动物保护
|
|
|
+.icon-animal-con {
|
|
|
+ width: 100%;
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
|
|
|
- .icon-animal {
|
|
|
- display: block;
|
|
|
- margin: 2px auto;
|
|
|
- background: none !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;
|
|
|
- }
|
|
|
+.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 {
|
|
|
+ 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;
|
|
|
- }
|
|
|
+.animal-text h6 {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
|
|
|
- .w100 {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
+.w100 {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
|
|
|
- .animal-img {
|
|
|
- height: 3rem !important;
|
|
|
- }
|
|
|
+.animal-img {
|
|
|
+ height: 3rem !important;
|
|
|
+}
|
|
|
|
|
|
- .w-6 {
|
|
|
- width: 6rem !important;
|
|
|
- }
|
|
|
+.w-6 {
|
|
|
+ width: 6rem !important;
|
|
|
+}
|
|
|
</style>
|
