From 0b9095227438cb35f5a8759aee8f3b32a732151c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 21 Dec 2021 16:42:40 +0800
Subject: [PATCH] 校内机构等模块中弹框封装，及部分接口对接，及部分样式更改
---
src/components/map/component/mapPopup.vue | 179 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 144 insertions(+), 35 deletions(-)
diff --git a/src/components/map/component/mapPopup.vue b/src/components/map/component/mapPopup.vue
index 0eea98a..f96a9e1 100644
--- a/src/components/map/component/mapPopup.vue
+++ b/src/components/map/component/mapPopup.vue
@@ -17,6 +17,14 @@
<div class="label-wrap">
<div class="title">
{{stateName}}
+ <img @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">
@@ -25,13 +33,19 @@
</div>
<div v-show="siteName != null && siteName != ''"
class="site">
- <strong>地址:</strong>{{siteName}}
+ <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>
- <strong>介绍:</strong>
- {{introduceText}}
+ <p ref="DomIntroduceText">
+ <strong>介绍：</strong>
+ <span v-html="introduceText"></span>
</p>
</div>
<div class="popup-nav">
@@ -59,33 +73,33 @@
</li>
</ul>
</div>
- <div class="arc-box">
+ <div v-show="teachList.length > 0 || liveList.length > 0"
+ class="arc-box">
<ul class="tab-btn">
- <li class="on">教学科研行政</li>
- <li>生活服务</li>
+ <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">
<ul>
- <li>
+ <li v-for="(item, index) in teachList"
+ :key="index"
+ @click="mechanismDetailPopup(item)">
<i class="popup-icon location-icon deblurring"></i>
- 教学楼
- </li>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 教学楼
+ {{item}}
</li>
</ul>
</div>
<div>
<ul>
- <li>
+ <li v-for="(item, index) in liveList"
+ :key="index">
<i class="popup-icon location-icon deblurring"></i>
- 生活楼
- </li>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 生活楼
+ {{item}}
</li>
</ul>
</div>
@@ -111,6 +125,10 @@
<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"
@@ -146,8 +164,8 @@
<el-image v-show="false"
style="width: 100px; height: 100px"
- :src="url"
- :preview-src-list="srcList"
+ :src="popupImgAtlas[0]"
+ :preview-src-list="popupImgAtlas"
ref="popupImgs">
</el-image>
@@ -155,26 +173,32 @@
:comeName="comeName"
:getToName="getToName"
v-show="campusNavFlag" />
+
+ <audio ref="audioControlPlay"
+ style="position: fixed; left: 111111111px;"
+ v-html="audioSource"
+ @ended="overAudio">
+
+ </audio>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
+import { getMechanismDetail } from '@/api/pc/public/arc'
export default {
name: 'mapPopup',
data () {
return {
DC: null,
+ tabBtnFlag: '教学科研行政',
campusNavFlag: false,
comeName: '',
getToName: '',
QRCodeFlag: false,
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
- srcList: [
- 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
- 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
- ]
+ audioSource: '',
+ audioFlag: false
}
},
computed: {
@@ -192,6 +216,8 @@
'stateName',
// 地址
'siteName',
+ // 电话
+ 'telephone',
// 介绍
'introduceText',
// 全景地址
@@ -199,21 +225,23 @@
// 详情弹框显示关闭
'detailsPopup',
// 全景弹框显示关闭
- 'panoramaPopup'
+ 'panoramaPopup',
+
+ 'popupImgAtlas',
+ // 教学
+ 'teachList',
+ // 科研
+ 'liveList'
])
},
created () {
this.DC = global.DC
-
- this.$nextTick(() => {
- $('#map_popup_content').on('click', '.tab-btn li', function (e) {
- $(this).addClass('on').siblings().removeClass('on')
-
- $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
- })
- })
},
methods: {
+ tabBtnClick (param) {
+ this.tabBtnFlag = param
+ },
+
closeCampusNav () {
this.campusNavFlag = false
this.$refs.campusNavRoute.clearLayer()
@@ -244,6 +272,10 @@
},
panoramaClick () {
+ if (this.audioFlag == true) {
+ this.$refs.audioControlPlay.pause()
+ this.audioFlag = 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
@@ -256,6 +288,83 @@
})
this.$store.commit('SET_DETAILSPOPUP', false)
this.$store.commit('SET_PANORAMAPOPUP', true)
+ },
+
+ closeMapPopupBox () {
+ if (this.audioFlag == true) {
+ this.$refs.audioControlPlay.pause()
+ this.audioFlag = false
+ }
+ this.audioSource = ''
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ },
+
+ closePanoramaPopupBox () {
+ this.$store.commit('SET_PANORAMAURL', '')
+ this.$store.commit('SET_PANORAMAPOPUP', 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()
+ this.audioFlag = true
+ } else {
+ if (this.audioFlag == true) {
+ this.$refs.audioControlPlay.pause()
+ this.audioFlag = false
+ } else {
+ this.$refs.audioControlPlay.play()
+ this.audioFlag = true
+ }
+ }
+ },
+
+ overAudio () {
+ this.audioFlag = false
+ },
+
+ mechanismDetailPopup (param) {
+ getMechanismDetail({ mechanismname: param }).then(res => {
+ console.log(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)
+
+ 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 () {
+ },
+ 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)))
+ // 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_DETAILSPOPUP', true)
}
}
--
Gitblit v1.9.3