校内机构等模块中弹框封装，及部分接口对接，及部分样式更改

shuishen

2021-12-21 0b9095227438cb35f5a8759aee8f3b32a732151c

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