样式修改

shuishen

2022-02-15 5cf33b2b4217dbe50e7fa0599e09e0ee8ae63db4

 src/components/map/components/mapPopup.vue

@@ -1,9 +1,7 @@
<template>
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup"
                 class="divForms-dom"
                 id="divFormsDomBox">
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div style="width: 100%; height: 100%;">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
@@ -17,33 +15,42 @@
                                <div class="label-wrap">
                                    <div class="title">
                                        {{ stateName }}
                                        <img v-show="introduceText != null && introduceText != ''"
                                             @click="audioPlay"
                                             class="audio-control"
                                             src="/img/navicon/audio.png"
                                             alt="" />
                                        <img @click="closeMapPopupBox"
                                             class="close-box"
                                             src="/img/navicon/close.png"
                                             alt="" />
                                        <img
                                            v-show="introduceText != null && introduceText != ''"
                                            @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">
                                            <img :src="popupBgUrl"
                                                 alt="" />
                                            <img :src="popupBgUrl" alt />
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                        <div
                                            v-show="siteName != null && siteName != ''"
                                            class="site"
                                        >
                                            <strong>地址：</strong>
                                            {{ siteName }}
                                        </div>
                                        <div v-show="telephone != null && telephone != ''"
                                             class="phone">
                                        <div
                                            v-show="telephone != null && telephone != ''"
                                            class="phone"
                                        >
                                            <strong>电话：</strong>
                                            {{ telephone }}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                        <div
                                            v-show="introduceText != null && introduceText != ''"
                                            class="introduce"
                                        >
                                            <p ref="DomIntroduceText">
                                                <strong>介绍：</strong>
                                                <span v-html="introduceText"></span>
@@ -59,7 +66,7 @@
                                                    <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>
@@ -67,49 +74,63 @@
                                                    <i class="popup-icon atlas-nav deblurring"></i>
                                                    图集
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick">
                                                    <i class="popup-icon live-action-nav deblurring"></i>
                                                <li
                                                    v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick"
                                                >
                                                    <i
                                                        class="popup-icon live-action-nav deblurring"
                                                    ></i>
                                                    实景
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="monitorClick">
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                                                <li v-show="false" @click="monitorClick">
                                                    <i class="popup-icon monitor-nav deblurring"></i>
                                                    监控
                                                </li>
                                            </ul>
                                        </div>
                                        <div v-show="teachList.length > 0 || liveList.length > 0"
                                             class="arc-box">
                                        <div
                                            v-show="teachList.length > 0 || liveList.length > 0"
                                            class="arc-box"
                                        >
                                            <ul class="tab-btn">
                                                <li v-show="teachList.length > 0"
                                                <li
                                                    v-show="teachList.length > 0"
                                                    :class="{ on: tabBtnFlag == '教学科研行政' }"
                                                    @click="tabBtnClick('教学科研行政')">
                                                    教学科研行政
                                                </li>
                                                <li v-show="liveList.length > 0"
                                                    @click="tabBtnClick('教学科研行政')"
                                                >教学科研行政</li>
                                                <li
                                                    v-show="liveList.length > 0"
                                                    :class="{ on: tabBtnFlag == '生活服务' }"
                                                    @click="tabBtnClick('生活服务')">
                                                    生活服务
                                                </li>
                                                    @click="tabBtnClick('生活服务')"
                                                >生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div :class="{ on: tabBtnFlag == '教学科研行政' }">
                                                    <ul>
                                                        <li v-for="(item, index) in teachList"
                                                        <li
                                                            v-for="(item, index) in teachList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(0, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            @click="mechanismDetailPopup(0, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div :class="{ on: tabBtnFlag == '生活服务' }">
                                                    <ul>
                                                        <li v-for="(item, index) in liveList"
                                                        <li
                                                            v-for="(item, index) in liveList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(1, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            @click="mechanismDetailPopup(1, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
@@ -128,30 +149,41 @@
                </div>
            </div>

            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
            <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 }}
                                    <img @click="closePanoramaPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="" />
                                    <img
                                        @click="screen"
                                        class="full-srceen-btn"
                                        :src="fullScreenUrl"
                                        alt
                                    />
                                    <img
                                        @click="closePanoramaPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content"
                                     id="FullScreenBox">
                                    <button type="button"
                                            @click="screen">
                                        <img :src="fullScreenUrl"
                                             alt="" />
                                    </button>
                                    <iframe allowfullscreen="true"
                                            :src="panoramaUrl"
                                            frameborder="0"></iframe>
                                <div class="content">
                                    <iframe
                                        allowfullscreen="true"
                                        :src="panoramaUrl"
                                        frameborder="0"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
