对接中科软接口

guonan

2025-05-16 a8e5c275a8724feff972502c1b2db348dba4482b

对接中科软接口

 src/api/hpApi.js

@@ -29,16 +29,6 @@
  }, intervalTime);
}

// 获取隐患点清单
export async function getDangerPoint(data) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {
    filterObject: {
      year: 2024, // 动态传入的年份参数
    },
  });
  console.log("getDangerPoint:", response);
  return response.data;
}
// 获取避险位置
export async function getSafeLocation(data) {
  const response = await axios.post("/hp/safeHavenLocation/getData", {
@@ -70,7 +60,7 @@
  return response.data;
}
// 获取雨量数据
export async function getRainfallData(data) {
export async function getRainfallData() {
  const response = await axios.post("/hp/rainfallCountyCity/getData", {
    filterObject: {},
    "pageSize": 1000
@@ -78,3 +68,27 @@
  console.log("getRainfallData:", response);
  return response.data;
}

// 获取监测设备信息
export async function getDeviceInfo(data) {
  const response = await axios.post("/hp/deviceInfo/getData", {
    filterObject: {
      "dictDeviceType": data,
      "townCode": "110116110000"
    },
    "pageSize": 10000
  });
  return response.data;
}

// 获取隐患点信息
export async function getDangerPoint(data) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {
    filterObject: {
      "divisionCounty": "110116000000",
      "divisionTown": "110116110000"
    },
    "pageSize": 10000
  });
  return response.data;
}

 src/components/menu/Device.vue

@@ -7,6 +7,7 @@
      <div style="margin-left: 5px">
        <span style="color: white">重点沟：</span>
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          size="large"
@@ -45,7 +46,38 @@
import { ref, computed, onMounted } from "vue";
import { createPoint, removeEntities } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceData } from "@/api/index";
import { getDeviceInfo } from "@/api/hpApi";

// 定义一个响应式引用存储设备列表
const deviceListAll = ref([]);

// 组件挂载时获取设备信息，默认过滤“孙胡沟”
onMounted(() => {
  loadDeviceList("孙胡沟");
});

// 根据区域名称加载设备列表
const loadDeviceList = async (areaName) => {
  try {
    const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
    deviceListAll.value = res.data.pageData.filter((item) =>
      item.deviceName?.includes(areaName)
    );
  } catch (error) {
    console.error("加载设备信息失败", error);
  }
};

// 处理区域变化事件
const handleChange = (item) => {
  if (!item) {
    ElMessage("请选择一个区域");
    return;
  }
  // 根据新区域名重新加载设备列表
  loadDeviceList(item);
  console.log(deviceListAll.value);
};

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

@@ -72,181 +104,17 @@
  },
]);

