|
@@ -1,100 +1,102 @@
|
|
|
<!--植树造林-->
|
|
|
<template>
|
|
|
- <div class="visual-con">
|
|
|
- <!--头部-->
|
|
|
- <vheader></vheader>
|
|
|
- <!--主体-->
|
|
|
- <div class="visual-body">
|
|
|
- <!-- 左侧 -->
|
|
|
- <div class="leftbar" :class="indentleft" ref="left">
|
|
|
- <div class="forthis">
|
|
|
- <div class="this-title">
|
|
|
- <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.plantingQuantity}}</h4>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="forthis">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 地图 -->
|
|
|
- <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'"
|
|
|
- :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
|
|
|
- <!--底部 -->
|
|
|
- <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar" :class="indentleft" ref="left">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="this-title">
|
|
|
+ <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.plantingQuantity}}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="forthis">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
|
|
|
+ <!--底部 -->
|
|
|
+ <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<eventLocation ref="eventLocation"></eventLocation>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getAfforestation,getAfforestationArea
|
|
|
- } from '@/api/afforestation'
|
|
|
- /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
- import {
|
|
|
- getDahuaVideoServer
|
|
|
- } from "@/api/dahua/dahua";
|
|
|
- import DHWs from '@/dahua/lib/DHWs'
|
|
|
+ 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' //事件定位弹窗
|
|
|
- let echarts = require('echarts')
|
|
|
- export default {
|
|
|
- dicts: ['event_source'],
|
|
|
- components: {
|
|
|
- supermap,
|
|
|
- vheader,
|
|
|
- vBottomMenu,
|
|
|
- eventLocation
|
|
|
- },
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ import supermap from '@/components/supermap' //超图
|
|
|
+ import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
+ import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+ import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+ dicts: ['event_source'],
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation
|
|
|
+ },
|
|
|
created() {
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
- window.showDialog=this.showDialog
|
|
|
- window.choseLayerSwitching=this.choseLayerSwitching
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
/** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ mounted() {
|
|
|
this.getInit()
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- listCurrentIndex1:'',
|
|
|
- listCurrentIndex2:'',
|
|
|
- pickYear: new Date(), //选择年份
|
|
|
- afforestationList:[],
|
|
|
- AfforestationAreaList:[],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listCurrentIndex1: '',
|
|
|
+ listCurrentIndex2: '',
|
|
|
+ pickYear: new Date(), //选择年份
|
|
|
+ afforestationList: [],
|
|
|
+ AfforestationAreaList: [],
|
|
|
graphicsList: [],//地图区域
|
|
|
- //左右缩进
|
|
|
- indentStyle: '',
|
|
|
- indentleft: '',
|
|
|
- indentright: '',
|
|
|
- indentText: '收起左右栏',
|
|
|
- indentdisabled: false
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
showDialog(click) {
|
|
|
if (click == 'eventLocation') {
|
|
@@ -119,124 +121,129 @@
|
|
|
},
|
|
|
//选择图层
|
|
|
choseLayerSwitching(url) {
|
|
|
- this.$refs.supermap.layerSwitching(url, true);
|
|
|
+ this.$refs.supermap.layerSwitching(url, true)
|
|
|
},
|
|
|
/** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
|
|
|
getInit() {
|
|
|
+ this.listCurrentIndex1=''
|
|
|
+ this.listCurrentIndex2=''
|
|
|
let that = this
|
|
|
- this.afforestationList=[];
|
|
|
- this.AfforestationAreaList=[];
|
|
|
+ this.afforestationList = []
|
|
|
+ this.AfforestationAreaList = []
|
|
|
//获取左侧菜单列表
|
|
|
getAfforestation(this.pickYear.getYear() + 1900).then(res => {
|
|
|
- this.afforestationList=res.data;
|
|
|
+ this.afforestationList = res.data
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.supermap.clearG()
|
|
|
+ }, 1000)
|
|
|
})
|
|
|
},
|
|
|
getAfforestationArea(afforestationId) {
|
|
|
- this.listCurrentIndex1 = afforestationId
|
|
|
+ this.listCurrentIndex1 = afforestationId
|
|
|
let that = this
|
|
|
//获取左侧菜单列表
|
|
|
getAfforestationArea(afforestationId).then(res => {
|
|
|
- this.AfforestationAreaList=res.data;
|
|
|
+ this.AfforestationAreaList = res.data
|
|
|
})
|
|
|
},
|
|
|
- setGraphicsList(points){
|
|
|
- this.listCurrentIndex2 = points
|
|
|
- this.graphicsList=[]
|
|
|
- if(points!=null&&points!=""){
|
|
|
- this.graphicsList=JSON.parse(points);
|
|
|
+ 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{
|
|
|
+ } 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);
|
|
|
- },
|
|
|
- /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
- }
|
|
|
- }
|
|
|
+ //吉祥物收起左右框
|
|
|
+ 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';
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
|
|
|
- .el-table__header {
|
|
|
- width: auto !important;
|
|
|
- }
|
|
|
+ .el-table__header {
|
|
|
+ width: auto !important;
|
|
|
+ }
|
|
|
|
|
|
- .d-dialog-con {
|
|
|
- position: absolute;
|
|
|
- left: -19rem;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
+ .d-dialog-con {
|
|
|
+ position: absolute;
|
|
|
+ left: -19rem;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
</style>
|