地图部分修改

shuishen

2022-03-05 ebc12b5f54c664bfd06e884dc2040223392558f8

 src/components/map/components/mapPopup.vue

@@ -2,7 +2,7 @@
    <div>
        <div id="map_popup_content">
            <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">
@@ -152,15 +152,15 @@
            <div
                v-if="panoramaPopup"
                class="panorama-dom"
                :class="{'change-full': fullscreen}"
                :class="{ 'change-full': fullscreen }"
                id="PanoramaBox"
            >
                <div style="width: 100%; height: 100%;">
                <div style="width: 100%; height: 100%">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div
                                class="content-wrap"
                                :class="{'change-full': fullscreen}"
                                :class="{ 'change-full': fullscreen }"
                                id="FullScreenBox"
                            >
                                <div class="title">
@@ -193,7 +193,7 @@
            </div>

            <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
                <div style="width: 100%; height: 100%;">
                <div style="width: 100%; height: 100%">
                    <div class="monitor-container">
                        <div class="monitor-wrap">
                            <div class="content-wrap">
@@ -217,7 +217,7 @@
            </div>

            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%;">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -254,6 +254,46 @@
                    </div>
                </div>
            </div>

            <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
                <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">
                                        {{ nowlabelLayerData.name }} &nbsp; 二维码分享
                                        <img
                                            @click="closelabelLayerid"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content" style="height: 250px">
                                        <!-- data:image/png;base64, -->
                                        <img
                                            :src="nowlabelLayerData.qrcode"
                                            alt
                                            class="labelLayeridewm"
                                            style="width: 250px; height: 250px"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 二维码弹框相关 -->
@@ -264,20 +304,28 @@
            :modal-append-to-body="false"
            width="44%"
        >
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
            <div style="margin: 0; position: relative; width: 100%; height: 352px">
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto"
                    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;"
                    style="
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 36px;
            text-align: center;
          "
                >(右键另存为图片)</div>
            </div>
        </el-dialog>
@@ -295,6 +343,7 @@
<script>
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'
import { setlabel } from '@/api/pc/label'

export default {
    name: 'mapPopup',
@@ -349,10 +398,13 @@
            'teachList',
            // 科研
            'liveList',
            // 社区内导航的显示关闭
            // 校区内导航的显示关闭
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition'
            'addTagPosition',
            // 自定义标签弹窗
            'labelLayerDataShow',
            'nowlabelLayerData'
        ])
    },
    created () {
@@ -367,10 +419,14 @@
            this.audioCourse = false
        }
    },
    mounted () {

    },
    mounted () { },
    watch: {
        addTagPopup () {
            if (!this.addTagPopup) {
                // console.log("取消", "see");
                this.$store.commit('set_closeMapClick', false)
            }
        },
        introduceText: {
            immediate: true,
            handler (newQuestion, oldQuestion) {
@@ -517,34 +573,76 @@
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
        },

        closelabelLayerid () {
            this.$store.commit('openLabelLayer', {
                show: false
            })
        },
        createTag () {
            var that = this

            this.$store.commit('SET_ADDTAGPOPUP', false)
            //   console.log(this.RemoveTheBlank(this.addTagName));

            if (this.addTagLayer == null) {
                this.addTagLayer = new this.DC.HtmlLayer('addTagLayer')
                this.viewer.addLayer(this.addTagLayer)
            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
            }

            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.$store.commit('SET_ADDTAGPOPUP', false)

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

            this.addTagLayer.addOverlay(divIcon)
            // 2022.3.2对接接口
            // 新增标签
            const data = {
                name: this.RemoveTheBlank(this.addTagName),
                jd: this.addTagPosition.lng,
                wd: this.addTagPosition.lat
            }
            //   console.log(data);
            setlabel(data).then((res) => {
                console.log(res)
                if (res.data.code == 200) {
                    doit()
                    that.$message({
                        message: '新增标签成功',
                        type: 'success'
                    })
                } else {
                    that.$message({
                        message: '新增标签失败',
                        type: 'warning'
                    })
                }
                that.addTagName = ''
            })
            const doit = () => {
                that.$store.dispatch('addLabelLayerIcon', {
                    // list: [data],
                    add: true
                })
                // 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.addTagLayer.addOverlay(divIcon);
            }
        },

        closePanoramaPopupBox () {
@@ -630,9 +728,21 @@
            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, '')
        }
    }
}
</script>

<style></style>
<style>
.labelLayeridewm {
    width: 250px !important;
    height: 250px !important;
}
</style>