const devicetList = ref([
  {
    deviceCode: "01303A9016",
    deviceId: "1821067850122498049",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "14372958380",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "303A9016",
    deviceId: "1821067878870257666",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "1437295822",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "1101161102180100010063",
    deviceId: "1554360510040182786",
    deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063",
    dictDeviceType: "1437295810",
    latitude: 40.556589,
    longitude: 116.579459,
  },
  {
    deviceCode: "1101161102180100194030",
    deviceId: "1554361328692826114",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030",
    dictDeviceType: "1437295815",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100031041",
    deviceId: "1554360448702681089",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041",
    dictDeviceType: "1437295832",
    latitude: 40.553236,
    longitude: 116.592304,
  },
  {
    deviceCode: "1101161102180100022007",
    deviceId: "1554360273959587842",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007",
    dictDeviceType: "1437295822",
    latitude: 40.545821,
    longitude: 116.586354,
  },
  {
    deviceCode: "1101161102180100225406",
    deviceId: "1554360478494822402",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406",
    dictDeviceType: "1437295821",
    latitude: 40.554368,
    longitude: 116.592989,
  },
  {
    deviceCode: "1101161102180100055006",
    deviceId: "1554360276627165185",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006",
    dictDeviceType: "1437295811",
    latitude: 40.554398,
    longitude: 116.592929,
  },
  {
    deviceCode: "1101161102180100010064",
    deviceId: "1554360452670492674",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064",
    dictDeviceType: "1437295810",
    latitude: 40.545741,
    longitude: 116.586304,
  },
  {
    deviceCode: "1101161102180100183030",
    deviceId: "1554360533087883265",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030",
    dictDeviceType: "1437295825",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100194031",
    deviceId: "1554361328877375489",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031",
    dictDeviceType: "1437295815",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100055007",
    deviceId: "1554360509775941634",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007",
    dictDeviceType: "1437295811",
    latitude: 40.554729,
    longitude: 116.598165,
  },
  {
    deviceCode: "1101161102180100031042",
    deviceId: "1554360448916590593",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042",
    dictDeviceType: "1437295832",
    latitude: 40.549398,
    longitude: 116.600387,
  },
  {
    deviceCode: "1101161102180100225407",
    deviceId: "1554360478658400257",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407",
    dictDeviceType: "1437295821",
    latitude: 40.55481,
    longitude: 116.598025,
  },
  {
    deviceCode: "1101161102180100022008",
    deviceId: "1554360274165108737",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008",
    dictDeviceType: "1437295822",
    latitude: 40.544645,
    longitude: 116.596511,
  },
  {
    deviceCode: "1101161102180100183031",
    deviceId: "1554360533255655426",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031",
    dictDeviceType: "1437295825",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100010065",
    deviceId: "1554360452888596482",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065",
    dictDeviceType: "1437295810",
    latitude: 40.543104,
    longitude: 116.59585,
  },
  {
    deviceCode: "1101161102180100031040",
    deviceId: "1554360448383913986",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
    dictDeviceType: "1437295832",
    latitude: 40.563822,
    longitude: 116.592648,
  },
  {
    deviceCode: "1101161102180100010062",
    deviceId: "1554360452519497730",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062",
    dictDeviceType: "1437295810",
    latitude: 40.558778,
    longitude: 116.586892,
  },
  {
    deviceCode: "1101160042160100010005",
    deviceId: "1554360582698110977",
    deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005",
    dictDeviceType: "1437295810",
    latitude: 40.533623,
    longitude: 116.602406,
  },
]);

const treeProps = {
  label: "deviceName",
  children: "children",
};

