center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #3369 from dataease/pr@dev@feat_table_add_index_column

Browse Source 
feat(视图): 明细表和汇总表增加序列号
This commit is contained in:
fit2cloud-chenyw 2022-10-18 12:59:05 +08:00 committed by GitHub
commit fe9ef63263
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 135 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lang/en.js
View File

@ -1097,6 +1097,7 @@ export default {
table_item_bg: 'Table Background',
table_header_font_color: 'Header Font',
table_item_font_color: 'Table Font',
table_show_index: 'Show Index',
stripe: 'Zebra pattern',
start_angle: 'Start Angle',
end_angle: 'End Angle',

1
frontend/src/lang/tw.js
View File

@ -1097,6 +1097,7 @@ export default {
table_item_bg: '表格背景',
table_header_font_color: '表頭字體',
table_item_font_color: '表格字體',
table_show_index: '顯示序號',
stripe: '斑馬紋',
start_angle: '起始角度',
end_angle: '結束角度',

1
frontend/src/lang/zh.js
View File

@ -1096,6 +1096,7 @@ export default {
table_item_bg: '表格背景',
table_header_font_color: '表头字体',
table_item_font_color: '表格字体',
table_show_index: '显示序号',
stripe: '斑马纹',
start_angle: '起始角度',
end_angle: '结束角度',

4
frontend/src/views/chart/chart/chart.js
View File

@ -111,7 +111,9 @@ export const DEFAULT_SIZE = {
liquidShape: 'circle',
tablePageMode: 'page',
symbolOpacity: 0.7,
symbolStrokeWidth: 2
symbolStrokeWidth: 2,
showIndex: false,
indexLabel: '序号'
}
export const DEFAULT_LABEL = {
show: false,

19
frontend/src/views/chart/chart/common/common_table.js
View File

@ -20,7 +20,8 @@ export function getCustomTheme(chart) {
cell: {
backgroundColor: headerColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
verticalBorderColor: borderColor,
verticalBorderWidth: 0 //左上角顶点单元格左右边缘宽度要设置为 0，不然序号列的数字部分会比表头多几个像素，视觉上会突出去
},
text: {
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@ -47,7 +48,8 @@ export function getCustomTheme(chart) {
text: {
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
textAlign: headerAlign,
textBaseline: 'middle' // 行头字体绘制基线设置为中心，不然序号列的内容会靠上
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@ -125,9 +127,9 @@ export function getCustomTheme(chart) {
theme.cornerCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.cornerCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.cell.backgroundColor = h_c
theme.rowCell.cell.horizontalBorderColor = b_c
theme.rowCell.cell.verticalBorderColor = b_c
theme.rowCell.cell.backgroundColor = i_c // 这个参数其实只对开启序号列的行头生效
theme.rowCell.cell.horizontalBorderColor = i_c
theme.rowCell.cell.verticalBorderColor = i_c
theme.rowCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
@ -159,12 +161,13 @@ export function getCustomTheme(chart) {
theme.cornerCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
theme.cornerCell.measureText.textAlign = h_a
// 序号列的数字单元格内容样式使用指标的内容样式而不是表头的内容样式
theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
theme.rowCell.bolderText.textAlign = h_a
theme.rowCell.bolderText.textAlign = i_a
theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
theme.rowCell.text.textAlign = h_a
theme.rowCell.text.textAlign = i_a
theme.rowCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
theme.rowCell.measureText.textAlign = h_a
theme.rowCell.measureText.textAlign = i_a
theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
theme.colCell.bolderText.textAlign = h_a

22
frontend/src/views/chart/chart/table/table-info.js
View File

@ -119,14 +119,23 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
data: tableData
}
const customAttr = JSON.parse(chart.customAttr)
// options
const s2Options = {
width: containerDom.offsetWidth,
height: containerDom.offsetHeight,
// showSeriesNumber: true
showSeriesNumber: customAttr.size.showIndex,
style: getSize(chart),
conditions: getConditions(chart)
}
//开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
s2Options.colCell= (node) => {
if (node.colIndex === 0) {
node.label = customAttr.size.indexLabel
}
}
}
// 开始渲染
if (s2) {
@ -248,14 +257,23 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
data: tableData
}
const customAttr = JSON.parse(chart.customAttr)
// options
const s2Options = {
width: containerDom.offsetWidth,
height: containerDom.offsetHeight,
// showSeriesNumber: true
showSeriesNumber: customAttr.size.showIndex,
style: getSize(chart),
conditions: getConditions(chart)
}
//开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
s2Options.colCell= (node) => {
if (node.colIndex === 0) {
node.label = customAttr.size.indexLabel
}
}
}
// 开始渲染
if (s2) {

16
frontend/src/views/chart/chart/util.js
View File

@ -57,7 +57,9 @@ export const TYPE_CONFIGS = [
'tableItemAlign',
'tableTitleHeight',
'tableItemHeight',
'tableColumnMode'
'tableColumnMode',
'tableShowIndex',
'tableIndexLabel'
],
'title-selector-ant-v': [
'show',
@ -103,7 +105,9 @@ export const TYPE_CONFIGS = [
'tableItemAlign',
'tableTitleHeight',
'tableItemHeight',
'tableColumnMode'
'tableColumnMode',
'tableShowIndex',
'tableIndexLabel'
],
'title-selector-ant-v': [
'show',
@ -1669,7 +1673,9 @@ export const TYPE_CONFIGS = [
'tableItemFontSize',
'tableTitleHeight',
'tableItemHeight',
'tableColumnWidth'
'tableColumnWidth',
'tableShowIndex',
'tableIndexLabel'
],
'title-selector': [
'show',
@ -1708,7 +1714,9 @@ export const TYPE_CONFIGS = [
'tableItemFontSize',
'tableTitleHeight',
'tableItemHeight',
'tableColumnWidth'
'tableColumnWidth',
'tableShowIndex',
'tableIndexLabel'
],
'title-selector': [
'show',

30
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -369,6 +369,33 @@
@change="changeBarSizeCase('tableColumnWidth')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableShowIndex')"
label-width="100px"
:label="$t('chart.table_show_index')"
class="form-item"
>
<el-radio-group
v-model="sizeForm.showIndex"
input-size="mini"
@change="changeBarSizeCase('tableShowIndex')"
>
<el-radio :label="true">{{$t('panel.yes')}}</el-radio>
<el-radio :label="false">{{$t('panel.no')}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
label-width="100px"
class="form-item">
<el-input
v-model="sizeForm.indexLabel"
type="text"
@blur="changeBarSizeCase('tableIndexLabel')"
/>
</el-form-item>
<!--table-end-->
<!--gauge-begin-->
<el-form-item
@ -1031,6 +1058,9 @@ export default {
this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic

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

@ -358,6 +358,31 @@
@change="changeBarSizeCase('tableColumnWidth')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableShowIndex')"
label-width="100px"
:label="$t('chart.table_show_index')"
class="form-item"
>
<el-radio-group
v-model="sizeForm.showIndex"
input-size="mini"
@change="changeBarSizeCase('tableShowIndex')"
>
<el-radio :label="true">{{$t('panel.yes')}}</el-radio>
<el-radio :label="false">{{$t('panel.no')}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
label-width="100px"
class="form-item">
<el-input
v-model="sizeForm.indexLabel"
type="text"
@blur="changeBarSizeCase('tableIndexLabel')"
/>
</el-form-item>
<!--chart-mix-start-->
<span v-show="showProperty('mix')">
@ -1197,6 +1222,9 @@ export default {
this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
this.sizeForm.gaugeMinType = this.sizeForm.gaugeMinType ? this.sizeForm.gaugeMinType : DEFAULT_SIZE.gaugeMinType

32
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -24,6 +24,9 @@
:show-summary="showSummary"
:summary-method="summaryMethod"
>
<ux-table-column
type="index"
:title='indexLabel'/>
<ux-table-column
v-for="field in fields"
:key="field.name"
@ -136,7 +139,9 @@ export default {
showPage: false,
columnWidth: DEFAULT_SIZE.tableColumnWidth,
scrollTimer: null,
scrollTop: 0
scrollTop: 0,
showIndex: false,
indexLabel: '序号'
}
},
computed: {
@ -278,6 +283,17 @@ export default {
this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
this.table_header_class.height = customAttr.size.tableTitleHeight + 'px'
this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
const visibleColumn = this.$refs.plxTable.getTableColumn().fullColumn
for (let i = 0,column=visibleColumn[i]; i < visibleColumn.length; i++) {
// 有变更才刷新
if (column.type === 'index' && column.visible !== customAttr.size.showIndex) {
column.visible = customAttr.size.showIndex
this.$refs.plxTable.refreshColumn()
break;
}
}
this.indexLabel = customAttr.size.indexLabel
}
this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
// 暂不支持斑马纹
@ -328,13 +344,19 @@ export default {
summaryMethod({ columns, data }) {
const that = this
const means = [] // 合计
const x = JSON.parse(that.chart.xaxis);
const customAttr = JSON.parse(that.chart.customAttr);
columns.forEach((column, columnIndex) => {
const x = JSON.parse(that.chart.xaxis)
if (columnIndex === 0 && x.length > 0) {
means.push('合计')
} else {
if (columnIndex >= x.length) {
const values = data.map(item => Number(item[column.property]))
// 显示序号就往后推一列
let requireSumIndex = x.length
if (customAttr.size.showIndex) {
requireSumIndex++
}
if (columnIndex >= requireSumIndex) {
const values = data.map(item => Number(item[column.property]));
// 合计
if (!values.every(value => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => {
@ -350,7 +372,7 @@ export default {
means[columnIndex] = ''
}
} else {
means[columnIndex] = ''
means[columnIndex] = '';
}
}
})

2
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -40,7 +40,7 @@
<el-collapse-item
v-show="showPropertiesCollapse(['size-selector'])"
name="size"
:title="$t('chart.size')"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
>
<size-selector
:param="param"