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 | 105 ++++++++++++++++++++++------------------------------ 1 files changed, 44 insertions(+), 61 deletions(-) diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue index 53139b3..e0fdbd5 100644 --- a/src/components/tools/Tools.vue +++ b/src/components/tools/Tools.vue @@ -4,79 +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" - /> + <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> @@ -92,6 +49,7 @@ 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() { @@ -108,7 +66,7 @@ const isFlood = ref(false); const isContourLabel = ref(false); const showRain = ref(false); -const isSnow = ref(false); +const showSnow = ref(false); // 鍓栭潰鍒嗘瀽寮圭獥 const topographyShow = ref(false); @@ -187,6 +145,7 @@ options: [ { name: "闆ㄥぉ妯″紡", icon: "闆ㄥぉ妯″紡" }, { name: "闆ぉ妯″紡", icon: "闆ぉ妯″紡" }, + { name: "娓呴櫎澶╂皵", icon: "娓呴櫎鍒嗘瀽" }, ], }, ]); @@ -204,6 +163,7 @@ showAspect.value = false; //鍧″悜绠ご showSlope.value = false; //鍧″悜绠ご showRain.value = false; //闆ㄥぉ + showSnow.value = false; //闆ㄥぉ return; } @@ -217,6 +177,7 @@ showAspect.value = false; //鍧″悜绠ご showSlope.value = false; //鍧″悜绠ご showRain.value = false; //闆ㄥぉ + showSnow.value = false; //闆ㄥぉ } // 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢 @@ -228,15 +189,24 @@ 闅愯棌鍥惧眰: () => (showLayerTree.value = false), 闆ㄥぉ妯″紡: () => { 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), @@ -417,6 +387,18 @@ 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> @@ -509,6 +491,7 @@ right: 60px; top: -20px; } + .sectionChars { position: absolute; top: auto; -- Gitblit v1.9.3