From 9cee8c76b0b9bf384b1333a50ee443cd01ee4e31 Mon Sep 17 00:00:00 2001
From: Jin Lei <jinlei_182@163.com>
Date: 星期三, 15 十一月 2023 18:57:14 +0800
Subject: [PATCH] [菜单切换]1.切换菜单导致视频监控图层显示。
---
src/components/menu/bottom-menu.vue | 293 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 175 insertions(+), 118 deletions(-)
diff --git a/src/components/menu/bottom-menu.vue b/src/components/menu/bottom-menu.vue
index 288b38e..a89c765 100644
--- a/src/components/menu/bottom-menu.vue
+++ b/src/components/menu/bottom-menu.vue
@@ -1,5 +1,6 @@
<template>
<div class="specialTool">
+
<div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show && isLand }">
<div class="imgbox" @click="tdglHandle">
<img src="@assets/img/new/tudiguanli.png" alt="" />
@@ -17,25 +18,26 @@
<span> 鍘嗗彶褰卞儚 </span>
</div>
</div>
- <div class="bottomwrapper csbj">
- <el-dropdown trigger="click" @command="handleCommand">
- <div class="imgbox">
- <img src="@assets/img/new/chengshibujian.png" alt="" />
- </div>
- <div class="textbox">
- <span> 缁煎悎鎵╁睍 </span>
- </div>
- <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
- <el-dropdown-item command="stdsjHandle">瑙嗗浘澶ф暟鎹钩鍙�</el-dropdown-item>
- <el-dropdown-item command="bzdSystem">鏍囧噯鍦扮洃绠″钩鍙�</el-dropdown-item>
- <el-dropdown-item v-if="isShowSPJK" command="spjkHandle">瑙嗛闆嗘垚涓庡彲瑙嗗寲</el-dropdown-item>
- <el-dropdown-item v-else command="closeSpjk">鍏抽棴瑙嗛鐐逛綅鍒嗗竷</el-dropdown-item>
- <el-dropdown-item v-if="isShowSjxl" command="sjxlHandle">鎵嬫満淇′护鐑姏鍒嗗竷</el-dropdown-item>
- <el-dropdown-item v-else command="closeSjxl">鍏抽棴淇′护鐑姏鍒嗗竷</el-dropdown-item>
- <el-dropdown-item command="csgxHandle">鍩庡競鏇存柊</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ <div class="bottomwrapper csbj" @click="spjkHandle" :class="{ 'top-btn-active': !isShowSPJK }">
+ <div class="imgbox">
+ <img src="@assets/img/new/spjk.png" alt="" />
+ </div>
+ <div class="textbox">
+ <span>瑙嗛鐩戞帶</span>
+ </div>
</div>
+
+
+ <div class="bottomwrapper spjk" @click="shoujixinling" :class="{ 'top-btn-active': !isShowSjxl }">
+ <div class="imgbox">
+ <img src="@assets/img/new/sjxl.png" alt="" />
+ </div>
+ <div class="textbox">
+ <span> 鎵嬫満淇′护 </span>
+ </div>
+ </div>
+
+
<div class="bottomwrapper jxmx">
<el-dropdown trigger="click" @command="handleCommand">
<div class="imgbox">
@@ -88,14 +90,12 @@
</el-form-item>
</el-form>
</div>
-
-
</div>
</template>
<style scoped>
.specialTool {
- width: 440px;
+ width: 550px;
position: absolute;
bottom: 65px;
color: #fff;
@@ -107,8 +107,16 @@
justify-content: space-between;
}
-.specialTool .bottomwrapper:nth-of-type(2),
+
+
.specialTool .bottomwrapper:nth-of-type(3) {
+ /* background: red; */
+ position: relative;
+ top: -30px;
+}
+
+.specialTool .bottomwrapper:nth-of-type(2),
+.specialTool .bottomwrapper:nth-of-type(4) {
/* background: red; */
position: relative;
top: -18px;
@@ -122,18 +130,22 @@
}
.imgbox {
- width: 84px;
- height: 81px;
- background-image: url("~@/assets/img/new/bottomBox.png");
+ width: 110px;
+ height: 90px;
+ background-image: url("~@/assets/img/new/b1.png");
background-size: 100% 100%;
position: relative;
}
+.imgbox:hover {
+ background-image: url("~@/assets/img/new/h1.png");
+}
+
.imgbox img {
- width: 38px;
+ width: 32px;
position: absolute;
- top: 50%;
- left: 52.5%;
+ top: 37%;
+ left: 50%;
transform: translate(-50%, -50%);
}
@@ -180,21 +192,22 @@
background: rgba(14, 50, 143, 0.6);
box-shadow: 0px 0px 9px 3px rgba(20, 105, 233, 0.7) inset;
text-align: center;
- left: -36.5% !important;
width: 155px;
border: none;
}
.el-dropdown /deep/ .el-dropdown-selfdefine {
- margin-left: 8px !important;
+ margin-left: 0 !important;
}
.csbj .el-dropdown-menu {
- top: -215px !important;
+ top: -180px !important;
+ left: -30.5% !important;
}
.jxmx .el-dropdown-menu {
top: -110px !important;
+ left: -26.5% !important;
}
.el-dropdown-menu /deep/ .el-dropdown-menu__item {
@@ -207,19 +220,22 @@
}
.csbj .el-popper /deep/ .popper__arrow::after {
+ margin: 0;
border-top-color: rgba(14, 50, 143, 0.6);
border-top-width: 6px;
border-bottom-width: 0;
- top: 201px;
- left: 37px;
+ top: 166px;
+ left: 31px;
}
.jxmx .el-popper /deep/ .popper__arrow::after {
+ margin: 0;
+
border-top-color: rgba(14, 50, 143, 0.6);
border-top-width: 6px;
border-bottom-width: 0;
top: 96px;
- left: -26px;
+ left: -32px;
}
.el-dropdown-menu__item:focus,
@@ -232,8 +248,9 @@
box-shadow: 0px 0px 5px 3px rgba(0, 168, 255, 0.16);
}
-.top-btn-active {
- background: #0987ff !important;
+.top-btn-active .imgbox {
+ background-image: url("~@/assets/img/new/h1.png");
+ background-size: 100% 100%;
}
.scroll_div {
@@ -315,7 +332,6 @@
far: 3000,
cameraIndexCode: "2b046ef675704975a8d45f1b00cd946b",
},
-
],
robotVideoList: [
{
@@ -430,10 +446,8 @@
}
},
handleCommand(command) {
+
switch (command) {
- case "qytj":
- this.qytj();
- break;
case "spjkHandle":
this.spjkHandle();
break;
@@ -458,17 +472,15 @@
case "closeSjxl":
this.closeSjxl();
break;
- case "csgxHandle":
- this.csgxHandle();
- break;
case "jiqirendahui":
this.jiqirendahui(this.robotVideoList);
break;
}
},
historyHandle() {
+ this.switchMenu(1);
if (this.isLand) {
- this.$parent.changeMode('褰卞儚搴曞浘');
+ this.$parent.changeMode("褰卞儚搴曞浘");
if (!this.viewer1Show) {
window.loading = this.$loading({
lock: true,
@@ -481,7 +493,7 @@
this.setViewer1Show(true);
} else {
if (!this.viewer1Show) {
- this.$parent.changeMode('褰卞儚搴曞浘');
+ this.$parent.changeMode("褰卞儚搴曞浘");
window.loading = this.$loading({
lock: true,
text: "褰卞儚瀵规瘮鍔熻兘鍔犺浇涓紝璇风◢鍚�",
@@ -494,8 +506,22 @@
}
},
tdglHandle() {
+ this.switchMenu(1);
if (!this.isLand) {
if (!this.viewer1Show) {
+ let p = sgworld.Navigate.getCameraInfo();
+ sgworld.Navigate.flyToPointsInterest({
+ destination: new Cesium.Cartesian3.fromDegrees(
+ p.location.lon,
+ p.location.lat,
+ p.location.height
+ ),
+ orientation: {
+ heading: Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(-90),
+ roll: Cesium.Math.toRadians(0),
+ },
+ });
window.loading = this.$loading({
lock: true,
text: "鍦熷湴绠＄悊鍔熻兘鍔犺浇涓紝璇风◢鍚�",
@@ -507,6 +533,19 @@
this.setViewer1Show(true);
} else {
if (!this.viewer1Show) {
+ let p = sgworld.Navigate.getCameraInfo();
+ sgworld.Navigate.flyToPointsInterest({
+ destination: new Cesium.Cartesian3.fromDegrees(
+ p.location.lon,
+ p.location.lat,
+ p.location.height
+ ),
+ orientation: {
+ heading: Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(-90),
+ roll: Cesium.Math.toRadians(0),
+ },
+ });
window.loading = this.$loading({
lock: true,
text: "鍦熷湴绠＄悊鍔熻兘鍔犺浇涓紝璇风◢鍚�",
@@ -525,46 +564,64 @@
"http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
);
},
+ switchMenu(id) {
+
+ if (id != 1) {
+ this.setViewer1Show(false);
+ }
+ if (id != 3) {
+ this.closeSjxl();
+ }
+ if (id != 4) {
+ this.closeSpjk();
+ }
+ },
bzdSystem() {
window.open("http://192.162.24.2:8076/login");
},
shoujixinling() {
- const loading = this.$loading({
- lock: true,
- text: "鎵嬫満淇′护鏁版嵁鍔犺浇涓紝璇风◢鍚�",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)",
- });
- setTimeout(() => {
- loading.close();
- }, 2000);
- this.isShowSjxl = false;
- let heatMapUrl = URLInCode.heatMapUrl;
- sgworld.Core.getJSON(heatMapUrl, (data) => {
- let res = [];
- data.features.forEach((item) => {
- let obj = {
- x: item.properties["center_x"],
- y: item.properties["center_y"],
- value: item.properties["sd_total"],
- radius: 50,
- };
- res.push(obj);
+ this.switchMenu(3);
+ if (this.isShowSjxl) {
+
+ const loading = this.$loading({
+ lock: true,
+ text: "鎵嬫満淇′护鏁版嵁鍔犺浇涓紝璇风◢鍚�",
+ spinner: "el-icon-loading",
+ background: "rgba(0, 0, 0, 0.7)",
});
- // //鍒涘缓鐑姏鍥�
- heatMapItem = sgworld.Creator.addHeatMap("鐑姏鍥�", {
- type: "Heatmap", // 鐑姏鍥剧被鍨嬨�怘eatmap/HeatmapGL銆戯紙鍙�夛級
- sourceData: res,
- radius: 7,
- gradient: {
- ".3": "blue",
- ".5": "green",
- ".7": "yellow",
- ".95": "red",
- },
- tooltip: true, // tooltip鏄剧ず鏁板��
+ setTimeout(() => {
+ loading.close();
+ }, 1500);
+ this.isShowSjxl = false;
+ let heatMapUrl = URLInCode.heatMapUrl;
+ sgworld.Core.getJSON(heatMapUrl, (data) => {
+ let res = [];
+ data.features.forEach((item) => {
+ let obj = {
+ x: item.properties["center_x"],
+ y: item.properties["center_y"],
+ value: item.properties["sd_total"],
+ radius: 50,
+ };
+ res.push(obj);
+ });
+ // //鍒涘缓鐑姏鍥�
+ heatMapItem = sgworld.Creator.addHeatMap("鐑姏鍥�", {
+ type: "Heatmap", // 鐑姏鍥剧被鍨嬨�怘eatmap/HeatmapGL銆戯紙鍙�夛級
+ sourceData: res,
+ radius: 7,
+ gradient: {
+ ".3": "blue",
+ ".5": "green",
+ ".7": "yellow",
+ ".95": "red",
+ },
+ tooltip: true, // tooltip鏄剧ず鏁板��
+ });
});
- });
+ } else {
+ this.closeSjxl();
+ }
},
closeSjxl() {
if (heatMapItem) {
@@ -575,13 +632,6 @@
// historyHandle() {
// this.$store.commit("showHistory", true);
// },
- csgxHandle() {
- Bus.$emit("openMyResourcePop", true);
- },
- qytj() {
- this.setqyEchartsShow(!this.qyEchartsShow);
- },
-
sceneRoaming() {
if (this.showFlag) {
document.getElementById("scroll").style.display = "none";
@@ -623,42 +673,49 @@
});
},
spjkHandle() {
- const loading = this.$loading({
- lock: true,
- text: "瑙嗛鐐逛綅鏁版嵁鍔犺浇涓紝璇风◢鍚�",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)",
- });
- setTimeout(() => {
- loading.close();
- }, 2000);
- this.isShowSPJK = false;
- if (window.sxtkGeojson) {
- window.sxtkGeojson.deleteObject();
- window.sxtkGeojson = null;
- window.sxthandler.destroy();
- //鍏抽棴寮圭獥
- Bus.$emit("closeRightPop", true);
- layuiLayer.close(SmartEarthPopupData.layerProp);
- return;
+ this.switchMenu(4);
+ if (this.isShowSPJK) {
+ const loading = this.$loading({
+ lock: true,
+ text: "瑙嗛鐐逛綅鏁版嵁鍔犺浇涓紝璇风◢鍚�",
+ spinner: "el-icon-loading",
+ background: "rgba(0, 0, 0, 0.7)",
+ });
+ setTimeout(() => {
+ loading.close();
+ }, 1500);
+ this.isShowSPJK = false;
+ if (window.sxtkGeojson) {
+ window.sxtkGeojson.deleteObject();
+ window.sxtkGeojson = null;
+ window.sxthandler.destroy();
+ //鍏抽棴寮圭獥
+ Bus.$emit("closeRightPop", true);
+ layuiLayer.close(SmartEarthPopupData.layerProp);
+ return;
+ } else {
+ Bus.$emit("showSPJK");
+ // this.spjkLoad();
+ }
} else {
- Bus.$emit("showSPJK");
- // this.spjkLoad();
+ this.closeSpjk();
}
},
closeSpjk() {
- this.isShowSPJK = true;
- if (window.sxtkGeojson) {
- window.sxtkGeojson.deleteObject();
- window.sxtkGeojson = null;
- window.sxthandler.destroy();
- //鍏抽棴寮圭獥
- Bus.$emit("closeRightPop", true);
- layuiLayer.close(SmartEarthPopupData.layerProp);
- return;
- } else {
- Bus.$emit("closeSPJK");
- // this.spjkLoad();
+ if (!this.isShowSPJK) {
+ this.isShowSPJK = true;
+ if (window.sxtkGeojson) {
+ window.sxtkGeojson.deleteObject();
+ window.sxtkGeojson = null;
+ window.sxthandler.destroy();
+ //鍏抽棴寮圭獥
+ Bus.$emit("closeRightPop", true);
+ layuiLayer.close(SmartEarthPopupData.layerProp);
+ return;
+ } else {
+ Bus.$emit("closeSPJK");
+ // this.spjkLoad();
+ }
}
},
// 鍒嗗眰鍒嗘埛
--
Gitblit v1.9.3