| | |
| | | </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(); |
| | | |
| | |
| | | label: "三维服务", |
| | | children: [ |
| | | { label: "模型数据" }, |
| | | { label: "地形数据" }, |
| | | { label: "地形数据" }, |
| | | { label: "影像数据" }, |
| | | ], |
| | | }, |
| | |
| | | // // }); |
| | | // // treeMap.set("影像数据", ImageryLayer); |
| | | // } |
| | | |
| | | |
| | | // 地形数据 |
| | | let TerrainLayer = null; |
| | |
| | | } |
| | | } |
| | | |
| | | // 设备列表 |
| | | // 监测设备列表 |
| | | 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() { |
| | |
| | | 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; |
| | |
| | | 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 = []; |
| | | |
| | | /** |
| | | * 初始化断面点 |
| | | */ |
| | |
| | | */ |
| | | function getData() { |
| | | initDevicePoint(); |
| | | initDistrictPoint(); |
| | | // initDistrictPoint(); |
| | | initDuanmianPoint(); |
| | | addTetrahedron(); |
| | | } |
| | |
| | | overflow: hidden; |
| | | } |
| | | /deep/ .el-tree { |
| | | overflow: hidden !important; |
| | | overflow: hidden !important; |
| | | } |
| | | </style> |