<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'
|
const layers = {
|
mobileTagLayer: null,
|
wayLayer: null,
|
sceneLayer: null,
|
videoLayer: null,
|
activityLayer: null,
|
aedLayer: null,
|
parkLayer: null,
|
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
|
layers[this.leftNavData[0].layer].show = true
|
} else {
|
const lnd = this.leftNavData
|
for (const k in lnd) {
|
if (layers[this.leftNavData[k].layer]._show) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
layers[this.leftNavData[k].layer].show = false
|
}
|
}
|
}
|
}
|
},
|
computed: {
|
...mapGetters(['iconHide', 'dimensionData', 'seeRight', 'pinchFlag'])
|
},
|
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: 'mobileTagLayer',
|
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,
|
// mobileTagLayer: 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 (layers[this.leftNavData[k].layer]._show) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
layers[this.leftNavData[k].layer].show = false
|
}
|
}
|
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
layers[item.layer].show = true
|
// console.log("飞入");
|
// this.flyTo(item);
|
this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
|
} else {
|
item.img = item.normal
|
layers[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,
|
// });
|
// },
|
overlayClick (data, billboard, label, k, ourD) {
|
const that = this
|
billboard.on(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.pinchFlag == true) {
|
return
|
}
|
const d = {
|
name:
|
data[k].mechanismname ||
|
data[k].roadname ||
|
data[k].vrname ||
|
(ourD.label == '监控' ? '监控' : '无显示名字'),
|
bgImg: data[k].tpurl,
|
video: ourD.label == '监控' ? data[k].vrurl : '',
|
from: 'labels',
|
introduce: data[k].introduce,
|
panoramaurl: ourD.label == '实景' ? data[k].vrurl : ''
|
}
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.overlay._position._lng, e.overlay._position._lat],
|
d
|
)
|
})
|
label.on(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.pinchFlag == true) {
|
return
|
}
|
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
|
)
|
})
|
},
|
initialize () {
|
var that = this
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
layers.mobileTagLayer = new global.DC.VectorLayer('mobileTagLayer')
|
global.viewer.addLayer(layers.mobileTagLayer)
|
|
layers.wayLayer = new global.DC.VectorLayer('wayLayer')
|
global.viewer.addLayer(layers.wayLayer)
|
|
layers.sceneLayer = new global.DC.VectorLayer('sceneLayer')
|
global.viewer.addLayer(layers.sceneLayer)
|
|
layers.videoLayer = new global.DC.VectorLayer('videoLayer')
|
global.viewer.addLayer(layers.videoLayer)
|
|
layers.activityLayer = new global.DC.VectorLayer('activityLayer')
|
global.viewer.addLayer(layers.activityLayer)
|
|
layers.aedLayer = new global.DC.VectorLayer('aedLayer')
|
global.viewer.addLayer(layers.aedLayer)
|
|
layers.parkLayer = new global.DC.VectorLayer('parkLayer')
|
global.viewer.addLayer(layers.parkLayer)
|
|
layers.comeLayer = new global.DC.VectorLayer('comeLayer')
|
global.viewer.addLayer(layers.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 imgUrl = null
|
let sateName = null
|
let data = null
|
|
if (ourD.label == '监控' || ourD.label == '实景') {
|
data = res.data.data.records
|
} else {
|
data = res.data.data
|
}
|
|
const position = that.changePoiton(data)
|
const num = data.length
|
for (let k = 0; k < num; k++) {
|
sateName = data[k].mechanismname
|
if (ourD.label == '标签') {
|
imgUrl = '/img/icon/m-t.png'
|
} else if (ourD.label == '道路') {
|
imgUrl = '/img/icon/m-w.png'
|
sateName = data[k].roadname
|
} else if (ourD.label == '实景') {
|
imgUrl = '/img/icon/m-s.png'
|
sateName = data[k].vrname
|
} else if (ourD.label == 'AED') {
|
imgUrl = null
|
} else if (ourD.label == '停车') {
|
imgUrl = '/img/icon/m-p.png'
|
} else if (ourD.label == '出入') {
|
imgUrl = '/img/icon/m-c.png'
|
} else if (ourD.label == '监控') {
|
imgUrl = '/img/icon/m-v.png'
|
sateName = data[k].vrname
|
}
|
|
const billboard = new global.DC.Billboard(position[k], imgUrl)
|
|
const label = new global.DC.Label(
|
position[k],
|
sateName
|
)
|
|
label.setStyle({
|
fillColor: global.DC.Color.RED,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 8, // 边框大小，
|
font: '12px sans-serif',
|
pixelOffset: { x: 0, y: -24 }
|
})
|
|
that.overlayClick(data, billboard, label, k, ourD)
|
|
layers[that.leftNavData[n].layer].addOverlay(billboard) // 加入图标
|
layers[that.leftNavData[n].layer].addOverlay(label)
|
}
|
layers[that.leftNavData[n].layer].positions = position
|
if (that.leftNavData[n].layer == 'mobileTagLayer') {
|
// that.leftNavData[n].img = that.leftNavData[n].checked;
|
} else {
|
layers[that.leftNavData[n].layer].show = false
|
}
|
})
|
}
|
// setTimeout(() => {
|
// this.mobileTagLayer.show = false;
|
// }, 500);
|
},
|
|
changePoiton (data) {
|
const that = this
|
const list = []
|
const num = data.length
|
for (let i = 0; i < num; i++) {
|
let obj = {}
|
if (data[i].x && data[i].x != '') {
|
const position = that.coordinate(data[i].x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: data[i].jd, lat: data[i].wd
|
}
|
}
|
list.push(new global.DC.Position(Number(obj.lng), Number(obj.lat), 0))
|
}
|
return list
|
},
|
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
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>
|
