hlt_gis_admin/src/views/resource/plat/index.vue

<template>
  <div class="p-4">
    <div class="resoure-center">
      <div class="datacenter-left">
        <div class="page-name">
          <p>数据目录</p>
        </div>
        <div class="ztree-container">
          <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
            v-if="treeData.length" :defaultExpandAll="false" v-model:checkedKeys="checkedKeys"
            :replaceFields="replaceFields" @select="nodeSelect"
            >
            <template #title="item">{{ `${item.name}（${item.count}）` }}</template>
          </a-directory-tree>
        </div>
      </div>
      <Tabs>
        <template v-for="item in  achieveList " :key="item.type">
          <TabPane :tab="[`${item.typeName == '数据' ? '文件' : item.typeName}资源(${item.count})`]">
            <component :is="item.type == 'MR'?'MapData':item.type == 'ER'?'SceneData':'FileData'" :listData="item.items"
              :numb="1" />
            <!-- <MapData v-if="item.type == 'MR'" :listData="item.items" /> -->
            <!-- <FileData v-if="item.type == 'DR'" :listData="item.items" /> -->
          </TabPane>
        </template>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { Tabs } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
import MapData from './item/MapData.vue';
import FileData from './item/FileData.vue';
import SceneData from './item/SceneData.vue';
import { onMounted } from 'vue';
import { directoryTree, platList } from '/@/api/resource/plat';
// import { getTreeRootId, getTreeList } from '/@/api/sys/dirManager';
// import { session } from '/@/utils/Memory';

// const prefixCls = 'account-center-bottom'

export default defineComponent({
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    MapData,
    FileData,
    SceneData,
  },
  setup() {
    const replaceFields = ref({
      children:'child',
      key:'id',
      title:'name'
    })
    const treeData = ref([]);
    const expandedKeys = ref([]);
    const selectedKeys = ref([]);
    const checkedKeys = ref([]);
    const achieveList = ref([]);

    const nodeSelect = (selectedKeys,{selectedNode,node})=>{
      if(selectedKeys.length){
        console.log(node.dataRef)
      }
    }

    onMounted(() => {
      directoryTree().then((r) => {
        if (r) {
          treeData.value = r[0].child[0].child
          console.log(r[0].child[0].child);
        }
      });
      platList().then((r) => { if (r) console.log(r), achieveList.value = r });
    });

    return {
      replaceFields,
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      // prefixCls: 'account-center',
      achieveList,
      nodeSelect
    };
  },
});
</script>
<style lang="less" scoped>
.p-4 {
  height: 100%;

  .resoure-center {
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;

    .datacenter-left {
      float: left;
      width: 250px;
      height: 100%;
      margin-right: 16px;
      border-top: none;
      background: #F8F8F8;
      max-height: 1306px;

      .page-name {
        height: 40px;
        border-bottom: solid 1px #DEDEDE;
        box-sizing: border-box;

        p {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          text-align: center;
          margin-bottom: 0px;
        }
      }

      .ztree-container {
        float: left;
        overflow: auto;
        width: 100%;
        max-height: 800px;
        height: calc(100% - 43px);
        padding: 10px;

        &::-webkit-scrollbar {
          width: 3px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 2px;
          background: #ccd5df;
        }

        &::-webkit-scrollbar-track {
          display: none;
        }

        ::v-deep .ant-tree-treenode-selected {
          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal.ant-tree-node-selected::before {
            background: #e0eaf5 !important;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-open.ant-tree-node-selected::before {
            background: #e0eaf5 !important;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-close.ant-tree-node-selected::before {
            background: #e0eaf5 !important;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal.ant-tree-node-selected {
            color: #0671DD;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-open.ant-tree-node-selected {
            color: #0671DD;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-close.ant-tree-node-selected {
            color: #0671DD;
          }
        }
      }
    }
  }
}

::v-deep .ztree-container span.ant-tree-switcher span.anticon>svg {
  width: 20px;
  height: 20px;
  color: #888888;
}

.account-center-bottom {
  background: #fff;
  height: calc(100vh - 80px);
  overflow: hidden;
}





.account-center {
  &-bottom {
    padding: 10px;
    margin: 16px;
    // background-color: @component-background;
    border-radius: 3px;
  }
}
</style>