提交

guonan

2025-05-23 986e15a067c2f11563f2f3db8b96dc334dc28842

 src/components/menu/Device.vue

@@ -6,30 +6,15 @@
    <div class="left-content device-content">
      <div style="margin-left: 5px">
        <span style="color: white">重点沟：</span>
        <el-select
          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>
            <!-- <div class="device-item-icon"></div> -->
            <span class="device-item-text">{{ node.label }}</span>
          </span>
          <span v-else class="device-tree-category">
@@ -42,10 +27,87 @@
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
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 { getDeviceData } from "@/api/index";
import { getDeviceInfo } from "@/api/hpApi";
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
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 {
    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.type = getDictName(deviceDictList, item.dictDeviceType);
    item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
    item.id = item.deviceId;
    item.className = "device";
    item.showLabel = true;
    // 打印每个设备的名称和设备类型
    // 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;
    deviceListAll.length = 0;
    initializeDevicePoints();
  } catch (error) {
    console.error("加载设备信息失败", error);
  }
};
// 处理区域变化事件
const handleChange = (item) => {
  if (!item) {
    ElMessage("请选择一个区域");
    return;
  }
  // 根据新区域名重新加载设备列表
  loadDeviceList(item);
  // console.log(deviceListAll.value);
};

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

@@ -72,169 +134,6 @@
  },
]);

const devicetList = ref([
  {
    deviceCode: "303A9016",
    deviceId: "1821067878870257666",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "1437295822",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "01303A9016",
    deviceId: "1821067850122498049",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "14372958380",
    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",
@@ -245,14 +144,19 @@
  const typeMap = {};

  // 先按设备类型分组
  devicetList.value.forEach((device) => {
  deviceListAll.value.forEach((device) => {
    const typeName = getDictName(deviceDictList, device.dictDeviceType);
    if (!typeName) {
      console.warn("未找到设备类型:", device);
      return;
    }
    if (!typeMap[typeName]) {
      typeMap[typeName] = [];
    }
    // 直接使用原始的设备名称，不进行任何替换操作
    typeMap[typeName].push({
      ...device,
      deviceName: device.deviceName.replace(`${typeName})`, ")"), // 移除重复的类型名
      deviceName: device.deviceName.trim(), // 只去除首尾空格
    });
  });

@@ -262,7 +166,6 @@
    children: typeMap[typeName],
  }));
});

function handleTreeNodeClick(data) {
  // 只有设备节点才处理点击事件
  if (!data.children) {
@@ -278,8 +181,6 @@
    }
  }
}

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

<style lang="less" scoped>
@@ -294,8 +195,9 @@

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

.device-tree {
@@ -303,6 +205,8 @@
  background: transparent;
  color: white;
  margin-top: 10px;
  width: 100%;
  overflow-x: auto;

  :deep(.el-tree-node__content) {
    height: 30px;
@@ -347,9 +251,14 @@
:deep(.el-select__placeholder) {
  color: white;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  color: white !important;
  background-color: rgb(38, 124, 124, 0.5);
}

:deep(.el-tree-node__content) {
  padding-left: 0px !important;
}
</style>