feat(视图): 视图编辑保存，横纵维度指标，EChart展示

backend/src/main/java/io/dataease/base/domain/ChartView.java

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class ChartView implements Serializable {
+    private String id;
+
+    private String name;
+
+    private String sceneId;
+
+    private String tableId;
+
+    private String type;
+
+    private String title;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private Long updateTime;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class ChartViewWithBLOBs extends ChartView implements Serializable {
+    private String xAxis;
+
+    private String yAxis;
+
+    private String customAttr;
+
+    private String customStyle;
+
+    private String customFilter;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.java

+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.ChartView;
+import io.dataease.base.domain.ChartViewExample;
+import io.dataease.base.domain.ChartViewWithBLOBs;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface ChartViewMapper {
+    long countByExample(ChartViewExample example);
+
+    int deleteByExample(ChartViewExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(ChartViewWithBLOBs record);
+
+    int insertSelective(ChartViewWithBLOBs record);
+
+    List<ChartViewWithBLOBs> selectByExampleWithBLOBs(ChartViewExample example);
+
+    List<ChartView> selectByExample(ChartViewExample example);
+
+    ChartViewWithBLOBs selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") ChartViewWithBLOBs record, @Param("example") ChartViewExample example);
+
+    int updateByExampleWithBLOBs(@Param("record") ChartViewWithBLOBs record, @Param("example") ChartViewExample example);
+
+    int updateByExample(@Param("record") ChartView record, @Param("example") ChartViewExample example);
+
+    int updateByPrimaryKeySelective(ChartViewWithBLOBs record);
+
+    int updateByPrimaryKeyWithBLOBs(ChartViewWithBLOBs record);
+
+    int updateByPrimaryKey(ChartView record);
+}
\ No newline at end of file

backend/src/main/java/io/dataease/controller/chart/ChartViewController.java

+package io.dataease.controller.chart;
+
+import io.dataease.base.domain.ChartViewWithBLOBs;
+import io.dataease.controller.request.chart.ChartViewRequest;
+import io.dataease.dto.chart.ChartViewDTO;
+import io.dataease.service.chart.ChartViewService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @Author gin
+ * @Date 2021/3/1 1:17 下午
+ */
+@RestController
+@RequestMapping("/chart/view")
+public class ChartViewController {
+    @Resource
+    private ChartViewService chartViewService;
+
+    @PostMapping("/save")
+    public ChartViewWithBLOBs save(@RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
+        return chartViewService.save(chartViewWithBLOBs);
+    }
+
+    @PostMapping("/list")
+    public List<ChartViewWithBLOBs> list(@RequestBody ChartViewRequest chartViewRequest) {
+        return chartViewService.list(chartViewRequest);
+    }
+
+    @PostMapping("/get/{id}")
+    public ChartViewWithBLOBs get(@PathVariable String id) {
+        return chartViewService.get(id);
+    }
+
+    @PostMapping("/delete/{id}")
+    public void delete(@PathVariable String id) {
+        chartViewService.delete(id);
+    }
+
+    @PostMapping("/getData/{id}")
+    public ChartViewDTO getData(@PathVariable String id) throws Exception {
+        return chartViewService.getData(id);
+    }
+}

backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java

 package io.dataease.controller.dataset;
 
 import io.dataease.base.domain.DatasetTable;
+import io.dataease.base.domain.DatasetTableField;
 import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.datasource.dto.TableFiled;
 import io.dataease.service.dataset.DataSetTableService;
@@ -50,6 +51,11 @@ public class DataSetTableController {
         return dataSetTableService.getFields(dataSetTableRequest);
     }
 
+    @PostMapping("getFieldsFromDE")
+    public Map<String, List<DatasetTableField>> getFieldsFromDE(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
+        return dataSetTableService.getFieldsFromDE(dataSetTableRequest);
+    }
+
     @PostMapping("getData")
     public List<String[]> getData(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
         return dataSetTableService.getData(dataSetTableRequest);

backend/src/main/java/io/dataease/controller/request/chart/ChartViewRequest.java

+package io.dataease.controller.request.chart;
+
+import io.dataease.base.domain.ChartViewWithBLOBs;
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * @Author gin
+ * @Date 2021/3/1 1:32 下午
+ */
+@Setter
+@Getter
+public class ChartViewRequest extends ChartViewWithBLOBs {
+    private String sort;
+}

backend/src/main/java/io/dataease/datasource/service/DatasourceService.java

@@ -74,4 +74,8 @@ public class DatasourceService {
         return datasourceProvider.getTables(datasourceRequest);
     }
 
+    public Datasource get(String id) {
+        return datasourceMapper.selectByPrimaryKey(id);
+    }
+
 }

backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java

+package io.dataease.dto.chart;
+
+import io.dataease.base.domain.ChartViewWithBLOBs;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.Map;
+
+/**
+ * @Author gin
+ * @Date 2021/3/1 4:19 下午
+ */
+@Setter
+@Getter
+public class ChartViewDTO extends ChartViewWithBLOBs {
+    private Map<String, Object> data;
+}

backend/src/main/java/io/dataease/dto/chart/Series.java

+package io.dataease.dto.chart;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/3/1 3:51 下午
+ */
+@Getter
+@Setter
+public class Series {
+    private String name;
+    private String type;
+    private List<BigDecimal> data;
+}

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

+package io.dataease.service.chart;
+
+import com.google.gson.Gson;
+import com.google.gson.reflect.TypeToken;
+import io.dataease.base.domain.*;
+import io.dataease.base.mapper.ChartViewMapper;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.request.chart.ChartViewRequest;
+import io.dataease.datasource.constants.DatasourceTypes;
+import io.dataease.datasource.provider.DatasourceProvider;
+import io.dataease.datasource.provider.ProviderFactory;
+import io.dataease.datasource.request.DatasourceRequest;
+import io.dataease.datasource.service.DatasourceService;
+import io.dataease.dto.chart.ChartViewDTO;
+import io.dataease.dto.chart.Series;
+import io.dataease.dto.dataset.DataTableInfoDTO;
+import io.dataease.service.dataset.DataSetTableFieldsService;
+import io.dataease.service.dataset.DataSetTableService;
+import org.apache.commons.collections4.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.math.BigDecimal;
+import java.text.MessageFormat;
+import java.util.*;
+import java.util.stream.Collectors;
+
+/**
+ * @Author gin
+ * @Date 2021/3/1 12:34 下午
+ */
+@Service
+public class ChartViewService {
+    @Resource
+    private ChartViewMapper chartViewMapper;
+    @Resource
+    private DataSetTableService dataSetTableService;
+    @Resource
+    private DatasourceService datasourceService;
+    @Resource
+    private DataSetTableFieldsService dataSetTableFieldsService;
+
+    public ChartViewWithBLOBs save(ChartViewWithBLOBs chartView) {
+        long timestamp = System.currentTimeMillis();
+        chartView.setUpdateTime(timestamp);
+        int i = chartViewMapper.updateByPrimaryKeyWithBLOBs(chartView);
+        if (i == 0) {
+            chartView.setId(UUID.randomUUID().toString());
+            chartView.setCreateTime(timestamp);
+            chartView.setUpdateTime(timestamp);
+            chartViewMapper.insert(chartView);
+        }
+        return chartView;
+    }
+
+    public List<ChartViewWithBLOBs> list(ChartViewRequest chartViewRequest) {
+        ChartViewExample chartViewExample = new ChartViewExample();
+        ChartViewExample.Criteria criteria = chartViewExample.createCriteria();
+        if (StringUtils.isNotEmpty(chartViewRequest.getSceneId())) {
+            criteria.andSceneIdEqualTo(chartViewRequest.getSceneId());
+        }
+        if (StringUtils.isNotEmpty(chartViewRequest.getSort())) {
+            chartViewExample.setOrderByClause(chartViewRequest.getSort());
+        }
+        return chartViewMapper.selectByExampleWithBLOBs(chartViewExample);
+    }
+
+    public ChartViewWithBLOBs get(String id) {
+        return chartViewMapper.selectByPrimaryKey(id);
+    }
+
+    public void delete(String id) {
+        chartViewMapper.deleteByPrimaryKey(id);
+    }
+
+    public ChartViewDTO getData(String id) throws Exception {
+        ChartViewWithBLOBs view = chartViewMapper.selectByPrimaryKey(id);
+        List<DatasetTableField> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<DatasetTableField>>() {
+        }.getType());
+        List<DatasetTableField> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<DatasetTableField>>() {
+        }.getType());
+
+        List<String> x = new ArrayList<>();
+        List<Series> series = new ArrayList<>();
+        if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
+            ChartViewDTO dto = new ChartViewDTO();
+            BeanUtils.copyBean(dto, view);
+            return dto;
+        }
+        List<String> xIds = xAxis.stream().map(DatasetTableField::getId).collect(Collectors.toList());
+        List<String> yIds = yAxis.stream().map(DatasetTableField::getId).collect(Collectors.toList());
+        List<DatasetTableField> xList = dataSetTableFieldsService.getListByIds(xIds);
+        List<DatasetTableField> yList = dataSetTableFieldsService.getListByIds(yIds);
+
+        // 获取数据源
+        DatasetTable table = dataSetTableService.get(view.getTableId());
+        Datasource ds = datasourceService.get(table.getDataSourceId());
+
+        DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
+        DatasourceRequest datasourceRequest = new DatasourceRequest();
+        datasourceRequest.setDatasource(ds);
+        DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+        datasourceRequest.setTable(dataTableInfoDTO.getTable());
+        datasourceRequest.setQuery(getSQL(ds.getType(), dataTableInfoDTO.getTable(), xList, yList));
+        List<String[]> data = datasourceProvider.getData(datasourceRequest);
+
+        // todo 处理结果,目前做一个单系列图表，后期图表组件再扩展
+        for (DatasetTableField y : yList) {
+            Series series1 = new Series();
+            series1.setName(y.getName());
+            series1.setType(view.getType());
+            series1.setData(new ArrayList<>());
+            series.add(series1);
+        }
+        for (String[] d : data) {
+            StringBuilder a = new StringBuilder();
+            BigDecimal b = new BigDecimal("0");
+            for (int i = 0; i < xList.size(); i++) {
+                if (i == xList.size() - 1) {
+                    a.append(d[i]);
+                } else {
+                    a.append(d[i]).append("\n");
+                }
+            }
+            x.add(a.toString());
+            for (int i = xList.size(); i < xList.size() + yList.size(); i++) {
+                int j = i - xList.size();
+                series.get(j).getData().add(new BigDecimal(d[i]));
+            }
+        }
+        Map<String, Object> map = new HashMap<>();
+        map.put("x", x);
+        map.put("series", series);
+
+        ChartViewDTO dto = new ChartViewDTO();
+        BeanUtils.copyBean(dto, view);
+        dto.setData(map);
+        return dto;
+    }
+
+    public String getSQL(String type, String table, List<DatasetTableField> xAxis, List<DatasetTableField> yAxis) {
+        DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
+        switch (datasourceType) {
+            case mysql:
+                return transMysqlSQL(table, xAxis, yAxis);
+            case sqlServer:
+            default:
+                return "";
+        }
+    }
+
+    public String transMysqlSQL(String table, List<DatasetTableField> xAxis, List<DatasetTableField> yAxis) {
+        // TODO 此处sum后期由用户前端传入
+        String[] field = yAxis.stream().map(y -> "sum(" + y.getOriginName() + ")").toArray(String[]::new);
+        String[] group = xAxis.stream().map(DatasetTableField::getOriginName).toArray(String[]::new);
+        return MessageFormat.format("SELECT {0},{1} FROM {2} GROUP BY {3}", StringUtils.join(group, ","), StringUtils.join(field, ","), table, StringUtils.join(group, ","));
+    }
+}

backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java

@@ -54,4 +54,10 @@ public class DataSetTableFieldsService {
         datasetTableFieldExample.createCriteria().andTableIdEqualTo(tableId);
         datasetTableFieldMapper.deleteByExample(datasetTableFieldExample);
     }
+
+    public List<DatasetTableField> getListByIds(List<String> ids) {
+        DatasetTableFieldExample datasetTableFieldExample = new DatasetTableFieldExample();
+        datasetTableFieldExample.createCriteria().andIdIn(ids);
+        return datasetTableFieldMapper.selectByExample(datasetTableFieldExample);
+    }
 }

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -91,6 +91,29 @@ public class DataSetTableService {
         return datasourceProvider.getTableFileds(datasourceRequest);
     }
 
+    public Map<String, List<DatasetTableField>> getFieldsFromDE(DataSetTableRequest dataSetTableRequest) throws Exception {
+        DatasetTableField datasetTableField = new DatasetTableField();
+        datasetTableField.setTableId(dataSetTableRequest.getId());
+        datasetTableField.setChecked(Boolean.TRUE);
+        List<DatasetTableField> fields = dataSetTableFieldsService.list(datasetTableField);
+
+        List<DatasetTableField> dimension = new ArrayList<>();
+        List<DatasetTableField> quota = new ArrayList<>();
+
+        fields.forEach(field -> {
+            if (field.getDeType() == 2) {
+                quota.add(field);
+            } else {
+                dimension.add(field);
+            }
+        });
+        Map<String, List<DatasetTableField>> map = new HashMap<>();
+        map.put("dimension", dimension);
+        map.put("quota", quota);
+
+        return map;
+    }
+
     public List<String[]> getData(DataSetTableRequest dataSetTableRequest) throws Exception {
         Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
         DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());

