From 5cf33b2b4217dbe50e7fa0599e09e0ee8ae63db4 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 15 Feb 2022 15:33:02 +0800
Subject: [PATCH] 样式修改
---
src/components/map/components/mapPopup.vue | 399 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 286 insertions(+), 113 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 675dd4e..07cf8f9 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,10 +1,8 @@
<template>
<div>
<div id="map_popup_content">
- <div v-if="detailsPopup"
- class="divForms-dom"
- id="divFormsDomBox">
- <div style='width: 100%; height: 100%;'>
+ <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
+ <div style="width: 100%; height: 100%;">
<div class="divForms divForms-theme">
<div class="divForms-wrap">
<div class="area">
@@ -16,34 +14,43 @@
<div class="arrow-rb"></div>
<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="">
+ {{ 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
+ />
</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}}
+ {{ siteName }}
</div>
- <div v-show="telephone != null && telephone != ''"
- class="phone">
+ <div
+ v-show="telephone != null && telephone != ''"
+ class="phone"
+ >
<strong>电话：</strong>
- {{telephone}}
+ {{ 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,46 +74,64 @@
<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"
- :class="{'on': tabBtnFlag == '教学科研行政'}"
- @click="tabBtnClick('教学科研行政')">教学科研行政</li>
- <li v-show="liveList.length > 0"
- :class="{'on': tabBtnFlag == '生活服务'}"
- @click="tabBtnClick('生活服务')">生活服务</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': tabBtnFlag == '教学科研行政'}">
+ <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>
- {{item}}
+ @click="mechanismDetailPopup(0, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
</li>
</ul>
</div>
- <div :class="{'on': tabBtnFlag == '生活服务'}">
+ <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>
- {{item}}
+ @click="mechanismDetailPopup(1, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
</li>
</ul>
</div>
@@ -124,23 +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="">
+ {{ stateName }}
+ <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">
- <iframe :src="panoramaUrl"
- frameborder="0"></iframe>
+ <iframe
+ allowfullscreen="true"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
</div>
</div>
</div>
@@ -149,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="">
+ {{ stateName }}
+ <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>
@@ -177,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>
@@ -222,7 +307,11 @@
audioFlag: false,
audioCourse: false,
audioSynth: null,
- audioMsg: null
+ audioMsg: null,
+ fullscreen: false,
+ fullScreenUrl: '/img/icon/bigScreen.png',
+ addTagName: '',
+ addTagLayer: null
}
},
computed: {
@@ -261,7 +350,9 @@
// 科研
'liveList',
// 社区内导航的显示关闭
- 'campusNavFlag'
+ 'campusNavFlag',
+ 'addTagPopup',
+ 'addTagPosition'
])
},
created () {
@@ -275,6 +366,9 @@
this.audioFlag = false
this.audioCourse = false
}
+ },
+ mounted () {
+
},
watch: {
introduceText: {
@@ -322,6 +416,20 @@
}
},
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
},
@@ -329,13 +437,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 () {
@@ -354,14 +466,15 @@
}
// 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)
@@ -376,14 +489,15 @@
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)
@@ -397,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 () {
@@ -427,7 +582,7 @@
},
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)
@@ -435,7 +590,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)
@@ -448,32 +610,43 @@
this.newPopup(result)
this.viewer.flyToPosition(
- new this.DC.Position(Number(result.jd), Number(result.wd), 300, 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)
this.$store.commit('SET_MONITORPOPUP', false)
this.$store.commit('SET_DETAILSPOPUP', true)
+ },
+
+ /**
+ * 删除左右两端的空格
+ */
+ RemoveTheBlank (str) {
+ return str.replace(/(^\s*)|(\s*$)/g, '')
}
}
-
}
</script>
-<style>
-</style>
+<style></style>
--
Gitblit v1.9.3