Merge branch 'dev' into pr@dev@oracle

2026-05-20 11:38:11 +08:00 · 2021-06-30 10:53:08 +08:00
parent 69321b08a0 ac06b6fa94
commit b57e71cee6
30 changed files with 498 additions and 43 deletions
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -27,3 +27,11 @@ export function getChartTree(data) {
    data
  })
 }
+
+export function chartCopy(id) {
+  return request({
+    url: '/chart/view/chartCopy/' + id,
+    method: 'post',
+    loading: true
+  })
+}
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -4,7 +4,7 @@
      <template v-if="curComponent">
        <template v-if="!curComponent.isLock">
          <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
-          <!--          <li @click="copy"> {{ $t('panel.copy') }}</li>-->
+          <li @click="copy"> {{ $t('panel.copy') }}</li>
          <li @click="paste"> {{ $t('panel.paste') }}</li>
          <li @click="cut"> {{ $t('panel.cut') }}</li>
          <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -2,6 +2,7 @@ import store from '@/store/index'
 import toast from '@/components/canvas/utils/toast'
 import generateID from '@/components/canvas/utils/generateID'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import { chartCopy } from '@/api/chart/chart'

 export default {
  state: {
@@ -36,7 +37,18 @@ export default {
      }

      data.id = generateID()
-      store.commit('addComponent', { component: deepCopy(data) })
+
+      // 如果是用户视图 测先进行底层复制
+      debugger
+      if (data.type === 'view') {
+        chartCopy(data.propValue.viewId).then(res => {
+          const newView = deepCopy(data)
+          newView.propValue.viewId = res.data
+          store.commit('addComponent', { component: newView })
+        })
+      } else {
+        store.commit('addComponent', { component: deepCopy(data) })
+      }
      if (state.isCut) {
        state.copyData = null
      }
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -720,7 +720,21 @@ export default {
    chart_error_tips: 'Please contact admin ',
    title_cannot_empty: 'Title can not be empty',
    table_title_height: 'Table header height',
-    table_item_height: 'Table row height'
+    table_item_height: 'Table row height',
+    axis_show: 'Axis Show',
+    axis_color: 'Axis Color',
+    axis_width: 'Axis Width',
+    axis_type: 'Axis Type',
+    axis_type_solid: 'Solid',
+    axis_type_dashed: 'Dashed',
+    axis_type_dotted: 'Dotted',
+    axis_label_show: 'Label Show',
+    axis_label_color: 'Label Color',
+    axis_label_fontsize: 'Label Fontsize',
+    text_style: 'Font Style',
+    bolder: 'Bolder',
+    change_ds: 'Change Dataset',
+    change_ds_tip: 'Tips：Change Dataset will change fields,you need rebuild chart'
  },
  dataset: {
    sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -762,7 +762,21 @@ export default {
    chart_error_tips: '如有疑問請聯系管理員',
    title_cannot_empty: '標題不能為空',
    table_title_height: '表頭行高',
-    table_item_height: '表格行高'
+    table_item_height: '表格行高',
+    axis_show: '軸線顯示',
+    axis_color: '軸線顏色',
+    axis_width: '軸線寬度',
+    axis_type: '軸線類型',
+    axis_type_solid: '實線',
+    axis_type_dashed: '虛線',
+    axis_type_dotted: '點',
+    axis_label_show: '標簽顯示',
+    axis_label_color: '標簽顏色',
+    axis_label_fontsize: '標簽大小',
+    text_style: '字體樣式',
+    bolder: '加粗',
+    change_ds: '更換數據集',
+    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖'
  },
  dataset: {
    sheet_warn: '有多個sheet頁面，默認抽取第一個',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -720,7 +720,21 @@ export default {
    chart_error_tips: '如有疑问请联系管理员',
    title_cannot_empty: '标题不能为空',
    table_title_height: '表头行高',
-    table_item_height: '表格行高'
+    table_item_height: '表格行高',
+    axis_show: '轴线显示',
+    axis_color: '轴线颜色',
+    axis_width: '轴线宽度',
+    axis_type: '轴线类型',
+    axis_type_solid: '实线',
+    axis_type_dashed: '虚线',
+    axis_type_dotted: '点',
+    axis_label_show: '标签显示',
+    axis_label_color: '标签颜色',
+    axis_label_fontsize: '标签大小',
+    text_style: '字体样式',
+    bolder: '加粗',
+    change_ds: '更换数据集',
+    change_ds_tip: '提示：更换数据集将导致字段发生变化，需重新制作视图'
  },
  dataset: {
    sheet_warn: '有多个 Sheet 页，默认抽取第一个',
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -16,7 +16,7 @@ const LinkTokenKey = Config.LinkTokenKey
 const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 10000 // request timeout
+  timeout: 0 // request timeout
 })

 // request interceptor
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -63,7 +63,8 @@ export const DEFAULT_TITLE_STYLE = {
  color: '#303133',
  hPosition: 'center',
  vPosition: 'top',
-  isItalic: false
+  isItalic: false,
+  isBolder: false
 }
 export const DEFAULT_LEGEND_STYLE = {
  show: true,
@@ -81,8 +82,19 @@ export const DEFAULT_XAXIS_STYLE = {
  position: 'bottom',
  name: '',
  axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
    rotate: 0,
    formatter: '{value}'
+  },
+  splitLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
  }
 }
 export const DEFAULT_YAXIS_STYLE = {
@@ -90,8 +102,19 @@ export const DEFAULT_YAXIS_STYLE = {
  position: 'left',
  name: '',
  axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
    rotate: 0,
    formatter: '{value}'
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
  }
 }
 export const DEFAULT_BACKGROUND_COLOR = {
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -11,6 +11,7 @@ export function componentStyle(chart_option, chart) {
      style.fontSize = customStyle.text.fontSize
      style.color = customStyle.text.color
      customStyle.text.isItalic ? style.fontStyle = 'italic' : style.fontStyle = 'normal'
+      customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
      chart_option.title.textStyle = style
    }
    if (customStyle.legend) {
@@ -26,12 +27,14 @@ export function componentStyle(chart_option, chart) {
      chart_option.xAxis.position = customStyle.xAxis.position
      chart_option.xAxis.name = customStyle.xAxis.name
      chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
+      chart_option.xAxis.splitLine = customStyle.xAxis.splitLine
    }
    if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
      chart_option.yAxis.show = customStyle.yAxis.show
      chart_option.yAxis.position = customStyle.yAxis.position
      chart_option.yAxis.name = customStyle.yAxis.name
      chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
+      chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
    }
    if (customStyle.background) {
      chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -44,8 +44,9 @@
                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
-            <el-form-item :label="$t('chart.text_italic')" class="form-item">
+            <el-form-item :label="$t('chart.text_style')" class="form-item">
              <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
+              <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
            </el-form-item>
          </el-form>
        </el-col>
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -24,6 +24,40 @@
            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
            </el-form-item>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_show')" class="form-item">
+              <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.splitLine.show">
+              <el-form-item :label="$t('chart.axis_color')" class="form-item">
+                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_type')" class="form-item">
+                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
+                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </span>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.axisLabel.show">
+              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
+                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </span>
+            <el-divider />
            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
            </el-form-item>
@@ -58,7 +92,8 @@ export default {
  data() {
    return {
      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
-      isSetting: false
+      isSetting: false,
+      fontSize: []
    }
  },
  watch: {
@@ -74,14 +109,28 @@ export default {
          }
          if (customStyle.xAxis) {
            this.axisForm = customStyle.xAxis
+            if (!this.axisForm.splitLine) {
+              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+            }
          }
        }
      }
    }
  },
  mounted() {
+    this.init()
  },
  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
    changeXAxisStyle() {
      if (!this.axisForm.show) {
        this.isSetting = false
@@ -93,6 +142,9 @@ export default {
 </script>

 <style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
 .shape-item{
  padding: 6px;
  border: none;
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -24,6 +24,40 @@
            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
            </el-form-item>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_show')" class="form-item">
+              <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.splitLine.show">
+              <el-form-item :label="$t('chart.axis_color')" class="form-item">
+                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_type')" class="form-item">
+                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </span>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.axisLabel.show">
+              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </span>
+            <el-divider />
            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
            </el-form-item>
@@ -58,7 +92,8 @@ export default {
  data() {
    return {
      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
-      isSetting: false
+      isSetting: false,
+      fontSize: []
    }
  },
  watch: {
@@ -74,14 +109,28 @@ export default {
          }
          if (customStyle.yAxis) {
            this.axisForm = customStyle.yAxis
+            if (!this.axisForm.splitLine) {
+              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+            }
          }
        }
      }
    }
  },
  mounted() {
+    this.init()
  },
  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
    changeYAxisStyle() {
      if (!this.axisForm.show) {
        this.isSetting = false
@@ -93,6 +142,9 @@ export default {
 </script>

 <style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
 .shape-item{
  padding: 6px;
  border: none;
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -50,7 +50,8 @@ export default {
        fontSize: '18px',
        color: '#303133',
        textAlign: 'left',
-        fontStyle: 'normal'
+        fontStyle: 'normal',
+        fontWeight: 'normal'
      },
      content_class: {
        display: 'flex',
@@ -136,6 +137,7 @@ export default {
          this.title_class.color = customStyle.text.color
          this.title_class.textAlign = customStyle.text.hPosition
          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
        }
        if (customStyle.background) {
          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -60,7 +60,8 @@ export default {
        fontSize: '18px',
        color: '#303133',
        textAlign: 'left',
-        fontStyle: 'normal'
+        fontStyle: 'normal',
+        fontWeight: 'normal'
      },
      bg_class: {
        background: hexColorToRGBA('#ffffff', 0)
@@ -175,6 +176,7 @@ export default {
          this.title_class.color = customStyle.text.color
          this.title_class.textAlign = customStyle.text.hPosition
          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
        }
        if (customStyle.background) {
          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -129,9 +129,9 @@
                      />
                    </span>
                    <el-dropdown-menu slot="dropdown">
-                      <!--                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
-                      <!--                    {{ $t('chart.rename') }}-->
-                      <!--                  </el-dropdown-item>-->
+                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">
+                        {{ $t('chart.rename') }}
+                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
                        {{ $t('dataset.move_to') }}
                      </el-dropdown-item>
@@ -544,6 +544,7 @@ export default {
    saveTable(view) {
      this.$refs['tableForm'].validate((valid) => {
        if (valid) {
+          view.title = view.name
          post('/chart/view/save', view).then(response => {
            this.closeTable()
            this.$message({
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -13,6 +13,9 @@
        <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
      </el-popover>
      <span style="float: right;line-height: 40px;">
+        <el-button size="mini" @click="changeDs">
+          {{ $t('chart.change_ds') }}
+        </el-button>
        <el-button size="mini" @click="closeEdit">
          {{ $t('commons.save') }}
        </el-button>
@@ -208,10 +211,10 @@
              <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
            </el-tab-pane>
            <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
-              <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
              <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
              <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+              <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
              <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
            </el-tab-pane>
          </el-tabs>
@@ -330,6 +333,24 @@
        <el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
      </div>
    </el-dialog>
+
+    <!--视图更换数据集-->
+    <el-dialog
+      v-dialogDrag
+      :title="$t('chart.change_ds')+'['+table.name+']'"
+      :visible="selectTableFlag"
+      :show-close="false"
+      width="70%"
+      class="dialog-css"
+      :destroy-on-close="true"
+    >
+      <table-selector @getTable="getTable" />
+      <span>{{ $t('chart.change_ds_tip') }}</span>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!table.id" @click="changeChart">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
  </el-row>
 </template>

@@ -368,10 +389,11 @@ import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
 import LabelNormal from '../components/normal/LabelNormal'
 import html2canvas from 'html2canvas'
+import TableSelector from './TableSelector'

 export default {
  name: 'ChartEdit',
-  components: { ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
  props: {
    param: {
      type: Object,
@@ -430,7 +452,9 @@ export default {
      httpRequest: {
        status: true,
        msg: ''
-      }
+      },
+      selectTableFlag: false,
+      changeTable: {}
    }
  },
  computed: {
@@ -556,6 +580,7 @@ export default {
        if (needRefreshGroup) {
          this.refreshGroup(view)
        }
+        this.closeChangeChart()
      })
    },

@@ -628,6 +653,7 @@ export default {
      // 从仪表板入口关闭
      bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
      // this.$emit('switchComponent', { name: '' })
+      this.$success(this.$t('commons.save_success'))
    },
    getData(id) {
      if (id) {
@@ -930,6 +956,26 @@ export default {

    refreshGroup(view) {
      this.$emit('saveSuccess', view)
+    },
+
+    getTable(table) {
+      this.changeTable = JSON.parse(JSON.stringify(table))
+    },
+
+    changeDs() {
+      this.selectTableFlag = true
+    },
+
+    closeChangeChart() {
+      this.selectTableFlag = false
+    },
+
+    changeChart() {
+      this.view.tableId = this.changeTable.id
+      this.view.xaxis = []
+      this.view.yaxis = []
+      this.view.customFilter = []
+      this.save(true, 'chart', false)
    }
  }
 }
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -30,7 +30,7 @@
          <el-form-item class="form-item">
            <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
          </el-form-item>
-          <el-form-item class="form-item">
+          <el-form-item v-if="!param.tableId" class="form-item">
            <el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
              <el-option :label="$t('dataset.direct_connect')" value="0" />
              <el-option :label="$t('dataset.sync_data')" value="1" :disabled="!kettleRunning" />