guonan
2025-05-23 fef12378282c0a8cf44411b079ac20ad4f397817
src/components/menu/Device.vue
@@ -6,12 +6,28 @@
    <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> -->
@@ -27,21 +43,23 @@
</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();
@@ -49,24 +67,27 @@
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) => {
@@ -82,13 +103,18 @@
  });
  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;
@@ -98,6 +124,7 @@
    console.error("加载设备信息失败", error);
  }
};
// 处理区域变化事件
const handleChange = (item) => {
  if (!item) {