change

wangjuncheng

2025-04-18 2eabb2e5cf290d6bb1f86d5e3b11cc796079cdcc

 src/components/tools/Tools.vue

@@ -4,36 +4,85 @@
    <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"
      />
      <!-- 剖面提取的echarts -->
      <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
        @draw="SlopeAnalysiss"
        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" />
      <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>
@@ -153,31 +202,50 @@
// 处理工具点击事件
function handleClick(tool, event) {
  console.log(tool.options);

  // 更新所有工具的 active 状态
  toolList.value.forEach((item) => {
    item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
  });

  // 如果当前工具已经是激活状态，则关闭它
  if (currentToolOptions.value === tool.options) {
    currentToolOptions.value = null; // 清空当前工具选项
    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; // 雪天
    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; //雨天
    seeAnalyzeShow.value = false; // 可视域
    topographyShow.value = false; // 剖面
    echartsShow.value = false; // 剖面echarts
    showAspect.value = false; // 坡向箭头
    showSlope.value = false; // 坡度箭头
    showRain.value = false; // 雨天
    showSnow.value = false; // 雪天
    return;
  }

  // 对于其他工具
  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; //雨天
  seeAnalyzeShow.value = false; // 可视域
  topographyShow.value = false; // 剖面
  echartsShow.value = false; // 剖面echarts
  showAspect.value = false; // 坡向箭头
  showSlope.value = false; // 坡度箭头
  showRain.value = false; // 雨天
  showSnow.value = false; // 雪天
}

// 处理弹窗选项点击事件
@@ -189,11 +257,11 @@
    隐藏图层: () => (showLayerTree.value = false),
    雨天模式: () => {
      showRain.value = true;
      onUpdateRain()
      onUpdateRain();
    },
    雪天模式: () => {
      showSnow.value = true
      onUpdateSnow()
      showSnow.value = true;
      onUpdateSnow();
    },
    清除天气: () => {
      if (1) {
@@ -358,18 +426,23 @@
};
// 关闭坡向箭头
const SlopeArrowClose = () => {
  mapUtils.gbpxjt();
  mapUtils.cleanupAnalysisTools();
};

// 坡度分析
const formData = reactive({
  terrainRender: 0,
  contourLines: false,
  color: "",
  color: "red",
  spacing: 50,
  lineWidth: 5,
});

const SlopeAnalysiss = () => {
  mapUtils.pdfx(formData);
};


// 坡度
const onUpdateSlope = (newOption) => {
  Object.assign(formData, newOption);