Merge remote-tracking branch 'origin/main' into main

2021-06-21 12:39:34 +08:00 · 2021-06-21 12:39:34 +08:00 · b8d07ce00b
commit b8d07ce00b
parent a7b67c5c64 40c76c7fb8
38 changed files with 1675 additions and 431 deletions
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,6 @@
+[submodule "dataease-plugins"]
+	path = dataease-plugins
+	url = git@github.com:dataease/dataease-plugins.git
+[submodule "dataease-plugin-xpack"]
+	path = dataease-plugin-xpack
+	url = git@github.com:dataease/dataease-plugin-xpack.git
--- a/README.md
+++ b/README.md
@ -155,7 +155,7 @@ curl -sSL https://github.com/dataease/dataease/releases/latest/download/quick_st
   <tr height="18" style='height:18.00pt;'>
    <td class="xl67" height="36" rowspan="2" style='height:36.00pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str>数据源</td>
    <td class="xl68" rowspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str>数据源管理</td>
-    <td class="xl70" x:str>支持 MySQL 和 SQL Server 类型的数据源</td>
+    <td class="xl70" x:str>支持 MySQL 数据源</td>
   </tr>
   <tr height="18" style='height:18.00pt;'>
    <td class="xl70" x:str>支持对数据源有效性校验</td>
@ -184,15 +184,15 @@ curl -sSL https://github.com/dataease/dataease/releases/latest/download/quick_st

 ## 技术栈

-   后端: [Spring Boot](https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm)；
+-   后端: [Spring Boot](https://spring.io/projects/spring-boot)；
 -   前端: [Vue.js](https://vuejs.org/)；
 -   中间件: [MySQL](https://www.mysql.com/)；
-   数据处理: [Kettle](https://community.hitachivantara.com/s/article/data-integration-kettle/)、[Apache Doris](https://doris.apache.org/)；
+-   数据处理: [Kettle](https://github.com/pentaho/pentaho-kettle)、[Apache Doris](https://github.com/apache/incubator-doris/)；
 -   基础设施: [Docker](https://www.docker.com/)。

 ## 致谢

-   [Kettle](https://community.hitachivantara.com/s/article/data-integration-kettle/)：DataEase 使用了 Kettle 进行数据处理工作；
+-   [Kettle](https://github.com/pentaho/pentaho-kettle/)：DataEase 使用了 Kettle 进行数据处理工作；
 -   [Apache Doris](https://doris.apache.org/)：DataEase 使用了 Apache Doris 进行快速的数据分析；
 -   [Element](https://element.eleme.cn/)：感谢 Element 提供的优秀组件库。

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

--- 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);
--- 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);
--- 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();
    }
 }
--- 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);
--- 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;
 }
--- 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;
 }
--- a/backend/src/main/java/io/dataease/service/ScheduleService.java
+++ b/backend/src/main/java/io/dataease/service/ScheduleService.java
@ -30,17 +30,21 @@ public class ScheduleService {
                    scheduleManager.getDefaultJobDataMap(datasetTableTask.getTableId(), datasetTableTask.getCron(), datasetTableTask.getId(), datasetTableTask.getType()));
        } else if (StringUtils.equalsIgnoreCase(datasetTableTask.getRate(), ScheduleType.CRON.toString())) {
            Date endTime;
-            if (datasetTableTask.getEndTime() == null || datasetTableTask.getEndTime() == 0) {
-                endTime = null;
-            } else {
-                endTime = new Date(datasetTableTask.getEndTime());
+            if (StringUtils.equalsIgnoreCase(datasetTableTask.getEnd(), "1")) {
+                if (datasetTableTask.getEndTime() == null || datasetTableTask.getEndTime() == 0) {
+                    endTime = null;
+                } else {
+                    endTime = new Date(datasetTableTask.getEndTime());
 //                if (endTime.before(new Date())) {
 //                    return;
 //                }
-                if (endTime.before(new Date())) {
-                    deleteSchedule(datasetTableTask);
-                    return;
+                    if (endTime.before(new Date())) {
+                        deleteSchedule(datasetTableTask);
+                        return;
+                    }
                }
+            } else {
+                endTime = null;
            }

            scheduleManager.addOrUpdateCronJob(new JobKey(datasetTableTask.getId(), datasetTableTask.getTableId()),
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@ -89,6 +89,16 @@ public class ChartGroupService {
        return result;
    }

+    public List<ChartGroupDTO> treeNode(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<String> getAllId(List<ChartGroupDTO> list, List<String> ids) {
        for (ChartGroupDTO dto : list) {
            ids.add(dto.getId());
--- 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,31 @@ 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()));
+        chartGroupRequest.setSort("name asc,create_time desc");
+        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);
    }
--- 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);
--- 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,32 @@ 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()));
+        datasetGroup.setSort("name asc,create_time desc");
+        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);
    }
