From 78064c2072b8c7eb36309045a6166292917f491b Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 15 十一月 2023 14:39:10 +0800 Subject: [PATCH] 初始化、土地管理视角 --- src/components/menu/bottom-menu.vue | 404 +++++++++++++++++++++++++++------------------------------ 1 files changed, 189 insertions(+), 215 deletions(-) diff --git a/src/components/menu/bottom-menu.vue b/src/components/menu/bottom-menu.vue index c4bbc7b..ef3ff87 100644 --- a/src/components/menu/bottom-menu.vue +++ b/src/components/menu/bottom-menu.vue @@ -1,6 +1,9 @@ <template> <div class="specialTool"> - <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show }"> + <div + class="bottomwrapper" + :class="{ 'top-btn-active': viewer1Show && isLand }" + > <div class="imgbox" @click="tdglHandle"> <img src="@assets/img/new/tudiguanli.png" alt="" /> </div> @@ -9,7 +12,11 @@ </div> </div> - <div class="bottomwrapper" @click="historyHandle"> + <div + class="bottomwrapper" + @click="historyHandle" + :class="{ 'top-btn-active': viewer1Show && !isLand }" + > <div class="imgbox"> <img src="@assets/img/new/chengshigengxin.png" alt="" /> </div> @@ -23,7 +30,7 @@ <img src="@assets/img/new/chengshibujian.png" alt="" /> </div> <div class="textbox"> - <span> 鍩庡競閮ㄤ欢 </span> + <span> 缁煎悎鎵╁睍 </span> </div> <el-dropdown-menu slot="dropdown" @@ -36,17 +43,18 @@ <el-dropdown-item command="bzdSystem" >鏍囧噯鍦扮洃绠″钩鍙�</el-dropdown-item > - <el-dropdown-item command="spjkHandle" + <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> @@ -65,65 +73,16 @@ > <el-dropdown-item command="fcfhHandle">鍒嗗眰鍒嗘埛</el-dropdown-item> <!-- <el-dropdown-item command="sprhHandle">鍦烘櫙瑙嗛铻嶅悎</el-dropdown-item> --> - <el-dropdown-item command="jiqirendahui" + <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> - <!-- <el-tooltip - class="item" - effect="dark" - content="鍦熷湴绠$悊" - placement="bottom" - popper-class="item_tooltip" - > - <i - @click="tdglHandle" - class="iconfont icon-nongcuntudiwenti" - :class="{ 'top-btn-active': viewer1Show }" - ></i> - </el-tooltip> - <el-tooltip - class="item" - effect="dark" - content="鍩庡競閮ㄤ欢鍙鍖�" - placement="top" - > - <el-dropdown placement="top" @command="handleCommand" trigger="click"> - <span class="el-dropdown-link"> - <i class="el-icon-arrow-down el-icon--right"></i> - </span> - <el-dropdown-menu slot="dropdown"> - <el-dropdown-item command="qytj">鎰熺煡璁惧涓�寮犲浘</el-dropdown-item> - <el-dropdown-item command="spjkHandle" - >瑙嗛闆嗘垚涓庡彲瑙嗗寲灞曠ず</el-dropdown-item - > - <el-dropdown-item command="stdsjHandle"> - 瑙嗛鏅鸿兘鍒嗘瀽鎴愭灉灞曠ず</el-dropdown-item - > - </el-dropdown-menu> - </el-dropdown> - </el-tooltip> - - - <el-tooltip class="item" effect="dark" content="鍦烘櫙娴忚" placement="right"> - <el-dropdown> - <span class="el-dropdown-link"> - <i class="el-icon-position"></i> - </span> - <el-dropdown-menu slot="dropdown"> - <el-dropdown-item - v-for="item in romanOption" - :key="item.name" - @click="setRomanFly(item)" - > - {{ item.name }}</el-dropdown-item - > - </el-dropdown-menu> - </el-dropdown> - </el-tooltip> --> <div class="funcBox" v-if="testSHIPINRONGHE"> <el-form ref="form" label-width="80px"> <el-form-item label="鍥涘懆鏂瑰悜:"> @@ -190,72 +149,6 @@ </el-form-item> </el-form> </div> - - <!-- <el-tooltip - class="item" - effect="dark" - content="瑙嗗浘澶ф暟鎹钩鍙�" - placement="bottom" - popper-class="item_tooltip" - > - <i @click="stdsjHandle" class="el-icon-data-line"> </i> - </el-tooltip> - <el-tooltip - class="item" - effect="dark" - content="鍦熷湴绠$悊" - placement="bottom" - popper-class="item_tooltip" - > - <i - @click="tdglHandle" - class="iconfont icon-nongcuntudiwenti" - :class="{ 'top-btn-active': viewer1Show }" - ></i> - </el-tooltip> --> - <!-- <el-tooltip - class="item" - effect="dark" - content="鏁版嵁姹囪仛" - placement="bottom" - popper-class="item_tooltip" - > - <i - @click="qytj" - class="el-icon-pie-chart" - :class="{ 'top-btn-active': qyEchartsShow }" - ></i> - </el-tooltip> --> - <!-- - <el-tooltip - class="item" - effect="dark" - content="鍦烘櫙婕父" - placement="bottom" - popper-class="item_tooltip" - > - <i @click="sceneRoaming()" class="el-icon-position"></i> - </el-tooltip> --> - <!-- <el-tooltip - class="item" - effect="dark" - content="瑙嗛铻嶅悎" - placement="bottom" - popper-class="item_tooltip" - > - <i @click="shipinronghe(videoList)" class="el-icon-position"></i> - </el-tooltip> - <div id="scroll" class="scroll_div"> - <ul> - <li - v-for="item in romanOption" - :key="item.name" - @click="setRomanFly(item)" - > - {{ item.name }} - </li> - </ul> - </div> --> </div> </template> @@ -272,17 +165,21 @@ display: flex; justify-content: space-between; } + .specialTool .bottomwrapper:nth-of-type(2), .specialTool .bottomwrapper:nth-of-type(3) { /* background: red; */ position: relative; top: -18px; } + .bottomwrapper { display: flex; flex-direction: column; align-items: center; + cursor: pointer; } + .imgbox { width: 84px; height: 81px; @@ -290,6 +187,7 @@ background-size: 100% 100%; position: relative; } + .imgbox img { width: 38px; position: absolute; @@ -297,6 +195,7 @@ left: 52.5%; transform: translate(-50%, -50%); } + .textbox { margin-top: 2px; width: 100px; @@ -304,6 +203,7 @@ background-image: url("~@/assets/img/new/textbg.png"); background-size: 100% 100%; } + .textbox span { text-align: center; display: block; @@ -314,12 +214,14 @@ line-height: 28px; text-shadow: 0px 2px 2px rgba(32, 32, 32, 0.8); } + .list { position: absolute; background: rgba(14, 50, 143, 0.6); bottom: 124px; box-shadow: 0px 0px 10px 5px rgba(11, 78, 179, 0.7) inset; } + .list li { min-width: 154px; height: 35px; @@ -337,37 +239,50 @@ 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; } -.csbj .el-dropdown-menu { - top: -215px !important; + +.el-dropdown /deep/ .el-dropdown-selfdefine { + margin-left: 8px !important; } + +.csbj .el-dropdown-menu { + 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 { color: #fff; line-height: 35px; } + .el-dropdown-menu /deep/ .popper__arrow { border: none; } + .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, @@ -402,6 +317,7 @@ .scroll_div li:hover { color: #0987ff; } + .funcBox { width: 230px; position: absolute; @@ -428,6 +344,9 @@ name: "bottom-menu", data() { return { + isShowSPJK: true, + isShowSjxl: true, + isShowSPRH: true, csbjShow: false, jxmxShow: false, romanOption: [ @@ -444,6 +363,7 @@ lon: 116.51507, lat: 39.79686, height: 40, + isLand: true, // 鍥涘懆鏂瑰悜 heading: 305, // 淇话瑙掑害 @@ -458,63 +378,6 @@ far: 3000, cameraIndexCode: "2b046ef675704975a8d45f1b00cd946b", }, - // { - // name: "video3", - // lon: 116.5146339, - // lat: 39.7967196, - // height: 80, - // // 鍥涘懆鏂瑰悜 - // heading: 62, - // // 淇话瑙掑害 - // pitch: -43, - // // 姘村钩瑙掑害 - // horizonAngle: 45, - // // 鍨傜洿瑙掑害 - // verticalAngle: 64, - // // 閫忔槑搴� - // alpha: 1, - // // 閫忔槑搴� - // far: 166, - // cameraIndexCode: "a0ffb1dedde7468187d0b0f91d431475", - // }, - // { - // name: "video4", - // lon: 116.51496, - // lat: 39.796854, - // height: 80, - // // 鍥涘懆鏂瑰悜 - // heading: 148, - // // 淇话瑙掑害 - // pitch: -39, - // // 姘村钩瑙掑害 - // horizonAngle: 40, - // // 鍨傜洿瑙掑害 - // verticalAngle: 58, - // // 閫忔槑搴� - // alpha: 1, - // // 閫忔槑搴� - // far: 219, - // cameraIndexCode: "e6ec9aaf9320455ab6c5ea224f3f5f38", - // }, - // { - // name: "video1", - // lon: 116.51522, - // lat: 39.79724, - // height: 80, - // // 鍥涘懆鏂瑰悜 - // heading: 64, - // // 淇话瑙掑害 - // pitch: -47, - // // 姘村钩瑙掑害 - // horizonAngle: 30, - // // 鍨傜洿瑙掑害 - // verticalAngle: 60, - // // 閫忔槑搴� - // alpha: 1, - // // 閫忔槑搴� - // far: 166, - // cameraIndexCode: "1523335e47a5476f9f65f90f9983e875", - // }, ], robotVideoList: [ { @@ -609,14 +472,13 @@ // 閫忔槑搴� far: 166, videoarrList: [], - isShowSjxl: true, }; }, computed: { - ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"]), + ...mapState(["viewer1Show", "isLand", "yqfk", "qyEchartsShow"]), }, methods: { - ...mapMutations(["setViewer1Show", "setqyEchartsShow"]), + ...mapMutations(["setViewer1Show", "setIsLand", "setqyEchartsShow"]), showList(index) { switch (index) { case "csbj": @@ -631,11 +493,11 @@ }, handleCommand(command) { switch (command) { - case "qytj": - this.qytj(); - break; case "spjkHandle": this.spjkHandle(); + break; + case "closeSpjk": + this.closeSpjk(); break; case "stdsjHandle": this.stdsjHandle(); @@ -653,30 +515,111 @@ this.shoujixinling(); break; case "closeSjxl": - this.guanbi(); - break; - case "csgxHandle": - this.csgxHandle(); + this.closeSjxl(); break; case "jiqirendahui": this.jiqirendahui(this.robotVideoList); break; } }, + historyHandle() { + if (this.isLand) { + this.$parent.changeMode("褰卞儚搴曞浘"); + if (!this.viewer1Show) { + window.loading = this.$loading({ + lock: true, + text: "褰卞儚瀵规瘮鍔熻兘鍔犺浇涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + } + this.setIsLand(false); + this.setViewer1Show(true); + } else { + if (!this.viewer1Show) { + this.$parent.changeMode("褰卞儚搴曞浘"); + window.loading = this.$loading({ + lock: true, + text: "褰卞儚瀵规瘮鍔熻兘鍔犺浇涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + } + this.setIsLand(false); + this.setViewer1Show(!this.viewer1Show); + } + }, tdglHandle() { - this.setViewer1Show(!this.viewer1Show); + 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: "鍦熷湴绠$悊鍔熻兘鍔犺浇涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + } + this.setIsLand(true); + 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: "鍦熷湴绠$悊鍔熻兘鍔犺浇涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + } + this.setIsLand(true); + this.setViewer1Show(!this.viewer1Show); + } }, stdsjHandle() { + // window.location.href = + // "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"; window.open( "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3" ); }, bzdSystem() { - window.open( - "http://192.162.24.2:8076/login" - ); + 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) => { @@ -705,22 +648,15 @@ }); }); }, - guanbi() { + closeSjxl() { if (heatMapItem) { this.isShowSjxl = true; heatMapItem.deleteObject(); } }, - historyHandle() { - this.$store.commit("showHistory", true); - }, - csgxHandle() { - Bus.$emit("openMyResourcePop", true); - }, - qytj() { - this.setqyEchartsShow(!this.qyEchartsShow); - }, - + // historyHandle() { + // this.$store.commit("showHistory", true); + // }, sceneRoaming() { if (this.showFlag) { document.getElementById("scroll").style.display = "none"; @@ -762,6 +698,16 @@ }); }, 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; @@ -775,23 +721,51 @@ // this.spjkLoad(); } }, + 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(); + } + }, // 鍒嗗眰鍒嗘埛 fencengfenhu() { + Bus.$emit("switchImage"); + const loading = this.$loading({ + lock: true, + text: "寤虹瓚瀹炴櫙妯″瀷鍔犺浇涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + setTimeout(() => { + loading.close(); + }, 2000); Bus.$emit("ShowFCFH", true); }, // 鏈哄櫒浜哄ぇ浼氳棰戣瀺鍚� async jiqirendahui(item) { + Bus.$emit("switch3D"); var that = this; + this.isShowSPRH = false; if (that.robotvideoarrList.length > 0) { for (var i = 0; i < that.robotvideoarrList.length; i++) { that.robotvideoarrList[i].destroy(); that.robotvideoarrList[i] = undefined; } that.robotvideoarrList = []; + this.isShowSPRH = true; } else { const loading = this.$loading({ lock: true, - text: "Loading", + text: "瑙嗛鏁版嵁鍔犺浇涓紝璇风◢鍚�", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }); @@ -807,7 +781,6 @@ item[i].cameraIndexCode, // url: "http://10.10.4.116:8086/getCamerasInfoHls?cameraIndexCode=49ee9fed701444738112e80a4835122c", success: function (result) { - loading.close(); video = sgworld.Creator.Video3D({ cameraPosition: position, //鐩告満瀹夎浣嶇疆 heading: item[i].heading, //64 @@ -823,6 +796,7 @@ useLine: false, //鏄惁璇曠敤杈呭姪绾� success() { sgworld.Navigate.flyToObj(video); + loading.close(); }, }); that.robotvideoarrList.push(video); -- Gitblit v1.9.3