<template>
|
<!-- 浮动弹窗 mobileWindow-->
|
<div class="mobile-map-window-popup-content" v-show="MobileWindowsHide">
|
<div class="mobile-map-window-popup-content-wrapper" ref="mobile-mapContentContent" 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="publicPath + 'img/icon/n-start-v.png'" class="icon" alt v-show="audioState" />
|
<img :src="publicPath + 'img/icon/n-close-v.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="https://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 }}</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" 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>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Message
|
} from 'element-ui'
|
|
import { mapGetters } from 'vuex'
|
import { GCJ02ToWGS84 } from '@/utils/CoordTransform'
|
|
let extent = [
|
{
|
key: 1,
|
xMin: 112.51303616638316,
|
yMin: -0.103420786429659,
|
xMax: 112.67880038471827,
|
yMax: 0.000004508906477476281,
|
resolution: 0.00001903568804664224,
|
|
x: (x, y) => {
|
return -250.6503 + 2.0389 * x + 4.4338 * y
|
},
|
|
y: (x, y) => {
|
return 228.1454 - 2.321 * x + 1.4165 * y
|
},
|
},
|
|
{
|
key: 2,
|
xMin: 112.51302551881798,
|
yMin: -0.16235359398493399,
|
xMax: 112.72742295590702,
|
yMax: 0.000004509195932360471,
|
resolution: 0.00001903568804664224,
|
|
x: (x, y) => {
|
return -802.9905 + 6.1504 * x + 7.0694 * y
|
},
|
|
y: (x, y) => {
|
return 295.4321 - 3.4878 * x + 3.775 * y
|
},
|
},
|
]
|
|
export default {
|
name: 'mobileWindow',
|
computed: {
|
...mapGetters([
|
'audioState'
|
// "areaLayerSelect",
|
])
|
},
|
watch: {
|
},
|
data () {
|
return {
|
publicPath: process.env.BASE_URL,
|
// 导航是否开起
|
navigationFlag: false,
|
MobileWindowsHide: false,
|
query: {},
|
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 // 是否点击了去这，并不能再按，以及不应用路线导航
|
}
|
},
|
|
inject: ['mobileMapElement'],
|
|
mounted () {
|
this.$EventBus.$on('clearTimoutTime', () => {
|
if (this.navigationFlag == true) {
|
// window.geolocation.clearWatch()
|
|
this.$store.dispatch('removeLabelLayerIconMobelUse')
|
}
|
})
|
},
|
|
methods: {
|
// 按钮点击事件
|
openOnce (val) {
|
const that = this
|
const query = this.query
|
that.routerS = []
|
|
if (val == '去这') {
|
if (that.quzheD) {
|
console.log('不可点击')
|
return
|
}
|
|
that.navigationFlag = false
|
that.quzheD = true
|
that.$EventBus.$emit('clearTimoutTime')
|
// return;
|
// 定位
|
// console.log(this.query);
|
// that.$store.commit("set_endPosition", this.query.lntLat);
|
that.getCurrentLocation()
|
} else if (val == '实景') {
|
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 == '图集') {
|
const imgsDom = document.getElementById('mobileBigImgs')
|
if (imgsDom) {
|
imgsDom.click()
|
}
|
} else if (val == '视频') {
|
this.seebut[this.seebut.length - 1].name = '返回'
|
this.video = this.query.video
|
} else if (val == '返回') {
|
this.seebut[this.seebut.length - 1].name = '视频'
|
this.video = ''
|
} else if (val == '显示活动') {
|
const addressOur = this.changeData(query, 'addressname', 'address')
|
const lxOur = this.changeData(query, 'lxname', 'lx')
|
that.$store.dispatch('MSET_DRAWALINELAYERMANY', [
|
lxOur,
|
addressOur,
|
query
|
])
|
}
|
},
|
// 修改数据
|
changeData (data, name, value) {
|
const arr = []
|
for (const 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 () {
|
this.MobileWindowsHide = false
|
this.$store.dispatch('MSET_GETAUDIOBEGIN', 'notOpen')
|
this.$store.commit('mset_changeSelect', [undefined, undefined])
|
|
this.$parent.resetPolygonStyle()
|
this.$EventBus.$emit('removeSitePositionLayer')
|
},
|
openAudio () {
|
if (this.introduce) {
|
this.$store.dispatch('MSET_GETAUDIOBEGIN')
|
}
|
},
|
doit (now) {
|
const that = this
|
const query = this.query
|
if (now[0] == '失败') {
|
that.quzheD = false
|
return
|
}
|
|
const 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
|
|
// 加载第一条线路
|
// that.$store.commit('set_choiceRouterS', 0)
|
that.$store.dispatch('MSET_DRAWALINELAYER', datas.Str)
|
// that.$store.commit('cameraSetView', ints.start)
|
}
|
}
|
|
// 需要传入路网url
|
that.$store.dispatch('MSET_GOTOWHERE', ints)
|
},
|
|
getCurrentLocation (flag = true) {
|
const that = this
|
|
// window.geolocation.watchPosition(that.showPosition)
|
|
window.geolocation.getLocation(that.showPosition, that.showErrow, {
|
timeout: 8000
|
})
|
},
|
|
showPosition (result) {
|
const that = this
|
|
let cur = extent.find((item) => item.key == this.mobileMapElement.campusValue)
|
|
let positionWgs = GCJ02ToWGS84(result.lng, result.lat)
|
|
let position = {
|
lng: cur.x(positionWgs[0], positionWgs[1]),
|
lat: cur.y(positionWgs[0], positionWgs[1]),
|
}
|
|
const data = {
|
name: '我的位置',
|
jd: position.lng,
|
wd: position.lat
|
}
|
|
if (that.navigationFlag == true) return
|
|
if (
|
position.lng > cur.xMin &&
|
position.lng < cur.xMax &&
|
position.lat > cur.yMin &&
|
position.lat < cur.yMax
|
) {
|
that.$store.dispatch('pcMoveView', {
|
jd: position.lng,
|
wd: position.lat,
|
resolution: cur.resolution,
|
})
|
|
that.$store.dispatch('addLabelLayerIconMobelUse', {
|
data: data,
|
clear: true,
|
})
|
|
that.doit([position.lng, position.lat])
|
|
that.navigationFlag = true
|
} else {
|
Message({
|
message: '您当前位置超出学校范围',
|
type: 'warning',
|
duration: 2000
|
})
|
|
that.doit(['失败'])
|
that.$EventBus.$emit('clearTimoutTime')
|
}
|
},
|
|
showErrow (result) {
|
if (result.code == 1) {
|
confirm('您拒绝了定位功能')
|
} else if (result.code == 3 || result.code == 5) {
|
confirm('请求超时')
|
}
|
|
this.$EventBus.$emit('clearTimoutTime')
|
},
|
|
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
|
},
|
|
showPopupOrData (data) {
|
this.query = data
|
this.title = data.name || '成教楼'
|
|
this.$store.dispatch('MSET_GETAUDIOBEGIN', 'notOpen')
|
|
this.quzheD = false
|
// 数据更改
|
// this.fullscreenLoading = true;
|
this.video = '' // 清除视频
|
this.seebut = [] // 清除按钮
|
|
const queryData = this.query
|
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 (const 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(',').map(item => this.updateUrl(item))
|
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 (const k in queryData) {
|
for (const 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(() => {
|
const Str = document.querySelector(
|
'.mobileBig-center-introduce'
|
).innerText
|
this.$store.dispatch('MSET_GETAUDIO', Str) // 加入语音
|
}, 20)
|
}
|
}
|
}
|
}
|
|
this.MobileWindowsHide = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.centersFlex {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.mobile-map-window-popup-content {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
background: rgba(0, 0, 0, .3);
|
z-index: 900;
|
|
&-wrapper {
|
position: absolute;
|
top: auto;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 8px 8px 0 0;
|
|
.mobiletitle {
|
color: #000;
|
width: 100%;
|
height: 35px;
|
border-bottom: 1px solid #ebebeb;
|
font-size: 16px;
|
padding: 8px 14px;
|
padding-right: 27px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
line-height: 20px;
|
box-sizing: border-box;
|
}
|
|
.mobilelabel-content {
|
width: 100%;
|
height: auto;
|
|
// 内容样式
|
.mobile-popup-imgs-heard {
|
padding: 0 10px;
|
width: 100%;
|
text-align: justify;
|
letter-spacing: 1px;
|
box-sizing: border-box;
|
|
.mobile-popup-imgs-h-close {
|
width: 35px;
|
height: 34px;
|
background-color: transparent;
|
position: absolute;
|
@extend .centersFlex;
|
border-radius: 100px;
|
right: 0;
|
top: 0;
|
|
.icon {
|
color: #000;
|
font-size: 25px;
|
}
|
}
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
|
.imgs {
|
margin-top: 10px;
|
margin-left: 50%;
|
margin-bottom: 10px;
|
width: 96px;
|
height: 96px;
|
transform: translate(-50%, 0%);
|
vertical-align: middle;
|
}
|
|
//内容显示
|
$centerFontSize: 13px;
|
|
.mobileBig-center-our {
|
width: 100%;
|
height: auto;
|
font-size: $centerFontSize;
|
|
.mobileBig-center {
|
width: 100%;
|
line-height: 36px;
|
border-bottom: 1px solid #f7f7f7;
|
@extend .centersFlex;
|
|
.m-c-title {
|
color: #000;
|
width: 21%;
|
}
|
|
.m-c-center {
|
width: 79%;
|
// text-indent: 2em;
|
word-wrap: break-word;
|
color: #000;
|
line-height: 25px;
|
}
|
}
|
|
.mobileBig-center-introduce {
|
width: 100%;
|
line-height: 36px;
|
// border: 1px solid red;
|
word-wrap: break-word;
|
text-indent: 2em;
|
color: #000;
|
}
|
}
|
}
|
|
.mobile-popup-control {
|
width: 100%;
|
height: 20px;
|
// background-color: #f7f7f7;
|
border-top: 1px solid #ebebeb;
|
padding: 5px 0 8px 0;
|
display: flex;
|
align-items: center;
|
// background-image: linear-gradient(#29baf1, #28bbf0);
|
justify-content: center;
|
position: relative;
|
|
.mobilePopupOurOnce_r_d_in {
|
color: #000;
|
}
|
}
|
}
|
}
|
}
|
|
.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>
|