@@ -160,26 +192,63 @@
                </div>
            </div>

            <div v-if="monitorPopup"
                 class="monitor-dom"
                 id="MonitorBox">
            <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="" />
                                    <img
                                        @click="closeMonitorPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <video :src="monitorUrl"
                                           controls
                                           autoplay></video>
                                    <video :src="monitorUrl" controls autoplay></video>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>

            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%;">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        地图标记
                                        <img
                                            @click="closeAddTagBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content">
                                        <div>
                                            <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
                                        </div>
                                        <div>
                                            <el-button type="primary" @click="createTag">生成标记</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
@@ -188,33 +257,38 @@
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   :modal="false"
                   :modal-append-to-body="false"
                   width="44%">
        <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"
                     :src="pupupQRUrl"
                     alt=""
                     style="position: absolute;
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto" />
                <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
                    (右键另存为图片)
                </div>
                    margin: auto"
                />
                <div
                    style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;"
                >(右键另存为图片)</div>
            </div>
        </el-dialog>

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="popupImgAtlas[0]"
                  :preview-src-list="popupImgAtlas"
                  ref="popupImgs">
        </el-image>
        <el-image
            v-show="false"
            style="width: 100px; height: 100px"
            :src="popupImgAtlas[0]"
            :preview-src-list="popupImgAtlas"
            ref="popupImgs"
        ></el-image>
    </div>
</template>

@@ -235,7 +309,9 @@
            audioSynth: null,
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png'
            fullScreenUrl: '/img/icon/bigScreen.png',
            addTagName: '',
            addTagLayer: null
        }
    },
    computed: {
@@ -274,7 +350,9 @@
            // 科研
            'liveList',
            // 社区内导航的显示关闭
            'campusNavFlag'
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition'
        ])
    },
    created () {
@@ -290,31 +368,7 @@
        }
    },
    mounted () {
        var that = this
        this.$nextTick(() => {
            window.onresize = function () {
                if (!checkFull()) {
                    // 要执行的动作
                    that.fullScreenUrl = '/img/icon/bigScreen.png'

                    if (document.documentElement.requestFullScreen) {
                        document.exitFullScreen()
                    } else if (document.documentElement.webkitRequestFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.mozCancelFullScreen()
                    }
                    that.fullscreen = false
                }
            }

            function checkFull () {
                return document.fullscreenElement ||
                    document.msFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement || false
            }
        })
    },
    watch: {
        introduceText: {
@@ -363,29 +417,16 @@
    },
    methods: {
        screen () {
            const element = document.getElementById('FullScreenBox')
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen

                if (document.documentElement.requestFullScreen) {
                    document.exitFullScreen()
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen()
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.mozCancelFullScreen()
                }
                document.getElementById('pcElHeader').style.zIndex = 9999
            } else {
                this.fullScreenUrl = '/img/icon/smallScreen.png'
                this.fullscreen = !this.fullscreen

                if (element.requestFullScreen) {
                    element.requestFullScreen()
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen()
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen()
                }
                document.getElementById('pcElHeader').style.zIndex = 9
            }
        },

@@ -426,6 +467,7 @@

            // eslint-disable-next-line new-cap
            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
@@ -448,6 +490,7 @@
            }
            // eslint-disable-next-line new-cap
            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
@@ -468,6 +511,47 @@
                this.audioCourse = false
            }
            this.$store.commit('SET_DETAILSPOPUP', false)
        },

        // 新增标记相关事件
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
        },

        createTag () {
            var that = this

            console.log(this.RemoveTheBlank(this.addTagName))

            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
            }

            this.$store.commit('SET_ADDTAGPOPUP', false)

            if (this.addTagLayer == null) {
                this.addTagLayer = new this.DC.HtmlLayer('addTagLayer')
                this.viewer.addLayer(this.addTagLayer)
            }

            const divIcon = new this.DC.DivIcon(
                new that.DC.Position(Number(that.addTagPosition.lng), Number(that.addTagPosition.lat), 0),
                `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${that.addTagName}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
            )

            this.addTagName = ''

            this.addTagLayer.addOverlay(divIcon)
        },

        closePanoramaPopupBox () {
@@ -553,6 +637,13 @@
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        },

        /**
        * 删除左右两端的空格
        */
        RemoveTheBlank (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        }
    }
}