<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: {
|
openOnce (val) {
|
console.log(this.ourData)
|
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: that.ourData.lntLat,
|
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) {
|
console.log(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, // 全景
|
}
|
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>
|
