完善接口部分

guonan

2025-05-16 a9c4f7775e82d93638e607fa6c5fafe22f5310b4

完善接口部分

 src/api/index.js

@@ -1,24 +1,3 @@
export async function getDistrictData() {
    const response = await fetch("/json/隐患点信息.json", {
        mode: "cors",
        cache: "no-cache",
        headers: {
            "Content-Type": "application/json",
        },
    })
    return await response.json()
}
export async function getDeviceData() {
    const response = await fetch("/json/综合监测设备信息.json", {
        mode: "cors",
        cache: "no-cache",
        headers: {
            "Content-Type": "application/json",
        },
    })
    return await response.json()
}

export async function getSimulateData() {
    const response = await fetch("/json/仿真方案.json", {
        mode: "cors",
@@ -40,16 +19,7 @@
    })
    return await response.json()
}
export async function getDevicetListData() {
    const response = await fetch("/json/综合监测设备信息.json", {
        mode: "cors",
        cache: "no-cache",
        headers: {
            "Content-Type": "application/json",
        },
    })
    return await response.json()
}

export async function getDistrictListData() {
    const response = await fetch("/json/隐患点信息.json", {
        mode: "cors",

 src/components/menu/Device.vue

@@ -44,7 +44,6 @@

<script setup>
import { ref, computed, onMounted } from "vue";
import { createPoint, removeEntities } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfo } from "@/api/hpApi";


 src/components/menu/Location.vue

@@ -23,8 +23,14 @@
        </el-select>
      </div>

      <!-- 滚动区域 -->
      <div style="overflow-y: auto; height: 95%">
        <!-- 加载遮罩层 -->
        <div v-if="loading" class="loading-overlay">
          <div class="spinner"></div>
        </div>
        <div
          v-else
          v-for="(item, key) in districtList"
          :key="key"
          class="district-item"
@@ -39,8 +45,8 @@
</template>

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

const simStore = useSimStore();
@@ -71,638 +77,10 @@
]);

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,
//   },
// ]);
const loading = ref(true); // 控制加载状态

function handleClick(district) {
  const entity = viewer.entities.getById(district.unifiedCode);
  const entity = viewer.entities.getById(district.hdId);
  if (entity) {
    viewer.flyTo(entity, {
      offset: {
@@ -712,22 +90,16 @@
      },
    });
  }
  // if (entity) {
  //     viewer.flyTo(entity)
  // }
}

// 隐患点列表
const originalData = simStore.DangerPoint; // 存储原始数据（仅加载一次）

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

  districtList.value = originalData.filter((item) =>
  districtList.value = simStore.DangerPoint.filter((item) =>
    item.position?.includes(areaName)
  );
};
@@ -743,16 +115,60 @@
  filterDataByArea(areaName);
};

// 组件挂载时加载原始数据，并默认过滤为 "孙胡沟"
onMounted(async () => {
  // await loadAllData();
  filterDataByArea("孙胡沟"); // 默认显示孙胡沟的数据
});
onBeforeUnmount(() => {
  // removeEntities()
// 监听 simStore.DangerPoint 变化
watch(
  () => simStore.DangerPoint,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      filterDataByArea(selectValue.value);
      loading.value = false; // 数据加载完成
    } else {
      districtList.value = [];
      loading.value = true; // 数据未准备就绪
    }
  },
  { immediate: true }
);

onMounted(() => {
  // 默认先检查一遍数据
  if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
    filterDataByArea("孙胡沟");
    loading.value = false;
  } else {
    loading.value = true;
  }
});
</script>

