| | |
| | | <div class="left-content device-content"> |
| | | <div style="margin-left: 5px"> |
| | | <span style="color: white">重点沟:</span> |
| | | <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" style="width: 240px"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
| | | <el-select |
| | | @change="handleChange" |
| | | v-model="selectValue" |
| | | placeholder="Select" |
| | | size="large" |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </div> |
| | | <el-tree :data="deviceTree" node-key="deviceId" :props="treeProps" @node-click="handleTreeNodeClick" |
| | | class="device-tree"> |
| | | <el-tree |
| | | :data="deviceTree" |
| | | node-key="deviceId" |
| | | :props="treeProps" |
| | | @node-click="handleTreeNodeClick" |
| | | class="device-tree" |
| | | > |
| | | <template #default="{ node, data }"> |
| | | <span v-if="!data.children" class="device-tree-item"> |
| | | <!-- <div class="device-item-icon"></div> --> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onMounted, watch, onBeforeUnmount, } from "vue"; |
| | | import { useRoute, onBeforeRouteUpdate } from 'vue-router'; |
| | | import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue"; |
| | | import { useRoute, onBeforeRouteUpdate } from "vue-router"; |
| | | import { createPoint, removeEntities } from "@/utils/map"; |
| | | 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(); |
| | | onMounted(() => { |
| | | onMounted(async () => { |
| | | // 加载所有的隐患点信息 |
| | | await getData(); |
| | | loadDeviceList("孙胡沟"); |
| | | initeWaterPrimitiveView() |
| | | initeWaterPrimitiveView(); |
| | | }); |
| | | |
| | | onBeforeRouteUpdate((to, from, next) => { |
| | | if (to.path !== '/zhjc') { |
| | | if (to.path !== "/zhjc") { |
| | | handleCleanup(); |
| | | } |
| | | next(); |
| | |
| | | const route = useRoute(); |
| | | |
| | | onBeforeUnmount(() => { |
| | | if (route.path !== '/zhjc') { |
| | | if (route.path !== "/zhjc") { |
| | | handleCleanup(); |
| | | } |
| | | }); |
| | | watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => { |
| | | if (newValue) { |
| | | initializeDevicePoints(); |
| | | } else { |
| | | handleCleanup() |
| | | watch( |
| | | () => simStore.DeviceShowSwitch, |
| | | (newValue, oldValue) => { |
| | | if (newValue) { |
| | | initializeDevicePoints(); |
| | | } else { |
| | | handleCleanup(); |
| | | } |
| | | } |
| | | }); |
| | | ); |
| | | const deviceListAll = ref([]); |
| | | const deviceEntities = ref([]); |
| | | const handleCleanup = () => { |
| | | deviceListAll.value.forEach(item => { |
| | | deviceListAll.value.forEach((item) => { |
| | | removeEntities(item.deviceId); |
| | | }); |
| | | } |
| | | }; |
| | | const initializeDevicePoints = () => { |
| | | const list = []; |
| | | deviceListAll.value.forEach((item, index) => { |
| | |
| | | }); |
| | | deviceEntities.value = list; |
| | | }; |
| | | const allDevices = ref([]); |
| | | const getData = async () => { |
| | | const res = await getDeviceInfo(); |
| | | allDevices.value = res.data.pageData; |
| | | }; |
| | | // 根据区域名称加载设备列表 |
| | | const loadDeviceList = async (areaName) => { |
| | | try { |
| | | handleCleanup() |
| | | const res = await getDeviceInfo(); |
| | | const allDevices = res.data.pageData; |
| | | const devicesInArea = allDevices.filter((item) => |
| | | handleCleanup(); |
| | | // const res = await getDeviceInfo(); |
| | | // const allDevices = res.data.pageData; |
| | | const devicesInArea = allDevices.value.filter((item) => |
| | | item.deviceName?.includes(areaName) |
| | | ); |
| | | deviceListAll.value = devicesInArea; |
| | |
| | | console.error("加载设备信息失败", error); |
| | | } |
| | | }; |
| | | |
| | | // 处理区域变化事件 |
| | | const handleChange = (item) => { |
| | | if (!item) { |