From a22aa1086eeef39a26cc161326ce09cd183185ea Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Fri, 04 Mar 2022 15:57:47 +0800
Subject: [PATCH] 3.3 1.自定义标签，退出后自动清除 2.自定义标签，转换二维码的数据格式ok，移动端对接二维码ok， 3.自定义标签点击移动到指定位置 ok 4.面板自适应高度 4.更换定位依赖，自定义标签扫码入移动端可以定位并显示路线
---
src/pcviews/specialmap/welcome.vue | 906 ++++++++++++++++++++++++++++----------------------------
1 files changed, 457 insertions(+), 449 deletions(-)
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index cfa5954..619beb0 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/src/pcviews/specialmap/welcome.vue
@@ -1,215 +1,220 @@
-/*
- * @Author: Morpheus
- * @Name: 社区迎新
- * @Date: 2021-11-15 17:14:47
- * @Last Modified by: Morpheus
- * @Last Modified time: 2022-01-26 10:51:24
- */
+/* * @Author: Morpheus * @Name: 校区迎新 * @Date: 2021-11-15 17:14:47 * @Last
+Modified by: Morpheus * @Last Modified time: 2022-01-26 10:51:24 */
<template>
- <div>
- <div class="welcome-container">
- <div class="header">
- <div class="title">
- {{ title }}
- <a href="javascript:void(0);"
- title="全景浏览">
- <img @click="panoramaPlay"
- class="panorama-control"
- src="/img/icon/panorama.png"
- alt="">
- </a>
- <a href="javascript:void(0);"
- title="语音介绍">
- <img @click="audioPlay"
- class="audio-control"
- src="/img/navicon/audio.png"
- alt="">
- </a>
- <a href="javascript:void(0);"
- title="关闭">
- <img @click="closeModel"
- class="close-box"
- src="/img/navicon/close.png"
- alt="">
- </a>
- </div>
- </div>
- <div class="content-box">
- <div class="img-exhibition">
- <div class="content">
- <el-carousel :interval="5000"
- arrow="always"
- height="300px">
- <el-carousel-item v-for="item in list"
- :key="item">
- <el-image :src="item"
- :preview-src-list="[item]">
- </el-image>
- </el-carousel-item>
- </el-carousel>
- </div>
- </div>
- <div class="organizer">
- 主办：{{ sponsor }}
- </div>
- <div class="undertake">
- 承办：{{ undertake }}
- </div>
- <div class="time-box">
- 时间：{{ time }}
- </div>
- <div class="text-introduce">
- <div class="title">
- 相关介绍：
- </div>
- <div class="content">
- <p v-text="introduce">
-
- </p>
- </div>
- </div>
- <div class="panorama-box" v-show="panoramaShow">
- <div class="title">
- 全景浏览
- <a href="javascript:void(0);"
- title="关闭">
- <img @click="panoramaShow = false, panoramaUrl = ''"
- class="close-box"
- src="/img/navicon/close.png"
- alt="">
- </a>
- </div>
- <div class="content">
- <iframe style="width: 100%; height: 100%" :src="panoramaUrl" frameborder="0"></iframe>
- </div>
- </div>
- </div>
+ <div>
+ <div class="welcome-container">
+ <div class="header">
+ <div class="title">
+ {{ title }}
+ <a href="javascript:void(0);" title="全景浏览">
+ <img
+ @click="panoramaPlay"
+ class="panorama-control"
+ src="/img/icon/panorama.png"
+ alt=""
+ />
+ </a>
+ <a href="javascript:void(0);" title="语音介绍">
+ <img
+ @click="audioPlay"
+ class="audio-control"
+ src="/img/navicon/audio.png"
+ alt=""
+ />
+ </a>
+ <a href="javascript:void(0);" title="关闭">
+ <img
+ @click="closeModel"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt=""
+ />
+ </a>
</div>
+ </div>
+ <div class="content-box">
+ <div class="img-exhibition">
+ <div class="content">
+ <el-carousel :interval="5000" arrow="always" height="300px">
+ <el-carousel-item v-for="item in list" :key="item">
+ <el-image :src="item" :preview-src-list="[item]"> </el-image>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <div class="organizer">主办：{{ sponsor }}</div>
+ <div class="undertake">承办：{{ undertake }}</div>
+ <div class="time-box">时间：{{ time }}</div>
+ <div class="text-introduce">
+ <div class="title">相关介绍：</div>
+ <div class="content">
+ <p v-text="introduce"></p>
+ </div>
+ </div>
+ <div class="panorama-box" v-show="panoramaShow">
+ <div class="title">
+ 全景浏览
+ <a href="javascript:void(0);" title="关闭">
+ <img
+ @click="(panoramaShow = false), (panoramaUrl = '')"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt=""
+ />
+ </a>
+ </div>
+ <div class="content">
+ <iframe
+ style="width: 100%; height: 100%"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
+ </div>
+ </div>
+ </div>
</div>
+ </div>
</template>
<script>
-
-import { getWelcome } from '@/api/pc/public/specialmap'
-import { mapGetters } from 'vuex'
+import { getWelcome } from "@/api/pc/public/specialmap";
+import { mapGetters } from "vuex";
export default {
- data () {
- return {
- time: '',
- sponsor: '',
- undertake: '',
- title: '',
- introduce: '',
- list: [],
- pathList: [],
- pointNameList: [],
- pointList: [],
- DC: null,
- pathLayer: null,
- pointLayer: null,
- panoramaUrlOne: '',
- panoramaUrl: '',
- audioSource: '',
- audioFlag: false,
- audioCourse: false,
- audioSynth: null,
- audioMsg: null,
- panoramaShow: false
+ data() {
+ return {
+ time: "",
+ sponsor: "",
+ undertake: "",
+ title: "",
+ introduce: "",
+ list: [],
+ pathList: [],
+ pointNameList: [],
+ pointList: [],
+ DC: null,
+ pathLayer: null,
+ pointLayer: null,
+ panoramaUrlOne: "",
+ panoramaUrl: "",
+ audioSource: "",
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+ panoramaShow: false,
+ };
+ },
+ created() {},
+ mounted() {
+ // console.log("显示", "see1");
+
+ this.DC = global.DC;
+
+ this.audioSynth = window.speechSynthesis;
+
+ this.audioMsg = new window.SpeechSynthesisUtterance();
+
+ this.audioMsg.onend = function () {
+ // this.audioSynth.cancel();
+ this.audioFlag = false;
+ this.audioCourse = false;
+ };
+ this.getData();
+ },
+ computed: {
+ ...mapGetters([
+ "viewer",
+ // 校区内导航的显示关闭
+ "campusNavFlag",
+ "orgNavBarFlag",
+ "arcNavBarFlag",
+ ]),
+ },
+ methods: {
+ getData() {
+ getWelcome({ hdname: "校区迎新" }).then((res) => {
+ var result = res.data.data;
+ this.title = result.hdname;
+ this.time = result.time;
+ this.sponsor = result.sponsor;
+ this.undertake = result.undertake;
+ this.panoramaUrl = result.panoramaurl;
+ this.panoramaUrlOne = result.panoramaurl;
+ this.introduce = result.context;
+ this.audioSource = result.context;
+
+ this.audioPlay();
+
+ this.list = result.tpurl.split(",");
+ this.pointNameList = result.addressname.split(",");
+ this.pointList = result.address.split(";");
+
+ var a = result.lx.split(";");
+
+ a.forEach((item) => {
+ var b = item.split("(");
+ var c = b[1].substr(0, b[1].length - 1);
+ var d = c.split(",");
+ var j = [];
+ d.forEach((it) => {
+ var e = it.split(" ");
+ var f = e.join(",");
+ j.push(f);
+ });
+ var k = j.join(";");
+ this.pathList.push(k);
+ });
+
+ this.pathLayer = new this.DC.VectorLayer("pathLayer");
+ this.viewer.addLayer(this.pathLayer);
+
+ this.pointLayer = new this.DC.HtmlLayer("pointLayer");
+ this.viewer.addLayer(this.pointLayer);
+
+ this.pathList.forEach((item) => {
+ this.drawPolyline(item);
+ });
+
+ this.pointList.forEach((item, index) => {
+ this.drawPoint(item.split(","), this.pointNameList[index]);
+ });
+ if (this.pointList.length > 0) {
+ this.$store.dispatch("pcMoveView", {
+ viewer: this.viewer,
+ jd: +this.pointList[0].split(",")[0] - 0.0005,
+ wd: this.pointList[0].split(",")[1],
+ });
+ } else {
+ this.$store.dispatch("pcMoveView", {
+ viewer: this.viewer,
+ jd: +this.pathList[0].split(";")[0].split(",")[0] - 0.0005,
+ wd: this.pathList[0].split(";")[0].split(",")[1],
+ });
}
+ });
},
- created () {
+ drawPolyline(item) {
+ const polyline = new this.DC.Polyline(item);
+ polyline.setStyle({
+ width: 6,
+ arcType: true,
+ material: new this.DC.PolylineImageTrailMaterialProperty({
+ color: new this.DC.Color(255, 0, 0),
+ speed: 60,
+ image: "/img/icon/right.png",
+ repeat: { x: 320, y: 1 },
+ }),
+ clampToGround: true,
+ });
+
+ this.pathLayer.addOverlay(polyline);
},
- mounted () {
- this.DC = global.DC
-
- this.audioSynth = window.speechSynthesis
-
- this.audioMsg = new window.SpeechSynthesisUtterance()
-
- this.audioMsg.onend = function () {
- this.audioSynth.cancel()
- this.audioFlag = false
- this.audioCourse = false
- }
-
- getWelcome({ hdname: '社区迎新' }).then((res) => {
- var result = res.data.data
- this.title = result.hdname
- this.time = result.time
- this.sponsor = result.sponsor
- this.undertake = result.undertake
- this.panoramaUrl = result.panoramaurl
- this.panoramaUrlOne = result.panoramaurl
- this.introduce = result.context
- this.audioSource = result.context
- this.list = result.tpurl.split(',')
- this.pointNameList = result.addressname.split(',')
- this.pointList = result.address.split(';')
-
- var a = result.lx.split(';')
-
- a.forEach(item => {
- var b = item.split('(')
- var c = b[1].substr(0, b[1].length - 1)
- var d = c.split(',')
- var j = []
- d.forEach(it => {
- var e = it.split(' ')
- var f = e.join(',')
- j.push(f)
- })
- var k = j.join(';')
- this.pathList.push(k)
- })
-
- this.pathLayer = new this.DC.VectorLayer('pathLayer')
- this.viewer.addLayer(this.pathLayer)
-
- this.pointLayer = new this.DC.HtmlLayer('pointLayer')
- this.viewer.addLayer(this.pointLayer)
-
- this.pathList.forEach(item => {
- this.drawPolyline(item)
- })
-
- this.pointList.forEach((item, index) => {
- this.drawPoint(item.split(','), this.pointNameList[index])
- })
- })
- },
- computed: {
- ...mapGetters([
- 'viewer',
- // 社区内导航的显示关闭
- 'campusNavFlag',
- 'orgNavBarFlag',
- 'arcNavBarFlag'
- ])
- },
- methods: {
- drawPolyline (item) {
- const polyline = new this.DC.Polyline(item)
-
- polyline.setStyle({
- width: 6,
- arcType: true,
- material: new this.DC.PolylineImageTrailMaterialProperty({
- color: new this.DC.Color(255, 0, 0),
- speed: 60,
- image: '/img/icon/right.png',
- repeat: { x: 320, y: 1 }
- }),
- clampToGround: true
- })
-
- this.pathLayer.addOverlay(polyline)
- },
- drawPoint (item, name) {
- const divIcon = new this.DC.DivIcon(
- new this.DC.Position(Number(item[0]), Number(item[1]), 0),
- `
+ drawPoint(item, name) {
+ const divIcon = new this.DC.DivIcon(
+ new this.DC.Position(Number(item[0]), Number(item[1]), 0),
+ `
<div class="point-entitys-box">
<div class="point-logo">
<img src="/img/icon/activity.png">
@@ -219,60 +224,199 @@
</div>
</div>
`
- )
- this.pointLayer.addOverlay(divIcon)
- },
- audioPlay () {
- if (this.audioFlag == false) {
- this.audioMsg.text = this.audioSource
- this.audioSynth.speak(this.audioMsg)
- this.audioFlag = true
- this.audioCourse = true
- } else {
- if (this.audioCourse == true) {
- this.audioSynth.pause()
- this.audioCourse = false
- } else {
- this.audioSynth.resume()
- this.audioCourse = true
- }
- }
- },
- closeModel () {
- this.viewer.removeLayer(this.pathLayer)
- this.viewer.removeLayer(this.pointLayer)
-
- this.audioSynth.cancel()
- this.audioFlag = false
- this.audioCourse = false
-
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push('/pcLayout/default')
- },
- panoramaPlay () {
- this.panoramaShow = true
- this.panoramaUrl = this.panoramaUrlOne
+ );
+ this.pointLayer.addOverlay(divIcon);
+ },
+ audioPlay() {
+ if (this.audioFlag == false) {
+ this.audioMsg.text = this.audioSource;
+ this.audioSynth.speak(this.audioMsg);
+ this.audioFlag = true;
+ this.audioCourse = true;
+ } else {
+ if (this.audioCourse == true) {
+ this.audioSynth.pause();
+ this.audioCourse = false;
+ } else {
+ this.audioSynth.resume();
+ this.audioCourse = true;
}
- }
+ }
+ },
+ closeModel() {
+ this.viewer.removeLayer(this.pathLayer);
+ this.viewer.removeLayer(this.pointLayer);
-}
+ this.audioSynth.cancel();
+ this.audioFlag = false;
+ this.audioCourse = false;
+
+ this.$store.dispatch("delVisitedViews", this.$route);
+ this.$router.push("/pcLayout/default");
+ },
+ panoramaPlay() {
+ this.panoramaShow = true;
+ this.panoramaUrl = this.panoramaUrlOne;
+ },
+ },
+ destroyed() {
+ // this.audioPlay();
+ // console.log("关闭", "see1");
+ },
+};
</script>
-<style lang='scss' scope>
+<style lang="scss" scope>
.welcome-container {
- padding: 10px;
- position: fixed;
- top: 132px;
- left: 132px;
- width: 480px;
- height: 720px;
- background: rgba(40, 187, 240, 0.7);
- border-radius: 10px;
- color: #fff;
- border: 1px solid #29baf1;
- box-shadow: 0 0 10px 2px #29baf1;
+ padding: 10px;
+ position: fixed;
+ top: 132px;
+ left: 132px;
+ width: 480px;
+ height: 720px;
+ background: rgba(40, 187, 240, 0.7);
+ border-radius: 10px;
+ color: #fff;
+ border: 1px solid #29baf1;
+ box-shadow: 0 0 10px 2px #29baf1;
- .header {
+ .header {
+ margin-bottom: 10px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ position: relative;
+ background: #29baf1;
+
+ .title {
+ .panorama-control {
+ position: absolute;
+ top: 0;
+ right: 56px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .audio-control {
+ position: absolute;
+ top: 0;
+ right: 32px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .close-box {
+ position: absolute;
+ top: 0;
+ right: 8px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .content-box {
+ padding: 0 16px;
+ height: calc(100% - 36px);
+
+ & > div {
+ margin-bottom: 10px;
+ }
+
+ & > div:last-child {
+ margin-bottom: 0px;
+ }
+
+ .text-introduce {
+ height: calc(100% - 458px);
+
+ .title {
+ position: relative;
+ padding-left: 24px;
+ height: 36px;
+ line-height: 36px;
+
+ &::before {
+ position: absolute;
+ top: 12px;
+ left: 0;
+ width: 0;
+ height: 6px;
+ border: 6px solid #fff;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 4px 1px #fff;
+ border-radius: 50%;
+ content: "";
+ }
+ }
+
+ .content {
+ height: calc(100% - 36px);
+
+ p {
+ height: 100%;
+ text-indent: 2em;
+ font-size: 16px;
+ letter-spacing: 2px;
+ line-height: 24px;
+ overflow-y: auto;
+ }
+ }
+ }
+
+ .organizer,
+ .undertake,
+ .time-box {
+ padding-left: 24px;
+ position: relative;
+
+ height: 36px;
+ line-height: 36px;
+
+ &::before {
+ position: absolute;
+ top: 12px;
+ left: 0px;
+ width: 0;
+ height: 6px;
+ border: 6px solid #fff;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 4px 1px #fff;
+ border-radius: 50%;
+ content: "";
+ }
+ }
+
+ .panorama-box {
+ padding: 10px;
+ margin: auto !important;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ width: 560px;
+ height: 406px;
+ background: rgba(40, 187, 240, 0.7);
+ border-radius: 10px;
+ color: #fff;
+ border: 1px solid #29baf1;
+ box-shadow: 0 0 10px 2px #29baf1;
+
+ .title {
margin-bottom: 10px;
height: 36px;
line-height: 36px;
@@ -280,217 +424,81 @@
position: relative;
background: #29baf1;
- .title {
- .panorama-control {
- position: absolute;
- top: 0;
- right: 56px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
-
- .audio-control {
- position: absolute;
- top: 0;
- right: 32px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
-
- .close-box {
- position: absolute;
- top: 0;
- right: 8px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
+ .panorama-control {
+ position: absolute;
+ top: 0;
+ right: 56px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
}
+
+ .audio-control {
+ position: absolute;
+ top: 0;
+ right: 32px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .close-box {
+ position: absolute;
+ top: 0;
+ right: 8px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+ }
+
+ .content {
+ padding: 0 10px;
+ height: calc(100% - 46px);
+
+ .iframe {
+ width: 100%;
+ height: 100%;
+ }
+ }
}
- .content-box {
- padding: 0 16px;
- height: calc(100% - 36px);
+ .img-exhibition {
+ height: 300px;
- & > div {
- margin-bottom: 10px;
- }
+ .content {
+ .el-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ // width: 100%;
+ height: 100%;
- & > div:last-child {
- margin-bottom: 0px;
- }
-
- .text-introduce {
- height: calc(100% - 458px);
-
- .title {
- position: relative;
- padding-left: 24px;
- height: 36px;
- line-height: 36px;
-
- &::before {
- position: absolute;
- top: 12px;
- left: 0;
- width: 0;
- height: 6px;
- border: 6px solid #fff;
- box-sizing: border-box;
- box-shadow: 0px 0px 4px 1px #fff;
- border-radius: 50%;
- content: '';
- }
- }
-
- .content {
- height: calc(100% - 36px);
-
- p {
- height: 100%;
- text-indent: 2em;
- font-size: 16px;
- letter-spacing: 2px;
- line-height: 24px;
- overflow-y: auto;
- }
- }
- }
-
- .organizer,
- .undertake,
- .time-box {
- padding-left: 24px;
- position: relative;
-
- height: 36px;
- line-height: 36px;
-
- &::before {
- position: absolute;
- top: 12px;
- left: 0px;
- width: 0;
- height: 6px;
- border: 6px solid #fff;
- box-sizing: border-box;
- box-shadow: 0px 0px 4px 1px #fff;
- border-radius: 50%;
- content: '';
- }
- }
-
- .panorama-box {
- padding: 10px;
- margin: auto !important;
- position: fixed;
+ img {
+ position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
- z-index: 10;
- width: 560px;
- height: 406px;
- background: rgba(40, 187, 240, 0.7);
- border-radius: 10px;
- color: #fff;
- border: 1px solid #29baf1;
- box-shadow: 0 0 10px 2px #29baf1;
-
- .title {
- margin-bottom: 10px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- position: relative;
- background: #29baf1;
-
- .panorama-control {
- position: absolute;
- top: 0;
- right: 56px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
-
- .audio-control {
- position: absolute;
- top: 0;
- right: 32px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
-
- .close-box {
- position: absolute;
- top: 0;
- right: 8px;
- bottom: 0;
- left: auto;
- margin: auto;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
- }
-
- .content {
- padding: 0 10px;
- height: calc(100% - 46px);
-
- .iframe {
- width: 100%;
- height: 100%;
- }
- }
+ margin: auto;
+ width: 100%;
+ height: 100%;
+ }
}
-
- .img-exhibition {
- height: 300px;
-
- .content {
- .el-image {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- // width: 100%;
- height: 100%;
-
- img {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 100%;
- height: 100%;
- }
- }
- }
- }
+ }
}
+ }
}
</style>
--
Gitblit v1.9.3