diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.java
index 6fa66b7e6a..58157b6b3b 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.java
@@ -1,6 +1,5 @@
 package io.dataease.base.mapper.ext;
 
-import io.dataease.controller.request.BaseTreeRequest;
 import io.dataease.controller.request.chart.ChartGroupRequest;
 import io.dataease.dto.chart.ChartGroupDTO;
 
diff --git a/backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java b/backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java
index 4d62d8a8cb..b321f97891 100644
--- a/backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java
@@ -26,6 +26,11 @@ public class ChartGroupController {
         return chartGroupService.tree(ChartGroup);
     }
 
+    @PostMapping("/treeNode")
+    public List<ChartGroupDTO> treeNode(@RequestBody ChartGroupRequest ChartGroup) {
+        return chartGroupService.tree(ChartGroup);
+    }
+
     @PostMapping("/delete/{id}")
     public void tree(@PathVariable String id) {
         chartGroupService.delete(id);
diff --git a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
index 11ea036799..73f4861455 100644
--- a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
@@ -32,6 +32,11 @@ public class ChartViewController {
         return chartViewService.list(chartViewRequest);
     }
 
+    @PostMapping("/listAndGroup")
+    public List<ChartViewDTO> listAndGroup(@RequestBody ChartViewRequest chartViewRequest) {
+        return chartViewService.listAndGroup(chartViewRequest);
+    }
+
     @PostMapping("/get/{id}")
     public ChartViewWithBLOBs get(@PathVariable String id) {
         return chartViewService.get(id);
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
index 0d9282dc45..91de251ca2 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
@@ -21,6 +21,7 @@ public class DataSetGroupController {
     private DataSetGroupService dataSetGroupService;
     @Resource
     private ExtractDataService extractDataService;
+
     @PostMapping("/save")
     public DataSetGroupDTO save(@RequestBody DatasetGroup datasetGroup) {
         return dataSetGroupService.save(datasetGroup);
@@ -31,8 +32,13 @@ public class DataSetGroupController {
         return dataSetGroupService.tree(datasetGroup);
     }
 
+    @PostMapping("/treeNode")
+    public List<DataSetGroupDTO> treeNode(@RequestBody DataSetGroupRequest datasetGroup) {
+        return dataSetGroupService.treeNode(datasetGroup);
+    }
+
     @PostMapping("/delete/{id}")
-    public void tree(@PathVariable String id) throws Exception{
+    public void tree(@PathVariable String id) throws Exception {
         dataSetGroupService.delete(id);
     }
 
@@ -42,7 +48,7 @@ public class DataSetGroupController {
     }
 
     @PostMapping("/isKettleRunning")
-    public  boolean isKettleRunning(){
+    public boolean isKettleRunning() {
         return extractDataService.isKettleRunning();
     }
 }
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
index b40d009e66..3fe41d449a 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@@ -44,6 +44,11 @@ public class DataSetTableController {
         return dataSetTableService.list(dataSetTableRequest);
     }
 
+    @PostMapping("listAndGroup")
+    public List<DataSetTableDTO> listAndGroup(@RequestBody DataSetTableRequest dataSetTableRequest) {
+        return dataSetTableService.listAndGroup(dataSetTableRequest);
+    }
+
     @PostMapping("get/{id}")
     public DatasetTable get(@PathVariable String id) {
         return dataSetTableService.get(id);
diff --git a/backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java b/backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java
index 0d7b40becd..2adf9f6453 100644
--- a/backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java
+++ b/backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java
@@ -16,4 +16,7 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
     private Map<String, Object> data;
 
     private String privileges;
+
+    private Boolean isLeaf;
+    private String pid;
 }
diff --git a/backend/src/main/java/io/dataease/dto/dataset/DataSetTableDTO.java b/backend/src/main/java/io/dataease/dto/dataset/DataSetTableDTO.java
index 26fe50bcdc..d9ec015bb5 100644
--- a/backend/src/main/java/io/dataease/dto/dataset/DataSetTableDTO.java
+++ b/backend/src/main/java/io/dataease/dto/dataset/DataSetTableDTO.java
@@ -15,4 +15,7 @@ import java.util.List;
 public class DataSetTableDTO extends DatasetTable {
     private List<DataSetTableDTO> children;
     private String privileges;
+
+    private Boolean isLeaf;
+    private String pid;
 }
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
index d71d72cd9e..6759f2e529 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@@ -81,6 +81,16 @@ public class ChartGroupService {
     }
 
     public List<ChartGroupDTO> tree(ChartGroupRequest chartGroup) {
+        chartGroup.setLevel(null);
+        chartGroup.setPid("0");
+        chartGroup.setType("group");
+        chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
+        List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
+        return result;
+    }
+
+    public List<ChartGroupDTO> treeNode(ChartGroupRequest chartGroup) {
         chartGroup.setLevel(null);
         chartGroup.setPid(null);
         chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 56d2f90035..817458703f 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -4,21 +4,23 @@ import com.google.gson.Gson;
 import com.google.gson.reflect.TypeToken;
 import io.dataease.base.domain.*;
 import io.dataease.base.mapper.ChartViewMapper;
+import io.dataease.base.mapper.ext.ExtChartGroupMapper;
 import io.dataease.base.mapper.ext.ExtChartViewMapper;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.controller.request.chart.ChartExtFilterRequest;
 import io.dataease.controller.request.chart.ChartExtRequest;
+import io.dataease.controller.request.chart.ChartGroupRequest;
 import io.dataease.controller.request.chart.ChartViewRequest;
+import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.datasource.provider.DatasourceProvider;
 import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
 import io.dataease.datasource.service.DatasourceService;
-import io.dataease.dto.chart.ChartCustomFilterDTO;
-import io.dataease.dto.chart.ChartViewDTO;
-import io.dataease.dto.chart.ChartViewFieldDTO;
-import io.dataease.dto.chart.Series;
+import io.dataease.dto.chart.*;
+import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.dataset.DataSetTableDTO;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import io.dataease.i18n.Translator;
 import io.dataease.provider.QueryProvider;
@@ -51,6 +53,8 @@ public class ChartViewService {
     private DatasourceService datasourceService;
     @Resource
     private DataSetTableFieldsService dataSetTableFieldsService;
+    @Resource
+    private ExtChartGroupMapper extChartGroupMapper;
 
     public ChartViewWithBLOBs save(ChartViewWithBLOBs chartView) {
         checkName(chartView);
@@ -72,6 +76,30 @@ public class ChartViewService {
         return extChartViewMapper.search(chartViewRequest);
     }
 
+    public List<ChartViewDTO> listAndGroup(ChartViewRequest chartViewRequest) {
+        chartViewRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<ChartViewDTO> charts = extChartViewMapper.search(chartViewRequest);
+        charts.forEach(ele -> ele.setIsLeaf(true));
+        // 获取group下的子group
+        ChartGroupRequest chartGroupRequest = new ChartGroupRequest();
+        chartGroupRequest.setLevel(null);
+        chartGroupRequest.setType("group");
+        chartGroupRequest.setPid(chartViewRequest.getSceneId());
+        chartGroupRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<ChartGroupDTO> groups = extChartGroupMapper.search(chartGroupRequest);
+        List<ChartViewDTO> group = groups.stream().map(ele -> {
+            ChartViewDTO dto = new ChartViewDTO();
+            dto.setId(ele.getId());
+            dto.setName(ele.getName());
+            dto.setIsLeaf(false);
+            dto.setType("group");
+            dto.setPid(ele.getPid());
+            return dto;
+        }).collect(Collectors.toList());
+        group.addAll(charts);
+        return group;
+    }
+
     public ChartViewWithBLOBs get(String id) {
         return chartViewMapper.selectByPrimaryKey(id);
     }
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java
index 55ea4eb284..50a3cd790d 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java
@@ -87,6 +87,16 @@ public class DataSetGroupService {
         }
     }
 
+    public List<DataSetGroupDTO> treeNode(DataSetGroupRequest datasetGroup) {
+        datasetGroup.setLevel(null);
+        datasetGroup.setPid("0");
+        datasetGroup.setType("group");
+        datasetGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<DataSetGroupDTO> treeInfo = extDataSetGroupMapper.search(datasetGroup);
+        List<DataSetGroupDTO> result = TreeUtils.mergeTree(treeInfo);
+        return result;
+    }
+
     public List<DataSetGroupDTO> tree(DataSetGroupRequest datasetGroup) {
         datasetGroup.setLevel(null);
         datasetGroup.setPid(null);
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 0200ea4a5f..55e2cb486b 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -5,21 +5,19 @@ import com.fit2cloud.quartz.anno.QuartzScheduled;
 import com.google.gson.Gson;
 import io.dataease.base.domain.*;
 import io.dataease.base.mapper.*;
+import io.dataease.base.mapper.ext.ExtDataSetGroupMapper;
 import io.dataease.base.mapper.ext.ExtDataSetTableMapper;
 import io.dataease.base.mapper.ext.UtilMapper;
 import io.dataease.commons.constants.JobStatus;
 import io.dataease.commons.utils.*;
+import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.datasource.dto.TableFiled;
 import io.dataease.datasource.provider.DatasourceProvider;
 import io.dataease.datasource.provider.JdbcProvider;
 import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
-import io.dataease.dto.dataset.DataSetPreviewPage;
-import io.dataease.dto.dataset.DataSetTableDTO;
-import io.dataease.dto.dataset.DataSetTableUnionDTO;
-import io.dataease.dto.dataset.DataTableInfoCustomUnion;
-import io.dataease.dto.dataset.DataTableInfoDTO;
+import io.dataease.dto.dataset.*;
 import io.dataease.i18n.Translator;
 import io.dataease.provider.DDLProvider;
 import io.dataease.provider.QueryProvider;
@@ -81,6 +79,8 @@ public class DataSetTableService {
     private QrtzSchedulerStateMapper qrtzSchedulerStateMapper;
     @Resource
     private DatasetTableTaskLogMapper datasetTableTaskLogMapper;
+    @Resource
+    private ExtDataSetGroupMapper extDataSetGroupMapper;
     private static String lastUpdateTime = "${__last_update_time__}";
     private static String currentUpdateTime = "${__current_update_time__}";
 
@@ -186,6 +186,31 @@ public class DataSetTableService {
         return extDataSetTableMapper.search(dataSetTableRequest);
     }
 
+    public List<DataSetTableDTO> listAndGroup(DataSetTableRequest dataSetTableRequest) {
+        dataSetTableRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        dataSetTableRequest.setTypeFilter(dataSetTableRequest.getTypeFilter());
+        List<DataSetTableDTO> ds = extDataSetTableMapper.search(dataSetTableRequest);
+        ds.forEach(ele -> ele.setIsLeaf(true));
+        // 获取group下的子group
+        DataSetGroupRequest datasetGroup = new DataSetGroupRequest();
+        datasetGroup.setLevel(null);
+        datasetGroup.setType("group");
+        datasetGroup.setPid(dataSetTableRequest.getSceneId());
+        datasetGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<DataSetGroupDTO> groups = extDataSetGroupMapper.search(datasetGroup);
+        List<DataSetTableDTO> group = groups.stream().map(ele -> {
+            DataSetTableDTO dto = new DataSetTableDTO();
+            dto.setId(ele.getId());
+            dto.setName(ele.getName());
+            dto.setIsLeaf(false);
+            dto.setType("group");
+            dto.setPid(ele.getPid());
+            return dto;
+        }).collect(Collectors.toList());
+        group.addAll(ds);
+        return group;
+    }
+
     public DatasetTable get(String id) {
         return datasetTableMapper.selectByPrimaryKey(id);
     }
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 633aad4e0f..be15db1292 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -6,17 +6,20 @@
         <span class="title-text">
           {{ $t('chart.datalist') }}
         </span>
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')">
+          <!--          {{ $t('chart.add_group') }}-->
+        </el-button>
       </el-row>
       <el-divider />
 
-      <el-row>
-        <el-button type="primary" size="mini" @click="add('group')">
-          {{ $t('chart.add_group') }}
-        </el-button>
-        <el-button type="primary" size="mini" @click="add('scene')">
-          {{ $t('chart.add_scene') }}
-        </el-button>
-      </el-row>
+      <!--      <el-row>-->
+      <!--        <el-button type="primary" size="mini" @click="add('group')">-->
+      <!--          {{ $t('chart.add_group') }}-->
+      <!--        </el-button>-->
+      <!--        <el-button type="primary" size="mini" @click="add('scene')">-->
+      <!--          {{ $t('chart.add_scene') }}-->
+      <!--        </el-button>-->
+      <!--      </el-row>-->
 
       <!--      <el-row>-->
       <!--        <el-form>-->
@@ -35,24 +38,29 @@
       <el-col class="custom-tree-container">
         <div class="block">
           <el-tree
+            ref="asyncTree"
             :default-expanded-keys="expandedArray"
             :data="data"
             node-key="id"
             :expand-on-click-node="true"
+            :load="loadNode"
+            lazy
+            :props="treeProps"
+            highlight-current
             @node-click="nodeClick"
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node father">
+            <span v-if="data.type ==='group'" slot-scope="{ node, data }" class="custom-tree-node father">
               <span style="display: flex;flex: 1;width: 0;">
-                <span v-if="data.type === 'scene'">
-                  <!--                  <el-button-->
-                  <!--                    icon="el-icon-folder-opened"-->
-                  <!--                    type="text"-->
-                  <!--                    size="mini"-->
-                  <!--                  />-->
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
-                </span>
+                <!--                <span v-if="data.type === 'scene'">-->
+                <!--                  &lt;!&ndash;                  <el-button&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    icon="el-icon-folder-opened"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    type="text"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    size="mini"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                  />&ndash;&gt;-->
+                <!--                  <svg-icon icon-class="scene" class="ds-icon-scene" />-->
+                <!--                </span>-->
                 <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
@@ -69,8 +77,11 @@
                       <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
                         {{ $t('chart.group') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
-                        {{ $t('chart.scene') }}
+                      <!--                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">-->
+                      <!--                        {{ $t('chart.scene') }}-->
+                      <!--                      </el-dropdown-item>-->
+                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('chart',data,node)">
+                        {{ $t('chart.add_chart') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -96,6 +107,33 @@
                 </span>
               </span>
             </span>
+            <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
+              <span style="display: flex;flex: 1;width: 0;">
+                <span><svg-icon :icon-class="data.type" /></span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              </span>
+              <span v-if="hasDataPermission('manage',data.privileges)" class="child">
+                <span style="margin-left: 12px;" @click.stop>
+                  <el-dropdown trigger="click" size="small" @command="clickMore">
+                    <span class="el-dropdown-link">
+                      <el-button
+                        icon="el-icon-more"
+                        type="text"
+                        size="small"
+                      />
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <!--                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
+                      <!--                    {{ $t('chart.rename') }}-->
+                      <!--                  </el-dropdown-item>-->
+                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
+                        {{ $t('chart.delete') }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </span>
+              </span>
+            </span>
           </el-tree>
         </div>
       </el-col>
@@ -115,110 +153,147 @@
     </el-col>
 
     <!--scene-->
-    <el-col v-if="sceneMode">
-      <el-row class="title-css scene-title">
-        <span class="title-text scene-title-name" :title="currGroup.name">
-          {{ currGroup.name }}
-        </span>
-        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
-          <!--          {{ $t('chart.back') }}-->
-        </el-button>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <el-button type="primary" size="mini" plain @click="selectTable">
-          {{ $t('chart.add_chart') }}
-        </el-button>
-      </el-row>
-      <el-row>
-        <el-form>
-          <el-form-item class="form-item">
-            <el-input
-              v-model="search"
-              size="mini"
-              :placeholder="$t('chart.search')"
-              prefix-icon="el-icon-search"
-              clearable
-            />
+    <!--    <el-col v-if="sceneMode">-->
+    <!--      <el-row class="title-css scene-title">-->
+    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
+    <!--          {{ currGroup.name }}-->
+    <!--        </span>-->
+    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
+    <!--          &lt;!&ndash;          {{ $t('chart.back') }}&ndash;&gt;-->
+    <!--        </el-button>-->
+    <!--      </el-row>-->
+    <!--      <el-divider />-->
+    <!--      <el-row>-->
+    <!--        <el-button type="primary" size="mini" plain @click="selectTable">-->
+    <!--          {{ $t('chart.add_chart') }}-->
+    <!--        </el-button>-->
+    <!--      </el-row>-->
+    <!--      <el-row>-->
+    <!--        <el-form>-->
+    <!--          <el-form-item class="form-item">-->
+    <!--            <el-input-->
+    <!--              v-model="search"-->
+    <!--              size="mini"-->
+    <!--              :placeholder="$t('chart.search')"-->
+    <!--              prefix-icon="el-icon-search"-->
+    <!--              clearable-->
+    <!--            />-->
+    <!--          </el-form-item>-->
+    <!--        </el-form>-->
+    <!--      </el-row>-->
+    <!--      <span v-show="false">{{ sceneData }}</span>-->
+    <!--      <el-tree-->
+    <!--        :data="chartData"-->
+    <!--        node-key="id"-->
+    <!--        :expand-on-click-node="true"-->
+    <!--        class="tree-list"-->
+    <!--        highlight-current-->
+    <!--        @node-click="sceneClick"-->
+    <!--      >-->
+    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
+    <!--          <span style="display: flex;flex: 1;width: 0;">-->
+    <!--            <span><svg-icon :icon-class="data.type" /></span>-->
+    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
+    <!--          </span>-->
+    <!--          <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
+    <!--            <span style="margin-left: 12px;" @click.stop>-->
+    <!--              <el-dropdown trigger="click" size="small" @command="clickMore">-->
+    <!--                <span class="el-dropdown-link">-->
+    <!--                  <el-button-->
+    <!--                    icon="el-icon-more"-->
+    <!--                    type="text"-->
+    <!--                    size="small"-->
+    <!--                  />-->
+    <!--                </span>-->
+    <!--                <el-dropdown-menu slot="dropdown">-->
+    <!--                  &lt;!&ndash;                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">&ndash;&gt;-->
+    <!--                  &lt;!&ndash;                    {{ $t('chart.rename') }}&ndash;&gt;-->
+    <!--                  &lt;!&ndash;                  </el-dropdown-item>&ndash;&gt;-->
+    <!--                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">-->
+    <!--                    {{ $t('chart.delete') }}-->
+    <!--                  </el-dropdown-item>-->
+    <!--                </el-dropdown-menu>-->
+    <!--              </el-dropdown>-->
+    <!--            </span>-->
+    <!--          </span>-->
+    <!--        </span>-->
+    <!--      </el-tree>-->
+
+    <!--      &lt;!&ndash;rename chart&ndash;&gt;-->
+    <!--      <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">-->
+    <!--        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">-->
+    <!--          <el-form-item :label="$t('commons.name')" prop="name">-->
+    <!--            <el-input v-model="tableForm.name" />-->
+    <!--          </el-form-item>-->
+    <!--        </el-form>-->
+    <!--        <div slot="footer" class="dialog-footer">-->
+    <!--          <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>-->
+    <!--          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>-->
+    <!--        </div>-->
+    <!--      </el-dialog>-->
+
+    <!--      &lt;!&ndash;添加视图-选择数据集&ndash;&gt;-->
+    <!--      &lt;!&ndash;      <el-dialog&ndash;&gt;-->
+    <!--      &lt;!&ndash;        v-dialogDrag&ndash;&gt;-->
+    <!--      &lt;!&ndash;        :title="$t('chart.add_chart')"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        :visible="selectTableFlag"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        :show-close="false"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        width="70%"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        class="dialog-css"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        :destroy-on-close="true"&ndash;&gt;-->
+    <!--      &lt;!&ndash;      >&ndash;&gt;-->
+    <!--      &lt;!&ndash;        <el-row style="width: 400px;">&ndash;&gt;-->
+    <!--      &lt;!&ndash;          <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">&ndash;&gt;-->
+    <!--      &lt;!&ndash;            <el-form-item :label="$t('chart.view_name')">&ndash;&gt;-->
+    <!--      &lt;!&ndash;              <el-input v-model="chartName" size="mini" />&ndash;&gt;-->
+    <!--      &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--      &lt;!&ndash;          </el-form>&ndash;&gt;-->
+    <!--      &lt;!&ndash;        </el-row>&ndash;&gt;-->
+    <!--      &lt;!&ndash;        <table-selector @getTable="getTable" />&ndash;&gt;-->
+    <!--      &lt;!&ndash;        <div slot="footer" class="dialog-footer">&ndash;&gt;-->
+    <!--      &lt;!&ndash;          <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>&ndash;&gt;-->
+    <!--      &lt;!&ndash;          <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>&ndash;&gt;-->
+    <!--      &lt;!&ndash;        </div>&ndash;&gt;-->
+    <!--      &lt;!&ndash;      </el-dialog>&ndash;&gt;-->
+
+    <!--    </el-col>-->
+
+    <!--rename chart-->
+    <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
+      <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="tableForm.name" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <!--添加视图-选择数据集-->
+    <el-dialog
+      v-dialogDrag
+      :title="$t('chart.add_chart')"
+      :visible="selectTableFlag"
+      :show-close="false"
+      width="70%"
+      class="dialog-css"
+      :destroy-on-close="true"
+    >
+      <el-row style="width: 400px;">
+        <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
+          <el-form-item :label="$t('chart.view_name')">
+            <el-input v-model="chartName" size="mini" />
           </el-form-item>
         </el-form>
       </el-row>
-      <span v-show="false">{{ sceneData }}</span>
-      <el-tree
-        :data="chartData"
-        node-key="id"
-        :expand-on-click-node="true"
-        class="tree-list"
-        highlight-current
-        @node-click="sceneClick"
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
-          <span style="display: flex;flex: 1;width: 0;">
-            <span><svg-icon :icon-class="data.type" /></span>
-            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
-          </span>
-          <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-            <span style="margin-left: 12px;" @click.stop>
-              <el-dropdown trigger="click" size="small" @command="clickMore">
-                <span class="el-dropdown-link">
-                  <el-button
-                    icon="el-icon-more"
-                    type="text"
-                    size="small"
-                  />
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <!--                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
-                  <!--                    {{ $t('chart.rename') }}-->
-                  <!--                  </el-dropdown-item>-->
-                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
-                    {{ $t('chart.delete') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </span>
-          </span>
-        </span>
-      </el-tree>
-
-      <!--rename chart-->
-      <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
-        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
-          <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="tableForm.name" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>
-        </div>
-      </el-dialog>
-
-      <!--添加视图-选择数据集-->
-      <el-dialog
-        v-dialogDrag
-        :title="$t('chart.add_chart')"
-        :visible="selectTableFlag"
-        :show-close="false"
-        width="70%"
-        class="dialog-css"
-        :destroy-on-close="true"
-      >
-        <el-row style="width: 400px;">
-          <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
-            <el-form-item :label="$t('chart.view_name')">
-              <el-input v-model="chartName" size="mini" />
-            </el-form-item>
-          </el-form>
-        </el-row>
-        <table-selector @getTable="getTable" />
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-          <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
-        </div>
-      </el-dialog>
-
-    </el-col>
+      <table-selector @getTable="getTable" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-col>
 </template>
 
@@ -240,6 +315,13 @@ import {
 export default {
   name: 'Group',
   components: { TableSelector },
+  props: {
+    saveStatus: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
   data() {
     return {
       sceneMode: false,
@@ -278,14 +360,19 @@ export default {
       selectTableFlag: false,
       table: {},
       tables: [],
-      chartName: this.$t('chart.chartName')
+      chartName: this.$t('chart.chartName'),
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      }
     }
   },
   computed: {
-    sceneData: function() {
-      this.reviewChartList()
-      return this.$store.state.chart.chartSceneData
-    }
+    // sceneData: function() {
+    //   this.reviewChartList()
+    //   return this.$store.state.chart.chartSceneData
+    // }
   },
   watch: {
     search(val) {
@@ -294,18 +381,26 @@ export default {
       } else {
         this.chartData = JSON.parse(JSON.stringify(this.tables))
       }
+    },
+    saveStatus() {
+      this.refreshNodeBy(this.saveStatus.sceneId)
     }
   },
   mounted() {
-    this.groupTree(this.groupForm)
+    this.treeNode(this.groupForm)
     this.refresh()
-    this.chartTree()
+    // this.chartTree()
   },
   methods: {
     clickAdd(param) {
-      this.add(param.type)
-      this.groupForm.pid = param.data.id
-      this.groupForm.level = param.data.level + 1
+      this.currGroup = param.data
+      if (param.type === 'group') {
+        this.add(param.type)
+        this.groupForm.pid = param.data.id
+        this.groupForm.level = param.data.level + 1
+      } else {
+        this.selectTable()
+      }
     },
 
     beforeClickAdd(type, data, node) {
@@ -369,7 +464,7 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.groupTree(this.groupForm)
+            this.treeNode(this.groupForm)
           })
         } else {
           // this.$message({
@@ -392,7 +487,8 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.chartTree()
+            // this.chartTree()
+            this.refreshNodeBy(view.sceneId)
             // this.$router.push('/chart/home')
             this.$emit('switchComponent', { name: '' })
             this.$store.dispatch('chart/setTable', null)
@@ -420,7 +516,7 @@ export default {
             message: this.$t('chart.delete_success'),
             showClose: true
           })
-          this.groupTree(this.groupForm)
+          this.treeNode(this.groupForm)
         })
       }).catch(() => {
       })
@@ -438,7 +534,8 @@ export default {
             message: this.$t('chart.delete_success'),
             showClose: true
           })
-          this.chartTree()
+          // this.chartTree()
+          this.refreshNodeBy(data.sceneId)
           // this.$router.push('/chart/home')
           this.$emit('switchComponent', { name: '' })
           this.$store.dispatch('chart/setTable', null)
@@ -473,6 +570,12 @@ export default {
       })
     },
 
+    treeNode(group) {
+      post('/chart/group/treeNode', group).then(res => {
+        this.data = res.data
+      })
+    },
+
     chartTree() {
       this.tables = []
       this.chartData = []
@@ -488,12 +591,15 @@ export default {
     },
 
     nodeClick(data, node) {
-      if (data.type === 'scene') {
-        this.sceneMode = true
-        this.currGroup = data
-        this.$store.dispatch('chart/setSceneId', this.currGroup.id)
-        this.chartTree()
+      if (data.type !== 'group') {
+        this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': data.id }})
       }
+      // if (data.type === 'scene') {
+      //   this.sceneMode = true
+      //   this.currGroup = data
+      //   this.$store.dispatch('chart/setSceneId', this.currGroup.id)
+      //   this.chartTree()
+      // }
       // if (node.expanded) {
       //   this.expandedArray.push(data.id)
       // } else {
@@ -516,15 +622,6 @@ export default {
       }
     },
 
-    addDB() {
-      this.$router.push({
-        name: 'add_db',
-        params: {
-          scene: this.currGroup
-        }
-      })
-    },
-
     sceneClick(data, node) {
       // this.$store.dispatch('chart/setViewId', null)
       // this.$store.dispatch('chart/setViewId', data.id)
@@ -598,7 +695,8 @@ export default {
         // this.$router.push('/chart/chart-edit')
         this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
         // this.$store.dispatch('chart/setViewId', response.data.id)
-        this.chartTree()
+        // this.chartTree()
+        this.refreshNodeBy(view.sceneId)
       })
     },
 
@@ -626,6 +724,35 @@ export default {
       if (data.id) {
         this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
       }
+    },
+
+    loadNode(node, resolve) {
+      // if (!this.isTreeSearch) {
+      if (node.level > 0) {
+        this.tables = []
+        this.chartData = []
+        if (node.data.id) {
+          post('/chart/view/listAndGroup', {
+            sort: 'name asc,create_time desc',
+            sceneId: node.data.id
+          }).then(response => {
+            this.tables = response.data
+            this.chartData = JSON.parse(JSON.stringify(this.tables))
+            resolve(this.chartData)
+          })
+        }
+      }
+      // }
+    },
+
+    refreshNodeBy(id) {
+      if (!id || id === '0') {
+        this.treeNode(this.groupForm)
+      } else {
+        const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
+        node.loaded = false
+        node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
+      }
     }
   }
 }
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index df5e2c6de1..e6eb53f69c 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -2,12 +2,12 @@
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
 
     <de-aside-container>
-      <group @switchComponent="switchComponent" />
+      <group :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
 
     <de-main-container>
       <!--        <router-view />-->
-      <component :is="component" :param="param" @switchComponent="switchComponent" />
+      <component :is="component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
     </de-main-container>
   </de-container>
 </template>
@@ -28,7 +28,8 @@ export default {
   data() {
     return {
       component: ChartHome,
-      param: {}
+      param: {},
+      saveStatus: null
     }
   },
   mounted() {
@@ -45,6 +46,9 @@ export default {
           this.component = ChartHome
           break
       }
+    },
+    saveSuccess(val) {
+      this.saveStatus = val
     }
   }
 }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 8a8ac11cb1..d72cbfed81 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -98,7 +98,7 @@
               <el-radio-group
                 v-model="view.type"
                 style="width: 100%"
-                @change="save(true,'chart')"
+                @change="save(true,'chart',true)"
               >
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                   <el-radio value="table-normal" label="table-normal">
@@ -481,7 +481,7 @@ export default {
         return true
       })
     },
-    save(getData, trigger) {
+    save(getData, trigger, needRefreshGroup = false) {
       const view = JSON.parse(JSON.stringify(this.view))
       view.id = this.view.id
       view.sceneId = this.view.sceneId
@@ -549,8 +549,11 @@ export default {
           this.getChart(response.data.id)
         }
 
-        this.$store.dispatch('chart/setChartSceneData', null)
-        this.$store.dispatch('chart/setChartSceneData', response.data)
+        // this.$store.dispatch('chart/setChartSceneData', null)
+        // this.$store.dispatch('chart/setChartSceneData', response.data)
+        if (needRefreshGroup) {
+          this.refreshGroup(view)
+        }
       })
     },
 
@@ -797,7 +800,7 @@ export default {
     onTextChange(val) {
       this.view.customStyle.text = val
       this.view.title = val.title
-      this.save()
+      this.save(false, '', true)
     },
 
     onLegendChange(val) {
@@ -921,6 +924,10 @@ export default {
         yAxis: [],
         type: ''
       }
+    },
+
+    refreshGroup(view) {
+      this.$emit('saveSuccess', view)
     }
   }
 }
diff --git a/frontend/src/views/chart/view/TableSelector.vue b/frontend/src/views/chart/view/TableSelector.vue
index 07ae57dbbd..5ce2a2610b 100644
--- a/frontend/src/views/chart/view/TableSelector.vue
+++ b/frontend/src/views/chart/view/TableSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <de-container>
     <de-aside-container>
-      <dataset-group-selector @getTable="getTable" />
+      <dataset-group-selector-tree @getTable="getTable" />
     </de-aside-container>
 
     <de-main-container>
@@ -15,14 +15,15 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 
-import DatasetGroupSelector from '../../dataset/common/DatasetGroupSelector'
+// import DatasetGroupSelector from '../../dataset/common/DatasetGroupSelector'
+import DatasetGroupSelectorTree from '../../dataset/common/DatasetGroupSelectorTree'
 import DatasetTableData from '../../dataset/common/DatasetTableData'
 
 export default {
   name: 'TableSelector',
   components: {
     DatasetTableData,
-    DeMainContainer, DeContainer, DeAsideContainer, DatasetGroupSelector
+    DeMainContainer, DeContainer, DeAsideContainer, DatasetGroupSelectorTree
   },
   data() {
     return {
diff --git a/frontend/src/views/dataset/add/AddCustom.vue b/frontend/src/views/dataset/add/AddCustom.vue
index ee2fb6c95e..10c5fd883a 100644
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@@ -208,7 +208,8 @@ export default {
         info: '{"list":' + JSON.stringify(this.checkedList) + '}'
       }
       post('/dataset/table/update', table).then(response => {
-        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        // this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        this.$emit('saveSuccess', table)
         this.cancel()
       })
     },
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index 44bf4daa1c..c0348a44da 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -141,7 +141,8 @@ export default {
         })
       })
       post('/dataset/table/batchAdd', tables).then(response => {
-        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        // this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        this.$emit('saveSuccess', tables[0])
         this.cancel()
       })
     },
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 0d12860517..1405edcd4e 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -202,7 +202,8 @@ export default {
         }
       }
       post('/dataset/table/update', table).then(response => {
-        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        // this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        this.$emit('saveSuccess', table)
         this.cancel()
       })
     },
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 6156036fe0..07e7456d8f 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -265,7 +265,8 @@ export default {
         info: JSON.stringify({ sql: this.sql })
       }
       post('/dataset/table/update', table).then(response => {
-        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        // this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        this.$emit('saveSuccess', table)
         this.cancel()
       })
     },
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index e1071ab0b3..48225d21ef 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -29,8 +29,10 @@
             :default-expanded-keys="expandedArray"
             :data="data"
             node-key="id"
