<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 (this.onceData.icon) {
|
this.srcList = this.onceData.icon
|
this.icon = this.srcList[0]
|
}
|
if (this.onceData.from == '校区建筑' || this.onceData.from == '文化风景') {
|
this.getOnceCampus(this.onceData.id)
|
} else {
|
this.ourData = this.onceData
|
}
|
},
|
data () {
|
return {
|
icon: '',
|
srcList: [],
|
ourData: {}
|
}
|
},
|
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: {
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
openOnce (val) {
|
const positionObj = this.coordinate(this.ourData.x)
|
if (!this.ourData.name) {
|
console.log('数据传输失败')
|
return
|
}
|
const that = this
|
if (val == '定位') {
|
// 活动定位
|
if (this.ourData.name == '活动') {
|
console.log(this.ourData)
|
return
|
}
|
// 随地图移动窗口
|
this.$store.commit('MSET_BIGPOPUP', false) // 关闭全屏弹窗
|
setTimeout(() => {
|
// // 定制化窗体
|
const d = {
|
position: {},
|
lntLat: [positionObj.lng, positionObj.lat],
|
query: { ...this.ourData, seebut: this.seebut },
|
useJWD: true, // 仅使用经纬度
|
from: 'PopupOurOnce'
|
}
|
that.$store.dispatch('setMobileWindows', d)
|
}, 500)
|
// 固定窗口
|
// that.$store.dispatch("SET_OPENWIDOWFIXED", d);
|
} 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) => {
|
console.log(res, 5656)
|
var result = res.data.data[0].list
|
const d = {
|
name: result.mechanismname,
|
lntLat: [result.jd, result.wd],
|
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>
|
