school-web.git - Gitblit

			@@ -1,69 +1,75 @@
			/*
			* @Author: Morpheus
			* @Name: 社区迎新
			* @Date: 2021-11-15 17:14:47
			* @Last Modified by: Morpheus
			* @Last Modified time: 2022-01-13 17:39:35
			*/
			/* * @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"
			src="/img/navicon/audio.png"
			alt="">
			<img
			@click="audioPlay"
			class="audio-control deblurring"
			src="/img/navicon/audio.png"
			alt
			/>
			</a>
			<a href="javascript:void(0);" title="关闭">
			<img @click="closeMapPopupBox"
			class="close-box"
			src="/img/navicon/close.png"
			alt="">
			<img
			@click="closeModel"
			class="close-box deblurring"
			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"
			height="300px">
			<el-carousel-item v-for="item in list"
			:key="item">
			<el-image :src="item"
			:preview-src-list="[item]">
			</el-image>
			<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="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
			style="width: 100%; height: 100%"
			:src="panoramaUrl"
			frameborder="0"
			></iframe>
			</div>
			</div>
			</div>
			</div>
			@@ -71,94 +77,130 @@
			</template>

			<script>

			import { getWelcome } from '@/api/pc/public/specialmap'
			import { mapGetters } from 'vuex'

			let pathLayer = null
			let pointLayer = null

			export default {
			data () {
			return {
			data: [],
			time: '',
			num: 0,
			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 () {

			},
			created () { },
			mounted () {
			this.DC = global.DC
			getWelcome({ hdname: '社区迎新' }).then((res) => {
			var result = res.data.data
			this.title = result.hdname
			this.introduce = result.context
			this.list = result.tpurl.split(',')
			this.pointNameList = result.addressname.split(',')
			this.pointList = result.address.split(';')
			this.audioSynth = window.speechSynthesis

			this.list.forEach((item, index) => {
			var a = index + 1
			this.data.push(a)
			})
			this.audioMsg = new window.SpeechSynthesisUtterance()

			var a = result.lx.split(';')
			this.audioMsg.onend = function () {
			// this.audioSynth.cancel();
			this.audioFlag = false
			this.audioCourse = false
			}
			this.getData()

			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])
			})
			})
			window.onbeforeunload = e => { // 刷新时弹出提示
			this.audioSynth.cancel()
			}
			},
			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)
			})

			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 this.DC.Polyline(item)
			const polyline = new global.DC.Polyline(item)

			polyline.setStyle({
			width: 6,
			arcType: true,
			material: new this.DC.PolylineImageTrailMaterialProperty({
			color: new this.DC.Color(255, 0, 0),
			material: new global.DC.PolylineImageTrailMaterialProperty({
			color: new global.DC.Color(255, 0, 0),
			speed: 60,
			image: '/img/icon/right.png',
			repeat: { x: 320, y: 1 }
			@@ -166,12 +208,11 @@
			clampToGround: true
			})

			this.pathLayer.addOverlay(polyline)
			pathLayer.addOverlay(polyline)
			},
			drawPoint (item, name) {
			console.log(item, name)
			const divIcon = new this.DC.DivIcon(
			new this.DC.Position(Number(item[0]), Number(item[1]), 0),
			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">
			@@ -183,40 +224,93 @@
			</div>
			`
			)
			this.pointLayer.addOverlay(divIcon)
			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 () {
			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>
			<style lang="scss" scope>
			.welcome-container {
			padding: 10px;
			position: fixed;
			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 +329,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 +378,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 {