From 7804a3a4d61ff1d857973e974bbdf78a2e17feab Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 17 Dec 2021 15:08:36 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/map/component/mapPopup.vue | 266 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 266 insertions(+), 0 deletions(-)
diff --git a/src/components/map/component/mapPopup.vue b/src/components/map/component/mapPopup.vue
new file mode 100644
index 0000000..0eea98a
--- /dev/null
+++ b/src/components/map/component/mapPopup.vue
@@ -0,0 +1,266 @@
+<template>
+ <div>
+ <div id="map_popup_content">
+ <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">
+ <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">
+ {{stateName}}
+ </div>
+ <div class="label-content">
+ <div class="arc-bcg">
+ <img :src="popupBgUrl"
+ alt="">
+ </div>
+ <div v-show="siteName != null && siteName != ''"
+ class="site">
+ <strong>地址:</strong>{{siteName}}
+ </div>
+ <div v-show="introduceText != null && introduceText != ''"
+ class="introduce">
+ <p>
+ <strong>介绍:</strong>
+ {{introduceText}}
+ </p>
+ </div>
+ <div class="popup-nav">
+ <ul>
+ <li @click="comeHereClick">
+ <i class="popup-icon come-nav deblurring"></i>
+ 到这
+ </li>
+ <li @click="getToHereClick">
+ <i class="popup-icon start-nav deblurring"></i>
+ 出发
+ </li>
+ <li @click="qrCodeClick">
+ <i class="popup-icon qr-code-nav deblurring"></i>
+ 二维码
+ </li>
+ <li @click="imgsClick">
+ <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>
+ </ul>
+ </div>
+ <div class="arc-box">
+ <ul class="tab-btn">
+ <li class="on">教学科研行政</li>
+ <li>生活服务</li>
+ </ul>
+ <div class="btm-content">
+ <div class="on">
+ <ul>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 教学楼
+ </li>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 教学楼
+ </li>
+ </ul>
+ </div>
+ <div>
+ <ul>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 生活楼
+ </li>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 生活楼
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="btm-box"></div>
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
+ </div>
+ <div v-if="panoramaPopup"
+ class="panorama-dom"
+ id="PanoramaBox">
+ <div style="width: 100%; height: 100%;">
+ <div class="panorama-container">
+ <div class="panorama-wrap">
+ <div class="content-wrap">
+ <div class="title">
+ {{stateName}}
+ </div>
+ <div class="content">
+ <iframe :src="panoramaUrl"
+ frameborder="0"></iframe>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 二维码弹框相关 -->
+ <el-dialog title="场景二维码"
+ :visible.sync="QRCodeFlag"
+ width='44%'>
+ <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">
+ <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="url"
+ :preview-src-list="srcList"
+ ref="popupImgs">
+ </el-image>
+
+ <campusNav ref="campusNavRoute"
+ :comeName="comeName"
+ :getToName="getToName"
+ v-show="campusNavFlag" />
+ </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+ name: 'mapPopup',
+ data () {
+ return {
+ DC: null,
+ 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'
+ ]
+ }
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 终点
+ 'terminus',
+ // 起点
+ 'startingPoint',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景弹框显示关闭
+ 'panoramaPopup'
+ ])
+ },
+ 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: {
+ closeCampusNav () {
+ this.campusNavFlag = false
+ this.$refs.campusNavRoute.clearLayer()
+ this.$store.commit('SET_STARTINGPOINT', null)
+ this.$store.commit('SET_TERMINUS', null)
+ this.comeName = ''
+ this.getToName = ''
+ },
+
+ comeHereClick () {
+ this.comeName = this.stateName
+ this.$store.commit('SET_TERMINUS', this.pointPosition)
+ if (this.campusNavFlag == false) this.campusNavFlag = true
+ },
+
+ getToHereClick () {
+ this.getToName = this.stateName
+ this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
+ if (this.campusNavFlag == false) this.campusNavFlag = true
+ },
+
+ qrCodeClick () {
+ this.QRCodeFlag = true
+ },
+
+ imgsClick () {
+ this.$refs.popupImgs.clickHandler()
+ },
+
+ panoramaClick () {
+ // 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
+ // eslint-disable-next-line no-unused-vars
+ var panorama = new this.DC.PanoramaBox(this.viewer, {
+ domId: 'PanoramaBox',
+ position: [
+ positions
+ ]
+ })
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_PANORAMAPOPUP', true)
+ }
+ }
+
+}
+</script>
+
+<style>
+</style>
--
Gitblit v1.9.3