From 05e12ffc0cd7ca5cc0469cc7b69f9a524d722d1c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 13 Jan 2022 17:46:52 +0800
Subject: [PATCH] 忽略模型文件
---
src/pcviews/specialmap/welcome.vue | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 265 insertions(+), 21 deletions(-)
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index 951006d..ed1199f 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/src/pcviews/specialmap/welcome.vue
@@ -3,55 +3,299 @@
* @Name: 社区迎新
* @Date: 2021-11-15 17:14:47
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-01-05 14:06:20
+ * @Last Modified time: 2022-01-13 17:39:35
*/
<template>
<div>
- <service-nav-bar :title="title"
- :arcCode="code"
- :headerLog="headerLog"></service-nav-bar>
+ <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 {
- title: '圈存机',
- code: 6,
- headerLog: '/img/icon/service-qcj.png'
+ data: [],
+ time: '',
+ num: 0,
+ title: '',
+ introduce: '',
+ list: [],
+ pathList: [],
+ pointNameList: [],
+ pointList: [],
+ DC: null,
+ pathLayer: null,
+ pointLayer: null
}
},
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)
- }
+
+ },
+ 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: {
- closeModel () {
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push('/pcLayout/default')
+ 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>
+<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>
--
Gitblit v1.9.3