|
|
@@ -1,241 +1,242 @@
|
|
|
<template>
|
|
|
- <div class="visual-con">
|
|
|
- <!--头部-->
|
|
|
- <vheader></vheader>
|
|
|
- <!--主体-->
|
|
|
- <div class="visual-body">
|
|
|
- <!-- 左侧 -->
|
|
|
- <div class="leftbar w-6" :class="indentleft" ref="left">
|
|
|
- <div class="forthis">
|
|
|
- <div class="i-list-con h-78">
|
|
|
- <div class="d-l-con-icon">
|
|
|
- <div class="icon-con m-btm-no icon-animal-con"><!-- -->
|
|
|
- <!--<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" v-for="(item,index) in animalDwfb">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 地图 -->
|
|
|
- <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
|
|
|
- :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">
|
|
|
- <div class="this-title">
|
|
|
- <span>事件分布</span>
|
|
|
- <!-- <span>23</span> -->
|
|
|
- </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.address}}</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" v-for="(item,index) in animalSjlb">
|
|
|
- <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
|
|
|
- <div class="event-list-text">
|
|
|
- <h3>{{item.eventTitle}}</h3>
|
|
|
- <h4>{{item.phoneNum}}</h4>
|
|
|
- <h4><span>{{item.qx}}</span><span>{{item.source}}</span><span>{{item.time}}</span>
|
|
|
- </h4>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </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>
|
|
|
- </div>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar w-6" :class="indentleft" ref="left">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="i-list-con h-78">
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con m-btm-no icon-animal-con">
|
|
|
+ <!-- -->
|
|
|
+ <!--<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" v-for="(item,index) in animalDwfb">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
|
|
|
+ :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">
|
|
|
+ <div class="this-title">
|
|
|
+ <span>事件分布</span>
|
|
|
+ <!-- <span>23</span> -->
|
|
|
+ </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.address}}</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" v-for="(item,index) in animalSjlb">
|
|
|
+ <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
|
|
|
+ <div class="event-list-text">
|
|
|
+ <h3>{{item.eventTitle}}</h3>
|
|
|
+ <h4>{{item.phoneNum}}</h4>
|
|
|
+ <h4><span>{{item.qx}}</span><span>{{item.source}}</span><span>{{item.time}}</span>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {selectDeviceType, selectCameraByDeptId} from '@/api/monitor'
|
|
|
-
|
|
|
- import supermap from '@/components/supermap' //超图
|
|
|
- import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
- import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
-
|
|
|
-
|
|
|
- let echarts = require('echarts')
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- supermap,
|
|
|
- vheader,
|
|
|
- vBottomMenu,
|
|
|
- }, data() {
|
|
|
- return {
|
|
|
- animalDwfb: [
|
|
|
- {
|
|
|
-
|
|
|
- name: '虎',
|
|
|
- src: require('../assets/images/dwbh/hu-1.png')
|
|
|
- }, {
|
|
|
-
|
|
|
- name: '豹',
|
|
|
- src: require('../assets/images/dwbh/bao-1.png')
|
|
|
- }, {
|
|
|
- name: '蛇',
|
|
|
- src: require('../assets/images/dwbh/she-1.png')
|
|
|
- }, {
|
|
|
- name: '鹰',
|
|
|
- src: require('../assets/images/dwbh/ying-1.png')
|
|
|
- }, {
|
|
|
- name: '兔',
|
|
|
- src: require('../assets/images/dwbh/tuzi-1.png')
|
|
|
- }, {
|
|
|
- name: '狐狸',
|
|
|
- src: require('../assets/images/dwbh/huli-1.png')
|
|
|
- }, {
|
|
|
- name: '狗熊',
|
|
|
- src: require('../assets/images/dwbh/gouxiong-1.png')
|
|
|
- }, {
|
|
|
- name: '野鸡',
|
|
|
- src: require('../assets/images/dwbh/yeji-1.png')
|
|
|
- }, {
|
|
|
- name: '狍子',
|
|
|
- src: require('../assets/images/dwbh/paozi-1.png')
|
|
|
- }
|
|
|
- ],
|
|
|
- animalSjfb: [
|
|
|
- {
|
|
|
- address: '双辽',
|
|
|
- count: '11'
|
|
|
- }, {
|
|
|
- address: '梨树',
|
|
|
- count: '11'
|
|
|
- }, {
|
|
|
- address: '伊通',
|
|
|
- count: '11'
|
|
|
- }, {
|
|
|
- address: '铁东',
|
|
|
- count: '11'
|
|
|
- }, {
|
|
|
- address: '铁西',
|
|
|
- count: '11'
|
|
|
- }
|
|
|
- ],
|
|
|
- animalSjlb: [
|
|
|
- {
|
|
|
- eventTitle: '火险事件-XXXX地摄像头',
|
|
|
- phoneNum: '15635652525',
|
|
|
- qx: '摄像头',
|
|
|
- source: '新上报',
|
|
|
- time: '2022-05-06 20:52:20'
|
|
|
- }, {
|
|
|
- eventTitle: '火险事件-XXXX地摄像头2',
|
|
|
- phoneNum: '15635652525',
|
|
|
- qx: '摄像头',
|
|
|
- source: '新上报',
|
|
|
- time: '2022-05-06 20:52:20'
|
|
|
- }, {
|
|
|
- eventTitle: '火险事件-XXXX地摄像头3',
|
|
|
- phoneNum: '15635652525',
|
|
|
- qx: '摄像头',
|
|
|
- source: '新上报',
|
|
|
- time: '2022-05-06 20:52:20'
|
|
|
- }, {
|
|
|
- eventTitle: '火险事件-XXXX地摄像头4',
|
|
|
- phoneNum: '15635652525',
|
|
|
- qx: '摄像头',
|
|
|
- source: '新上报',
|
|
|
- time: '2022-05-06 20:52:20'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- model: {},
|
|
|
- methods: {
|
|
|
-
|
|
|
- //事件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 = '收起左右栏'
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ import {
|
|
|
+ selectDeviceType,
|
|
|
+ selectCameraByDeptId
|
|
|
+ } from '@/api/monitor'
|
|
|
+
|
|
|
+ import supermap from '@/components/supermap' //超图
|
|
|
+ import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
+ import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+
|
|
|
+
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false
|
|
|
+ animalDwfb: [{
|
|
|
+
|
|
|
+ name: '虎',
|
|
|
+ src: require('../assets/images/dwbh/hu-1.png')
|
|
|
+ }, {
|
|
|
+
|
|
|
+ name: '豹',
|
|
|
+ src: require('../assets/images/dwbh/bao-1.png')
|
|
|
+ }, {
|
|
|
+ name: '蛇',
|
|
|
+ src: require('../assets/images/dwbh/she-1.png')
|
|
|
+ }, {
|
|
|
+ name: '鹰',
|
|
|
+ src: require('../assets/images/dwbh/ying-1.png')
|
|
|
+ }, {
|
|
|
+ name: '兔',
|
|
|
+ src: require('../assets/images/dwbh/tuzi-1.png')
|
|
|
+ }, {
|
|
|
+ name: '狐狸',
|
|
|
+ src: require('../assets/images/dwbh/huli-1.png')
|
|
|
+ }, {
|
|
|
+ name: '狗熊',
|
|
|
+ src: require('../assets/images/dwbh/gouxiong-1.png')
|
|
|
+ }, {
|
|
|
+ name: '野鸡',
|
|
|
+ src: require('../assets/images/dwbh/yeji-1.png')
|
|
|
+ }, {
|
|
|
+ name: '狍子',
|
|
|
+ src: require('../assets/images/dwbh/paozi-1.png')
|
|
|
+ }],
|
|
|
+ animalSjfb: [{
|
|
|
+ address: '双辽',
|
|
|
+ count: '11'
|
|
|
+ }, {
|
|
|
+ address: '梨树',
|
|
|
+ count: '11'
|
|
|
+ }, {
|
|
|
+ address: '伊通',
|
|
|
+ count: '11'
|
|
|
+ }, {
|
|
|
+ address: '铁东',
|
|
|
+ count: '11'
|
|
|
+ }, {
|
|
|
+ address: '铁西',
|
|
|
+ count: '11'
|
|
|
+ }],
|
|
|
+ animalSjlb: [{
|
|
|
+ eventTitle: '火险事件-XXXX地摄像头',
|
|
|
+ phoneNum: '15635652525',
|
|
|
+ qx: '摄像头',
|
|
|
+ source: '新上报',
|
|
|
+ time: '2022-05-06 20:52:20'
|
|
|
+ }, {
|
|
|
+ eventTitle: '火险事件-XXXX地摄像头2',
|
|
|
+ phoneNum: '15635652525',
|
|
|
+ qx: '摄像头',
|
|
|
+ source: '新上报',
|
|
|
+ time: '2022-05-06 20:52:20'
|
|
|
+ }, {
|
|
|
+ eventTitle: '火险事件-XXXX地摄像头3',
|
|
|
+ phoneNum: '15635652525',
|
|
|
+ qx: '摄像头',
|
|
|
+ source: '新上报',
|
|
|
+ time: '2022-05-06 20:52:20'
|
|
|
+ }, {
|
|
|
+ eventTitle: '火险事件-XXXX地摄像头4',
|
|
|
+ phoneNum: '15635652525',
|
|
|
+ qx: '摄像头',
|
|
|
+ source: '新上报',
|
|
|
+ time: '2022-05-06 20:52:20'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ model: {},
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ //事件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';
|
|
|
- @import '@/assets/styles/animal.scss';
|
|
|
-
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+ @import '@/assets/styles/animal.scss';
|
|
|
</style>
|
whao