From 2ee0ab96f3edfbf8aefc9e2c5d5f73332411eb99 Mon Sep 17 00:00:00 2001 From: wangjuncheng <1> Date: 星期四, 17 四月 2025 16:30:09 +0800 Subject: [PATCH] change --- src/components/tools/Tools.vue | 128 +++++++++++++++++++++--------------------- 1 files changed, 63 insertions(+), 65 deletions(-) diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue index a1456f9..e0fdbd5 100644 --- a/src/components/tools/Tools.vue +++ b/src/components/tools/Tools.vue @@ -4,73 +4,36 @@ <div class="tools-title" @click="toggleCollapse"> 宸ュ叿鏍� <div class="popup-menu" v-if="isPopupVisible"> - <div - class="popup-item" - v-for="(option, idx) in currentToolOptions" - :key="idx" - @click="handleOptionClick(option)" - > - <img - class="popup-icon" - :src=" - require(`../../assets/img/tools/tools_second/${option.icon}.png`) - " - :alt="option.name" - /> + <div class="popup-item" v-for="(option, idx) in currentToolOptions" :key="idx" + @click="handleOptionClick(option)"> + <img class="popup-icon" :src="require(`../../assets/img/tools/tools_second/${option.icon}.png`) + " :alt="option.name" /> {{ option.name }} </div> </div> <LayerTree class="popup-menu" v-show="showLayerTree" /> <!-- 鍙鍩熷垎鏋� --> - <seeAnalyze - :option="option" - v-show="seeAnalyzeShow" - @update:showConeLine="handleUpdateShowConeLine" - @update-option="onUpdateOption" - @draw="onDraw" - @clear="onClear" - class="popup-menu-see" - /> + <seeAnalyze :option="option" v-show="seeAnalyzeShow" @update:showConeLine="handleUpdateShowConeLine" + @update-option="onUpdateOption" @draw="onDraw" @clear="onClear" class="popup-menu-see" /> <!-- 鍓栭潰鎻愬彇 --> - <TopographyDia - @draw="handleDraw" - @clear="handleClear" - class="popup-menu-see" - v-show="topographyShow" - /> + <TopographyDia @draw="handleDraw" @clear="handleClear" class="popup-menu-see" v-show="topographyShow" /> <!-- 鍓栭潰鎻愬彇鐨別charts --> <div v-show="echartsShow" id="sectionCharts" class="sectionChars"> <div id="echartsView1" style="width: 100%; height: 100%"></div> </div> <!-- 鍧″悜鍒嗘瀽 --> - <Aspect - v-show="showAspect" - @draw="SlopeArrow" - @clear="SlopeArrowClose" - class="popup-menu-see" - /> - <SlopeAnalysis - v-show="showSlope" - class="popup-menu-see" - @update-slope="onUpdateSlope" - /> + <Aspect v-show="showAspect" @draw="SlopeArrow" @clear="SlopeArrowClose" class="popup-menu-see" /> + <SlopeAnalysis v-show="showSlope" class="popup-menu-see" @update-slope="onUpdateSlope" /> + <!-- 闆� --> + <Rain v-show="showRain" class="popup-menu-see" @update-rain="onUpdateRain" /> + <Snow v-show="showSnow" class="popup-menu-see" @update-snow="onUpdateSnow" /> </div> <!-- 宸ュ叿鏍忓唴瀹� --> <transition name="fade"> <div v-if="!isCollapsed" class="tools-content"> - <div - class="tools-item" - v-for="(item, index) in toolList" - :key="index" - @click.stop="handleClick(item)" - > - <img - class="icon" - :src="require(`../../assets/img/tools/${item.icon}.png`)" - :title="item.name" - alt="" - /> + <div class="tools-item" v-for="(item, index) in toolList" :key="index" @click.stop="handleClick(item)"> + <img class="icon" :src="require(`../../assets/img/tools/${item.icon}.png`)" :title="item.name" alt="" /> </div> </div> </transition> @@ -85,14 +48,15 @@ import Aspect from "@/components/tools/Aspect.vue"; import SlopeAnalysis from "@/components/tools/SlopeAnalysis.vue"; import mapUtils from "@/utils/tools.js"; +import Rain from "@/components/tools/Rain.vue"; +import Snow from "@/components/tools/Snow.vue"; // 鍒囨崲灞曞紑/鏀剁缉鐘舵�� function toggleCollapse() { // isCollapsed.value = !isCollapsed.value; } - -const showLayerTree = ref(true); +const showLayerTree = ref(false); const isPopupVisible = ref(false); // 鎺у埗寮圭獥鏄惁鍙 const currentToolOptions = ref([]); // 褰撳墠宸ュ叿鐨勫姛鑳介�夐」 @@ -101,8 +65,8 @@ const isflfx = ref(false); const isFlood = ref(false); const isContourLabel = ref(false); -const isRain = ref(false); -const isSnow = ref(false); +const showRain = ref(false); +const showSnow = ref(false); // 鍓栭潰鍒嗘瀽寮圭獥 const topographyShow = ref(false); @@ -181,6 +145,7 @@ options: [ { name: "闆ㄥぉ妯″紡", icon: "闆ㄥぉ妯″紡" }, { name: "闆ぉ妯″紡", icon: "闆ぉ妯″紡" }, + { name: "娓呴櫎澶╂皵", icon: "娓呴櫎鍒嗘瀽" }, ], }, ]); @@ -197,6 +162,8 @@ echartsShow.value = false; //鍓栭潰echarts showAspect.value = false; //鍧″悜绠ご showSlope.value = false; //鍧″悜绠ご + showRain.value = false; //闆ㄥぉ + showSnow.value = false; //闆ㄥぉ return; } @@ -209,6 +176,8 @@ echartsShow.value = false; //鍓栭潰echarts showAspect.value = false; //鍧″悜绠ご showSlope.value = false; //鍧″悜绠ご + showRain.value = false; //闆ㄥぉ + showSnow.value = false; //闆ㄥぉ } // 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢 @@ -219,21 +188,25 @@ 鏄剧ず鍥惧眰: () => (showLayerTree.value = true), 闅愯棌鍥惧眰: () => (showLayerTree.value = false), 闆ㄥぉ妯″紡: () => { - isRain.value = !isRain.value; - if (isRain.value === false) { - mapUtils.toggleRain("rain", false); - } else { - mapUtils.toggleRain("rain", true); - } + showRain.value = true; + onUpdateRain() }, 闆ぉ妯″紡: () => { - isSnow.value = !isSnow.value; - if (isSnow.value === false) { - mapUtils.toggleSnow("snow", false); + showSnow.value = true + onUpdateSnow() + }, + 娓呴櫎澶╂皵: () => { + if (1) { + showRain.value = false; + showSnow.value = false; + mapUtils.delRain(); // 鍏抽棴闆ㄦ晥鏋� + mapUtils.delSnow(); // 鍏抽棴闆晥鏋� + console.log("澶╂皵鏁堟灉宸叉竻闄�"); } else { - mapUtils.toggleSnow("snow", true); + console.log("娌℃湁鎵撳紑鐨勫ぉ姘旀晥鏋�"); } }, + 鏂囧瓧鏍囩粯: () => mapUtils.CreateLabel("label", true), 澶氭绾挎爣缁�: () => mapUtils.CreateLabel("polyline", true), 澶氳竟褰㈡爣缁�: () => mapUtils.CreateLabel("polygon", true), @@ -402,6 +375,30 @@ Object.assign(formData, newOption); mapUtils.pdfx(formData); }; + +// 闆� +const rainForm = reactive({ + rainSize: 0.5, + rainSpeed: 50, + rainColor: "#99B3CC", +}); +const onUpdateRain = (newOption) => { + console.log(newOption, "new"); + Object.assign(rainForm, newOption); + mapUtils.toggleRain(rainForm, true); +}; +// 闆� +const snowForm = reactive({ + snowSize: 0.02, // 榛樿闆殑澶у皬 + snowSpeed: 100, // 榛樿闆殑閫熷害 + snowColor: "#FFFFFF", // 榛樿闆殑棰滆壊 +}); + +const onUpdateSnow = (newOption) => { + console.log(newOption, "new"); + Object.assign(snowForm, newOption); + mapUtils.toggleSnow(snowForm, true); +}; </script> <style lang="less" scoped> @@ -494,6 +491,7 @@ right: 60px; top: -20px; } + .sectionChars { position: absolute; top: auto; -- Gitblit v1.9.3