--- a/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java
@ -763,12 +763,11 @@ public class ExtractDataService {
        userDefinedJavaClassMeta.setFieldInfo(fields);
        List<UserDefinedJavaClassDef> definitions = new ArrayList<UserDefinedJavaClassDef>();
        String tmp_code = code.replace("alterColumnTypeCode", needToChangeColumnType).replace("Column_Fields", String.join(",", datasetTableFields.stream().map(DatasetTableField::getOriginName).collect(Collectors.toList())));
+        tmp_code = tmp_code.replace("handleWraps", handleWraps);
        if(isExcel){
            tmp_code = tmp_code.replace("handleExcelIntColumn", handleExcelIntColumn);
-            tmp_code = tmp_code.replace("handleExcelWraps", handleExcelWraps);
        }else {
            tmp_code = tmp_code.replace("handleExcelIntColumn", "");
-            tmp_code = tmp_code.replace("handleExcelWraps", "");
        }
        UserDefinedJavaClassDef userDefinedJavaClassDef = new UserDefinedJavaClassDef(UserDefinedJavaClassDef.ClassType.TRANSFORM_CLASS, "Processor", tmp_code);

@ -861,13 +860,12 @@ public class ExtractDataService {
            "            }catch (Exception e){}\n" +
            "        }";

-    private static String handleExcelWraps = "       \n" +
-            "        if(tmp != null ){\n" +
-            "          tmp = tmp.trim();\n" +
-            "          tmp = tmp.replaceAll(\"\\r\",\" \");\n" +
-            "          tmp = tmp.replaceAll(\"\\n\",\" \");\n" +
-            "          get(Fields.Out, filed).setValue(r, tmp);\n" +
-            "        }";
+    private static String handleWraps = "        if(tmp != null && ( tmp.contains(\"\\r\") || tmp.contains(\"\\n\"))){\n" +
+            "\t\t\ttmp = tmp.trim();\n" +
+            "            tmp = tmp.replaceAll(\"\\r\",\" \");\n" +
+            "            tmp = tmp.replaceAll(\"\\n\",\" \");\n" +
+            "            get(Fields.Out, filed).setValue(r, tmp);\n" +
+            "        } ";

    private static String code = "import org.pentaho.di.core.row.ValueMetaInterface;\n" +
            "import java.util.List;\n" +
@ -898,7 +896,7 @@ public class ExtractDataService {
            "    List<String> fileds = Arrays.asList(\"Column_Fields\".split(\",\"));\n" +
            "    for (String filed : fileds) {\n" +
            "        String tmp = get(Fields.In, filed).getString(r);\n" +
-            "handleExcelWraps \n" +
+            "handleWraps \n" +
            "alterColumnTypeCode \n" +
            "handleExcelIntColumn \n" +
            "        str = str + tmp;\n" +
--- a/1
+++ b/1
@ -0,0 +1 @@
+Subproject commit 9879b705aa4a5105056109ecf5b9da70b783969d
--- a/1
+++ b/1
@ -0,0 +1 @@
+Subproject commit 2541de3d2c82f37dcf9916fda70ada0ca3fc6132
--- a/frontend/src/icons/svg/datasource.svg
+++ b/frontend/src/icons/svg/datasource.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1624249976156" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2309" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.04 483.584l193.706667 114.218667v227.242666L279.04 938.666667 85.333333 825.045333v-227.242666l193.706667-114.218667z m465.92 0L938.666667 597.802667v227.242666L744.96 938.666667l-193.706667-113.621334v-227.242666l193.706667-114.218667zM279.04 567.381333L156.586667 639.573333v143.573334l122.453333 71.765333 122.453333-71.765333V639.573333l-122.453333-72.192z m465.92 0l-122.453333 72.192v143.573334l122.453333 71.765333 122.368-71.765333V639.573333l-122.410667-72.149333zM512 85.333333l193.706667 113.621334v227.242666L512 540.416 318.293333 426.197333V198.954667L512 85.333333z m0 83.669334L389.546667 240.853333v143.530667L512 456.533333l122.410667-72.192V240.853333l-122.453334-71.850666z" p-id="2310" fill="#707070"></path></svg>
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@ -38,7 +38,7 @@

        <lang-select class="right-menu-item hover-effect" />
        <div style="height: 100%;padding: 0 8px;" class="right-menu-item hover-effect">
-          <a href="https://de-docs.fit2cloud.com/" target="_blank" style="display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;">
+          <a href="https://docs.dataease.io/" target="_blank" style="display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;">
            <svg-icon icon-class="docs" />
          </a>
        </div>
--- a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
@ -0,0 +1,85 @@
+<template>
+  <el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
+    <el-tree
+      :data="tData"
+      node-key="id"
+      :expand-on-click-node="false"
+      highlight-current
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+        <span style="display: flex;flex: 1;width: 0;">
+          <span v-if="data.type === 'scene'">
+            <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>
+    </el-tree>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/chart/chart'
+
+export default {
+  name: 'ChartMoveSelector',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tData: [],
+      currGroup: '',
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      targetGroup: {}
+    }
+  },
+  watch: {
+    'item': function() {
+      this.tree(this.groupForm)
+    }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+  },
+  methods: {
+    tree(group) {
+      post('/chart/group/tree', group).then(res => {
+        this.tData = res.data
+      })
+    },
+    nodeClick(data, node) {
+      this.targetGroup = data
+      this.$emit('targetDs', data)
+    },
+    treeClass(data, node) {
+      if (data.id === this.item.id) {
+        node.visible = false
+      }
+      return 'custom-tree-node'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+</style>
--- a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
@ -0,0 +1,92 @@
+<template>
+  <el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
+    <el-tree
+      :data="tData"
+      node-key="id"
+      :expand-on-click-node="false"
+      highlight-current
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+        <span style="display: flex;flex: 1;width: 0;">
+          <span v-if="data.type === 'scene'">
+            <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>
+    </el-tree>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/chart/chart'
+
+export default {
+  name: 'GroupMoveSelector',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tData: [],
+      currGroup: '',
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      targetGroup: {}
+    }
+  },
+  watch: {
+    'item': function() {
+      this.tree(this.groupForm)
+    }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+  },
+  methods: {
+    tree(group) {
+      post('/chart/group/tree', group).then(res => {
+        this.tData = [{
+          id: '0',
+          name: this.$t('dataset.dataset_group'),
+          pid: '0',
+          privileges: 'grant,manage,use',
+          type: 'group',
+          children: res.data
+        }]
+      })
+    },
+    nodeClick(data, node) {
+      this.targetGroup = data
+      this.$emit('targetGroup', data)
+    },
+    treeClass(data, node) {
+      if (data.id === this.item.id) {
+        node.visible = false
+      }
+      return 'custom-tree-node'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+</style>
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@ -37,9 +37,10 @@
              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
                <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
              </el-form-item>
-              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">
-                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
-              </el-form-item>
+              <!--              暂时不支持该功能-->
+              <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
+              <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
+              <!--              </el-form-item>-->
            </div>

            <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@ -117,23 +117,24 @@ export default {
      }
    },
    calcHeight() {
-      const that = this
-      this.$nextTick(function() {
-        if (that.$refs.tableContainer) {
-          const currentHeight = that.$refs.tableContainer.offsetHeight
-          const tableMaxHeight = currentHeight - that.$refs.title.offsetHeight
-          let tableHeight
-          if (that.chart.data) {
-            tableHeight = (that.chart.data.tableRow.length + 2) * 36
-          } else {
-            tableHeight = 0
+      this.$nextTick(() => {
+        setTimeout(() => {
+          if (this.$refs.tableContainer) {
+            const currentHeight = this.$refs.tableContainer.offsetHeight
+            const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight
+            let tableHeight
+            if (this.chart.data) {
+              tableHeight = (this.chart.data.tableRow.length + 2) * 36
+            } else {
+              tableHeight = 0
+            }
+            if (tableHeight > tableMaxHeight) {
+              this.height = tableMaxHeight + 'px'
+            } else {
+              this.height = 'auto'
+            }
          }
-          if (tableHeight > tableMaxHeight) {
-            that.height = tableMaxHeight + 'px'
-          } else {
-            that.height = 'auto'
-          }
-        }
+        }, 100)
      })
    },
    initStyle() {
@ -150,15 +151,16 @@ export default {
          this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
        }
        this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
-        if (customAttr.color.tableStripe) {
-          // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
-          if (this.chart.customStyle) {
-            const customStyle = JSON.parse(this.chart.customStyle)
-            if (customStyle.background) {
-              this.table_item_class_stripe.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
-            }
-          }
-        }
+        // 暂不支持斑马纹
+        // if (customAttr.color.tableStripe) {
+        //   // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
+        //   if (this.chart.customStyle) {
+        //     const customStyle = JSON.parse(this.chart.customStyle)
+        //     if (customStyle.background) {
+        //       this.table_item_class_stripe.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        //     }
+        //   }
+        // }
      }
      if (this.chart.customStyle) {
        const customStyle = JSON.parse(this.chart.customStyle)
--- 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,23 +38,31 @@
      <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 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>
+                  <i class="el-icon-folder" />
                </span>
                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
              </span>
@ -66,11 +77,14 @@
                      />
                    </span>
                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
+                      <el-dropdown-item icon="el-icon-folder-add" :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>
@ -88,6 +102,9 @@
                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
                        {{ $t('chart.rename') }}
                      </el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">
+                        {{ $t('dataset.move_to') }}
+                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
                        {{ $t('chart.delete') }}
                      </el-dropdown-item>
@ -96,6 +113,36 @@
                </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-right" :command="beforeClickMore('moveDs',data,node)">
+                        {{ $t('dataset.move_to') }}
+                      </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,116 +162,175 @@
    </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>
+      <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>

-      <!--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="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
+      <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{ $t('dataset.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>
+    <!--移动视图-->
+    <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveDs" :show-close="false" width="30%" class="dialog-css">
+      <chart-move-selector :item="dsForm" @targetDs="targetDs" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeMoveDs()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{ $t('dataset.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
  </el-col>
 </template>

 <script>
 import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
+import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
+import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
 import {
  DEFAULT_COLOR_CASE,
  DEFAULT_LABEL,
@ -239,7 +345,14 @@ import {

 export default {
  name: 'Group',
-  components: { TableSelector },
+  components: { TableSelector, GroupMoveSelector, ChartMoveSelector },
+  props: {
+    saveStatus: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
  data() {
    return {
      sceneMode: false,
@ -278,14 +391,34 @@ export default {
      selectTableFlag: false,
      table: {},
      tables: [],
-      chartName: this.$t('chart.chartName')
+      chartName: this.$t('chart.chartName'),
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      },
+      dsForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      moveGroup: false,
+      tGroup: {},
+      moveDs: false,
+      tDs: {},
+      groupMoveConfirmDisabled: true,
+      dsMoveConfirmDisabled: true,
+      moveDialogTitle: ''
    }
  },
  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 +427,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) {
@ -323,7 +464,12 @@ export default {
          this.groupForm = JSON.parse(JSON.stringify(param.data))
          break
        case 'move':
-
+          this.moveTo(param.data)
+          this.groupForm = JSON.parse(JSON.stringify(param.data))
+          break
+        case 'moveDs':
+          this.moveToDs(param.data)
+          this.dsForm = JSON.parse(JSON.stringify(param.data))
          break
        case 'delete':
          this.delete(param.data)
@ -369,7 +515,7 @@ export default {
              type: 'success',
              showClose: true
            })
-            this.groupTree(this.groupForm)
+            this.treeNode(this.groupForm)
          })
        } else {
          // this.$message({
@ -392,7 +538,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 +567,7 @@ export default {
            message: this.$t('chart.delete_success'),
            showClose: true
          })
-          this.groupTree(this.groupForm)
+          this.treeNode(this.groupForm)
        })
      }).catch(() => {
      })
@ -438,7 +585,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 +621,12 @@ export default {
      })
    },

+    treeNode(group) {
+      post('/chart/group/treeNode', group).then(res => {
+        this.data = res.data
+      })
+    },
+
    chartTree() {
      this.tables = []
      this.chartData = []
@ -488,12 +642,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 +673,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 +746,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 +775,98 @@ 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() // 主动调用展开节点方法，重新查询该节点下的所有子节点
+      }
+    },
+
+    moveTo(data) {
+      this.moveGroup = true
+      this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
+    },
+    closeMoveGroup() {
+      this.moveGroup = false
+      this.groupForm = {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+    saveMoveGroup() {
+      this.groupForm.pid = this.tGroup.id
+      post('/chart/group/save', this.groupForm).then(res => {
+        this.closeMoveGroup()
+        // this.tree(this.groupForm)
+        this.refreshNodeBy(this.groupForm.pid)
+      })
+    },
+    targetGroup(val) {
+      this.tGroup = val
+      this.groupMoveConfirmDisabled = false
+    },
+
+    moveToDs(data) {
+      this.moveDs = true
+      this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
+    },
+    closeMoveDs() {
+      this.moveDs = false
+      this.dsForm = {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+    saveMoveDs() {
+      // if (this.tDs && this.tDs.type === 'group') {
+      //   return
+      // }
+      this.dsForm.sceneId = this.tDs.id
+      post('/chart/view/save', this.dsForm).then(res => {
+        this.closeMoveDs()
+        // this.tableTree()
+        this.refreshNodeBy(this.dsForm.sceneId)
+      })
+    },
+    targetDs(val) {
+      this.tDs = val
+      if (this.tDs.type === 'group') {
+        this.dsMoveConfirmDisabled = false
+      } else {
+        this.dsMoveConfirmDisabled = false
+      }
    }
  }
 }
--- 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
    }
  }
 }
--- 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">
@ -471,17 +471,19 @@ export default {
      }
    },
    initTableField(id) {
-      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-        this.dimension = response.data.dimension
-        this.quota = response.data.quota
-      }).catch(err => {
-        this.resetView()
-        this.httpRequest.status = err.response.data.success
-        this.httpRequest.msg = err.response.data.message
-        return true
-      })
+      if (this.table) {
+        post('/dataset/table/getFieldsFromDE', this.table).then(response => {
+          this.dimension = response.data.dimension
+          this.quota = response.data.quota
+        }).catch(err => {
+          this.resetView()
+          this.httpRequest.status = err.response.data.success
+          this.httpRequest.msg = err.response.data.message
+          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 +551,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 +802,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 +926,10 @@ export default {
        yAxis: [],
        type: ''
      }
+    },
+
+    refreshGroup(view) {
+      this.$emit('saveSuccess', view)
    }
  }
 }
--- 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 {
--- 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()
      })
    },
--- 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()
      })
    },
