diff --git a/frontend/src/api/authModel/authModel.js b/frontend/src/api/authModel/authModel.js
index 33ba79f0a2..9f72a1b128 100644
--- a/frontend/src/api/authModel/authModel.js
+++ b/frontend/src/api/authModel/authModel.js
@@ -1,11 +1,11 @@
 import request from '@/utils/request'
 
-export function queryAuthModel(data) {
+export function queryAuthModel(data, loading = true, timeout = 30000) {
   return request({
     url: 'authModel/queryAuthModel',
     method: 'post',
-    loading: true,
-    timeout: 30000,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }
diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
index f966b426d1..8bb9a0c4df 100644
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -40,7 +40,7 @@ export function chartGroupTree(data) {
   return request({
     url: '/chart/group/tree',
     method: 'post',
-    loading: true,
+    loading: false,
     data
   })
 }
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index c745ced6e9..702302a4c5 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -36,20 +36,22 @@ export function querySubjectWithGroup(data) {
   })
 }
 
-export function defaultTree(data) {
+export function defaultTree(data, loading = true, timeout = 30000) {
   return request({
     url: '/panel/group/defaultTree',
     method: 'post',
-    loading: true,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }
 
-export function groupTree(data) {
+export function groupTree(data, loading = true, timeout = 30000) {
   return request({
     url: '/panel/group/tree',
     method: 'post',
-    loading: true,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }
diff --git a/frontend/src/components/widget/DeWidget/TimeSimple.vue b/frontend/src/components/widget/DeWidget/TimeSimple.vue
index 260d6a25bc..badb0ecd83 100644
--- a/frontend/src/components/widget/DeWidget/TimeSimple.vue
+++ b/frontend/src/components/widget/DeWidget/TimeSimple.vue
@@ -7,10 +7,9 @@
         :width="canvas_width"
         :height="canvas_height"
       />
-      <!-- <canvas  id="canvas" class="de-canvas" :width="$refs.canvasContainer.clientWidth" :height="$refs.canvasContainer.clientHeight" /> -->
     </div>
     <div style="height: 50px;display: flex;align-items: center;">
-      <p id="fulltime" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
+      <p :id="element.id + '_fulltime'" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
     </div>
   </div>
 </template>
@@ -119,7 +118,7 @@ export default {
       }
       const nowWeek = this.week[time.getDay()]
       var fullTime = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
-      var fullDoc = document.getElementById('fulltime')
+      var fullDoc = document.getElementById(this.element.id + '_fulltime')
       fullDoc.innerHTML = fullTime
 
       const draw = draws
@@ -140,8 +139,6 @@ export default {
         draw.beginPath()
 
         draw.moveTo(0, side_length / 2 - 0)
-        /* draw.moveTo(0, side_length / 2 - 70)
-        draw.lineTo(0, side_length / 2 - 50) */
         draw.lineTo(0, side_length / 2 - 20)
         draw.closePath()
         draw.stroke()
@@ -157,8 +154,6 @@ export default {
         draw.beginPath()
 
         draw.moveTo(0, side_length / 2 - 0)
-        // draw.lineTo(0, side_length / 2 - 50)
-        // draw.lineTo(0, side_length / 2 - 60)
         draw.lineTo(0, side_length / 2 - 10)
         draw.closePath()
         draw.stroke()
@@ -169,21 +164,18 @@ export default {
       // 画时阵
       draw.save()
       draw.strokeStyle = this.element.style.color
-      // draw.translate(250, 250)
       draw.translate(canvas_w / 2, canvas_h / 2)
       const hourzs = h + min / 60// 获取浮点类型的小时
       draw.rotate(hourzs * 30 * Math.PI / 180)
       draw.lineWidth = 6
       draw.beginPath()
       draw.moveTo(0, 0)
-      /* draw.lineTo(0, -(side_length / 2 - 60) / 3) */
       draw.lineTo(0, -(side_length / 2) * 0.5)
       draw.closePath()
       draw.stroke()
       draw.restore()
       // 画分针
       draw.save()
-      // draw.translate(250, 250)
       draw.translate(canvas_w / 2, canvas_h / 2)
 
       draw.rotate(min * 6 * Math.PI / 180)
@@ -192,13 +184,11 @@ export default {
       draw.beginPath()
       draw.moveTo(0, 0)
       draw.lineTo(0, -(side_length / 2) * 0.7)
-      /* draw.lineTo(0, -(side_length / 2 - 60) * 3 / 5) */
       draw.closePath()
       draw.stroke()
       draw.restore()
       // 画秒针
       draw.save()
-      // draw.translate(250, 250)
       draw.translate(canvas_w / 2, canvas_h / 2)
       draw.rotate(s * 6 * Math.PI / 180)
       draw.strokeStyle = this.element.style.color
@@ -206,16 +196,13 @@ export default {
       draw.beginPath()
       draw.moveTo(0, 15)
       draw.lineTo(0, -(side_length / 2) * 0.9)
-      /* draw.lineTo(0, -(side_length / 2 - 60)) */
       draw.closePath()
       draw.stroke()
       draw.restore()
 
       // 画中心原点
-      // draw.fillStyle = 'rgba(255,255,255,1)'
       draw.lineWidth = 2
       draw.beginPath()
-      // draw.arc(250, 250, 4, 0, 360, false)
       draw.arc(canvas_w / 2, canvas_h / 2, 4, 0, 360, false)
       draw.closePath()
       draw.fill()
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index d8716d7c7d..1287b31817 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1157,7 +1157,11 @@ export default {
     union_data: 'Union Dataset',
     add_union_table: 'Add Union Dataset',
     edit_union: 'Edit Union Dataset',
-    union: 'Union'
+    union: 'Union',
+    edit_union_relation: 'Edit Union Relation',
+    add_union_relation: 'Add Union Relation',
+    field_select: 'Select Field',
+    add_union_field: 'Add Union Field'
   },
   datasource: {
     datasource: 'Data Source',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index a504aec63c..88c26ca89b 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1158,7 +1158,11 @@ export default {
     union_data: '關聯數據集',
     add_union_table: '添加關聯數據集',
     edit_union: '編輯關聯數據集',
-    union: '關聯'
+    union: '關聯',
+    edit_union_relation: '編輯關聯關系',
+    add_union_relation: '新建關聯關系',
+    field_select: '字段選擇',
+    add_union_field: '添加關聯字段'
   },
   datasource: {
     datasource: '數據源',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 50219af647..5ac145263c 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1160,7 +1160,11 @@ export default {
     union_data: '关联数据集',
     add_union_table: '添加关联数据集',
     edit_union: '编辑关联数据集',
-    union: '关联'
+    union: '关联',
+    edit_union_relation: '编辑关联关系',
+    add_union_relation: '新建关联关系',
+    field_select: '字段选择',
+    add_union_field: '添加关联字段'
   },
   datasource: {
     datasource: '数据源',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 6bb7d1124f..d6393f38a5 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -693,39 +693,38 @@ div:focus {
 
 
 .rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
+  display: none;
+}
+.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+  >.el-date-picker__header {
     display: none;
   }
-  .rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
-      >.el-date-picker__header {
-          display: none;
-      }
-      >.el-picker-panel__content{
-          >table > tbody {
-            >tr:first-child {
-                display: none;
-            }
-            >tr >td.prev-month,td.next-month {
-                display: none;
-            }
-          } 
-      }
-  }
-  .rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
-    display: none;
-  }
-  .rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
-    >.el-date-picker__header {
+  >.el-picker-panel__content{
+    >table > tbody {
+      >tr:first-child {
         display: none;
-    }
-    >.el-picker-panel__content{
-        >table > tbody {
-          >tr:not(:nth-child(3)) {
-              display: none;
-          }
-          
-        } 
+      }
+      >tr >td.prev-month,td.next-month {
+        display: none;
+      }
     }
   }
+}
+.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
+  display: none;
+}
+.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+  >.el-date-picker__header {
+    display: none;
+  }
+  >.el-picker-panel__content{
+    >table > tbody {
+      >tr:not(:nth-child(3)) {
+        display: none;
+      }
+    }
+  }
+}
 
 .chart-type .el-radio__input{
   display: none!important;
@@ -735,10 +734,22 @@ div:focus {
   padding-left: 0!important;
 }
 
+.chart-type .radio-row .radio-style{
+  width: 80px;
+  height: 60px;
+  padding: 0;
+}
+
 .el-color-predefine__color-selector{
   border: 1px solid #999999!important;
   margin: 0 0 6px 6px!important;
 }
-
+.de-checkbox {
+  width: 100%;
+  margin-left: 0px !important;
+  .el-checkbox__input {
+    padding: 0 0 8px 0 !important;
+  }
+}
 
 
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 9b77490991..68a651f93f 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -337,6 +337,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    mountedInit: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -440,10 +445,11 @@ export default {
 
   },
   mounted() {
-    this.treeNode(this.groupForm)
-    this.refresh()
-    // this.chartTree()
-    this.getChartGroupTree()
+    if (this.mountedInit) {
+      this.treeNode(true)
+      this.refresh()
+      this.getChartGroupTree()
+    }
   },
   methods: {
     clickAdd(param) {
@@ -620,9 +626,17 @@ export default {
       })
     },
 
-    treeNode(group) {
-      queryAuthModel({ modelType: 'chart' }).then(res => {
-        this.tData = res.data
+    treeNode(cache = false) {
+      const modelInfo = localStorage.getItem('chart-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'chart' }, !userCache).then(res => {
+        localStorage.setItem('chart-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
 
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index c37ef0346a..546ea41fe5 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -487,10 +487,4 @@ export default {
   white-space: pre;
   font-size: 12px;
 }
-
-.radio-style{
-  width: 80px;
-  height: 60px;
-  padding: 0;
-}
 </style>
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index 48148cb84a..07c09f10df 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -28,22 +28,44 @@
       </div>
       <!--数据集关联树型结构-->
       <div v-else class="union-container">
-        <node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" @notifyParent="calc" />
+        <node-item
+          :current-node="dataset[0]"
+          :node-index="0"
+          @deleteNode="deleteNode"
+          @notifyParent="calc"
+          @editUnion="unionConfig"
+        />
         <div v-if="dataset.length > 0">
-          <union-node v-for="(item,index) in dataset[0].childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="dataset[0].childrenDs" @notifyParent="calc" />
+          <union-node
+            v-for="(item,index) in dataset[0].childrenDs"
+            :key="index"
+            :node-index="index"
+            :children-node="item"
+            :children-list="dataset[0].childrenDs"
+            :parent-node="dataset[0]"
+            @notifyParent="calc"
+          />
         </div>
       </div>
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
+    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
       <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
+        <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
       </div>
     </el-dialog>
 
+    <!--编辑关联关系-->
+    <el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
+      <union-edit :union-param="unionParam" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -51,9 +73,10 @@
 import UnionNode from '@/views/dataset/add/union/UnionNode'
 import NodeItem from '@/views/dataset/add/union/NodeItem'
 import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
+import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 export default {
   name: 'AddUnion',
-  components: { DatasetGroupSelectorTree, NodeItem, UnionNode },
+  components: { UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
   props: {
     param: {
       type: Object,
@@ -72,7 +95,7 @@ export default {
             currentDsField: [],
             childrenDs: [],
             unionToParent: {
-              unionType: '', // left join,right join,inner join
+              unionType: 'left', // left join,right join,inner join
               unionFields: [
                 {
                   parentField: {},
@@ -94,7 +117,7 @@ export default {
         currentDsField: [],
         childrenDs: [],
         unionToParent: {
-          unionType: '',
+          unionType: 'left',
           unionFields: []
         },
         allChildCount: 0
@@ -103,7 +126,9 @@ export default {
       customType: ['db', 'sql', 'excel'],
       selectDsDialog: false,
       // 弹框临时选中的数据集
-      tempDs: {}
+      tempDs: {},
+      editUnion: false,
+      unionParam: {}
     }
   },
   mounted() {
@@ -154,6 +179,22 @@ export default {
           }
         }
       }
+    },
+
+    unionConfig(param) {
+      this.unionParam = param
+      this.editUnion = true
+    },
+    closeEditUnion() {
+      this.editUnion = false
+      // 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
+      if (this.unionParam.type === 'add') {
+        this.dataset[0].childrenDs.pop()
+        this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
+      }
+    },
+    confirmEditUnion() {
+      this.editUnion = false
     }
   }
 }
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index ecc4d80ba4..5dc218cfc5 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="ds-node" @click="nodeClick">
-      <svg-icon v-if="currentNode.currentDs.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
-      <svg-icon v-else-if="currentNode.currentDs.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
-      <svg-icon v-else-if="currentNode.currentDs.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+      <svg-icon v-if="currentNode.currentDs.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
+      <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+      <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
 
       <span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
 
@@ -28,11 +28,20 @@
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
+    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
       <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
+        <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <!--编辑单个数据集字段-->
+    <el-dialog v-if="editField" v-dialogDrag :title="$t('dataset.field_select')" :visible="editField" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
+      <union-field-edit :node="currentNode" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEditField()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="confirmEditField()">{{ $t('dataset.confirm') }}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -40,9 +49,10 @@
 
 <script>
 import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
+import UnionFieldEdit from '@/views/dataset/add/union/UnionFieldEdit'
 export default {
   name: 'NodeItem',
-  components: { DatasetGroupSelectorTree },
+  components: { UnionFieldEdit, DatasetGroupSelectorTree },
   props: {
     currentNode: {
       type: Object,
@@ -60,7 +70,7 @@ export default {
         currentDsField: [],
         childrenDs: [],
         unionToParent: {
-          unionType: '',
+          unionType: 'left',
           unionFields: []
         },
         allChildCount: 0
@@ -70,12 +80,13 @@ export default {
       // 弹框临时选中的数据集
       tempDs: {},
       // 父级数据集
-      tempParentDs: {}
+      tempParentDs: {},
+      editField: false
     }
   },
   methods: {
     nodeClick() {
-      console.log('node click to edit')
+      this.editField = true
     },
     nodeMenuClick(param) {
       switch (param.type) {
@@ -102,6 +113,7 @@ export default {
       this.selectDs()
     },
     editNode(param) {
+      this.nodeClick()
     },
     deleteNode(param) {
       this.$emit('deleteNode', this.nodeIndex)
@@ -125,9 +137,25 @@ export default {
       this.tempParentDs.childrenDs.push(ds)
       this.closeSelectDs()
       this.notifyFirstParent('union')
+
+      // 构建新建关联关系传递的参数
+      const param = {
+        type: 'add',
+        nodeIndex: this.nodeIndex,
+        node: ds,
+        parent: this.tempParentDs
+      }
+      this.$emit('editUnion', param)
     },
+    // 增加与删除事件向父级传递
     notifyFirstParent(type) {
       this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
+    },
+    closeEditField() {
+      this.editField = false
+    },
+    confirmEditField() {
+      this.editField = false
     }
   }
 }
@@ -163,4 +191,7 @@ export default {
   cursor: pointer;
   border: var(--Main,#2681ff) solid 1px;
 }
+.dialog-css >>> .el-dialog__body {
+  padding: 0 20px;
+}
 </style>
diff --git a/frontend/src/views/dataset/add/union/UnionEdit.vue b/frontend/src/views/dataset/add/union/UnionEdit.vue
new file mode 100644
index 0000000000..486a70d80c
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionEdit.vue
@@ -0,0 +1,88 @@
+<template>
+  <div v-if="unionParam.type" style="height:600px;">
+    <div class="field-style">
+      <div class="fields">
+        <p>{{ unionParam.parent.currentDs.name }}</p>
+        <union-field-list :field-list="parentField" :node="unionParam.parent" @checkedFields="changeParentFields" />
+      </div>
+      <div class="fields">
+        <p>{{ unionParam.node.currentDs.name }}</p>
+        <union-field-list :field-list="nodeField" :node="unionParam.node" @checkedFields="changeNodeFields" />
+      </div>
+    </div>
+    <el-divider />
+    <union-item-edit :parent-field-list="parentField" :node-field-list="nodeField" :union-param="unionParam" />
+  </div>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
+import UnionItemEdit from '@/views/dataset/add/union/UnionItemEdit'
+
+export default {
+  name: 'UnionEdit',
+  components: { UnionItemEdit, UnionFieldList },
+  props: {
+    unionParam: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      parentField: [],
+      nodeField: []
+    }
+  },
+  watch: {
+    'unionParam': function() {
+
+    }
+  },
+  mounted() {
+    this.getParentFieldList()
+    this.getNodeFieldList()
+  },
+  methods: {
+    getParentFieldList() {
+      post('/dataset/field/list/' + this.unionParam.parent.currentDs.id, null, true).then(response => {
+        this.parentField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
+      })
+    },
+    getNodeFieldList() {
+      post('/dataset/field/list/' + this.unionParam.node.currentDs.id, null, true).then(response => {
+        this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
+      })
+    },
+
+    changeParentFields(val) {
+      this.unionParam.parent.currentDsField = val
+    },
+    changeNodeFields(val) {
+      this.unionParam.node.currentDsField = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+.field-style{
+  height: 300px;
+}
+.fields{
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  width: 50%;
+  float: left;
+  padding: 0 6px;
+}
+p{
+  font-size: 14px;
+  margin: 6px 0!important;
+}
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionFieldEdit.vue b/frontend/src/views/dataset/add/union/UnionFieldEdit.vue
new file mode 100644
index 0000000000..afb2ee9131
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionFieldEdit.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <p>{{ node.currentDs.name }}</p>
+    <union-field-list :field-list="fieldList" :node="node" @checkedFields="changeFields" />
+  </div>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
+
+export default {
+  name: 'UnionFieldEdit',
+  components: { UnionFieldList },
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      fieldList: []
+    }
+  },
+  mounted() {
+    this.getFieldList()
+  },
+  methods: {
+    getFieldList() {
+      post('/dataset/field/list/' + this.node.currentDs.id, null, true).then(response => {
+        this.fieldList = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
+      })
+    },
+    changeFields(val) {
+      this.node.currentDsField = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionFieldList.vue b/frontend/src/views/dataset/add/union/UnionFieldList.vue
new file mode 100644
index 0000000000..5d8e2ccf73
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionFieldList.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="field-block-style">
+      <div class="field-block-option">
+        <span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
+        <el-input
+          v-model="search"
+          size="mini"
+          :placeholder="$t('dataset.search')"
+          prefix-icon="el-icon-search"
+          clearable
+          class="option-input"
+        />
+      </div>
+      <div class="field-block-head">
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange">&nbsp;</el-checkbox>
+        <span class="label-style">
+          <span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
+          <span class="field-style">{{ $t('dataset.field_name') }}</span>
+        </span>
+      </div>
+      <div class="field-block-body">
+        <el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
+          <div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
+            <el-checkbox :label="field.id" class="check-style">&nbsp;</el-checkbox>
+            <span class="label-style">
+              <span class="field-origin-style" :title="field.originName">
+                <span>
+                  <svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  <svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  <svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
+                </span>
+                <span class="origin-style">
+                  {{ field.originName }}
+                </span>
+              </span>
+              <span class="field-style" :title="field.name">{{ field.name }}</span>
+            </span>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnionFieldList',
+  props: {
+    fieldList: {
+      type: Array,
+      required: true
+    },
+    node: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      checkAll: false,
+      isIndeterminate: false,
+      checkedFields: [],
+      search: '',
+      fieldSearchList: []
+    }
+  },
+  watch: {
+    fieldList: function() {
+      this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
+      this.init()
+    },
+    search: function(val) {
+      if (val && val !== '') {
+        this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
+      } else {
+        this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.checkedFields = this.node.currentDsField
+      this.handleCheckedCitiesChange(this.checkedFields)
+    },
+    handleCheckAllChange(val) {
+      this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
+      this.isIndeterminate = false
+      this.returnCheckedFields()
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.fieldList.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
+      this.returnCheckedFields()
+    },
+
+    returnCheckedFields() {
+      this.$emit('checkedFields', this.checkedFields)
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  font-size: 12px;
+}
+.field-block-style{
+  height: 300px;
+  width: 100%;
+}
+.field-block-head{
+  height: 30px;
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0 0 0 10px;
+}
+.field-block-body{
+  height: 210px;
+  overflow-y: auto;
+}
+.field-origin-style{
+  width: 100px;
+  display: flex;
+  align-items: center;
+}
+.field-style{
+  margin-left: 10px;
+  width: 100px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+}
+.label-style{
+  display: flex;
+  align-items: center;
+}
+.field-item-style{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-top:1px solid #dcdfe6;
+  padding: 0 0 0 10px;
+}
+.check-style{
+  width: 30px;
+  text-align: center;
+}
+.origin-style{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+.field-block-option{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.option-field{
+  color: #C0C4CC;
+}
+.option-input{
+  width: 120px;
+}
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionItemEdit.vue b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
new file mode 100644
index 0000000000..ad0d23fae4
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="container">
+    <div class="union-header">
+      {{ $t('dataset.join_view') }}
+      <div class="union-header-operator">
+        <svg-icon v-if="unionParam.node.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" />
+        <svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" />
+        <svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" />
+        <svg-icon v-else icon-class="no-join" class="join-icon" />
+
+        <el-select v-model="unionParam.node.unionToParent.unionType" size="mini" class="union-selector">
+          <el-option v-for="item in unionOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-button size="mini" icon="el-icon-circle-plus-outline" class="union-add" @click="addUnion">{{ $t('dataset.add_union_field') }}</el-button>
+      </div>
+    </div>
+    <div class="union-body">
+      <div class="union-body-header">
+        <span class="column" :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</span>
+        <span class="column" :title="unionParam.node.currentDs.name">{{ unionParam.node.currentDs.name }}</span>
+        <span class="column-last">{{ $t('dataset.operator') }}</span>
+      </div>
+      <div class="union-body-container">
+        <div v-for="(field,index) in unionParam.node.unionToParent.unionFields" :key="index" class="union-body-item">
+          <!--左侧父级field-->
+          <span class="column">
+            <el-select v-model="field.parentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
+              <el-option
+                v-for="item in parentFieldList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <span>
+                  <span v-if="item.deType === 0">
+                    <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  </span>
+                  <span v-if="item.deType === 1">
+                    <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  </span>
+                  <span v-if="item.deType === 2 || item.deType === 3">
+                    <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  </span>
+                  <span v-if="item.deType === 5">
+                    <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  </span>
+                </span>
+                <span>
+                  {{ item.name }}
+                </span>
+              </el-option>
+            </el-select>
+          </span>
+          <!--右侧孩子field-->
+          <span class="column">
+            <el-select v-model="field.currentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
+              <el-option
+                v-for="item in nodeFieldList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <span>
+                  <span v-if="item.deType === 0">
+                    <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  </span>
+                  <span v-if="item.deType === 1">
+                    <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  </span>
+                  <span v-if="item.deType === 2 || item.deType === 3">
+                    <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  </span>
+                  <span v-if="item.deType === 5">
+                    <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  </span>
+                </span>
+                <span>
+                  {{ item.name }}
+                </span>
+              </el-option>
+            </el-select>
+          </span>
+
+          <span class="column-last">
+            <el-button :disabled="unionParam.node.unionToParent.unionFields && unionParam.node.unionToParent.unionFields.length === 1" icon="el-icon-delete" circle size="mini" @click="removeUnionItem(index)" />
+          </span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnionItemEdit',
+  props: {
+    parentFieldList: {
+      type: Array,
+      required: true
+    },
+    nodeFieldList: {
+      type: Array,
+      required: true
+    },
+    unionParam: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      unionOptions: [
+        { label: this.$t('dataset.left_join'), value: 'left' },
+        { label: this.$t('dataset.right_join'), value: 'right' },
+        { label: this.$t('dataset.inner_join'), value: 'inner' }
+      ]
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (this.unionParam.node.unionToParent.unionFields.length < 1) {
+        const item = {
+          parentField: {},
+          currentField: {}
+        }
+        this.unionParam.node.unionToParent.unionFields.push(item)
+      }
+    },
+    addUnion() {
+      const item = {
+        parentField: {},
+        currentField: {}
+      }
+      this.unionParam.node.unionToParent.unionFields.push(item)
+    },
+    removeUnionItem(index) {
+      this.unionParam.node.unionToParent.unionFields.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  font-size: 12px;
+}
+.container{
+  height: 275px;
+}
+.union-header{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  height: 35px;
+}
+.union-header-operator{
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+.union-selector{
+  display: inline-block;
+  width: 100px;
+  margin-left: 6px;
+}
+.union-add{
+  margin-left: 6px;
+}
+.union-body{
+  height: 240px;
+}
+.union-body-header{
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+}
+.union-body-header .column{
+  width: 240px;
+  display: inline-block;
+  margin-right: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.union-body-header .column-last{
+  width: 40px;
+}
+.union-body-container{
+  height: 180px;
+  overflow-y: auto;
+}
+.select-field{
+  width: 200px;
+  display: inline-block;
+}
+.union-body-item{
+  height: 36px;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+}
+.union-body-item .column{
+  width: 240px;
+  display: inline-block;
+  margin-right: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.union-body-item .column-last{
+  width: 40px;
+}
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionNode.vue b/frontend/src/views/dataset/add/union/UnionNode.vue
index 9458e759d8..2eb950caf0 100644
--- a/frontend/src/views/dataset/add/union/UnionNode.vue
+++ b/frontend/src/views/dataset/add/union/UnionNode.vue
@@ -1,29 +1,54 @@
 <template>
   <div class="children-node node-container" :style="{height:nodeHeight}">
     <div class="node-line">
-      <svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionConfig" />
-      <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionConfig" />
-      <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionConfig" />
-      <svg-icon v-else icon-class="no-join" class="join-icon" @click="unionConfig" />
+      <svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionEdit" />
+      <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionEdit" />
+      <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionEdit" />
+      <svg-icon v-else icon-class="no-join" class="join-icon" @click="unionEdit" />
 
       <svg class="join-svg-container">
         <path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
       </svg>
     </div>
 
-    <node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" @notifyParent="calc" />
+    <node-item
+      :current-node="childrenNode"
+      :node-index="nodeIndex"
+      @deleteNode="deleteNode"
+      @notifyParent="calc"
+      @editUnion="unionConfig"
+    />
     <!--递归调用自身，完成树状结构-->
     <div>
-      <union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" @notifyParent="calc" />
+      <union-node
+        v-for="(item,index) in childrenNode.childrenDs"
+        :key="index"
+        :node-index="index"
+        :children-node="item"
+        :children-list="childrenNode.childrenDs"
+        :parent-node="childrenNode"
+        @notifyParent="calc"
+      />
     </div>
+
+    <!--编辑关联关系-->
+    <el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css" destroy-on-close>
+      <union-edit :union-param="unionParam" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import NodeItem from '@/views/dataset/add/union/NodeItem'
+import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 export default {
   name: 'UnionNode',
   components: {
+    UnionEdit,
     NodeItem
   },
   props: {
@@ -35,6 +60,10 @@ export default {
       type: Object,
       required: true
     },
+    parentNode: {
+      type: Object,
+      required: true
+    },
     nodeIndex: {
       type: Number,
       required: true
@@ -48,7 +77,9 @@ export default {
       pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,13 l0,27',
       nodeHeight: '40px',
       lineLength: '',
-      pathParam: ''
+      pathParam: '',
+      editUnion: false,
+      unionParam: {}
     }
   },
   watch: {
@@ -70,12 +101,23 @@ export default {
     this.nodeLineHeight()
   },
   methods: {
-    unionConfig() {
-      console.log('union config')
+    unionEdit() {
+      const param = {
+        type: 'edit',
+        nodeIndex: this.nodeIndex,
+        node: this.childrenNode,
+        parent: this.parentNode
+      }
+      this.unionConfig(param)
+    },
+    unionConfig(param) {
+      this.unionParam = param
+      this.editUnion = true
     },
     deleteNode(index) {
       this.childrenList.splice(index, 1)
     },
+    // 计算连接线长度
     nodeLineHeight() {
       if (this.childrenList.length === 1 && this.nodeIndex === 0) {
         this.pathParam = this.path
@@ -93,12 +135,14 @@ export default {
         }
       }
     },
+    // 计算行高
     calcNodeHeight() {
       this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
     },
     calc(param) {
       this.notifyFirstParent(param)
     },
+    // 判断每个node的状态等，并继续向父级传递
     notifyFirstParent(param) {
       if (param.type === 'union') {
         if (param.grandParentAdd) {
@@ -113,8 +157,9 @@ export default {
           }
         }
       }
-      const p = JSON.parse(JSON.stringify(param))
+
       // 传递到父级
+      const p = JSON.parse(JSON.stringify(param))
       p.grandParentAdd = this.childrenNode.allChildCount > 1
       if (param.subCount > 1) {
         p.grandParentSub = true
@@ -122,6 +167,18 @@ export default {
         p.grandParentSub = this.childrenNode.allChildCount !== 0
       }
       this.$emit('notifyParent', p)
+    },
+
+    closeEditUnion() {
+      this.editUnion = false
+      if (this.unionParam.type === 'add') {
+        this.childrenNode.childrenDs.pop()
+        // 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
+        this.notifyFirstParent({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
+      }
+    },
+    confirmEditUnion() {
+      this.editUnion = false
     }
   }
 }
@@ -151,4 +208,7 @@ export default {
   cursor: pointer;
   color: var(--Main,#2681ff);
 }
+.dialog-css >>> .el-dialog__body {
+  padding: 0 20px;
+}
 </style>
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index d93f8b23a8..0d2e8276e7 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -186,7 +186,7 @@ export default {
       this.unionDataChange()
     },
     'table': function() {
-      this.treeNode(this.groupForm)
+      this.treeNode()
     },
     filterText(val) {
       this.searchPids = []
@@ -198,7 +198,7 @@ export default {
     }
   },
   mounted() {
-    this.treeNode(this.groupForm)
+    this.treeNode(true)
   },
   created() {
     this.kettleState()
@@ -227,10 +227,17 @@ export default {
         name: ''
       }
     },
-
-    treeNode(group) {
-      queryAuthModel({ modelType: 'dataset', privileges: this.privileges, datasetMode: this.mode, clearEmptyDir: this.clearEmptyDir}).then(res => {
-        this.data = res.data
+    treeNode(cache) {
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.data = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'dataset', privileges: this.privileges, datasetMode: this.mode, clearEmptyDir: this.clearEmptyDir}, !userCache).then(res => {
+        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.data = res.data
+        }
       })
     },
     nodeClick(data, node) {
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 0efded82d6..8a83a8507d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -93,11 +93,10 @@
                               <svg-icon icon-class="ds-custom" class="ds-icon-custom" />
                               {{ $t('dataset.custom_data') }}
                             </el-dropdown-item>
-                            <!--此处菜单暂时隐藏，后续功能完整后再放开-->
-                            <!--                            <el-dropdown-item :command="beforeClickAddData('union',data)">-->
-                            <!--                              <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
-                            <!--                              {{ $t('dataset.union_data') }}-->
-                            <!--                            </el-dropdown-item>-->
+                            <el-dropdown-item :command="beforeClickAddData('union',data)">
+                              <svg-icon icon-class="ds-union" class="ds-icon-union" />
+                              {{ $t('dataset.union_data') }}
+                            </el-dropdown-item>
                           </el-dropdown-menu>
                         </el-dropdown>
                       </el-dropdown-item>
@@ -135,6 +134,7 @@
                   <svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
                   <svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
                   <svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
+                  <svg-icon v-if="data.modelInnerType === 'union'" icon-class="ds-union" class="ds-icon-union" />
                 </span>
                 <span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
                   <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
@@ -325,7 +325,7 @@ export default {
     this.kettleState()
   },
   mounted() {
-    this.treeNode(this.groupForm)
+    this.treeNode(true)
     this.refresh()
   },
   methods: {
@@ -407,7 +407,7 @@ export default {
               showClose: true
             })
             this.expandedArray.push(group.pid)
-            this.treeNode(group.pid)
+            this.treeNode()
           })
         } else {
           return false
@@ -451,7 +451,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.treeNode(data.pid)
+          this.treeNode()
         })
       }).catch(() => {
       })
@@ -469,7 +469,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.treeNode(data.sceneId)
+          this.treeNode()
           this.$store.dispatch('dataset/setTable', new Date().getTime())
         })
       }).catch(() => {
@@ -496,9 +496,17 @@ export default {
       }
     },
 
-    treeNode(group) {
-      queryAuthModel({ modelType: 'dataset' }).then(res => {
-        this.tData = res.data
+    treeNode(cache) {
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'dataset' }, !userCache).then(res => {
+        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
 
@@ -682,7 +690,7 @@ export default {
         this.searchTree(val)
       } else {
         this.isTreeSearch = false
-        this.treeNode(this.groupForm)
+        this.treeNode()
       }
     },
     filterNode(value, data) {
diff --git a/frontend/src/views/link/pwd/index.vue b/frontend/src/views/link/pwd/index.vue
index 54211c7e9a..272cc7caa3 100644
--- a/frontend/src/views/link/pwd/index.vue
+++ b/frontend/src/views/link/pwd/index.vue
@@ -85,10 +85,10 @@ export default {
     },
     // 验证密码是否正确 如果正确 设置请求头部带LINK-PWD-TOKEN=entrypt(pwd)再刷新页面
     refresh() {
+      this.msg = null
       this.$refs.pwdForm.validate(valid => {
         if (!valid) return false
         const param = {
-          /* password: encrypt(this.form.password), */
           password: this.form.password,
           resourceId: this.resourceId
         }
@@ -96,7 +96,6 @@ export default {
           if (!res.data) {
             this.msg = this.$t('pblink.pwd_error')
           } else {
-            // window.location.reload()
             this.$emit('fresh-token')
           }
         })
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 0cc388a246..f4fe8aa162 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -92,7 +92,13 @@ export default {
       axiosFinished: false,
       loginTypes: [0],
       isPluginLoaded: false,
-      contentShow: false
+      contentShow: false,
+      clearLocalStorage: [
+        'panel-main-tree',
+        'panel-default-tree',
+        'chart-tree',
+        'dataset-tree'
+      ]
     }
   },
   computed: {
@@ -178,8 +184,14 @@ export default {
         }
       } */
     },
+    initCache() {
+      this.clearLocalStorage.forEach(item => {
+        localStorage.removeItem(item)
+      })
+    },
 
     handleLogin() {
+      this.initCache()
       this.clearOidcMsg()
       this.$refs.loginForm.validate(valid => {
         if (valid) {
diff --git a/frontend/src/views/panel/GrantAuth/ShareHead/index.vue b/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
index 1456935086..6c1c20a62c 100644
--- a/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
+++ b/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
@@ -7,22 +7,20 @@
         </el-col>
 
         <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
-          <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy年-MM月-dd日') : '') }}</span>
+          <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy-MM-dd hh:mm:ss') : '') }}</span>
         </el-col>
 
         <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
-          <el-link type="primary" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>组织</el-checkbox> -->
+          <!-- 分享维度提醒 先注释 因为后面有可能还是需要的 -->
+          <!-- <el-link type="primary" disabled class="share-checked">
             {{ $t('panel.org') }}
           </el-link>
           <el-link type="success" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>角色</el-checkbox> -->
             {{ $t('panel.role') }}
           </el-link>
           <el-link type="info" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>用户</el-checkbox> -->
             {{ $t('panel.user') }}
-          </el-link>
+          </el-link> -->
         </el-col>
       </el-row>
       <el-row style="display: flex;">
@@ -68,6 +66,7 @@
 <script>
 import GrantAuth from '../index'
 import { shareTargets, removeShares } from '@/api/panel/share'
+import bus from '@/utils/bus'
 export default {
   name: 'ShareHead',
   components: { GrantAuth },
@@ -135,7 +134,13 @@ export default {
           this.granterTime = item.createTime
           return item
         }).sort((a, b) => b.type - a.type)
+        if (!this.dynamicTags || this.dynamicTags.length === 0) {
+          this.afterRemoveAll()
+        }
       })
+    },
+    afterRemoveAll() {
+      bus.$emit('refresh-my-share-out')
     }
   }
 }
diff --git a/frontend/src/views/panel/GrantAuth/dept/index.vue b/frontend/src/views/panel/GrantAuth/dept/index.vue
index 6ed78603ba..918ca39768 100644
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@@ -18,13 +18,13 @@
       >
         <span slot-scope="{ node, data }" class="custom-tree-node">
           <span>
-            <span style="margin-left: 6px">{{ data.name }}</span>
+            <span style="margin-left: 6px">{{ node.data.name }}</span>
           </span>
           <span @click.stop>
 
             <div>
               <span class="auth-span">
-                <el-checkbox v-model="data.checked" />
+                <el-checkbox v-model="data.checked" @change="nodeStatusChange(data)" />
               </span>
             </div>
           </span>
@@ -68,7 +68,8 @@ export default {
           return !data.hasChildren
         }
       },
-      expandNodeIds: []
+      expandNodeIds: [],
+      sharesLoad: false
     }
   },
   watch: {
@@ -125,33 +126,36 @@ export default {
       } else {
         param = { conditions: [this.defaultCondition] }
       }
-
-      this.queryShareNodeIds(() => {
-        loadTable(param).then(res => {
-          let data = res.data
-          data = data.map(obj => {
-            if (obj.subCount > 0) {
-              obj.hasChildren = true
-            }
-            return obj
-          })
-
-          this.setCheckExpandNodes(data)
-          this.expandNodeIds = []
-          if (condition && condition.value) {
-            // data = data.map(node => {
-            //   delete (node.hasChildren)
-            //   return node
-            // })
-            this.data = this.buildTree(data)
-            this.$nextTick(() => {
-              // this.expandNodeIds.push()
-              this.expandResult(this.data)
-            })
-          } else {
-            this.data = data
-          }
+      if (!this.sharesLoad) {
+        this.queryShareNodeIds(() => {
+          this.sharesLoad = true
+          this.loadTreeData(param, condition)
         })
+      } else {
+        this.loadTreeData(param, condition)
+      }
+    },
+
+    loadTreeData(param, condition) {
+      loadTable(param).then(res => {
+        let data = res.data
+        data = data.map(obj => {
+          if (obj.subCount > 0) {
+            obj.hasChildren = true
+          }
+          return obj
+        })
+
+        this.setCheckExpandNodes(data)
+        this.expandNodeIds = []
+        if (condition && condition.value) {
+          this.data = this.buildTree(data)
+          this.$nextTick(() => {
+            this.expandResult(this.data)
+          })
+        } else {
+          this.data = data
+        }
       })
     },
 
@@ -185,18 +189,8 @@ export default {
     },
 
     getSelected() {
-    //   const ids = []
-    //   this.searchChecked(ids)
-    //   return {
-    //     deptIds: ids
-    //   }
-      // const ids = []
-      const nodesMap = this.$refs.tree.store.nodesMap
-
-      const ids = Object.values(nodesMap).filter(node => node.data.checked).map(item => item.data.deptId)
-
       return {
-        deptIds: ids
+        deptIds: this.shares
       }
     },
 
@@ -221,24 +215,26 @@ export default {
         const shares = res.data
         const nodeIds = shares.map(share => share.targetId)
         this.shares = nodeIds
-        // this.$nextTick(() => {
-        //   this.setCheckNodes()
-        // })
+
         callBack && callBack()
       })
     },
 
-    // setCheckNodes() {
-    //   this.data.forEach(node => {
-    //     const nodeId = node.deptId
-    //     this.shares.includes(nodeId) && (node.checked = true)
-    //   })
-    // },
     setCheckExpandNodes(rows) {
       rows.forEach(node => {
         const nodeId = node.deptId
         this.shares.includes(nodeId) && (node.checked = true)
       })
+    },
+
+    nodeStatusChange(val) {
+      if (val.checked) {
+        if (!this.shares.includes(val.deptId)) {
+          this.shares.push(val.deptId)
+        }
+      } else {
+        this.shares = this.shares.filter(deptId => deptId !== val.deptId)
+      }
     }
 
   }
diff --git a/frontend/src/views/panel/GrantAuth/index.vue b/frontend/src/views/panel/GrantAuth/index.vue
index f7d1132ca1..8a263b8486 100644
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@@ -59,8 +59,6 @@ export default {
       this.showSearchInput = false
     },
     save() {
-    //   this.$refs[this.activeName].save(this.$t('commons.share_success'))
-    //   this.$emit('close-grant', 0)
       this.fineSave()
     },
     fineSave() {
diff --git a/frontend/src/views/panel/GrantAuth/role/index.vue b/frontend/src/views/panel/GrantAuth/role/index.vue
index 05c69e5960..4b8d77d365 100644
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@@ -2,11 +2,12 @@
   <div class="my_table">
     <el-table
       ref="table"
-      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
+      :data="tableData"
       :show-header="true"
       style="width: 100%"
       :row-style="{height: '35px'}"
-      @filter-change="filterChange"
+      @select="selectOne"
+      @select-all="selectAll"
     >
       <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
       <el-table-column type="selection" fixd />
@@ -18,7 +19,6 @@
 import { roleGrid } from '@/api/system/user'
 import { formatCondition } from '@/utils/index'
 import { loadShares } from '@/api/panel/share'
-/* import { saveShare, loadShares } from '@/api/panel/share' */
 export default {
   name: 'GrantRole',
   props: {
@@ -39,7 +39,15 @@ export default {
       filter_options: [{ text: this.$t('panel.no_auth_role'), value: 0 }, { text: this.$t('panel.auth_role'), value: 1 }],
       fieldName: 'name',
       type: 1, // 类型1代表角色
-      shares: []
+      shares: [],
+
+      tableData: []
+    }
+  },
+  watch: {
+    'keyWord': function(val) {
+      this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
+      this.setCheckNodes()
     }
   },
   created() {
@@ -56,48 +64,22 @@ export default {
       const param = temp || {}
       roleGrid(1, 0, param).then(response => {
         const data = response.data
-        // this.total = data.itemCount
         this.data = data.listObject
+        this.tableData = data.listObject
         this.queryShareNodeIds()
       })
     },
     filterHandler(value, row, column) {
-      // const property = column['property']
-      // return row[property] === value
       const roleId = row['roleId']
       return !(value ^ this.shares.includes(roleId))
     },
 
-    filterChange(obj) {
-      const arr = obj[this.fieldName]
-      if (arr.length === 0) {
-        this.initColumnLabel()
-      } else {
-        this.columnLabel = this.filter_options[arr[0]].text
-      }
-      this.$nextTick(() => {
-        this.setCheckNodes()
-      })
-    },
-
     getSelected() {
       return {
-        roleIds: this.$refs.table.store.states.selection.map(item => item.roleId)
+        roleIds: this.shares
       }
     },
 
-    /* save(msg) {
-      const rows = this.$refs.table.store.states.selection
-      const request = this.buildRequest(rows)
-      saveShare(request).then(res => {
-        this.$success(msg)
-        return true
-      }).catch(err => {
-        this.$error(err.message)
-        return false
-      })
-    }, */
-
     cancel() {
     },
     buildRequest(rows) {
@@ -126,10 +108,39 @@ export default {
     },
 
     setCheckNodes() {
-      this.data.forEach(node => {
-        const nodeId = node.roleId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      this.$nextTick(() => {
+        this.$refs.table.store.states.data.forEach(node => {
+          const nodeId = node.roleId
+          this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+        })
       })
+    },
+    selectOne(selection, row) {
+      if (selection.some(node => node.roleId === row.roleId)) {
+        // 如果选中了 且 已有分享数据不包含当前节点则添加
+        if (!this.shares.includes(row.roleId)) {
+          this.shares.push(row.roleId)
+        }
+      } else {
+        // 如果取消选中 则移除
+        this.shares = this.shares.filter(nodeId => row.roleId !== nodeId)
+        // this.shares.splice(this.shares.findIndex(item => item.roleId === row.roleId), 1)
+      }
+    },
+    selectAll(selection) {
+      // 1.全选
+      if (selection && selection.length > 0) {
+        selection.forEach(node => {
+          if (!this.shares.includes(node.roleId)) {
+            this.shares.push(node.roleId)
+          }
+        })
+      } else {
+        // 2.全部取消
+        const currentNodes = this.$refs.table.store.states.data
+        const currentNodeIds = currentNodes.map(node => node.roleId)
+        this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
+      }
     }
 
   }
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index aaad538641..e75a259064 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -11,15 +11,7 @@
               </span>
               <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
             </span>
-            <!--  <span :class="!!data.msgNode ? 'msg-node-class': ''">
-              <span v-if="!!data.id">
-                <el-button
-                  icon="el-icon-picture-outline"
-                  type="text"
-                />
-              </span>
-              <span style="margin-left: 6px">{{ data.name }}</span>
-            </span> -->
+
           </span>
         </el-tree>
       </div>
@@ -28,9 +20,9 @@
     <el-row>
       <span class="header-title">{{ $t('panel.share_out') }}</span>
       <div class="block" style="margin-top:8px;">
-        <el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true" @node-click="viewMyShare">
+        <el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true">
           <span slot-scope="{ data }" class="custom-tree-node father">
-            <span style="display: flex; flex: 1 1 0%; width: 0px;">
+            <span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
               <span v-if="!!data.id">
                 <svg-icon icon-class="panel" class="ds-icon-scene" />
               </span>
@@ -79,7 +71,18 @@ export default {
       outDatas: []
     }
   },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
   created() {
+    bus.$on('refresh-my-share-out', () => {
+      this.initOutData().then(res => {
+        this.outDatas = res.data
+        this.setMainNull()
+      })
+    })
     this.initData().then(res => {
       this.datas = res.data
       if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@@ -145,7 +148,6 @@ export default {
       })
     },
     removeCurrent(node) {
-      console.log(node)
       const param = {
         panelId: node.id
       }
@@ -156,6 +158,7 @@ export default {
         type: 'warning'
       }).then(() => {
         removeShares(param).then(res => {
+          this.panelInfo && this.panelInfo.id && node.id === this.panelInfo.id && this.setMainNull()
           this.initOutData().then(res => {
             this.outDatas = res.data
           })
@@ -167,6 +170,9 @@ export default {
           message: this.$t('commons.delete_cancelled')
         })
       })
+    },
+    setMainNull() {
+      this.$store.dispatch('panel/setPanelInfo', { id: null, name: '', preStyle: null })
     }
 
   }
diff --git a/frontend/src/views/panel/GrantAuth/user/index.vue b/frontend/src/views/panel/GrantAuth/user/index.vue
index 922fa0067e..1c8eaed21b 100644
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@@ -2,11 +2,12 @@
   <div class="my_table">
     <el-table
       ref="table"
-      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
+      :data="tableData"
       :show-header="true"
       style="width: 100%"
       :row-style="{height: '35px'}"
-      @filter-change="filterChange"
+      @select="selectOne"
+      @select-all="selectAll"
     >
       <el-table-column
         :column-key="fieldName"
@@ -47,7 +48,14 @@ export default {
       filter_options: [{ text: this.$t('panel.unshared_people'), value: 0 }, { text: this.$t('panel.shared_people'), value: 1 }],
       fieldName: 'nickName',
       type: 0, // 类型0代表用户
-      shares: []
+      shares: [],
+      tableData: []
+    }
+  },
+  watch: {
+    'keyWord': function(val) {
+      this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
+      this.setCheckNodes()
     }
   },
   created() {
@@ -63,48 +71,22 @@ export default {
       const param = temp || {}
       userLists(1, 0, param).then(response => {
         const data = response.data
-        // this.total = data.itemCount
         this.data = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
+        this.tableData = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
         this.queryShareNodeIds()
       })
     },
     filterHandler(value, row, column) {
-      // const property = column['property']
-      // return row[property] === value
       const userId = row['userId']
       return !(value ^ this.shares.includes(userId))
     },
 
-    filterChange(obj) {
-      const arr = obj[this.fieldName]
-      if (arr.length === 0) {
-        this.initColumnLabel()
-      } else {
-        this.columnLabel = this.filter_options[arr[0]].text
-      }
-      this.$nextTick(() => {
-        this.setCheckNodes()
-      })
-    },
-
     getSelected() {
       return {
-        userIds: this.$refs.table.store.states.selection.map(item => item.userId)
+        userIds: this.shares
       }
     },
 
-    /*  save(msg) {
-      const rows = this.$refs.table.store.states.selection
-      const request = this.buildRequest(rows)
-      saveShare(request).then(response => {
-        this.$success(msg)
-        return true
-      }).catch(err => {
-        this.$error(err.message)
-        return false
-      })
-    }, */
-
     cancel() {
       console.log('user cancel')
     },
@@ -134,10 +116,38 @@ export default {
     },
 
     setCheckNodes() {
-      this.data.forEach(node => {
-        const nodeId = node.userId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      this.$nextTick(() => {
+        this.$refs.table.store.states.data.forEach(node => {
+          const nodeId = node.userId
+          this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+        })
       })
+    },
+    selectOne(selection, row) {
+      if (selection.some(node => node.userId === row.userId)) {
+        // 如果选中了 且 已有分享数据不包含当前节点则添加
+        if (!this.shares.includes(row.userId)) {
+          this.shares.push(row.userId)
+        }
+      } else {
+        // 如果取消选中 则移除
+        this.shares = this.shares.filter(nodeId => row.userId !== nodeId)
+      }
+    },
+    selectAll(selection) {
+      // 1.全选
+      if (selection && selection.length > 0) {
+        selection.forEach(node => {
+          if (!this.shares.includes(node.userId)) {
+            this.shares.push(node.userId)
+          }
+        })
+      } else {
+        // 2.全部取消
+        const currentNodes = this.$refs.table.store.states.data
+        const currentNodeIds = currentNodes.map(node => node.userId)
+        this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
+      }
     }
 
   }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 992125f75c..77108fb9a2 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -191,6 +191,7 @@
       :opt-from="'panel'"
       :advice-group-id="adviceGroupId"
       style="height: 0px;width:0px;padding:0px;overflow: hidden"
+      :mounted-init="false"
       @newViewInfo="newViewInfo"
     />
 
@@ -521,7 +522,8 @@ export default {
       const stick = evt.target.closest('.el-icon-magic-stick')
       const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
       const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
-      if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen) {
+      const suffix = evt.target.closest('.el-input__suffix')
+      if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen&&!suffix) {
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
         this.showIndex = -1
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 27d429b3c1..28e85e1d8f 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -7,7 +7,8 @@
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a>
+                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)">
+                  {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
             </el-breadcrumb>
@@ -66,7 +67,12 @@
                     @start="start1"
                   >
                     <transition-group>
-                      <div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
+                      <div
+                        v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
+                        :key="item.id"
+                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        class="filter-db-row"
+                      >
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
@@ -81,7 +87,8 @@
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)"> {{ bread.label }}</a>
+                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)">
+                  {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
             </el-breadcrumb>
@@ -135,7 +142,12 @@
                     @start="start1"
                   >
                     <transition-group>
-                      <div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
+                      <div
+                        v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
+                        :key="item.id"
+                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        class="filter-db-row"
+                      >
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
@@ -171,7 +183,13 @@
                       @end="end2"
                     >
                       <transition-group class="list-group" :data-value="$t('panel.drag_here')">
-                        <drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
+                        <drag-item
+                          v-for="(item,index) in selectField"
+                          :key="item.id"
+                          :item="item"
+                          :index="index"
+                          @closeItem="closeItem"
+                        />
                       </transition-group>
                     </draggable>
                   </el-row>
@@ -192,46 +210,72 @@
               />
             </div>
           </el-col>
-          <el-col :span="16"><div class="filter-options-right">
-            <span style="padding-right: 10px;">
-              <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
-              <el-popover
-                v-model="titlePopovervisible"
-                placement="bottom-end"
-                :disabled="!componentInfo.options.attrs.showTitle"
-                width="200"
-              >
-                <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
-                  <el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
-                </div>
+          <el-col :span="16">
+            <div class="filter-options-right">
+              <span style="padding-right: 10px;">
+                <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
+                </el-checkbox>
+                <el-popover
+                  v-model="titlePopovervisible"
+                  placement="bottom-end"
+                  :disabled="!componentInfo.options.attrs.showTitle"
+                  width="200"
+                >
+                  <div
+                    style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
+                  >
+                    <el-input
+                      v-model="componentInfo.options.attrs.title"
+                      placeholder="请输入标题"
+                      type="textarea"
+                      maxlength="15"
+                      show-word-limit
+                    />
+                  </div>
 
-                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" />
-              </el-popover>
-            </span>
-            <span style="padding-left: 10px;">
-              <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+                  <i
+                    slot="reference"
+                    :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
+                    class="el-icon-setting i-filter"
+                  />
+                </el-popover>
+              </span>
+              <span style="padding-left: 10px;">
+                <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
+                  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
 
-              <el-popover
-                v-model="popovervisible"
-                placement="bottom-end"
-                :disabled="!componentInfo.options.attrs.enableRange"
-                width="200"
-              >
-                <div class="view-container-class">
-                  <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                    <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
-                      <span>
-                        <svg-icon :icon-class="item.type" class="chart-icon" />
-                        <span style="margin-left: 6px">{{ item.name }}</span>
-                      </span>
-                    </el-checkbox>
-                  </el-checkbox-group>
-                </div>
+                <el-popover
+                  v-model="popovervisible"
+                  placement="bottom-end"
+                  :disabled="!componentInfo.options.attrs.enableRange"
+                  width="200"
+                >
+                  <div class="view-container-class">
+                    <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
+                      <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
+                        <div class="span-div">
+                          <svg-icon :icon-class="item.type" class="chart-icon" />
+                          <span
+                            v-if="item.name && item.name.length <= 7"
+                            style="margin-left: 6px"
+                          >{{ item.name }}</span>
+                          <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
+                            <span style="margin-left: 6px">{{ item.name }}</span>
+                          </el-tooltip>
+                        </div>
 
-                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
-              </el-popover>
-            </span>
-          </div>
+                      </el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+
+                  <i
+                    slot="reference"
+                    :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
+                    class="el-icon-setting i-filter"
+                  />
+                </el-popover>
+              </span>
+            </div>
 
           </el-col>
         </el-row>
@@ -261,11 +305,22 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
-import { mapState } from 'vuex'
-// import { ApplicationContext } from '@/utils/ApplicationContext'
-import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset'
-import { viewsWithIds } from '@/api/panel/view'
-import { authModel } from '@/api/system/sysAuth'
+import {
+  mapState
+} from 'vuex'
+  // import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+  groupTree,
+  fieldList,
+  fieldValues,
+  post
+} from '@/api/dataset/dataset'
+import {
+  viewsWithIds
+} from '@/api/panel/view'
+import {
+  authModel
+} from '@/api/system/sysAuth'
 export default {
   name: 'FilterDialog',
   components: {
@@ -292,12 +347,16 @@ export default {
       activeName: 'dataset',
       showDomType: 'tree',
       comShowDomType: 'view',
-      dataSetBreads: [
-        { label: this.$t('panel.data_list'), link: false, type: 'root' }
-      ],
-      componentSetBreads: [
-        { label: this.$t('panel.component_list'), link: false, type: 'root' }
-      ],
+      dataSetBreads: [{
+        label: this.$t('panel.data_list'),
+        link: false,
+        type: 'root'
+      }],
+      componentSetBreads: [{
+        label: this.$t('panel.component_list'),
+        link: false,
+        type: 'root'
+      }],
       datas: [],
       sceneDatas: [],
       //   viewDatas: [],
@@ -441,7 +500,8 @@ export default {
         // 判断根节点 ###
         el.type = el.modelInnerType
         el.isLeaf = el.leaf
-        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
+        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this
+          .defaultProps.parentId] === '0') {
           roots.push(el)
           return
         }
@@ -512,11 +572,19 @@ export default {
       tail.link = true
     },
     addTail(node) {
-      const tail = { link: false, label: node.label || node.name, type: node.type }
+      const tail = {
+        link: false,
+        label: node.label || node.name,
+        type: node.type
+      }
       this.dataSetBreads.push(tail)
     },
     comAddTail(node) {
-      const tail = { link: false, label: node.label || node.name, type: node.type }
+      const tail = {
+        link: false,
+        label: node.label || node.name,
+        type: node.type
+      }
       this.componentSetBreads.push(tail)
     },
 
@@ -529,19 +597,19 @@ export default {
           return
         }
       }
-    //   this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
-    //   this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
+      //   this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
+      //   this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
     },
     comRemoveTail() {
       this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
       this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
     },
     backToLink(bread) {
-    //   if (bread.type === 'field') {
-    //     this.showDomType = 'db'
-    //   } else {
-    //     this.showDomType = 'tree'
-    //   }
+      //   if (bread.type === 'field') {
+      //     this.showDomType = 'db'
+      //   } else {
+      //     this.showDomType = 'tree'
+      //   }
       this.showDomType = 'tree'
 
       this.removeTail(bread)
@@ -645,7 +713,7 @@ export default {
 
     multipleChange(value) {
       // this.componentInfo.options.attrs.multiple = value
-    //   this.componentInfo.options.value = null
+      //   this.componentInfo.options.value = null
       this.$emit('re-fresh-component', this.componentInfo)
     },
 
@@ -668,16 +736,19 @@ export default {
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
   .my-form-item {
-      cursor: text;
+    cursor: text;
   }
+
   .de-dialog-container {
     height: 50vh !important;
 
   }
+
   .ms-aside-container {
     width: 40% !important;
     min-width: 230px !important;
@@ -697,179 +768,202 @@ export default {
 
   .filter-field {
     //   background: #99a9bf;
-      border-radius: 4px;
-      height: 45px;
-      .field-content {
-        position: relative;
-        display: table;
-        width: 100%;
-        height: 100%;
-        white-space: nowrap;
+    border-radius: 4px;
+    height: 45px;
 
-        .field-content-left {
-            width: 50px;
-            max-width: 50px;
-            position: relative;
-            display: table-cell;
-            vertical-align: middle;
-            margin: 0px;
-            padding: 8px;
-            height: 100%;
-            border-right: none;
-            border: 1px solid var(--TableBorderColor, #E6E6E6);;
-            .field-content-text {
-                box-sizing: border-box;
-                overflow: hidden;
-                overflow-x: hidden;
-                overflow-y: hidden;
-                word-break: break-all;
-            }
-        }
-        .field-content-right {
-            border-left: none;
-            color: #9ea6b2;
-            border: 1px solid var(--TableBorderColor, #E6E6E6);
-            width: 0%;
-            max-width: 0%;
-            position: relative;
-            display: table-cell;
-            vertical-align: middle;
-            margin: 0px;
-            padding: 0 0 0 0;
-            height: 100%;
+    .field-content {
+      position: relative;
+      display: table;
+      width: 100%;
+      height: 100%;
+      white-space: nowrap;
+
+      .field-content-left {
+        width: 50px;
+        max-width: 50px;
+        position: relative;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0px;
+        padding: 8px;
+        height: 100%;
+        border-right: none;
+        border: 1px solid var(--TableBorderColor, #E6E6E6);
+        ;
+
+        .field-content-text {
+          box-sizing: border-box;
+          overflow: hidden;
+          overflow-x: hidden;
+          overflow-y: hidden;
+          word-break: break-all;
         }
+      }
+
+      .field-content-right {
+        border-left: none;
+        color: #9ea6b2;
+        border: 1px solid var(--TableBorderColor, #E6E6E6);
+        width: 0%;
+        max-width: 0%;
+        position: relative;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0px;
+        padding: 0 0 0 0;
+        height: 100%;
+      }
     }
 
   }
+
   .filter-options-left {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex-wrap: nowrap;
-      height: 50px;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 50px;
   }
+
   .filter-options-right {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      flex-wrap: nowrap;
-      height: 50px;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    height: 50px;
   }
 
   .filter-content {
-      height: calc(50vh - 120px);
-      top: 160px;
+    height: calc(50vh - 120px);
+    top: 160px;
 
   }
 
   .filter-dialog-tabs {
-      border: 1px solid var(--TableBorderColor, #E6E6E6);
-      padding: 10px;
-      height: 100%;
-      >>> div.el-tabs__content {
-          height: calc(100% - 55px);
-      }
+    border: 1px solid var(--TableBorderColor, #E6E6E6);
+    padding: 10px;
+    height: 100%;
+
+    >>>div.el-tabs__content {
+      height: calc(100% - 55px);
+    }
   }
 
   .filter-common {
-      margin: 10px 5px;
+    margin: 10px 5px;
 
   }
 
   .component-header {
-      margin: 5px 5px 15px;
+    margin: 5px 5px 15px;
   }
 
   .component-result-content {
-      height: calc(50vh - 150px);
-      overflow-y: auto;
+    height: calc(50vh - 150px);
+    overflow-y: auto;
   }
 
   .link-text {
-      font-weight: 450  !important;
-      color: #409EFF;
+    font-weight: 450 !important;
+    color: #409EFF;
   }
+
   .filter-db-row {
-      i {
-          color: #3685f2;
-      }
+    i {
+      color: #3685f2;
+    }
+
     // background-color: #3685f2;
     // color: #fff;
   }
+
   .filter-db-row:hover {
-      background-color: var(--background-color-base, #f5f7fa) !important;
-      cursor: pointer;
+    background-color: var(--background-color-base, #f5f7fa) !important;
+    cursor: pointer;
   }
+
   .filter-db-row-checked:hover {
-      background-color: var(--background-color-base, #f5f7fa) !important;
-      color: inherit;
-      cursor: pointer;
-      i {
-        background-color: inherit;
-        color: #3685f2;
-      }
+    background-color: var(--background-color-base, #f5f7fa) !important;
+    color: inherit;
+    cursor: pointer;
+
+    i {
+      background-color: inherit;
+      color: #3685f2;
+    }
   }
+
   .filter-db-row-checked {
     background-color: #3685f2 !important;
     color: #fff;
+
     i {
-        background-color: #3685f2;
-        color: #fff;
+      background-color: #3685f2;
+      color: #fff;
     }
   }
+
   .draggable-group {
     display: inline-block;
     width: 100%;
     height: calc(100% - 6px);
   }
+
   .box-card {
-      width: 100%;
-      height: 100%;
+    width: 100%;
+    height: 100%;
   }
+
   .i-filter {
     text-align: center;
     margin-left: 5px;
     margin-top: 1px;
   }
+
   .i-filter-inactive {
-      color: #9ea6b2!important;
-      cursor: not-allowed!important;
+    color: #9ea6b2 !important;
+    cursor: not-allowed !important;
   }
+
   .i-filter-active {
-      cursor: pointer!important;
+    cursor: pointer !important;
   }
 
   .view-container-class {
 
-      min-height: 150px;
-      max-height: 200px;
-      width: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-      word-break:break-all;
-      position: relative;
-        >>> label {
-            width: 100%;
-            margin-left: 0px !important;
-        }
+    min-height: 150px;
+    max-height: 200px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    word-break: break-all;
+    position: relative;
+
   }
 
   .list-group:empty,
-  .list-group > div:empty {
+  .list-group>div:empty {
     display: inline-block;
     width: 100%;
     height: calc(100% - 13px);
   }
 
   .list-group:empty:before,
-  .list-group > div:empty:before {
+  .list-group>div:empty:before {
     content: attr(data-value);
   }
 
   .blackTheme .theme-drag {
-      background-color: var(--MainBG, #fff);
+    background-color: var(--MainBG, #fff);
+  }
+
+  .span-div {
+    width: 135px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 2fa0a01e5b..9e229ba15e 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -233,6 +233,7 @@ import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
 } from '@/views/panel/panel'
 import TreeSelector from '@/components/TreeSelector'
+import { queryAuthModel } from '@/api/authModel/authModel'
 
 export default {
   name: 'PanelList',
@@ -334,7 +335,11 @@ export default {
       searchMap: {
         all: this.$t('commons.all'),
         folder: this.$t('commons.folder')
-      }
+      },
+      initLocalStorage: [
+        'chart',
+        'dataset'
+      ]
     }
   },
   computed: {
@@ -367,9 +372,20 @@ export default {
     this.$store.commit('setComponentData', [])
     this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
     this.defaultTree()
-    this.tree(this.groupForm)
+    this.tree(true)
+    this.initCache()
   },
   methods: {
+    initCache() {
+      // 初始化时提前加载视图和数据集的缓存
+      this.initLocalStorage.forEach(item => {
+        if (!localStorage.getItem(item + '-tree')) {
+          queryAuthModel({ modelType: item }, false).then(res => {
+            localStorage.setItem(item + '-tree', JSON.stringify(res.data))
+          })
+        }
+      })
+    },
     closeEditPanelDialog(panelInfo) {
       this.editPanel.visible = false
       if (panelInfo) {
@@ -392,7 +408,7 @@ export default {
           }
           this.activeNodeAndClick(panelInfo)
         } else {
-          this.tree(this.groupForm)
+          this.tree()
         }
       }
     },
@@ -535,7 +551,7 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.tree(this.groupForm)
+            this.tree()
             this.defaultTree()
           })
         } else {
@@ -562,7 +578,7 @@ export default {
             showClose: true
           })
           this.clearCanvas()
-          this.tree(this.groupForm)
+          this.tree()
           this.defaultTree()
         })
       }).catch(() => {
@@ -591,17 +607,32 @@ export default {
         sort: 'node_type desc,name asc'
       }
     },
-    tree(group) {
-      groupTree(group).then(res => {
-        this.tData = res.data
+    tree(cache = false) {
+      const modelInfo = localStorage.getItem('panel-main-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      groupTree(this.groupForm, !userCache).then(res => {
+        localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
     defaultTree() {
       const requestInfo = {
         panelType: 'system'
       }
-      defaultTree(requestInfo).then(res => {
-        this.defaultData = res.data
+      const modelInfo = localStorage.getItem('panel-default-tree')
+      if (modelInfo) {
+        this.defaultData = JSON.parse(modelInfo)
+      }
+      defaultTree(requestInfo, false).then(res => {
+        localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
+        if (!modelInfo) {
+          this.defaultData = res.data
+        }
       })
     },
 
@@ -768,7 +799,7 @@ export default {
       this.moveInfo.pid = this.tGroup.id
       this.moveInfo['optType'] = 'move'
       panelSave(this.moveInfo).then(response => {
-        this.tree(this.groupForm)
+        this.tree()
         this.closeMoveGroup()
       })
     },
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index 5c16329626..82b416cfd8 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -4,7 +4,7 @@
       <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
-          <panel-list ref="panelList" v-if="activeName==='PanelList'" />
+          <panel-list v-if="activeName==='PanelList'" ref="panelList" />
         </el-tab-pane>
         <el-tab-pane name="panels_star" :lazy="true">
           <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span>
@@ -17,7 +17,7 @@
       </el-tabs>
     </de-aside-container>
     <de-main-container>
-      <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName"  @editPanel="editPanel"/>
+      <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName" @editPanel="editPanel" />
     </de-main-container>
   </de-container>
 </template>