还原目录树功能

guonan

2025-05-20 a0967df707a547428df9fc80256877c26e061c4a

 src/components/menu/Device.vue

@@ -7,6 +7,7 @@
      <div style="margin-left: 5px">
        <span style="color: white">重点沟：</span>
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          size="large"
@@ -43,9 +44,39 @@

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

// 定义一个响应式引用存储设备列表
const deviceListAll = ref([]);

// 组件挂载时获取设备信息，默认过滤“孙胡沟”
onMounted(() => {
  loadDeviceList("孙胡沟");
});

// 根据区域名称加载设备列表
const loadDeviceList = async (areaName) => {
  try {
    const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
    deviceListAll.value = res.data.pageData.filter((item) =>
      item.deviceName?.includes(areaName)
    );
  } catch (error) {
    console.error("加载设备信息失败", error);
  }
};

// 处理区域变化事件
const handleChange = (item) => {
  if (!item) {
    ElMessage("请选择一个区域");
    return;
  }
  // 根据新区域名重新加载设备列表
  loadDeviceList(item);
  console.log(deviceListAll.value);
};

const selectValue = ref("孙胡沟");

@@ -72,181 +103,17 @@
  },
]);

const devicetList = ref([
  {
    deviceCode: "01303A9016",
    deviceId: "1821067850122498049",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "14372958380",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "303A9016",
    deviceId: "1821067878870257666",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "1437295822",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "1101161102180100010063",
    deviceId: "1554360510040182786",
    deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063",
    dictDeviceType: "1437295810",
    latitude: 40.556589,
    longitude: 116.579459,
  },
  {
    deviceCode: "1101161102180100194030",
    deviceId: "1554361328692826114",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030",
    dictDeviceType: "1437295815",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100031041",
    deviceId: "1554360448702681089",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041",
    dictDeviceType: "1437295832",
    latitude: 40.553236,
    longitude: 116.592304,
  },
  {
    deviceCode: "1101161102180100022007",
    deviceId: "1554360273959587842",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007",
    dictDeviceType: "1437295822",
    latitude: 40.545821,
    longitude: 116.586354,
  },
  {
    deviceCode: "1101161102180100225406",
    deviceId: "1554360478494822402",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406",
    dictDeviceType: "1437295821",
    latitude: 40.554368,
    longitude: 116.592989,
  },
  {
    deviceCode: "1101161102180100055006",
    deviceId: "1554360276627165185",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006",
    dictDeviceType: "1437295811",
    latitude: 40.554398,
    longitude: 116.592929,
  },
  {
    deviceCode: "1101161102180100010064",
    deviceId: "1554360452670492674",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064",
    dictDeviceType: "1437295810",
    latitude: 40.545741,
    longitude: 116.586304,
  },
  {
    deviceCode: "1101161102180100183030",
    deviceId: "1554360533087883265",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030",
    dictDeviceType: "1437295825",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100194031",
    deviceId: "1554361328877375489",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031",
    dictDeviceType: "1437295815",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100055007",
    deviceId: "1554360509775941634",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007",
    dictDeviceType: "1437295811",
    latitude: 40.554729,
    longitude: 116.598165,
  },
  {
    deviceCode: "1101161102180100031042",
    deviceId: "1554360448916590593",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042",
    dictDeviceType: "1437295832",
    latitude: 40.549398,
    longitude: 116.600387,
  },
  {
    deviceCode: "1101161102180100225407",
    deviceId: "1554360478658400257",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407",
    dictDeviceType: "1437295821",
    latitude: 40.55481,
    longitude: 116.598025,
  },
  {
    deviceCode: "1101161102180100022008",
    deviceId: "1554360274165108737",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008",
    dictDeviceType: "1437295822",
    latitude: 40.544645,
    longitude: 116.596511,
  },
  {
    deviceCode: "1101161102180100183031",
    deviceId: "1554360533255655426",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031",
    dictDeviceType: "1437295825",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100010065",
    deviceId: "1554360452888596482",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065",
    dictDeviceType: "1437295810",
    latitude: 40.543104,
    longitude: 116.59585,
  },
  {
    deviceCode: "1101161102180100031040",
    deviceId: "1554360448383913986",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
    dictDeviceType: "1437295832",
    latitude: 40.563822,
    longitude: 116.592648,
  },
  {
    deviceCode: "1101161102180100010062",
    deviceId: "1554360452519497730",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062",
    dictDeviceType: "1437295810",
    latitude: 40.558778,
    longitude: 116.586892,
  },
  {
    deviceCode: "1101160042160100010005",
    deviceId: "1554360582698110977",
    deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005",
    dictDeviceType: "1437295810",
    latitude: 40.533623,
    longitude: 116.602406,
  },
]);

const treeProps = {
  label: "deviceName",
  children: "children",
};

// 计算属性：将设备列表转换为树形结构
// 计算属性：将设备列表转换为树形结构
const deviceTree = computed(() => {
  const typeMap = {};

  // 先按设备类型分组
  devicetList.value.forEach((device) => {
  deviceListAll.value.forEach((device) => {
    const typeName = getDictName(deviceDictList, device.dictDeviceType);

    if (!typeName) {
@@ -285,8 +152,6 @@
    }
  }
}

// 其他原有方法保持不变...
</script>

<style lang="less" scoped>
@@ -301,6 +166,7 @@

.device-content {
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100% - 70px);
}