--- 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()
      })
    },
--- 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()
      })
    },
--- 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)
+      }
    }
  }
 }
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@ -0,0 +1,472 @@
+<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
+            })
+            this.$emit('getTable', {})
+          }
+        })
+      } 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>
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@ -57,9 +57,9 @@
              <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
              <span class="field-class">{{ $t('dataset.time') }}</span>
            </span>
-            <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3">
-              <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3" icon-class="field_value" class="field-icon-value" />
-              <span v-if="scope.row.deExtractType === 2" class="field-class">{{ $t('dataset.value') }}</span>
+            <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
+              <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
+              <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
              <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
            </span>
          </span>
--- 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'
      },
--- 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,23 +38,31 @@
      <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 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>
+                  <i class="el-icon-folder" />
                </span>
                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
              </span>
@ -66,11 +77,41 @@
                      />
                    </span>
                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
-                        {{ $t('dataset.group') }}
+                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('group',data,node)">
+                        <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-circle-plus">
+                        <!--                        {{ $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 +140,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,130 +198,129 @@
    </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-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>
-      </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>
+      </div>
+    </el-dialog>

-      <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="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
      <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
      <div slot="footer" class="dialog-footer">
@ -264,13 +343,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 +409,53 @@ export default {
      tDs: {},
      groupMoveConfirmDisabled: true,
      dsMoveConfirmDisabled: true,
-      moveDialogTitle: ''
+      moveDialogTitle: '',
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf',
+        id: 'id',
+        parentId: 'pid'
+      },
+      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 +534,8 @@ export default {
              type: 'success',
              showClose: true
            })
-            this.tree(this.groupForm)
+            // this.tree(this.groupForm)
+            this.refreshNodeBy(group.pid)
          })
        } else {
          // this.$message({
@ -448,7 +561,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 +590,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 +609,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 +639,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 +668,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 +695,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 +713,10 @@ export default {
      }
    },

