修改样式

guonan

2025-04-15 280edfe55b8f48648d332ae0e33e219b8bae49fa

 src/components/menu/Device.vue

@@ -29,7 +29,7 @@
      >
        <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">
@@ -74,18 +74,18 @@

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: "303A9016",
    deviceId: "1821067878870257666",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "1437295822",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
@@ -241,18 +241,26 @@
};

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

  // 先按设备类型分组
  devicetList.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 +270,6 @@
    children: typeMap[typeName],
  }));
});

function handleTreeNodeClick(data) {
  // 只有设备节点才处理点击事件
  if (!data.children) {
@@ -295,7 +302,7 @@
.device-content {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 40px);
  height: calc(100% - 70px);
}

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

  :deep(.el-tree-node__content) {
    height: 30px;
@@ -352,4 +361,7 @@
  color: white !important;
  background-color: rgb(38, 124, 124, 0.5);
}
:deep(.el-tree-node__content) {
  padding-left: 0px !important ;
}
</style>