北京市隐患点和监测设备修改

guonan

2025-06-12 b23bc4d88ed6215fdda94dc94a15dd62e9f4a5cc

北京市隐患点和监测设备修改

 src/api/hpApi.js

@@ -39,6 +39,7 @@
  console.log("getSafeLocation:", response);
  return response.data;
}

// 获取避险线路
export async function getEscapeRoute(data) {
  const response = await axios.post("/hp/escapeRoute/getData", {
@@ -49,6 +50,7 @@
  console.log("getEscapeRoute:", response);
  return response.data;
}

// 获取传感器列表
export async function getSensor(data) {
  const response = await axios.post("/hp/sensor/getData", {
@@ -59,6 +61,7 @@
  console.log("getSensor:", response);
  return response.data;
}

// 获取雨量数据
export async function getRainfallData() {
  const response = await axios.post("/hp/rainfallCountyCity/getData", {
@@ -69,62 +72,36 @@
  return response.data;
}

// 获取琉璃庙镇监测设备信息
export async function getDeviceInfoShg(data) {
  const response = await axios.post("/hp/deviceInfo/getData", {
    filterObject: {
      "dictDeviceType": data,
      "townCode": "110116110000"
    },
    "pageSize": 10000
// 按照北京市code查询行政区code
export async function getAeraCode() {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getHiddenDangerCountByDistrict", {
    "dictDisasterGrade": "",
    "dictDisasterType": "",
    "dictRiskLevel": "",
    "districtCode": "110000000000",
    "dictThreatObj": "",
    "year": "2025"
  });
  return response.data;
}

// 获取北京市监测设备信息
export async function getDeviceInfo(data) {
  const response = await axios.post("/hp/deviceInfo/getData", {

    "currentPage": 1,
    "pageSize": 10000,
    "filterObject": {
      "belongObjList": [
        "1797461961110261762"
      ],
      "townCode": data
      // "id": "",
      // "deviceName": "",
      // "deviceCode": "",
      // "deviceClientId": "",
      // "dictDeviceType": "",
      // "hdName": "",
      // "installUnit": "",
      // "rtuUnit": "",
      // "dictDisasterType": "",
      // "dictCommunicationType": "",
      // "dictDeviceStatus": "",
      // "divisionDistrict": "",
    },
    "sortedList": [
      {
        "sorted": "createTime",
        "type": "desc"
      }
    ]
  })

// 按照行政区code查询乡镇code
export async function getAeraTownCode(data) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getHiddenDangerTownCount", {
    "dictDisasterGrade": "",
    "dictDisasterType": "",
    "dictRiskLevel": "",
    "districtCode": data,
    "dictThreatObj": "",
    "year": "2025"
  });
  return response.data;
}


// 获取隐患点信息
// 根据乡镇Code获取隐患点
export async function getDangerPoint(data) {

  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {

    filterObject: {
      // divisionCounty其实可以不传
      // "divisionCounty": divisionCounty,
      "divisionTown": data,
      "year": 2025
    },
@@ -133,44 +110,57 @@
  return response.data;
}

// export async function fetchAndLoadDangerPoints(loadCallback) {
//   let currentPage = 1;
//   const pageSize = 100; // 每次请求的数据量

//   while (true) {
//     try {
//       const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {
//         filterObject: {
//           divisionCounty: "110111000000",
//           divisionTown: null,
//           year: 2025
//         },
//         pageSize: pageSize,
//         currentPage: currentPage // 添加当前页码参数
//       });
// 分页获取行政区划隐患点信息
export async function getDangerPointByPage(data, pageNum) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {
    filterObject: {
      "divisionCounty": data,
      "year": 2025
    },
    "pageSize": 50,
    "pageNum": pageNum,
  });
  return response.data;
}

//       const pageData = response.data?.data?.pageData;

//       if (!Array.isArray(pageData)) {
//         console.error("Expected an array in 'pageData', but got:", typeof pageData, pageData);
//         break;
//       }
// 监测设备接口
/**
 * 检查时间列是否按升序排列
 * @param {string} data - 雨量计设备类型id
 * @param {string} townCode - 乡镇code,可以查询乡镇监测设备信息
 */
export async function getDeviceInfo(data, townCode) {
  const response = await axios.post("/hp/deviceInfo/getData", {
    filterObject: {
      "dictDeviceType": data,
      "townCode": townCode,
      // 所属项目
      // "belongObjList": [
      //   "1797461961110261762"
      // ],
    },
    "pageSize": 10000
  });
  return response.data;
}

//       if (pageData.length === 0) break; // 没有更多数据了

//       // 调用传入的回调函数，用于更新页面内容
//       loadCallback(pageData);

//       if (pageData.length < pageSize) break; // 如果本次返回的数据少于pageSize，说明已获取完所有数据

//       currentPage++; // 更新下一页的页码
//     } catch (error) {
//       console.error("Error fetching danger points:", error);
//       break;
//     }
//   }
// }

// 分页查询行政区划监测设备信息
export async function getDeviceInfoByPage(data, pageNum) {
  const response = await axios.post("/hp/deviceInfo/getData", {
    filterObject: {
      "divisionDistrict": data,
      // 所属项目
      "belongObjList": [
        "1797461961110261762"
      ],
    },
    "pageSize": 50,
    "pageNum": pageNum
  });
  return response.data;
}


// 根据年份获取雨量数据
@@ -181,7 +171,6 @@
    },
    "pageSize": 1000
  });
  console.log("getRainfallData:", response);
  return response.data;
}

