industry-database/src/views/c-cpns/ServiceTree.vue

<template>
  <div id="serviceTree" v-show="mapStore.layerShow">
    <div class="common-title">
      <span>图层</span>
    </div>
    <div class="tree-content scroll">
      <el-tree
          :data="treeData"
          @check="changeChange"
          ref="treeRef"
          show-checkbox
      >
        <template #default="{ node, data }">
          <span  class="custom-tree-label">{{ node.label }}</span>
          <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
            <OfficeBuilding />
          </span>
          <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
            <Document />
          </span>
          <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
            <Edit />
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, watch} from "vue";
import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
import {getServiceTree} from "@/service/http.js";
import {AddSingleLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
import {useMapStore} from "@/store/mapStore.js";
import {Edit,Document,OfficeBuilding} from "@element-plus/icons-vue";
export default {
  name: "ServiceTree",
  components: {CommonTitle,Edit,Document,OfficeBuilding},
  setup(){
    const mapStore = useMapStore()
    let treeData = ref([]);
    const treeRef = ref(null);
    const showGL = ref(false);
    const GLLayer = ref('');
    function getTreeData(){
      getServiceTree({
        TYPE:"",
        labelId:"1318"
      }).then(res =>{
        let resData =res.data.data.Rows[0].children;
        treeData.value = resData;
      })
    }
    function applyData(data){
      window.open("https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/resource-apply?name=" + data.label)

    }
    function showDetailDialog(data){
      mapStore.layerDetailObj = data;
      mapStore.layerDetailShow = true;
    }
    function showLayerGL(data){
      if(showGL&&data.ADDRESS == GLLayer.value){
        showGL.value = false;
        GLLayer.value = '';
        FeatureThreeDimension({
          url:data.ADDRESS,
          status:"hide"
        })
        return
      }
      GLLayer.value = data.ADDRESS;
      FeatureThreeDimension({
        url:data.ADDRESS,
        status:"show"
      });
    }
    function changeChange(){
      let nowChecked = treeRef.value.getCheckedNodes(true);
      //找到原来有现在没有的删除
      for(let i = 0; i < mapStore.currentLayerList.length; i++){
        if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
          AddSingleLayer({
            type:mapStore.currentLayerList[i].TYPE,
            id:mapStore.currentLayerList[i].S_CODE,
            visible:false,
            url:mapStore.currentLayerList[i].ADDRESS,
            opacity:100,
            title:mapStore.currentLayerList[i].label,
            wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
            token:mapStore.currentLayerList[i].TOKEN
          })
          mapStore.currentLayerList.splice(i,1);
          i--;
        }
      }
      //找到原来没有，现在有的新增
      for(let i = 0; i < nowChecked.length; i++){
        if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
          mapStore.currentLayerList.push(nowChecked[i]);
          AddSingleLayer({
            type:nowChecked[i].TYPE,
            id:nowChecked[i].S_CODE,
            visible:true,
            url:nowChecked[i].ADDRESS,
            opacity:100,
            title:nowChecked[i].label,
            wkid:nowChecked[i].COORDINATE_SYSTEM,
            token:nowChecked[i].TOKEN
          })
        }
      }
    }
    onMounted(()=>{
      getTreeData()
    })
    return {
      mapStore,
      treeData,
      changeChange,
      treeRef,
      applyData,
      showLayerGL,
      showDetailDialog
    }
  }
}
</script>

<style scoped lang="scss">
#serviceTree{
  :deep{
    .el-tree{
      background: transparent !important;
    }
  }
  .custom-tree-label{
    font-size: 16px;
  }
  .custom-tree-gl-icon{
    position: absolute;
    right: 70px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .custom-tree-detail-icon{
    position: absolute;
    right: 40px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .custom-tree-icon{
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  position: absolute;
  z-index: 2;
  left: 460px;
  top: 87px;
  width: 370px;
  height: 553px;
  background-color: rgba(0, 22, 52, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .common-title{
    width: 100%;
    height: 37px;
    background: url("@/assets/imgs/tkxbt.png") no-repeat;
    background-size: 100% 100%;
    span {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #BBCDE6;
      opacity: 1;
      padding-left: 60px;
      background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .tree-content{
    width: 100%;
    height: 500px;
  }
}
</style>