<style lang="less" scoped>
.loading-overlay {
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 10px;
  background-color: rgba(236, 233, 233, 0.5); /* 半透明遮罩 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.district {
  position: absolute;
  width: 345px;
@@ -786,6 +202,14 @@
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading-text {
  color: white;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}

/deep/ .el-select__placeholder {
  color: white;
}

 src/components/monifangzhen/schemeCard.vue

@@ -158,7 +158,6 @@
  () => props.deleteSim,
  (newVal) => {
    if (newVal) {
      console.log(newVal);
      deleteSim();
      emit("reset");
    }

 src/components/tools/Detail.vue

@@ -1,233 +1,223 @@
<template>
    <div class="detail" ref="detailRef">
        <div class="detail-top">{{ detailTitle }}</div>
        <div class="detail-close" @click="closeMsg"></div>
        <div class="detail-context">
            <div v-for="(item, key) in detailList" :key="key" class="detail-item">
                <div class="detail-name">{{ item.name }}</div>
                <div class="detail-value" :title="item.value">{{ item.value || "--" }}</div>
            </div>
        </div>
    </div>
  <div class="detail" ref="detailRef">
    <div class="detail-top">{{ detailTitle }}</div>
    <div class="detail-close" @click="closeMsg"></div>
    <div class="detail-context">
      <div v-for="(item, key) in detailList" :key="key" class="detail-item">
        <div class="detail-name">{{ item.name }}</div>
        <div class="detail-value" :title="item.value">
          {{ item.value || "--" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
    import { ref, onMounted, nextTick, onUnmounted } from "vue";
    import { showDeviceDetail, deviceDetail, className, dialogPositon } from "@/store"
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import {
  showDeviceDetail,
  deviceDetail,
  className,
  dialogPositon,
} from "@/store";

    // props: {
    //     deviceDetail: {
    //         type: Object,
    //         default: {
    //             deviceCode: "1101161102180100031040",
    //             deviceId: "1554360448383913986",
    //             deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
    //             dictDeviceType: "1437295832",
    //             latitude: 40.563822,
    //             longitude: 116.592648,
    //             type: "次生仪",
    //             name: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
    //             id: "1554360448383913986",
    //         },
    //     },
    // },
    const detailList = ref([])
    const detailTitle = ref("设备详情")
    function closeMsg() {
        showDeviceDetail.value = false
        coloseDialog()
    }
    function handlDeviceDetail() {
        const name = deviceDetail.value.name.split("孙胡沟")[1] || deviceDetail.value.deviceName
        detailTitle.value = name
        detailList.value = [
            {
                name: "设备编号",
                value: deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
            },
            {
                name: "设备类型",
                value: deviceDetail.value.type || "",
            },
            {
                name: "安装时间",
                value: "2024-01-15 12:55:18",
            },
            {
                name: "更新时间",
                value: "2025-02-15 8:15:28",
            },
            {
                name: "设备位置",
                value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0],
            },
        ]
    }
    function handleDistrictDetail() {
        const name = deviceDetail.value.name || deviceDetail.value.district
        detailTitle.value = name
        detailList.value = [
            {
                name: "隐患类型",
                value: deviceDetail.value.type || "泥石流",
            },
            // {
            //     name: "威胁人数",
            //     value: deviceDetail.value.type || "",
            // },
            {
                name: "主管科长",
                value: "张浩",
            },
            {
                name: "主管镇长",
                value: "刘佳斌",
            },
            {
                name: "群测群防",
                value: deviceDetail.value.groupMonitor,
            },
            {
                name: "隐患位置",
                value: deviceDetail.value.district,
            },
            {
                name: "预防方案",
                value: deviceDetail.value.preventionPlan,
            },
        ]
    }
    function loadClassNameDetail() {
        if (className.value == "device") {
            handlDeviceDetail()
        } else if (className.value == "district") {
            handleDistrictDetail()
        }
    }
    const detailRef = ref(null)
    //展示属性框
    function calcDialogPostion() {
    const position = dialogPositon.value;
    if (!position) {
        console.error("dialogPositon is null or invalid");
        return;
    }
const detailList = ref([]);
const detailTitle = ref("设备详情");
function closeMsg() {
  showDeviceDetail.value = false;
  coloseDialog();
}
// 监测设备具体信息
function handlDeviceDetail() {
  const name = deviceDetail.value.name;
  detailTitle.value = name;
  detailList.value = [
    {
      name: "设备编号",
      value:
        deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
    },
    {
      name: "设备类型",
      value: deviceDetail.value.type || "",
    },
    {
      name: "安装时间",
      value: "2024-01-15 12:55:18" || deviceDetail.value.startTime,
    },
    {
      name: "更新时间",
      value: "2025-02-15 8:15:28",
    },
    {
      name: "设备位置",
      value: deviceDetail.value.deviceForShort || cityData.listData[0],
      //   value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0],
    },
  ];
}
// 隐患点具体信息
function handleDistrictDetail() {
  const name = deviceDetail.value.hdName;
  detailTitle.value = name;
  detailList.value = [
    {
      name: "隐患类型",
      value: deviceDetail.value.disasterType || "泥石流",
    },
    {
      name: "主管科长",
      value: "张浩",
    },
    {
      name: "主管镇长",
      value: deviceDetail.value.supervisorAlcaldeUserName,
    },
    {
      name: "群测群防",
      value: deviceDetail.value.groupTestGroupDefenseUserName,
    },
    {
      name: "隐患位置",
      value: deviceDetail.value.position,
    },
    {
      name: "预防方案",
      value: deviceDetail.value.preventionSuggestion,
    },
  ];
}
function loadClassNameDetail() {
  if (className.value == "device") {
    handlDeviceDetail();
  } else if (className.value == "district") {
    handleDistrictDetail();
  }
}
const detailRef = ref(null);
//展示属性框
function calcDialogPostion() {
  const position = dialogPositon.value;
  if (!position) {
    console.error("dialogPositon is null or invalid");
    return;
  }

    const bubble = detailRef.value;
    if (!bubble) {
        console.error("detailRef is null, DOM not ready");
        return;
    }
  const bubble = detailRef.value;
  if (!bubble) {
    console.error("detailRef is null, DOM not ready");
    return;
  }

    let winpos = window.viewer.scene.cartesianToCanvasCoordinates(position);
    if (!winpos || isNaN(winpos.x) || isNaN(winpos.y)) {
        console.error("Invalid canvas coordinates:", winpos);
        return;
    }
  let winpos = window.viewer.scene.cartesianToCanvasCoordinates(position);
  if (!winpos || isNaN(winpos.x) || isNaN(winpos.y)) {
    console.error("Invalid canvas coordinates:", winpos);
    return;
  }

    let poph = bubble.offsetHeight;
    bubble.style.left = winpos.x - 200 + "px";
    let top = winpos.y - poph - 50;
    bubble.style.top = top + "px";
  let poph = bubble.offsetHeight;
  bubble.style.left = winpos.x - 200 + "px";
  let top = winpos.y - poph - 50;
  bubble.style.top = top + "px";
}


    //关闭属性框
    const coloseDialog = () => {
        window.viewer.scene.postRender.removeEventListener(calcDialogPostion)
    }
    onMounted(() => {
    loadClassNameDetail();
    nextTick(() => {
        window.viewer.scene.postRender.addEventListener(calcDialogPostion);
    });
//关闭属性框
const coloseDialog = () => {
  window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
};
onMounted(() => {
  loadClassNameDetail();
  nextTick(() => {
    window.viewer.scene.postRender.addEventListener(calcDialogPostion);
  });
});

onUnmounted(() => {
    // 解决dom中offHeight报错
    window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
  // 解决dom中offHeight报错
  window.viewer.scene.postRender.removeEventListener(calcDialogPostion);
});
</script>
<style lang="less" scoped>
    .detail {
        background: url("@/assets/img/tools/messagebg.png");
        background-size: 100% 100%;
        width: 24.4375rem;
        height: 24.5rem;
        position: absolute;
        top: 30%;
        right: 30%;
    }
.detail {
  background: url("@/assets/img/tools/messagebg.png");
  background-size: 100% 100%;
  width: 24.4375rem;
  height: 24.5rem;
  position: absolute;
  top: 30%;
  right: 30%;
}

    .detail-top {
        position: absolute;
        top: 0.3125rem;
        left: 1.25rem;
        font-weight: 700;
        font-size: 1.125rem;
        font-weight: 700;
        color: #fff;
        line-height: 2.5rem;
        width: 16.875rem;
        cursor: pointer;
    }
.detail-top {
  position: absolute;
  top: 0.3125rem;
  left: 1.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  line-height: 2.5rem;
  width: 16.875rem;
  cursor: pointer;
}

    .detail-close {
        position: absolute;
        right: 0.1875rem;
        top: 0rem;
        width: 1.25rem;
        height: 1.25rem;
        text-align: center;
        line-height: 1.25rem;
        text-align: center;
.detail-close {
  position: absolute;
  right: 0.1875rem;
  top: 0rem;
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.25rem;
  text-align: center;

        font-weight: 700;
        font-size: 1.125rem;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
    }
  font-weight: 700;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

    .detail-context {
        position: absolute;
        top: 3.8rem;
        left: 1.25rem;
        width: 21.875rem;
    }
.detail-context {
  position: absolute;
  top: 3.8rem;
  left: 1.25rem;
  width: 21.875rem;
}

    .detail-item {
        display: flex;
        height: 1.4375rem;
        margin-top: 0.9375rem;
        margin-left: 0.625rem;
    }
    .detail-name {
        width: 100px;
        font-weight: 700;
        color: #94e0c4;
        &::after {
            content: "：";
        }
    }
.detail-item {
  display: flex;
  height: 1.4375rem;
  margin-top: 0.9375rem;
  margin-left: 0.625rem;
}
.detail-name {
  width: 100px;
  font-weight: 700;
  color: #94e0c4;
  &::after {
    content: "：";
  }
}

    .detail-value {
        color: #e1eee9;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 250px;
    }
.detail-value {
  color: #e1eee9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}

    .detail-btn {
        background: url("@/assets/img/tools/messagebtn.png") no-repeat;
        position: absolute;
        bottom: 3.75rem;
        right: 3.75rem;
        width: 6.5625rem;
        height: 1.625rem;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
.detail-btn {
  background: url("@/assets/img/tools/messagebtn.png") no-repeat;
  position: absolute;
  bottom: 3.75rem;
  right: 3.75rem;
  width: 6.5625rem;
  height: 1.625rem;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
</style>

 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: "影像数据" },
    ],
  },
@@ -85,7 +93,6 @@
//   // });
//   // treeMap.set("影像数据", ImageryLayer);
// }


// 地形数据
let TerrainLayer = null;
@@ -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 = "泥石流";        //数据icon设置
    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 = [];

/**
 * 初始化断面点
 */
@@ -320,7 +326,7 @@
 */
function getData() {
  initDevicePoint();
  initDistrictPoint();
  // initDistrictPoint();
  initDuanmianPoint();
  addTetrahedron();
}
@@ -393,6 +399,6 @@
  overflow: hidden;
}
/deep/ .el-tree {
    overflow: hidden !important;
  overflow: hidden !important;
}
</style>

 src/views/GisView.vue

@@ -444,7 +444,7 @@
  initMap();
  // 在你的初始化代码中调用这个函数
  addCityPolygon();
  // initHandler();
  initHandler();
  // initView()
  loadAreaPolygon("/json/nsl_area.geojson");
  loadAreaPolygonAll("/json/geometry.json", true);

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -164,7 +164,6 @@
const getRain = () => {
  getRainfallData().then((res) => {
    rainFall.value = res.data.pageData;
    console.log(res.data, "res");
  });
};


 src/views/left/Left.vue

@@ -47,7 +47,6 @@
import { createPoint, removeEntities } from "@/utils/map";
// import { deviceDictList, getDictName } from "@/constant/dict.js";

import { getDeviceData } from "@/api/index";
const emits = defineEmits(["start", "end"]);

const list = [
@@ -349,11 +348,7 @@
    // createPoint(item)
  });
}
function getData() {
  getDeviceData().then((res) => {
    devicetList.value = res.data;
  });
}

function createLabel(item) {
  const { name, x, y, showBillboard = false } = item;
  let position = Cesium.Cartesian3.for(x, y);
@@ -438,7 +433,6 @@
  emits("end");
}
onMounted(() => {
  // getData()
  // initDevicePoint()
});