|
|
@@ -0,0 +1,673 @@
|
|
|
+<!--可视化公共模板 林业-->
|
|
|
+<template>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+<!-- <!– 左侧 –>-->
|
|
|
+<!-- <div class="leftbar" ref="left">-->
|
|
|
+<!-- <!– 3 组织机构 –>-->
|
|
|
+<!-- <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-80" style="padding-left: 1rem;">-->
|
|
|
+<!-- <el-collapse accordion>-->
|
|
|
+<!-- <el-collapse-item v-for="(item,index) in villageTypeXlList" :key="index">-->
|
|
|
+<!-- <template slot="title">-->
|
|
|
+<!-- <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.id}"-->
|
|
|
+<!-- v-on:click="getAllDanger(calendarDay,item.parentId,item.id)">-->
|
|
|
+<!-- <div class="d-l-l-text">-->
|
|
|
+<!-- <h4 class="collapse-title">{{ item.name }}</h4>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="d-l-l-count">{{ item.value }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-collapse-item>-->
|
|
|
+<!-- </el-collapse>-->
|
|
|
+<!-- <div class="i-list-con small-bottom-margin h-30">-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-13>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"
|
|
|
+ :dynamicPlotting="false"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
|
|
|
+ @showEventDialog="showEventDialog"/>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="rightbar rightbar-index" ref="right">
|
|
|
+ <div class="right-item1">
|
|
|
+ </div>
|
|
|
+ <div class="right-item2">
|
|
|
+ <!-- 日历 -->
|
|
|
+ <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 small-bottom-margin h-30">
|
|
|
+ <dateChoose @selectDay="selectDay"></dateChoose>
|
|
|
+ </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 small-bottom-margin h-44">
|
|
|
+ <div class="event-list-search">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="eventSearch" @change="searchEvent(eventSearch)">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="d-l-con padding-box nowrap" v-for="(item,index) in dangerList"
|
|
|
+ @click="dropLocation(item.latitude,item.longitude)" data-html2canvas-ignore>
|
|
|
+ <div class="bgt-img">
|
|
|
+ <img v-if="item.picturePath!=null&&item.picturePath!='' && item.pictureType=='image'"
|
|
|
+ :src="item.picturePath"
|
|
|
+ style="width: 93px;height: 64px" loading="lazy"/>
|
|
|
+ <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px"/>
|
|
|
+ </div>
|
|
|
+ <div class="bgt-info">
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount==0"
|
|
|
+ class="event-state-sb">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-sb">
|
|
|
+ 新上报
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount>0" class="event-state-cb">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-cb">
|
|
|
+ 催办
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_2'" class="event-state-qs">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-qs">
|
|
|
+ 签收
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_3'" class="event-state-wb">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-wb">
|
|
|
+ 误报
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_4'" class="event-state-cf">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-cf">
|
|
|
+ 重复
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_5'" class="event-state-bj">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-bj">
|
|
|
+ 办结
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.eventStatusValue=='forest_event_status_6'" class="event-state-gd">
|
|
|
+ <i class="el-icon-caret-left"></i>
|
|
|
+ <div class="event-list-state-gd">
|
|
|
+ 归档
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
|
|
|
+ <div class="bgt-info-place">
|
|
|
+ <ul>
|
|
|
+ <li>{{ item.createTime }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <vBottomMenu ref="bottomMenu" @stopAudio="stopAudio" ></vBottomMenu>
|
|
|
+ </div>
|
|
|
+ <audio id="resource" ref="up" :src="audioSrc" controls style="display: none;"></audio>
|
|
|
+ <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay"
|
|
|
+ :bigEventTypeId="bigEventTypeId" :smallEventTypeId="smallEventTypeId"
|
|
|
+ @getAllDanger="getAllDanger"></eventdetailsdialog>
|
|
|
+
|
|
|
+ <firespread ref="firespread" :calendarDay="calendarDay" @getAllDanger="getAllDanger" @showEventDialog="showEventDialog"></firespread>
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ <TVWall ref="TVWall"></TVWall>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import dateChoose from '@/views/dateForestDanger.vue'//日历
|
|
|
+/** ----------------------------------weosocket开始------------------------------------- */
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+/** ----------------------------------weosocket结束------------------------------------- */
|
|
|
+
|
|
|
+import {
|
|
|
+ getAllDanger
|
|
|
+} from '@/api/forest'
|
|
|
+
|
|
|
+// import {
|
|
|
+// getEventByEventType
|
|
|
+// } from '@/api/village'
|
|
|
+import supermap from '@/components/supermap' //超图
|
|
|
+import supermapNotProcessed from '@/components/supermap' //超图
|
|
|
+import supermapProcessed 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 eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
|
|
|
+import firespread from '@/views/firespread.vue' //事件详情弹窗
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+import {
|
|
|
+ getDahuaVideoServer
|
|
|
+} from '@/api/dahua/dahua'
|
|
|
+import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+
|
|
|
+let echarts = require('echarts')
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ supermapNotProcessed,
|
|
|
+ supermapProcessed,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation,
|
|
|
+ TVWall,
|
|
|
+ dateChoose,
|
|
|
+ eventdetailsdialog,
|
|
|
+ firespread
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ const DHWsInstance = DHWs.getInstance()
|
|
|
+ this.ws = DHWsInstance
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getEventByEventType(this.getCurrentDataStr())
|
|
|
+ this.getAllDanger(this.getCurrentDataStr(),false)
|
|
|
+ /** ----------------------------------weosocket开始------------------------------------- */
|
|
|
+ // this.initWebSocket()
|
|
|
+ /** ----------------------------------weosocket结束------------------------------------- */
|
|
|
+ this.selectTaskList()//获取任务
|
|
|
+ // setInterval(() => {
|
|
|
+ // if(this.calendarDay == this.getCurrentDataStr()){
|
|
|
+ // this.getAllDanger(this.getCurrentDataStr(),0,0,true);
|
|
|
+ // this.getEventByEventType(this.getCurrentDataStr(),true);
|
|
|
+ // }
|
|
|
+ // }, 10000)
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //警报MP3文件
|
|
|
+ audioSrc:require('@/assets/jingbao.mp3'),
|
|
|
+ calendarDay: this.getCurrentDataStr(),
|
|
|
+ //左侧部门事件数量
|
|
|
+ villageTypeXlList: [],
|
|
|
+ //右侧隐患列表
|
|
|
+ dangerList: [],
|
|
|
+ dangerListnew: [],
|
|
|
+ dangerListAll: [],
|
|
|
+ eventSearch: '',//隐患列表搜索
|
|
|
+ listCurrentIndex1: '',
|
|
|
+ bigEventTypeId: '',
|
|
|
+ smallEventTypeId: '',
|
|
|
+ /** ----------------------------------weosocket开始------------------------------------- */
|
|
|
+ weosocket: false,
|
|
|
+ websock: '',
|
|
|
+ setIntervalWesocketPush: null,
|
|
|
+ /** ----------------------------------weosocket结束------------------------------------- */
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ activePanel: 'key1',
|
|
|
+ isLogin: false,
|
|
|
+ cameraParams: [],
|
|
|
+ ws: null,
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ markersList: [], //点位列表
|
|
|
+ cameraList: [] //摄像头列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** ----------------------------------weosocket开始------------------------------------- */
|
|
|
+ destroyed() { //离开页面关闭Socket连接
|
|
|
+ if (this.websock) {
|
|
|
+ clearInterval(this.setIntervalWesocketPush)
|
|
|
+ this.websock.close()
|
|
|
+ this.websock = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** ----------------------------------weosocket结束------------------------------------- */
|
|
|
+ methods: {
|
|
|
+ searchEvent(eventSearch) {
|
|
|
+ let that = this
|
|
|
+ //隐患列表搜索
|
|
|
+ this.dangerListnew = []
|
|
|
+ if (eventSearch != null && eventSearch != '') {
|
|
|
+ for (var i = 0; i < this.dangerListAll.length; i++) {
|
|
|
+ if (this.dangerListAll[i].reportor.indexOf(eventSearch) > -1) {
|
|
|
+ this.dangerListnew.push(this.dangerListAll[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dangerList = this.dangerListnew
|
|
|
+ } else {
|
|
|
+ this.dangerList = this.dangerListAll
|
|
|
+ }
|
|
|
+ if (this.dangerList != null && this.dangerList.length > 0) {
|
|
|
+ for (let i = 0; i < this.dangerList.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (this.dangerList.length > 200) {
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ if (this.dangerList[i].eventStatusValue == 'forest_event_status_1' && this.dangerList[i].urgeCount == 0) {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-xinshangbao'
|
|
|
+ }
|
|
|
+ if (this.dangerList[i].eventStatusValue == 'forest_event_status_1' && this.dangerList[i].urgeCount > 0) {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-cuiban'
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_2') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-qianshou'
|
|
|
+ markersMap.isAggregation = false
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_5') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-banjie'
|
|
|
+ markersMap.isAggregation = false
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_6') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-guidang'
|
|
|
+ }
|
|
|
+ markersMap.parameter = this.dangerList[i].eventCode
|
|
|
+ markersMap.lng = this.dangerList[i].longitude
|
|
|
+ markersMap.lat = this.dangerList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' + this.dangerList[i].longitude + ',' + this.dangerList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' + this.dangerList[i].eventName + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' + this.dangerList[i].createTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>'
|
|
|
+ if (this.dangerList[i].picturePath != null && this.dangerList[i].picturePath != '' && this.dangerList[i].pictureType=='image') {
|
|
|
+ markersMap.bindPopupHtml += '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ '<img src="' + this.dangerList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>'
|
|
|
+ }
|
|
|
+ markersMap.bindPopupHtml += '</div>'
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }, 2000)
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dropLocation(lat, lng) {
|
|
|
+ this.$refs.supermap.dropLocation(lat, lng)
|
|
|
+ },
|
|
|
+ showEventDialog(eventCode) {
|
|
|
+ //事件信息弹出
|
|
|
+ this.$refs.eventdetailsdialog.showEventDialog(eventCode)
|
|
|
+ },
|
|
|
+ getFirespread(eventCode){
|
|
|
+ this.$refs.firespread.showEventDialog(eventCode);
|
|
|
+ },
|
|
|
+ getCurrentDataStr() {
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let m = date.getMonth() + 1
|
|
|
+ m = m < 10 ? '0' + m : m
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+ return y + '-' + m + '-' + d
|
|
|
+ },
|
|
|
+ selectDay(day) {//日历点击
|
|
|
+ // this.getEventByEventType(day)
|
|
|
+ this.getAllDanger(day,false)
|
|
|
+ this.calendarDay = day
|
|
|
+ },
|
|
|
+
|
|
|
+ selectTaskList() {
|
|
|
+ this.$refs.bottomMenu.selectTaskList()
|
|
|
+ },
|
|
|
+ // getEventByEventType(day,loading) {
|
|
|
+ // let that = this
|
|
|
+ // //左侧获取事件部门数量
|
|
|
+ // getEventByEventType({ day: day },loading).then(res => {
|
|
|
+ // this.villageTypeXlList = res.data
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ getAllDanger(day,loading) {
|
|
|
+ let that = this
|
|
|
+ this.dangerList = []
|
|
|
+ this.dangerListAll = []
|
|
|
+ //右侧获取隐患列表
|
|
|
+ getAllDanger({
|
|
|
+ createTime: day+" 00:00:00"
|
|
|
+ },loading).then(res => {
|
|
|
+ this.dangerList = res.data
|
|
|
+ this.dangerListAll = res.data
|
|
|
+ that.markersList = []
|
|
|
+ if (this.dangerList != null && this.dangerList.length > 0) {
|
|
|
+ if(this.dangerList[0].eventStatusValue == 'forest_event_status_1'){
|
|
|
+ that.$refs.bottomMenu.updateAlert();
|
|
|
+ that.$refs.up.play();
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.dangerList.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (this.dangerList.length > 200) {
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ if (this.dangerList[i].eventStatusValue == 'forest_event_status_1' && this.dangerList[i].urgeCount == 0) {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-xinshangbao'
|
|
|
+ }
|
|
|
+ if (this.dangerList[i].eventStatusValue == 'forest_event_status_1' && this.dangerList[i].urgeCount > 0) {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-cuiban'
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_2') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-qianshou'
|
|
|
+ markersMap.isAggregation = false
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_5') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-banjie'
|
|
|
+ markersMap.isAggregation = false
|
|
|
+ } else if (this.dangerList[i].eventStatusValue == 'forest_event_status_6') {
|
|
|
+ markersMap.click = 'showEventDialog'
|
|
|
+ markersMap.icon = 'sj-icon-map-guidang'
|
|
|
+ }
|
|
|
+ markersMap.parameter = this.dangerList[i].eventCode
|
|
|
+ markersMap.lng = this.dangerList[i].longitude
|
|
|
+ markersMap.lat = this.dangerList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' + this.dangerList[i].longitude + ',' + this.dangerList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' + this.dangerList[i].eventName + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' + this.dangerList[i].createTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>'
|
|
|
+ if (this.dangerList[i].picturePath != null && this.dangerList[i].picturePath != '' && this.dangerList[i].pictureType=='image') {
|
|
|
+ markersMap.bindPopupHtml += '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ '<img src="' + this.dangerList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>'
|
|
|
+ }
|
|
|
+ markersMap.bindPopupHtml += '</div>'
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }, 2000)
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ stopAudio(){
|
|
|
+ this.$refs.up.pause();//停止播放音乐
|
|
|
+ this.$refs.up.currentTime = 0;
|
|
|
+ },
|
|
|
+ /** ----------------------------------weosocket开始------------------------------------- */
|
|
|
+ initWebSocket() { //初始化weosocket
|
|
|
+ const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
|
|
|
+ this.websock = new WebSocket(wsuri)
|
|
|
+ console.log('建立websocket连接')
|
|
|
+ this.websock.onopen = this.websocketonopen
|
|
|
+ this.websock.onmessage = this.websocketonmessage
|
|
|
+ this.websock.onerror = this.websocketonerror
|
|
|
+ this.websock.onclose = this.websocketclose
|
|
|
+ this.websock.onclose = this.websocketclose
|
|
|
+ },
|
|
|
+ websocketonopen() { //连接建立之后执行send方法发送数据
|
|
|
+ console.log('websocket连接成功')
|
|
|
+ this.weosocket = true
|
|
|
+ this.sendPing()
|
|
|
+ },
|
|
|
+ websocketonerror() { //连接建立失败重连
|
|
|
+ this.initWebSocket()
|
|
|
+ },
|
|
|
+ websocketonmessage(e) { //数据接收
|
|
|
+ console.log('接收数据', e.data)
|
|
|
+ },
|
|
|
+ websocketsend(Data) { //数据发送
|
|
|
+ this.websock.send(Data)
|
|
|
+ },
|
|
|
+ websocketclose(e) { //关闭
|
|
|
+ console.log('断开连接', e)
|
|
|
+ // clearInterval(this.setIntervalWesocketPush)
|
|
|
+ this.weosocket = false
|
|
|
+ },
|
|
|
+ /**发送心跳
|
|
|
+ * @param {number} time 心跳间隔毫秒 默认5000
|
|
|
+ * @param {string} ping 心跳名称 默认字符串ping
|
|
|
+ */
|
|
|
+ sendPing(time = 5000, ping = {
|
|
|
+ 'fromId': 'forest',
|
|
|
+ 'fromUserId': Cookies.get('username'),
|
|
|
+ 'toUserId': Cookies.get('username')
|
|
|
+ }) {
|
|
|
+ clearInterval(this.setIntervalWesocketPush)
|
|
|
+ this.websock.send(JSON.stringify(ping))
|
|
|
+ this.setIntervalWesocketPush = setInterval(() => {
|
|
|
+ if (this.weosocket) {
|
|
|
+ this.websock.send(JSON.stringify(ping))
|
|
|
+ } else {
|
|
|
+ this.initWebSocket()
|
|
|
+ }
|
|
|
+ }, time)
|
|
|
+ },
|
|
|
+ /** ----------------------------------weosocket结束------------------------------------- */
|
|
|
+
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+
|
|
|
+ /** ----------------------------------事件弹窗开始------------------------------------- */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /** ----------------------------------事件弹窗结束------------------------------------- */
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ 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
|
|
|
+ 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 rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