@@ -219,28 +208,10 @@
  return response.data;
}

// 按照北京市code查询行政区code
export async function getAeraCode() {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getHiddenDangerCountByDistrict", {
    "dictDisasterGrade": "",
    "dictDisasterType": "",
    "dictRiskLevel": "",
    "districtCode": "110000000000",
    "dictThreatObj": "",
    "year": "2025"
  });
  return response.data;
}

// 按照行政区code查询乡镇code
export async function getAeraTownCode(data) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getHiddenDangerTownCount", {
    "dictDisasterGrade": "",
    "dictDisasterType": "",
    "dictRiskLevel": "",
    "districtCode": data,
    "dictThreatObj": "",
    "year": "2025"
  });

// 查询北京市监测设备的数量
export async function getDeviceCount() {
  const response = await axios.get("/hp/device/statisticsCountyByDeviceType");
  return response.data;
}

 src/components/menu/Device.vue

@@ -9,7 +9,7 @@
        <el-select
          @change="handleChange1"
          v-model="selectValue1"
          placeholder="Select"
          placeholder="请选择行政区"
          size="mini"
          style="width: 240px"
        >
@@ -26,7 +26,7 @@
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          placeholder="请选择重点沟"
          size="mini"
          style="width: 240px"
        >
@@ -50,6 +50,7 @@
        <el-tree
          v-show="!isLoading"
          :data="deviceTree"
          default-expand-all
          node-key="deviceId"
          :props="treeProps"
          @node-click="handleTreeNodeClick"
@@ -74,10 +75,10 @@
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { createPoint, removeEntities, clearAllPoints } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfoShg, getDeviceInfo } from "@/api/hpApi";
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useSimStore } from "@/store/simulation";
import { Loading } from "@element-plus/icons-vue";
import { getDeviceInfoByPage } from "@/api/hpApi";

const simStore = useSimStore();

@@ -94,12 +95,6 @@
  }
});

// onBeforeRouteUpdate((to, from, next) => {
//   if (to.path !== "/zhjc") {
//     handleCleanup();
//   }
//   next();
// });
const route = useRoute();

onBeforeUnmount(() => {
@@ -108,22 +103,34 @@
  }
});

// watch(
//   () => simStore.DeviceShowSwitch,
//   (newValue, oldValue) => {
//     if (newValue) {
//       initializeDevicePoints();
//     } else {
//       clearAllPoints();
//     }
//   }
// );
const selectValue1 = ref("");

const BJoptions = ref([
  { label: "密云区", value: "110118000000" },
  { label: "房山区", value: "110111000000" },
  { label: "门头沟区", value: "110109000000" },
  { label: "延庆区", value: "110119000000" },
  { label: "怀柔区", value: "110116000000" },
  { label: "昌平区", value: "110114000000" },
  { label: "平谷区", value: "110117000000" },
  { label: "海淀区", value: "110108000000" },
  { label: "石景山区", value: "110107000000" },
  { label: "丰台区", value: "110106000000" },
]);

const selectValue = ref("孙胡沟");

const options = ref([
  { value: "孙胡沟", label: "孙胡沟" },
  { value: "鱼水洞后沟", label: "鱼水洞后沟" },
  { value: "于家西沟", label: "于家西沟" },
  { value: "北河沟", label: "北河沟" },
  { value: "龙泉峪村", label: "龙泉峪村" },
]);

