From 9edf886a263e2d336211c88879226cf6c19de2e7 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 18 四月 2025 14:26:55 +0800
Subject: [PATCH] change
---
src/components/tools/Tools.vue | 191 ++++++++++++++++++++++++++++++++---------------
1 files changed, 129 insertions(+), 62 deletions(-)
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index e0fdbd5..146a429 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -4,36 +4,87 @@
<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"
+ @handleaspect="handleaspect"
+ @handleSlope="handleSlope"
+ class="popup-menu-see"
+ />
+ <SlopeAnalysis
+ @draw="SlopeAnalysiss"
+ v-show="isContourLabel"
+ 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" />
+ <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>
@@ -79,9 +130,6 @@
// 鍧″悜绠ご寮圭獥
const showAspect = ref(false);
-// 鍧″害鍒嗘瀽寮圭獥
-const showSlope = ref(false);
-
// 宸ュ叿鍒楄〃
const toolList = ref([
{
@@ -113,8 +161,7 @@
active: false,
options: [
{ name: "鐐逛綅淇℃伅鎻愬彇", icon: "鐐逛綅淇℃伅鎻愬彇" },
- { name: "鍧″害鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
- { name: "鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
+ { name: "鍧″害鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
{ name: "鍓栭潰鎻愬彇", icon: "鍓栭潰鎻愬彇" },
{ name: "鎸栧～鏂硅绠�", icon: "鎸栧～鏂硅绠�" },
{ name: "绛夐珮绾垮垎鏋�", icon: "绛夐珮绾垮垎鏋�" },
@@ -152,48 +199,61 @@
// 澶勭悊宸ュ叿鐐瑰嚮浜嬩欢
function handleClick(tool, event) {
- console.log(tool.options);
- // 濡傛灉宸ュ叿鍚嶇О鏄� "鍥惧眰绠＄悊"
+ // 閬嶅巻宸ュ叿鍒楄〃锛屾洿鏂版縺娲荤姸鎬�
+ toolList.value.forEach((item) => {
+ item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
+ });
+
+ // 瀹氫箟涓�涓嚱鏁扮敤浜庨噸缃墍鏈夌姸鎬�
+ const resetAllStates = () => {
+ isPopupVisible.value = false;
+ seeAnalyzeShow.value = false;
+ topographyShow.value = false;
+ echartsShow.value = false;
+ showAspect.value = false;
+ showRain.value = false;
+ showSnow.value = false;
+ isContourLabel.value = false;
+ };
+
+ // 濡傛灉褰撳墠宸ュ叿宸茬粡鏄縺娲荤姸鎬侊紝鍒欏叧闂畠
+ if (currentToolOptions.value === tool.options) {
+ currentToolOptions.value = null; // 娓呯┖褰撳墠宸ュ叿閫夐」
+ resetAllStates();
+ return;
+ }
+
+ // 濡傛灉宸ュ叿鍚嶇О鏄� "鍥惧眰绠＄悊"锛屽垏鎹㈠浘灞傛爲鏄剧ず鐘舵��
if (tool.name === "鍥惧眰绠＄悊") {
- showLayerTree.value = !showLayerTree.value; // 鍒囨崲鍥惧眰鏍戠殑鏄剧ず鐘舵��
- isPopupVisible.value = false; // 闅愯棌寮圭獥
- seeAnalyzeShow.value = false; //鍙鍩�
- topographyShow.value = false; //鍓栭潰
- echartsShow.value = false; //鍓栭潰echarts
- showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
- showRain.value = false; //闆ㄥぉ
- showSnow.value = false; //闆ㄥぉ
+ showLayerTree.value = !showLayerTree.value;
+ resetAllStates();
return;
}
// 瀵逛簬鍏朵粬宸ュ叿
+ resetAllStates();
showLayerTree.value = false; // 纭繚鍥惧眰鏍戦殣钘�
isPopupVisible.value = true; // 鏄剧ず寮圭獥
currentToolOptions.value = tool.options; // 璁剧疆褰撳墠宸ュ叿鐨勫姛鑳介�夐」
- seeAnalyzeShow.value = false; //鍙鍩�
- topographyShow.value = false; //鍓栭潰
- echartsShow.value = false; //鍓栭潰echarts
- showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
- showRain.value = false; //闆ㄥぉ
- showSnow.value = false; //闆ㄥぉ
}
+
+const currentOption = ref(null);
// 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢
function handleOptionClick(option) {
isPopupVisible.value = false;
- console.log("Selected option:", option);
+ currentOption.value = option.name;
+ console.log("Selected option:", currentOption.value);
const actionMap = {
鏄剧ず鍥惧眰: () => (showLayerTree.value = true),
闅愯棌鍥惧眰: () => (showLayerTree.value = false),
闆ㄥぉ妯″紡: () => {
showRain.value = true;
- onUpdateRain()
+ onUpdateRain();
},
闆ぉ妯″紡: () => {
- showSnow.value = true
- onUpdateSnow()
+ showSnow.value = true;
+ onUpdateSnow();
},
娓呴櫎澶╂皵: () => {
if (1) {
@@ -229,11 +289,16 @@
鍓栭潰鎻愬彇: () => {
topographyShow.value = true;
},
- 鍧″害鍒嗘瀽: () => {
- showSlope.value = true;
- },
- 鍧″悜鍒嗘瀽: () => {
+ 鍧″害鍧″悜鍒嗘瀽: () => {
showAspect.value = true;
+ },
+ 绛夐珮绾垮垎鏋�: () => {
+ isContourLabel.value = true;
+ // if (isContourLabel.value === false) {
+ // mapUtils.createContourLabel();
+ // } else {
+ // mapUtils.closeContourLabel();
+ // }
},
鐐逛綅淇℃伅鎻愬彇: () => {
isPickActive.value = !isPickActive.value;
@@ -253,14 +318,6 @@
mapUtils.FloodAnalysis("close");
} else {
mapUtils.FloodAnalysis();
- }
- },
- 绛夐珮绾垮垎鏋�: () => {
- isContourLabel.value = !isContourLabel.value;
- if (isContourLabel.value === false) {
- mapUtils.createContourLabel();
- } else {
- mapUtils.closeContourLabel();
}
},
};
@@ -325,6 +382,14 @@
mapUtils.handleClear();
};
+// 鍒掑垎鍖哄煙
+const SlopeArrow = () => {
+ mapUtils.hfqy();
+};
+// 鍧″害鍒嗘瀽
+const handleaspect = () => {
+ mapUtils.pdfx();
+};
//鍧″害鐨勭澶磋搴�(瑙掑害涓�0~1,鑼冨洿鍐呯殑鍧囧寑鎻掑��)
const angles = [
0.0, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7,
@@ -352,28 +417,30 @@
"#F0AD56",
"#F2CC45",
];
-
-const SlopeArrow = () => {
+// 鍧″悜鍒嗘瀽
+const handleSlope = () => {
mapUtils.pxjt(colors, angles);
};
-// 鍏抽棴鍧″悜绠ご
+// 鍏抽棴鍧″害鍧″悜鍒嗘瀽
const SlopeArrowClose = () => {
- mapUtils.gbpxjt();
+ mapUtils.clearPreviousAnalysis();
};
-// 鍧″害鍒嗘瀽
+// 绛夐珮绾�
const formData = reactive({
- terrainRender: 0,
contourLines: false,
- color: "",
+ color: "red",
spacing: 50,
lineWidth: 5,
});
-// 鍧″害
+const SlopeAnalysiss = () => {
+ mapUtils.dgxfx(formData);
+};
+
const onUpdateSlope = (newOption) => {
Object.assign(formData, newOption);
- mapUtils.pdfx(formData);
+ mapUtils.dgxfx(formData);
};
// 闆�
--
Gitblit v1.9.3