撒点

guonan

2025-06-10 f0a0f01ca70e852caf0300fd47d1840799c4d65d

 src/views/GisView.vue

@@ -36,6 +36,7 @@
  addTileset,
  addTerrain,
  removeEntities,
  clearAllPoints,
} from "@/utils/map.js";
import { loadAreaPolygon } from "@/utils/area.js";
import { loadAreaPolygonAll } from "@/utils/area_all.js";
@@ -46,7 +47,12 @@
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();

import { getDangerPoint } from "@/api/hpApi";
import {
  getDangerPoint,
  getDeviceInfo,
  getAeraCode,
  getAeraTownCode,
} from "@/api/hpApi";
/////////////////////////地图影像选择/////////////////////////
const views = [
  { label: "地图", value: "map", icon: "地图.png" },
@@ -418,22 +424,39 @@
};

// 初始化区域统计
function initDistrictCount(level = "secondary") {
  const getPoint =
    level === "secondary" ? getDistrictCount : getDistrictCountByCity;
  const config = LEVEL_CONFIG[level];

  getPoint()
    .then((res) => {
async function initDistrictCount(level = "secondary") {
  try {
    if (level === "primary") {
      // 一级区域：直接调用 getAeraCode()
      const res = await getAeraCode();
      res.data.forEach((item) => {
        processDistrictItem(item, config, level); // 添加level参数
        processDistrictItem(item, LEVEL_CONFIG[level], level);
      });
    })
    .catch((error) => {
      console.error(`初始化${level}级区域统计失败:`, error);
    });
}
    } else if (level === "secondary") {
      // 二级区域：先获取一级区域，再遍历每个一级区域的 code 查询二级区域
      const primaryRes = await getAeraCode();

      // 遍历所有一级区域的 districtCode，并发请求二级区域数据
      const townPromises = primaryRes.data.map((item) =>
        getAeraTownCode(item.districtCode)
      );

      // 等待所有二级区域请求完成
      const townResults = await Promise.all(townPromises);

      // 处理所有二级区域数据
      townResults.forEach((townRes) => {
        townRes.data.forEach((townItem) => {
          processDistrictItem(townItem, LEVEL_CONFIG[level], level);
        });
      });
    } else {
      console.error("未知的 level 类型:", level);
    }
  } catch (error) {
    console.error(`初始化 ${level} 级区域统计失败:`, error);
  }
}
// 处理单个区域项
function processDistrictItem(item, config, level = "secondary") {
  // 添加默认值
@@ -450,78 +473,82 @@
}
import { ElMessage } from "element-plus";

const districtList = ref([]); // 当前区域的隐患点列表
const loadedPointIds = new Set(); // 已加载的隐患点ID集合
const districtList = ref([]);

// 设置二级区域点击处理(请求隐患点，监测设备等)
function secondaryHandler(html, item, config) {
  html.element.addEventListener("click", async () => {
    try {
      // handleCleanup();
      // 清理已有点
      handleCleanup();

      // 显示 loading 提示
      // 显示 loading 提示（无遮罩，仅文字+转圈）
      const loadingInstance = ElMessage({
        type: "success",
        message: "隐患点正在加载中...",
        duration: 0,
        icon: "el-icon-loading", // 确保使用的是Element Plus提供的loading图标类名
        grouping: true,
        customClass: "custom-loading-message", // 添加自定义类名
        type: "info",
        message: "数据正在加载中...",
        duration: 0, // 持续显示，直到手动关闭
        icon: "loading", // 显示为 loading 图标（Element Plus 支持）
        grouping: true, // 相同内容的消息合并，避免重复提示
      });
      // 请求隐患点数据
      const res = await getDangerPoint(item.districtCode);

      const newPoints = res.data.pageData;
      let res;
      if (route.path === "/yhgl") {
        // 请求隐患点数据
        res = await getDangerPoint(item.districtCode);
      } else if (route.path === "/zhjc") {
        // 请求监测设备数据
        res = await getDeviceInfo(item.districtCode);
      } else {
        loadingInstance.close();
        return;
      }
      districtList.value = [];
      // 更新数据
      districtList.value = res.data.pageData;

      if (newPoints.length === 0) {
        ElMessage.warning("该区域暂无隐患点");
        districtList.value = [];
      if (districtList.value.length === 0) {
        ElMessage.warning("该区域暂无相关数据");
        loadingInstance.close();
        return;
      }

      // 清空当前区域显示的隐患点列表（但不清除已加载的标记）
      districtList.value = [];

      // 遍历新数据，过滤掉已加载过的点
      for (const [index, point] of newPoints.entries()) {
        if (loadedPointIds.has(point.hdId)) {
          continue; // 如果已加载，跳过
        }

        // 添加到已加载集合
        loadedPointIds.add(point.hdId);

        // 设置点属性
        point.id = point.hdId;
        point.name = point.hdName;
        point.latitude = point.lat;
        point.longitude = point.lon;
      // 创建地图点
      for (const [index, point] of districtList.value.entries()) {
        point.id = point.hdId || point.deviceId; // 根据实际情况调整
        point.latitude = point.lat || point.latitude; // 根据实际情况调整
        point.longitude = point.lon || point.longitude; // 根据实际情况调整
        point.showBillboard = true;
        point.type = point.disasterType;
        point.type = point.disasterType || point.deviceTypeName; // 根据实际情况调整
        point.className = "district";

        districtList.value.push(point); // 更新当前区域隐患点列表
        // ✅ 根据路由决定名称字段
        if (route.path === "/yhgl") {
          point.name = point.hdName; // 隐患点名称
          point.className = "district";
        } else if (route.path === "/zhjc") {
          point.name = point.deviceForShort; // 设备简称
          point.className = "device";
        }

        await createPoint(point); // 创建地图点
        await createPoint(point);
      }

      // 飞向指定位置
      await flyToDistrict(item.longitude, item.latitude, config.flyToHeight);

      // 加载完成后关闭 loading
      // 加载完成后关闭 loading 提示
      loadingInstance.close();
    } catch (error) {
      console.error("区域点击处理失败:", error);
      ElMessage.error("数据加载失败，请稍后再试");
      loadingInstance.close(); // 确保在发生错误时也关闭 loading 提示
    }
  });
}

const handleCleanup = async () => {
  await Promise.all(
    districtList.value.map((item) => removeEntities(item.hdId))
  );
  districtList.value = [];
  clearAllPoints();
};

// 设置一级区域点击处理
@@ -727,9 +754,5 @@
}
.earthBox.shift-right {
  right: 13%;
}
.custom-loading-message .el-icon-loading {
  color: #409eff !important; /* 设置为你想要的颜色 */
  font-size: 18px; /* 可选：调整图标大小 */
}
</style>