backend/src/main/resources/db/migration/V10__chart.sql

 -- chart start
-CREATE TABLE IF NOT EXISTS `chart_group` (
-  `id` varchar(50) NOT NULL COMMENT 'ID',
-  `name` varchar(64) NOT NULL COMMENT '名称',
-  `pid` varchar(50) COMMENT '父级ID',
-  `level` int(10) COMMENT '当前分组处于第几级',
-  `type` varchar(50) COMMENT 'group or scene',
-  `create_by` varchar(50)  COMMENT '创建人ID',
-  `create_time` bigint(13) COMMENT '创建时间',
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+CREATE TABLE IF NOT EXISTS `chart_group`
+(
+    `id`          varchar(50) NOT NULL COMMENT 'ID',
+    `name`        varchar(64) NOT NULL COMMENT '名称',
+    `pid`         varchar(50) COMMENT '父级ID',
+    `level`       int(10) COMMENT '当前分组处于第几级',
+    `type`        varchar(50) COMMENT 'group or scene',
+    `create_by`   varchar(50) COMMENT '创建人ID',
+    `create_time` bigint(13) COMMENT '创建时间',
+    PRIMARY KEY (`id`)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4;
+
+CREATE TABLE IF NOT EXISTS `chart_view`
+(
+    `id`            varchar(50) NOT NULL COMMENT 'ID',
+    `name`          varchar(64) COMMENT '名称',
+    `scene_id`      varchar(50) NOT NULL COMMENT '场景ID',
+    `table_id`      varchar(50) NOT NULL COMMENT '数据集表ID',
+    `type`          varchar(50) COMMENT '图表类型',
+    `title`         varchar(50) COMMENT 'EChart标题',
+    `x_axis`        longtext COMMENT '横轴field',
+    `y_axis`        longtext COMMENT '纵轴field',
+    `custom_attr`   longtext COMMENT '图形属性',
+    `custom_style`  longtext COMMENT '组件样式',
+    `custom_filter` longtext COMMENT '结果过滤',
+    `create_by`     varchar(50) COMMENT '创建人ID',
+    `create_time`   bigint(13) COMMENT '创建时间',
+    `update_time`   bigint(13) COMMENT '更新时间',
+    PRIMARY KEY (`id`),
+    KEY `IDX_TABLE_ID` (`table_id`)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4;
 -- chart end

frontend/src/business/components/chart/chart/chart.js

+export const BASE_BAR = {
+  title: {
+    text: ''
+  },
+  tooltip: {},
+  legend: {
+    data: []
+  },
+  xAxis: {
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: []
+};
+
+export default {
+  BASE_BAR,
+}

frontend/src/business/components/chart/group/Group.vue

@@ -139,7 +139,7 @@
         </el-form-item>
       </el-form>
     </el-row>
-    <span>{{sceneData}}</span>
+    <span v-show="false">{{sceneData}}</span>
     <el-tree
       :data="chartData"
       node-key="id"
@@ -152,7 +152,7 @@
           </span>
           <span>
             <span @click.stop style="margin-left: 12px;">
-              <el-dropdown trigger="click" @command="clickMore">
+              <el-dropdown trigger="click" @command="clickMore" size="small">
                 <span class="el-dropdown-link">
                   <el-button
                     icon="el-icon-more"
@@ -175,7 +175,7 @@
     </el-tree>
 
     <!--rename chart-->
-    <el-dialog :title="$t('chart.table')" :visible="editTable" :show-close="false" width="30%">
+    <el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
       <el-form :model="tableForm" :rules="tableFormRules" ref="tableForm">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="tableForm.name"></el-input>
@@ -247,7 +247,7 @@ export default {
   computed: {
     sceneData: function () {
       this.chartTree();
-      return this.$store.state.chart.sceneData;
+      return this.$store.state.chart.chartSceneData;
     }
   },
   mounted() {
@@ -340,10 +340,10 @@ export default {
       });
     },
 
-    saveTable(table) {
+    saveTable(view) {
       this.$refs['tableForm'].validate((valid) => {
         if (valid) {
-          this.$post("/chart/table/update", table, response => {
+          this.$post("/chart/view/save", view, response => {
             this.closeTable();
             this.$message({
               message: this.$t('commons.save_success'),
@@ -389,7 +389,7 @@ export default {
         cancelButtonText: this.$t('chart.cancel'),
         type: 'warning'
       }).then(() => {
-        this.$post("/chart/table/delete/" + data.id, null, response => {
+        this.$post("/chart/view/delete/" + data.id, null, response => {
           this.$message({
             type: 'success',
             message: this.$t('chart.delete_success'),
@@ -431,8 +431,8 @@ export default {
     chartTree() {
       this.chartData = [];
       if (this.currGroup) {
-        this.$post('/chart/table/list', {
-          sort: 'type asc,create_time desc,name asc',
+        this.$post('/chart/view/list', {
+          sort: 'create_time desc,name asc',
           sceneId: this.currGroup.id
         }, response => {
           this.chartData = response.data;
@@ -444,6 +444,7 @@ export default {
       if (data.type === 'scene') {
         this.sceneMode = true;
         this.currGroup = data;
+        this.$store.commit("setSceneId", this.currGroup.id);
       }
       if (node.expanded) {
         this.expandedArray.push(data.id);
@@ -476,13 +477,10 @@ export default {
     },
 
     sceneClick(data, node) {
-      // this.$store.commit('setChart', data.id);
-      // this.$router.push({
-      //   name: 'ChartGroup',
-      //   params: {
-      //     table: data
-      //   }
-      // });
+      this.$store.commit('setViewId', null);
+      this.$store.commit('setViewId', data.id);
+      this.$store.commit('setTableId', data.tableId);
+      this.$router.push("/chart/chart-edit");
     },
 
     selectTable() {
@@ -491,10 +489,18 @@ export default {
 
     createChart() {
       console.log(this.table);
-      this.selectTableFlag = false;
-      this.$store.commit("setTableId", null);
-      this.$store.commit("setTableId", this.table.id);
-      this.$router.push("/chart/chart-edit");
+      let view = {};
+      view.name = this.table.name;
+      view.sceneId = this.currGroup.id;
+      view.tableId = this.table.id;
+      this.$post('/chart/view/save', view, response => {
+        this.selectTableFlag = false;
+        this.$store.commit("setTableId", null);
+        this.$store.commit("setTableId", this.table.id);
+        this.$router.push("/chart/chart-edit");
+        this.$store.commit("setViewId", response.data.id);
+        this.chartTree();
+      })
     },
 
     getTable(table) {

frontend/src/business/store.js

@@ -22,7 +22,9 @@ const Chart = {
   state: {
     chartSceneData: "",
     chart: "",
-    tableId: ""
+    tableId: "",
+    sceneId: "",
+    viewId: ""
   },
   mutations: {
     setChartSceneData(state, chartSceneData) {
@@ -33,6 +35,12 @@ const Chart = {
     },
     setTableId(state, tableId) {
       state.tableId = tableId;
+    },
+    setSceneId(state, sceneId) {
+      state.sceneId = sceneId;
+    },
+    setViewId(state, viewId) {
+      state.viewId = viewId;
     }
   }
 }

frontend/src/i18n/en-US.js

@@ -1549,7 +1549,18 @@ export default {
     table: '表',
     edit: '編輯',
     create_view: '創建試圖',
-    data_preview: '數據預覽'
+    data_preview: '數據預覽',
+    dimension: 'Dimension',
+    quota: 'Quota',
+    title: 'Title',
+    show: 'Show',
+    chart_type: 'Chart Type',
+    shape_attr: 'Attribute',
+    module_style: 'Style',
+    result_filter: 'Filter',
+    x_axis: 'X-Axis',
+    y_axis: 'Y-Axis',
+    chart: 'Chart'
   },
   dataset: {
     datalist: 'Data List',
@@ -1574,18 +1585,18 @@ export default {
     sql_data: 'SQL Data',
     excel_data: 'Excel Data',
     custom_data: 'Custom Data',
-    pls_slc_tbl_left:'Please select table from left',
-    add_db_table:'Add Table',
-    pls_slc_data_source:'Select Data Source',
-    table:'Table',
+    pls_slc_tbl_left: 'Please select table from left',
+    add_db_table: 'Add Table',
+    pls_slc_data_source: 'Select Data Source',
+    table: 'Table',
     edit: 'Edit',
     create_view: 'Create View',
-    data_preview:'Data Preview',
-    field_type:'Field Type',
-    field_name:'Field Name',
-    field_origin_name:'Origin Name',
-    field_check:'Checked',
-    update_info:'Update Info',
+    data_preview: 'Data Preview',
+    field_type: 'Field Type',
+    field_name: 'Field Name',
+    field_origin_name: 'Origin Name',
+    field_check: 'Checked',
+    update_info: 'Update Info',
     join_view: 'Relation View',
     text: 'Text',
     time: 'Time',

frontend/src/i18n/zh-CN.js

 export default {
   commons: {
-    upload:'上传',
+    upload: '上传',
     cover: '覆盖',
     not_cover: '不覆盖',
     import_mode: '导入模式',
@@ -220,8 +220,8 @@ export default {
     loginImage: '登陆页面右侧图片',
     loginTitle: '登陆页面提示信息',
     pageTitle: '页面 Title',
-    favicon:"Favicon（浏览器Tab页上的小图标）",
-    advice_size:"建议图片大小",
+    favicon: "Favicon（浏览器Tab页上的小图标）",
+    advice_size: "建议图片大小",
   },
   system_config: {
     base_config: '基本配置',
@@ -229,12 +229,12 @@ export default {
       url: '当前站点URL',
       url_tip: '例如：http://localhost:8081',
       logo: "系统LOGO（显示在系统主页左上角的LOGO）",
-      advice_size:"建议图片大小",
-      title:"Title（浏览器Tab页上的显示的文字）",
-      favicon:"Favicon（浏览器Tab页上的小图标）",
-      system_name:"系统名称（显示在系统主页左上角的系统名称）",
+      advice_size: "建议图片大小",
+      title: "Title（浏览器Tab页上的显示的文字）",
+      favicon: "Favicon（浏览器Tab页上的小图标）",
+      system_name: "系统名称（显示在系统主页左上角的系统名称）",
       login_image: "登录页图片（登录页中显示的图片）",
-      login_name:"登录页显示的系统名称"
+      login_name: "登录页显示的系统名称"
     }
   },
   workspace: {
@@ -1570,7 +1570,18 @@ export default {
     table: '表',
     edit: '编辑',
     create_view: '创建试图',
-    data_preview:'数据预览'
+    data_preview: '数据预览',
+    dimension: '维度',
+    quota: '指标',
+    title: '标题',
+    show: '显示',
+    chart_type: '图表类型',
+    shape_attr: '图形属性',
+    module_style: '组件样式',
+    result_filter: '结果过滤器',
+    x_axis: '横轴',
+    y_axis: '纵轴',
+    chart:'视图'
   },
   dataset: {
     datalist: '数据列表',

frontend/src/i18n/zh-TW.js

@@ -1550,7 +1550,18 @@ export default {
     table: '表',
     edit: '編輯',
     create_view: '創建試圖',
-    data_preview: '數據預覽'
+    data_preview: '數據預覽',
+    dimension: '維度',
+    quota: '指標',
+    title: '標題',
+    show: '顯示',
+    chart_type: '圖表類型',
+    shape_attr: '圖形屬性',
+    module_style: '組件樣式',
+    result_filter: '結果過濾器',
+    x_axis: '橫軸',
+    y_axis: '縱軸',
+    chart:'視圖'
   },
   dataset: {
     datalist: '數據列表',