feat: S2 pivot

This commit is contained in:
junjun 2022-02-15 15:56:51 +08:00
parent fcf069f8b8
commit f2978cb1e7
7 changed files with 55 additions and 15 deletions

View File

@ -1023,7 +1023,8 @@ export default {
table_column_custom: 'Custom',
chart_table_pivot: 'Pivot Table',
table_pivot_row: 'Data Row',
field_error_tips: 'This field is changed(Include dimension、quotafield typedeleted),please edit again.'
field_error_tips: 'This field is changed(Include dimension、quotafield typedeleted),please edit again.',
table_border_color: 'Border Color'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

View File

@ -1023,7 +1023,8 @@ export default {
table_column_custom: '自定義',
chart_table_pivot: '透視表',
table_pivot_row: '數據行',
field_error_tips: '該字段所對應的數據集原始字段發生變更(包括維度、指標,字段類型,字段被刪除等),建議重新編輯'
field_error_tips: '該字段所對應的數據集原始字段發生變更(包括維度、指標,字段類型,字段被刪除等),建議重新編輯',
table_border_color: '邊框顏色'
},
dataset: {
sheet_warn: '有多個 Sheet 頁,默認抽取第一個',

View File

@ -1025,7 +1025,8 @@ export default {
table_column_custom: '自定义',
chart_table_pivot: '透视表',
table_pivot_row: '数据行',
field_error_tips: '该字段所对应的数据集原始字段发生变更(包括维度、指标,字段类型,字段被删除等),建议重新编辑'
field_error_tips: '该字段所对应的数据集原始字段发生变更(包括维度、指标,字段类型,字段被删除等),建议重新编辑',
table_border_color: '边框颜色'
},
dataset: {
sheet_warn: '有多个 Sheet 页,默认抽取第一个',

View File

@ -2,12 +2,13 @@ export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
alpha: 100,
tableHeaderBgColor: '#c1d1f6',
tableItemBgColor: '#e2eafe',
tableHeaderBgColor: '#e1eaff',
tableItemBgColor: '#ffffff',
tableFontColor: '#000000',
tableStripe: true,
dimensionColor: '#000000',
quotaColor: '#000000'
quotaColor: '#000000',
tableBorderColor: '#cfdaf4'
}
export const DEFAULT_SIZE = {
barDefault: true,

View File

@ -2,13 +2,22 @@ import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function getCustomTheme(chart) {
const headerColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
const itemColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
const theme = {
background: {
color: '#00000000'
},
splitLine: {
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
},
cornerCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
backgroundColor: headerColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
@ -21,7 +30,9 @@ export function getCustomTheme(chart) {
},
rowCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
backgroundColor: headerColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
@ -34,7 +45,9 @@ export function getCustomTheme(chart) {
},
colCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
backgroundColor: headerColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
@ -47,7 +60,9 @@ export function getCustomTheme(chart) {
},
dataCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
backgroundColor: itemColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
@ -62,17 +77,33 @@ export function getCustomTheme(chart) {
// color
if (customAttr.color) {
const c = JSON.parse(JSON.stringify(customAttr.color))
theme.cornerCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
const h_c = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
const i_c = hexColorToRGBA(c.tableItemBgColor, c.alpha)
const b_c = c.tableBorderColor ? hexColorToRGBA(c.tableBorderColor, c.alpha) : hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, c.alpha)
theme.splitLine.horizontalBorderColor = b_c
theme.splitLine.verticalBorderColor = b_c
theme.cornerCell.cell.backgroundColor = h_c
theme.cornerCell.cell.horizontalBorderColor = b_c
theme.cornerCell.cell.verticalBorderColor = b_c
theme.cornerCell.bolderText.fill = c.tableFontColor
theme.cornerCell.text.fill = c.tableFontColor
theme.rowCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
theme.rowCell.cell.backgroundColor = h_c
theme.rowCell.cell.horizontalBorderColor = b_c
theme.rowCell.cell.verticalBorderColor = b_c
theme.rowCell.bolderText.fill = c.tableFontColor
theme.rowCell.text.fill = c.tableFontColor
theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
theme.colCell.cell.backgroundColor = h_c
theme.colCell.cell.horizontalBorderColor = b_c
theme.colCell.cell.verticalBorderColor = b_c
theme.colCell.bolderText.fill = c.tableFontColor
theme.colCell.text.fill = c.tableFontColor
theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
theme.dataCell.cell.backgroundColor = i_c
theme.dataCell.cell.horizontalBorderColor = b_c
theme.dataCell.cell.verticalBorderColor = b_c
theme.dataCell.text.fill = c.tableFontColor
}
// size

View File

@ -135,7 +135,7 @@ export default {
methods: {
initData() {
let datas = []
if (this.chart.data) {
if (this.chart.data && this.chart.data.fields) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
const attr = JSON.parse(this.chart.customAttr)
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)

View File

@ -63,6 +63,9 @@
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
@ -240,6 +243,8 @@ export default {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
}
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
}
}
},