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" v-model:checkedKeys="checkedKeys" :defaultExpandedKeys="expandedKeys"
            :replaceFields="replaceFields" @select="nodeSelect">
            <template #title="item">{{ `${item.name}（${item.count}）` }}</template>
          </a-directory-tree>
        </div>
      </div>
      <Tabs :animated="false" v-model:activeKey="activeKey">
        <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"
              @resAddToCar="resAddToCar" />
          </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, platListByMenuId } from '/@/api/resource/plat';
import eventBus from '/@/utils/eventBus';
import { is } from '/@/utils/is';
import { useAdminStoreOut } from '/@/store/modules/admin';


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 currentTreeNodeKeys = ref([]);
    const checkedKeys = ref([]);
    const achieveList = ref([]);
    const adminStore = useAdminStoreOut();
    const activeKey = ref('MR');

    const nodeSelect = (selectedKey, { selectedNode, node }) => {
      if (currentTreeNodeKeys.value.length && currentTreeNodeKeys.value[0] === selectedKey[0]) {
        selectedKeys.value = [];
        currentTreeNodeKeys.value = [];
        paramsObj.keywords = null;
        activeKey.value = 'MR';
        eventBus.emit("tagChangeTag");
        eventBus.emit('platListCenter', paramsObj, true)
        return;
      } else {
        currentTreeNodeKeys.value[0] = selectedKey[0]
        if (selectedKey.length) {
          paramsObj.keywords = null;
          activeKey.value = 'MR';
          eventBus.emit("tagChangeTag");
          eventBus.emit('platListCenter', paramsObj, true)
        }
      }
    }

    onMounted(() => {
      directoryTree().then((r) => {
        if (r) {
          treeData.value = r[0].child[0].child
          treeData.value.forEach(item => {
            expandedKeys.value.push(item.id)
          })
        }
      });
      platList().then((r) => {
        if (r) {
          achieveList.value = r;
          updateAction()
          console.log(achieveList.value)
        }
      });
    });

    var paramsObj = {};
    eventBus.one('platListCenter', (o, idTyep) => {
      var type = null;
      if (o && o.type) type = o.type == 'MAP' ? 'MR' : o.type == 'SCENE' ? 'ER' : 'DR';
      let params = o ? JSON.parse(JSON.stringify(o)) : {};
      paramsObj = params;
      params.id = currentTreeNodeKeys.value.length ? currentTreeNodeKeys.value[0] : null
      platList(params).then((r) => {
        if (r) {
          if (type && !idTyep) {
            var list = JSON.parse(JSON.stringify(achieveList.value))
            if (r?.length) {
              achieveList.value = list.map(i => {
                if (i && i.type == type) {
                  i = r.find(j => j && j.type == type) || { ...i, items: [], count: 0 };
                }
                return i;
              })
              updateAction()
            } else {
              achieveList.value = list.map(i => { if (i && i.type == type) { i.items = r, i.count = 0; } return i; });
              updateAction()
            }
          } else {
            achieveList.value = r;
            updateAction()
          }
        }
      });
    });

    const resAddToCar = () => {
      let params = {
        id: currentTreeNodeKeys.value.length ? currentTreeNodeKeys.value[0] : null
      }
      platList(params).then((r) => { if (r) { achieveList.value = r, updateAction() } });
    }

    function updateAction() {
      var type = true;
      var r = achieveList.value;
      r.forEach((i) => { if (i.type == 'MR' && i.count) { type = false; activeKey.value = 'MR' } });
      if (type) r.forEach((i) => { if (i.type == 'ER' && i.count) { type = false; activeKey.value = 'ER' } });
      if (type) r.forEach((i) => { if (i.type == 'DR' && i.count) { type = false; activeKey.value = 'DR' } });
    }

    return {
      activeKey,
      replaceFields,
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      achieveList,
      nodeSelect,
      resAddToCar
    };
  },
});
</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;

      .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>