还原目录树功能

guonan

2025-05-20 a0967df707a547428df9fc80256877c26e061c4a

 src/components/tools/LayerTree.vue

@@ -13,18 +13,26 @@
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted } from "vue";
import {
  ref,
  onMounted,
  watch,
  nextTick,
  onUnmounted,
  computed,
  watchEffect,
} from "vue";
import { createPoint, removeEntities, addTileset } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { useRoute } from "vue-router";
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import { checkedKeys } from "@/store/index";
import {
  getDuanMainData,
  getDevicetListData,
  getDistrictListData,
} from "@/api/index.js";
import { init } from "echarts";
import { getDuanMainData, getDistrictListData } from "@/api/index.js";
import { getDeviceInfo, getDangerPoint } from "@/api/hpApi";

import { useSimStore } from "@/store/simulation";

const simStore = useSimStore();

const route = useRoute();

@@ -34,7 +42,7 @@
    label: "三维服务",
    children: [
      { label: "模型数据" },
      { label: "地形数据" }, 
      { label: "地形数据" },
      { label: "影像数据" },
    ],
  },
@@ -45,7 +53,7 @@
      { label: "孙胡沟隐患点" },
      { label: "综合监测设备信息" },
      { label: "孙胡沟断面" },
      { label: "避险点" },
      { label: "避险场所" },
    ],
  },
]);
@@ -85,7 +93,6 @@
//   // });
//   // treeMap.set("影像数据", ImageryLayer);
// }


// 地形数据
let TerrainLayer = null;
@@ -193,7 +200,7 @@
    case "泥石流隐患点面数据":
    case "综合监测设备信息":
    case "孙胡沟断面":
    case "避险点":
    case "避险场所":
      console.log(label, checked, indeterminate);
      break;
  }
@@ -216,16 +223,15 @@
  }
}

// 设备列表
// 监测设备列表
const devicetList = ref([]);

/**
 * 获取设备列表并初始化设备点
 */
// 监测设备列表
const getDevicetList = async () => {
  await getDevicetListData().then((res) => {
    devicetList.value = res.data;
  });
  const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
  devicetList.value = res.data.pageData.filter((item) =>
    item.deviceName?.includes("孙胡沟")
  );
};

async function initDevicePoint() {
@@ -233,7 +239,7 @@
  await getDevicetList();
  devicetList.value.forEach((item) => {
    item.type = getDictName(deviceDictList, item.dictDeviceType);
    item.name = item.type;
    item.name = item.deviceName.split("孙胡沟")[1];
    item.id = item.deviceId;
    item.className = "device";
    item.showLabel = true;
@@ -245,34 +251,34 @@
  treeMap.set("综合监测设备信息", list);
}

// 区域列表
const districtList = ref([]);
// 隐患点列表
watchEffect(() => {
  const dangerPoints = simStore.DangerPoint.filter((item) =>
    item.position?.includes("孙胡沟")
  );

/**
 * 获取区域列表并初始化区域点
 */
const getDistrictList = async () => {
  await getDistrictListData().then((res) => {
    districtList.value = res.data;
  });
};
  if (dangerPoints && dangerPoints.length > 0) {
    const list = [];

async function initDistrictPoint() {
  let list = [];
  await getDistrictList();
  districtList.value.forEach((item) => {
    item.showBillboard = true;
    item.className = "district";
    item.type = "泥石流";
    const entity = createPoint(item);
    entity.show = false;
    list.push(entity);
  });
  treeMap.set("孙胡沟隐患点", list);
}
    dangerPoints.forEach((item) => {
      // console.log(item, "item");
      item.id = item.hdId;
      item.name = item.hdName;
      item.latitude = item.lat;
      item.longitude = item.lon;
      item.showBillboard = true;
      item.type = item.disasterType;
      item.className = "district";
      const entity = createPoint(item);
      entity.show = false;
      list.push(entity);
    });

    treeMap.set("孙胡沟隐患点", list);
  }
});

let divPointList = [];

/**
 * 初始化断面点
 */
@@ -297,21 +303,21 @@
}

/**
 * 添加避险点
 * 添加避险场所
 */
function addTetrahedron(visible) {
  const emergencyAreaList = [];
  // 加载避险点底层面片
  // 加载避险场所底层面片
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);

    // 默认隐藏避险点
    // 默认隐藏避险场所
    entities.forEach((entity) => {
      entity.show = false;
    });

    // 将避险点实体存储到 treeMap
    treeMap.set("避险点", entities);
    // 将避险场所实体存储到 treeMap
    treeMap.set("避险场所", entities);
  });
}

@@ -320,7 +326,7 @@
 */
function getData() {
  initDevicePoint();
  initDistrictPoint();
  // initDistrictPoint();
  initDuanmianPoint();
  addTetrahedron();
}
@@ -384,6 +390,7 @@
</script>

<style lang="less" scoped>
@import url("../../assets/css/infobox.css");
.layer-tree {
  background: url("@/assets/img/tools/plotting_new.png");
  width: 200px;
@@ -392,6 +399,6 @@
  overflow: hidden;
}
/deep/ .el-tree {
    overflow: hidden !important;
  overflow: hidden !important;
}
</style>