<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() {
|
if (this.iconHide) {
|
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: "https://map.hit.edu.cn/images/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: "https://map.hit.edu.cn/images/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="https://map.hit.edu.cn/images/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="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
|
</div>
|
<div>
|
<img src="https://map.hit.edu.cn/images/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>
|