// 计算属性：将设备列表转换为树形结构
// 计算属性：将设备列表转换为树形结构
const deviceTree = computed(() => {
  const typeMap = {};

  // 先按设备类型分组
  devicetList.value.forEach((device) => {
  deviceListAll.value.forEach((device) => {
    const typeName = getDictName(deviceDictList, device.dictDeviceType);

    if (!typeName) {

 src/components/menu/Location.vue

@@ -8,6 +8,7 @@
      <div style="margin-left: 5px">
        <span style="color: white">重点沟：</span>
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          size="large"
@@ -21,6 +22,8 @@
          />
        </el-select>
      </div>

      <div style="overflow-y: auto; height: 95%">
      <div
        v-for="(item, key) in districtList"
        :key="key"
@@ -28,7 +31,8 @@
        @click="handleClick(item)"
      >
        <div class="district-item-icon"></div>
        <div class="district-item-text">{{ item.name }}</div>
          <div class="district-item-text">{{ item.hdName }}</div>
        </div>
      </div>
    </div>
  </div>
@@ -36,8 +40,10 @@

<script setup>
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { getDistrictData } from "@/api/index";
import { createPoint, removeEntities } from "@/utils/map";
import { useSimStore } from "@/store/simulation";

const simStore = useSimStore();

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

@@ -64,641 +70,639 @@
  },
]);

const districtList = ref([
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020058",
    latitude: 40.56652778,
    length: 0,
    district: "琉璃庙镇孙胡沟村尹家西沟尹建燕家屋后",
    longitude: 116.5803889,
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟尹建燕家屋后崩塌隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 2,
    threatenMoney: 0,
    threatenPopulation: "3",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020078",
    latitude: 40.56497222,
    length: 0,
    district: "琉璃庙镇孙胡沟村河西于凤英家屋后",
    longitude: 116.5955278,
    monitor: "",
    monitorAdvice: "",
    name: "河西于凤英家屋后崩塌隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 4,
    threatenMoney: 0,
    threatenPopulation: "6",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030041",
    latitude: 40.55369444,
    length: 0,
    district: "琉璃庙镇孙胡沟公路",
    longitude: 116.6002778,
    monitor: "",
    monitorAdvice: "",
    name: "南梁小东沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 0,
    threatenMoney: 0,
    threatenPopulation: "",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030015",
    latitude: 40.55277778,
    length: 0,
    district: "琉璃庙镇孙胡沟村南梁村大窑沟",
    longitude: 116.5994722,
    monitor: "",
    monitorAdvice: "",
    name: "大窑沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测、已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 5,
    threatenMoney: 0,
    threatenPopulation: "11",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030076",
    latitude: 40.55972222,
    length: 0,
    district: "琉璃庙镇孙胡沟村东坎大东沟",
    longitude: 116.5916667,
    monitor: "",
    monitorAdvice: "",
    name: "大东沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 1,
    threatenMoney: 0,
    threatenPopulation: "2",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030074",
    latitude: 40.56580556,
    length: 0,
    district: "琉璃庙镇孙胡沟村尹家西沟",
    longitude: 116.59,
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes:
      "已监测；灾害体变化：4处坡积物垮塌，堆积至坡脚，方量约20m³。",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 7,
    threatenMoney: 0,
    threatenPopulation: "12",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030053",
    latitude: 40.57361111,
    length: 0,
    district: "琉璃庙镇孙胡沟村北大地西洼子沟",
    longitude: 116.5897222,
    monitor: "",
    monitorAdvice: "",
    name: "北大地西洼子沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "沟口正对房屋，降雨时出水量大，建议治理，汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 6,
    threatenMoney: 0,
    threatenPopulation: "10",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020102",
    latitude: 40.55972222,
    length: 0,
    district: "琉璃庙镇孙胡沟村范家庄王秀莲家屋后",
    longitude: 116.5922222,
    monitor: "",
    monitorAdvice: "",
    name: "范家庄王秀莲家屋后崩塌隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "边坡较陡，顺向岩层，房屋靠近坡脚，建议尽快治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 1,
    threatenMoney: 0,
    threatenPopulation: "3",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020742",
    latitude: 40.57680556,
    length: 0,
    district: "琉璃庙镇孙胡沟村三亩地范忠田家屋后",
    longitude: 116.5887222,
    monitor: "",
    monitorAdvice: "",
    name: "三亩地范忠田家屋后崩塌隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，更换警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 8,
    threatenMoney: 0,
    threatenPopulation: "23",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030040",
    latitude: 40.56344444,
    length: 0,
    district: "琉璃庙镇孙胡沟村河西于家西沟",
    longitude: 116.5953889,
    monitor: "",
    monitorAdvice: "",
    name: "于家西沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes:
      "已监测，2018村已治理；沟口堆积扇明显，正对房屋，建议汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 18,
    threatenMoney: 0,
    threatenPopulation: "59",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030055",
    latitude: 40.55283333,
    length: 0,
    district: "琉璃庙镇孙胡沟村椴树底下东沟",
    longitude: 116.5999444,
    monitor: "",
    monitorAdvice: "",
    name: "椴树底下东沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理：威胁对象重复：与110116030015重复5户11人",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 5,
    threatenMoney: 0,
    threatenPopulation: "11",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030054",
    latitude: 40.56166667,
    length: 0,
    district: "琉璃庙镇孙胡沟村上台子河东南沟",
    longitude: 116.5997222,
    monitor: "",
    monitorAdvice: "",
    name: "河东南沟泥石流隐患点",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 0,
    threatenMoney: 0,
    threatenPopulation: "",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
]);
function getData() {
  getDistrictData().then((res) => {
    districtList.value = res.data;
  });
}
const districtList = ref([]);

// const districtList = ref([
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116020058",
//     latitude: 40.56652778,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村尹家西沟尹建燕家屋后",
//     longitude: 116.5803889,
//     monitor: "",
//     monitorAdvice: "",
//     name: "尹家西沟尹建燕家屋后崩塌隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 2,
//     threatenMoney: 0,
//     threatenPopulation: "3",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "崩塌",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116020078",
//     latitude: 40.56497222,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村河西于凤英家屋后",
//     longitude: 116.5955278,
//     monitor: "",
//     monitorAdvice: "",
//     name: "河西于凤英家屋后崩塌隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 4,
//     threatenMoney: 0,
//     threatenPopulation: "6",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "崩塌",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030041",
//     latitude: 40.55369444,
//     length: 0,
//     district: "琉璃庙镇孙胡沟公路",
//     longitude: 116.6002778,
//     monitor: "",
//     monitorAdvice: "",
//     name: "南梁小东沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "",
//     preventionLevel: "",
//     preventionPlan: "定期巡查,立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 0,
//     threatenMoney: 0,
//     threatenPopulation: "",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030015",
//     latitude: 40.55277778,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村南梁村大窑沟",
//     longitude: 116.5994722,
//     monitor: "",
//     monitorAdvice: "",
//     name: "大窑沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "已监测、已治理",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 5,
//     threatenMoney: 0,
//     threatenPopulation: "11",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030076",
//     latitude: 40.55972222,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村东坎大东沟",
//     longitude: 116.5916667,
//     monitor: "",
//     monitorAdvice: "",
//     name: "大东沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "已治理",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 1,
//     threatenMoney: 0,
//     threatenPopulation: "2",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030074",
//     latitude: 40.56580556,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村尹家西沟",
//     longitude: 116.59,
//     monitor: "",
//     monitorAdvice: "",
//     name: "尹家西沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes:
//       "已监测；灾害体变化：4处坡积物垮塌，堆积至坡脚，方量约20m³。",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 7,
//     threatenMoney: 0,
//     threatenPopulation: "12",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030053",
//     latitude: 40.57361111,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村北大地西洼子沟",
//     longitude: 116.5897222,
//     monitor: "",
//     monitorAdvice: "",
//     name: "北大地西洼子沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "沟口正对房屋，降雨时出水量大，建议治理，汛期加强巡查",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 6,
//     threatenMoney: 0,
//     threatenPopulation: "10",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116020102",
//     latitude: 40.55972222,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村范家庄王秀莲家屋后",
//     longitude: 116.5922222,
//     monitor: "",
//     monitorAdvice: "",
//     name: "范家庄王秀莲家屋后崩塌隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "边坡较陡，顺向岩层，房屋靠近坡脚，建议尽快治理",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 1,
//     threatenMoney: 0,
//     threatenPopulation: "3",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "崩塌",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116020742",
//     latitude: 40.57680556,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村三亩地范忠田家屋后",
//     longitude: 116.5887222,
//     monitor: "",
//     monitorAdvice: "",
//     name: "三亩地范忠田家屋后崩塌隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，更换警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 8,
//     threatenMoney: 0,
//     threatenPopulation: "23",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "崩塌",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030040",
//     latitude: 40.56344444,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村河西于家西沟",
//     longitude: 116.5953889,
//     monitor: "",
//     monitorAdvice: "",
//     name: "于家西沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes:
//       "已监测，2018村已治理；沟口堆积扇明显，正对房屋，建议汛期加强巡查",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 18,
//     threatenMoney: 0,
//     threatenPopulation: "59",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030055",
//     latitude: 40.55283333,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村椴树底下东沟",
//     longitude: 116.5999444,
//     monitor: "",
//     monitorAdvice: "",
//     name: "椴树底下东沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "已治理：威胁对象重复：与110116030015重复5户11人",
//     preventionLevel: "",
//     preventionPlan: "定期巡查，预警转移，立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "中型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 5,
//     threatenMoney: 0,
//     threatenPopulation: "11",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
//   {
//     activeStatus: "",
//     areaCode: "",
//     areaName: "",
//     brookLength: 0,
//     checkId: "",
//     city: "北京市",
//     codeProvince: "110116",
//     county: "怀柔",
//     dangerLevel: "",
//     disasterStatus: "",
//     drainageArea: "",
//     elevation: 0,
//     featureDes: "",
//     groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
//     hasPlan: "",
//     id: "110116030054",
//     latitude: 40.56166667,
//     length: 0,
//     district: "琉璃庙镇孙胡沟村上台子河东南沟",
//     longitude: 116.5997222,
//     monitor: "",
//     monitorAdvice: "",
//     name: "河东南沟泥石流隐患点",
//     number:
//       "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
//     preventionDes: "已监测",
//     preventionLevel: "",
//     preventionPlan: "定期巡查,立警示牌",
//     preventionUnit: "乡镇",
//     principal: "",
//     province: "北京市",
//     qp: "",
//     reason: "",
//     responsibleUnit: "",
//     riskLevel: "",
//     scale: "小型",
//     stableLevel: "",
//     status: "",
//     thickness: 0,
//     threatenFamily: 0,
//     threatenMoney: 0,
//     threatenPopulation: "",
//     threatenType: "",
//     town: "琉璃庙镇",
//     trigger: "",
//     type: "泥石流",
//     village: "孙胡沟村",
//     volume: "",
//     volumePotential: "",
//     width: 0,
//   },
// ]);

function handleClick(district) {
  const entity = viewer.entities.getById(district.id);
  const entity = viewer.entities.getById(district.unifiedCode);
  if (entity) {
    viewer.flyTo(entity, {
      offset: {
@@ -713,18 +717,36 @@
  // }
}

function initDistrictPoint() {
  districtList.value.forEach((item) => {
    item.showBillboard = false;
    item.className = "district";
// 隐患点列表
const originalData = simStore.DangerPoint; // 存储原始数据（仅加载一次）

    createPoint(item);
  });
// 根据区域名称过滤数据
const filterDataByArea = (areaName) => {
  if (!areaName) {
    districtList.value = [];
    return;
}

onMounted(() => {
  getData();
  // initDistrictPoint()
  districtList.value = originalData.filter((item) =>
    item.position?.includes(areaName)
  );
};

// 处理区域变化事件
const handleChange = (item) => {
  const areaName = item;
  if (!areaName) {
    ElMessage.warning("请选择一个区域");
    return;
  }

  filterDataByArea(areaName);
};

// 组件挂载时加载原始数据，并默认过滤为 "孙胡沟"
onMounted(async () => {
  // await loadAllData();
  filterDataByArea("孙胡沟"); // 默认显示孙胡沟的数据
});
onBeforeUnmount(() => {
  // removeEntities()
@@ -760,6 +782,9 @@
.district-item-text {
  color: white;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .el-select__placeholder {
  color: white;

 src/constant/dict.js

@@ -1,11 +1,11 @@
export const deviceDictList = [
    {
        label: "次生仪",
        label: "次声仪",
        value: "1437295832",
    },
    {
        label: "雨量计",
        value: "1437295810",
        value: "1874719366287368194",
    },
    {
        label: "摄像头",

 src/store/simulation.js

@@ -4,7 +4,8 @@
import { createSimData } from '@/api/trApi'

export const useSimStore = defineStore('simulation', () => {
    // 所有UI状态...
    // 隐患点列表
    const DangerPoint = ref([])
    const navigationShow = ref(true)
    const leftShow = ref(false)
    const rightShow = ref(false)
@@ -145,6 +146,7 @@
        schemCard,
        backToHome,
        rainFalls,
        DangerPoint,

        // 方案相关方法
        setSchemCard,

 src/views/Home.vue

@@ -8,10 +8,14 @@
  <!-- <Left v-if="leftShow" />
        <Right v-if="rightShow" /> -->

  <Tools :style="rightRiverShow || showDangerAssess
  <Tools
    :style="
      rightRiverShow || showDangerAssess
    ? { right: '400px' }
    : { right: '12px' }
    " class="tools" />
    "
    class="tools"
  />
  <!-- <Message v-if="messageShow" class="messageTool" /> -->
  <Announcement v-show="$route.fullPath != '/'" class="announcementTool" />
  <!-- <Location v-if="locationShow" class="locationTool" /> -->
@@ -51,13 +55,12 @@
import GisView from "./GisView.vue";
// import Device from "@/components/menu/Device.vue";
import Detail from "@/components/tools/Detail.vue";
// 不可以删除，否则全局样式会丢掉，不知道原因
// import ResultAssess from "@/components/monifangzhen/ResultAssess.vue";
// import DangerAssess from "@/components/monifangzhen/DangerAssess.vue";
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh } from "@/api/hpApi.js"
import { getSimData ,fetchWaterSimulationData} from "@/api/trApi.js"
import { convertToWKT } from '@/utils/wktUtils';
import { setupTokenRefresh, getDangerPoint } from "@/api/hpApi.js";
import { getSimData, fetchWaterSimulationData } from "@/api/trApi.js";
import { convertToWKT } from "@/utils/wktUtils";

const route = useRoute();
const simStore = useSimStore();
@@ -85,30 +88,32 @@
        [120.123456, 30.654321],
        [120.234567, 30.765432],
        [120.345678, 30.876543],
        [120.123456, 30.654321] // 闭合点
    [120.123456, 30.654321], // 闭合点
    ],
    [
        [121.111111, 31.222222],
        [121.333333, 31.444444],
        [121.555555, 31.666666],
        [121.111111, 31.222222] // 闭合点
    ]
    [121.111111, 31.222222], // 闭合点
  ],
];


// 计算属性
const showDetail = computed(() => showDeviceDetail.value);
onMounted(async () => {
  
  setupTokenRefresh()// 获取宏图token
  getSimData() //测试tr后端
onMounted(async () => {
  setupTokenRefresh(); // 获取宏图token
  getSimData(); //测试tr后端
  // 获取隐患点列表（因为中科软后端接口获取加载时间较长）
  getDangerPoint().then((res) => {
    simStore.DangerPoint = res.data.pageData;
  });
  try {
    const wktResult = convertToWKT(multiPolygonCoordinates);
    // console.log(wktResult,'a');
    // 输出: MULTIPOLYGON(((120.123456 30.654321,120.234567 30.765432,120.345678 30.876543,120.123456 30.654321)))
  } catch (error) {
    console.error(error.message);

  }
});
// 初始化

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -23,15 +23,16 @@
          </el-form-item>
          <el-form-item label="雨量数据:">
            <el-select
              @change="handleChange"
              v-model="formData.selectedRainfall"
              placeholder="请选择"
              popper-class="mySelectStyle"
            >
              <el-option
                v-for="item in rainfallData"
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
@@ -39,11 +40,11 @@
            <div class="table-container">
              <div
                class="table-row"
                v-for="(item, index) in filteredTableData"
                v-for="(item, index) in shgList"
                :key="index"
              >
                <input type="checkbox" v-model="item.selected" />
                <span>{{ item.name }}</span>
                <span>{{ item.deviceName }}</span>
              </div>
            </div>
          </el-form-item>
@@ -56,7 +57,7 @@
        <div style="width: 100%; height: 60px; background-color: #fff;"></div>
      </div> -->
    <div class="buttons">
      <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
      <el-button type="primary" @click="saveSim">保存方案</el-button>
      <el-button type="success" @click="startPlay">开始模拟</el-button>
      <el-button type="success" @click="futurePredictions">未来预测</el-button>
    </div>
@@ -64,11 +65,20 @@
</template>

<script setup>
import { ref, watch, defineProps, computed, inject, reactive } from "vue";
import {
  ref,
  watch,
  defineProps,
  computed,
  inject,
  reactive,
  onMounted,
} from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { getDeviceInfo } from "@/api/hpApi";

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -78,32 +88,8 @@
  name: "方案名称",
  selectedRainfall: "",
  type: 2,
  gauges: [
    {
      id: "xxxxxxxxxxxxxx",
      name: "雨量计1",
      x: 119.0,
      y: 28.0,
      r: 10000,
    },
    {
      id: "xxxxxxxxxxxxxx",
      name: "雨量计2",
      x: 119.0,
      y: 28.0,
      r: 10000,
    },
  ],
  gauges: [],
});

// 工具函数：深拷贝并设置默认选中状态
function deepCloneAndSetSelected(data) {
  const newData = {};
  for (const key in data) {
    newData[key] = data[key].map((item) => ({ ...item, selected: true }));
  }
  return newData;
}

// 接收父组件传递的 props
const props = defineProps({
@@ -112,111 +98,107 @@
    required: true,
  },
});
const rainfallData = ref([]);

const tableData = ref({}); // 表格数据（按雨量数据分组）
const isCollapsed = ref(false); // 控制展开/收起状态

// 模拟不同区域的数据
const areaDataMap = {
  孙胡沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 孙胡沟" },
      { id: "2", name: "雨量计实时数据 - 孙胡沟" },
    ],
    tableData: {
      1: [
        { id: "001", name: "孙胡沟气象站001" },
        { id: "002", name: "孙胡沟气象站002" },
      ],
      2: [
        { id: "003", name: "孙胡沟雨量计003" },
        { id: "004", name: "孙胡沟雨量计004" },
      ],
    },
  },
  鱼水洞后沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 鱼水洞后沟" },
      { id: "2", name: "雨量计实时数据 - 鱼水洞后沟" },
    ],
    tableData: {
      1: [
        { id: "005", name: "鱼水洞后沟气象站005" },
        { id: "006", name: "鱼水洞后沟气象站006" },
      ],
      2: [
        { id: "007", name: "鱼水洞后沟雨量计007" },
        { id: "008", name: "鱼水洞后沟雨量计008" },
      ],
    },
  },
  于家西沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 于家西沟" },
      { id: "2", name: "雨量计实时数据 - 于家西沟" },
    ],
    tableData: {
      1: [
        { id: "009", name: "于家西沟气象站009" },
        { id: "010", name: "于家西沟气象站010" },
      ],
      2: [
        { id: "011", name: "于家西沟雨量计011" },
        { id: "012", name: "于家西沟雨量计012" },
      ],
    },
  },
// 雨量计下拉框
const options = ref([
  { id: "1", name: "气象实时数据" },
  { id: "2", name: "雨量计实时数据" },
]);

// 雨量计列表
const shgList = ref([]);
// 所有的雨量计列表
const rainListNoFilter = ref([]);

// 获取所有雨量计数据（来自接口）
const getRainListAll = () => {
  // 雨量计类型id
  const ids = "1874719366287368194";
  getDeviceInfo(ids).then((res) => {
    rainListNoFilter.value = res.data.pageData;
    // 根据当前选择的区域自动过滤
    updateShgListByArea();
  });
};

// 根据 selectedArea 更新数据
// 根据 props.selectedArea.label 过滤雨量计列表，并设置 selected: true
const updateShgListByArea = () => {
  const currentArea = props.selectedArea?.label;

  if (!currentArea) {
    shgList.value = [];
    return;
  }

  shgList.value = rainListNoFilter.value
    .filter((item) => item.deviceName?.includes(currentArea))
    .map((device) => ({
      ...device,
      selected: true, // 默认选中
    }));
};

// 下拉框选中值的表格数据变化
const handleChange = async (item) => {
  formData.selectedRainfall = item;

  if (item === "雨量计实时数据") {
    if (!props.selectedArea) {
      ElMessage.warning("请先选择区域");
      shgList.value = [];
      return;
    }
    // 如果还没有加载过数据，则先请求接口加载
    if (rainListNoFilter.value.length === 0) {
      getRainListAll(); // 加载全部数据后会自动过滤
    } else {
      updateShgListByArea(); // 已有数据就直接过滤
    }
  } else {
    shgList.value = [];
  }
};

// 监听区域变化，重新过滤数据
watch(
  () => props.selectedArea,
  (newArea) => {
    console.log(newArea.label, "new");
    if (areaDataMap[newArea.label]) {
      rainfallData.value = areaDataMap[newArea.label].rainfallData;
      // 使用深拷贝设置默认选中状态
      tableData.value = deepCloneAndSetSelected(
        areaDataMap[newArea.label].tableData
      );
      formData.selectedRainfall = ""; // 清空选中的雨量数据
    } else {
      rainfallData.value = [];
      tableData.value = {};
      formData.selectedRainfall = "";
    if (!newArea) {
      ElMessage.warning("请选择一个区域");
      shgList.value = [];
    } else if (formData.selectedRainfall === "雨量计实时数据") {
      handleChange(formData.selectedRainfall);
    }
  }
  // { immediate: true } // 立即执行一次，确保初始数据正确
  },
  { immediate: true }
);

// 动态计算表格数据
const filteredTableData = computed(() => {
  return formData.selectedRainfall && tableData.value[formData.selectedRainfall]
    ? tableData.value[formData.selectedRainfall]
    : [];
});

// 获取当前选中的雨量数据名称
const selectedRainfallName = computed(() => {
  const selected = rainfallData.value.find(
    (item) => item.id === formData.selectedRainfall
  );
  return selected ? selected.name : "";
});

// 获取当前选中的设备信息
const selectedDevices = computed(() => {
  return filteredTableData.value.filter((item) => item.selected);
});

// 重置表单
const resetForm = () => {
  formData.name = "";
  formData.selectedRainfall = "";
  shgList.value = [];
};

// 打开保存方案对话框
const openSaveDialog = async () => {
const updateSelectedGauges = () => {
  formData.gauges = shgList.value
    .filter((item) => item.selected)
    .map((item) => ({
      id: item.deviceCode,
      deviceName: item.deviceName,
      x: item.longitude,
      y: item.latitude,
      r: 10000,
    }));
};

// 保存方案
const saveSim = async () => {
  try {
    updateSelectedGauges();
    formData.geom = props.selectedArea;
    await simStore.addSimCheme(formData);
    resetForm();
@@ -309,7 +291,7 @@
.table-container {
  font-size: 12px;
  height: 120px;
  width: 90%;
  width: 96%;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;