-    beforeClickAddData(type) {
+    beforeClickAddData(type, data) {
      return {
-        'type': type
+        'type': type,
+        'data': data
      }
    },

@ -640,7 +769,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 +794,89 @@ 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 => {
+        this.tData = this.buildTree(res.data)
+      })
+    },
+
+    buildTree(arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el[this.treeProps.id]] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点 ###
+        if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el[this.treeProps.parentId]]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
+
+        // 设置展开节点 如果没有子节点则不进行展开
+        if (parentEl.children.length > 0) {
+          this.expandedArray.push(parentEl[this.treeProps.id])
+        }
+      })
+      return roots
    }
  }
 }
@ -762,4 +958,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>
--- 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
    }
  }
 }
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@ -32,7 +32,7 @@
            <span slot-scope="{ node, data }" class="custom-tree-node-list father">
              <span style="display: flex; flex: 1 1 0%; width: 0px;">
                <span v-if="data.type !== 'folder'">
-                  <svg-icon icon-class="panel" class="ds-icon-scene" />
+                  <svg-icon icon-class="datasource" class="ds-icon-scene" />
                </span>
                <span v-if="data.type === 'folder'">
                  <i class="el-icon-folder" />
				`@ -0,0 +1 @@`
				`Subproject commit 9879b705aa4a5105056109ecf5b9da70b783969d`
				`@ -0,0 +1 @@`
				`Subproject commit 2541de3d2c82f37dcf9916fda70ada0ca3fc6132`
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1624249976156" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2309" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.04 483.584l193.706667 114.218667v227.242666L279.04 938.666667 85.333333 825.045333v-227.242666l193.706667-114.218667z m465.92 0L938.666667 597.802667v227.242666L744.96 938.666667l-193.706667-113.621334v-227.242666l193.706667-114.218667zM279.04 567.381333L156.586667 639.573333v143.573334l122.453333 71.765333 122.453333-71.765333V639.573333l-122.453333-72.192z m465.92 0l-122.453333 72.192v143.573334l122.453333 71.765333 122.368-71.765333V639.573333l-122.410667-72.149333zM512 85.333333l193.706667 113.621334v227.242666L512 540.416 318.293333 426.197333V198.954667L512 85.333333z m0 83.669334L389.546667 240.853333v143.530667L512 456.533333l122.410667-72.192V240.853333l-122.453334-71.850666z" p-id="2310" fill="#707070"></path></svg>