From 10ecfd0b60442d209d1ab4b749580ffb638d1992 Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 08 五月 2024 14:44:04 +0800 Subject: [PATCH] 数字人更新 --- src/components/menu/bottom-menu.vue | 611 +++++++++++++++++++++++++------------------------------ 1 files changed, 279 insertions(+), 332 deletions(-) diff --git a/src/components/menu/bottom-menu.vue b/src/components/menu/bottom-menu.vue index badb2fb..ce52abf 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> @@ -17,41 +24,32 @@ <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"> @@ -77,58 +75,6 @@ </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="鍥涘懆鏂瑰悜:"> @@ -195,78 +141,30 @@ </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 class="SZRtextAreaBox" v-if="isShowTextArea"> + <el-row :gutter="10"> + <el-col :span="19"> + <el-input + v-model="input" + placeholder="璇疯緭鍏ュ唴瀹�" + clearable + @keyup.enter.native="sendCommand($event)" + ></el-input> + </el-col> + <el-col :span="4"> + <el-button type="primary" @click="sendCommand('click')" + >鎼滅储</el-button + > + </el-col> + </el-row> + </div> </div> </template> <style scoped> .specialTool { - width: 440px; + width: 550px; position: absolute; bottom: 65px; color: #fff; @@ -277,31 +175,65 @@ display: flex; justify-content: space-between; } -.specialTool .bottomwrapper:nth-of-type(2), +.SZRtextAreaBox { + background: rgba(5, 39, 126, 0.7); + padding: 10px; + width: 375px; + position: absolute; + /* display: flex; */ + /* justify-content: space-around; */ + bottom: 165px; + color: #fff; + left: 50%; + transform: translateX(-50%); + z-index: 99999; +} +.SZRtextAreaBox .el-form-item { + margin: 0; +} +.SZRtextAreaBox .el-input { + /* width: 300px; */ +} .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; } + .bottomwrapper { display: flex; flex-direction: column; align-items: center; + cursor: pointer; } + .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%); } + .textbox { margin-top: 2px; width: 100px; @@ -309,6 +241,7 @@ background-image: url("~@/assets/img/new/textbg.png"); background-size: 100% 100%; } + .textbox span { text-align: center; display: block; @@ -319,12 +252,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; @@ -342,40 +277,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; } -.el-dropdown /deep/ .el-dropdown-selfdefine{ - margin-left: 8px !important; + +.el-dropdown /deep/ .el-dropdown-selfdefine { + 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 { 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, @@ -388,8 +333,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 { @@ -410,6 +356,7 @@ .scroll_div li:hover { color: #0987ff; } + .funcBox { width: 230px; position: absolute; @@ -425,7 +372,8 @@ let video4; let heatMapItem; import { mapState, mapMutations } from "vuex"; -import { queryBySquare } from "@/utils/request"; +import { queryBySquare } from "@/api/api"; + import Bus from "../tools/Bus"; import { roman } from "../../assets/json/index.js"; import URLInCode from "@/assets/js/urlInCode"; @@ -441,6 +389,7 @@ isShowSPRH: true, csbjShow: false, jxmxShow: false, + input: "", romanOption: [ { name: "鏍稿績鍖�" }, { name: "鏅缁垮湴" }, @@ -455,6 +404,7 @@ lon: 116.51507, lat: 39.79686, height: 40, + isLand: true, // 鍥涘懆鏂瑰悜 heading: 305, // 淇话瑙掑害 @@ -469,63 +419,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: [ { @@ -623,10 +516,16 @@ }; }, computed: { - ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"]), + ...mapState(["viewer1Show", "isLand", "yqfk", "qyEchartsShow"]), + isShowTextArea() { + if (this.$store.state.isShowTextArea) { + this.input = ""; + } + return this.$store.state.isShowTextArea; + }, }, methods: { - ...mapMutations(["setViewer1Show", "setqyEchartsShow"]), + ...mapMutations(["setViewer1Show", "setIsLand", "setqyEchartsShow"]), showList(index) { switch (index) { case "csbj": @@ -639,11 +538,17 @@ break; } }, + sendCommand(event) { + // if (event == "click") { + mapMsg.testMsg(this.input); + // } else { + // // 闃绘榛樿琛屼负锛堝鏋滈渶瑕佺殑璇濓級 + // mapMsg.testMsg(this.input); + // event.preventDefault(); + // } + }, handleCommand(command) { switch (command) { - case "qytj": - this.qytj(); - break; case "spjkHandle": this.spjkHandle(); break; @@ -668,28 +573,90 @@ case "closeSjxl": this.closeSjxl(); break; - case "csgxHandle": - this.csgxHandle(); - break; case "jiqirendahui": this.jiqirendahui(this.robotVideoList); break; } }, - tdglHandle() { - if (!this.viewer1Show) { - const loading = this.$loading({ - lock: true, - text: "鍦熷湴绠$悊鍔熻兘鍔犺浇涓紝璇风◢鍚�", - spinner: "el-icon-loading", - background: "rgba(0, 0, 0, 0.7)", - }); - setTimeout(() => { - loading.close(); - }, 3500); + historyHandle() { + this.switchMenu(1); + 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); } - - this.setViewer1Show(!this.viewer1Show); + }, + 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: "鍦熷湴绠$悊鍔熻兘鍔犺浇涓紝璇风◢鍚�", + 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 = @@ -698,63 +665,36 @@ "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); - }); - // //鍒涘缓鐑姏鍥� - heatMapItem = sgworld.Creator.addHeatMap("鐑姏鍥�", { - type: "Heatmap", // 鐑姏鍥剧被鍨嬨�怘eatmap/HeatmapGL銆戯紙鍙�夛級 - sourceData: res, - radius: 7, - gradient: { - ".3": "blue", - ".5": "green", - ".7": "yellow", - ".95": "red", - }, - tooltip: true, // tooltip鏄剧ず鏁板�� - }); - }); - }, - closeSjxl() { - if (heatMapItem) { - this.isShowSjxl = true; - heatMapItem.deleteObject(); + this.switchMenu(3); + if (this.isShowSjxl) { + this.isShowSjxl = false; + this.$parent.signallingShow = true; + } else { + this.closeSjxl(); } }, - historyHandle() { - this.$store.commit("showHistory", true); + closeSjxl() { + this.isShowSjxl = true; + this.$parent.signallingShow = false; }, - 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"; @@ -796,42 +736,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