| | |
| | | <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" |
| | |
| | | @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" |
| | |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div> |
| | | <div :class="{'on': tabBtnFlag == '生活服务'}"> |
| | | <ul> |
| | | <li v-for="(item, index) in liveList" |
| | | :key="index" |
| | | @click="mechanismDetailPopup(1, item)">> |
| | | @click="mechanismDetailPopup(1, item)"> |
| | | <i class="popup-icon location-icon deblurring"></i> |
| | | {{item}} |
| | | </li> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-if="panoramaPopup" |
| | | class="panorama-dom" |
| | | id="PanoramaBox"> |
| | |
| | | </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" |
| | |
| | | style="position: fixed; left: 111111111px;" |
| | | v-html="audioSource" |
| | | @ended="overAudio"> |
| | | |
| | | </audio> |
| | | </div> |
| | | </template> |
| | |
| | | 'telephone', |
| | | // 介绍 |
| | | 'introduceText', |
| | | // 全景地址 |
| | | 'panoramaUrl', |
| | | // 详情弹框显示关闭 |
| | | 'detailsPopup', |
| | | // 全景地址 |
| | | 'panoramaUrl', |
| | | // 全景弹框显示关闭 |
| | | 'panoramaPopup', |
| | | // 监控地址 |
| | | 'monitorUrl', |
| | | // 监控弹框显示关闭 |
| | | 'monitorPopup', |
| | | |
| | | 'popupImgAtlas', |
| | | // 教学 |
| | |
| | | this.DC = global.DC |
| | | }, |
| | | watch: { |
| | | introduceText: function (newQuestion, oldQuestion) { |
| | | var zhText = encodeURI(newQuestion) |
| | | 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}">` |
| | | introduceText: { |
| | | immediate: true, |
| | | handler (newQuestion, oldQuestion) { |
| | | var zhText = encodeURI(newQuestion) |
| | | 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}">` |
| | | } |
| | | }, |
| | | 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 = '生活服务' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | 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.$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 |
| | | // 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 () { |
| | |
| | | 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 () { |
| | |
| | | |
| | | mechanismDetailPopup (num, param) { |
| | | getMechanismDetail({ num: num, mechanismName: param }).then(res => { |
| | | console.log(res) |
| | | var result = res.data.data |
| | | this.$store.commit('CLEAR_ALL', null) |
| | | |
| | |
| | | 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)), |