const deviceListAll = ref([]);

const initializeDevicePoints = () => {
  const list = [];
  // val.forEach((item, index) => {
  deviceListAll.value.forEach((item, index) => {
    // 根据需求可增删
    item.type = getDictName(deviceDictList, item.dictDeviceType);
@@ -135,6 +142,19 @@
    // console.log(`设备名称: ${item.id}, 设备类型: ${item.name}`);
    createPoint(item);
  });
};

const DevicePoints = async (item) => {
  // 根据需求可增删
  item.type = getDictName(deviceDictList, item.dictDeviceType);
  item.name = item.deviceName
  // item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
  item.id = item.deviceId;
  item.className = "device";
  item.showLabel = true;
  // 打印每个设备的名称和设备类型
  // console.log(`设备名称: ${item.id}, 设备类型: ${item.name}`);
  createPoint(item);
};

// 根据区域名称加载设备列表
@@ -174,26 +194,49 @@
    ElMessage("请选择一个区域");
    return;
  }
  selectValue1.value = "";
  selectValue.value = item;
  // 根据新区域名重新加载设备列表
  loadDeviceList(item);
  initializeDevicePoints();

  // console.log(deviceListAll.value);
};

const selectValue1 = ref("北京市");
// 处理区域变化事件
const handleChange1 = async (item) => {
  if (!item) {
    ElMessage("请选择一个区域");
    return;
  }
  selectValue1.value = item;
  selectValue.value = "";
  deviceListAll.value = [];
  let pageNum = 1;
  let hasMore = true;

const BJoptions = ref([]);
  try {
    while (hasMore) {
      const res = await getDeviceInfoByPage(item, pageNum);

const selectValue = ref("孙胡沟");
      // 将新数据追加到列表中
      deviceListAll.value = [...deviceListAll.value, ...res.data.pageData];

const options = ref([
  { value: "孙胡沟", label: "孙胡沟" },
  { value: "鱼水洞后沟", label: "鱼水洞后沟" },
  { value: "于家西沟", label: "于家西沟" },
  { value: "北河沟", label: "北河沟" },
  { value: "龙泉峪村", label: "龙泉峪村" },
]);
      // 判断是否还有下一页
      if (pageNum < res.data.pageCount) {
        pageNum++;
        await new Promise((resolve) => setTimeout(resolve, 300));
      } else {
        hasMore = false;
      }
    }
  } catch (err) {
    console.error("获取监测设备失败", err);
    deviceListAll.value = []; // 可选：清空或保留已加载部分
  } finally {
    // 暂时先关闭加载状态，因为此处为分页请求数据，然后一点一点的渲染，最终会加载完成
    // 如果开启加载状态，最后还是会等所有数据都请求回来才会渲染
    // loading.value = false; // 关闭加载状态
  }
};

const treeProps = {
  label: "deviceName",
@@ -229,7 +272,13 @@
});

function handleTreeNodeClick(data) {
  initializeDevicePoints();
  if (selectValue.value) {
    // 此处调用是因为GisView页面会在点击下一乡镇之前把上一个选择的区域的隐患点清除掉（如果刚好选择了孙胡沟，那么下一个点击将会清空孙胡沟的隐患点）
    initializeDevicePoints();
  } else {
    // 行政区划的点位太多了，只能选中哪个渲染哪个
    DevicePoints(data);
  }
  // 只有设备节点才处理点击事件
  if (!data.children) {
    const entity = viewer.entities.getById(data.deviceId);

 src/components/menu/Location.vue

@@ -10,7 +10,7 @@
        <el-select
          @change="handleChange1"
          v-model="selectValue1"
          placeholder="Select"
          placeholder="请选择行政区"
          size="mini"
          style="width: 240px"
        >
@@ -27,7 +27,7 @@
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          placeholder="请选择重点沟"
          size="mini"
          style="width: 240px"
        >
@@ -66,14 +66,14 @@

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from "vue";
import { createPoint,clearAllPoints } from "@/utils/map";
import { createPoint, clearAllPoints } from "@/utils/map";
import { useSimStore } from "@/store/simulation";
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { Loading } from "@element-plus/icons-vue";
import { getDangerPointByPage } from "@/api/hpApi";

const districtList = ref([]);


const simStore = useSimStore();

@@ -86,38 +86,40 @@
});
const selectValue = ref("孙胡沟");

