/*
|
* @Author: Morpheus
|
* @Name: 社区迎新
|
* @Date: 2021-11-15 17:14:47
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-01-13 17:39:35
|
*/
|
<template>
|
<div>
|
<div class="welcome-container">
|
<div class="header">
|
<div class="title">
|
{{ title }}
|
<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="closeMapPopupBox"
|
class="close-box"
|
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-item>
|
</el-carousel>
|
</div>
|
</div>
|
<div class="operating-btn">
|
<ul>
|
<li>全景</li>
|
<li>视频</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import { getWelcome } from '@/api/pc/public/specialmap'
|
import { mapGetters } from 'vuex'
|
|
export default {
|
data () {
|
return {
|
data: [],
|
time: '',
|
num: 0,
|
title: '',
|
introduce: '',
|
list: [],
|
pathList: [],
|
pointNameList: [],
|
pointList: [],
|
DC: null,
|
pathLayer: null,
|
pointLayer: null
|
}
|
},
|
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.list.forEach((item, index) => {
|
var a = index + 1
|
this.data.push(a)
|
})
|
|
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) {
|
console.log(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)
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scope>
|
.welcome-container {
|
padding: 10px;
|
position: fixed;
|
top: 132px;
|
left: 132px;
|
width: 480px;
|
height: 620px;
|
background: #2196f3;
|
border-radius: 10px;
|
color: #fff;
|
|
.header {
|
height: 36px;
|
line-height: 36px;
|
text-align: center;
|
position: relative;
|
|
.title {
|
.audio-control {
|
position: absolute;
|
top: 0;
|
right: 34px;
|
bottom: 0;
|
left: auto;
|
margin: auto;
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
}
|
|
.close-box {
|
position: absolute;
|
top: 0;
|
right: 8px;
|
bottom: 0;
|
left: auto;
|
margin: auto;
|
width: 16px;
|
height: 16px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.content-box {
|
height: calc(100% - 36px);
|
.text-introduce {
|
height: calc(100% - 408px);
|
|
.title {
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.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 {
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.img-exhibition {
|
height: 336px;
|
|
.title {
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.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>
|
