From ebc12b5f54c664bfd06e884dc2040223392558f8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 05 Mar 2022 17:47:19 +0800
Subject: [PATCH] 地图部分修改
---
src/components/map/components/mapPopup.vue | 190 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 150 insertions(+), 40 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index cbb4d82..1553ac3 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/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 }} 二维码分享
+ <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>
--
Gitblit v1.9.3