const selectValue1 = ref("北京市");
const selectValue1 = ref("");

const BJoptions = ref([]);
const BJoptions = ref([
  { label: "密云区", value: "110118000000" },
  { label: "房山区", value: "110111000000" },
  { label: "门头沟区", value: "110109000000" },
  { label: "延庆区", value: "110119000000" },
  { label: "怀柔区", value: "110116000000" },
  { label: "昌平区", value: "110114000000" },
  { label: "平谷区", value: "110117000000" },
  { label: "海淀区", value: "110108000000" },
  { label: "石景山区", value: "110107000000" },
  { label: "丰台区", value: "110106000000" },
]);

const options = ref([
  {
    value: "孙胡沟",
    label: "孙胡沟",
  },
  {
    value: "鱼水洞后沟",
    label: "鱼水洞后沟",
  },
  {
    value: "于家西沟",
    label: "于家西沟",
  },
  {
    value: "北河沟",
    label: "北河沟",
  },
  {
    value: "龙泉峪村",
    label: "龙泉峪村",
  },
  { value: "孙胡沟", label: "孙胡沟" },
  { value: "鱼水洞后沟", label: "鱼水洞后沟" },
  { value: "于家西沟", label: "于家西沟" },
  { value: "北河沟", label: "北河沟" },
  { value: "龙泉峪村", label: "龙泉峪村" },
]);

const loading = ref(true); // 控制加载状态

