+弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改

liuyg

2022-02-09 0fa88f9c2e3c8ce335e7cd6dfc6c8e5641950735

 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,7 +73,8 @@
                                                    <i class="popup-icon live-action-nav deblurring"></i>
                                                    实景
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                                                <li v-show="false"
                                                    @click="monitorClick">
                                                    <i class="popup-icon monitor-nav deblurring"></i>
                                                    监控
@@ -83,30 +85,34 @@
                                             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': tabBtnFlag == '教学科研行政'}">
                                                <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}}
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div :class="{'on': tabBtnFlag == '生活服务'}">
                                                <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}}
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
@@ -126,20 +132,28 @@

            <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>
@@ -157,11 +171,11 @@
                        <div class="monitor-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                    {{ stateName }}
                                    <img @click="closeMonitorPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                         alt="" />
                                </div>
                                <div class="content">
                                    <video :src="monitorUrl"
@@ -181,7 +195,7 @@
                   :visible.sync="QRCodeFlag"
                   :modal="false"
                   :modal-append-to-body="false"
                   width='44%'>
                   width="44%">
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
                <img width="260"
                     :src="pupupQRUrl"
@@ -191,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>
@@ -204,12 +218,6 @@
                  :preview-src-list="popupImgAtlas"
                  ref="popupImgs">
        </el-image>

        <audio ref="audioControlPlay"
               style="position: fixed; left: 111111111px;"
               v-html="audioSource"
               @ended="overAudio">
        </audio>
    </div>
</template>

@@ -225,7 +233,12 @@
            tabBtnFlag: '教学科研行政',
            QRCodeFlag: false,
            audioSource: '',
            audioFlag: false
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png'
        }
    },
    computed: {
@@ -269,13 +282,29 @@
    },
    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) {
                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}">`
                this.audioSource = newQuestion
                if (this.audioFlag == true) {
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
                }
            }
        },
        teachList: {
@@ -293,9 +322,39 @@
                    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
        },
@@ -303,13 +362,17 @@
        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)
            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)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

        qrCodeClick () {
@@ -322,18 +385,21 @@

        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)
@@ -343,18 +409,20 @@

        monitorClick () {
            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 monitor = new this.DC.PanoramaBox(this.viewer, {
                domId: 'MonitorBox',
                position: [
                    positions
                ]
                position: [positions]
            })
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', false)
@@ -363,10 +431,10 @@

        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)
        },

@@ -381,28 +449,24 @@
        },

        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}">`
                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 (num, param) {
            getMechanismDetail({ num: num, mechanismName: param }).then(res => {
            getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
                var result = res.data.data
                this.$store.commit('CLEAR_ALL', null)

@@ -410,7 +474,14 @@

                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)
@@ -423,22 +494,28 @@

                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)))
            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)
@@ -446,9 +523,7 @@
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }

}
</script>

<style>
</style>
<style></style>