/* * @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() {
|
// 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],
|
});
|
}
|
});
|
},
|
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;
|
},
|
},
|
destroyed() {
|
// this.audioPlay();
|
// 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%;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