-            :expand-on-click-node="true"
+            :expand-on-click-node="false"
             @node-click="nodeClick"
+            @node-expand="nodeExpand"
+            @node-collapse="nodeCollapse"
           >
             <span slot-scope="{ node, data }" class="custom-tree-node">
               <span style="display: flex;flex: 1;width: 0;">
@@ -234,7 +236,7 @@ export default {
       if (this.currGroup) {
         this.dsLoading = true
         post('/dataset/table/list', {
-          sort: 'type asc,create_time desc,name asc',
+          sort: 'type asc,name asc,create_time desc',
           sceneId: this.currGroup.id,
           mode: this.mode < 0 ? null : this.mode,
           typeFilter: this.customType ? this.customType : null
@@ -258,19 +260,19 @@ export default {
     },
 
     nodeClick(data, node) {
-      if (data.type === 'scene') {
-        this.sceneMode = true
-        this.currGroup = data
-        this.tableTree()
-      }
-      if (node.expanded) {
-        this.expandedArray.push(data.id)
-      } else {
-        const index = this.expandedArray.indexOf(data.id)
-        if (index > -1) {
-          this.expandedArray.splice(index, 1)
-        }
-      }
+      // if (data.type === 'scene') {
+      this.sceneMode = true
+      this.currGroup = data
+      this.tableTree()
+      // }
+      // if (node.expanded) {
+      //   this.expandedArray.push(data.id)
+      // } else {
+      //   const index = this.expandedArray.indexOf(data.id)
+      //   if (index > -1) {
+      //     this.expandedArray.splice(index, 1)
+      //   }
+      // }
       // console.log(this.expandedArray);
     },
 
@@ -339,6 +341,17 @@ export default {
         div1.style.setProperty('cursor', 'not-allowed')
         div2.style.setProperty('pointer-events', 'none')
       })
+    },
+
+    nodeExpand(data) {
+      if (data.id) {
+        this.expandedArray.push(data.id)
+      }
+    },
+    nodeCollapse(data) {
+      if (data.id) {
+        this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
+      }
     }
   }
 }
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
new file mode 100644
index 0000000000..8e8f7c123c
--- /dev/null
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -0,0 +1,471 @@
+<template>
+  <el-col>
+    <!-- group -->
+    <el-col v-if="!sceneMode" v-loading="dsLoading">
+      <el-row class="title-css">
+        <span class="title-text">
+          {{ $t('dataset.datalist') }}
+        </span>
+      </el-row>
+      <el-divider />
+
+      <el-col class="custom-tree-container">
+        <div class="block">
+          <el-tree
+            :default-expanded-keys="expandedArray"
+            :data="data"
+            node-key="id"
+            :expand-on-click-node="true"
+            :load="loadNode"
+            lazy
+            :props="treeProps"
+            highlight-current
+            @node-click="nodeClick"
+            @node-expand="nodeExpand"
+            @node-collapse="nodeCollapse"
+          >
+            <span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node">
+              <span style="display: flex;flex: 1;width: 0;">
+                <span v-if="data.type === 'scene'">
+                  <!--                  <el-button-->
+                  <!--                    icon="el-icon-folder-opened"-->
+                  <!--                    type="text"-->
+                  <!--                    size="mini"-->
+                  <!--                  />-->
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                </span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              </span>
+            </span>
+            <span v-else slot-scope="{ node, data }" class="custom-tree-node-list">
+              <span :id="data.id" style="display: flex;flex: 1;width: 0;">
+                <span>
+                  <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
+                  <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+                  <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+                  <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
+                </span>
+                <span v-if="data.type === 'db' || data.type === 'sql'">
+                  <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
+                  <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
+                </span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </el-col>
+    </el-col>
+
+    <!--scene-->
+    <!--    <el-col v-if="sceneMode" v-loading="dsLoading">-->
+    <!--      <el-row class="title-css scene-title">-->
+    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
+    <!--          {{ currGroup.name }}-->
+    <!--        </span>-->
+    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
+    <!--          &lt;!&ndash;          {{ $t('dataset.back') }}&ndash;&gt;-->
+    <!--        </el-button>-->
+    <!--      </el-row>-->
+    <!--      <el-divider />-->
+    <!--      <el-row>-->
+    <!--        <el-form>-->
+    <!--          <el-form-item class="form-item">-->
+    <!--            <el-input-->
+    <!--              v-model="search"-->
+    <!--              size="mini"-->
+    <!--              :placeholder="$t('dataset.search')"-->
+    <!--              prefix-icon="el-icon-search"-->
+    <!--              clearable-->
+    <!--            />-->
+    <!--          </el-form-item>-->
+    <!--        </el-form>-->
+    <!--      </el-row>-->
+    <!--      <el-tree-->
+    <!--        :data="tableData"-->
+    <!--        node-key="id"-->
+    <!--        :expand-on-click-node="true"-->
+    <!--        class="tree-list"-->
+    <!--        highlight-current-->
+    <!--        @node-click="sceneClick"-->
+    <!--      >-->
+    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list">-->
+    <!--          <span :id="data.id" style="display: flex;flex: 1;width: 0;">-->
+    <!--            <span>-->
+    <!--              <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />-->
+    <!--              <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />-->
+    <!--              <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />-->
+    <!--              <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />-->
+    <!--            </span>-->
+    <!--            <span v-if="data.type === 'db' || data.type === 'sql'">-->
+    <!--              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
+    <!--              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
+    <!--            </span>-->
+    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
+    <!--          </span>-->
+    <!--        </span>-->
+    <!--      </el-tree>-->
+    <!--    </el-col>-->
+  </el-col>
+</template>
+
+<script>
+import { isKettleRunning, post } from '@/api/dataset/dataset'
+
+export default {
+  name: 'DatasetGroupSelector',
+  props: {
+    customType: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    mode: {
+      type: Number,
+      required: false,
+      default: -1
+    },
+    unionData: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    checkedList: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    table: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    showMode: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      kettleRunning: false,
+      sceneMode: false,
+      search: '',
+      data: [],
+      tableData: [],
+      tables: [],
+      currGroup: null,
+      expandedArray: [],
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      tableForm: {
+        name: '',
+        sort: 'type asc,create_time desc,name asc'
+      },
+      dsLoading: false,
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    'unionData': function() {
+      this.unionDataChange()
+    },
+    'table': function() {
+      if (this.table && this.table.sceneId) {
+        post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(response => {
+          this.currGroup = response.data
+
+          this.$nextTick(function() {
+            this.sceneMode = true
+            this.tableTree()
+          })
+        })
+      }
+    },
+    search(val) {
+      if (val && val !== '') {
+        this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
+      } else {
+        this.tableData = JSON.parse(JSON.stringify(this.tables))
+      }
+    }
+  },
+  mounted() {
+    this.treeNode(this.groupForm)
+    // this.tableTree()
+  },
+  created() {
+    this.kettleState()
+  },
+  methods: {
+    kettleState() {
+      isKettleRunning(false).then(res => {
+        this.kettleRunning = res.data
+      })
+    },
+    close() {
+      this.editGroup = false
+      this.groupForm = {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+
+    closeTable() {
+      this.editTable = false
+      this.tableForm = {
+        name: ''
+      }
+    },
+
+    // tree(group) {
+    //   this.dsLoading = true
+    //   post('/dataset/group/tree', group, false).then(response => {
+    //     this.data = response.data
+    //     this.dsLoading = false
+    //   })
+    // },
+
+    treeNode(group) {
+      post('/dataset/group/treeNode', group).then(res => {
+        this.data = res.data
+        this.dsLoading = false
+      })
+    },
+
+    tableTree() {
+      this.tableData = []
+      if (this.currGroup) {
+        this.dsLoading = true
+        post('/dataset/table/list', {
+          sort: 'type asc,name asc,create_time desc',
+          sceneId: this.currGroup.id,
+          mode: this.mode < 0 ? null : this.mode,
+          typeFilter: this.customType ? this.customType : null
+        }, false).then(response => {
+          this.tables = response.data
+          for (let i = 0; i < this.tables.length; i++) {
+            if (this.tables[i].mode === 1 && this.kettleRunning === false) {
+              this.$set(this.tables[i], 'disabled', true)
+            }
+          }
+          this.tableData = JSON.parse(JSON.stringify(this.tables))
+
+          this.$nextTick(function() {
+            this.unionDataChange()
+          })
+          this.dsLoading = false
+        }).catch(res => {
+          this.dsLoading = false
+        })
+      }
+    },
+
+    nodeClick(data, node) {
+      if (data.type !== 'group') {
+        this.sceneClick(data, node)
+      }
+      // if (data.type === 'scene') {
+      // this.sceneMode = true
+      // this.currGroup = data
+      // this.tableTree()
+      // }
+      // if (node.expanded) {
+      //   this.expandedArray.push(data.id)
+      // } else {
+      //   const index = this.expandedArray.indexOf(data.id)
+      //   if (index > -1) {
+      //     this.expandedArray.splice(index, 1)
+      //   }
+      // }
+      // console.log(this.expandedArray);
+    },
+
+    back() {
+      this.sceneMode = false
+    },
+
+    sceneClick(data, node) {
+      if (data.disabled) {
+        this.$message({
+          type: 'warning',
+          message: this.$t('dataset.invalid_dataset'),
+          showClose: true
+        })
+        return
+      }
+      // check mode=1的数据集是否创建doris表
+      if (data.mode === 1 && !this.showMode) {
+        post('/dataset/table/checkDorisTableIsExists/' + data.id, {}, false).then(response => {
+          if (response.data) {
+            this.$nextTick(function() {
+              this.$emit('getTable', data)
+            })
+          } else {
+            this.$message({
+              type: 'error',
+              message: this.$t('dataset.invalid_table_check'),
+              showClose: true
+            })
+          }
+        })
+      } else {
+        this.$emit('getTable', data)
+      }
+    },
+
+    unionDataChange() {
+      if (!this.sceneMode) {
+        return
+      }
+      if (!this.checkedList || this.checkedList.length === 0) {
+        this.tableData.forEach(ele => {
+          const span = document.getElementById(ele.id).parentNode
+          const div1 = span.parentNode
+          const div2 = div1.parentNode
+          span.style.removeProperty('color')
+          div1.style.removeProperty('cursor')
+          div2.style.removeProperty('pointer-events')
+        })
+        return
+      }
+      const tableList = this.tableData.map(ele => {
+        return ele.id
+      })
+      const unionList = this.unionData.map(ele => {
+        return ele.targetTableId
+      })
+      unionList.push(this.checkedList[0].tableId)
+      const notUnionList = tableList.concat(unionList).filter(v => tableList.includes(v) && !unionList.includes(v))
+
+      notUnionList.forEach(ele => {
+        const span = document.getElementById(ele).parentNode
+        const div1 = span.parentNode
+        const div2 = div1.parentNode
+        span.style.setProperty('color', '#c0c4cc')
+        div1.style.setProperty('cursor', 'not-allowed')
+        div2.style.setProperty('pointer-events', 'none')
+      })
+    },
+
+    nodeExpand(data) {
+      if (data.id) {
+        this.expandedArray.push(data.id)
+      }
+    },
+    nodeCollapse(data) {
+      if (data.id) {
+        this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
+      }
+    },
+
+    loadNode(node, resolve) {
+      if (node.data.id) {
+        this.dsLoading = true
+        post('/dataset/table/listAndGroup', {
+          sort: 'type asc,name asc,create_time desc',
+          sceneId: node.data.id,
+          mode: this.mode < 0 ? null : this.mode,
+          typeFilter: this.customType ? this.customType : null
+        }, false).then(response => {
+          this.tables = response.data
+          for (let i = 0; i < this.tables.length; i++) {
+            if (this.tables[i].mode === 1 && this.kettleRunning === false) {
+              this.$set(this.tables[i], 'disabled', true)
+            }
+          }
+          this.tableData = JSON.parse(JSON.stringify(this.tables))
+
+          this.$nextTick(function() {
+            this.unionDataChange()
+          })
+          this.dsLoading = false
+          resolve(this.tableData)
+        }).catch(res => {
+          this.dsLoading = false
+        })
+      }
+      // }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0
+  }
+
+  .search-input {
+    padding: 12px 0;
+  }
+
+  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+    display: none;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+
+  .custom-tree-node-list {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding:0 8px;
+  }
+
+  .custom-position {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    flex-flow: row nowrap;
+  }
+
+  .form-item {
+    margin-bottom: 0;
+  }
+
+  .title-css {
+    height: 26px;
+  }
+
+  .title-text {
+    line-height: 26px;
+  }
+
+  .scene-title{
+    width: 100%;
+    display: flex;
+  }
+  .scene-title-name{
+    width: 100%;
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/frontend/src/views/dataset/group/DsMoveSelector.vue b/frontend/src/views/dataset/group/DsMoveSelector.vue
index 2f5d7f5618..545f73d143 100644
--- a/frontend/src/views/dataset/group/DsMoveSelector.vue
+++ b/frontend/src/views/dataset/group/DsMoveSelector.vue
@@ -38,7 +38,7 @@ export default {
         name: '',
         pid: '0',
         level: 0,
-        type: '',
+        type: 'group',
         children: [],
         sort: 'type desc,name asc'
       },
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index c5f82fa174..cfb015ad17 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -1,4 +1,4 @@
-<template xmlns:el-col="http://www.w3.org/1999/html">
+<template>
   <el-col>
     <!-- group -->
     <el-col v-if="!sceneMode">
@@ -6,17 +6,20 @@
         <span class="title-text">
           {{ $t('dataset.datalist') }}
         </span>
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')">
+          <!--          {{ $t('dataset.add_group') }}-->
+        </el-button>
       </el-row>
       <el-divider />
 
-      <el-row>
-        <el-button type="primary" size="mini" @click="add('group')">
-          {{ $t('dataset.add_group') }}
-        </el-button>
-        <el-button type="primary" size="mini" @click="add('scene')">
-          {{ $t('dataset.add_scene') }}
-        </el-button>
-      </el-row>
+      <!--      <el-row>-->
+      <!--        <el-button type="primary" size="mini" @click="add('group')">-->
+      <!--          {{ $t('dataset.add_group') }}-->
+      <!--        </el-button>-->
+      <!--        <el-button type="primary" size="mini" @click="add('scene')">-->
+      <!--          {{ $t('dataset.add_scene') }}-->
+      <!--        </el-button>-->
+      <!--      </el-row>-->
 
       <!--      <el-row>-->
       <!--        <el-form>-->
@@ -35,24 +38,29 @@
       <el-col class="custom-tree-container">
         <div class="block">
           <el-tree
+            ref="asyncTree"
             :default-expanded-keys="expandedArray"
             :data="tData"
             node-key="id"
             :expand-on-click-node="true"
+            :load="loadNode"
+            lazy
+            :props="treeProps"
+            highlight-current
             @node-click="nodeClick"
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node father">
+            <span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
               <span style="display: flex;flex: 1;width: 0;">
-                <span v-if="data.type === 'scene'">
-                  <!--                  <el-button-->
-                  <!--                    icon="el-icon-folder-opened"-->
-                  <!--                    type="text"-->
-                  <!--                    size="mini"-->
-                  <!--                  />-->
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
-                </span>
+                <!--                <span v-if="data.type === 'scene'">-->
+                <!--                  &lt;!&ndash;                  <el-button&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    icon="el-icon-folder-opened"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    type="text"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                    size="mini"&ndash;&gt;-->
+                <!--                  &lt;!&ndash;                  />&ndash;&gt;-->
+                <!--                  <svg-icon icon-class="scene" class="ds-icon-scene" />-->
+                <!--                </span>-->
                 <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
@@ -67,10 +75,40 @@
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
-                        {{ $t('dataset.group') }}
+                        <span style="font-size: 13px;">{{ $t('dataset.group') }}</span>
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
-                        {{ $t('dataset.scene') }}
+                      <el-dropdown-item icon="el-icon-folder-add">
+                        <!--                        {{ $t('dataset.scene') }}-->
+                        <el-dropdown size="small" placement="right-start" @command="clickAddData">
+                          <!--                          <el-button type="primary" size="mini" plain>-->
+                          <!--                            {{ $t('dataset.add_table') }}-->
+                          <!--                          </el-button>-->
+                          <span class="el-dropdown-link inner-dropdown-menu">
+                            <span>
+                              <!--                              <i class="el-icon-sort" />-->
+                              <span style="font-size: 13px;">{{ $t('dataset.add_table') }}</span>
+                            </span>
+                            <i class="el-icon-arrow-right el-icon--right" />
+                          </span>
+                          <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item :command="beforeClickAddData('db',data)">
+                              <svg-icon icon-class="ds-db" class="ds-icon-db" />
+                              {{ $t('dataset.db_data') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item :command="beforeClickAddData('sql',data)">
+                              <svg-icon icon-class="ds-sql" class="ds-icon-sql" />
+                              {{ $t('dataset.sql_data') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item :command="beforeClickAddData('excel',data)">
+                              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+                              {{ $t('dataset.excel_data') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item :command="beforeClickAddData('custom',data)">
+                              <svg-icon icon-class="ds-custom" class="ds-icon-custom" />
+                              {{ $t('dataset.custom_data') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </el-dropdown>
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -99,6 +137,45 @@
                 </span>
               </span>
             </span>
+            <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
+              <span style="display: flex;flex: 1;width: 0;">
+                <span>
+                  <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
+                  <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+                  <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+                  <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
+                </span>
+                <span v-if="data.type === 'db' || data.type === 'sql'">
+                  <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
+                  <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
+                </span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              </span>
+              <span v-if="hasDataPermission('manage',data.privileges)" class="child">
+                <span style="margin-left: 12px;" @click.stop>
+                  <el-dropdown trigger="click" size="small" @command="clickMore">
+                    <span class="el-dropdown-link">
+                      <el-button
+                        icon="el-icon-more"
+                        type="text"
+                        size="small"
+                      />
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
+                        {{ $t('dataset.rename') }}
+                      </el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
+                        {{ $t('dataset.move_to') }}
+                      </el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
+                        {{ $t('dataset.delete') }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </span>
+              </span>
+            </span>
           </el-tree>
         </div>
       </el-col>
@@ -118,128 +195,127 @@
     </el-col>
 
     <!--scene-->
-    <el-col v-if="sceneMode">
-      <el-row class="title-css scene-title">
-        <span class="title-text scene-title-name" :title="currGroup.name">
-          {{ currGroup.name }}
-        </span>
-        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
-          <!--          {{ $t('dataset.back') }}-->
-        </el-button>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
-          <el-button type="primary" size="mini" plain>
-            {{ $t('dataset.add_table') }}
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="beforeClickAddData('db')">
-              <svg-icon icon-class="ds-db" class="ds-icon-db" />
-              {{ $t('dataset.db_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('sql')">
-              <svg-icon icon-class="ds-sql" class="ds-icon-sql" />
-              {{ $t('dataset.sql_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('excel')">
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
-              {{ $t('dataset.excel_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('custom')">
-              <svg-icon icon-class="ds-custom" class="ds-icon-custom" />
-              {{ $t('dataset.custom_data') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <!-- <el-button type="primary" size="mini" plain>
-          {{ $t('dataset.update') }}
-        </el-button>
-        <el-button type="primary" size="mini" plain>
-          {{ $t('dataset.process') }}
-        </el-button> -->
-      </el-row>
-      <el-row>
-        <el-form>
-          <el-form-item class="form-item">
-            <el-input
-              v-model="search"
-              size="mini"
-              :placeholder="$t('dataset.search')"
-              prefix-icon="el-icon-search"
-              clearable
-            />
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <span v-show="false">{{ sceneData }}</span>
-      <el-tree
-        :data="tableData"
-        node-key="id"
-        :expand-on-click-node="true"
-        class="tree-list"
-        highlight-current
-        @node-click="sceneClick"
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
-          <span style="display: flex;flex: 1;width: 0;">
-            <span>
-              <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
-              <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
-              <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
-              <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
-            </span>
-            <span v-if="data.type === 'db' || data.type === 'sql'">
-              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
-            </span>
-            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
-          </span>
-          <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-            <span style="margin-left: 12px;" @click.stop>
-              <el-dropdown trigger="click" size="small" @command="clickMore">
-                <span class="el-dropdown-link">
-                  <el-button
-                    icon="el-icon-more"
-                    type="text"
-                    size="small"
-                  />
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
-                    {{ $t('dataset.rename') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
-                    {{ $t('dataset.move_to') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
-                    {{ $t('dataset.delete') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </span>
-          </span>
-        </span>
-      </el-tree>
+    <!--    <el-col v-if="sceneMode">-->
+    <!--      <el-row class="title-css scene-title">-->
+    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
+    <!--          {{ currGroup.name }}-->
+    <!--        </span>-->
+    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
+    <!--          &lt;!&ndash;          {{ $t('dataset.back') }}&ndash;&gt;-->
+    <!--        </el-button>-->
+    <!--      </el-row>-->
+    <!--      <el-divider />-->
+    <!--      <el-row>-->
+    <!--        <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">-->
+    <!--          <el-button type="primary" size="mini" plain>-->
+    <!--            {{ $t('dataset.add_table') }}-->
+    <!--          </el-button>-->
+    <!--          <el-dropdown-menu slot="dropdown">-->
+    <!--            <el-dropdown-item :command="beforeClickAddData('db')">-->
+    <!--              <svg-icon icon-class="ds-db" class="ds-icon-db" />-->
+    <!--              {{ $t('dataset.db_data') }}-->
+    <!--            </el-dropdown-item>-->
+    <!--            <el-dropdown-item :command="beforeClickAddData('sql')">-->
+    <!--              <svg-icon icon-class="ds-sql" class="ds-icon-sql" />-->
+    <!--              {{ $t('dataset.sql_data') }}-->
+    <!--            </el-dropdown-item>-->
+    <!--            <el-dropdown-item :command="beforeClickAddData('excel')">-->
+    <!--              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />-->
+    <!--              {{ $t('dataset.excel_data') }}-->
+    <!--            </el-dropdown-item>-->
+    <!--            <el-dropdown-item :command="beforeClickAddData('custom')">-->
+    <!--              <svg-icon icon-class="ds-custom" class="ds-icon-custom" />-->
+    <!--              {{ $t('dataset.custom_data') }}-->
+    <!--            </el-dropdown-item>-->
+    <!--          </el-dropdown-menu>-->
+    <!--        </el-dropdown>-->
+    <!--        &lt;!&ndash; <el-button type="primary" size="mini" plain>-->
+    <!--          {{ $t('dataset.update') }}-->
+    <!--        </el-button>-->
+    <!--        <el-button type="primary" size="mini" plain>-->
+    <!--          {{ $t('dataset.process') }}-->
+    <!--        </el-button> &ndash;&gt;-->
+    <!--      </el-row>-->
+    <!--      <el-row>-->
+    <!--        <el-form>-->
+    <!--          <el-form-item class="form-item">-->
+    <!--            <el-input-->
+    <!--              v-model="search"-->
+    <!--              size="mini"-->
+    <!--              :placeholder="$t('dataset.search')"-->
+    <!--              prefix-icon="el-icon-search"-->
+    <!--              clearable-->
+    <!--            />-->
+    <!--          </el-form-item>-->
+    <!--        </el-form>-->
+    <!--      </el-row>-->
+    <!--      <span v-show="false">{{ sceneData }}</span>-->
+    <!--      <el-tree-->
+    <!--        :data="tableData"-->
+    <!--        node-key="id"-->
+    <!--        :expand-on-click-node="true"-->
+    <!--        class="tree-list"-->
+    <!--        highlight-current-->
+    <!--        @node-click="sceneClick"-->
+    <!--      >-->
+    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
+    <!--          <span style="display: flex;flex: 1;width: 0;">-->
+    <!--            <span>-->
+    <!--              <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />-->
+    <!--              <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />-->
+    <!--              <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />-->
+    <!--              <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />-->
+    <!--            </span>-->
+    <!--            <span v-if="data.type === 'db' || data.type === 'sql'">-->
+    <!--              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
+    <!--              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
+    <!--            </span>-->
+    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
+    <!--          </span>-->
+    <!--          <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
+    <!--            <span style="margin-left: 12px;" @click.stop>-->
+    <!--              <el-dropdown trigger="click" size="small" @command="clickMore">-->
+    <!--                <span class="el-dropdown-link">-->
+    <!--                  <el-button-->
+    <!--                    icon="el-icon-more"-->
+    <!--                    type="text"-->
+    <!--                    size="small"-->
+    <!--                  />-->
+    <!--                </span>-->
+    <!--                <el-dropdown-menu slot="dropdown">-->
+    <!--                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">-->
+    <!--                    {{ $t('dataset.rename') }}-->
+    <!--                  </el-dropdown-item>-->
+    <!--                  <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">-->
+    <!--                    {{ $t('dataset.move_to') }}-->
+    <!--                  </el-dropdown-item>-->
+    <!--                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">-->
+    <!--                    {{ $t('dataset.delete') }}-->
+    <!--                  </el-dropdown-item>-->
+    <!--                </el-dropdown-menu>-->
+    <!--              </el-dropdown>-->
+    <!--            </span>-->
+    <!--          </span>-->
+    <!--        </span>-->
+    <!--      </el-tree>-->
+    <!--    </el-col>-->
 
-      <el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
-        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
-          <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="tableForm.name" />
-          </el-form-item>
-          <!--          <el-form-item :label="$t('dataset.mode')" prop="mode">-->
-          <!--            <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>-->
-          <!--            <el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>-->
-          <!--          </el-form-item>-->
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
-          </el-button>
-        </div>
-      </el-dialog>
-
-    </el-col>
+    <el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
+      <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="tableForm.name" />
+        </el-form-item>
+        <!--          <el-form-item :label="$t('dataset.mode')" prop="mode">-->
+        <!--            <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>-->
+        <!--            <el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>-->
+        <!--          </el-form-item>-->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
 
     <!--移动分组、场景-->
     <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
@@ -264,13 +340,21 @@
 </template>
 
 <script>
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
+import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post } from '@/api/dataset/dataset'
+import { authModel } from '@/api/system/sysAuth'
 import GroupMoveSelector from './GroupMoveSelector'
 import DsMoveSelector from './DsMoveSelector'
 
 export default {
   name: 'Group',
   components: { GroupMoveSelector, DsMoveSelector },
+  props: {
+    saveStatus: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
   data() {
     return {
       sceneMode: false,
@@ -322,28 +406,51 @@ export default {
       tDs: {},
       groupMoveConfirmDisabled: true,
       dsMoveConfirmDisabled: true,
-      moveDialogTitle: ''
+      moveDialogTitle: '',
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      },
+      isTreeSearch: false
     }
   },
   computed: {
-    sceneData: function() {
-      this.tableTree()
-      return this.$store.state.dataset.sceneData
-    }
+    // sceneData: function() {
+    //   // this.tableTree()
+    //   // console.log(this.$store.state.dataset.sceneData)
+    //   this.refreshNodeBy(this.currGroup.id)
+    //   return this.$store.state.dataset.sceneData
+    // }
   },
   watch: {
     search(val) {
-      if (val && val !== '') {
-        this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
-      } else {
-        this.tableData = JSON.parse(JSON.stringify(this.tables))
+      // if (val && val !== '') {
+      //   this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
+      // } else {
+      //   this.tableData = JSON.parse(JSON.stringify(this.tables))
+      // }
+      if (this.timer) {
+        clearTimeout(this.timer)
       }
+      this.timer = setTimeout(() => {
+        if (val) {
+          this.searchTree(val)
+          this.isTreeSearch = true
+        } else {
+          this.treeNode(this.groupForm)
+          this.isTreeSearch = false
+        }
+      }, 500)
+    },
+    saveStatus() {
+      this.refreshNodeBy(this.saveStatus.sceneId)
     }
   },
   mounted() {
-    this.tree(this.groupForm)
+    this.treeNode(this.groupForm)
     this.refresh()
-    this.tableTree()
+    // this.tableTree()
   },
   methods: {
     clickAdd(param) {
@@ -422,7 +529,8 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.tree(this.groupForm)
+            // this.tree(this.groupForm)
+            this.refreshNodeBy(group.pid)
           })
         } else {
           // this.$message({
@@ -448,7 +556,8 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.tableTree()
+            // this.tableTree()
+            this.refreshNodeBy(table.sceneId)
             // this.$router.push('/dataset/home')
             this.$emit('switchComponent', { name: '' })
             this.$store.dispatch('dataset/setTable', null)
@@ -476,7 +585,8 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.tree(this.groupForm)
+          // this.tree(this.groupForm)
+          this.refreshNodeBy(data.pid)
         })
       }).catch(() => {
       })
@@ -494,7 +604,8 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.tableTree()
+          // this.tableTree()
+          this.refreshNodeBy(data.sceneId)
           // this.$router.push('/dataset/home')
           this.$emit('switchComponent', { name: '' })
           this.$store.dispatch('dataset/setTable', null)
@@ -523,8 +634,14 @@ export default {
       }
     },
 
-    tree(group) {
-      groupTree(group).then(res => {
+    // tree(group) {
+    //   groupTree(group).then(res => {
+    //     this.tData = res.data
+    //   })
+    // },
+
+    treeNode(group) {
+      post('/dataset/group/treeNode', group).then(res => {
         this.tData = res.data
       })
     },
@@ -546,10 +663,14 @@ export default {
     nodeClick(data, node) {
       // console.log(data);
       // console.log(node);
-      if (data.type === 'scene') {
-        this.sceneMode = true
-        this.currGroup = data
-        this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
+      // if (data.type === 'scene') {
+      //   this.sceneMode = true
+      //   this.currGroup = data
+      //   this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
+      // }
+
+      if (data.type !== 'group') {
+        this.$emit('switchComponent', { name: 'ViewTable', param: data.id })
       }
       // if (node.expanded) {
       //   this.expandedArray.push(data.id)
@@ -569,6 +690,8 @@ export default {
 
     clickAddData(param) {
       // console.log(param);
+      this.currGroup = param.data
+      this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
       switch (param.type) {
         case 'db':
           this.addData('AddDB')
@@ -585,9 +708,10 @@ export default {
       }
     },
 
-    beforeClickAddData(type) {
+    beforeClickAddData(type, data) {
       return {
-        'type': type
+        'type': type,
+        'data': data
       }
     },
 
@@ -640,7 +764,8 @@ export default {
       this.groupForm.pid = this.tGroup.id
       addGroup(this.groupForm).then(res => {
         this.closeMoveGroup()
-        this.tree(this.groupForm)
+        // this.tree(this.groupForm)
+        this.refreshNodeBy(this.groupForm.pid)
       })
     },
     targetGroup(val) {
@@ -664,23 +789,90 @@ export default {
       }
     },
     saveMoveDs() {
-      if (this.tDs && this.tDs.type === 'group') {
-        return
-      }
+      // if (this.tDs && this.tDs.type === 'group') {
+      //   return
+      // }
       this.dsForm.sceneId = this.tDs.id
       this.dsForm.isRename = true
       addTable(this.dsForm).then(res => {
         this.closeMoveDs()
-        this.tableTree()
+        // this.tableTree()
+        this.refreshNodeBy(this.dsForm.sceneId)
       })
     },
     targetDs(val) {
       this.tDs = val
       if (this.tDs.type === 'group') {
-        this.dsMoveConfirmDisabled = true
+        this.dsMoveConfirmDisabled = false
       } else {
         this.dsMoveConfirmDisabled = false
       }
+    },
+
+    loadNode(node, resolve) {
+      if (!this.isTreeSearch) {
+        if (node.level > 0) {
+          this.tables = []
+          this.tableData = []
+          if (node.data.id) {
+            post('/dataset/table/listAndGroup', {
+              sort: 'type asc,name asc,create_time desc',
+              sceneId: node.data.id
+            }).then(res => {
+              this.tables = res.data
+              this.tableData = JSON.parse(JSON.stringify(this.tables))
+              resolve(this.tableData)
+            })
+          }
+        }
+      }
+    },
+
+    refreshNodeBy(id) {
+      if (!id || id === '0') {
+        this.treeNode(this.groupForm)
+      } else {
+        const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
+        node.loaded = false
+        node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
+      }
+    },
+
+    searchTree(val) {
+      const queryCondition = {
+        withExtend: 'parent',
+        modelType: 'dataset',
+        name: val
+      }
+      authModel(queryCondition).then(res => {
+        debugger
+        this.tData = this.buildTree(res.data)
+      })
+    },
+
+    buildTree(arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el[this.defaultProps.id]] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点 ###
+        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el[this.defaultProps.parentId]]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
+
+        // 设置展开节点 如果没有子节点则不进行展开
+        if (parentEl.children.length > 0) {
+          this.expandedKey.push(parentEl[this.defaultProps.id])
+        }
+      })
+      return roots
     }
   }
 }
@@ -762,4 +954,11 @@ export default {
   .dialog-css >>> .el-dialog__body {
     padding: 10px 20px 20px;
   }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
 </style>
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 22f9d42af4..a7eea67c1a 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -2,12 +2,12 @@
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
     <de-aside-container>
-      <group @switchComponent="switchComponent" />
+      <group :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
 
     <de-main-container>
       <!--<router-view/>-->
-      <component :is="component" :param="param" @switchComponent="switchComponent" />
+      <component :is="component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
     </de-main-container>
   </de-container>
 </template>
@@ -33,7 +33,8 @@ export default {
   data() {
     return {
       component: DataHome,
-      param: {}
+      param: {},
+      saveStatus: null
     }
   },
   mounted() {
@@ -65,6 +66,10 @@ export default {
           this.component = DataHome
           break
       }
+    },
+
+    saveSuccess(val) {
+      this.saveStatus = val
     }
   }
 }