<marsDialog left="10" top="50" width="370">
    <p>數(shù)據(jù)管理</p>
    <div>
      <el-input v-model="filterText" style="width: 240px" placeholder="模糊搜索" @input="inputHanlder" />
      <!-- filter-node-method對樹節(jié)點進行篩選時執(zhí)行的方法， 返回 false 則表示這個節(jié)點會被隱藏 -->
      <el-scrollbar class="scroll-container">
        <div class="scroll-content">
          <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="_data" :props="defaultProps"
            default-expand-all :filter-node-method="filterNode" @node-click="nodeClick" />
        </div>
      </el-scrollbar>
    </div>
  </marsDialog>

interface Tree {
  [key: string]: any
}
const inputHanlder = (_v: any) => {
  // console.log(jdJson.features);
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: 'children',
  label: 'label',
}
let _allData = reactive({ data: [] });
let _data = ref([])
fetch('xxxxxxx', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzeXNfaWQiOjEsInVpZCI6ImFlMjllODkzODhlMzkyMjljNGE0ZDJkY2U4MTQyZWU4IiwibmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiIiLCJyZWdpc3RlcnRpbWUiOiIyMDIzLzQvMjcgMTc6MjE6MzEiLCJuaWNrbmFtZSI6ImFkbWluIiwiZW1haWwiOiIyNTU4NkB3ZWxsY2h5Lm5ldCIsInBpYyI6IiIsImlhdCI6MTcxNDk4MjczMywiZXhwIjoxNzE1MDY5MTMzfQ.K-NKPvKCWWLlU2nZ1-dmhkhJI7aDxDtEDcbZUrOcOB0'
  }
}).then(response => response.json())
  .then(data => {
    _allData.data.length = 0;
    _allData.data.push(...data.message);
    // 在數(shù)據(jù)填充后調(diào)用mapTreeData函數(shù)
    let treeData = [
      {
        id: 1,
        label: '金牛區(qū)',
        children: mapTreeData(jdJson, _allData.data)
      },
    ];
    _data.value = treeData
  })
  .catch(error => console.log(error));
const mapTreeData = (data: any, allData: any[]): Tree[] => {
  return data.features.map((feature: any, index: number) => {
    const districts = allData.filter((district) => feature.properties.Name === district.streetOffice);
    const children = districts.map((district) => ({ label: district.name, position: [[district.longitude, district.latitude,500]] }));
    return {
      id: index + 2,
      label: feature.properties.Name,
      position: feature.geometry.coordinates,
      children: children || []
    };
  });
};

// 監(jiān)聽輸入框內(nèi)容的變化，以便執(zhí)行篩選操作
watch(filterText, (val) => {
  // 調(diào)用 el-tree 組件的 filter 方法，根據(jù)輸入的值來篩選節(jié)點
  treeRef.value!.filter(val)
})
// 自定義篩選方法，用于決定樹節(jié)點是否應(yīng)該在篩選結(jié)果中顯示
const filterNode = (value: string, data: Tree, node: any) => {
  // 打印篩選值和節(jié)點數(shù)據(jù)，用于調(diào)試
  console.log(value); //打印的是篩選操作中用戶輸入的值。在這段代碼中，value 是傳遞給 filterNode 方法的第一個參數(shù)，表示用戶輸入的篩選值。
  console.log(data); //打印的是當(dāng)前樹節(jié)點的數(shù)據(jù)。在這段代碼中，data 是傳遞給 filterNode 方法的第二個參數(shù)，表示當(dāng)前被篩選的節(jié)點的數(shù)據(jù)，包括標(biāo)簽等信息。
  /**
   * 這行代碼是用來處理當(dāng)用戶沒有輸入篩選值時的情況。
    在樹形組件中，如果用戶沒有輸入任何篩選值，那么我們希望所有的節(jié)點都能夠顯示，
    而不應(yīng)該進行任何篩選操作。因此，當(dāng)用戶沒有輸入篩選值時，我們直接返回 true，表示當(dāng)前節(jié)點應(yīng)該被顯示在篩選結(jié)果中。
   */
  if (!value) return true
  // 如果節(jié)點的標(biāo)簽包含篩選值，則返回 true，表示節(jié)點應(yīng)該顯示
  // return data.label.includes(value)
  if (data.label) {
    return chooseNode(value, data, node);
  }
}
// 過濾父節(jié)點 / 子節(jié)點 (如果輸入的參數(shù)是父節(jié)點且能匹配，則返回該節(jié)點以及其下的所有子節(jié)點；如果參數(shù)是子節(jié)點，則返回該節(jié)點的父節(jié)點。name是中文字符，enName是英文字符.
const chooseNode = (value: string, data: Tree, node: { level: any; parent: any; }) => {
  if (data.label.indexOf(value) !== -1) {
    return true
  }
  const level = node.level
  // 如果傳入的節(jié)點本身就是一級節(jié)點就不用校驗了
  if (level === 1) {
    return false
  }
  // 先取當(dāng)前節(jié)點的父節(jié)點
  let parentData = node.parent
  // 遍歷當(dāng)前節(jié)點的父節(jié)點
  let index = 0
  while (index < level - 1) {
    // 如果匹配到直接返回，此處name值是中文字符，enName是英文字符。判斷匹配中英文過濾
    if (parentData.data.label.indexOf(value) !== -1) {
      return true
    }
    // 否則的話再往上一層做匹配
    parentData = parentData.parent
    index++
  }
  // 沒匹配到返回false
  return false
}
let lastStreetPosition: number | null = null;
const nodeClick = (obj: any) => {
  if (obj.label.includes('街道')) {
    mapWork.jinNiuJieDaoWall(obj.position[0]);
    window.map.flyToPositions(obj.position[0], {
      radius: 400,
    });
    lastStreetPosition = obj.position[0]; // 更新上一次包含街道的位置
  } else {
    mapWork.jinNiuJieDaoWall(lastStreetPosition);
    window.map.flyToPoint(obj.position[0], {
      radius: 300,
    });
  }
}