<template>
|
<!-- 浮动弹窗 mobileWindow-->
|
<div ref="mobile-mapContentContent" v-show="!MobileWindowsHide" id="mobile-map_content_content">
|
<div class="mobiletitle">
|
{{ title }}
|
<span class="mobile_audio" @click="openAudio" v-show="introduce && !video">
|
<!-- <i class="el-icon-video-play icon" v-show="!audioState"></i>
|
<i class="el-icon-video-pause icon" v-show="audioState"></i>-->
|
<img src="/img/icon/start-video.png" class="icon" alt v-show="audioState" />
|
<img src="/img/icon/close-video.png" class="icon" alt v-show="!audioState" />
|
<!-- <div id="bdtts_div_id">
|
<audio id="tts_autio_id" autoplay="autoplay">
|
<source
|
id="tts_source_id"
|
src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=请输入文字"
|
type="audio/mpeg"
|
/>
|
<embed id="tts_embed_id" height="0" width="0" src="" />
|
</audio>
|
</div>-->
|
</span>
|
</div>
|
<div class="mobilelabel-content">
|
<div class="mobile-popup-imgs-heard">
|
<div class="mobile-popup-imgs-h-close">
|
<i class="el-icon-close icon" @click="closeWindow"></i>
|
</div>
|
<!-- <video :src="video" controls="controls" autoplay v-if="video"></video> -->
|
<playVideo :src="video" controls="controls" autoplay v-if="video"></playVideo>
|
<!-- <img :src="url" alt="" v-show="url && !video" /> -->
|
<!-- style="width: 100px; height: 100px" -->
|
<el-image
|
class="imgs"
|
:src="url"
|
id="mobileBigImgs"
|
v-show="url && !video"
|
:preview-src-list="srcList"
|
>
|
<!-- v-show="false" -->
|
</el-image>
|
<!-- <div>{{ query.query }}</div> -->
|
<div class="mobileBig-center-our" v-show="!video">
|
<div v-for="(item, index) in center" :key="index" class="mobileBig-center">
|
<div class="m-c-title">{{ item.name }}：</div>
|
<span class="m-c-center">{{ item.value }}</span>
|
</div>
|
<div
|
class="mobileBig-center-introduce"
|
style="padding-top: 10px"
|
v-show="introduce"
|
v-html="introduce"
|
></div>
|
</div>
|
</div>
|
<div class="mobile-popup-control">
|
<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 == '去这'
|
? quzheD
|
? 'el-icon-loading'
|
: 'el-icon-finished'
|
: item.name == '视频' || item.name == '返回'
|
? 'el-icon-video-camera-solid'
|
: ''
|
"
|
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>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex"
|
export default {
|
name: "mobileWindow",
|
computed: {
|
...mapGetters([
|
"MobileWindowsHide",
|
"query",
|
"MobileWindowChangeData",
|
"audioState",
|
// "areaLayerSelect",
|
]),
|
},
|
watch: {
|
MobileWindowChangeData () {
|
this.$store.dispatch("MSET_GETAUDIOBEGIN", "notOpen")
|
this.quzheD = false
|
//数据更改
|
// this.fullscreenLoading = true;
|
if (!this.MobileWindowsHide) {
|
this.video = "" //清除视频
|
this.seebut = [] //清除按钮
|
let queryData = this.query.query
|
// console.log(queryData, 789);
|
this.title = queryData.name
|
//判断是否显示操作按钮
|
if (queryData.seebut) {
|
this.seebut = queryData.seebut
|
if (queryData.from == "活动") {
|
this.seebut = []
|
this.seebut.push({
|
name: "图集",
|
})
|
this.seebut.push({
|
name: "显示活动",
|
})
|
if (queryData.notAddGoOn == "notAddGoOn") {
|
this.seebut.push({
|
name: "去这",
|
})
|
}
|
}
|
for (let k in this.seebut) {
|
if (this.seebut[k].name == "定位") {
|
this.seebut.splice(k, k + 1)
|
}
|
}
|
if (queryData.notAddGoOn != "notAddGoOn") {
|
this.seebut.push({
|
name: "去这",
|
})
|
}
|
} else {
|
this.seebut = [
|
// {
|
// name: "实景",
|
// },
|
{
|
name: "图集",
|
},
|
{
|
name: "去这",
|
},
|
]
|
}
|
//图集
|
if (queryData.bgImg) {
|
this.srcList = queryData.bgImg.split(",")
|
this.url = this.srcList[0]
|
} else {
|
this.seebut = this.seebut.filter((res) => {
|
return res.name != "图集"
|
})
|
}
|
//视频
|
if (queryData.video) {
|
if (queryData.from == "labels") {
|
this.seebut = []
|
this.video = queryData.video
|
} else {
|
this.seebut.push({ name: "视频" })
|
}
|
}
|
//全景
|
if (queryData.panoramaurl) {
|
this.panoramaurl = queryData.panoramaurl
|
this.seebut = this.seebut.filter((res) => {
|
return res.name != "实景"
|
})
|
this.seebut.splice(0, 0, { name: "实景" })
|
} else {
|
this.panoramaurl = ""
|
this.seebut = this.seebut.filter((res) => {
|
return res.name != "实景"
|
})
|
}
|
//中心内容
|
this.center = []
|
for (let k in queryData) {
|
for (let n in this.getCenter) {
|
if (
|
k == this.getCenter[n].name &&
|
queryData[k] &&
|
queryData.from != "活动" &&
|
this.getCenter[n].value == "地址"
|
) {
|
this.center.push({
|
name: this.getCenter[n].value,
|
value: queryData[k] ? queryData[k] : "暂无",
|
})
|
}
|
if (k == "introduce") {
|
this.introduce = queryData[k]
|
if (this.introduce) {
|
setTimeout(() => {
|
let Str = document.querySelector(
|
".mobileBig-center-introduce"
|
).innerText
|
this.$store.dispatch("MSET_GETAUDIO", Str) //加入语音
|
}, 20)
|
}
|
}
|
}
|
}
|
}
|
},
|
},
|
data () {
|
return {
|
getCenter: [
|
{
|
name: "websiteUrl",
|
value: "网址",
|
},
|
{
|
name: "telePhone",
|
value: "电话",
|
},
|
{
|
name: "address",
|
value: "地址",
|
},
|
// {
|
// name: "introduce",
|
// value: "详情",
|
// },
|
],
|
introduce: "暂无详情数据",
|
title: "",
|
fullscreenLoading: false,
|
url: "",
|
video: "",
|
positions: "",
|
srcList: [],
|
seebut: [],
|
center: [],
|
panoramaurl: "",
|
quzheD: false, //是否点击了去这，并不能再按，以及不应用路线导航
|
}
|
},
|
methods: {
|
//按钮点击事件
|
openOnce (val) {
|
let that = this
|
that.routerS = []
|
let once = true
|
let query = this.query.query
|
// console.log(query);
|
if (val == "去这") {
|
if (that.quzheD) {
|
console.log("不可点击")
|
return
|
}
|
that.quzheD = true
|
// return;
|
//定位
|
// console.log(this.query.query);
|
// that.$store.commit("set_endPosition", this.query.query.lntLat);
|
let doit = (now) => {
|
if (now[0] == "失败") {
|
that.quzheD = false
|
return
|
}
|
let ints = {
|
start: [+now[0], +now[1]],
|
end: [+query.lntLat[0], +query.lntLat[1], 360],
|
// start: [+query.lntLat[0], +query.lntLat[1], 360],
|
// end: [114.031946, 27.621475],
|
type: "driving",
|
fn: function (datas) {
|
//获取回调路径
|
that.routerS.push(datas)
|
that.quzheD = false
|
if (once) {
|
once = false
|
//加载第一条线路
|
that.$store.commit("set_choiceRouterS", 0)
|
that.$store.dispatch("MSET_DRAWALINELAYER", [datas.Str, query])
|
that.$store.commit("cameraSetView", ints.start)
|
}
|
},
|
}
|
that.$store.dispatch("MSET_GOTOWHERE", ints)
|
}
|
that.$store.commit("GET_NOWPOSITION", (res) => {
|
console.log(res)
|
doit(res)
|
})
|
} else if (val == "实景") {
|
console.log(this.panoramaurl, query)
|
this.$store.commit("MSET_OPENMOBILEPANORAMA", this.panoramaurl)
|
return
|
this.$store.commit(
|
"MSET_OPENMOBILEPANORAMA",
|
"https://www.kuleiman.com/110487/index.html?m=1"
|
)
|
} else if (val == "图集") {
|
let imgsDom = document.getElementById("mobileBigImgs")
|
if (imgsDom) {
|
imgsDom.click()
|
}
|
} else if (val == "视频") {
|
this.seebut[this.seebut.length - 1].name = "返回"
|
this.video = this.query.query.video
|
} else if (val == "返回") {
|
this.seebut[this.seebut.length - 1].name = "视频"
|
this.video = ""
|
} else if (val == "显示活动") {
|
let addressOur = this.changeData(query, "addressname", "address")
|
let lxOur = this.changeData(query, "lxname", "lx")
|
console.log(addressOur, lxOur)
|
that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
|
lxOur,
|
addressOur,
|
query,
|
])
|
}
|
},
|
//修改数据
|
changeData (data, name, value) {
|
let arr = []
|
for (let k in data[name]) {
|
arr.push({
|
name: data[name][k],
|
value:
|
name == "lxname"
|
? data[value][k]
|
.split("(")[1]
|
.split(")")[0]
|
.split(",")
|
.join(";")
|
.split(" ")
|
.join(",")
|
: [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
|
})
|
}
|
return arr
|
},
|
closeWindow () {
|
if (!this.MobileWindowsHide) {
|
let that = this
|
this.$store.dispatch("closeMobileWindowsDom") //关闭随地图弹窗
|
if (window.select.overlay != undefined) {
|
window.select.overlay.setStyle({
|
material: window.select.color,
|
outline: false,
|
})
|
|
that.$store.commit("mset_changeSelect", [undefined, undefined])
|
}
|
}
|
},
|
openAudio () {
|
if (this.introduce) {
|
this.$store.dispatch("MSET_GETAUDIOBEGIN")
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.mobile_audio {
|
margin-left: 3px;
|
.icon {
|
font-size: 20px;
|
width: 20px;
|
height: 20px;
|
float: right;
|
position: relative;
|
right: 8px;
|
}
|
}
|
#bdtts_div_id {
|
width: 100px;
|
height: 100px;
|
display: inline-block;
|
position: absolute;
|
top: -50px;
|
background-color: #fff;
|
}
|
</style>
|
