Merge branch 'dev' into pr@dev@fix_router-change

2022-09-23 14:28:03 +08:00 · 2022-09-23 14:28:03 +08:00 · 24faf0c463
commit 24faf0c463
parent 7f0c749601 8717f51cf3
27 changed files with 813 additions and 371 deletions
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@ -23,6 +23,7 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;

 import javax.annotation.Resource;
+import java.util.Collections;
 import java.util.List;
 import java.util.Map;

@ -44,8 +45,8 @@ public class DataSetTableController {
    }, logical = Logical.AND)
    @ApiOperation("批量保存")
    @PostMapping("batchAdd")
-    public void batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
-        dataSetTableService.batchInsert(datasetTable);
+    public List<DatasetTable> batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
+        return dataSetTableService.batchInsert(datasetTable);
    }

    @DePermissions(value = {
@ -55,11 +56,11 @@ public class DataSetTableController {
    }, logical = Logical.AND)
    @ApiOperation("更新")
    @PostMapping("update")
-    public void save(@RequestBody DataSetTableRequest datasetTable) throws Exception {
+    public List<DatasetTable> save(@RequestBody DataSetTableRequest datasetTable) throws Exception {
        if (datasetTable.getType().equalsIgnoreCase("excel")) {
-            dataSetTableService.saveExcel(datasetTable);
+            return dataSetTableService.saveExcel(datasetTable);
        } else {
-            dataSetTableService.save(datasetTable);
+            return Collections.singletonList(dataSetTableService.save(datasetTable));
        }
    }

--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@ -145,16 +145,18 @@ public class DataSetTableService {
    private static Logger logger = LoggerFactory.getLogger(ClassloaderResponsity.class);

    @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
-    public void batchInsert(List<DataSetTableRequest> datasetTable) throws Exception {
+    public List<DatasetTable> batchInsert(List<DataSetTableRequest> datasetTable) throws Exception {
        // 保存之前校验table名称
        checkNames(datasetTable);
+        List<DatasetTable> list = new ArrayList<>();
        for (DataSetTableRequest table : datasetTable) {
-            save(table);
+            list.add(save(table));
            // 清理权限缓存
            CacheUtils.removeAll(AuthConstants.USER_DATASET_NAME);
            CacheUtils.removeAll(AuthConstants.ROLE_DATASET_NAME);
            CacheUtils.removeAll(AuthConstants.DEPT_DATASET_NAME);
        }
+        return list;
    }

    private void extractData(DataSetTableRequest datasetTable) throws Exception {
@ -176,10 +178,11 @@ public class DataSetTableService {

    @Transactional(propagation = Propagation.NOT_SUPPORTED)
    @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
-    public void saveExcel(DataSetTableRequest datasetTable) throws Exception {
+    public List<DatasetTable> saveExcel(DataSetTableRequest datasetTable) throws Exception {
        List<String> datasetIdList = new ArrayList<>();

        if (StringUtils.isEmpty(datasetTable.getId())) {
+            List<DatasetTable> list = new ArrayList<>();
            if (datasetTable.isMergeSheet()) {
                Map<String, List<ExcelSheetData>> map = datasetTable.getSheets().stream()
                        .collect(Collectors.groupingBy(ExcelSheetData::getFieldsMd5));
@ -208,6 +211,7 @@ public class DataSetTableService {
                    sysAuthService.copyAuth(sheetTable.getId(), SysAuthConstants.AUTH_SOURCE_TYPE_DATASET);
                    saveExcelTableField(sheetTable.getId(), excelSheetDataList.get(0).getFields(), true);
                    datasetIdList.add(sheetTable.getId());
+                    list.add(sheetTable);
                    DeLogUtils.save(SysLogConstants.OPERATE_TYPE.CREATE, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
                }
                datasetIdList.forEach(datasetId -> {
@ -239,16 +243,16 @@ public class DataSetTableService {
                    sysAuthService.copyAuth(sheetTable.getId(), SysAuthConstants.AUTH_SOURCE_TYPE_DATASET);
                    saveExcelTableField(sheetTable.getId(), sheet.getFields(), true);
                    datasetIdList.add(sheetTable.getId());
+                    list.add(sheetTable);
                    DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
                }
                datasetIdList.forEach(datasetId -> {
                    commonThreadPool.addTask(() -> extractDataService.extractExcelData(datasetId, "all_scope", "初始导入",
                            null, datasetIdList));
                });
-
-
            }
-            return;
+
+            return list;
        }

        List<ExcelSheetData> excelSheetDataList = new ArrayList<>();
@ -287,6 +291,7 @@ public class DataSetTableService {
                    null, Arrays.asList(datasetTable.getId())));
        }
        DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
+        return Collections.singletonList(datasetTable);
    }

    @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
--- a/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
@ -168,6 +168,7 @@ public class PanelAppTemplateService {
            DataSetTableRequest datasetRequest = new DataSetTableRequest();
            BeanUtils.copyBean(datasetRequest, datasetTable);
            datasetRequest.setOptFrom("appApply");
+            datasetRequest.setSyncType("sync_now");
            DatasetTable newDataset = dataSetTableService.save(datasetRequest);
            datasetsRelaMap.put(oldId, newDataset.getId());
        }
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@ -25,7 +25,6 @@
 </template>

 <script>
-import { log } from '@antv/g2plot/lib/utils';
 import tableBody from "./tableBody";
 export default {
  components: { tableBody },
@ -112,6 +111,9 @@ export default {
    },
  },
  methods: {
+    toggleRowSelection(row) {
+      this.$refs.table.toggleRowSelection(row, true);
+    },
    handlerSelected(multipleSelection) {
      this.multipleSelectionCach = [
        ...this.multipleSelectionCach,
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -445,7 +445,7 @@ export default {
    cost: 'cost',
    developer: 'developer',
    edition: 'edition',
-    installation_time: 'Installation time:'
+    installation_time: 'Install time'
  },
  table: {
    dynamicTips1: 'Fixed header, sorted by header order',
@ -910,6 +910,11 @@ export default {
    password_input_error: 'Original password input error'
  },
  chart: {
+    margin_model: 'Model',
+    margin_model_auto: 'Auto',
+    margin_model_absolute: 'Absolute',
+    margin_model_relative: 'Relative',
+    margin_placeholder: 'Please enter a number from 0-100',
    rich_text_view_result_tips: 'The rich text view selects only the first result',
    rich_text_view: 'Rich Text View',
    view_reset: 'View Reset',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -910,6 +910,11 @@ export default {
    password_input_error: '原始密碼輸入錯誤'
  },
  chart: {
+    margin_model: '模式',
+    margin_model_auto: '自動',
+    margin_model_absolute: '絕對',
+    margin_model_relative: '相對',
+    margin_placeholder: '請輸入0-100數字',
    rich_text_view_result_tips: '富文本只选取第一条结果',
    rich_text_view: '富文本视图',
    view_reset: '視圖重置',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -909,6 +909,11 @@ export default {
    password_input_error: '原始密码输入错误'
  },
  chart: {
+    margin_model: '模式',
+    margin_model_auto: '自动',
+    margin_model_absolute: '绝对',
+    margin_model_relative: '相对',
+    margin_placeholder: '请输入0-100数字',
    rich_text_view_result_tips: '富文本只选取第一条结果',
    rich_text_view: '富文本视图',
    view_reset: '视图重置',
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@ -1389,6 +1389,14 @@ div:focus {
    width: 2px;
    background: #3370ff;
  }
+
+  .explain {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-left: 8px;
+    color: var(--deTextSecondary, #646a73);
+  }
 }

 .de-foot {
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -217,6 +217,15 @@ export const DEFAULT_LEGEND_STYLE = {
    fontSize: '12'
  }
 }
+
+export const DEFAULT_MARGIN_STYLE = {
+  marginModel: 'auto',
+  marginTop: 40,
+  marginBottom: 44,
+  marginLeft: 15,
+  marginRight: 10
+}
+
 export const DEFAULT_XAXIS_STYLE = {
  show: true,
  position: 'bottom',
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@ -186,11 +186,38 @@ export function componentStyle(chart_option, chart) {
      chart_option.radar.splitLine = customStyle.split.splitLine
      chart_option.radar.splitArea = customStyle.split.splitArea
    }
+    if (customStyle.margin && customStyle.margin.marginModel && customStyle.margin.marginModel !== 'auto') {
+      const unit = getMarginUnit(customStyle.margin)
+      const result = { containLabel: true }
+      const realUnit = (unit === '%' ? unit : '')
+      if (customStyle.margin.marginTop != null) {
+        result.top = customStyle.margin.marginTop + realUnit
+      }
+      if (customStyle.margin.marginBottom != null) {
+        result.bottom = customStyle.margin.marginBottom + realUnit
+      }
+      if (customStyle.margin.marginLeft != null) {
+        result.left = customStyle.margin.marginLeft + realUnit
+      }
+      if (customStyle.margin.marginRight != null) {
+        result.right = customStyle.margin.marginRight + realUnit
+      }
+      if (!chart_option.grid) {
+        chart_option.grid = {}
+      }
+      Object.assign(chart_option.grid, JSON.parse(JSON.stringify(result)))
+    }
    if (customStyle.background) {
      chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
    }
  }
 }
+export const getMarginUnit = marginForm => {
+  if (!marginForm.marginModel || marginForm.marginModel === 'auto') return null
+  if (marginForm.marginModel === 'absolute') return 'px'
+  if (marginForm.marginModel === 'relative') return '%'
+  return null
+}

 const hexToRgba = (hex, opacity) => {
  let rgbaColor = ''
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@ -1538,9 +1538,17 @@ export const TYPE_CONFIGS = [
    properties: [
      'color-selector',
      'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'quotaColor',
        'dimensionColor'
@ -1582,9 +1590,17 @@ export const TYPE_CONFIGS = [
    properties: [
      'color-selector',
      'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'quotaColor',
        'dimensionColor'
@ -1627,9 +1643,17 @@ export const TYPE_CONFIGS = [
      'color-selector',
      'size-selector',
      'label-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -1674,9 +1698,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -1754,9 +1786,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -1835,9 +1875,17 @@ export const TYPE_CONFIGS = [
      'y-axis-selector',
      'y-axis-ext-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -1920,9 +1968,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -1999,9 +2055,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2078,9 +2142,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2157,9 +2229,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2236,9 +2316,17 @@ export const TYPE_CONFIGS = [
      'label-selector',
      'tooltip-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2294,9 +2382,17 @@ export const TYPE_CONFIGS = [
      'label-selector',
      'tooltip-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2354,9 +2450,17 @@ export const TYPE_CONFIGS = [
      'tooltip-selector',
      'split-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2417,9 +2521,17 @@ export const TYPE_CONFIGS = [
      'size-selector',
      'label-selector',
      'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2468,9 +2580,17 @@ export const TYPE_CONFIGS = [
      'x-axis-selector',
      'y-axis-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2544,9 +2664,17 @@ export const TYPE_CONFIGS = [
      'label-selector',
      'tooltip-selector',
      'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
@ -2599,9 +2727,17 @@ export const TYPE_CONFIGS = [
      'color-selector',
      'label-selector',
      'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
    ],
    propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
      'color-selector': [
        'value',
        'custom',
--- a/frontend/src/views/chart/components/component-style/MarginSelector.vue
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@ -0,0 +1,171 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
+        <el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
+          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
+            <el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
+            <el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
+            <el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
+          <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
+            <el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
+            <el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
+            <el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
+            <el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_MARGIN_STYLE } from '../../chart/chart'
+import { getMarginUnit } from '@/views/chart/chart/common/common'
+export default {
+  name: 'MarginSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      marginForm: JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)),
+      rules: {
+        marginTop: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginBottom: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginLeft: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginRight: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ]
+      }
+    }
+  },
+  computed: {
+    unitSuffix() {
+      return getMarginUnit(this.marginForm)
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.margin) {
+          this.marginForm = customStyle.margin
+        }
+      }
+    },
+
+    changeMarginStyle(value, modifyName) {
+      this.marginForm['modifyName'] = modifyName
+      this.$emit('onMarginChange', this.marginForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
+    },
+    validateMarginNumber(rule, value, callBack) {
+      if (value == null || value === '') {
+        callBack()
+        return
+      }
+      if (value < 0 || value > 100) {
+        callBack(new Error(this.$t('chart.margin_placeholder')))
+        this.marginForm[rule.field] = 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
--- a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@ -139,7 +139,7 @@ export default {
        field: '0',
        value: '',
        color: '#ff0000ff',
-        backgroundColor: '#ffffffff',
+        backgroundColor: '#ffffff00',
        min: '0',
        max: '1'
      },
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -757,6 +757,7 @@
            @onChangeSplitForm="onChangeSplitForm"
            @onTextChange="onTextChange"
            @onLegendChange="onLegendChange"
+            @onMarginChange="onMarginChange"
            @onChangeBackgroundForm="onChangeBackgroundForm"
          />
        </el-tab-pane>
@ -1999,6 +2000,10 @@ export default {
      this.view.customStyle.legend = val
      this.calcStyle()
    },
+    onMarginChange(val) {
+      this.view.customStyle.margin = val
+      this.calcStyle()
+    },

    onLabelChange(val) {
      this.view.customAttr.label = val
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@ -260,6 +260,21 @@
              @onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
            />
          </el-collapse-item>
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['margin-selector'])"
+            name="margin"
+            :title="$t('panel.margin')"
+          >
+            <margin-selector
+              v-if="showProperties('margin-selector')"
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              :property-inner="propertyInnerAll['margin-selector']"
+              @onMarginChange="onMarginChange($event,'margin-selector')"
+            />
+
+          </el-collapse-item>
        </el-collapse>
      </el-row>
    </div>
@ -284,6 +299,7 @@ import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxis
 import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
 import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
 import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
+import MarginSelector from '@/views/chart/components/component-style/MarginSelector'
 import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
@ -314,6 +330,7 @@ export default {
    SizeSelectorAntV,
    SizeSelector,
    ColorSelector,
+    MarginSelector,
    PluginCom
  },
  props: {
@ -432,6 +449,10 @@ export default {
      val['propertyName'] = propertyName
      this.$emit('onLegendChange', val)
    },
+    onMarginChange(val, propertyName) {
+      val['propertyName'] = propertyName
+      this.$emit('onMarginChange', val)
+    },
    onChangeBackgroundForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeBackgroundForm', val)
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@ -1,9 +1,9 @@
 <template>
  <div class="dataset-api">
-    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
+    <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
      <i class="el-icon-d-arrow-right" />
    </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
      <p class="select-ds">
        {{ $t('deDataset.select_data_source') }}
        <i class="el-icon-d-arrow-left" @click="showLeft = false" />
@ -153,9 +153,11 @@
 <script>
 import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
+import cancelMix from './cancelMix'

 export default {
  name: 'AddApi',
+  mixins: [cancelMix],
  props: {
    param: {
      type: Object,
@ -281,7 +283,7 @@ export default {
      const that = this
      setTimeout(function() {
        const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
      }, 10)
    },
    setActiveName({ name, datasourceId, enableCheck }) {
@ -350,17 +352,12 @@ export default {
      post('/dataset/table/batchAdd', tables)
        .then((response) => {
          this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
        })
        .finally(() => {
          this.loading = false
        })
    },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
    dataReset() {
      this.searchTable = ''
      this.options = []
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@ -1,9 +1,9 @@
 <template>
  <div class="dataset-db" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
      <i class="el-icon-d-arrow-right"></i>
    </p>
-    <div class="table-list" v-else>
+    <div class="table-list" v-show="showLeft">
      <p class="select-ds">
        {{ $t('deDataset.select_data_source') }}
        <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
@ -158,10 +158,10 @@
 import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { engineMode, dbPreview } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import cancelMix from './cancelMix'
 export default {
  name: 'AddDB',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
  props: {
    param: {
      type: Object,
@ -312,7 +312,7 @@ export default {
      const that = this
      setTimeout(function () {
        const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
      }, 10)
    },
    setActiveName({ name, datasourceId, enableCheck }) {
@ -368,16 +368,12 @@ export default {
      post('/dataset/table/batchAdd', tables)
        .then((response) => {
          this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
        })
        .finally(() => {
          this.loading = false
        })
    },
-
-    cancel() {
-      this.$router.back()
-    },
    dataReset() {
      this.searchTable = ''
      this.options = []
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@ -1,9 +1,9 @@
 <template>
  <div class="dataset-excel" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
      <i class="el-icon-d-arrow-right"></i>
    </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
      <p class="select-ds">
        <span
          >{{ $t('deDataset.select_data_table ') }}
@ -192,12 +192,13 @@ import i18n from '@/lang'
 import { $alert, $confirm } from '@/utils/message'
 import store from '@/store'
 import msgCfm from '@/components/msgCfm/index'
+import cancelMix from './cancelMix'

 const token = getToken()

 export default {
  name: 'AddExcel',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
  props: {
    param: {
      type: Object,
@ -500,7 +501,7 @@ export default {
            this.loading = true
            post('/dataset/table/update', table).then((response) => {
              this.openMessageSuccess('deDataset.set_saved_successfully')
-              this.cancel()
+              this.cancel(response.data)
            })
          })
          .catch((action) => {
@ -512,7 +513,7 @@ export default {
            post('/dataset/table/update', table)
              .then((response) => {
                this.openMessageSuccess('deDataset.set_saved_successfully')
-                this.cancel()
+                this.cancel(response.data)
              })
              .finally(() => {
                this.loading = false
@ -526,16 +527,13 @@ export default {
        post('/dataset/table/update', table)
          .then((response) => {
            this.openMessageSuccess('deDataset.set_saved_successfully')
-            this.cancel()
+            this.cancel(response.data)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
-    cancel() {
-      this.$router.back()
-    },
    dataReset() {
      this.searchTable = ''
      this.options = []
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@ -371,11 +371,12 @@ import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
 import { engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import cancelMix from './cancelMix'
+import _ from 'lodash'
 export default {
  name: 'AddSQL',
  components: { codemirror },
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
  props: {
    param: {
      type: Object,
@ -488,6 +489,11 @@ export default {
      handler: function () {
        this.initTableInfo()
      }
+    },
+    sqlHeight: {
+      handler: function () {
+        this.calHeight()
+      }
    }
  },
  mounted() {
@ -560,14 +566,11 @@ export default {
        this.tableData = response.data
      })
    },
-    calHeight() {
-      const that = this
-      setTimeout(function () {
-        const currentHeight = document.documentElement.clientHeight
-        that.height =
-          currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
-      }, 10)
-    },
+    calHeight: _.debounce(function() {
+      const sqlHeight = Math.max(this.sqlHeight, 248)
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
+    }, 200),
    initDataSource() {
      listDatasource().then((response) => {
        this.options = response.data.filter((item) => item.type !== 'api')
@ -636,7 +639,7 @@ export default {
        return
      }
      this.parseVariable()
-      this.loading = true;
+      this.loading = true
      const table = {
        id: this.param.tableId,
        name: this.param.name,
@ -651,18 +654,15 @@ export default {
          isBase64Encryption: true
        })
      }
-      post('/dataset/table/update', table).then((response) => {
-        this.openMessageSuccess('deDataset.set_saved_successfully')
-        this.cancel()
-      }).finally(() => {
-        this.loading = false;
-      }) 
+      post('/dataset/table/update', table)
+        .then((response) => {
+          this.openMessageSuccess('deDataset.set_saved_successfully')
+          this.cancel(response.data)
+        })
+        .finally(() => {
+          this.loading = false
+        })
    },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
    showSQL(val) {
      this.sql = val || ''
    },
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@ -41,7 +41,7 @@
        }}</span>
        <span @mousedown="mousedownDrag" class="drag"></span>
      </div>
-      <union-preview :table="previewTable" :dataset="dataset" />
+      <union-preview :unionHeight="unionHeight" :table="previewTable" :dataset="dataset" />
    </div>
    <!--选择数据集-->
    <el-drawer
@ -107,8 +107,10 @@ import datasetTree from '@/views/dataset/common/datasetTree'
 import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 import { post } from '@/api/dataset/dataset'
 import UnionPreview from '@/views/dataset/add/union/UnionPreview'
+import cancelMix from './cancelMix'
 export default {
  name: 'AddUnion',
+  mixins: [cancelMix],
  components: {
    UnionPreview,
    UnionEdit,
@ -218,14 +220,11 @@ export default {
      }
      post('/dataset/table/update', table).then((response) => {
        this.$emit('saveSuccess', table)
-        this.cancel()
+        this.cancel(response.data)
      }).finally(() => {
        this.loading = false;
      }) 
    },
-    cancel() {
-      this.$router.back()
-    },
    selectDs() {
      this.selectDsDialog = true
    },
--- a/frontend/src/views/dataset/add/cancelMix.js
+++ b/frontend/src/views/dataset/add/cancelMix.js
@ -0,0 +1,19 @@
+export default {
+    methods: {
+        cancel(arr = []) {
+            if (arr.length === 1) {
+                const [dataset] = arr;
+                const { id, name } = dataset;
+                this.$router.push({
+                    name: 'dataset',
+                    params: {
+                        id,
+                        name
+                    }
+                })
+            } else {
+                this.$router.back()
+            }
+        }
+    }
+}
--- a/frontend/src/views/dataset/add/union/UnionPreview.vue
+++ b/frontend/src/views/dataset/add/union/UnionPreview.vue
@ -4,7 +4,7 @@
      ref="plxTable"
      size="mini"
      style="width: 100%"
-      height="100%"
+      :height="height"
      :checkbox-config="{ highlight: true }"
      :width-resize="true"
    >
@ -22,6 +22,7 @@

 <script>
 import { post } from '@/api/dataset/dataset'
+import _ from 'lodash'

 export default {
  name: 'UnionPreview',
@ -33,11 +34,15 @@ export default {
    dataset: {
      type: Array,
      required: true
-    }
+    },
+    unionHeight: {
+      type: Number,
+      default: 298
+    },
  },
  data() {
    return {
-      height: 'auto',
+      height: 200,
      fields: [],
      data: []
    }
@ -45,12 +50,26 @@ export default {
  watch: {
    table: function () {
      this.initPreview()
+    },
+    unionHeight: {
+      handler: function () {
+        this.calHeight()
+      }
    }
  },
  mounted() {
    this.initPreview()
+    this.calHeight()
+    window.onresize = () => {
+      this.calHeight()
+    }
  },
  methods: {
+    calHeight: _.debounce(function() {
+      const unionHeight = Math.max(this.unionHeight, 298)
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - unionHeight - 56 - 54 - 36
+    }, 200),
    initPreview() {
      if (this.dataset && this.dataset.length > 0) {
        post('/dataset/table/unionPreview', this.table).then((response) => {
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@ -222,10 +222,7 @@
                  />
                </span>
                <span
-                  v-if="
-                    data.modelInnerType === 'db' ||
-                    data.modelInnerType === 'sql'
-                  "
+                  v-if="['db', 'sql'].includes(data.modelInnerType)"
                >
                  <span v-if="data.mode === 0" style="margin-left: 6px"
                    ><i class="el-icon-s-operation"
@ -241,6 +238,7 @@
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
+                  :class="[{ 'de-fill-block': !['db', 'sql'].includes(data.modelInnerType)}]"
                  :title="data.name"
                  >{{ data.name }}</span
                >
@ -498,6 +496,7 @@ export default {
      },
      isTreeSearch: false,
      kettleRunning: false,
+      pageCreated: false,
      engineMode: 'local',
      searchPids: [], // 查询命中的pid
      filterText: '',
@ -528,14 +527,17 @@ export default {
    }
  },
  activated() {
+    if (!this.pageCreated) return;
    const dataset = this.$refs.datasetTreeRef?.getCurrentNode()
-    if (!dataset) return
+    const { id, name } = this.$route.params
    queryAuthModel({ modelType: 'dataset' }, true).then((res) => {
      localStorage.setItem('dataset-tree', JSON.stringify(res.data))
      this.tData = res.data
      this.$nextTick(() => {
        this.$refs.datasetTreeRef?.filter(this.filterText)
-        if (dataset) {
+        if (id && name.includes(this.filterText)) {
+          this.dfsTableData(this.tData, id)
+        } else if (dataset) {
          this.$refs.datasetTreeRef?.setCurrentNode(dataset)
          this.nodeClick(dataset)
        }
@ -543,6 +545,7 @@ export default {
    })
  },
  created() {
+    this.pageCreated = true;
    this.kettleState()
    engineMode().then((res) => {
      this.engineMode = res.data
@ -553,6 +556,19 @@ export default {
    this.refresh()
  },
  methods: {
+    dfsTableData(arr, id) {
+      arr.some(ele => {
+        if(ele.id === id) {
+          this.$refs.datasetTreeRef?.setCurrentNode(ele)
+          this.nodeClick(ele)
+          this.expandedArray.push(id)
+          return true
+        } else if (ele.children?.length) {
+          this.dfsTableData(ele.children, id)
+        }
+        return false
+      });
+    },
    nameRepeat(value) {
      if (!this.fileList || this.fileList.length === 0) {
        return false
@ -979,8 +995,8 @@ export default {
 </script>

 <style scoped lang="scss">
-.search-input {
-  padding: 12px 0;
+.de-fill-block {
+  margin-left: 35px !important;
 }

 .custom-tree-container {
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@ -121,10 +121,9 @@ export default {
 <style scoped lang="scss">
 .de-ds-container {
  height: 100%;
-  // height: calc(100vh - 56px);
  width: 100%;
  overflow: hidden;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
  display: flex;
  box-sizing: border-box;
  .el-empty {
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@ -3,7 +3,7 @@
    <el-col>
      <el-row class="title-css" v-show="showView === 'Datasource'">
        <el-col class="title-text" :span="12">
-          {{ $t("commons.datasource") }}
+          {{ $t('commons.datasource') }}
        </el-col>
        <el-col class="title-operate" :span="12">
          <el-tooltip
@ -111,7 +111,11 @@
                  v-if="data.type === 'folder'"
                  effect="dark"
                  :content="
-                    $t(showView === 'Driver' ? 'driver.add' : 'datasource.add_data_source')
+                    $t(
+                      showView === 'Driver'
+                        ? 'driver.add'
+                        : 'datasource.add_data_source'
+                    )
                  "
                  placement="top"
                >
@ -133,11 +137,11 @@
                    <slot>
                      <el-dropdown-item command="edit">
                        <i class="el-icon-edit"></i>
-                        {{ $t("chart.edit") }}
+                        {{ $t('chart.edit') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="delete">
                        <i class="el-icon-delete"></i>
-                        {{ $t("chart.delete") }}
+                        {{ $t('chart.delete') }}
                      </el-dropdown-item>
                    </slot>
                  </el-dropdown-menu>
@ -166,7 +170,10 @@
          :rules="rule"
        >
          <el-form-item :label="$t('datasource.driver_name')" prop="name">
-            <el-input v-model="driverForm.name" :placeholder="$t('fu.search_bar.please_input')" />
+            <el-input
+              v-model="driverForm.name"
+              :placeholder="$t('fu.search_bar.please_input')"
+            />
          </el-form-item>
          <el-form-item :label="$t('datasource.drive_type')" prop="type">
            <el-select
@ -189,9 +196,9 @@
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
-          <deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
+          <deBtn secondary @click="close()">{{ $t('commons.cancel') }}</deBtn>
          <deBtn type="primary" size="mini" @click="saveDriver(driverForm)"
-            >{{ $t("commons.save") }}
+            >{{ $t('commons.save') }}
          </deBtn>
        </div>
      </el-dialog>
@ -204,34 +211,43 @@
        class="de-dialog-form"
        append-to-body
      >
-        <el-tabs v-model="tabActive" @tab-click="changeTab">
+        <el-tabs v-model="tabActive">
          <el-tab-pane :label="$t('datasource.all')" name="all"> </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.relational_database')" name="reDb"> </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.non_relational_database')" name="noReDb">
+          <el-tab-pane
+            :label="$t('datasource.relational_database')"
+            name="RDBMS"
+          >
+          </el-tab-pane>
+          <el-tab-pane
+            :label="$t('datasource.non_relational_database')"
+            name="NORDBMS"
+          >
+          </el-tab-pane>
+          <el-tab-pane :label="$t('datasource.other')" name="OTHER">
          </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.other')" name="other"> </el-tab-pane>
-          <div class="db-container">
-            <div
-              @click="addDb(db)"
-              v-for="db in dsTypes"
-              :key="db.type"
-              class="db-card"
-            >
-              <img
-                src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
-                alt=""
-              />
-              <p class="db-name">{{ db.name }}</p>
-            </div>
-          </div>
        </el-tabs>
+        <div class="db-container">
+          <div
+            @click="addDb(db)"
+            v-for="(db, index) in databaseList"
+            :key="db.type"
+            class="db-card"
+            :class="[{ marLeft: index % 4 === 0 }]"
+          >
+            <img
+              src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
+              alt=""
+            />
+            <p class="db-name">{{ db.name }}</p>
+          </div>
+        </div>
      </el-dialog>
    </el-col>
  </el-col>
 </template>
 <script>
-import { mapGetters } from "vuex";
-import i18n from "@/lang";
+import { mapGetters } from 'vuex'
+import i18n from '@/lang'
 import {
  listDatasource,
  listDatasourceByType,
@ -241,368 +257,371 @@ import {
  addDriver,
  delDriver,
  listDriverByType,
-  updateDriver,
-} from "@/api/system/datasource";
-import { ApplicationContext } from "@/utils/ApplicationContext";
-import deTextarea from "@/components/deCustomCm/deTextarea.vue";
-import msgCfm from "@/components/msgCfm";
+  updateDriver
+} from '@/api/system/datasource'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import deTextarea from '@/components/deCustomCm/deTextarea.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsTree",
+  name: 'DsTree',
  mixins: [msgCfm],
  components: { deTextarea },
  props: {
    datasource: {
      type: Object,
-      default: null,
-    },
+      default: null
+    }
  },
  data() {
    return {
-      tabActive: "all",
+      tabActive: 'all',
      dsTypeRelate: false,
      expandedArray: [],
      tData: [],
      dsTypes: [],
      dsTypesForDriver: [],
      showSearchInput: false,
-      key: "",
-      showView: "Datasource",
-      dialogTitle: "",
+      key: '',
+      showView: 'Datasource',
+      dialogTitle: '',
      editDriver: false,
      driverForm: {
-        name: "",
-        desc: "",
-        type: "",
+        name: '',
+        desc: '',
+        type: ''
      },
      params: {},
      rule: {
        name: [
          {
            required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
        ],
        desc: [
          {
            required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
          },
          {
            min: 2,
            max: 200,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
        ],
        type: [
          {
            required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
-        ],
-      },
-    };
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
  },
  watch: {
    key(val) {
-      this.$refs.myDsTree.filter(val);
-    },
+      this.$refs.myDsTree.filter(val)
+    }
  },
  computed: {
-    ...mapGetters(["user"]),
+    ...mapGetters(['user']),
+    databaseList() {
+      if (this.tabActive === 'all') {
+        return this.dsTypes
+      }
+      return this.dsTypes.filter(
+        (ele) => ele.databaseClassification === this.tabActive
+      )
+    }
  },
  created() {
-    this.queryTreeDatas();
-    this.datasourceTypes();
+    this.queryTreeDatas()
+    this.datasourceTypes()
  },
  methods: {
-    changeTab() {},
    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
    },
    showSearchWidget() {
-      this.showSearchInput = true;
+      this.showSearchInput = true
    },
    closeSearchWidget() {
-      this.key = "";
-      this.showSearchInput = false;
+      this.key = ''
+      this.showSearchInput = false
    },
    queryTreeDatas() {
-      if (this.showView === "Datasource") {
+      if (this.showView === 'Datasource') {
        listDatasource().then((res) => {
-          this.tData = this.buildTree(res.data);
-        });
+          this.tData = this.buildTree(res.data)
+        })
      }
-      if (this.showView === "Driver") {
+      if (this.showView === 'Driver') {
        listDrivers().then((res) => {
-          this.tData = this.buildTree(res.data);
-        });
+          this.tData = this.buildTree(res.data)
+        })
      }
    },
    datasourceTypes() {
      listDatasourceType().then((res) => {
-        this.dsTypes = res.data;
+        this.dsTypes = res.data
        this.dsTypes.forEach((item) => {
          if (item.isJdbc) {
-            this.dsTypesForDriver.push(item);
+            this.dsTypesForDriver.push(item)
          }
-        });
-      });
+        })
+      })
    },
    refreshType(datasource) {
      const method =
-        this.showView === "Datasource"
-          ? listDatasourceByType
-          : listDriverByType;
-      let typeData = [];
+        this.showView === 'Datasource' ? listDatasourceByType : listDriverByType
+      let typeData = []
      method(datasource.type).then((res) => {
-        typeData = this.buildTree(res.data);
+        typeData = this.buildTree(res.data)
        if (typeData.length === 0) {
          const index = this.tData.findIndex((item) => {
            if (item.id === datasource.type) {
-              return true;
+              return true
            }
-          });
-          this.tData.splice(index, 1);
+          })
+          this.tData.splice(index, 1)
        } else {
-          let find = false;
+          let find = false
          for (let index = 0; index < this.tData.length; index++) {
            if (typeData[0].id === this.tData[index].id) {
-              this.tData[index].children = typeData[0].children;
+              this.tData[index].children = typeData[0].children
              for (let i = 0; i < this.tData[index].children.length; i++) {
                if (this.tData[index].children[i].id === datasource.id) {
-                  this.showInfo({ data: this.tData[index].children[i] });
+                  this.showInfo({ data: this.tData[index].children[i] })
                }
              }
-              find = true;
+              find = true
            }
          }
          if (!find) {
-            this.tData.push(typeData[0]);
+            this.tData.push(typeData[0])
          }
        }
-      });
+      })
    },
    buildTree(array) {
-      const types = {};
-      const newArr = [];
+      const types = {}
+      const newArr = []
      for (let index = 0; index < array.length; index++) {
-        const element = array[index];
+        const element = array[index]
        if (this.msgNodeId) {
          if (element.id === this.msgNodeId) {
-            element.msgNode = true;
+            element.msgNode = true
          }
        }
        if (!(element.type in types)) {
-          types[element.type] = [];
+          types[element.type] = []
          newArr.push({
            id: element.type,
            name: element.typeDesc,
-            type: "folder",
-            children: types[element.type],
-          });
+            type: 'folder',
+            children: types[element.type]
+          })
        }
-        types[element.type].push(element);
+        types[element.type].push(element)
      }
-      return newArr;
+      return newArr
    },
    addFolder() {
-      if (this.showView === "Driver") {
-        this.dialogTitle = this.$t("datasource.add_driver");
-        this.editDriver = true;
-        this.switchMain("DriverForm", {}, this.tData, this.dsTypes);
+      if (this.showView === 'Driver') {
+        this.dialogTitle = this.$t('datasource.add_driver')
+        this.editDriver = true
+        this.switchMain('DriverForm', {}, this.tData, this.dsTypes)
      } else {
-        this.dsTypeRelate = true;
+        this.dsTypeRelate = true
      }
    },
    addDriver() {
-      this.dialogTitle = this.$t("datasource.add_driver");
-      this.editDriver = true;
+      this.dialogTitle = this.$t('datasource.add_driver')
+      this.editDriver = true
    },
    driverMgm() {
-      this.$emit("switch-main", {});
-      this.$emit("switch-mgm", "driverMgm");
-      this.showView = "Driver";
-      this.expandedArray = [];
-      this.tData = [];
-      this.queryTreeDatas();
+      this.$emit('switch-main', {})
+      this.$emit('switch-mgm', 'driverMgm')
+      this.showView = 'Driver'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
    },
    dsMgm() {
-      this.$emit("switch-main", {});
-      this.showView = "Datasource";
-      this.expandedArray = [];
-      this.tData = [];
-      this.queryTreeDatas();
+      this.$emit('switch-main', {})
+      this.showView = 'Datasource'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
    },
    addDb({ type }) {
      this.$router.push({
-        path: "/ds-form",
-        query: { type },
-      });
+        path: '/ds-form',
+        query: { type }
+      })
    },
    addFolderWithType(data) {
-      if (this.showView === "Driver") {
-        this.driverForm.type = data.id;
-        this.dialogTitle = this.$t("datasource.add_driver");
-        this.editDriver = true;
+      if (this.showView === 'Driver') {
+        this.driverForm.type = data.id
+        this.dialogTitle = this.$t('datasource.add_driver')
+        this.editDriver = true
      } else {
        this.$router.push({
-          path: "/ds-form",
-          query: { type: data.id },
-        });
+          path: '/ds-form',
+          query: { type: data.id }
+        })
      }
    },
    nodeClick(node, data) {
-      if (node.type === "folder") return;
-      this.showInfo(data);
+      if (node.type === 'folder') return
+      this.showInfo(data)
    },
    clickFileMore(param) {
-      const { optType, data } = param;
+      const { optType, data } = param
      switch (optType) {
-        case "edit":
-          this.edit(data);
-          break;
-        case "delete":
-          this._handleDelete(data);
-          break;
+        case 'edit':
+          this.edit(data)
+          break
+        case 'delete':
+          this._handleDelete(data)
+          break
        default:
-          break;
+          break
      }
    },
    showInfo(row) {
-      if (this.showView === "Driver") {
-        const param = { ...row.data, ...{ showModel: "show" } };
+      if (this.showView === 'Driver') {
+        const param = { ...row.data, ...{ showModel: 'show' } }
        this.switchMain(
-          this.showView === "Datasource" ? "DsForm" : "DriverForm",
+          this.showView === 'Datasource' ? 'DsForm' : 'DriverForm',
          param,
          this.tData,
          this.dsTypes
-        );
+        )
      } else {
-        this.switchMain("dsTable", row.data);
+        this.switchMain('dsTable', row.data)
      }
    },
    handleCommand(type, data) {
      switch (type) {
-        case "edit":
-          this._handleEditer(data);
-          break;
-        case "delete":
-          this._handleDelete(data);
-          break;
+        case 'edit':
+          this._handleEditer(data)
+          break
+        case 'delete':
+          this._handleDelete(data)
+          break
        default:
-          break;
+          break
      }
    },
    _handleEditer(row) {
-      if (this.showView === "Datasource") {
-        const param = { ...row, ...{ showModel: "show" } };
-        this.switchMain(
-          'DsForm',
-          param,
-          this.tData,
-          this.dsTypes
-        );
+      if (this.showView === 'Datasource') {
+        const param = { ...row, ...{ showModel: 'show' } }
+        this.switchMain('DsForm', param, this.tData, this.dsTypes)
        return
      }
-      this.editDriver = true;
-      this.dialogTitle = this.$t('datasource.edit_driver');
-      this.driverForm = row;
+      this.editDriver = true
+      this.dialogTitle = this.$t('datasource.edit_driver')
+      this.driverForm = row
    },
    _handleDelete(datasource) {
      const params = {
-        title: this.showView === "Datasource" ? 'datasource.this_data_source' : 'datasource.delete_this_driver',
+        title:
+          this.showView === 'Datasource'
+            ? 'datasource.this_data_source'
+            : 'datasource.delete_this_driver',
        cb: () => {
-          let method = delDriver;
-          let parma = { type: datasource.type, id: datasource.id };
-          if (this.showView === "Datasource") {
-            method = delDs;
-            parma = datasource.id;
+          let method = delDriver
+          let parma = { type: datasource.type, id: datasource.id }
+          if (this.showView === 'Datasource') {
+            method = delDs
+            parma = datasource.id
          }
          method(parma).then((res) => {
            if (res.success) {
-              this.openMessageSuccess("commons.delete_success");
-              this.switchMain("", {}, this.tData, this.dsTypes);
-              this.refreshType(datasource);
+              this.openMessageSuccess('commons.delete_success')
+              this.switchMain('', {}, this.tData, this.dsTypes)
+              this.refreshType(datasource)
            } else {
-              this.openMessageSuccess(res.message, "error")
+              this.openMessageSuccess(res.message, 'error')
            }
-          });
+          })
        }
      }
      this.handlerConfirm(params)
    },
    switchMain(component, componentParam, tData, dsTypes) {
-      if (component === "DsForm") {
-        const { id, type, showModel } = componentParam;
+      if (component === 'DsForm') {
+        const { id, type, showModel } = componentParam
        this.$router.push({
-          path: "/ds-form",
+          path: '/ds-form',
          query: {
            id,
            type,
            showModel,
-            msgNodeId: this.msgNodeId,
-          },
-        });
-        return;
+            msgNodeId: this.msgNodeId
+          }
+        })
+        return
      }
-      this.$emit("switch-main", {
+      this.$emit('switch-main', {
        component,
        componentParam,
        tData,
-        dsTypes,
-      });
+        dsTypes
+      })
    },
    markInvalid(msgParam) {
-      const param = JSON.parse(msgParam);
-      const msgNodeId = param.id;
-      this.msgNodeId = msgNodeId;
+      const param = JSON.parse(msgParam)
+      const msgNodeId = param.id
+      this.msgNodeId = msgNodeId
      this.$nextTick(() => {
        this.tData.forEach((folder) => {
-          const nodes = folder.children;
+          const nodes = folder.children
          nodes.forEach((node) => {
            if (node.id === msgNodeId) {
-              node.msgNode = true;
+              node.msgNode = true
            }
-          });
-        });
-      });
+          })
+        })
+      })
    },
    close() {
-      this.$refs["driverForm"].resetFields();
-      this.editDriver = false;
+      this.$refs['driverForm'].resetFields()
+      this.editDriver = false
      this.driverForm = {
-        name: "",
-        desc: "",
-        type: "",
-      };
+        name: '',
+        desc: '',
+        type: ''
+      }
    },
    saveDriver(driverForm) {
-      this.$refs["driverForm"].validate((valid) => {
+      this.$refs['driverForm'].validate((valid) => {
        if (valid) {
-          const req = driverForm.id ?  updateDriver : addDriver;
+          const req = driverForm.id ? updateDriver : addDriver
          req(driverForm).then((res) => {
-            this.openMessageSuccess("dataset.save_success")
-            this.refreshType(driverForm);
-            this.close();
-          });
+            this.openMessageSuccess('dataset.save_success')
+            this.refreshType(driverForm)
+            this.close()
+          })
        } else {
-          return false;
+          return false
        }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .custom-tree-container {
@ -660,8 +679,10 @@ export default {
  max-height: 674px;
  overflow-y: auto;
  display: flex;
-  justify-content: space-between;
  flex-wrap: wrap;
+  margin-top: -3px;
+  position: relative;
+  z-index: 10;
  .db-card {
    height: 193px;
    width: 270px;
@ -670,7 +691,8 @@ export default {
    background: #ffffff;
    border: 1px solid #dee0e3;
    border-radius: 4px;
-    margin-top: 24px;
+    margin-bottom: 24px;
+    margin-left: 22px;
    img {
      width: 100%;
      height: 154.58px;
@ -689,5 +711,9 @@ export default {
      box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
    }
  }
+
+  .marLeft {
+    margin-left: 0;
+  }
 }
 </style>
--- a/frontend/src/views/system/datasource/dsTable.vue
+++ b/frontend/src/views/system/datasource/dsTable.vue
@ -20,13 +20,10 @@
      </el-col>
    </el-row>
    <div class="table-container">
-      <grid-table
+      <el-table
        v-loading="loading"
-        :tableData="tableData"
-        :columns="[]"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :data="filterTable"
+        :style="{ width: '100%' }"
      >
        <el-table-column
          key="name"
@ -34,28 +31,20 @@
          :label="$t('datasource.table_name')"
        />
        <el-table-column
-          slot="__operation"
          :label="$t('commons.operating')"
-          key="__operation"
          fixed="right"
-          width="168"
+          width="108"
        >
          <template slot-scope="scope">
-            <el-button
-              @click="createtDataset(scope.row)"
-              class="text-btn mar3 mar6"
-              type="text"
-              >{{ $t("datasource.create_dataset") }}</el-button
-            >
            <el-button
              @click="selectDataset(scope.row)"
-              class="text-btn"
+              class="de-text-btn mar3"
              type="text"
              >{{ $t("dataset.detail") }}</el-button
            >
          </template>
        </el-table-column>
-      </grid-table>
+      </el-table>
    </div>
    <el-drawer
      :title="$t('dataset.detail')"
@ -106,11 +95,9 @@

 <script>
 import keyEnter from "@/components/msgCfm/keyEnter.js";
-import GridTable from "@/components/gridTable/index.vue";
 import {dsTable, post} from "@/api/dataset/dataset";
 export default {
  mixins: [keyEnter],
-  components: { GridTable },
  props: {
    params: {
      type: Object,
@ -123,22 +110,18 @@ export default {
      dsTableDetail: {},
      nikeName: "",
      loading: false,
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      dsTableData: [{date: 1}],
-      tableData: [{ name: 1 }],
+      dsTableData: [],
+      tableData: [],
+      filterTable: []
    };
  },
  created() {
-    post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-      this.tableData = response.data
-    })
+    this.search()
  },
  methods: {
-    createtDataset(row) {},
+    initSearch() {
+      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nikeName))
+    },
    selectDataset(row) {
      this.dsTableDetail = row;
      this.userDrawer = true;
@ -148,36 +131,14 @@ export default {
        this.dsTableData = response.data
      })
    },
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1;
-      this.paginationConfig.pageSize = pageSize;
-      this.search();
-    },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
-    },
-    initSearch() {
-      this.handleCurrentChange(1);
-    },
    search() {
      this.loading = true;
-      const param = {
-        conditions: [],
-      };
-      if (this.nikeName) {
-        param.conditions.push({
-          field: `dataset_table_task.name`,
-          operator: "like",
-          value: this.nikeName,
-        });
-      }
-      const { currentPage, pageSize } = this.paginationConfig;
-      dsTable(currentPage, pageSize, this.params.id).then((response) => {
-        this.tableData = response.data.listObject;
-        this.paginationConfig.total = response.data.itemCount;
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+        this.tableData = response.data
+        this.initSearch()
+      }).finally(() => {
        this.loading = false;
-      });
+      })
    },
  },
 };
@ -204,6 +165,9 @@ export default {
  height: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
+  .mar3 {
+    margin-left: -5px;
+  }
  .table-name {
    font-family: PingFang SC;
    font-size: 16px;
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@ -104,6 +104,7 @@
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
+        ref="multipleTable"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
@ -507,11 +508,18 @@ export default {
      const { currentPage, pageSize } = this.paginationConfig;
      datasetTaskList(currentPage, pageSize, param, showLoading).then(
        (response) => {
+          const multipleSelection = this.multipleSelection.map(ele => ele.id)
          this.data = response.data.listObject;
-          // this.data.forEach((item) => {
-          //   this.taskStatus(item);
-          // });
          this.paginationConfig.total = response.data.itemCount;
+          if (multipleSelection.length) {
+            this.$nextTick(() => {
+              this.data.forEach(row => {
+                if (multipleSelection.includes(row.id)) {
+                  this.$refs.multipleTable.toggleRowSelection(row);
+                }
+              });
+            })
+          }
        }
      );
    },