From 22d0af5be7b3b7979b97bdaab163956dcb3cff4a Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 14 Jan 2022 17:36:00 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/pcviews/specialmap/welcome.vue | 306 +++++++++++++++++++++++++++++++++++++++++---------
public/img/navicon/close.png | 0
src/store/getters.js | 23 +--
public/img/icon/panorama.png | 0
4 files changed, 256 insertions(+), 73 deletions(-)
diff --git a/public/img/icon/panorama.png b/public/img/icon/panorama.png
new file mode 100644
index 0000000..2dc9477
--- /dev/null
+++ b/public/img/icon/panorama.png
Binary files differ
diff --git a/public/img/navicon/close.png b/public/img/navicon/close.png
index b589b35..7b53a16 100644
--- a/public/img/navicon/close.png
+++ b/public/img/navicon/close.png
Binary files differ
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index ed1199f..3401bda 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/src/pcviews/specialmap/welcome.vue
@@ -3,7 +3,7 @@
* @Name: 社区迎新
* @Date: 2021-11-15 17:14:47
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-01-13 17:39:35
+ * @Last Modified time: 2022-01-14 17:22:55
*/
<template>
<div>
@@ -11,41 +11,31 @@
<div class="header">
<div class="title">
{{ title }}
- <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="panoramaPlay"
+ class="panorama-control"
+ src="/img/icon/panorama.png"
+ alt="">
</a>
- <a href="javascript:void(0);" title="关闭">
- <img @click="closeMapPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt="">
+ <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="text-introduce">
- <div class="title">
- 相关介绍：
- </div>
- <div class="content">
- <p v-text="introduce">
-
- </p>
- </div>
- </div>
- <div class="organizer">
- 主办：{{}}
- </div>
- <div class="undertake">
- 承办：{{}}
- </div>
<div class="img-exhibition">
- <div class="title">
- 相关图片：
- </div>
<div class="content">
<el-carousel :interval="5000"
arrow="always"
@@ -59,11 +49,39 @@
</el-carousel>
</div>
</div>
- <div class="operating-btn">
- <ul>
- <li>全景</li>
- <li>视频</li>
- </ul>
+ <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 :src="panoramaUrl" frameborder="0"></iframe>
+ </div>
</div>
</div>
</div>
@@ -78,9 +96,9 @@
export default {
data () {
return {
- data: [],
time: '',
- num: 0,
+ sponsor: '',
+ undertake: '',
title: '',
introduce: '',
list: [],
@@ -89,7 +107,15 @@
pointList: [],
DC: null,
pathLayer: null,
- pointLayer: null
+ pointLayer: null,
+
+ audioSource: '',
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+
+ panoramaShow: false
}
},
created () {
@@ -97,18 +123,28 @@
},
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.introduce = result.context
+ this.audioSource = result.context
this.list = result.tpurl.split(',')
this.pointNameList = result.addressname.split(',')
this.pointList = result.address.split(';')
-
- this.list.forEach((item, index) => {
- var a = index + 1
- this.data.push(a)
- })
var a = result.lx.split(';')
@@ -184,6 +220,36 @@
`
)
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
}
}
}
@@ -196,27 +262,43 @@
top: 132px;
left: 132px;
width: 480px;
- height: 620px;
- background: #2196f3;
+ 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 {
+ margin-bottom: 10px;
height: 36px;
line-height: 36px;
text-align: center;
position: relative;
+ background: #29baf1;
.title {
- .audio-control {
+ .panorama-control {
position: absolute;
top: 0;
- right: 34px;
+ right: 56px;
bottom: 0;
left: auto;
margin: auto;
- width: 20px;
- height: 20px;
+ 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;
}
@@ -235,13 +317,38 @@
}
.content-box {
+ padding: 0 16px;
height: calc(100% - 36px);
+
+ & > div {
+ margin-bottom: 10px;
+ }
+
+ & > div:last-child {
+ margin-bottom: 0px;
+ }
+
.text-introduce {
- height: calc(100% - 408px);
+ 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 {
@@ -259,18 +366,103 @@
}
.organizer,
- .undertake {
+ .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;
+ 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%;
+ }
+ }
}
.img-exhibition {
- height: 336px;
-
- .title {
- height: 36px;
- line-height: 36px;
- }
+ height: 300px;
.content {
.el-image {
diff --git a/src/store/getters.js b/src/store/getters.js
index 706feae..8e9568c 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -22,24 +22,15 @@
perspectiveControl: (state) => state.mobile.perspectiveControl, /// 视角控制：高度、角度 ()=>{}
audioState: (state) => state.mobile.audioState, // 文字转语音状态
-<<<<<<< HEAD
- isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, //是否开启路线
- isendPosition: (state) => state.mobile.isendPosition, //路线导航终点数据改变
- endPosition: (state) => state.mobile.endPosition, //路线导航终点数据
- routerS: (state) => state.mobile.routerS, //所有路径
- choiceRouterS: (state) => state.mobile.choiceRouterS, //当前选择路径
+ isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, // 是否开启路线
+ isendPosition: (state) => state.mobile.isendPosition, // 路线导航终点数据改变
+ endPosition: (state) => state.mobile.endPosition, // 路线导航终点数据
+ routerS: (state) => state.mobile.routerS, // 所有路径
+ choiceRouterS: (state) => state.mobile.choiceRouterS, // 当前选择路径
- showActivity: (state) => state.mobile.showActivity, //显影活动弹窗
- isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany, //显影活动弹窗
-};
-=======
- isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, // 是否开启路线
- isendPosition: (state) => state.mobile.isendPosition, // 路线导航终点数据改变
- endPosition: (state) => state.mobile.endPosition, // 路线导航终点数据
- routerS: (state) => state.mobile.routerS, // 所有路径
- choiceRouterS: (state) => state.mobile.choiceRouterS // 当前选择路径
+ showActivity: (state) => state.mobile.showActivity, // 显影活动弹窗
+ isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany // 显影活动弹窗
}
->>>>>>> acb45c731c3ccd0a67061efb4e7bdf4f56005672
const navigation = {
campusNavFlag: (state) => state.navigation.campusNavFlag,
--
Gitblit v1.9.3