| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onMounted, watch, onBeforeUnmount, } from "vue"; |
| | | import { useRoute, onBeforeRouteUpdate } from 'vue-router'; |
| | | import { createPoint, removeEntities } from "@/utils/map"; |
| | | import { ref, computed, onMounted, watch } from "vue"; |
| | | import { deviceDictList, getDictName } from "@/constant/dict.js"; |
| | | import { getDeviceInfo } from "@/api/hpApi"; |
| | | import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数,后续options列表中有对应经纬度后弃用 |
| | | import { useSimStore } from "@/store/simulation"; |
| | | const simStore = useSimStore(); |
| | | const deviceListAll = ref([]); |
| | | onMounted(() => { |
| | | loadDeviceList("孙胡沟"); |
| | | initeWaterPrimitiveView() |
| | | }); |
| | | |
| | | onBeforeRouteUpdate((to, from, next) => { |
| | | if (to.path !== '/zhjc') { |
| | | handleCleanup(); |
| | | } |
| | | next(); |
| | | }); |
| | | const route = useRoute(); |
| | | |
| | | onBeforeUnmount(() => { |
| | | if (route.path !== '/zhjc') { |
| | | handleCleanup(); |
| | | } |
| | | }); |
| | | watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => { |
| | | if (newValue) { |
| | | initializeDevicePoints(); |
| | | } else { |
| | | removeEntities(); |
| | | handleCleanup() |
| | | } |
| | | }); |
| | | const deviceListAll = ref([]); |
| | | const deviceEntities = ref([]); |
| | | const handleCleanup = () => { |
| | | deviceListAll.value.forEach(item => { |
| | | removeEntities(item.deviceId); |
| | | }); |
| | | } |
| | | const initializeDevicePoints = () => { |
| | | const list = []; |
| | | deviceListAll.value.forEach((item, index) => { |
| | |
| | | item.className = "device"; |
| | | item.showLabel = true; |
| | | // 打印每个设备的名称和设备类型 |
| | | // console.log(`设备名称: ${item.deviceName}, 设备类型: ${item.dictDeviceType}`); |
| | | console.log(`设备名称: ${item.id}, 设备类型: ${item.name}`); |
| | | createPoint(item); |
| | | }); |
| | | deviceEntities.value = list; |
| | |
| | | // 根据区域名称加载设备列表 |
| | | const loadDeviceList = async (areaName) => { |
| | | try { |
| | | handleCleanup() |
| | | const res = await getDeviceInfo(); |
| | | const allDevices = res.data.pageData; |
| | | const devicesInArea = allDevices.filter((item) => |
| | | item.deviceName?.includes(areaName) |
| | | ); |
| | | deviceListAll.value = devicesInArea; |
| | | removeEntities(); |
| | | deviceListAll.length = 0; |
| | | initializeDevicePoints(); |
| | | } catch (error) { |
| | | console.error("加载设备信息失败", error); |
| | |
| | | // 先按设备类型分组 |
| | | deviceListAll.value.forEach((device) => { |
| | | const typeName = getDictName(deviceDictList, device.dictDeviceType); |
| | | |
| | | if (!typeName) { |
| | | console.warn("未找到设备类型:", device); |
| | | return; |
| | | } |
| | | |
| | | if (!typeMap[typeName]) { |
| | | typeMap[typeName] = []; |
| | | } |