From deccf053a8e07b82f4cd8b95b3243f4c5f1d2b86 Mon Sep 17 00:00:00 2001 From: Jin Lei <jinlei_182@163.com> Date: 星期四, 16 十一月 2023 10:29:06 +0800 Subject: [PATCH] 1.弹窗修复 --- src/components/menu/tools/special.vue | 138 +++++++++++++++++++++++---------------------- 1 files changed, 70 insertions(+), 68 deletions(-) diff --git a/src/components/menu/tools/special.vue b/src/components/menu/tools/special.vue index 26b3b74..d831e0e 100644 --- a/src/components/menu/tools/special.vue +++ b/src/components/menu/tools/special.vue @@ -2,52 +2,28 @@ <div class="special" id="special"> <div class="specialTools"> <div class="specialTool" @click="tdglHandle"> - <el-tooltip - class="item" - effect="dark" - content="鍦熷湴绠$悊" - placement="top-start" - popper-class="item_tooltip" - > + <el-tooltip class="item" effect="dark" content="鍦熷湴绠$悊" placement="top-start" popper-class="item_tooltip"> <el-button> <img src="@/assets/img/left/ztfx/tdgl.png" /> </el-button> </el-tooltip> </div> <div class="specialTool" @click="stdsj"> - <el-tooltip - class="item" - effect="dark" - content="瑙嗗浘澶ф暟鎹钩鍙�" - placement="top-start" - popper-class="item_tooltip" - > + <el-tooltip class="item" effect="dark" content="瑙嗗浘澶ф暟鎹钩鍙�" placement="top-start" popper-class="item_tooltip"> <el-button> <img src="@/assets/img/left/ztfx/dashuju.png" /> </el-button> </el-tooltip> </div> <div class="specialTool" @click="spjkHandle"> - <el-tooltip - class="item" - effect="dark" - content="瑙嗛鐩戞帶" - placement="top-start" - popper-class="item_tooltip" - > + <el-tooltip class="item" effect="dark" content="瑙嗛鐩戞帶" placement="top-start" popper-class="item_tooltip"> <el-button> <img src="@/assets/img/left/ztfx/spjk.png" /> </el-button> </el-tooltip> </div> <div class="specialTool" @click="jjHandle"> - <el-tooltip - class="item" - effect="dark" - content="琛楁櫙" - placement="top-start" - popper-class="item_tooltip" - > + <el-tooltip class="item" effect="dark" content="琛楁櫙" placement="top-start" popper-class="item_tooltip"> <el-button> <img src="@/assets/img/left/ztfx/jiejing.png" /> </el-button> @@ -55,26 +31,12 @@ </div> <div class="specialTool" @click="qytj"> - <el-tooltip - class="item" - effect="dark" - content="鏁版嵁姹囪仛" - placement="top-start" - popper-class="item_tooltip" - > - <el-button> <img src="@/assets/img/left/ztfx/yqfk.png" /> </el-button - ></el-tooltip> + <el-tooltip class="item" effect="dark" content="鏁版嵁姹囪仛" placement="top-start" popper-class="item_tooltip"> + <el-button> <img src="@/assets/img/left/ztfx/yqfk.png" /> </el-button></el-tooltip> </div> <div class="specialTool" @click="rangeQuery()"> - <el-tooltip - class="item" - effect="dark" - content="鑼冨洿鏌ヨ" - placement="top-start" - popper-class="item_tooltip" - > - <el-button> <img src="@/assets/img/left/ztfx/sjxq.png" /> </el-button - ></el-tooltip> + <el-tooltip class="item" effect="dark" content="鑼冨洿鏌ヨ" placement="top-start" popper-class="item_tooltip"> + <el-button> <img src="@/assets/img/left/ztfx/sjxq.png" /> </el-button></el-tooltip> </div> <!-- <div class="specialTool" @click="guanxian(openGX)"> <el-tooltip @@ -121,10 +83,12 @@ width: 111%; margin-left: -15px; } + .el-button:focus, .el-button:hover { background: transparent; } + .special { position: absolute; left: 65px; @@ -135,9 +99,11 @@ background-color: rgba(14, 50, 143, 0.5); width: 350px; } + .specialTools { margin-left: 20px; } + .specialTool { border: 1px solid #999; border-radius: 5px; @@ -146,9 +112,11 @@ height: 40px; margin: 5px; } + .specialTool img { margin: 4px; } + .specialTools::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮�*/ width: 5px; @@ -173,6 +141,7 @@ border-radius: 0; background: rgba(218, 218, 218, 0.1); } + .specialTool:hover { background: rgba(0, 168, 255, 0.16); } @@ -180,9 +149,11 @@ .tool-title { margin: 1px 10px; } + .tool-title label { vertical-align: top; } + .special label { margin-left: 10px; font-size: 17px; @@ -191,6 +162,7 @@ /* color: #3d3d3d; */ color: white; } + .el-button { padding: 0 !important; font-size: 24px; @@ -199,14 +171,17 @@ display: block; background: rgba(0, 0, 0, 0); } + .el-button label { font-size: 14px; } + .closeTool { position: absolute; bottom: 0; left: 0; } + .active { background: rgba(0, 168, 255, 0.16); } @@ -343,7 +318,7 @@ ...mapState(["viewer1Show", "yqfk", "cesiumInit"]), ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"]), }, - mounted() {}, + mounted() { }, watch: { cesiumInit: { handler(newVal, oldVal) { @@ -418,7 +393,7 @@ sgworld.drawObj && (sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(), - sgworld.drawObj.end && sgworld.drawObj.end()); + sgworld.drawObj.end && sgworld.drawObj.end()); let props = pick.id.properties; let screenHeight = @@ -497,7 +472,7 @@ {}, "0", true, - function () {} + function () { } ); window.panoramaHandler = new Cesium.ScreenSpaceEventHandler( Viewer.scene.canvas @@ -523,7 +498,7 @@ } else { try { window.panoramaLayer.deleteObject(); - } catch (e) {} + } catch (e) { } window.panoramaHandler.destroy(); window.panoramaHandler = undefined; } @@ -575,17 +550,20 @@ let obj = {}; let lng; let lat; + let isCamera = false; if (nPickFeature.id.tag) { let properties = nPickFeature.id.properties; let propertyNames = nPickFeature.id.properties.propertyNames; if (propertyNames.indexOf("鐩戞帶鍚�") !== -1) { - obj["JK鍚嶇О"] = properties["JK鍚嶇О"]._value; - obj["JK绫诲瀷"] = properties["JK绫诲瀷"]._value; - obj["鍔熻兘"] = properties["鍔熻兘"]._value; - obj["鎵�鍦ㄥ尯"] = properties["鎵�鍦ㄥ尯"]._value; - obj["JK缂栧彿"] = properties["JK缂栧彿"]._value; - obj["JK鍐呯爜"] = properties["JK鍐呯爜"]._value; + isCamera = true; + // obj["JK鍚嶇О"] = properties["JK鍚嶇О"]._value; + // obj["JK绫诲瀷"] = properties["JK绫诲瀷"]._value; + // obj["鍔熻兘"] = properties["鍔熻兘"]._value; + // obj["鎵�鍦ㄥ尯"] = properties["鎵�鍦ㄥ尯"]._value; + // obj["JK缂栧彿"] = properties["JK缂栧彿"]._value; + // obj["JK鍐呯爜"] = properties["JK鍐呯爜"]._value; } else { + propertyNames.forEach((item) => { obj[item] = properties[item]._value; }); @@ -602,20 +580,44 @@ lng = nPickFeature.id.positions[0]; lat = nPickFeature.id.positions[1]; } + if (!isCamera) { + tooltipHTML = ""; + // console.log(obj); - tooltipHTML = ""; - // console.log(obj); + for (let i in obj) { + let value = obj[i]; + value && (tooltipHTML += `<p>${i}锛�${value || "鏃�"}</p>`); + } - for (let i in obj) { - let value = obj[i]; - value && (tooltipHTML += `<p>${i}锛�${value || "鏃�"}</p>`); + if (tooltip) { + tooltip.show(false); + tooltip = null; + } + tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, { + color: "black", + addY: -40, + far: 200000, + closeBtn: true, + close: () => { + this.resetImg(); + this.resetBorder(); + }, + }); + + let description = `<div style='background: + rgba(14, 50, 143, 0.6); + border: 1px solid #205fbc; + border-radius: 5px; + color: #fff; + padding: 15px; + box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38); + '>${tooltipHTML}</div>`; + + tooltip.showAt( + Cesium.Cartesian3.fromDegrees(lng, lat, 0), + description + ); } - - if (tooltip) { - tooltip.show(false); - tooltip = null; - } - //鍏抽棴鍦板潡淇℃伅寮圭獥 Bus.$emit("closeLandInfoPop", true); layuiLayer.close(SmartEarthPopupData.layerProp); @@ -782,7 +784,7 @@ }); }); }, - + handleCommand(command) { switch (command) { case "qytj": -- Gitblit v1.9.3