feat:渲染数据

张含笑

2025-10-29 c41678e94e6c6d1ee4acc2c0307f3de6b01cf58c

 src/views/layerManagement/components/leftList.vue

@@ -17,43 +17,51 @@
      <el-button class="ztzf-button" @click="selectAll">全选</el-button>
    </div>
    <div class="tableListBox">
     <el-tree
  class="ztzf-el-tree"
  ref="treeRef"
  v-model="checkedKeys"
  :data="treeData"
  show-checkbox
  node-key="id"
  default-expand-all
  @check="handleCheck"
  :props="{
    label: 'name',
    children: 'children',
  }"
>
  <!-- 自定义节点内容 -->
  <template #default="{ node }">
    <div class="tree-node">
      <!-- 节点名称 -->
      <span>{{ node.label }}</span>
      <!-- 操作按钮组 -->
      <div class="tree-node-actions">
        <el-button icon="el-icon-location" type="text" @click="handleLocation(node)"></el-button>
        <el-button icon="el-icon-edit" type="text" @click="handleEdit(node)"></el-button>
        <el-button icon="el-icon-delete" type="text" @click="handleDelete(node)"></el-button>
      </div>
    </div>
  </template>
</el-tree>
      <el-tree
        class="ztzf-el-tree"
        ref="treeRef"
        v-model="checkedKeys"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        @check="handleCheck"
        :props="{
          label: 'name',
          children: 'children',
        }"
      >
        <!-- 自定义节点内容 -->
        <template #default="{ node }">
          <div class="tree-node">
            <!-- 节点名称 -->
            <span>{{ node.label }}</span>
            <!-- 操作按钮组 -->
            <div class="tree-node-actions">
              <el-button
                icon="el-icon-location"
                type="text"
                @click="handleLocation(node)"
              ></el-button>
              <el-button icon="el-icon-edit" type="text" @click="handleEdit(node)"></el-button>
              <el-button icon="el-icon-delete" type="text" @click="handleDelete(node)"></el-button>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { treeDataApi } from '@/api/layer/index';
