<template>
|
<!-- 右侧标签管理栏
|
mobileLeftNav
|
-->
|
<div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
|
<!-- :style="[coutrolStyle]" -->
|
<div class="m-left-coutrol" @click="changeIconHide">
|
<i :class="icons"></i>
|
</div>
|
<ul>
|
<li
|
v-for="(item, index) in leftNavData"
|
:key="index"
|
@click="leftNavClick(item)"
|
v-show="!item.notShow"
|
>
|
<img :style="[imgStyle]" :src="item.img" alt />
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import {
|
// getListdoor, //出入
|
// getListaed, //AED
|
// getListparking, //停车场
|
getListarchitecture, // 全景
|
getListarchitecture1, // 标签
|
getListroad, // 道路
|
getListcat // 出入-AED-停车场
|
} from '@/api/mobile/piont/index'
|
import { getListVideo } from '@/api/mobile/monitor/index'
|
|
window.tagLayer = null
|
window.wayLayer = null
|
window.sceneLayer = null
|
window.videoLayer = null
|
window.activityLayer = null
|
window.aedLayer = null
|
window.parkLayer = null
|
window.comeLayer = null
|
export default {
|
name: 'mobileLeftNav',
|
watch: {
|
iconHide: {
|
immediate: true,
|
handler (newCode, oldCode) {
|
if (newCode) {
|
this.icons = 'el-icon-d-arrow-left'
|
this.navStyle.right = '-51px'
|
this.imgStyle.right = '6px'
|
} else {
|
this.icons = 'el-icon-d-arrow-right'
|
this.navStyle.right = '0px'
|
this.imgStyle.right = '0'
|
}
|
}
|
},
|
seeRight () {
|
if (this.seeRight) {
|
this.leftNavData[0].flag = false
|
this.leftNavData[0].img = this.leftNavData[0].checked
|
window[this.leftNavData[0].layer].show = true
|
} else {
|
const lnd = this.leftNavData
|
for (const k in lnd) {
|
if (window[this.leftNavData[k].layer]._show) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
window[this.leftNavData[k].layer].show = false
|
}
|
}
|
}
|
}
|
},
|
computed: {
|
...mapGetters(['iconHide', 'dimensionData', 'seeRight'])
|
},
|
data () {
|
return {
|
icons: 'el-icon-d-arrow-right',
|
navStyle: {
|
right: '0px'
|
},
|
imgStyle: {
|
right: '0'
|
},
|
leftNavData: [
|
{
|
flag: true,
|
label: '标签',
|
// img: "/img/leftnav/tag.png",
|
img: '/img/leftnav/tag-checked.png',
|
normal: '/img/leftnav/tag.png',
|
checked: '/img/leftnav/tag-checked.png',
|
layer: 'tagLayer',
|
methods: getListarchitecture1,
|
imgSrc: '/img/icon/tarrow_xq.png'
|
// imgSrc: "img/mobile/pink.png",
|
},
|
{
|
flag: false,
|
label: '道路',
|
img: '/img/leftnav/way.png',
|
normal: '/img/leftnav/way.png',
|
checked: '/img/leftnav/way-checked.png',
|
layer: 'wayLayer',
|
methods: getListroad,
|
imgSrc: 'img/mobile/green.png'
|
},
|
{
|
flag: false,
|
label: '实景',
|
img: '/img/leftnav/scene.png',
|
normal: '/img/leftnav/scene.png',
|
checked: '/img/leftnav/scene-checked.png',
|
layer: 'sceneLayer',
|
methods: getListarchitecture,
|
imgSrc: 'img/leftnav/map-panorama.png'
|
// imgSrc: "img/mobile/blue.png",
|
},
|
{
|
flag: false,
|
label: '监控',
|
img: '/img/leftnav/monitor.png',
|
normal: '/img/leftnav/monitor.png',
|
checked: '/img/leftnav/monitor-checked.png',
|
layer: 'videoLayer',
|
methods: getListVideo,
|
imgSrc: '/img/leftnav/map-monitor.png'
|
// imgSrc: "img/mobile/blue.png",
|
},
|
// {
|
// flag: false,
|
// label: "活动",
|
// img: "/img/leftnav/activity.png",
|
// normal: "/img/leftnav/activity.png",
|
// checked: "/img/leftnav/activity-checked.png",
|
// layer: "activityLayer",
|
// methods: getListdoor,
|
// imgSrc: "img/mobile/brown.png",
|
// },
|
{
|
flag: false,
|
label: 'AED',
|
img: '/img/leftnav/aed.png',
|
normal: '/img/leftnav/aed.png',
|
checked: '/img/leftnav/aed-checked.png',
|
layer: 'aedLayer',
|
methods: getListcat,
|
type: 9,
|
imgSrc: 'img/leftnav/map-aed.png',
|
// imgSrc: "img/mobile/pink.png",
|
notShow: true
|
},
|
{
|
flag: false,
|
label: '停车',
|
img: '/img/leftnav/park.png',
|
normal: '/img/leftnav/park.png',
|
checked: '/img/leftnav/park-checked.png',
|
layer: 'parkLayer',
|
methods: getListcat,
|
type: 11,
|
imgSrc: '/img/icon/p-biao.png'
|
// imgSrc: "img/mobile/popcorn.png",
|
},
|
{
|
flag: false,
|
label: '出入',
|
img: '/img/leftnav/come.png',
|
normal: '/img/leftnav/come.png',
|
checked: '/img/leftnav/come-checked.png',
|
layer: 'comeLayer',
|
methods: getListcat,
|
type: 12,
|
imgSrc: 'img/leftnav/map-activity.png'
|
// imgSrc: "img/mobile/purple.png",
|
}
|
]
|
// viewer: null,
|
// tagLayer: null,
|
// wayLayer: null,
|
// sceneLayer: null,
|
// videoLayer: null,
|
// activityLayer: null,
|
// aedLayer: null,
|
// parkLayer: null,
|
// comeLayer: null,
|
}
|
},
|
created () { },
|
mounted () { },
|
methods: {
|
changeIconHide () {
|
const isif = this.iconHide
|
this.$store.commit('MSET_ICONHIDE', !isif)
|
},
|
leftNavClick (item) {
|
// console.log(123132);
|
// 判断并关闭已开启标签
|
const lnd = this.leftNavData
|
for (const k in lnd) {
|
// console.log(this[this.leftNavData[k].layer]);
|
if (lnd[k].label == item.label) {
|
// console.log(lnd[k].label, "当前点击");
|
continue
|
}
|
if (window[this.leftNavData[k].layer]._show) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
window[this.leftNavData[k].layer].show = false
|
}
|
}
|
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
window[item.layer].show = true
|
// console.log("飞入");
|
// this.flyTo(item);
|
this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
|
} else {
|
item.img = item.normal
|
window[item.layer].show = false
|
}
|
},
|
// flyTo(item) {
|
// const that = this;
|
// const posi = this[item.layer].positions[0];
|
// // console.log(posi);
|
// const lntLat =
|
// that.dimensionData.pitch == -45
|
// ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
|
// : [posi.lng + 0.01197, posi.lat - 0.00055, 500];
|
// // that.mviewer.camera.flyTo({
|
// // destination: Cesium.Cartesian3.fromDegrees(
|
// // lntLat[0],
|
// // lntLat[1],
|
// // lntLat[2]
|
// // ),
|
// // });
|
// // return;
|
// this.$store.dispatch("mapFlyTo", {
|
// // 飞入
|
// lntLat: lntLat,
|
// // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
|
// // lntLat: [121.50492752204283, 31.21567802276832, 2530],
|
// heading: that.dimensionData.heading,
|
// pitch: that.dimensionData.pitch,
|
// roll: that.dimensionData.roll,
|
// noOpen: true,
|
// });
|
// },
|
initialize () {
|
var that = this
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
window.tagLayer = new global.DC.HtmlLayer('tagLayer')
|
global.viewer.addLayer(tagLayer)
|
|
window.wayLayer = new global.DC.HtmlLayer('wayLayer')
|
global.viewer.addLayer(wayLayer)
|
|
// sceneLayer = new global.DC.VectorLayer("sceneLayer");
|
window.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
|
global.viewer.addLayer(sceneLayer)
|
|
window.videoLayer = new global.DC.HtmlLayer('videoLayer')
|
global.viewer.addLayer(videoLayer)
|
|
// activityLayer = new global.DC.VectorLayer("activityLayer");
|
window.activityLayer = new global.DC.HtmlLayer('activityLayer')
|
global.viewer.addLayer(activityLayer)
|
|
// aedLayer = new global.DC.VectorLayer("aedLayer");
|
window.aedLayer = new global.DC.HtmlLayer('aedLayer')
|
global.viewer.addLayer(aedLayer)
|
|
window.parkLayer = new global.DC.HtmlLayer('parkLayer')
|
global.viewer.addLayer(parkLayer)
|
|
// comeLayer = new global.DC.VectorLayer("comeLayer");
|
window.comeLayer = new global.DC.HtmlLayer('comeLayer')
|
global.viewer.addLayer(comeLayer)
|
|
const ourNum = that.leftNavData.length
|
for (let n = 0; n < ourNum; n++) {
|
const ourD = this.leftNavData[n]
|
const d = ourD.type ? { lifetype: ourD.type } : {}
|
ourD.methods(d).then((res) => {
|
let dom
|
const data = res.data.data
|
const position = that.changePoiton(data)
|
const num = data.length
|
for (let k = 0; k < num; k++) {
|
if (ourD.label == '标签') {
|
dom = `
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${data[k].mechanismname}
|
</div>
|
<div class="tag-angle-content">
|
<img src="${ourD.imgSrc}">
|
</div>
|
</div>
|
`
|
} else if (ourD.label == '道路') {
|
// <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
|
// ${data[k].mechanismname}
|
// </div>
|
dom = `
|
<div class="way-entitys-box">
|
<div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
|
${data[k].roadname}
|
</div>
|
<div class="way-sign-box">
|
<img src="/img/icon/roadsign3.png">
|
</div>
|
</div>
|
`
|
} else if (ourD.label == '实景') {
|
// <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
|
// ${data[k].mechanismname}
|
// </div>
|
dom = `
|
<div class="scene-entitys-box">
|
<div>${data[k].mechanismname}</div>
|
<img src="/img/leftnav/map-panorama.png" alt="">
|
</div>
|
`
|
} else if (ourD.label == 'AED') {
|
dom = `
|
<div class="mobiletag-entitys-box">
|
<div class="tag-content">
|
${data[k].mechanismname}
|
</div>
|
<div class="tag-angle-content">
|
<img src="${ourD.imgSrc}">
|
</div>
|
</div>
|
`
|
} else if (ourD.label == '停车') {
|
dom = `
|
<div class="park-entitys-box">
|
<div class="park-title" alt="${data[k].mechanismname}">
|
</div>
|
<div class="park-sign-box">
|
<div>
|
<img src="/img/icon/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
|
</div>
|
<div>
|
<img src="/img/icon/roadsign.png" width="5" height="21">
|
</div>
|
</div>
|
</div>
|
`
|
} else if (ourD.label == '出入') {
|
dom = `
|
<div class="mobiletag-entitys-box-pink">
|
<div class="tag-content">
|
${data[k].mechanismname}
|
</div>
|
<div class="tag-angle-content">
|
<img src="${ourD.imgSrc}">
|
</div>
|
</div>
|
`
|
} else if (ourD.label == '监控') {
|
dom = `
|
<div class="monitor-entitys-box">
|
<div>${data[k].mechanismname}</div>
|
<img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
|
</div>
|
`
|
}
|
const divIcon = new global.DC.DivIcon(position[k], dom)
|
// 订阅事件
|
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
|
// console.log(data[k]);
|
const d = {
|
name:
|
data[k].mechanismname ||
|
data[k].roadname ||
|
(ourD.label == '监控' ? '监控' : '无显示名字'),
|
bgImg: data[k].tpurl,
|
video: data[k].videourl || '',
|
from: 'labels',
|
introduce: data[k].introduce,
|
panoramaurl: data[k].panoramaurl
|
}
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.overlay._position._lng, e.overlay._position._lat],
|
d
|
)
|
})
|
window[that.leftNavData[n].layer].addOverlay(divIcon) // 加入图标
|
}
|
window[that.leftNavData[n].layer].positions = position
|
if (that.leftNavData[n].layer == 'tagLayer') {
|
// that.leftNavData[n].img = that.leftNavData[n].checked;
|
} else {
|
window[that.leftNavData[n].layer].show = false
|
}
|
})
|
}
|
// setTimeout(() => {
|
// this.tagLayer.show = false;
|
// }, 500);
|
},
|
changePoiton (data) {
|
// console.log(data);
|
const list = []
|
const num = data.length
|
for (let i = 0; i < num; i++) {
|
list.push(new global.DC.Position(data[i].jd, data[i].wd, 0))
|
}
|
return list
|
},
|
mobileOpenImgs1 () {
|
const imgsDom = document.getElementById('mobileBigImgs')
|
imgsDom.click()
|
},
|
goOn1 () { },
|
openPopupS (position, lntLat, query) {
|
const that = this
|
// 定制化窗体
|
const d = {
|
position,
|
lntLat,
|
query: { ...(query || {}), position, lntLat },
|
useJWD: true // 仅使用经纬度
|
}
|
that.$store.dispatch('setMobileWindows', d)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.m-left-nav {
|
position: fixed;
|
bottom: 30px;
|
right: 0px;
|
z-index: 200;
|
background-color: #fff;
|
border-radius: 17px 0 0 17px;
|
transition: all 0.5s;
|
.m-left-coutrol {
|
position: absolute;
|
left: -24px;
|
top: 79px;
|
width: 25px;
|
height: 60px;
|
background-color: #fff;
|
border-radius: 17px 0 0 17px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
ul {
|
position: relative;
|
top: 3px;
|
}
|
li {
|
margin-bottom: 6px;
|
font-weight: 400;
|
display: block;
|
width: 80px;
|
height: 30px;
|
line-height: 30px;
|
background-color: #fff;
|
border-radius: 15px;
|
text-align: center;
|
font-size: 0;
|
cursor: pointer;
|
|
img {
|
position: relative;
|
transition: all 0.5s;
|
width: 24px;
|
height: 24px;
|
vertical-align: middle;
|
margin-right: 10px;
|
image-rendering: -moz-crisp-edges;
|
image-rendering: -o-crisp-edges;
|
image-rendering: -webkit-optimize-contrast;
|
image-rendering: crisp-edges;
|
-ms-interpolation-mode: nearest-neighbor;
|
}
|
|
span {
|
display: inline-block;
|
vertical-align: middle;
|
font-size: 14px;
|
color: #2f2f2f;
|
}
|
}
|
}
|
.nones {
|
display: none;
|
}
|
</style>
|
