From 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef Mon Sep 17 00:00:00 2001
From: Jin Lei <jinlei_182@163.com>
Date: 星期三, 15 十一月 2023 18:37:08 +0800
Subject: [PATCH] [细节调整] 1.拆分主菜单，修改切换逻辑 2.按钮移动效果添加
---
src/assets/img/new/rightCircle.png | 0
src/assets/img/new/leftCircle-y.png | 0
src/components/menu/bottom-menu.vue | 271 ++++++++++++++++++++------------------------
src/assets/img/right/search1.png | 0
src/assets/img/new/leftCircle.png | 0
src/components/index.vue | 11 +
src/assets/img/right/closeinput1.png | 0
src/components/menu/menulist.vue | 4
src/assets/img/new/treeClose-y.png | 0
src/assets/img/new/rightCircle-y.png | 0
src/components/right/right-bottom.vue | 8
src/assets/img/new/sjxl.png | 0
src/components/left/leftmenu.vue | 4
src/assets/img/new/spjk.png | 0
src/components/right/right-top.vue | 31 +++-
15 files changed, 166 insertions(+), 163 deletions(-)
diff --git a/src/assets/img/new/leftCircle-y.png b/src/assets/img/new/leftCircle-y.png
new file mode 100644
index 0000000..3158e23
--- /dev/null
+++ b/src/assets/img/new/leftCircle-y.png
Binary files differ
diff --git a/src/assets/img/new/leftCircle.png b/src/assets/img/new/leftCircle.png
index 15c8b6a..ed46296 100644
--- a/src/assets/img/new/leftCircle.png
+++ b/src/assets/img/new/leftCircle.png
Binary files differ
diff --git a/src/assets/img/new/rightCircle-y.png b/src/assets/img/new/rightCircle-y.png
new file mode 100644
index 0000000..00d41b4
--- /dev/null
+++ b/src/assets/img/new/rightCircle-y.png
Binary files differ
diff --git a/src/assets/img/new/rightCircle.png b/src/assets/img/new/rightCircle.png
index 161685e..08a7705 100644
--- a/src/assets/img/new/rightCircle.png
+++ b/src/assets/img/new/rightCircle.png
Binary files differ
diff --git a/src/assets/img/new/sjxl.png b/src/assets/img/new/sjxl.png
new file mode 100644
index 0000000..9a060b4
--- /dev/null
+++ b/src/assets/img/new/sjxl.png
Binary files differ
diff --git a/src/assets/img/new/spjk.png b/src/assets/img/new/spjk.png
new file mode 100644
index 0000000..2ba3bf0
--- /dev/null
+++ b/src/assets/img/new/spjk.png
Binary files differ
diff --git a/src/assets/img/new/treeClose-y.png b/src/assets/img/new/treeClose-y.png
new file mode 100644
index 0000000..93c2a7b
--- /dev/null
+++ b/src/assets/img/new/treeClose-y.png
Binary files differ
diff --git a/src/assets/img/right/closeinput1.png b/src/assets/img/right/closeinput1.png
index 537d9b5..57fbc5a 100644
--- a/src/assets/img/right/closeinput1.png
+++ b/src/assets/img/right/closeinput1.png
Binary files differ
diff --git a/src/assets/img/right/search1.png b/src/assets/img/right/search1.png
index 52996df..b83d454 100644
--- a/src/assets/img/right/search1.png
+++ b/src/assets/img/right/search1.png
Binary files differ
diff --git a/src/components/index.vue b/src/components/index.vue
index 5e8dc2e..e6ba270 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -1,5 +1,13 @@
<template>
<div class="mapViewer">
+ <div class="cacheImage">
+ <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" />
+ <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" />
+ <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" />
+ <img style="display: none;" src="@assets/img/new/h1.png" alt="" />
+ </div>
+
+
<div class="tooltip" :class="{ tooltiphide: !tooltipShow }">
<span>
{{ tooltipInfo }}
@@ -231,6 +239,9 @@
};
</script>
<style scoped>
+.cacheImage{
+ display: none !important;
+}
.mapViewer {
height: 100%;
}
diff --git a/src/components/left/leftmenu.vue b/src/components/left/leftmenu.vue
index 19c4bf2..c906f5a 100644
--- a/src/components/left/leftmenu.vue
+++ b/src/components/left/leftmenu.vue
@@ -3037,6 +3037,10 @@
/* box-shadow: 0px 0px 5px 2px #a8a8a8; */
}
+.leftmenu:hover {
+ background-image: url("~@/assets/img/new/treeClose-y.png");
+
+}
.leftmenu {
background-image: url("~@/assets/img/new/treeClose.png");
background-size: 100% 100%;
diff --git a/src/components/menu/bottom-menu.vue b/src/components/menu/bottom-menu.vue
index 2634a4a..f721741 100644
--- a/src/components/menu/bottom-menu.vue
+++ b/src/components/menu/bottom-menu.vue
@@ -1,9 +1,7 @@
<template>
<div class="specialTool">
- <div
- class="bottomwrapper"
- :class="{ 'top-btn-active': viewer1Show && isLand }"
- >
+
+ <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show && isLand }">
<div class="imgbox" @click="tdglHandle">
<img src="@assets/img/new/tudiguanli.png" alt="" />
</div>
@@ -12,11 +10,7 @@
</div>
</div>
- <div
- class="bottomwrapper"
- @click="historyHandle"
- :class="{ 'top-btn-active': viewer1Show && !isLand }"
- >
+ <div class="bottomwrapper" @click="historyHandle" :class="{ 'top-btn-active': viewer1Show && !isLand }">
<div class="imgbox">
<img src="@assets/img/new/chengshigengxin.png" alt="" />
</div>
@@ -24,40 +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-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">
@@ -66,19 +46,11 @@
<div class="textbox">
<span> 绮炬ā绀鸿寖 </span>
</div>
- <el-dropdown-menu
- slot="dropdown"
- :append-to-body="false"
- class="popper-dropdown"
- >
+ <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
<el-dropdown-item command="fcfhHandle">鍒嗗眰鍒嗘埛</el-dropdown-item>
<!-- <el-dropdown-item command="sprhHandle">鍦烘櫙瑙嗛铻嶅悎</el-dropdown-item> -->
- <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui"
- >鍦烘櫙瑙嗛铻嶅悎</el-dropdown-item
- >
- <el-dropdown-item v-else command="jiqirendahui"
- >鍏抽棴瑙嗛铻嶅悎</el-dropdown-item
- >
+ <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui">鍦烘櫙瑙嗛铻嶅悎</el-dropdown-item>
+ <el-dropdown-item v-else command="jiqirendahui">鍏抽棴瑙嗛铻嶅悎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -93,58 +65,27 @@
@input="updateVideo"
>
</el-slider> -->
- <el-slider
- :min="0"
- :max="360"
- v-model="robotVideoList[3].heading"
- @input="updateVideo"
- >
+ <el-slider :min="0" :max="360" v-model="robotVideoList[3].heading" @input="updateVideo">
</el-slider>
</el-form-item>
<el-form-item label="淇话瑙掑害:">
- <el-slider
- :min="-89"
- :max="89"
- v-model="robotVideoList[3].pitch"
- @input="updateVideo"
- >
+ <el-slider :min="-89" :max="89" v-model="robotVideoList[3].pitch" @input="updateVideo">
</el-slider>
</el-form-item>
<el-form-item label="姘村钩瑙嗚:">
- <el-slider
- :min="30"
- :max="120"
- v-model="robotVideoList[3].horizonAngle"
- @input="updateVideo"
- >
+ <el-slider :min="30" :max="120" v-model="robotVideoList[3].horizonAngle" @input="updateVideo">
</el-slider>
</el-form-item>
<el-form-item label="鍨傜洿瑙嗚:">
- <el-slider
- :min="30"
- :max="120"
- v-model="robotVideoList[3].verticalAngle"
- @input="updateVideo"
- >
+ <el-slider :min="30" :max="120" v-model="robotVideoList[3].verticalAngle" @input="updateVideo">
</el-slider>
</el-form-item>
<el-form-item label="鏈�杩滄姇灏�:">
- <el-slider
- :min="100"
- :max="300"
- v-model="robotVideoList[3].far"
- @input="updateVideo"
- >
+ <el-slider :min="100" :max="300" v-model="robotVideoList[3].far" @input="updateVideo">
</el-slider>
</el-form-item>
<el-form-item label="閫忔槑搴�:">
- <el-slider
- :step="0.1"
- :min="0"
- :max="1"
- v-model="robotVideoList[3].alpha"
- @input="updateVideo"
- >
+ <el-slider :step="0.1" :min="0" :max="1" v-model="robotVideoList[3].alpha" @input="updateVideo">
</el-slider>
</el-form-item>
</el-form>
@@ -154,7 +95,7 @@
<style scoped>
.specialTool {
- width: 440px;
+ width: 550px;
position: absolute;
bottom: 65px;
color: #fff;
@@ -166,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;
@@ -187,6 +136,7 @@
background-size: 100% 100%;
position: relative;
}
+
.imgbox:hover {
background-image: url("~@/assets/img/new/h1.png");
}
@@ -496,7 +446,7 @@
}
},
handleCommand(command) {
- this.setViewer1Show(false);
+
switch (command) {
case "spjkHandle":
this.spjkHandle();
@@ -528,6 +478,7 @@
}
},
historyHandle() {
+ this.switchMenu(1);
if (this.isLand) {
this.$parent.changeMode("褰卞儚搴曞浘");
if (!this.viewer1Show) {
@@ -555,6 +506,7 @@
}
},
tdglHandle() {
+ this.switchMenu(1);
if (!this.isLand) {
if (!this.viewer1Show) {
let p = sgworld.Navigate.getCameraInfo();
@@ -612,46 +564,66 @@
"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) {
@@ -703,27 +675,32 @@
});
},
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() {
diff --git a/src/components/menu/menulist.vue b/src/components/menu/menulist.vue
index bf9e8d1..7bf29a6 100644
--- a/src/components/menu/menulist.vue
+++ b/src/components/menu/menulist.vue
@@ -195,7 +195,9 @@
border-radius: 30px;
cursor: pointer;
}
-
+.menulist:hover {
+ background-image: url("~@/assets/img/new/rightCircle-y.png");
+}
.menulist_active {
border-image-source: radial-gradient(
59% 79%,
diff --git a/src/components/right/right-bottom.vue b/src/components/right/right-bottom.vue
index ce9f49a..a11df08 100644
--- a/src/components/right/right-bottom.vue
+++ b/src/components/right/right-bottom.vue
@@ -200,6 +200,9 @@
.mapTool {
margin: 2px 0;
}
+.legend-bg:hover {
+ background-image: url("~@/assets/img/new/leftCircle-y.png");
+}
.legend-bg {
background-image: url("~@/assets/img/new/leftCircle.png");
background-size: 100%;
@@ -207,12 +210,7 @@
width: 35px;
height: 35px;
position: relative;
-}
-.legend-bg:hover {
- background-color: rgba(16, 145, 250, 0.4);
- border-radius: 50%;
cursor: pointer;
- pointer-events: all;
}
.tcqp {
background-color: rgba(0, 138, 252, 0.6);
diff --git a/src/components/right/right-top.vue b/src/components/right/right-top.vue
index c265228..8d0021b 100644
--- a/src/components/right/right-top.vue
+++ b/src/components/right/right-top.vue
@@ -53,8 +53,8 @@
</div>
</el-dialog>
<div class="rightTool">
- <el-button @click="showInput">
- <img class="searchBg" src="@/assets/img/new/leftCircle.png" />
+ <el-button class="searchElBg" @click="showInput">
+ <div class="searchBg"></div>
<img
class="searchBtn"
v-if="!isShowInput"
@@ -678,16 +678,25 @@
margin: 1px;
margin: 20px 0;
}
-
-.searchBtn {
- width: 40px;
+.searchElBg{
+ background-image: url("~@/assets/img/new/leftCircle.png") !important;
+ background-size: 48px 48px !important;
}
-
+.searchBtn {
+ margin-top: 3px;
+ width: 40px;
+ pointer-events: none;
+}
+.searchElBg:hover{
+ background-image: url("~@/assets/img/new/leftCircle-y.png") !important;
+ background-size: 48px 48px !important;
+}
.searchBg {
position: absolute;
left: -4px;
top: 15px;
- width: 54.5px;
+ width: 56px;
+ height: 56px;
z-index: -10;
}
.active {
@@ -698,11 +707,13 @@
position: absolute;
right: 26px;
top: 17px;
- width: 70.6px;
- height: 70.6px;
+ width: 71px;
+ height: 71px;
background-image: url("~@/assets/img/new/rightCircle.png");
}
-
+.user:hover {
+ background-image: url("~@/assets/img/new/rightCircle-y.png");
+}
.user .el-avatar {
background-color: transparent;
margin: 3px auto 0;
--
Gitblit v1.9.3