/* * @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 deblurring"
|
src="/img/icon/panorama.png"
|
alt
|
/>
|
</a>
|
<a href="javascript:void(0);" title="语音介绍">
|
<img
|
@click="audioPlay"
|
class="audio-control deblurring"
|
:src="audioImgUrl"
|
alt
|
/>
|
</a>
|
<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-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 v-show="layerList.length > 0" class="layer-manage-container">
|
<div class="header">图层管理</div>
|
<ul class="content">
|
<li v-for="(item, index) in layerList" :key="index">
|
{{item.name}}:
|
<el-switch v-model="item.flag" @change="switchChange(item)"></el-switch>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getWelcome } from '@/api/pc/public/specialmap'
|
import { mapGetters } from 'vuex'
|
|
let pathLayer = null
|
let pointLayer = null
|
let special = []
|
|
export default {
|
data () {
|
return {
|
url: '',
|
layerList: [],
|
time: '',
|
sponsor: '',
|
undertake: '',
|
title: '',
|
introduce: '',
|
list: [],
|
pathList: [],
|
pointNameList: [],
|
pointList: [],
|
panoramaUrlOne: '',
|
panoramaUrl: '',
|
audioSource: '',
|
audioFlag: false,
|
audioCourse: false,
|
audioSynth: null,
|
audioMsg: null,
|
panoramaShow: false,
|
audioImgUrl: '/img/icon/start-video.png',
|
urlDataName: null
|
}
|
},
|
created () { },
|
mounted () {
|
var that = this
|
|
this.audioSynth = window.speechSynthesis
|
|
this.audioMsg = new window.SpeechSynthesisUtterance()
|
|
this.audioMsg.onend = function () {
|
// this.audioSynth.cancel();
|
that.audioFlag = false
|
that.audioCourse = false
|
that.audioImgUrl = '/img/icon/close-video.png'
|
}
|
|
window.onbeforeunload = e => { // 刷新时弹出提示
|
this.audioSynth.cancel()
|
}
|
},
|
watch: {
|
$route: {
|
immediate: true,
|
handler (newData, oldData) {
|
if (this.urlDataName == null) {
|
this.urlDataName = this.$route.query.name
|
this.getData()
|
} else if (newData.query.name != this.urlDataName) {
|
if (special.length > 0) {
|
special.forEach(item => {
|
global.viewer.imageryLayers.remove(
|
item.layer
|
)
|
})
|
}
|
special = []
|
this.audioSynth.cancel()
|
global.viewer.removeLayer(pathLayer)
|
global.viewer.removeLayer(pointLayer)
|
this.urlDataName = this.$route.query.name
|
this.getData()
|
}
|
// if (this.$route.query.type) {//需要监听的参数
|
// this.type = this.$route.query.type
|
// }
|
}
|
}
|
},
|
computed: {
|
...mapGetters([
|
// 校区内导航的显示关闭
|
'campusNavFlag',
|
'orgNavBarFlag',
|
'arcNavBarFlag'
|
])
|
},
|
methods: {
|
switchChange (item) {
|
if (item.flag == true) {
|
this.addArcgisLayer(item.url, item.name)
|
} else {
|
this.removeArcgisLayer(item.name)
|
}
|
},
|
|
addArcgisLayer (url, name) {
|
var layer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
|
url: url
|
})
|
)
|
special.push({
|
layer,
|
name
|
})
|
},
|
|
removeArcgisLayer (name) {
|
special.forEach((item, index) => {
|
if (item.name == name) {
|
global.viewer.imageryLayers.remove(
|
item.layer
|
)
|
special.splice(index, 1)
|
}
|
})
|
},
|
|
getData () {
|
getWelcome({ hdname: this.urlDataName }).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(';')
|
this.layerList = []
|
|
if (result.mapname != '' && result.mapname != null && result.mapname != undefined) {
|
var mapname = result.mapname.split(',')
|
var url = result.url.split(',')
|
mapname.forEach((item, index) => {
|
this.layerList.push({ flag: false, name: item, url: url[index] })
|
})
|
this.layerList[0].flag = true
|
this.addArcgisLayer(this.layerList[0].url, this.layerList[0].name)
|
}
|
|
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 global.DC.Polyline(item)
|
|
polyline.setStyle({
|
width: 6,
|
arcType: true,
|
material: new global.DC.PolylineImageTrailMaterialProperty({
|
color: global.DC.Namespace.Cesium.Color.fromBytes(10, 255, 10),
|
speed: 60,
|
image: '/img/icon/right.png',
|
repeat: { x: 320, y: 1 }
|
}),
|
clampToGround: true
|
})
|
|
pathLayer.addOverlay(polyline)
|
},
|
drawPoint (item, name) {
|
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">
|
<img src="/img/icon/activity.png">
|
</div>
|
<div class="point-title">
|
${name}
|
</div>
|
</div>
|
`
|
)
|
pointLayer.addOverlay(divIcon)
|
},
|
audioPlay () {
|
if (this.audioFlag == false) {
|
this.audioMsg.text = this.audioSource
|
this.audioSynth.speak(this.audioMsg)
|
this.audioFlag = true
|
this.audioCourse = true
|
this.audioImgUrl = '/img/icon/start-video.png'
|
} else {
|
if (this.audioCourse == true) {
|
this.audioSynth.pause()
|
this.audioCourse = false
|
this.audioImgUrl = '/img/icon/close-video.png'
|
} else {
|
this.audioSynth.resume()
|
this.audioCourse = true
|
this.audioImgUrl = '/img/icon/start-video.png'
|
}
|
}
|
},
|
closeModel () {
|
if (special.length > 0) {
|
special.forEach(item => {
|
global.viewer.imageryLayers.remove(
|
item.layer
|
)
|
})
|
}
|
special = []
|
|
global.viewer.removeLayer(pathLayer)
|
global.viewer.removeLayer(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.audioSynth.cancel()
|
global.viewer.removeLayer(pathLayer)
|
global.viewer.removeLayer(pointLayer)
|
// console.log("关闭", "see1");
|
}
|
}
|
</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%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.layer-manage-container {
|
padding: 0 10px 10px 10px;
|
position: fixed;
|
right: 10px;
|
bottom: 240px;
|
width: 120px;
|
background: rgba(40, 187, 240, 0.7);
|
border-radius: 10px;
|
color: #fff;
|
border: 1px solid #29baf1;
|
box-shadow: 0 0 10px 2px #29baf1;
|
|
.header {
|
line-height: 36px;
|
text-align: center;
|
}
|
|
.content {
|
max-height: calc(180px - 36px);
|
overflow-y: auto;
|
text-align: center;
|
}
|
}
|
</style>
|
