From bf58722dfd03ea1513f3acc7331d4d4403fca76e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 18 Mar 2022 11:48:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/mobileLeftNav/index.vue | 479 ++++++++++++++++++-----------------------------------------
1 files changed, 151 insertions(+), 328 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 1d8a278..b3d1f0c 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="m-left-nav" :style="[navStyle]">
+ <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
<!-- :style="[coutrolStyle]" -->
<div class="m-left-coutrol" @click="changeIconHide">
<i :class="icons"></i>
@@ -9,8 +9,9 @@
v-for="(item, index) in leftNavData"
:key="index"
@click="leftNavClick(item)"
+ v-show="!item.notShow"
>
- <img :style="[imgStyle]" :src="item.img" alt="" />
+ <img :style="[imgStyle]" :src="item.img" alt />
<span>{{ item.label }}</span>
</li>
</ul>
@@ -23,12 +24,21 @@
// getListdoor, //出入
// getListaed, //AED
// getListparking, //停车场
- getListarchitecture, //全景
- getListarchitecture1, //标签
- getListroad, //道路
- getListcat, //出入-AED-停车场
+ 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: {
@@ -43,9 +53,26 @@
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"]),
+ ...mapGetters(["iconHide", "dimensionData", "seeRight"]),
},
data() {
return {
@@ -56,25 +83,12 @@
imgStyle: {
right: "0",
},
- // coutrolStyle: {
- // position: " absolute",
- // left: "-26px",
- // top: "114px",
- // right: "auto",
- // width: "25px",
- // height: "60px",
- // backgroundColor: "#fff",
- // borderRadius: "10px",
- // display: "flex",
- // alignItems: "center",
- // justifyContent: "center",
- // transition: "left 3s",
- // },
leftNavData: [
{
- flag: false,
+ flag: true,
label: "标签",
- img: "/img/leftnav/tag.png",
+ // img: "/img/leftnav/tag.png",
+ img: "/img/leftnav/tag-checked.png",
normal: "/img/leftnav/tag.png",
checked: "/img/leftnav/tag-checked.png",
layer: "tagLayer",
@@ -111,7 +125,7 @@
checked: "/img/leftnav/monitor-checked.png",
layer: "videoLayer",
methods: getListVideo,
- imgSrc: "img/leftnav/map-panorama.png",
+ imgSrc: "/img/leftnav/map-monitor.png",
// imgSrc: "img/mobile/blue.png",
},
// {
@@ -135,6 +149,7 @@
type: 9,
imgSrc: "img/leftnav/map-aed.png",
// imgSrc: "img/mobile/pink.png",
+ notShow: true,
},
{
flag: false,
@@ -161,317 +176,121 @@
// imgSrc: "img/mobile/purple.png",
},
],
- viewer: null,
- DC: null,
- tagLayer: null,
- wayLayer: null,
- sceneLayer: null,
- videoLayer: null,
- activityLayer: null,
- aedLayer: null,
- parkLayer: null,
- comeLayer: null,
+ // viewer: null,
+ // tagLayer: null,
+ // wayLayer: null,
+ // sceneLayer: null,
+ // videoLayer: null,
+ // activityLayer: null,
+ // aedLayer: null,
+ // parkLayer: null,
+ // comeLayer: null,
};
},
- created() {
- this.DC = global.DC;
- },
+ created() {},
mounted() {},
methods: {
changeIconHide() {
- let isif = this.iconHide;
+ const isif = this.iconHide;
this.$store.commit("MSET_ICONHIDE", !isif);
},
- generatePosition(num) {
- const list = [];
- for (let i = 0; i < num; i++) {
- const lng = 121.0493 + Math.random() * 0.5;
- const lat = 31.2583 + Math.random() * 0.5;
- list.push(new this.DC.Position(lng, lat, 0));
- }
- return list;
- },
leftNavClick(item) {
- //判断并关闭已开启标签
- let lnd = this.leftNavData;
- for (let k in lnd) {
+ // 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]._show) {
+ 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;
- this[this.leftNavData[k].layer].show = false;
+ window[this.leftNavData[k].layer].show = false;
}
}
item.flag = !item.flag;
if (item.flag == true) {
item.img = item.checked;
- this[item.layer].show = true;
+ window[item.layer].show = true;
// console.log("飞入");
- this.flyTo(item);
- this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
+ // this.flyTo(item);
+ this.$store.dispatch("closeMobileWindowsDom"); // 关闭弹窗
} else {
item.img = item.normal;
- this[item.layer].show = false;
+ window[item.layer].show = false;
}
},
- flyTo(item) {
- let posi = this[item.layer].positions[0];
- // console.log(posi);
- this.$store.dispatch("mapFlyTo", {
- //飞入
- lntLat: [posi.lng + 0.00917, posi.lat - 0.0188, 2100],
- // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
- // lntLat: [121.50492752204283, 31.21567802276832, 2530],
- heading: 0,
- pitch: -45,
- roll: 0,
- noOpen: true,
- });
- },
- initialize(viewer) {
+ // 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;
- viewer.scene.globe.depthTestAgainstTerrain = false;
- this.viewer = viewer;
- this.tagLayer = new this.DC.HtmlLayer("tagLayer");
- viewer.addLayer(this.tagLayer);
+ global.viewer.scene.globe.depthTestAgainstTerrain = false;
+ window.tagLayer = new global.DC.HtmlLayer("tagLayer");
+ global.viewer.addLayer(tagLayer);
- this.wayLayer = new this.DC.HtmlLayer("wayLayer");
- viewer.addLayer(this.wayLayer);
+ window.wayLayer = new global.DC.HtmlLayer("wayLayer");
+ global.viewer.addLayer(wayLayer);
- // this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
- this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
- viewer.addLayer(this.sceneLayer);
+ // sceneLayer = new global.DC.VectorLayer("sceneLayer");
+ window.sceneLayer = new global.DC.HtmlLayer("sceneLayer");
+ global.viewer.addLayer(sceneLayer);
- this.videoLayer = new this.DC.HtmlLayer("videoLayer");
- viewer.addLayer(this.videoLayer);
+ window.videoLayer = new global.DC.HtmlLayer("videoLayer");
+ global.viewer.addLayer(videoLayer);
- // this.activityLayer = new this.DC.VectorLayer("activityLayer");
- this.activityLayer = new this.DC.HtmlLayer("activityLayer");
- viewer.addLayer(this.activityLayer);
+ // activityLayer = new global.DC.VectorLayer("activityLayer");
+ window.activityLayer = new global.DC.HtmlLayer("activityLayer");
+ global.viewer.addLayer(activityLayer);
- // this.aedLayer = new this.DC.VectorLayer("aedLayer");
- this.aedLayer = new this.DC.HtmlLayer("aedLayer");
- viewer.addLayer(this.aedLayer);
+ // aedLayer = new global.DC.VectorLayer("aedLayer");
+ window.aedLayer = new global.DC.HtmlLayer("aedLayer");
+ global.viewer.addLayer(aedLayer);
- this.parkLayer = new this.DC.HtmlLayer("parkLayer");
- viewer.addLayer(this.parkLayer);
+ window.parkLayer = new global.DC.HtmlLayer("parkLayer");
+ global.viewer.addLayer(parkLayer);
- // this.comeLayer = new this.DC.VectorLayer("comeLayer");
- this.comeLayer = new this.DC.HtmlLayer("comeLayer");
- viewer.addLayer(this.comeLayer);
+ // comeLayer = new global.DC.VectorLayer("comeLayer");
+ window.comeLayer = new global.DC.HtmlLayer("comeLayer");
+ global.viewer.addLayer(comeLayer);
- // const positions1 = this.generatePosition(4);
- // positions1.forEach((item, index) => {
- // const divIcon = new this.DC.DivIcon(
- // item,
- // `
- // <div class="tag-entitys-box">
- // <div class="tag-content">
- // 南门口
- // </div>
- // <div class="tag-angle-content">
- // <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
- // </div>
- // </div>
- // `
- // );
- // // e.overlay._position._lng,
- // // e.overlay._position._lat - 0.012,
- // //订阅事件1
- // divIcon.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.overlay._position._lng, e.overlay._position._lat],
- // { name: "标签" }
- // );
- // });
- // this.tagLayer.addOverlay(divIcon); //标签
- // });
- // this.tagLayer["positions"] = positions1;
-
- // const positions2 = this.generatePosition(50);
- // positions2.forEach((item, index) => {
- // const divIcon = new this.DC.DivIcon(
- // item,
- // `
- // <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;">
- // 工建街
- // </div>
- // <div class="way-sign-box">
- // <img src="https://map.hit.edu.cn/images/roadsign3.png">
- // </div>
- // </div>
- // `
- // );
- // //订阅事件2
- // divIcon.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.overlay._position._lng, e.overlay._position._lat],
- // { name: "道路" }
- // );
- // });
- // this.wayLayer.addOverlay(divIcon); //道路
- // });
- // this.wayLayer["positions"] = positions2;
-
- // const positions3 = this.generatePosition(50);
- // positions3.forEach((item) => {
- // const billboard = new this.DC.Billboard(
- // item,
- // "/img/leftnav/map-panorama.png"
- // );
- // billboard.size = [16, 16];
- // //订阅事件3
- // billboard.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.wgs84Position.lng, e.wgs84Position.lat],
- // { name: "实景" }
- // );
- // });
- // this.sceneLayer.addOverlay(billboard); //实景
- // });
- // this.sceneLayer["positions"] = positions3;
-
- // const positions10 = this.generatePosition(50);
- // positions10.forEach((item) => {
- // const label = new this.DC.Label(item, "活动");
- // label.setStyle({
- // fillColor: this.DC.Color.ORANGERED,
- // font: "10px sans-serif",
- // pixelOffset: { x: 0, y: -16 },
- // });
- // this.activityLayer.addOverlay(label);
-
- // const billboard = new this.DC.Billboard(
- // item,
- // "/img/leftnav/map-aed.png"
- // // "/img/leftnav/map-panorama.png"
- // );
- // billboard.size = [16, 16];
- // //订阅事件10
- // billboard.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.wgs84Position.lng, e.wgs84Position.lat],
- // { name: "活动" }
- // );
- // });
- // this.activityLayer.addOverlay(billboard); //活动
- // });
- // this.activityLayer["positions"] = positions10;
-
- // const positions4 = this.generatePosition(10);
- // positions4.forEach((item, index) => {
- // const label = new this.DC.Label(item, "建筑AED");
- // label.setStyle({
- // fillColor: this.DC.Color.ORANGERED,
- // font: "10px sans-serif",
- // pixelOffset: { x: 0, y: -16 },
- // });
- // this.aedLayer.addOverlay(label);
-
- // const billboard = new this.DC.Billboard(
- // item,
- // "/img/leftnav/map-aed.png"
- // );
- // billboard.size = [16, 16];
- // //订阅事件4
- // billboard.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.wgs84Position.lng, e.wgs84Position.lat],
- // { name: "建筑AED" }
- // );
- // });
- // this.aedLayer.addOverlay(billboard); //AED
- // });
- // this.aedLayer["positions"] = positions4;
-
- // const positions5 = this.generatePosition(120);
- // positions5.forEach((item, index) => {
- // const divIcon = new this.DC.DivIcon(
- // item,
- // `
- // <div class="park-entitys-box">
- // <div class="park-title" alt="校外街路侧停车场">
- // </div>
- // <div class="park-sign-box">
- // <div>
- // <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
- // </div>
- // <div>
- // <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
- // </div>
- // </div>
- // </div>
- // `
- // );
- // //订阅事件5
- // divIcon.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.overlay._position._lng, e.overlay._position._lat],
- // { name: "校外街路侧停车场" }
- // );
- // });
- // this.parkLayer.addOverlay(divIcon);
- // });
- // this.parkLayer["positions"] = positions5;
-
- // const positions6 = this.generatePosition(10);
-
- // positions6.forEach((item, index) => {
- // const label = new this.DC.Label(item, "123");
- // label.setStyle({
- // fillColor: this.DC.Color.PURPLE,
- // outlineColor: this.DC.Color.WHITE, // 边框颜色
- // outlineWidth: 2, // 边框大小，
- // font: "10px sans-serif",
- // pixelOffset: { x: 0, y: -16 },
- // });
- // this.comeLayer.addOverlay(label);
-
- // const billboard = new this.DC.Billboard(
- // item,
- // "/img/leftnav/map-activity.png"
- // );
- // billboard.size = [16, 16];
- // //订阅事件6
- // billboard.on(DC.MouseEventType.CLICK, (e) => {
- // // 定制化窗体
- // that.openPopupS(
- // e.position,
- // [e.wgs84Position.lng, e.wgs84Position.lat],
- // { name: "123" }
- // );
- // });
- // this.comeLayer.addOverlay(billboard); //出入
- // });
- // this.comeLayer["positions"] = positions6;
- let ourNum = that.leftNavData.length;
+ const ourNum = that.leftNavData.length;
for (let n = 0; n < ourNum; n++) {
- let ourD = this.leftNavData[n];
- let d = ourD.type ? { lifetype: ourD.type } : {};
+ const ourD = this.leftNavData[n];
+ const d = ourD.type ? { lifetype: ourD.type } : {};
ourD.methods(d).then((res) => {
let dom;
- let data = res.data.data;
- let position = that.changePoiton(data);
- let num = data.length;
+ 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 = `
@@ -491,7 +310,7 @@
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}
+ ${data[k].roadname}
</div>
<div class="way-sign-box">
<img src="https://map.hit.edu.cn/images/roadsign3.png">
@@ -503,12 +322,11 @@
// ${data[k].mechanismname}
// </div>
dom = `
- <div class="way-entitys-box mobile-way-entitys-box">
- <div class="way-sign-box ">
- <img src="img/leftnav/map-panorama.png">
- </div>
+ <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">
@@ -548,31 +366,26 @@
`;
} else if (ourD.label == "监控") {
dom = `
- <div class="mobiletag-entitys-box-pink">
- <div class="tag-content">
- 监控
- </div>
- <div class="tag-angle-content">
- <img src="${ourD.imgSrc}">
- </div>
+ <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 that.DC.DivIcon(position[k], dom);
- //订阅事件
- divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ const divIcon = new global.DC.DivIcon(position[k], dom);
+ // 订阅事件
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
// console.log(data[k]);
- let d = {
+ const d = {
name:
data[k].mechanismname ||
data[k].roadname ||
- ourD.label == "监控"
- ? "监控"
- : "无显示名字",
+ (ourD.label == "监控" ? "监控" : "无显示名字"),
bgImg: data[k].tpurl,
video: data[k].videourl || "",
from: "labels",
introduce: data[k].introduce,
+ panoramaurl: data[k].panoramaurl,
};
// 定制化窗体
that.openPopupS(
@@ -581,35 +394,42 @@
d
);
});
- that[that.leftNavData[n].layer].addOverlay(divIcon); //加入图标
+ window[that.leftNavData[n].layer].addOverlay(divIcon); // 加入图标
}
- that[that.leftNavData[n].layer]["positions"] = position;
- that[that.leftNavData[n].layer].show = false;
+ 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 = [];
- let num = data.length;
+ const num = data.length;
for (let i = 0; i < num; i++) {
- list.push(new this.DC.Position(data[i].jd, data[i].wd, 0));
+ list.push(new global.DC.Position(data[i].jd, data[i].wd, 0));
}
return list;
},
mobileOpenImgs1() {
- let imgsDom = document.getElementById("mobileBigImgs");
+ const imgsDom = document.getElementById("mobileBigImgs");
imgsDom.click();
},
goOn1() {},
openPopupS(position, lntLat, query) {
- let that = this;
+ const that = this;
// 定制化窗体
- let d = {
+ const d = {
position,
lntLat,
query: { ...(query || {}), position, lntLat },
- useJWD: true, //仅使用经纬度
+ useJWD: true, // 仅使用经纬度
};
that.$store.dispatch("setMobileWindows", d);
},
@@ -617,7 +437,7 @@
};
</script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
.m-left-nav {
position: fixed;
bottom: 30px;
@@ -629,7 +449,7 @@
.m-left-coutrol {
position: absolute;
left: -24px;
- top: 96px;
+ top: 79px;
width: 25px;
height: 60px;
background-color: #fff;
@@ -677,4 +497,7 @@
}
}
}
+.nones {
+ display: none;
+}
</style>
--
Gitblit v1.9.3