<template>
|
<div>
|
<div id="map_popup_content">
|
<div v-if="detailsPopup"
|
class="divForms-dom"
|
id="divFormsDomBox">
|
<div style='width: 100%; height: 100%;'>
|
<div class="divForms divForms-theme">
|
<div class="divForms-wrap">
|
<div class="area">
|
<div class="arrow-lt"></div>
|
<div class="b-t"></div>
|
<div class="b-r"></div>
|
<div class="b-b"></div>
|
<div class="b-l"></div>
|
<div class="arrow-rb"></div>
|
<div class="label-wrap">
|
<div class="title">
|
{{stateName}}
|
<img v-show="introduceText != null && introduceText != ''"
|
@click="audioPlay"
|
class="audio-control"
|
src="/img/navicon/audio.png"
|
alt="">
|
<img @click="closeMapPopupBox"
|
class="close-box"
|
src="/img/navicon/close.png"
|
alt="">
|
</div>
|
<div class="label-content">
|
<div class="arc-bcg">
|
<img :src="popupBgUrl"
|
alt="">
|
</div>
|
<div v-show="siteName != null && siteName != ''"
|
class="site">
|
<strong>地址：</strong>
|
{{siteName}}
|
</div>
|
<div v-show="telephone != null && telephone != ''"
|
class="phone">
|
<strong>电话：</strong>
|
{{telephone}}
|
</div>
|
<div v-show="introduceText != null && introduceText != ''"
|
class="introduce">
|
<p ref="DomIntroduceText">
|
<strong>介绍：</strong>
|
<span v-html="introduceText"></span>
|
</p>
|
</div>
|
<div class="popup-nav">
|
<ul>
|
<li @click="comeHereClick">
|
<i class="popup-icon come-nav deblurring"></i>
|
到这
|
</li>
|
<li @click="getToHereClick">
|
<i class="popup-icon start-nav deblurring"></i>
|
出发
|
</li>
|
<li @click="qrCodeClick">
|
<i class="popup-icon qr-code-nav deblurring"></i>
|
二维码
|
</li>
|
<li @click="imgsClick">
|
<i class="popup-icon atlas-nav deblurring"></i>
|
图集
|
</li>
|
<li v-show="panoramaUrl != null && panoramaUrl != ''"
|
@click="panoramaClick">
|
<i class="popup-icon live-action-nav deblurring"></i>
|
实景
|
</li>
|
<li v-show="panoramaUrl != null && panoramaUrl != ''"
|
@click="monitorClick">
|
<i class="popup-icon monitor-nav deblurring"></i>
|
监控
|
</li>
|
</ul>
|
</div>
|
<div v-show="teachList.length > 0 || liveList.length > 0"
|
class="arc-box">
|
<ul class="tab-btn">
|
<li v-show="teachList.length > 0"
|
:class="{'on': tabBtnFlag == '教学科研行政'}"
|
@click="tabBtnClick('教学科研行政')">教学科研行政</li>
|
<li v-show="liveList.length > 0"
|
:class="{'on': tabBtnFlag == '生活服务'}"
|
@click="tabBtnClick('生活服务')">生活服务</li>
|
</ul>
|
<div class="btm-content">
|
<div :class="{'on': tabBtnFlag == '教学科研行政'}">
|
<ul>
|
<li v-for="(item, index) in teachList"
|
:key="index"
|
@click="mechanismDetailPopup(0, item)">
|
<i class="popup-icon location-icon deblurring"></i>
|
{{item}}
|
</li>
|
</ul>
|
</div>
|
<div :class="{'on': tabBtnFlag == '生活服务'}">
|
<ul>
|
<li v-for="(item, index) in liveList"
|
:key="index"
|
@click="mechanismDetailPopup(1, item)">
|
<i class="popup-icon location-icon deblurring"></i>
|
{{item}}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="btm-box"></div>
|
</div>
|
</div>
|
</div>
|
<div class="b-t-l"></div>
|
<div class="b-b-r"></div>
|
</div>
|
<div class="arrow"></div>
|
</div>
|
</div>
|
</div>
|
|
<div v-if="panoramaPopup"
|
class="panorama-dom"
|
id="PanoramaBox">
|
<div style="width: 100%; height: 100%;">
|
<div class="panorama-container">
|
<div class="panorama-wrap">
|
<div class="content-wrap">
|
<div class="title">
|
{{stateName}}
|
<img @click="closePanoramaPopupBox"
|
class="close-box"
|
src="/img/navicon/close.png"
|
alt="">
|
</div>
|
<div class="content">
|
<iframe :src="panoramaUrl"
|
frameborder="0"></iframe>
|
</div>
|
</div>
|
</div>
|
<div class="arrow"></div>
|
</div>
|
</div>
|
</div>
|
|
<div v-if="monitorPopup"
|
class="monitor-dom"
|
id="MonitorBox">
|
<div style="width: 100%; height: 100%;">
|
<div class="monitor-container">
|
<div class="monitor-wrap">
|
<div class="content-wrap">
|
<div class="title">
|
{{stateName}}
|
<img @click="closeMonitorPopupBox"
|
class="close-box"
|
src="/img/navicon/close.png"
|
alt="">
|
</div>
|
<div class="content">
|
<video :src="monitorUrl"
|
controls
|
autoplay></video>
|
</div>
|
</div>
|
</div>
|
<div class="arrow"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 二维码弹框相关 -->
|
<el-dialog title="场景二维码"
|
:visible.sync="QRCodeFlag"
|
:modal="false"
|
:modal-append-to-body="false"
|
width='44%'>
|
<div style="margin: 0; position: relative; width: 100%; height: 352px;">
|
<img width="260"
|
:src="pupupQRUrl"
|
alt=""
|
style="position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto">
|
<div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
|
(右键另存为图片)
|
</div>
|
</div>
|
</el-dialog>
|
|
<el-image v-show="false"
|
style="width: 100px; height: 100px"
|
:src="popupImgAtlas[0]"
|
:preview-src-list="popupImgAtlas"
|
ref="popupImgs">
|
</el-image>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getMechanismDetail } from '@/api/pc/public/arc'
|
|
export default {
|
name: 'mapPopup',
|
data () {
|
return {
|
DC: null,
|
tabBtnFlag: '教学科研行政',
|
QRCodeFlag: false,
|
audioSource: '',
|
audioFlag: false,
|
audioCourse: false,
|
audioSynth: null,
|
audioMsg: null
|
}
|
},
|
computed: {
|
...mapGetters([
|
'viewer',
|
'popupBgUrl',
|
'pupupQRUrl',
|
// 终点
|
'terminus',
|
// 起点
|
'startingPoint',
|
// 点信息
|
'pointPosition',
|
// 点名称
|
'stateName',
|
// 地址
|
'siteName',
|
// 电话
|
'telephone',
|
// 介绍
|
'introduceText',
|
// 详情弹框显示关闭
|
'detailsPopup',
|
// 全景地址
|
'panoramaUrl',
|
// 全景弹框显示关闭
|
'panoramaPopup',
|
// 监控地址
|
'monitorUrl',
|
// 监控弹框显示关闭
|
'monitorPopup',
|
|
'popupImgAtlas',
|
// 教学
|
'teachList',
|
// 科研
|
'liveList',
|
// 社区内导航的显示关闭
|
'campusNavFlag'
|
])
|
},
|
created () {
|
this.DC = global.DC
|
|
this.audioSynth = window.speechSynthesis
|
this.audioMsg = new window.SpeechSynthesisUtterance()
|
|
this.audioMsg.onend = function () {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
},
|
watch: {
|
introduceText: {
|
immediate: true,
|
handler (newQuestion, oldQuestion) {
|
this.audioSource = newQuestion
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
}
|
},
|
teachList: {
|
immediate: true,
|
handler (newCode, oldCode) {
|
if (newCode.length > 0) {
|
this.tabBtnFlag = '教学科研行政'
|
}
|
}
|
},
|
liveList: {
|
immediate: true,
|
handler (newCode, oldCode) {
|
if (newCode.length > 0 && this.teachList.length == 0) {
|
this.tabBtnFlag = '生活服务'
|
}
|
}
|
},
|
detailsPopup: {
|
immediate: true,
|
handler (newCode, oldCode) {
|
if (newCode == false) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
} else {
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
}
|
}
|
}
|
},
|
methods: {
|
tabBtnClick (param) {
|
this.tabBtnFlag = param
|
},
|
|
comeHereClick () {
|
this.$store.commit('SET_COMENAME', this.stateName)
|
this.$store.commit('SET_TERMINUS', this.pointPosition)
|
if (this.campusNavFlag == false) this.$store.commit('SET_CAMPUSNAVFLAG', true)
|
},
|
|
getToHereClick () {
|
this.$store.commit('SET_GETTONAME', this.stateName)
|
this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
|
if (this.campusNavFlag == false) this.$store.commit('SET_CAMPUSNAVFLAG', true)
|
},
|
|
qrCodeClick () {
|
this.QRCodeFlag = true
|
},
|
|
imgsClick () {
|
this.$refs.popupImgs.clickHandler()
|
},
|
|
panoramaClick () {
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
|
// eslint-disable-next-line new-cap
|
var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
|
this.viewer.scene.globe.depthTestAgainstTerrain = false
|
// eslint-disable-next-line no-unused-vars
|
var panorama = new this.DC.PanoramaBox(this.viewer, {
|
domId: 'PanoramaBox',
|
position: [
|
positions
|
]
|
})
|
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit('SET_PANORAMAPOPUP', true)
|
},
|
|
monitorClick () {
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
// eslint-disable-next-line new-cap
|
var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
|
this.viewer.scene.globe.depthTestAgainstTerrain = false
|
// eslint-disable-next-line no-unused-vars
|
var monitor = new this.DC.PanoramaBox(this.viewer, {
|
domId: 'MonitorBox',
|
position: [
|
positions
|
]
|
})
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', true)
|
},
|
|
closeMapPopupBox () {
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
}
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
},
|
|
closePanoramaPopupBox () {
|
this.$store.commit('SET_PANORAMAURL', '')
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
},
|
|
closeMonitorPopupBox () {
|
this.$store.commit('SET_MONITORURL', '')
|
this.$store.commit('SET_MONITORPOPUP', false)
|
},
|
|
audioPlay () {
|
if (this.audioFlag == false) {
|
this.audioMsg.text = this.audioSource
|
this.audioSynth.speak(this.audioMsg)
|
this.audioFlag = true
|
this.audioCourse = true
|
} else {
|
if (this.audioCourse == true) {
|
this.audioSynth.pause()
|
this.audioCourse = false
|
} else {
|
this.audioSynth.resume()
|
this.audioCourse = true
|
}
|
}
|
},
|
|
mechanismDetailPopup (num, param) {
|
getMechanismDetail({ num: num, mechanismName: param }).then(res => {
|
var result = res.data.data
|
this.$store.commit('CLEAR_ALL', null)
|
|
var imgArr = result.tpurl.split(',')
|
|
this.$store.commit('SET_POPUPBGURL', imgArr[0])
|
this.$store.commit('SET_POPUPQRURL', result.codeurl)
|
this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
|
this.$store.commit('SET_STATENAME', result.mechanismname)
|
this.$store.commit('SET_SITENAME', result.address)
|
this.$store.commit('SET_TELEPHONE', result.telephone)
|
this.$store.commit('SET_INTRODUCETEXT', result.introduce)
|
this.$store.commit('SET_POPUPIMGATLAS', imgArr)
|
|
if (result.videourl && result.videourl != '') {
|
this.$store.commit('SET_MONITORURL', result.videourl)
|
}
|
|
this.newPopup(result)
|
this.viewer.flyToPosition(
|
new this.DC.Position(Number(result.jd), Number(result.wd), 300, Number(result.heading), Number(result.pitch), Number(result.roll)),
|
function () {
|
},
|
3
|
)
|
})
|
},
|
|
newPopup (item) {
|
const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd)))
|
// eslint-disable-next-line no-unused-vars
|
var popup = new this.DC.DivForms(this.viewer, {
|
domId: 'divFormsDomBox',
|
position: [
|
position
|
]
|
})
|
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit('SET_DETAILSPOPUP', true)
|
}
|
}
|
|
}
|
</script>
|
|
<style>
|
</style>
|
