Merge branch 'dev' of github.com:dataease/dataease into dev

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

@@ -305,10 +305,10 @@ public class ChartViewService {
                         filterRequest.setFieldId(fId);
 
                         DatasetTableField datasetTableField = dataSetTableFieldsService.get(fId);
-                        if(datasetTableField == null){
+                        if (datasetTableField == null) {
                             continue;
                         }
-                        if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                        if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                             filterRequest.setDatasetTableField(datasetTableField);
                             if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                                 if (CollectionUtils.isNotEmpty(filterRequest.getViewIds())) {
@@ -329,7 +329,7 @@ public class ChartViewService {
         if (ObjectUtils.isNotEmpty(requestList.getLinkageFilters())) {
             for (ChartExtFilterRequest request : requestList.getLinkageFilters()) {
                 DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
-                if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                     request.setDatasetTableField(datasetTableField);
                     if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                         if (CollectionUtils.isNotEmpty(request.getViewIds())) {
@@ -814,34 +814,66 @@ public class ChartViewService {
                 }
             }
 
-            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
-                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
-                axisChartDataDTO.setField(a.toString());
-                axisChartDataDTO.setName(a.toString());
+            if (StringUtils.containsIgnoreCase(view.getType(), "table")) {
+                for (int i = 0; i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+                    axisChartDataDTO.setName(a.toString());
 
-                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
-                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
 
-                for (int j = 0; j < xAxis.size(); j++) {
-                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
-                    chartDimensionDTO.setId(xAxis.get(j).getId());
-                    chartDimensionDTO.setValue(row[j]);
-                    dimensionList.add(chartDimensionDTO);
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    if (j > -1) {
+                        ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                        chartQuotaDTO.setId(yAxis.get(j).getId());
+                        quotaList.add(chartQuotaDTO);
+                        axisChartDataDTO.setQuotaList(quotaList);
+                        try {
+                            axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
+                        } catch (Exception e) {
+                            axisChartDataDTO.setValue(new BigDecimal(0));
+                        }
+                    }
+                    datas.add(axisChartDataDTO);
                 }
-                axisChartDataDTO.setDimensionList(dimensionList);
+            } else {
+                for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+                    axisChartDataDTO.setName(a.toString());
 
-                int j = i - xAxis.size();
-                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
-                chartQuotaDTO.setId(yAxis.get(j).getId());
-                quotaList.add(chartQuotaDTO);
-                axisChartDataDTO.setQuotaList(quotaList);
-                try {
-                    axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
-                } catch (Exception e) {
-                    axisChartDataDTO.setValue(new BigDecimal(0));
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(j).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                    datas.add(axisChartDataDTO);
                 }
-                axisChartDataDTO.setCategory(yAxis.get(j).getName());
-                datas.add(axisChartDataDTO);
             }
         }
         map.put("datas", datas);

frontend/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.3.32",
-    "@antv/s2": "^1.6.0",
+    "@antv/s2": "^1.7.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.1",

frontend/src/components/canvas/custom-component/UserView.vue

@@ -37,6 +37,16 @@
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
+    <chart-component-s2
+      v-if="charViewS2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
     <table-normal
       v-if="tableShowFlag"
       :ref="element.propValue.id"
@@ -71,10 +81,11 @@ import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 
 export default {
   name: 'UserView',
-  components: { EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -169,8 +180,11 @@ export default {
     charViewG2ShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
     },
+    charViewS2ShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+    },
     tableShowFlag() {
-      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
     },
     labelShowFlag() {
       return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')

frontend/src/lang/en.js

@@ -1016,7 +1016,11 @@ export default {
     filter_exp: 'Filter Value',
     filter_type: 'Filter Type',
     filter_value_can_not_str: 'Value type can not input string',
-    enum_value_can_not_null: 'Enum Value can not empty.'
+    enum_value_can_not_null: 'Enum Value can not empty.',
+    table_config: 'Table Config',
+    table_column_width_config: 'Column Width',
+    table_column_adapt: 'Adapt',
+    table_column_custom: 'Custom'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1016,7 +1016,11 @@ export default {
     filter_exp: '過濾值',
     filter_type: '過濾方式',
     filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
-    enum_value_can_not_null: '字段枚舉值不能為空'
+    enum_value_can_not_null: '字段枚舉值不能為空',
+    table_config: '表格配置',
+    table_column_width_config: '列寬調整',
+    table_column_adapt: '自適應',
+    table_column_custom: '自定義'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1018,7 +1018,11 @@ export default {
     filter_exp: '过滤值',
     filter_type: '过滤方式',
     filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
-    enum_value_can_not_null: '字段枚举值不能为空'
+    enum_value_can_not_null: '字段枚举值不能为空',
+    table_config: '表格配置',
+    table_column_width_config: '列宽调整',
+    table_column_adapt: '自适应',
+    table_column_custom: '自定义'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -31,6 +31,8 @@ export const DEFAULT_SIZE = {
   tableTitleHeight: 36,
   tableItemHeight: 36,
   tablePageSize: '20',
+  tableColumnMode: 'adapt',
+  tableColumnWidth: 100,
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,

frontend/src/views/chart/chart/common/common_table.js

+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
+
+export function getCustomTheme(chart) {
+  const theme = {
+    background: {
+      color: '#00000000'
+    },
+    colCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    dataCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableItemFontSize
+      }
+    }
+  }
+
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.colCell.bolderText.fill = c.tableFontColor
+      theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      theme.dataCell.text.fill = c.tableFontColor
+    }
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+    }
+  }
+
+  return theme
+}
+
+export function getSize(chart) {
+  const size = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      size.colCfg = {
+        height: s.tableTitleHeight
+      }
+      size.cellCfg = {
+        height: s.tableItemHeight
+      }
+      if (!s.tableColumnMode || s.tableColumnMode === 'adapt') {
+        delete size.cellCfg.width
+        size.layoutWidthType = 'compact'
+      } else {
+        delete size.layoutWidthType
+        size.cellCfg.width = s.tableColumnWidth
+      }
+    }
+  }
+
+  return size
+}

frontend/src/views/chart/chart/table/table-info.js

+import { TableSheet, S2Event } from '@antv/s2'
+import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
+
+export function baseTableInfo(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // data
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+  fields.forEach(ele => {
+    columns.push(ele.dataeaseName)
+
+    meta.push({
+      field: ele.dataeaseName,
+      name: ele.name
+    })
+  })
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
+
+export function baseTableNormal(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // data
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+  fields.forEach(ele => {
+    columns.push(ele.dataeaseName)
+
+    meta.push({
+      field: ele.dataeaseName,
+      name: ele.name
+    })
+  })
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -81,6 +81,16 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
+          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -92,20 +102,29 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
         <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
-            <el-option
-              v-for="item in pageSizeOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
+          <el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
+          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
+            <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
+            <el-radio label="custom">
+              <span>{{ $t('chart.table_column_custom') }}</span>
+            </el-radio>
+          </el-radio-group>
+          <el-tooltip class="item" effect="dark" placement="bottom">
+            <div slot="content">
+              列宽并非任何时候都能生效。
+              <br>
+              容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。
+            </div>
+            <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
 
@@ -322,6 +341,9 @@ export default {
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
+          this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
         }
       }
     },
@@ -361,7 +383,9 @@ export default {
 .el-select-dropdown__item{
   padding: 0 20px;
 }
-  span{font-size: 12px}
+span{
+  font-size: 12px
+}
 
 .el-form-item{
   margin-bottom: 6px;

frontend/src/views/chart/view/ChartEdit.vue

@@ -565,7 +565,7 @@
                   <el-collapse-item
                     v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap'"
                     name="size"
-                    :title="$t('chart.size')"
+                    :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
                   >
                     <size-selector-ant-v
                       :param="param"
@@ -769,8 +769,16 @@
               class="chart-class"
               @onChartClick="chartClick"
             />
+            <chart-component-s2
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              ref="dynamicChart"
+              :chart-id="chart.id"
+              :chart="chart"
+              class="chart-class"
+              @onChartClick="chartClick"
+            />
             <table-normal
-              v-if="httpRequest.status && chart.type && chart.type.includes('table')"
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts'"
               :show-summary="chart.type === 'table-normal'"
               :chart="chart"
               class="table-class"
@@ -973,10 +981,12 @@ import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAn
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
 import CompareEdit from '@/views/chart/components/compare/CompareEdit'
 import { compareItem } from '@/views/chart/chart/compare'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 
 export default {
   name: 'ChartEdit',
   components: {
+    ChartComponentS2,
     CompareEdit,
     SplitSelectorAntV,
     SizeSelectorAntV,