|
|
|
|
@ -11,7 +11,10 @@
|
|
|
|
|
:width-resize="true"
|
|
|
|
|
:header-row-style="table_header_class"
|
|
|
|
|
:row-style="getRowStyle"
|
|
|
|
|
:cell-style="getColumStyle"
|
|
|
|
|
class="table-class"
|
|
|
|
|
show-overflow="tooltip"
|
|
|
|
|
show-header-overflow="tooltip"
|
|
|
|
|
:class="chart.id"
|
|
|
|
|
:show-summary="showSummary"
|
|
|
|
|
:summary-method="summaryMethod"
|
|
|
|
|
@ -19,15 +22,13 @@
|
|
|
|
|
<ux-table-column
|
|
|
|
|
v-for="(field, index) in fields"
|
|
|
|
|
:key="index"
|
|
|
|
|
:min-width="field.rowName?200:100"
|
|
|
|
|
:field="field.dataeaseName"
|
|
|
|
|
:resizable="true"
|
|
|
|
|
sortable
|
|
|
|
|
:title="field.name"
|
|
|
|
|
>
|
|
|
|
|
<!-- <template slot="header">-->
|
|
|
|
|
<!-- <span>{{ field.name }}</span>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
</ux-table-column>
|
|
|
|
|
:sortable="!field.rowName"
|
|
|
|
|
:fixed="field.fixed"
|
|
|
|
|
:title="field.rowName?field.name+' \\ '+field.rowName:field.name"
|
|
|
|
|
/>
|
|
|
|
|
</ux-grid>
|
|
|
|
|
|
|
|
|
|
<el-row v-show="chart.type === 'table-info'" class="table-page">
|
|
|
|
|
@ -97,7 +98,7 @@ export default {
|
|
|
|
|
table_header_class: {
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
color: '#606266',
|
|
|
|
|
background: '#e8eaec',
|
|
|
|
|
backgroundColor: '#e8eaec',
|
|
|
|
|
height: '36px'
|
|
|
|
|
},
|
|
|
|
|
table_item_class: {
|
|
|
|
|
@ -162,15 +163,66 @@ export default {
|
|
|
|
|
const that = this
|
|
|
|
|
let datas = []
|
|
|
|
|
if (this.chart.data) {
|
|
|
|
|
console.log(this.chart)
|
|
|
|
|
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
|
|
|
|
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
|
|
|
|
const findRowIndex = this.fields.findIndex(e => e.chartType === 'row')
|
|
|
|
|
const findValueIndex = this.fields.findIndex(e => e.chartType === 'bar')
|
|
|
|
|
const findIndex = this.fields.findIndex(e => e.chartType === null)
|
|
|
|
|
if (this.chart.type === 'table-info') {
|
|
|
|
|
// 计算分页
|
|
|
|
|
this.currentPage.show = datas.length
|
|
|
|
|
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
|
|
|
|
|
const pageEnd = pageStart + this.currentPage.pageSize
|
|
|
|
|
datas = datas.slice(pageStart, pageEnd)
|
|
|
|
|
} else if (this.chart.type === 'table-normal' && findRowIndex >= 0) {
|
|
|
|
|
// 交叉表数据处理
|
|
|
|
|
this.fields[0].rowName = this.fields[findRowIndex].name
|
|
|
|
|
this.fields[0].fixed = 'left'
|
|
|
|
|
const fieldRowName = this.fields[findRowIndex].dataeaseName
|
|
|
|
|
const fieldValueName = this.fields[findValueIndex].dataeaseName
|
|
|
|
|
const fieldName = this.fields[findIndex].dataeaseName
|
|
|
|
|
const fields = [this.fields[0]]
|
|
|
|
|
let name = null
|
|
|
|
|
let flag = true
|
|
|
|
|
let rowSum = 0
|
|
|
|
|
const columnValue = []
|
|
|
|
|
datas.forEach((ele, index) => {
|
|
|
|
|
if (name !== ele[fieldName] && name !== null) {
|
|
|
|
|
flag = false
|
|
|
|
|
}
|
|
|
|
|
if (name !== ele[fieldName]) {
|
|
|
|
|
columnValue.push({
|
|
|
|
|
[fieldName]: ele[fieldName]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
name = ele[fieldName]
|
|
|
|
|
if (name === ele[fieldName] && flag) {
|
|
|
|
|
fields.push({
|
|
|
|
|
dataeaseName: fieldRowName + ele[fieldRowName],
|
|
|
|
|
name: ele[fieldRowName]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
columnValue.forEach(ele => {
|
|
|
|
|
datas.forEach(subEle => {
|
|
|
|
|
if (ele[fieldName] === subEle[fieldName]) {
|
|
|
|
|
const key = fieldRowName + subEle[fieldRowName]
|
|
|
|
|
ele[key] = subEle[fieldValueName]
|
|
|
|
|
rowSum += subEle[fieldValueName]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
ele.rowTotal = rowSum
|
|
|
|
|
rowSum = 0
|
|
|
|
|
})
|
|
|
|
|
fields.push({
|
|
|
|
|
dataeaseName: 'rowTotal',
|
|
|
|
|
fixed: 'right',
|
|
|
|
|
name: `合计(${this.fields[findValueIndex].name})`
|
|
|
|
|
})
|
|
|
|
|
datas = columnValue
|
|
|
|
|
this.fields = fields
|
|
|
|
|
console.log(columnValue)
|
|
|
|
|
console.log(fields)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.fields = []
|
|
|
|
|
@ -222,7 +274,7 @@ export default {
|
|
|
|
|
const customAttr = JSON.parse(this.chart.customAttr)
|
|
|
|
|
if (customAttr.color) {
|
|
|
|
|
this.table_header_class.color = customAttr.color.tableFontColor
|
|
|
|
|
this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
|
|
|
|
|
this.table_header_class.backgroundColor = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
|
|
|
|
|
this.table_item_class.color = customAttr.color.tableFontColor
|
|
|
|
|
this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
|
|
|
|
|
}
|
|
|
|
|
@ -265,7 +317,7 @@ export default {
|
|
|
|
|
// console.log(s_table)
|
|
|
|
|
let s = ''
|
|
|
|
|
for (const i in this.table_header_class) {
|
|
|
|
|
s += (i === 'fontSize' ? 'font-size' : i) + ':' + this.table_header_class[i] + ';'
|
|
|
|
|
s += (i === 'fontSize' ? 'font-size' : i === 'backgroundColor' ? 'background-color' : i) + ':' + this.table_header_class[i] + ';'
|
|
|
|
|
}
|
|
|
|
|
// console.log(s_table)
|
|
|
|
|
for (let i = 0; i < s_table.length; i++) {
|
|
|
|
|
@ -280,14 +332,28 @@ export default {
|
|
|
|
|
return this.table_item_class
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getColumStyle({ columnIndex }) {
|
|
|
|
|
const findRowIndex = this.fields.findIndex(e => e.rowName)
|
|
|
|
|
if (this.chart.type === 'table-normal' && findRowIndex >= 0 && (columnIndex === 0 || columnIndex === this.fields.length - 1)) {
|
|
|
|
|
return this.table_header_class
|
|
|
|
|
} else {
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
summaryMethod({ columns, data }) {
|
|
|
|
|
const that = this
|
|
|
|
|
const means = [] // 合计
|
|
|
|
|
const findRowIndex = this.fields.findIndex(e => e.rowName)
|
|
|
|
|
const findValueIndex = this.chart.data.fields.findIndex(e => e.chartType === 'bar')
|
|
|
|
|
columns.forEach((column, columnIndex) => {
|
|
|
|
|
if (columnIndex === 0) {
|
|
|
|
|
means.push('合计')
|
|
|
|
|
if (findRowIndex !== -1 && findValueIndex !== -1) {
|
|
|
|
|
means.push(`合计(${this.chart.data.fields[findValueIndex].name})`)
|
|
|
|
|
} else {
|
|
|
|
|
means.push('合计')
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length) {
|
|
|
|
|
if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length || findRowIndex !== -1) {
|
|
|
|
|
const values = data.map(item => Number(item[column.property]))
|
|
|
|
|
// 合计
|
|
|
|
|
if (!values.every(value => isNaN(value))) {
|
|
|
|
|
@ -375,4 +441,10 @@ export default {
|
|
|
|
|
.page-style >>> .el-input__inner{
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
.colum-header {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #000;
|
|
|
|
|
background: rgb(78, 129, 187);
|
|
|
|
|
height: 36px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
黄欣
4 years ago