<template>
|
<!-- 信息窗口每条信息dom mobilePopupOurOnce -->
|
<div class="mobilePopupOurOnce">
|
<div class="mobilePopupOurOnce_center" :style="{
|
borderBottom: !ends ? '#d4d4d4 dashed 1px' : '',
|
marginBottom: !ends ? '6px' : '',
|
}">
|
<div class="mobilePopupOurOnce_left">
|
<!-- <img :src="icon" alt="" :key="icon" /> -->
|
<el-image style="width: 80px; height: 80px" :src="icon" :id="'mobileBigImgs' + icon + ''"
|
:preview-src-list="srcList">
|
<!-- v-show="false" -->
|
</el-image>
|
</div>
|
<div class="mobilePopupOurOnce_right" @click.self.stop="openOnce('定位')">
|
<div class="mobilePopupOurOnce_r_up" @click.self.stop="openOnce('定位')">{{ onceData.name }}</div>
|
<div class="mobilePopupOurOnce_r_down">
|
<div v-for="(item, index) in seebut" :key="index">
|
<el-link :icon="item.name == '实景'
|
? 'el-icon-place'
|
: item.name == '图集'
|
? 'el-icon-data-board'
|
: item.name == '定位'
|
? 'el-icon-map-location'
|
: ''
|
" class="mobilePopupOurOnce_r_d_in" @click="openOnce(item.name)">{{ item.name }}</el-link>
|
<el-divider direction="vertical" class="mobilePopupOurOnce_r_d_in"
|
v-if="index != seebut.length - 1"></el-divider>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getChildNavDetail } from '@/api/mobile/public/arc'
|
|
export default {
|
props: ['onceData', 'ends'],
|
name: 'mobilePopupOurOnce',
|
created () {
|
if (Array.isArray(this.onceData.icon)) {
|
this.srcList = this.onceData.icon.map(item => this.updateUrl(item))
|
this.icon = this.srcList[0]
|
}
|
if (this.onceData.from == '校园建筑' || this.onceData.from == '文化风景') {
|
this.getOnceCampus(this.onceData.id)
|
} else {
|
this.ourData = this.onceData
|
}
|
},
|
inject: ['mobileMapElement'],
|
data () {
|
return {
|
icon: '',
|
srcList: [],
|
ourData: {},
|
map2D: this.$store.state.openlayerData.openlayers.map2D,
|
}
|
},
|
computed: {
|
...mapGetters(['mviewer']),
|
seebut () {
|
const buts = this.onceData.buts
|
|
let b = []
|
|
for (const k in buts) {
|
if (buts[k] == '实景') {
|
continue
|
}
|
b.push({
|
name: buts[k]
|
})
|
}
|
|
if (this.ourData.panoramaurl) {
|
b.push({
|
name: '实景'
|
})
|
} else {
|
b = b.filter((res) => {
|
return res.name != '实景'
|
})
|
}
|
return b
|
}
|
},
|
methods: {
|
updateUrl (url) {
|
if (url.indexOf('http://172.18.4.135:9000/zhxy') != -1) {
|
url = url.replace('http://172.18.4.135:9000/zhxy', 'https://fkxt.jxstnu.edu.cn/changjing/gminio/zhxy')
|
}
|
return url
|
},
|
|
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
openOnce (val) {
|
if (!this.ourData.name) {
|
console.log('数据传输失败')
|
return
|
}
|
const that = this
|
if (val == '定位') {
|
// 活动定位
|
if (this.ourData.name == '活动') {
|
console.log(this.ourData)
|
return
|
}
|
|
this.$EventBus.$emit('addSitePositionLayer', this.ourData)
|
|
this.map2D.getView().setCenter([Number(this.ourData.lntLat[0]), Number(this.ourData.lntLat[1])])
|
|
that.$store.commit('MSET_BIGPOPUP', false) // 关闭全屏弹窗
|
|
setTimeout(() => {
|
that.mobileMapElement.$refs.MobileWindow.showPopupOrData({ ...that.ourData, seebut: that.seebut, lntLat: [Number(this.ourData.lntLat[0]), Number(this.ourData.lntLat[1])] })
|
}, 500)
|
} else if (val == '实景') {
|
this.$store.commit('MSET_OPENMOBILEPANORAMA', this.ourData.panoramaurl)
|
// if(this.ourData.panoramaurl){
|
// }
|
// console.log(this.ourData.panoramaurl);
|
} else if (val == '图集') {
|
const imgsDom = document.getElementById(
|
'mobileBigImgs' + this.icon + ''
|
)
|
imgsDom.click()
|
}
|
},
|
|
// "校园建筑"↓
|
getOnceCampus (id) {
|
getChildNavDetail({ id: id }).then((res) => {
|
var result = res.data.data[0].list
|
let position = result.x.split(',')
|
const d = {
|
name: result.mechanismname,
|
lntLat: position,
|
alt: result.gd,
|
heading: result.heading,
|
pitch: result.pitch,
|
roll: result.roll,
|
bgImg: result.tpurl,
|
QRImg: result.codeurl,
|
websiteUrl: result.websiteurl,
|
telePhone: result.telephone,
|
address: result.address,
|
introduce: result.introduce,
|
video: result.videourl,
|
panoramaurl: result.panoramaurl,
|
x: result.x // 全景
|
}
|
this.ourData = d
|
})
|
}
|
// "校园建筑"↑
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// 继承类
|
.flexCenter {
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
}
|
|
.mobilePopupOurOnce {
|
padding: 8px 0 0 0;
|
margin: 0 8px;
|
|
// background-image: linear-gradient(#29baf1, #28bbf0);
|
.mobilePopupOurOnce_center {
|
// margin-bottom: 8px;
|
height: 80px;
|
// border-bottom: #d4d4d4 dashed 1px;
|
padding-bottom: 8px;
|
@extend .flexCenter;
|
|
.mobilePopupOurOnce_left {
|
width: 32%;
|
height: 100%;
|
@extend .flexCenter;
|
|
img {
|
width: 80px;
|
height: 80px;
|
}
|
}
|
|
.mobilePopupOurOnce_right {
|
width: 68%;
|
height: 100%;
|
@extend .flexCenter;
|
flex-direction: column;
|
|
.mobilePopupOurOnce_r_up {
|
height: 50%;
|
width: 100%;
|
font-size: 16px;
|
text-indent: 1em;
|
display: flex !important;
|
align-items: center !important;
|
// color: #fff;
|
}
|
|
.mobilePopupOurOnce_r_down {
|
height: 50%;
|
width: 100%;
|
padding-left: 1em;
|
display: flex !important;
|
align-items: center !important;
|
|
.mobilePopupOurOnce_r_d_in {
|
// color: #fff;
|
font-size: 17px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
