From 369b82a3d81afe2f0574e2c44fd0a2918516b433 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 24 Mar 2022 08:47:24 +0800
Subject: [PATCH] 日历部分调整，视频部分调整，专题部分调整
---
src/pcviews/specialmap/celebrate.vue | 548 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 505 insertions(+), 43 deletions(-)
diff --git a/src/pcviews/specialmap/celebrate.vue b/src/pcviews/specialmap/celebrate.vue
index 67cdcee..72995a9 100644
--- a/src/pcviews/specialmap/celebrate.vue
+++ b/src/pcviews/specialmap/celebrate.vue
@@ -1,52 +1,514 @@
-/* * @Author: Morpheus * @Name: 校区庆 * @Date: 2021-11-15 17:14:47 * @Last
-Modified by: Morpheus * @Last Modified time: 2022-01-05 14:05:59 */
+/* * @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>
- <service-nav-bar
- :title="title"
- :arcCode="code"
- :headerLog="headerLog"
- ></service-nav-bar>
- </div>
+ <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>
</template>
<script>
-import { mapGetters } from "vuex";
+import { getWelcome } from '@/api/pc/public/specialmap'
+import { mapGetters } from 'vuex'
+
+let pathLayer = null
+let pointLayer = null
export default {
- data() {
- return {
- title: "圈存机",
- code: 6,
- headerLog: "/img/icon/service-qcj.png",
- };
- },
- created() {
- if (this.orgNavBarFlag == true) {
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
- if (this.arcNavBarFlag == true) {
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
- },
- computed: {
- ...mapGetters([
- // 校区内导航的显示关闭
- "orgNavBarFlag",
- "arcNavBarFlag",
- ]),
- },
- methods: {
- closeModel() {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
+ data () {
+ return {
+ 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'
+ }
},
- },
-};
+ 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'
+ }
+ this.getData()
+
+ window.onbeforeunload = e => { // 刷新时弹出提示
+ this.audioSynth.cancel()
+ }
+ },
+ computed: {
+ ...mapGetters([
+ // 校区内导航的显示关闭
+ '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 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 () {
+ 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></style>
+<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>
--
Gitblit v1.9.3