diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
new file mode 100644
index 0000000000..e7975eb351
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
@@ -0,0 +1,17 @@
+package io.dataease.base.mapper.ext;
+
+import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.panel.PanelGroupDTO;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+public interface ExtPanelGroupMapper {
+
+    List<PanelGroupDTO> panelGroupList(PanelGroupRequest request);
+
+    //会级联删除pid 下的所有数据
+    int deleteCircle(@Param("pid") String pid);
+
+
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
new file mode 100644
index 0000000000..76d4aaf26a
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelGroupMapper">
+
+  <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO" extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
+    <result column="label" jdbcType="VARCHAR" property="label"/>
+  </resultMap>
+
+  <select id="panelGroupList" resultMap="BaseResultMapDTO">
+        select panel_group.*,panel_group.name as label from panel_group
+        <where>
+          <if test="name != null">
+            and panel_group.name  like CONCAT('%', #{name},'%')
+          </if>
+          <if test="nodeType != null">
+            and panel_group.node_type = #{nodeType}
+          </if>
+          <if test="panelType != null">
+            and panel_group.panel_type = #{panelType}
+          </if>
+          <if test="id != null">
+            and panel_group.id  = #{id}
+          </if>
+          <if test="pid != null">
+            and panel_group.pid = #{pid}
+          </if>
+          <if test="level != null">
+            and panel_group.level = #{level}
+          </if>
+        </where>
+    <if test="sort != null">
+      order by ${sort}
+    </if>
+    </select>
+
+  <delete id="deleteCircle">
+        delete from panel_group where FIND_IN_SET(panel_group.id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+    </delete>
+</mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index 6b287ece43..e3631bdfa0 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -1,14 +1,46 @@
 package io.dataease.controller.panel;
 
+import io.dataease.base.domain.DatasetGroup;
+import io.dataease.controller.request.dataset.DataSetGroupRequest;
+import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.panel.PanelGroupService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
 /**
  * Author: wangjiahao
  * Date: 2021-03-05
  * Description:
  */
+@RestController
+@RequestMapping("panel/group")
 public class PanelGroupController {
 
+    @Resource
+    private PanelGroupService panelGroupService;
 
+    @PostMapping("/tree")
+    public List<PanelGroupDTO> tree(@RequestBody PanelGroupRequest request) {
+        request.setLevel(0);
+        return panelGroupService.tree(request);
+    }
 
+    @PostMapping("/defaultTree")
+    public List<PanelGroupDTO> defaultTree(@RequestBody PanelGroupRequest request) {
+        return panelGroupService.getDefaultTree(request);
+    }
 
+    @PostMapping("/save")
+    public PanelGroupDTO save(@RequestBody PanelGroupRequest request) {
+        return panelGroupService.save(request);
+    }
 
+    @PostMapping("/deleteCircle/{id}")
+    public void deleteCircle(@PathVariable String id) {
+        panelGroupService.deleteCircle(id);
+    }
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java b/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java
new file mode 100644
index 0000000000..d17c4e8d41
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java
@@ -0,0 +1,21 @@
+package io.dataease.controller.request.panel;
+
+import io.dataease.base.domain.PanelGroup;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@Data
+public class PanelGroupRequest extends PanelGroup {
+    private String sort;
+
+    public PanelGroupRequest() {
+    }
+
+    public PanelGroupRequest(String pid) {
+        super.setPid(pid);
+    }
+}
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
index a551e533e4..eb1c597027 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
@@ -2,6 +2,7 @@ package io.dataease.dto.panel;
 
 import io.dataease.base.domain.PanelGroup;
 import io.dataease.dto.dataset.DataSetGroupDTO;
+import lombok.Data;
 
 import java.util.List;
 
@@ -10,25 +11,10 @@ import java.util.List;
  * Date: 2021-03-05
  * Description:
  */
+@Data
 public class PanelGroupDTO extends PanelGroup {
 
     private String label;
 
     private List<PanelGroupDTO> children;
-
-    public String getLabel() {
-        return label;
-    }
-
-    public void setLabel(String label) {
-        this.label = label;
-    }
-
-    public List<PanelGroupDTO> getChildren() {
-        return children;
-    }
-
-    public void setChildren(List<PanelGroupDTO> children) {
-        this.children = children;
-    }
 }
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
index db6beb9dc3..e82f5ab56f 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@@ -1,9 +1,20 @@
 package io.dataease.service.panel;
 
+import io.dataease.base.domain.DatasetGroup;
 import io.dataease.base.mapper.PanelGroupMapper;
+import io.dataease.base.mapper.ext.ExtPanelGroupMapper;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.panel.PanelGroupDTO;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
+import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
 
 /**
  * Author: wangjiahao
@@ -15,9 +26,47 @@ public class PanelGroupService {
 
     @Resource
     private PanelGroupMapper panelGroupMapper;
+    @Resource
+    private ExtPanelGroupMapper extPanelGroupMapper;
+
+    public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
+        List<PanelGroupDTO> panelGroupDTOList = extPanelGroupMapper.panelGroupList(panelGroupRequest);
+        getTreeChildren(panelGroupDTOList);
+        return panelGroupDTOList;
+    }
+
+    public void getTreeChildren(List<PanelGroupDTO> parentPanelGroupDTO){
+        Optional.ofNullable(parentPanelGroupDTO).ifPresent(parent -> parent.forEach(panelGroupDTO -> {
+            List<PanelGroupDTO> panelGroupDTOChildren = extPanelGroupMapper.panelGroupList(new PanelGroupRequest(panelGroupDTO.getId()));
+            panelGroupDTO.setChildren(panelGroupDTOChildren);
+            getTreeChildren(panelGroupDTOChildren);
+        }));
+    }
+
+    public List<PanelGroupDTO> getDefaultTree(PanelGroupRequest panelGroupRequest){
+        return extPanelGroupMapper.panelGroupList(panelGroupRequest);
+    }
 
 
+    public PanelGroupDTO save(PanelGroupRequest request) {
+        if (StringUtils.isEmpty(request.getId())) {
+            request.setId(UUID.randomUUID().toString());
+            request.setCreateTime(System.currentTimeMillis());
+            panelGroupMapper.insert(request);
+        } else {
+            panelGroupMapper.updateByPrimaryKey(request);
+        }
+        PanelGroupDTO panelGroupDTO = new PanelGroupDTO();
+        BeanUtils.copyBean(panelGroupDTO, request);
+        panelGroupDTO.setLabel(request.getName());
+        return panelGroupDTO;
+    }
 
 
+    public void deleteCircle(String id){
+        Assert.notNull(id, "id cannot be null");
+        extPanelGroupMapper.deleteCircle(id);
+    }
+
 
 }
diff --git a/backend/src/main/resources/db/migration/V12__panel_table.sql b/backend/src/main/resources/db/migration/V12__panel_table.sql
index 3864101c11..7858d9f9ed 100644
--- a/backend/src/main/resources/db/migration/V12__panel_table.sql
+++ b/backend/src/main/resources/db/migration/V12__panel_table.sql
@@ -32,4 +32,31 @@ CREATE TABLE `panel_view` (
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
-SET FOREIGN_KEY_CHECKS = 1;
\ No newline at end of file
+SET FOREIGN_KEY_CHECKS = 1;
+
+
+
+CREATE DEFINER=`root`@`%` FUNCTION `GET_PANEL_CHILDREN_CHILDREN`(parentId varchar(8000)) RETURNS varchar(8000) CHARSET utf8
+BEGIN
+
+DECLARE oTemp VARCHAR(8000);
+
+DECLARE oTempChild VARCHAR(8000);
+
+SET oTemp = '';
+
+SET oTempChild = CAST(parentId AS CHAR);
+
+WHILE oTempChild IS NOT NULL
+
+DO
+
+SET oTemp = CONCAT(oTemp,',',oTempChild);
+
+SELECT GROUP_CONCAT(id) INTO oTempChild FROM panel_group WHERE FIND_IN_SET(pid,oTempChild) > 0;
+
+END WHILE;
+
+RETURN oTemp;
+
+END
\ No newline at end of file
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index a9a68dbe9d..ce6a8a33ad 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -1,8 +1,26 @@
 import request from '@/utils/request'
 
+export function defaultTree(data) {
+  return request({
+    url: '/panel/group/defaultTree',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function groupTree(data) {
+  return request({
+    url: '/panel/group/tree',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
 export function loadTable(data) {
   return request({
-    url: '/dataset/table/list',
+    url: '/panel/table/list',
     method: 'post',
     data
   })
@@ -10,14 +28,14 @@ export function loadTable(data) {
 
 export function getScene(sceneId) {
   return request({
-    url: '/dataset/group/getScene/' + sceneId,
+    url: '/panel/group/getScene/' + sceneId,
     method: 'post'
   })
 }
 
 export function addGroup(data) {
   return request({
-    url: '/dataset/group/save',
+    url: '/panel/group/save',
     method: 'post',
     data
   })
@@ -25,14 +43,14 @@ export function addGroup(data) {
 
 export function delGroup(groupId) {
   return request({
-    url: '/dataset/group/delete/' + groupId,
+    url: '/panel/group/deleteCircle/' + groupId,
     method: 'post'
   })
 }
 
 export function addTable(data) {
   return request({
-    url: '/dataset/table/update',
+    url: '/panel/table/update',
     method: 'post',
     data
   })
@@ -40,19 +58,11 @@ export function addTable(data) {
 
 export function delTable(tableId) {
   return request({
-    url: '/dataset/table/delete/' + tableId,
+    url: '/panel/table/delete/' + tableId,
     method: 'post'
   })
 }
 
-export function groupTree(data) {
-  return request({
-    url: '/dataset/group/tree',
-    method: 'post',
-    data
-  })
-}
-
 export function listDatasource() {
   return request({
     url: '/datasource/list',
@@ -62,14 +72,14 @@ export function listDatasource() {
 
 export function getTable(id) {
   return request({
-    url: '/dataset/table/get/' + id,
+    url: '/panel/table/get/' + id,
     method: 'post'
   })
 }
 
 export function getPreviewData(data) {
   return request({
-    url: '/dataset/table/getPreviewData',
+    url: '/panel/table/getPreviewData',
     method: 'post',
     data
   })
@@ -77,14 +87,14 @@ export function getPreviewData(data) {
 
 export function fieldList(id) {
   return request({
-    url: '/dataset/field/list/' + id,
+    url: '/panel/field/list/' + id,
     method: 'post'
   })
 }
 
 export function batchEdit(data) {
   return request({
-    url: '/dataset/field/batchEdit',
+    url: '/panel/field/batchEdit',
     method: 'post',
     data
   })
@@ -98,4 +108,4 @@ export function post(url, data) {
   })
 }
 
-export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
+export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree,defaultTree }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f1712eb1ec..fa806ca647 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -683,10 +683,10 @@ export default {
   },
   panel: {
     datalist: '视图列表',
-    add_group: '添加分组',
-    add_scene: '添加场景',
-    group: '分组',
-    scene: '场景',
+    group:'目录',
+    panel:'仪表盘',
+    groupAdd:'新建目录',
+    panelAdd:'新建仪表盘',
     delete: '删除',
     move_to: '移动到',
     rename: '重命名',
@@ -696,31 +696,7 @@ export default {
     confirm: '确认',
     cancel: '取消',
     search: '搜索',
-    back: '返回',
-    add_table: '添加表',
-    process: '进度',
-    add_chart: '添加视图',
-    db_data: '数据库表',
-    sql_data: 'SQL数据集',
-    excel_data: 'Excel数据集',
-    custom_data: '自助数据集',
-    pls_slc_tbl_left: '请从左侧选视图',
-    add_db_table: '添加数据库表',
-    pls_slc_data_source: '请选择数据库连接',
-    table: '表',
-    edit: '编辑',
-    create_view: '创建试图',
-    data_preview: '数据预览',
-    dimension: '维度',
-    quota: '指标',
-    title: '标题',
-    show: '显示',
-    chart_type: '图表类型',
-    shape_attr: '图形属性',
-    module_style: '组件样式',
-    result_filter: '结果过滤器',
-    x_axis: '横轴',
-    y_axis: '纵轴',
-    chart: '视图'
+    back: '返回'
+
   }
 }
diff --git a/frontend/src/views/panel/group/Group.vue b/frontend/src/views/panel/group/Group.vue
deleted file mode 100644
index 9953cd0817..0000000000
--- a/frontend/src/views/panel/group/Group.vue
+++ /dev/null
@@ -1,605 +0,0 @@
-<template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
-    <!-- group -->
-    <el-col v-if="!sceneMode">
-      <el-row>
-        <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
-          {{ $t('dataset.add_group') }}
-        </el-button>
-        <el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add('scene')">
-          {{ $t('dataset.add_scene') }}
-        </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>
-
-      <el-col class="custom-tree-container">
-        <div class="block">
-          <el-tree
-            :default-expanded-keys="expandedArray"
-            :data="tData"
-            node-key="id"
-            :expand-on-click-node="true"
-            @node-click="nodeClick"
-          >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
-              <span>
-                <span v-if="data.type === 'scene'">
-                  <el-button
-                    icon="el-icon-folder"
-                    type="text"
-                    size="mini"
-                  />
-                </span>
-                <span style="margin-left: 6px">{{ data.name }}</span>
-              </span>
-              <span>
-                <span v-if="data.type ==='group'" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickAdd">
-                    <span class="el-dropdown-link">
-                      <el-button
-                        icon="el-icon-plus"
-                        type="text"
-                        size="small"
-                      />
-                    </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>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
-                        {{ $t('dataset.scene') }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </span>
-                <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('rename',data,node)">
-                        {{ $t('dataset.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('dataset.delete') }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </span>
-              </span>
-            </span>
-          </el-tree>
-        </div>
-      </el-col>
-
-      <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
-        <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
-          <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="groupForm.name"/>
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
-          </el-button>
-        </div>
-      </el-dialog>
-    </el-col>
-
-    <!--scene-->
-    <el-col v-if="sceneMode">
-      <el-row class="title-css">
-        <span class="title-text">
-          {{ currGroup.name }}
-        </span>
-        <el-button icon="el-icon-back" size="mini" style="float: right" @click="back">
-          {{ $t('dataset.back') }}
-        </el-button>
-      </el-row>
-      <el-divider/>
-      <el-row>
-        <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
-          <el-button type="primary" size="mini" plain>
-            {{ $t('dataset.add_table') }}
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="beforeClickAddData('db')">
-              {{ $t('dataset.db_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('sql')">
-              {{ $t('dataset.sql_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('excel')">
-              {{ $t('dataset.excel_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('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"
-        @node-click="sceneClick"
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
-          <span>
-            <span>
-              ({{ data.type }})
-            </span>
-            <span>
-              <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-time"/></span>
-            </span>
-            <span style="margin-left: 6px">{{ data.name }}</span>
-          </span>
-          <span>
-            <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.edit') }}
-                  </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('deleteTable',data,node)">
-                    {{ $t('dataset.delete') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </span>
-          </span>
-        </span>
-      </el-tree>
-
-      <el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
-        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
-          <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-col>
-</template>
-
-<script>
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/panel/panel'
-
-export default {
-  name: 'Group',
-  data() {
-    return {
-      sceneMode: false,
-      dialogTitle: '',
-      search: '',
-      editGroup: false,
-      editTable: false,
-      tData: [],
-      tableData: [],
-      currGroup: {},
-      expandedArray: [],
-      groupForm: {
-        name: '',
-        pid: null,
-        level: 0,
-        type: '',
-        children: [],
-        sort: 'type desc,name asc'
-      },
-      tableForm: {
-        name: '',
-        mode: '',
-        sort: 'type asc,create_time desc,name asc'
-      },
-      groupFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      },
-      tableFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ],
-        mode: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-    sceneData: function() {
-      console.log(this.$store.state.dataset.sceneData + ' do post')
-      this.tableTree()
-      return this.$store.state.dataset.sceneData
-    }
-  },
-  watch: {
-    // search(val){
-    //   this.groupForm.name = val;
-    //   this.tree(this.groupForm);
-    // }
-  },
-  mounted() {
-    this.tree(this.groupForm)
-    this.refresh()
-    this.tableTree()
-    // this.$router.push('/dataset');
-  },
-  methods: {
-    clickAdd(param) {
-      // console.log(param);
-      this.add(param.type)
-      this.groupForm.pid = param.data.id
-      this.groupForm.level = param.data.level + 1
-    },
-
-    beforeClickAdd(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    clickMore(param) {
-      console.log(param)
-      switch (param.type) {
-        case 'rename':
-          this.add(param.data.type)
-          this.groupForm = JSON.parse(JSON.stringify(param.data))
-          break
-        case 'move':
-
-          break
-        case 'delete':
-          this.delete(param.data)
-          break
-        case 'editTable':
-          this.editTable = true
-          this.tableForm = JSON.parse(JSON.stringify(param.data))
-          this.tableForm.mode = this.tableForm.mode + ''
-          break
-        case 'deleteTable':
-          this.deleteTable(param.data)
-          break
-      }
-    },
-
-    beforeClickMore(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    add(type) {
-      switch (type) {
-        case 'group':
-          this.dialogTitle = this.$t('dataset.group')
-          break
-        case 'scene':
-          this.dialogTitle = this.$t('dataset.scene')
-          break
-      }
-      this.groupForm.type = type
-      this.editGroup = true
-    },
-
-    saveGroup(group) {
-      // console.log(group);
-      this.$refs['groupForm'].validate((valid) => {
-        if (valid) {
-          addGroup(group).then(res => {
-            this.close()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tree(this.groupForm)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    saveTable(table) {
-      //   console.log(table)
-      table.mode = parseInt(table.mode)
-      this.$refs['tableForm'].validate((valid) => {
-        if (valid) {
-          addTable(table).then(response => {
-            this.closeTable()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tableTree()
-            // this.$router.push('/dataset/home')
-            this.$emit('switchComponent', { name: '' })
-            this.$store.dispatch('dataset/setTable', null)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    delete(data) {
-      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delGroup(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('dataset.delete_success'),
-            showClose: true
-          })
-          this.tree(this.groupForm)
-        })
-      }).catch(() => {
-      })
-    },
-
-    deleteTable(data) {
-      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delTable(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('dataset.delete_success'),
-            showClose: true
-          })
-          this.tableTree()
-          // this.$router.push('/dataset/home')
-          this.$emit('switchComponent', { name: '' })
-          this.$store.dispatch('dataset/setTable', null)
-        })
-      }).catch(() => {
-      })
-    },
-
-    close() {
-      this.editGroup = false
-      this.groupForm = {
-        name: '',
-        pid: null,
-        level: 0,
-        type: '',
-        children: [],
-        sort: 'type desc,name asc'
-      }
-    },
-
-    closeTable() {
-      this.editTable = false
-      this.tableForm = {
-        name: ''
-      }
-    },
-
-    tree(group) {
-      groupTree(group).then(res => {
-        this.tData = res.data
-      })
-    },
-
-    tableTree() {
-      this.tableData = []
-      if (this.currGroup.id) {
-        loadTable({
-          sort: 'type asc,create_time desc,name asc',
-          sceneId: this.currGroup.id
-        }).then(res => {
-          this.tableData = res.data
-        })
-      }
-    },
-
-    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 (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
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
-      this.$store.dispatch('dataset/setSceneData', null)
-      this.$emit('switchComponent', { name: '' })
-    },
-
-    clickAddData(param) {
-      // console.log(param);
-      switch (param.type) {
-        case 'db':
-          this.addDB()
-          break
-        case 'sql':
-          this.$message(param.type)
-          break
-        case 'excel':
-          this.$message(param.type)
-          break
-        case 'custom':
-          this.$message(param.type)
-          break
-      }
-    },
-
-    beforeClickAddData(type) {
-      return {
-        'type': type
-      }
-    },
-
-    addDB() {
-      // this.$router.push({
-      //   name: 'add_db',
-      //   params: {
-      //     scene: this.currGroup
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
-    },
-
-    sceneClick(data, node) {
-      // console.log(data);
-      this.$store.dispatch('dataset/setTable', null)
-      this.$store.dispatch('dataset/setTable', data.id)
-      // this.$router.push({
-      //   name: 'table',
-      //   params: {
-      //     table: data
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'ViewTable' })
-    },
-
-    refresh() {
-      const path = this.$route.path
-      if (path === '/dataset/table') {
-        this.sceneMode = true
-        const sceneId = this.$store.state.dataset.sceneData
-        getScene(sceneId).then(res => {
-          this.currGroup = res.data
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .el-divider--horizontal {
-    margin: 12px 0
-  }
-
-  .search-input {
-    padding: 12px 0;
-  }
-
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 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;
-  }
-</style>
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 56c5b8b8bb..6d63ac87c2 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -34,13 +34,13 @@
   import MsMainContainer from '@/metersphere/common/components/MsMainContainer'
   import MsContainer from '@/metersphere/common/components/MsContainer'
   import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
-  import Group from './group/Group'
+  // import Group from './group/Group'
   import PanelList from './list/PanelList'
   import PanelView from './list/PanelView'
 
   export default {
     name: 'Panel',
-    components: {MsMainContainer, MsContainer, MsAsideContainer, Group, PanelList,PanelView},
+    components: {MsMainContainer, MsContainer, MsAsideContainer, PanelList,PanelView},
     data() {
       return {
         component: PanelView,
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 8024c854ca..13498f4d77 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -1,13 +1,13 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col>
-    <!-- group -->
-    <el-col v-if="!sceneMode">
+    <!-- panel list -->
+    <el-col>
       <el-row>
         <span class="header-title">默认仪表盘</span>
         <div class="block">
           <el-tree
             :default-expanded-keys="expandedArray"
-            :data="tData"
+            :data="defaultData"
             node-key="id"
             :expand-on-click-node="true"
             @node-click="panelDefaultClick"
@@ -41,17 +41,16 @@
           >
             <span slot-scope="{ node, data }" class="custom-tree-node">
               <span>
-                <span v-if="data.type === 'scene'">
+                <span v-if="data.nodeType === 'panel'">
                   <el-button
-                    icon="el-icon-folder"
+                    icon="el-icon-picture-outline"
                     type="text"
-                    size="mini"
                   />
                 </span>
                 <span style="margin-left: 6px">{{ data.name }}</span>
               </span>
               <span>
-                <span v-if="data.type ==='group'" @click.stop>
+                <span v-if="data.nodeType ==='folder'" @click.stop>
                   <el-dropdown trigger="click" size="small" @command="clickAdd">
                     <span class="el-dropdown-link">
                       <el-button
@@ -61,11 +60,11 @@
                       />
                     </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-circle-plus" :command="beforeClickAdd('folder',data,node)">
+                        {{ $t('panel.groupAdd') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
-                        {{ $t('dataset.scene') }}
+                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('panel',data,node)">
+                        {{ $t('panel.panelAdd') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -81,13 +80,10 @@
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
-                        {{ $t('dataset.rename') }}
+                        {{ $t('panel.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('dataset.delete') }}
+                        {{ $t('panel.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -105,138 +101,23 @@
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
+          <el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
+          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
           </el-button>
         </div>
       </el-dialog>
     </el-col>
-
-    <!--scene-->
-    <el-col v-if="sceneMode">
-      <el-row class="title-css">
-        <span class="title-text">
-          {{ currGroup.name }}
-        </span>
-        <el-button icon="el-icon-back" size="mini" style="float: right" @click="back">
-          {{ $t('dataset.back') }}
-        </el-button>
-      </el-row>
-      <el-divider/>
-      <el-row>
-        <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
-          <el-button type="primary" size="mini" plain>
-            {{ $t('dataset.add_table') }}
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="beforeClickAddData('db')">
-              {{ $t('dataset.db_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('sql')">
-              {{ $t('dataset.sql_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('excel')">
-              {{ $t('dataset.excel_data') }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="beforeClickAddData('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"
-        @node-click="sceneClick"
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
-          <span>
-            <span>
-              ({{ data.type }})
-            </span>
-            <span>
-              <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-time"/></span>
-            </span>
-            <span style="margin-left: 6px">{{ data.name }}</span>
-          </span>
-          <span>
-            <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.edit') }}
-                  </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('deleteTable',data,node)">
-                    {{ $t('dataset.delete') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </span>
-          </span>
-        </span>
-      </el-tree>
-
-      <el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
-        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
-          <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-col>
 </template>
 
 <script>
-  import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
+  import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree,defaultTree} from '@/api/panel/panel'
 
   export default {
     name: 'PanelList',
     data() {
       return {
-        sceneMode: false,
+        defaultData:[],
         dialogTitle: '',
         search: '',
         editGroup: false,
@@ -246,17 +127,17 @@
         currGroup: {},
         expandedArray: [],
         groupForm: {
-          name: '',
+          name: null,
           pid: null,
           level: 0,
-          type: '',
+          nodeType: null,
           children: [],
-          sort: 'type desc,name asc'
+          sort: 'node_type desc,name asc'
         },
         tableForm: {
           name: '',
           mode: '',
-          sort: 'type asc,create_time desc,name asc'
+          sort: 'node_type asc,create_time desc,name asc'
         },
         groupFormRules: {
           name: [
@@ -274,11 +155,6 @@
       }
     },
     computed: {
-      sceneData: function () {
-        console.log(this.$store.state.dataset.sceneData + ' do post')
-        this.tableTree()
-        return this.$store.state.dataset.sceneData
-      }
     },
     watch: {
       // search(val){
@@ -287,6 +163,7 @@
       // }
     },
     mounted() {
+      this.defaultTree()
       this.tree(this.groupForm)
       this.refresh()
       this.tableTree()
@@ -312,7 +189,7 @@
         console.log(param)
         switch (param.type) {
           case 'rename':
-            this.add(param.data.type)
+            this.add(param.data.nodeType)
             this.groupForm = JSON.parse(JSON.stringify(param.data))
             break
           case 'move':
@@ -340,16 +217,16 @@
         }
       },
 
-      add(type) {
-        switch (type) {
-          case 'group':
-            this.dialogTitle = this.$t('dataset.group')
+      add(nodeType) {
+        switch (nodeType) {
+          case 'folder':
+            this.dialogTitle = this.$t('panel.groupAdd')
             break
-          case 'scene':
-            this.dialogTitle = this.$t('dataset.scene')
+          case 'panel':
+            this.dialogTitle = this.$t('panel.panelAdd')
             break
         }
-        this.groupForm.type = type
+        this.groupForm.nodeType = nodeType
         this.editGroup = true
       },
 
@@ -406,15 +283,15 @@
       },
 
       delete(data) {
-        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-          confirmButtonText: this.$t('dataset.confirm'),
-          cancelButtonText: this.$t('dataset.cancel'),
+        this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
+          confirmButtonText: this.$t('panel.confirm'),
+          cancelButtonText: this.$t('panel.cancel'),
           type: 'warning'
         }).then(() => {
           delGroup(data.id).then(response => {
             this.$message({
               type: 'success',
-              message: this.$t('dataset.delete_success'),
+              message: this.$t('panel.delete_success'),
               showClose: true
             })
             this.tree(this.groupForm)
@@ -424,15 +301,15 @@
       },
 
       deleteTable(data) {
-        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-          confirmButtonText: this.$t('dataset.confirm'),
-          cancelButtonText: this.$t('dataset.cancel'),
+        this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
+          confirmButtonText: this.$t('panel.confirm'),
+          cancelButtonText: this.$t('panel.cancel'),
           type: 'warning'
         }).then(() => {
           delTable(data.id).then(response => {
             this.$message({
               type: 'success',
-              message: this.$t('dataset.delete_success'),
+              message: this.$t('panel.delete_success'),
               showClose: true
             })
             this.tableTree()
@@ -447,12 +324,12 @@
       close() {
         this.editGroup = false
         this.groupForm = {
-          name: '',
+          name: null,
           pid: null,
           level: 0,
-          type: '',
+          nodeType: null,
           children: [],
-          sort: 'type desc,name asc'
+          sort: 'node_type desc,name asc'
         }
       },
 
@@ -468,6 +345,14 @@
           this.tData = res.data
         })
       },
+      defaultTree() {
+        let requestInfo ={
+          panelType: 'system'
+        }
+        defaultTree(requestInfo).then(res => {
+          this.defaultData = res.data
+        })
+      },
 
       tableTree() {
         this.tableData = []
@@ -484,7 +369,7 @@
       nodeClick(data, node) {
         // console.log(data);
         // console.log(node);
-        if (data.type === 'scene') {
+        if (data.nodeType === 'panel') {
           this.sceneMode = true
           this.currGroup = data
           this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
@@ -538,6 +423,8 @@
         //   name: 'add_db',
         //   params: {
         //     scene: this.currGroup
+
+
         //   }
         // })
         this.$emit('switchComponent', {name: 'AddDB', param: this.currGroup})
@@ -567,7 +454,6 @@
         }
       },
       panelDefaultClick(data, node) {
-        debugger
         console.log(data);
         console.log(node);
         this.$store.dispatch('panel/setPanelName', data.name)