+

liuyg

2021-12-31 6851cc1e217a2af9ae62ebb3bf28e00a0d8ddadb

 src/components/map/components/mapPopup.vue

@@ -72,6 +72,11 @@
                                                    <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"
@@ -85,20 +90,21 @@
                                                    @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}}
                                                        </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}}
                                                        </li>
@@ -117,6 +123,7 @@
                    </div>
                </div>
            </div>

            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
@@ -141,11 +148,39 @@
                    </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"
@@ -170,16 +205,10 @@
                  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,9 +223,6 @@
        return {
            DC: null,
            tabBtnFlag: '教学科研行政',
            campusNavFlag: false,
            comeName: '',
            getToName: '',
            QRCodeFlag: false,
            audioSource: '',
            audioFlag: false
@@ -221,47 +247,69 @@
            'telephone',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景地址
            'panoramaUrl',
            // 全景弹框显示关闭
            'panoramaPopup',
            // 监控地址
            'monitorUrl',
            // 监控弹框显示关闭
            'monitorPopup',

            'popupImgAtlas',
            // 教学
            'teachList',
            // 科研
            'liveList'
            'liveList',
            // 校内导航的显示关闭
            'campusNavFlag'
        ])
    },
    created () {
        this.DC = global.DC
    },
    watch: {
        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: {
        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 () {
@@ -287,8 +335,30 @@
                    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 () {
@@ -305,11 +375,15 @@
            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()
                this.audioFlag = true
            } else {
@@ -327,9 +401,8 @@
            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)

@@ -344,6 +417,10 @@
                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)),