function handleClick(district) {
  // 此处调用是因为GisView页面会在点击下一乡镇之前把上一个选择的区域的隐患点清除掉（如果刚好选择了孙胡沟，那么下一个点击将会清空孙胡沟的隐患点）
  initializeDevicePoints();
  if (selectValue.value) {
    // 此处调用是因为GisView页面会在点击下一乡镇之前把上一个选择的区域的隐患点清除掉（如果刚好选择了孙胡沟，那么下一个点击将会清空孙胡沟的隐患点）
    initializeDevicePoints();
  } else {
    // 行政区划的点位太多了，只能选中哪个渲染哪个
    DevicePoints(district);
  }

  const entity = viewer.entities.getById(district.hdId);
  if (entity) {
    viewer.flyTo(entity, {
@@ -148,6 +150,18 @@
  );
};

const DevicePoints = async (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";
  await createPoint(item);
};

const filterDataByArea = async (areaName) => {
  clearAllPoints();
  if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
@@ -165,33 +179,59 @@
  }
};

const handleChange1 = async (item) => {
  if (!item) {
    ElMessage("请选择一个区域");
    return;
  }
  selectValue1.value = item;
  selectValue.value = "";
  // 开启加载状态
  // loading.value = true;
  districtList.value = []; // 清空旧数据

  let pageNum = 1;
  let hasMore = true;

  try {
    while (hasMore) {
      const res = await getDangerPointByPage(item, pageNum);

      // 将新数据追加到列表中
      districtList.value = [...districtList.value, ...res.data.pageData];

      // 判断是否还有下一页
      if (pageNum < res.data.pageCount) {
        pageNum++;
        await new Promise((resolve) => setTimeout(resolve, 300));
      } else {
        hasMore = false;
      }
    }
  } catch (err) {
    console.error("获取隐患点失败", err);
    districtList.value = []; // 可选：清空或保留已加载部分
  } finally {
    // 暂时先关闭加载状态，因为此处为分页请求数据，然后一点一点的渲染，最终会加载完成
    // 如果开启加载状态，最后还是会等所有数据都请求回来才会渲染
    // loading.value = false; // 关闭加载状态
  }
};

// 处理区域变化事件
const handleChange = (item) => {
  const areaName = item;
  if (!areaName) {
  selectValue1.value = "";
  selectValue.value = item;

  if (!item) {
    ElMessage.warning("请选择一个区域");
    return;
  }
  filterDataByArea(areaName);
  filterDataByArea(item);
};

let isInitialized = false;

// watch(
//   () => simStore.DangerShowSwitch,
//   async (newValue, oldValue) => {
//     console.log("当前状态：", newValue);

//     if (newValue) {
//       if (!isInitialized) {
//         await initializeDevicePoints();
//         isInitialized = true;
//       }
//     } else {
//       clearAllPoints();
//       isInitialized = false;
//     }
//   }
// );
// 监听 simStore.DangerPoint 变化
watch(
  () => simStore.DangerPoint,

 src/components/tools/Detail.vue

@@ -30,8 +30,8 @@
}
// 监测设备具体信息
function handlDeviceDetail() {
  const name = deviceDetail.value.name;
  detailTitle.value = name;
  // const name = deviceDetail.value.deviceForShort;
  detailTitle.value = deviceDetail.value.deviceForShort;
  detailList.value = [
    {
      name: "设备编号",

 src/utils/customEntity.js

@@ -169,7 +169,7 @@
                    windowPosition
                )
                // top 方案
                const left = windowPosition.x - 80
                const left = windowPosition.x - 100
                const top = `${windowPosition.y - (div.offsetHeight + 10)}`

                if (left > 0 && top > 0) {

 src/views/GisView.vue

@@ -41,10 +41,10 @@
import { loadAreaPolygon } from "@/utils/area.js";
import { loadAreaPolygonAll } from "@/utils/area_all.js";
import { isVisibleDistance } from "@/utils/customEntity";
import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
import { useRoute } from "vue-router";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { useSimStore } from "@/store/simulation";
const route = useRoute();
const simStore = useSimStore();

import {
@@ -52,6 +52,7 @@
  getDeviceInfo,
  getAeraCode,
  getAeraTownCode,
  getDeviceCount,
} from "@/api/hpApi";
/////////////////////////地图影像选择/////////////////////////
const views = [
@@ -116,7 +117,6 @@
};
/////////////////////////地图影像选择/////////////////////////

const route = useRoute();
let handler = null;
/////////////////////////初始化地图/////////////////////////
function initMap() {
@@ -423,13 +423,40 @@
  },
};

const showDeviceCount = ref(false);

// 监听路由变化
watch(
  () => route.name,
  (newName) => {
    console.log("路由名称变化:", newName);
    // 使用三元运算符来决定 showDeviceCount 的值
    showDeviceCount.value = newName === "zhjc" ? true : false;
    initDistrictCount("primary");
  },
  { immediate: true }
);

// 初始化区域统计
async function initDistrictCount(level = "secondary") {
  try {
    const deviceTotal = ref([]);
    if (level === "primary") {
      // 一级区域：直接调用 getAeraCode()
      // 如果是 "/zhjc" 路由，先获取设备统计接口数据
      if (showDeviceCount.value) {
        deviceTotal.value = await getDeviceCount();
      }
      const res = await getAeraCode();
      res.data.forEach((item) => {
        if (showDeviceCount.value) {
          const matchedDistrict = deviceTotal.value.data.find(
            (d) => d.districtName === item.districtName
          );
          if (matchedDistrict) {
            item.count = matchedDistrict.count; // 更新 count
          }
        }
        processDistrictItem(item, LEVEL_CONFIG[level], level);
      });
    } else if (level === "secondary") {
@@ -497,7 +524,7 @@
        res = await getDangerPoint(item.districtCode);
      } else if (route.path === "/zhjc") {
        // 请求监测设备数据
        res = await getDeviceInfo(item.districtCode);
        res = await getDeviceInfo(null,item.districtCode);
      } else {
        loadingInstance.close();
        return;

 src/views/Home.vue

@@ -60,8 +60,7 @@
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh, getDangerPoint } from "@/api/hpApi.js";
import { convertToWKT } from "@/utils/wktUtils";
import { getDeviceInfoShg } from "@/api/hpApi";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfo } from "@/api/hpApi";

const route = useRoute();
const simStore = useSimStore();
@@ -109,7 +108,7 @@
    simStore.DangerPoint = res.data.pageData;
  });

  getDeviceInfoShg().then((res) => {
  getDeviceInfo(null,"110116110000").then((res) => {
    simStore.devices = res.data.pageData;
  });
  try {

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -78,7 +78,7 @@
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { getDeviceInfoShg, getYLJData } from "@/api/hpApi";
import { getDeviceInfo, getYLJData } from "@/api/hpApi";

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -117,7 +117,7 @@
const getRainListAll = () => {
  // 雨量计类型id
  const ids = "1874719366287368194";
  getDeviceInfoShg(ids).then((res) => {
  getDeviceInfo(ids, "110116110000").then((res) => {
    rainListNoFilter.value = res.data.pageData;
    // 根据当前选择的区域自动过滤
    updateShgListByArea();