智慧园区前端大屏
shuishen
2024-11-12 7ebb90b4d99cd661dcb9c9bdc9a1932e5b4a102f
src/pages/layout/components/scomponents/layersControl.vue
@@ -21,7 +21,8 @@
    <template #content>
      <div class="tree-content">
        <el-tree ref="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
          :default-checked-keys="['1']" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
          :default-checked-keys="indexPoint" :props="defaultProps" :indent="treeProps['indent']"
          @check="handleCheckChange">
          <template v-slot:default="{ node }">
            <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
              <!-- 自定义label的slot -->
@@ -68,8 +69,12 @@
import ysgw from "@/assets/json/ysgw"
import { onUnmounted } from 'vue'
import EventBus from 'utils/bus'
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()
const { VITE_APP_BASE } = import.meta.env
let indexPoint = ref(['1'])
const treeRef = ref(null)
const Cesium = DC.getLib('Cesium')
@@ -384,7 +389,6 @@
        } else {
          addTileLayers[item.layerName].forEach(i => i.show = true)
        }
        window.$viewer.flyTo(addTileLayers[item.layerName][0])
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
@@ -459,7 +463,7 @@
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
          function computeCircle (radius) {
          function computeCircle(radius) {
            var positions = []
            for (var i = 0; i < 1080; i++) {
              var radians = DC.Math.toRadians(i)
@@ -502,7 +506,7 @@
  })
}
function findObjectById (data, id) {
function findObjectById(data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
@@ -551,9 +555,145 @@
EventBus.on('restHandleDelChange', restHandleDelChange)
onMounted(() => {
  handleCheckChange(data.filter(i => i.id == '1'))
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
})
const sharedData = computed(() => pointStore.sharedData);
//
watch(sharedData, (newValue) => {
  let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  if (newValue === '1') {
    // 处理切换了应急空间页面,把图标隐藏
    if (indexPoint.value.includes('3')) {
      let allList = data.filter(i => indexPoint.value.includes(i.id))
      let temp = indexPoint.value.filter(ie => ie != '3')
      // console.log(temp, '***************************************')
      let checkList = data.filter(i => temp.includes(i.id))
      treeRef.value?.setCheckedNodes(checkList)
      handleCheckChangeTwo(allList, companyInfo.id)
    }
    return
  }
  // 处理切换到应急空间页面,把图标显示
  console.log('sharedData changed to:', newValue);
  // 获取缓存里面的企业id
  indexPoint.value.includes(newValue) ? '' : indexPoint.value.push(newValue)
  let checkList = data.filter(i => indexPoint.value.includes(i.id))
  treeRef.value?.setCheckedNodes(checkList)
  handleCheckChangeTwo(checkList, companyInfo.id)
});
const handleCheckChangeTwo = (data, firmId) => {
  let options = treeRef.value?.getCheckedNodes()
  // console.log(options, "*************222222***********")
  collectedNodes.value = []
  collectNodesWithFlag(data)
  collectedNodes.value.forEach(item => {
    let layerName = item.layerName + '_' + firmId
    console.log(layerName, "**************************************")
    if (options.some(i => i.id == item.id)) {
      if (item.subType == 'labelPoint') {
        if (!addTileLayers[layerName]) {
          addTileLayers[layerName] = new DC.HtmlLayer(addTileLayers[layerName])
          window.$viewer.addLayer(addTileLayers[layerName])
          let params = { ...item.params }
          params.firmId = firmId
          item.method(params).then(res => {
            let data = res.data.data.records
            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
              let iconEl = ''
              if ('showPanel' in item && item.showPanel == false) {
                if (item.backgroundIcon) {
                  iconEl = `
                  <div class="map-name">${i[item.showParams] || i.name}</div>
                  <div class="map-icon">
                    <img src="${item.backgroundIcon}">
                  </div>
                  `
                }
              } else {
                iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i[item.showParams] || i.name}</div>
                </div>`
              }
              let divIcon = new DC.DivIcon(
                new DC.Position(i.lng, i.lat, 0),
                `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
              )
              addTileLayers[layerName].addOverlay(divIcon)
            })
          })
        } else {
          addTileLayers[layerName].show = true
        }
      }
    } else {
      if (addTileLayers[layerName]) {
        if (item.subType == 'labelPoint') {
          addTileLayers[layerName].show = false
        }
      }
    }
  })
}
// const handleCheckChangeTwo = (data, firmId) => {
//   let options = treeRef.value?.getCheckedNodes()
//   console.log(options, "*************222222***********")
//   collectedNodes.value = []
//   collectNodesWithFlag(data)
//   collectedNodes.value.forEach(item => {
//     if (options.some(i => i.id == item.id)) {
//       if (item.subType == 'labelPoint') {
//         if (!addTileLayers[item.layerName]) {
//           addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName])
//           window.$viewer.addLayer(addTileLayers[item.layerName])
//           let params = { ...item.params }
//           params.firmId = firmId
//           item.method(params).then(res => {
//             let data = res.data.data.records
//             data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
//               let iconEl = ''
//               if ('showPanel' in item && item.showPanel == false) {
//                 if (item.backgroundIcon) {
//                   iconEl = `
//                   <div class="map-name">${i[item.showParams] || i.name}</div>
//                   <div class="map-icon">
//                     <img src="${item.backgroundIcon}">
//                   </div>
//                   `
//                 }
//               } else {
//                 iconEl = `<div class="marsBlueGradientPnl">
//                   <div>${i[item.showParams] || i.name}</div>
//                 </div>`
//               }
//               let divIcon = new DC.DivIcon(
//                 new DC.Position(i.lng, i.lat, 0),
//                 `<div class="public-map-popup">
//                     ${iconEl}
//                   </div>`
//               )
//               addTileLayers[item.layerName].addOverlay(divIcon)
//             })
//           })
//         } else {
//           addTileLayers[item.layerName].show = true
//         }
//       }
//     } else {
//       if (addTileLayers[item.layerName]) {
//         if (item.subType == 'labelPoint') {
//           addTileLayers[item.layerName].show = false
//         }
//       }
//     }
//   })
// }
onUnmounted(() => {
  tileLayers && window.$viewer.removeLayer(tileLayers)
  let arr = Object.keys(addTileLayers)