<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 LeftNavLayer = {
|
leftTagLayer: null,
|
leftWayLayer: null,
|
leftSceneLayer: null,
|
leftMonitorLayer: null,
|
leftActivityLayer: null,
|
leftAedLayer: null,
|
leftParkLayer: null,
|
leftComeLayer: null
|
}
|
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import { Icon, Style, Fill, Text, Stroke } from 'ol/style.js'
|
|
|
export default {
|
name: 'mobileLeftNav',
|
inject: ['mobileMapElement'],
|
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
|
this[this.leftNavData[0].layer].setVisible(true)
|
} else {
|
const lnd = this.leftNavData
|
for (const k in lnd) {
|
if (this[this.leftNavData[k].layer].getVisible()) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
this[this.leftNavData[k].layer].setVisible(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: "/changjing/img/leftnav/tag.png",
|
img: '/changjing/img/leftnav/tag-checked.png',
|
normal: '/changjing/img/leftnav/tag.png',
|
checked: '/changjing/img/leftnav/tag-checked.png',
|
layer: 'leftNavBQ',
|
methods: getListarchitecture1,
|
imgSrc: '/changjing/img/icon/tarrow_xq.png'
|
// imgSrc: "/changjing/imgmobile/pink.png",
|
},
|
{
|
flag: false,
|
label: '道路',
|
img: '/changjing/img/leftnav/way.png',
|
normal: '/changjing/img/leftnav/way.png',
|
checked: '/changjing/img/leftnav/way-checked.png',
|
layer: 'leftNavDL',
|
methods: getListroad,
|
imgSrc: '/changjing/imgmobile/green.png'
|
},
|
{
|
flag: false,
|
label: '实景',
|
img: '/changjing/img/leftnav/scene.png',
|
normal: '/changjing/img/leftnav/scene.png',
|
checked: '/changjing/img/leftnav/scene-checked.png',
|
layer: 'leftNavSJ',
|
methods: getListarchitecture,
|
imgSrc: '/changjing/img/leftnav/map-panorama.png'
|
// imgSrc: "/changjing/imgmobile/blue.png",
|
},
|
// {
|
// flag: false,
|
// label: '监控',
|
// img: '/changjing/img/leftnav/monitor.png',
|
// normal: '/changjing/img/leftnav/monitor.png',
|
// checked: '/changjing/img/leftnav/monitor-checked.png',
|
// layer: 'videoLayer',
|
// methods: getListVideo,
|
// imgSrc: '/changjing/img/leftnav/map-monitor.png'
|
// // imgSrc: "/changjing/imgmobile/blue.png",
|
// },
|
// {
|
// flag: false,
|
// label: "活动",
|
// img: "/changjing/img/leftnav/activity.png",
|
// normal: "/changjing/img/leftnav/activity.png",
|
// checked: "/changjing/img/leftnav/activity-checked.png",
|
// layer: "leftNavHD",
|
// methods: getListdoor,
|
// imgSrc: "/changjing/imgmobile/brown.png",
|
// },
|
// {
|
// flag: false,
|
// label: 'AED',
|
// img: '/changjing/img/leftnav/aed.png',
|
// normal: '/changjing/img/leftnav/aed.png',
|
// checked: '/changjing/img/leftnav/aed-checked.png',
|
// layer: 'aedLayer',
|
// methods: getListcat,
|
// type: 9,
|
// imgSrc: '/changjing/img/leftnav/map-aed.png',
|
// imgSrc: "/changjing/imgmobile/pink.png",
|
// notShow: true
|
// },
|
{
|
flag: false,
|
label: '停车',
|
img: '/changjing/img/leftnav/park.png',
|
normal: '/changjing/img/leftnav/park.png',
|
checked: '/changjing/img/leftnav/park-checked.png',
|
layer: 'leftNavTC',
|
methods: getListcat,
|
type: 11,
|
imgSrc: '/changjing/img/icon/p-biao.png'
|
// imgSrc: "/changjing/imgmobile/popcorn.png",
|
},
|
{
|
flag: false,
|
label: '出入',
|
img: '/changjing/img/leftnav/come.png',
|
normal: '/changjing/img/leftnav/come.png',
|
checked: '/changjing/img/leftnav/come-checked.png',
|
layer: 'leftNavCR',
|
methods: getListcat,
|
type: 12,
|
imgSrc: '/changjing/img/leftnav/map-activity.png'
|
// imgSrc: "/changjing/imgmobile/purple.png",
|
}
|
],
|
map2D: this.$store.state.openlayerData.openlayers.map2D,
|
leftNavBQ: this.$store.state.openlayerData.openlayers.leftNavBQ,
|
leftNavDL: this.$store.state.openlayerData.openlayers.leftNavDL,
|
leftNavSJ: this.$store.state.openlayerData.openlayers.leftNavSJ,
|
leftNavHD: this.$store.state.openlayerData.openlayers.leftNavHD,
|
leftNavTC: this.$store.state.openlayerData.openlayers.leftNavTC,
|
leftNavCR: this.$store.state.openlayerData.openlayers.leftNavCR
|
}
|
},
|
created () { },
|
mounted () {
|
// 初始化新增标签图层
|
this.map2D.addLayer(this.leftNavBQ)
|
this.map2D.addLayer(this.leftNavDL)
|
this.map2D.addLayer(this.leftNavSJ)
|
this.map2D.addLayer(this.leftNavHD)
|
this.map2D.addLayer(this.leftNavTC)
|
this.map2D.addLayer(this.leftNavCR)
|
},
|
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 (this[this.leftNavData[k].layer].getVisible()) {
|
// console.log(lnd[k].label, "所有开启");
|
this.leftNavData[k].flag = false
|
this.leftNavData[k].img = this.leftNavData[k].normal
|
this[this.leftNavData[k].layer].setVisible(false)
|
}
|
}
|
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
this[item.layer].setVisible(true)
|
// console.log("飞入");
|
// this.flyTo(item);
|
this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
|
} else {
|
item.img = item.normal
|
this[item.layer].setVisible(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 (campus) {
|
var that = this
|
|
this.leftNavData = this.leftNavData.map(item => {
|
return {
|
...item,
|
flag: false,
|
img: item.normal
|
}
|
})
|
|
this.leftNavData[0].flag = true
|
this.leftNavData[0].img = this.leftNavData[0].checked
|
this.leftNavData[4].flag = true
|
this.leftNavData[4].img = this.leftNavData[4].checked
|
|
this.leftNavBQ.setVisible(true)
|
this.leftNavCR.setVisible(true)
|
|
this.leftNavBQ.getSource().clear()
|
this.leftNavDL.getSource().clear()
|
this.leftNavSJ.getSource().clear()
|
this.leftNavHD.getSource().clear()
|
this.leftNavTC.getSource().clear()
|
this.leftNavCR.getSource().clear()
|
|
var that = this
|
const ourNum = that.leftNavData.length
|
for (let n = 0; n < ourNum; n++) {
|
const ourD = that.leftNavData[n]
|
const d = ourD.type ? { lifetype: ourD.type, campus } : {
|
campus
|
}
|
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 = '/changjing/img/icon/m-t.png'
|
} else if (ourD.label == '道路') {
|
imgUrl = '/changjing/img/icon/m-w.png'
|
sateName = data[k].roadname
|
} else if (ourD.label == '实景') {
|
imgUrl = '/changjing/img/icon/m-s.png'
|
sateName = data[k].vrname
|
} else if (ourD.label == 'AED') {
|
imgUrl = null
|
} else if (ourD.label == '停车') {
|
imgUrl = '/changjing/img/icon/m-p.png'
|
} else if (ourD.label == '出入') {
|
imgUrl = '/changjing/img/icon/m-c.png'
|
} else if (ourD.label == '监控') {
|
imgUrl = '/changjing/img/icon/m-v.png'
|
sateName = data[k].vrname
|
}
|
|
this[that.leftNavData[n].layer].getSource().addFeature(that.getCurItemFeature({
|
lng: position[k].lng,
|
lat: position[k].lat,
|
item: {
|
data: data[k],
|
ourD: ourD,
|
lntLat: [position[k].lng, position[k].lat]
|
},
|
text: sateName,
|
url: imgUrl
|
}))
|
}
|
|
if (that.leftNavData[n].flag) {
|
this[that.leftNavData[n].layer].setVisible(true)
|
} else {
|
this[that.leftNavData[n].layer].setVisible(false)
|
}
|
|
if (that.leftNavData[n].layer == 'mobileTagLayer') {
|
// that.leftNavData[n].img = that.leftNavData[n].checked;
|
}
|
})
|
}
|
},
|
|
getCurItemFeature (params) {
|
const iconFeature = new Feature({
|
geometry: new Point([Number(params.lng), Number(params.lat)]),
|
attributes: params.item,
|
type: 'point'
|
})
|
|
var textElement = document.createElement('span')
|
textElement.innerHTML = params.text
|
|
iconFeature.setStyle(new Style({
|
cursor: 'pointer',
|
|
image: new Icon({
|
scale: 30 / 48,
|
src: params.url,
|
// 设置图标偏移
|
anchor: [24, 24],
|
// X方向单位：分数
|
anchorXUnits: 'pixels',
|
// Y方向单位：像素
|
anchorYUnits: 'pixels'
|
}),
|
|
text: new Text({
|
// 对齐方式
|
textAlign: 'center',
|
// 文本基线
|
textBaseline: 'middle',
|
text: textElement.innerHTML,
|
font: '14px Arial',
|
offsetX: 0,
|
offsetY: 24,
|
fill: new Fill({
|
color: 'red'
|
}),
|
stroke: new Stroke({ color: '#fff', width: 6 })
|
})
|
}))
|
|
return iconFeature
|
},
|
|
|
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(obj)
|
}
|
return list
|
},
|
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
mobileOpenImgs1 () {
|
const imgsDom = document.getElementById('mobileBigImgs')
|
imgsDom.click()
|
},
|
goOn1 () { }
|
}
|
}
|
</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>
|
