/*
|
* @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>
|
</template>
|
|
<script>
|
|
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
|
}
|
},
|
created () {
|
|
},
|
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),
|
`
|
<div class="point-entitys-box">
|
<div class="point-logo">
|
<img src="/img/icon/activity.png">
|
</div>
|
<div class="point-title">
|
${name}
|
</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
|
}
|
}
|
|
}
|
</script>
|
|
<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;
|
|
.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;
|
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: 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>
|
