From bf58722dfd03ea1513f3acc7331d4d4403fca76e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 18 Mar 2022 11:48:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/pcviews/specialmap/welcome.vue | 319 +++++++++++++++++++++++++++-------------------------
1 files changed, 164 insertions(+), 155 deletions(-)
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index cfa5954..f1cb15d 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/src/pcviews/specialmap/welcome.vue
@@ -1,86 +1,74 @@
-/*
- * @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 href="javascript:void(0);" title="全景浏览">
+ <img
+ @click="panoramaPlay"
+ class="panorama-control deblurring"
+ 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 href="javascript:void(0);" title="语音介绍">
+ <img
+ @click="audioPlay"
+ class="audio-control deblurring"
+ 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 href="javascript:void(0);" title="关闭">
+ <img
+ @click="closeModel"
+ class="close-box deblurring"
+ 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 :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="organizer">主办：{{ sponsor }}</div>
+ <div class="undertake">承办：{{ undertake }}</div>
+ <div class="time-box">时间：{{ time }}</div>
<div class="text-introduce">
- <div class="title">
- 相关介绍：
- </div>
+ <div class="title">相关介绍：</div>
<div class="content">
- <p v-text="introduce">
-
- </p>
+ <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 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>
+ <iframe
+ style="width: 100%; height: 100%"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
</div>
</div>
</div>
@@ -89,9 +77,11 @@
</template>
<script>
-
import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'
+
+let pathLayer = null
+let pointLayer = null
export default {
data () {
@@ -105,9 +95,6 @@
pathList: [],
pointNameList: [],
pointList: [],
- DC: null,
- pathLayer: null,
- pointLayer: null,
panoramaUrlOne: '',
panoramaUrl: '',
audioSource: '',
@@ -118,85 +105,102 @@
panoramaShow: false
}
},
- created () {
-
- },
+ created () { },
mounted () {
- this.DC = global.DC
-
this.audioSynth = window.speechSynthesis
this.audioMsg = new window.SpeechSynthesisUtterance()
this.audioMsg.onend = function () {
- this.audioSynth.cancel()
+ // this.audioSynth.cancel();
this.audioFlag = false
this.audioCourse = false
}
+ this.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.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])
- })
- })
+ window.onbeforeunload = e => { // 刷新时弹出提示
+ this.audioSynth.cancel()
+ }
},
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)
+ })
+
+ pathLayer = new global.DC.VectorLayer('pathLayer')
+ global.viewer.addLayer(pathLayer)
+
+ pointLayer = new global.DC.HtmlLayer('pointLayer')
+ global.viewer.addLayer(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: global.viewer,
+ jd: +this.pointList[0].split(',')[0] - 0.0005,
+ wd: this.pointList[0].split(',')[1]
+ })
+ } else {
+ this.$store.dispatch('pcMoveView', {
+ viewer: global.viewer,
+ jd: +this.pathList[0].split(';')[0].split(',')[0] - 0.0005,
+ wd: this.pathList[0].split(';')[0].split(',')[1]
+ })
+ }
+ })
+ },
drawPolyline (item) {
- const polyline = new this.DC.Polyline(item)
+ const polyline = new global.DC.Polyline(item)
polyline.setStyle({
width: 6,
arcType: true,
- material: new this.DC.PolylineImageTrailMaterialProperty({
- color: new this.DC.Color(255, 0, 0),
+ material: new global.DC.PolylineImageTrailMaterialProperty({
+ color: new global.DC.Color(255, 0, 0),
speed: 60,
image: '/img/icon/right.png',
repeat: { x: 320, y: 1 }
@@ -204,11 +208,11 @@
clampToGround: true
})
- this.pathLayer.addOverlay(polyline)
+ pathLayer.addOverlay(polyline)
},
drawPoint (item, name) {
- const divIcon = new this.DC.DivIcon(
- new this.DC.Position(Number(item[0]), Number(item[1]), 0),
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(item[0]), Number(item[1]), 0),
`
<div class="point-entitys-box">
<div class="point-logo">
@@ -220,7 +224,7 @@
</div>
`
)
- this.pointLayer.addOverlay(divIcon)
+ pointLayer.addOverlay(divIcon)
},
audioPlay () {
if (this.audioFlag == false) {
@@ -239,8 +243,8 @@
}
},
closeModel () {
- this.viewer.removeLayer(this.pathLayer)
- this.viewer.removeLayer(this.pointLayer)
+ global.viewer.removeLayer(pathLayer)
+ global.viewer.removeLayer(pointLayer)
this.audioSynth.cancel()
this.audioFlag = false
@@ -253,12 +257,17 @@
this.panoramaShow = true
this.panoramaUrl = this.panoramaUrlOne
}
+ },
+ destroyed () {
+ this.audioSynth.cancel()
+ global.viewer.removeLayer(pathLayer)
+ global.viewer.removeLayer(pointLayer)
+ // console.log("关闭", "see1");
}
-
}
</script>
-<style lang='scss' scope>
+<style lang="scss" scope>
.welcome-container {
padding: 10px;
position: fixed;
@@ -416,41 +425,41 @@
position: relative;
background: #29baf1;
- .panorama-control {
- position: absolute;
- top: 0;
- right: 56px;
- 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;
- }
+ .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;
- }
+ .close-box {
+ position: absolute;
+ top: 0;
+ right: 8px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
}
.content {
--
Gitblit v1.9.3