feat:地图加载

张含笑

2025-10-28 adf22ab5619e2903a98fbda955a7708956600760

 src/views/layerManagement/components/leftList.vue

@@ -1,42 +1,34 @@
<template>
  <div class="table-overlay">
    <div class="topBar">
      <div
        v-for="(item, index) in tabData"
        :key="index"
        :class="{ 'active-tab': activeTab === index }"
        @click="activeTab = index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="searchBox">
      <el-input
        class="ztzf-input inputName"
        v-model="formData.dkbh"
        placeholder="图斑名称"
        placeholder="输入名称模糊搜索"
      ></el-input>
      <div class="searchAndReset">
        <div class="reset" @click="reset">重置</div>
        <div class="search" @click="search">搜索</div>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button class="ztzf-button"  icon="el-icon-refresh" @click="reset">清空</el-button>
     
      </div>
    </div>
    <div class="btnGroups">
      <el-button type="primary">新增围栏</el-button>
      <el-button type="success">新增文件夹</el-button>
      <el-button type="info" @click="selectAll">全选</el-button>
      <el-button class="ztzf-button">新增围栏</el-button>
      <el-button class="ztzf-button">新增文件夹</el-button>
      <el-button class="ztzf-button" @click="selectAll">全选</el-button>
    </div>
    <div class="tableListBox">
      <el-tree
       ref="treeRef"
      class="ztzf-el-tree"
        ref="treeRef"
        v-model="checkedKeys"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
 @check="handleCheck"
        @check="handleCheck"
        :props="{
          label: 'name',
          label: 'dkbh',
          children: 'children',
        }"
      />
@@ -46,6 +38,7 @@

<script setup>
import { ref } from 'vue';
const layerData = inject('layerData')
const formData = {
  isPush: undefined,
  page: 1,
@@ -54,47 +47,242 @@
  dkbh: '',
  patchesName: '',
};
const tabData = ref([
  {
    name: '电子围栏',
    type: '0',
  },
  {
    name: '自定义禁飞区',
    type: '1',
  },
  {
    name: '国土空间规划',
    type: '2',
  },
]);

const activeTab = ref(0);
const handelClick = val => {
  activeTab.value = val.type;
};
const reset = () => {};
const search = () => {};
const treeData = ref([
  {
    id: 'group1',
    name: '道路裂缝识别',
    dkbh: '道路裂缝识别',
    children: [
      { id: 'road1', name: '桃花路' },
      { id: 'road2', name: '洪城路' },
      { id: 'road3', name: '中山路' },
    ],
    {
        "id": 519239,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "77de338bc7c348ff96d37e336def1a0b",
        "dklx": "QT",
        "dkbh": "相对地形高度测试航线",
        "dkfw": "POLYGON((114.824346 25.992131, 114.825211 25.991885, 114.824945 25.990836, 114.823565 25.99111, 114.824346 25.992131, 114.824346 25.992131))",
        "create_time": 1759126987041,
        "update_time": 1759126987041,
        "is_plan": 0,
        "investigate": 1,
        "is_push": 0,
        "user_name": "张红娟",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1899711781376974849",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1899711781376974849",
        "is_deleted": 0,
        "is_generated": 1,
        "collection_time": "2025-09-29 14:41:03",
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 517566,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "baad483e5ba54dcb9c1bb311082fa9e5",
        "dklx": "QT",
        "dkbh": "65面状航线测试01-夏潭",
        "dkfw": "POLYGON((114.82207 25.992745, 114.822648 25.992635, 114.822551 25.992142, 114.821895 25.992132, 114.82207 25.992745, 114.82207 25.992745))",
        "create_time": 1758158120486,
        "update_time": 1758158120486,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "张红娟",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1899711781376974849",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1899711781376974849",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 517567,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "4bbaac90ddb04fe1ab7ad5adbb5dece7",
        "dklx": "QT",
        "dkbh": "65新建航线20250918094540",
        "dkfw": "POLYGON((114.821512 25.992198, 114.823099 25.991259, 114.822046 25.990192, 114.820519 25.99109, 114.821512 25.992198, 114.821512 25.992198))",
        "create_time": 1758159958425,
        "update_time": 1758159958425,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "张红娟",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1899711781376974849",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1899711781376974849",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 518228,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "4a7824e676404cd8a2efb11ff8ae681e",
        "dklx": "QT",
        "dkbh": "新建航线20250922145458",
        "dkfw": "POLYGON((114.821696 25.993983, 114.819532 25.992569, 114.819172 25.994371, 114.820561 25.995004, 114.822089 25.994711, 114.821696 25.993983, 114.821696 25.993983))",
        "create_time": 1758524113039,
        "update_time": 1758524113039,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "张含笑",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1909067460995813377",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1909067460995813377",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 518229,
        "workspace_id": "5d188623-c141-4a89-bb1a-9a191d7fb73c",
        "dock_sn": "8UUXN5M00A08ZD",
        "bsm": "fdd2bedf59fd4835bdc97a2bc86c3d60",
        "dklx": "QT",
        "dkbh": "新建航线20250922152253",
        "dkfw": "POLYGON((115.894265 28.706264, 115.886028 28.683945, 115.874846 28.684871, 115.867501 28.697979, 115.874331 28.708741, 115.894265 28.706264, 115.894265 28.706264))",
        "create_time": 1758525803996,
        "update_time": 1758525803996,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "张含笑",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1909067460995813377",
        "create_dept": "1916401339951845377",
        "area_code": "360113000000",
        "update_user": "1909067460995813377",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 519199,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "a30c349611d546f8b1daa6a5e4c8e2a8",
        "dklx": "QT",
        "dkbh": "新建航线20250922162339",
        "dkfw": "POLYGON((114.823711 25.993143, 114.823074 25.990854, 114.826097 25.990424, 114.826746 25.992621, 114.823711 25.993143, 114.823711 25.993143))",
        "create_time": 1758529455155,
        "update_time": 1758529455156,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "黄秋雨",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1831880712850235393",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1831880712850235393",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    {
        "id": 519200,
        "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
        "dock_sn": "7CTDM7100BN4J5",
        "bsm": "d782d9cba4da403f80c4bbd93e2c765e",
        "dklx": "QT",
        "dkbh": "新建航线20250924092549",
        "dkfw": "POLYGON((114.836948 25.983711, 114.841575 25.971469, 114.829782 25.972419, 114.822853 25.978449, 114.826958 25.983154, 114.836948 25.983711, 114.836948 25.983711))",
        "create_time": 1758677163541,
        "update_time": 1758677163541,
        "is_plan": 0,
        "investigate": 0,
        "is_push": 0,
        "user_name": "张含笑",
        "type": 0,
        "special_type": 0,
        "patches_info_id": 65,
        "create_user": "1909067460995813377",
        "create_dept": "1916401339951845377",
        "area_code": "360704000000",
        "update_user": "1909067460995813377",
        "is_deleted": 0,
        "is_generated": 0,
        "patches_name": "自定义图斑",
        "patches_type": "综合类"
    },
    
   
]
  },
  {
    id: 'group2',
    name: '电动车识别',
    children: [
      { id: 'electric1', name: '桃新大道' },
      { id: 'electric2', name: '昌南大道' },
    ],
  },
 
]);
// 提取图斑坐标
function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
   try {
      if (!/^POLYGON\(\([\d\s,.]+\)\)$/.test(wktPolygon)) {
         throw new Error('输入不是有效的 WKT POLYGON 格式')
      }

      const coordStr = wktPolygon
         .replace(/^POLYGON\(\(/, '')
         .replace(/\)\)$/, '')
         .trim()

      const coordPairs = coordStr.split(/,\s*/).filter(pair => pair.trim() !== '')

      const result = coordPairs.map(pair => {
         const [lng, lat] = pair
            .split(/\s+/)
            .map(Number)
            .filter(num => !isNaN(num))

         if (lng === undefined || lat === undefined || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
            throw new Error(`无效的经纬度对：${pair}`)
         }

         return {
            lng: lng,
            lat: lat,
            longitude: lng, // 与 lng 一致
            latitude: lat, // 与 lat 一致
			
         }
      })

      const uniqueResult = Array.from(new Map(result.map(item => [`${item.lng}-${item.lat}`, item])).values())

      return uniqueResult
   } catch (error) {
      return [] // 异常时返回空数组
   }
}
const checkedKeys = ref([]); // 存储勾选的节点key
const treeRef = ref(null); // 获取tree实例