import { onMounted } from 'vue';
import { inject, onMounted } from 'vue';
const emit = defineEmits(['update:coverData']);
const coverData = ref();
const layerParams = inject('layerParams');
const checkedKeys = ref([]); // 存储勾选的节点key
const treeRef = ref(null); // 获取tree实例
const checkedNodes = ref([]); // 存储勾选的节点数据
const props = defineProps(['activeName']);
const formData = {
  isPush: undefined,
@@ -70,8 +78,172 @@
// 获取数据
const gettreeDataApi = async () => {
  try {
    const res = await treeDataApi();
    treeAllData.value = res.data.data;
    // const res = await treeDataApi();
    // treeAllData.value = res.data.data;
    treeAllData.value = [
      {
        id: 1,
        name: '电子围栏',
        description: '用于监控特定区域的进入和离开事件',
        area_code: '360103000000',
        create_user: '1831880712850235393',
        create_name: '黄秋雨',
        create_dept: '1916401339951845377',
        create_time: '2025-10-24 11:15:37',
        update_user: '1831880712850235393',
        update_dept: '1916401339951845377',
        update_time: '2025-10-28 11:15:44',
        level: 1,
        children: [
          {
            id: 1,
            category_id: 1,
            name: '厂区周界',
            description: '注意区域',
            event_type: '进入',
            algorithm_name: '高精度围栏算法V2',
            area_code: '360103000000',
            create_user: '1831880712850235393',
            create_name: '黄秋雨',
            create_dept: '1916401339951845377',
            create_time: '2025-10-27 11:14:01',
            update_user: '1831880712850235393',
            update_dept: '1916401339951845377',
            update_time: '2025-10-28 11:13:54',
            level: 2,
            children: [
              {
                id: 1,
                folder_id: 1,
                name: '一号门围栏',
                description: '覆盖工厂一号门入口区域',
                is_enabled: true,
                area: 1250.5,
                geo_data:
                  '{"type":"Polygon","coordinates":[[[114.05,22.54],[114.06,22.54],[114.06,22.55],[114.05,22.55],[114.05,22.54]]]}',
                control_start_time: '2025-10-24 11:14:31',
                control_end_time: '2025-10-28 11:14:41',
                altitude: 120,
                area_code: '360103000000',
                create_user: '1831880712850235393',
                create_name: '黄秋雨',
                create_dept: '1916401339951845377',
                create_time: '2025-10-21 11:14:11',
                update_user: '1831880712850235393',
                update_dept: '1916401339951845377',
                update_time: '2025-10-28 11:14:23',
                level: 3,
              },
              {
                id: 2,
                folder_id: 2,
                name: '二号门围栏',
                description: '覆盖工厂一号门入口区域',
                is_enabled: true,
                area: 1250.5,
                geo_data:
                  '{"type":"Polygon","coordinates":[[[114.05,22.54],[114.06,22.54],[114.06,22.55],[114.05,22.55],[114.05,22.54]]]}',
                control_start_time: '2025-10-24 11:14:31',
                control_end_time: '2025-10-28 11:14:41',
                altitude: 120,
                area_code: '360103000000',
                create_user: '1831880712850235393',
                create_name: '黄秋雨',
                create_dept: '1916401339951845377',
                create_time: '2025-10-21 11:14:11',
                update_user: '1831880712850235393',
                update_dept: '1916401339951845377',
                update_time: '2025-10-28 11:14:23',
                level: 3,
              },
            ],
            total_count: 1,
            total_area: 1250.5,
          },
        ],
      },
      {
        id: 2,
        name: '自定义禁飞区',
        description: '用于设置临时或永久的无人机禁飞区域',
        area_code: '360103000000',
        create_user: '1831880712850235393',
        create_name: '黄秋雨',
        create_dept: '1916401339951845377',
        create_time: '2025-10-19 11:15:40',
        update_user: '1831880712850235393',
        update_dept: '1916401339951845377',
        update_time: '2025-10-28 11:15:47',
        level: 1,
        children: [
          {
            id: 2,
            category_id: 2,
            name: '临时活动区',
            description: '注意区域',
            event_type: '注意',
            algorithm_name: '注意活动',
            area_code: '360103000000',
            create_user: '1831880712850235393',
            create_name: '黄秋雨',
            create_dept: '1916401339951845377',
            create_time: '2025-10-27 11:14:05',
            update_user: '1831880712850235393',
            update_dept: '1916401339951845377',
            update_time: '2025-10-28 11:13:57',
            level: 2,
            children: [
              {
                id: 2,
                folder_id: 2,
                name: '演唱会禁飞区',
                description: '2023年大型演唱会临时禁飞',
                is_enabled: true,
                area: 8800,
                geo_data:
                  '{"type":"Polygon","coordinates":[[[113.27,23.13],[113.28,23.13],[113.28,23.14],[113.27,23.14],[113.27,23.13]]]}',
                control_start_time: '2025-10-16 11:14:37',
                control_end_time: '2025-10-28 11:14:45',
                altitude: 120,
                area_code: '360103000000',
                create_user: '1831880712850235393',
                create_name: '黄秋雨',
                create_dept: '1916401339951845377',
                create_time: '2025-10-22 11:14:19',
                update_user: '1831880712850235393',
                update_dept: '1916401339951845377',
                update_time: '2025-10-28 11:24:47',
                level: 3,
              },
              {
                id: 5,
                folder_id: 2,
                name: '马拉松赛道禁飞',
                description: '城市马拉松赛道沿线禁飞',
                is_enabled: false,
                area: 25000,
                geo_data:
                  '{"type":"LineString","coordinates":[[113.30,23.15],[113.31,23.16],[113.32,23.15]]}',
                control_start_time: '2025-10-28 11:26:43',
                control_end_time: '2025-10-28 11:26:43',
                altitude: 100,
                area_code: '360000000000',
                create_user: '1831880712850235393',
                create_name: '黄秋雨',
                create_dept: '1916401339951845377',
                create_time: '2025-10-28 11:28:38',
                update_user: '1831880712850235393',
                update_dept: '1916401339951845377',
                update_time: '2025-10-28 11:28:38',
                level: 3,
              },
            ],
            total_count: 2,
            total_area: 33800,
          },
        ],
      },
    ];
    console.log('接口获取数据', treeAllData.value);
    setupWatch();
  } catch (error) {
@@ -88,18 +260,11 @@
    { immediate: true }
  );
};
const checkedKeys = ref([]); // 存储勾选的节点key
const treeRef = ref(null); // 获取tree实例

const checkedNodes = ref([]); // 存储勾选的节点数据

const handleCheck = (checkedNodesData, checkedKeysData) => {
  checkedNodes.value = checkedNodesData.checkedNodes;

  coverData.value = checkedKeysData.checkedNodes;

  coverData.value = checkedKeysData.checkedNodes.filter(node => node.level === 3);
  emit('update:coverData', coverData.value);
  // console.log('选中的节点数据:', checkedKeysData);
};
// 全选方法
const selectAll = () => {
@@ -109,7 +274,6 @@
      item.id,
      ...item.children.map(child => child.id),
    ]);

    if (checkedKeys.value.length === allKeys.length) {
      // 如果已经全选，则取消全选
      treeRef.value.setCheckedKeys([]);
@@ -118,38 +282,33 @@
      // 否则全选
      treeRef.value.setCheckedKeys(allKeys);
      // 获取所有节点数据
      checkedNodes.value = treeData.value.flatMap(item => [ ...item.children]);
      checkedNodes.value = treeData.value.flatMap(item => [...item.children]);
      console.log('所有数据', checkedNodes.value);
    }
  }
};
// 定位按钮事件
const handleLocation = (node) => {
const handleLocation = node => {
  console.log('定位操作，节点：', node);
  

};

// 编辑按钮事件
const handleEdit = (node) => {
const handleEdit = node => {
  console.log('编辑操作，节点：', node.data);
   emit('update:coverData', [node.data]);

  emit('update:coverData', [node.data]);
};

// 删除按钮事件
const handleDelete = (node) => {
const handleDelete = node => {
  console.log('删除操作，节点：', node.data);

};
// 新增围栏
const addFence =()=>{

}
const addFence = () => {
  layerParams.value.addNest = true;
 
};
// 新增文件夹
const addFolder =()=>{

}
const addFolder = () => {};
onMounted(() => {
  gettreeDataApi();
});
@@ -164,7 +323,6 @@
  height: 95%;
  z-index: 99;
  width: 392px;

  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px 8px 8px 8px;
@@ -219,24 +377,23 @@
  display: flex;
}
.tableListBox {
.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
  .tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

.tree-node-actions {
  display: flex;
  gap: 8px; // 按钮之间的间距
  button {
    padding: 0; // 清除默认内边距
    color: #fff; // 按钮图标颜色
    &:hover {
      color: #409eff; //  hover 时的颜色
  .tree-node-actions {
    display: flex;
    gap: 8px; // 按钮之间的间距
    button {
      padding: 0; // 清除默认内边距
      color: #fff; // 按钮图标颜色
      &:hover {
        color: #409eff; //  hover 时的颜色
      }
    }
  }
}
}

</style>