From 0fa88f9c2e3c8ce335e7cd6dfc6c8e5641950735 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Feb 2022 15:53:24 +0800
Subject: [PATCH] +弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改
---
src/components/map/components/mapPopup.vue | 335 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 244 insertions(+), 91 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index c5209fc..743a336 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -4,7 +4,7 @@
<div v-if="detailsPopup"
class="divForms-dom"
id="divFormsDomBox">
- <div style='width: 100%; height: 100%;'>
+ <div style="width: 100%; height: 100%;">
<div class="divForms divForms-theme">
<div class="divForms-wrap">
<div class="area">
@@ -16,31 +16,31 @@
<div class="arrow-rb"></div>
<div class="label-wrap">
<div class="title">
- {{stateName}}
+ {{ stateName }}
<img v-show="introduceText != null && introduceText != ''"
@click="audioPlay"
class="audio-control"
src="/img/navicon/audio.png"
- alt="">
+ alt="" />
<img @click="closeMapPopupBox"
class="close-box"
src="/img/navicon/close.png"
- alt="">
+ alt="" />
</div>
<div class="label-content">
<div class="arc-bcg">
<img :src="popupBgUrl"
- alt="">
+ alt="" />
</div>
<div v-show="siteName != null && siteName != ''"
class="site">
<strong>地址：</strong>
- {{siteName}}
+ {{ siteName }}
</div>
<div v-show="telephone != null && telephone != ''"
class="phone">
<strong>电话：</strong>
- {{telephone}}
+ {{ telephone }}
</div>
<div v-show="introduceText != null && introduceText != ''"
class="introduce">
@@ -59,7 +59,8 @@
<i class="popup-icon start-nav deblurring"></i>
出发
</li>
- <li @click="qrCodeClick">
+ <li v-show="false"
+ @click="qrCodeClick">
<i class="popup-icon qr-code-nav deblurring"></i>
二维码
</li>
@@ -72,35 +73,46 @@
<i class="popup-icon live-action-nav deblurring"></i>
实景
</li>
+ <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
+ <li v-show="false"
+ @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>
+ :class="{ on: tabBtnFlag == '教学科研行政' }"
+ @click="tabBtnClick('教学科研行政')">
+ 教学科研行政
+ </li>
<li v-show="liveList.length > 0"
- :class="{'on': tabBtnFlag == '生活服务'}"
- @click="tabBtnClick('生活服务')">生活服务</li>
+ :class="{ on: tabBtnFlag == '生活服务' }"
+ @click="tabBtnClick('生活服务')">
+ 生活服务
+ </li>
</ul>
<div class="btm-content">
- <div class="on">
+ <div :class="{ on: tabBtnFlag == '教学科研行政' }">
<ul>
<li v-for="(item, index) in teachList"
:key="index"
- @click="mechanismDetailPopup(item)">
+ @click="mechanismDetailPopup(0, item)">
<i class="popup-icon location-icon deblurring"></i>
- {{item}}
+ {{ item }}
</li>
</ul>
</div>
- <div>
+ <div :class="{ on: tabBtnFlag == '生活服务' }">
<ul>
<li v-for="(item, index) in liveList"
- :key="index">
+ :key="index"
+ @click="mechanismDetailPopup(1, item)">
<i class="popup-icon location-icon deblurring"></i>
- {{item}}
+ {{ item }}
</li>
</ul>
</div>
@@ -117,23 +129,58 @@
</div>
</div>
</div>
+
<div v-if="panoramaPopup"
class="panorama-dom"
+ :class="{'change-full': fullscreen}"
id="PanoramaBox">
<div style="width: 100%; height: 100%;">
<div class="panorama-container">
<div class="panorama-wrap">
- <div class="content-wrap">
+ <div class="content-wrap"
+ :class="{'change-full': fullscreen}"
+ id="FullScreenBox">
<div class="title">
- {{stateName}}
+ {{ stateName }}
+ <img @click="screen"
+ class="full-srceen-btn"
+ :src="fullScreenUrl"
+ alt="" />
<img @click="closePanoramaPopupBox"
class="close-box"
src="/img/navicon/close.png"
- alt="">
+ alt="" />
</div>
<div class="content">
- <iframe :src="panoramaUrl"
+ <iframe allowfullscreen="true"
+ :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>
@@ -146,7 +193,9 @@
<!-- 二维码弹框相关 -->
<el-dialog title="场景二维码"
:visible.sync="QRCodeFlag"
- width='44%'>
+ :modal="false"
+ :modal-append-to-body="false"
+ width="44%">
<div style="margin: 0; position: relative; width: 100%; height: 352px;">
<img width="260"
:src="pupupQRUrl"
@@ -156,7 +205,7 @@
left: 0;
right: 0;
bottom: 0;
- margin: auto">
+ margin: auto" />
<div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
(右键另存为图片)
</div>
@@ -169,18 +218,6 @@
:preview-src-list="popupImgAtlas"
ref="popupImgs">
</el-image>
-
- <campusNav ref="campusNavRoute"
- :comeName="comeName"
- :getToName="getToName"
- v-show="campusNavFlag" />
-
- <audio ref="audioControlPlay"
- style="position: fixed; left: 111111111px;"
- v-html="audioSource"
- @ended="overAudio">
-
- </audio>
</div>
</template>
@@ -194,12 +231,14 @@
return {
DC: null,
tabBtnFlag: '教学科研行政',
- campusNavFlag: false,
- comeName: '',
- getToName: '',
QRCodeFlag: false,
audioSource: '',
- audioFlag: false
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+ fullscreen: false,
+ fullScreenUrl: '/img/icon/bigScreen.png'
}
},
computed: {
@@ -221,47 +260,119 @@
'telephone',
// 介绍
'introduceText',
- // 全景地址
- 'panoramaUrl',
// 详情弹框显示关闭
'detailsPopup',
+ // 全景地址
+ 'panoramaUrl',
// 全景弹框显示关闭
'panoramaPopup',
+ // 监控地址
+ 'monitorUrl',
+ // 监控弹框显示关闭
+ 'monitorPopup',
'popupImgAtlas',
// 教学
'teachList',
// 科研
- 'liveList'
+ '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
+ }
+ },
+ mounted () {
+
+ },
+ 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: {
+ screen () {
+ if (this.fullscreen) {
+ this.fullScreenUrl = '/img/icon/bigScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9999
+ } else {
+ this.fullScreenUrl = '/img/icon/smallScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9
+ }
+ },
+
tabBtnClick (param) {
this.tabBtnFlag = param
},
- closeCampusNav () {
- this.campusNavFlag = false
- this.$refs.campusNavRoute.clearLayer()
- this.$store.commit('SET_STARTINGPOINT', null)
- this.$store.commit('SET_TERMINUS', null)
- this.comeName = ''
- this.getToName = ''
- },
-
comeHereClick () {
- this.comeName = this.stateName
+ this.$store.commit('SET_COMENAME', this.stateName)
this.$store.commit('SET_TERMINUS', this.pointPosition)
- if (this.campusNavFlag == false) this.campusNavFlag = true
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
},
getToHereClick () {
- this.getToName = this.stateName
+ this.$store.commit('SET_GETTONAME', this.stateName)
this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
- if (this.campusNavFlag == false) this.campusNavFlag = true
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
},
qrCodeClick () {
@@ -274,29 +385,56 @@
panoramaClick () {
if (this.audioFlag == true) {
- this.$refs.audioControlPlay.pause()
+ 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))
+ var positions = this.DC.Transform.transformWGS84ToCartesian(
+ // eslint-disable-next-line new-cap
+ 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
- ]
+ 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(
+ // eslint-disable-next-line new-cap
+ 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.$refs.audioControlPlay.pause()
+ this.audioSynth.cancel()
this.audioFlag = false
+ this.audioCourse = false
}
- this.audioSource = ''
this.$store.commit('SET_DETAILSPOPUP', false)
},
@@ -305,31 +443,30 @@
this.$store.commit('SET_PANORAMAPOPUP', false)
},
+ closeMonitorPopupBox () {
+ this.$store.commit('SET_MONITORURL', '')
+ this.$store.commit('SET_MONITORPOPUP', false)
+ },
+
audioPlay () {
- if (this.audioSource == '') {
- var zhText = encodeURI(this.$refs.DomIntroduceText.innerText)
- this.audioSource = `<source src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=${zhText}" type="audio/mpeg"><embed height="0" width="0" src="http://tts.baidu.com/text2audio?text=${zhText}">`
- console.log(this.audioSource)
- this.$refs.audioControlPlay.play()
+ if (this.audioFlag == false) {
+ this.audioMsg.text = this.audioSource
+ this.audioSynth.speak(this.audioMsg)
this.audioFlag = true
+ this.audioCourse = true
} else {
- if (this.audioFlag == true) {
- this.$refs.audioControlPlay.pause()
- this.audioFlag = false
+ if (this.audioCourse == true) {
+ this.audioSynth.pause()
+ this.audioCourse = false
} else {
- this.$refs.audioControlPlay.play()
- this.audioFlag = true
+ this.audioSynth.resume()
+ this.audioCourse = true
}
}
},
- overAudio () {
- this.audioFlag = false
- },
-
- mechanismDetailPopup (param) {
- getMechanismDetail({ mechanismname: param }).then(res => {
- console.log(res)
+ mechanismDetailPopup (num, param) {
+ getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
var result = res.data.data
this.$store.commit('CLEAR_ALL', null)
@@ -337,40 +474,56 @@
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_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), 3000, Number(result.heading), Number(result.pitch), Number(result.roll)),
- function () {
- },
+ 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), Number(item.heading), Number(item.pitch), Number(item.roll)))
+ 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
- ]
+ position: [position]
})
this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
this.$store.commit('SET_DETAILSPOPUP', true)
}
}
-
}
</script>
-<style>
-</style>
+<style></style>
--
Gitblit v1.9.3