@@ -105,9 +293,9 @@
    // 获取所有节点的key
    const allKeys = treeData.value.flatMap(item => [
      item.id,
      ...item.children.map(child => child.id)
      ...item.children.map(child => child.id),
    ]);
    

    if (checkedKeys.value.length === allKeys.length) {
      // 如果已经全选，则取消全选
      treeRef.value.setCheckedKeys([]);
@@ -116,25 +304,21 @@
      // 否则全选
      treeRef.value.setCheckedKeys(allKeys);
      // 获取所有节点数据
      checkedNodes.value = treeData.value.flatMap(item => [
        item,
        ...item.children
      ]);
        console.log('所有数据',checkedNodes.value);
      checkedNodes.value = treeData.value.flatMap(item => [item, ...item.children]);
      console.log('所有数据', checkedNodes.value);
    }
  }
};
const coverData = ref()
const handleCheck = (checkedNodesData, checkedKeysData) => {
  checkedNodes.value = checkedNodesData.checkedNodes;

  
//   console.log('选中的节点数据:', checkedNodesData);
//   console.log('选中的节点keys:', checkedKeysData);
coverData.value = checkedNodesData
    console.log('选中的节点数据:', coverData.value);
console.log('layerData',layerData.value.selectData);

};
const changeClick =(val)=>{

}

const changeClick = val => {};
</script>

<style scoped lang="scss">
@@ -142,53 +326,23 @@
  position: absolute;
  top: 0;
  left: 0;
  height: 99%;
  height: 95%;
  z-index: 99;
  width: 377px;
  height: 100%;
  width: 392px;
  
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.51);
  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px 10px 0 10px;
  padding: 16px 12px;
}

.topBar {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 16px;

  div {
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      color: #409eff; // 悬停颜色
    }

    &.active-tab {
      color: #409eff; // 激活颜色

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;

        width: 60%;
        height: 2px;
        background-color: #409eff;
      }
    }
  }
}
.searchBox {
  display: flex;
  margin-top: 10px;
  .inputName {
  width: 184px;
height: 32px;
  }
  .searchAndReset {
    width: 182px;
    display: flex;
@@ -206,7 +360,7 @@
    }

    .reset {
      margin-right: 7px;
      margin-left: 12px;
      background: #0d2b38;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #84cbd3;
@@ -226,7 +380,7 @@
  }
}
.btnGroups {
  margin-top: 10px;
  margin: 12px 0 14px 0;
  display: flex;
}
.tableListBox {