<template>
|
<!-- 信息窗口主体mobilePopupOur -->
|
<div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">
|
<div class="m_p_heard">
|
<div class="m_p_h_break" @click="closeBigPopup">
|
<i class="el-icon-arrow-left icon"></i>
|
</div>
|
<div class="m_p_h_center">
|
<div>
|
<div v-if="mBigPopup.search" style="color: #fff">查询结果{{ searchLabel ? " -- " + searchLabel : "" }}</div>
|
<el-dropdown trigger="click" @command="choiceIt" v-else>
|
<span class="el-dropdown-link">
|
{{ choiceValue }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item v-for="(item, index) in choiceData" :key="index" :command="item">{{ item.name
|
}}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
<div class="m_p_center">
|
<div class="m_p_c_tableIn" style="padding-top: 10px">
|
<el-empty v-show="onlyData.length == 0" description="暂无数据"></el-empty>
|
<mobilePopupOurOnce v-for="(citem, cindex) in onlyData" :key="citem.name + cindex"
|
:ends="onlyData.length - 1 == cindex" :onceData="citem"></mobilePopupOurOnce>
|
<div v-show="onlyData.length != 0">
|
<el-divider content-position="left">
|
<i class="el-icon-s-promotion"></i> 暂无更多
|
</el-divider>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getListarc } from '@/api/mobile/public/arc' // 头部下标签页数据
|
import { mapGetters } from 'vuex'
|
// 搜索
|
import { getListSearch } from '@/api/mobile/search/index'
|
export default {
|
computed: {
|
...mapGetters(['mBigPopup', 'popupOurOpenData'])
|
},
|
|
inject: ["mobileMapElement"],
|
|
name: 'mobilePopupOur',
|
|
data () {
|
return {
|
searchLabel: '',
|
choiceValue: '',
|
choiceKey: '',
|
choiceMethod: '',
|
choiceData: [],
|
fullscreenLoading: false,
|
choiceMain: '',
|
onlyData: []
|
}
|
},
|
mounted () {
|
this.fullscreenLoading = true
|
if (this.mBigPopup.search) {
|
// 搜索事件
|
this.searchLabel = this.mBigPopup.value
|
// console.log("查询搜索结果", this.mBigPopup.value);
|
this.fullscreenLoading = false
|
this.choiceMain = '搜索'
|
this.getListSearchMethod(this.mBigPopup.value)
|
return
|
}
|
this.choiceMain = this.popupOurOpenData.qurey // 进入的主题：列：机构单位，校园建筑
|
this.choiceData = this.popupOurOpenData.main // 带入数据 包括name、type、method
|
|
this.choiceValue = this.popupOurOpenData.main[0].name
|
this.choiceKey = this.popupOurOpenData.main[0].type
|
this.choiceMethod = this.popupOurOpenData.main[0].method
|
|
this.$store.commit('MSET_BIGPOPUPAFTER', false) // 关闭前一个弹窗
|
// console.log("请求对应街道接口", this.popupOurOpenData);
|
this.getOutList(this.choiceKey)
|
},
|
watch: {
|
fullscreenLoading () {
|
if (this.fullscreenLoading) {
|
this.notLine()
|
}
|
}
|
},
|
methods: {
|
choiceIt (command) {
|
// 头部下拉菜单
|
this.fullscreenLoading = true
|
this.choiceValue = command.name
|
this.choiceKey = command.type
|
this.choiceMethod = command.method // 更改请求
|
// console.log("请求对应头部下拉菜单接口", command);
|
this.getOutList(this.choiceKey)
|
},
|
|
closeBigPopup () {
|
this.$store.commit('MSET_BIGPOPUP', false)
|
},
|
|
// 请求
|
getOutList (type) {
|
// console.log(this.choiceMain, campus, type, "see");
|
const that = this
|
let d
|
if (this.choiceMain == '机构单位') {
|
// 不传标签页
|
d = {
|
type: type
|
}
|
} else if (
|
this.choiceMain == '生活设施' ||
|
this.choiceMain == '出入口' ||
|
this.choiceMain == '停车场'
|
) {
|
// 改变传入属性
|
d = {
|
lifetype: type
|
}
|
} else {
|
d = {
|
type: type
|
}
|
}
|
this.choiceMethod({
|
...d,
|
campus: this.mobileMapElement.campusValue
|
}).then((res) => {
|
const data = res.data.data
|
const outList = []
|
if (
|
this.mBigPopup.name == '校园建筑' ||
|
this.mBigPopup.name == '文化风景'
|
) {
|
// 校园建筑使用该id获取具体信息
|
data.forEach((item) => {
|
const icon = item.tpUrl ? item.tpUrl.split(',') : item.id
|
outList.push({
|
id: item.id,
|
name: item.mechanismName,
|
icon: icon,
|
icons: icon + item.mechanismname, // 图片响应改变
|
from: this.choiceMain,
|
video: item.videourl,
|
buts: ['定位', '实景', '图集']
|
})
|
})
|
} else if (this.mBigPopup.name == '活动') {
|
// 校园建筑使用该id获取具体信息
|
data.records.forEach((item) => {
|
const icon = item.tpurl.split(',')
|
const useData = {
|
name: item.hdname,
|
// lntLat: [item.jd, item.wd],
|
// alt: item.gd,
|
// heading: item.heading,
|
// pitch: item.pitch,
|
// roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
icons: icon + item.hdname, // 图片响应改变
|
from: this.choiceMain,
|
// QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
// address: item.address,
|
introduce: item.context,
|
video: item.videourl,
|
buts: ['定位', '实景', '图集'],
|
// 活动添加的字段
|
addressname: item.addressname.split(';'),
|
address: item.address.split(';'),
|
lxname: item.lxname.split(';'),
|
lx: item.lx.split(';'),
|
lntLat: [
|
item.address.split(';')[0].split(',')[0],
|
item.address.split(';')[0].split(',')[1]
|
],
|
panoramaurl: item.panoramaurl, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
} else {
|
// 正常获取全部数据
|
data.records.forEach((item) => {
|
const icon = item.tpurl.split(',')
|
const useData = {
|
name: item.mechanismname,
|
lntLat: item.x.split(','),
|
alt: item.gd,
|
heading: item.heading,
|
pitch: item.pitch,
|
roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
icons: icon + item.mechanismname, // 图片响应改变
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
address: item.address,
|
introduce: item.introduce,
|
video: item.videourl,
|
buts: ['定位', '实景', '图集'],
|
panoramaurl: item.panoramaurl, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
}
|
|
that.onlyData = outList
|
that.fullscreenLoading = false
|
})
|
},
|
// 搜索请求
|
getListSearchMethod (name) {
|
const val = {
|
mechanismName: name,
|
campus: this.mobileMapElement.campusValue
|
}
|
const that = this
|
getListSearch(val).then((res) => {
|
if (res.data.code != 200) {
|
return
|
}
|
const data = res.data.data
|
// 正常获取全部数据
|
const outList = []
|
|
data.forEach((item) => {
|
const icon = item.tpurl.split(',')
|
const useData = {
|
name: item.mechanismname,
|
lntLat: item.x.split(','),
|
alt: item.gd,
|
heading: item.heading,
|
pitch: item.pitch,
|
roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
icons: icon + item.mechanismname, // 图片响应改变
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
address: item.address,
|
introduce: item.introduce,
|
video: item.videourl,
|
buts: ['定位', '实景', '图集'],
|
panoramaurl: item.panoramaurl, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
that.fullscreenLoading = false
|
that.onlyData = outList
|
})
|
},
|
notLine () {
|
console.log('等待关闭')
|
setTimeout(() => {
|
this.fullscreenLoading = false
|
console.log('关闭dolog')
|
}, 5000)
|
}
|
}
|
}
|
</script>
|
