|
|
@@ -1,31 +1,34 @@
|
|
|
<template>
|
|
|
- <div :class="[`${prefixCls}-bottom`, '!dark:bg-dark-900']">
|
|
|
- <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"
|
|
|
- :replace-fields="{ children: 'child', key: 'id', value: 'name', title: 'name' }" v-if="treeData.length"
|
|
|
- :defaultExpandAll="false" v-model:checkedKeys="checkedKeys">
|
|
|
- <template #title0010><span style="color: #1890ff">sss</span></template>
|
|
|
- </a-directory-tree>
|
|
|
+ <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>
|
|
|
- <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>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
+<script>
|
|
|
import { Tabs } from 'ant-design-vue';
|
|
|
import { defineComponent, ref, watch } from 'vue';
|
|
|
import MapData from './item/MapData.vue';
|
|
|
@@ -33,8 +36,10 @@ 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'
|
|
|
+// const prefixCls = 'account-center-bottom'
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
|
@@ -45,38 +50,134 @@ export default defineComponent({
|
|
|
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([]);
|
|
|
- watch(expandedKeys, () => {
|
|
|
- console.log('expandedKeys', expandedKeys);
|
|
|
- });
|
|
|
- watch(selectedKeys, () => {
|
|
|
- console.log('selectedKeys', selectedKeys);
|
|
|
- });
|
|
|
- watch(checkedKeys, () => {
|
|
|
- console.log('checkedKeys', checkedKeys);
|
|
|
- });
|
|
|
+
|
|
|
+ const nodeSelect = (selectedKeys,{selectedNode,node})=>{
|
|
|
+ if(selectedKeys.length){
|
|
|
+ console.log(node.dataRef)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
onMounted(() => {
|
|
|
- directoryTree().then((r) => { if (r) treeData.value = r });
|
|
|
+ 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',
|
|
|
+ // 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;
|
|
|
@@ -89,80 +190,9 @@ export default defineComponent({
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.ztree-container {
|
|
|
- float: left;
|
|
|
- overflow: auto;
|
|
|
- width: 100%;
|
|
|
- max-height: 760px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.datacenter-left .page-name {
|
|
|
- // background: #333333;
|
|
|
- border-bottom: solid 1px #DEDEDE;
|
|
|
-}
|
|
|
-
|
|
|
-.datacenter-left .page-name p {
|
|
|
- height: 42px;
|
|
|
- line-height: 42px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 0px;
|
|
|
-}
|
|
|
-
|
|
|
-.datacenter-left {
|
|
|
- float: left;
|
|
|
- width: 250px;
|
|
|
- height: auto;
|
|
|
- margin-right: 16px;
|
|
|
- border-top: none;
|
|
|
- background: #F8F8F8;
|
|
|
- overflow: auto;
|
|
|
- height: calc(100% - 20px);
|
|
|
- max-height: 1306px;
|
|
|
-}
|
|
|
|
|
|
.account-center {
|
|
|
&-bottom {
|
XiaXxxxxx