wuguolin
/
smartbi2
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

数据探索数据列 / 指标增加百分比,dashboard日期和日期范围默认T-1

Browse Source
dev
zhenghuang 4 years ago
parent ce49fd603c
commit 409cd06063
1 changed files with 184 additions and 87 deletions
Show Stats Download Patch File Download Diff File

239
frontend/src/views/chart/components/table/TableNormal.vue
Unescape Escape View File

@ -1,13 +1,19 @@
<template>
<div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
<el-row style="height: 100%;">
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
<div
ref="tableContainer"
:style="bg_class"
style="padding: 8px; width: 100%; height: 100%; overflow: hidden"
>
<el-row style="height: 100%">
<p v-show="title_show" ref="title" :style="title_class">
{{ chart.title }}
</p>
<ux-grid
ref="plxTable"
size="mini"
style="width: 100%;"
style="width: 100%"
:height="height"
:checkbox-config="{highlight: true}"
:checkbox-config="{ highlight: true }"
:width-resize="true"
:header-row-style="table_header_class"
:row-style="getRowStyle"
@ -21,15 +27,15 @@
>
<ux-table-column
v-for="(field, index) in fields"
:key="field.dataeaseName+index"
:field="field.subFields?'':field.dataeaseName"
:key="field.dataeaseName + index"
:field="field.subFields ? '' : field.dataeaseName"
:resizable="true"
:fixed="field.fixed"
:title="field.name"
>
<template v-if="field.subFields">
<ux-table-column
v-for="(subfield) in field.subFields"
v-for="subfield in field.subFields"
:key="subfield.dataeaseName"
:field="subfield.dataeaseName"
:resizable="true"
@ -42,13 +48,15 @@
<el-row v-show="chart.type === 'table-info'" class="table-page">
<span class="total-style">
{{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
<span>{{
chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
}}</span>
{{ $t('chart.items') }}
</span>
<el-pagination
small
:current-page="currentPage.page"
:page-sizes="[10,20,50,100]"
:page-sizes="[10, 20, 50, 100]"
:page-size="currentPage.pageSize"
:pager-count="5"
layout="sizes, prev, pager, next"
@ -172,7 +180,7 @@ export default {
for (var i = 0; i < obj.length; i++) {
var keys = Object.keys(obj[i])
keys.sort(function(a, b) {
return (Number(a) - Number(b))
return Number(a) - Number(b)
})
var str = ''
for (var j = 0; j < keys.length; j++) {
@ -192,33 +200,45 @@ export default {
if (this.chart.data) {
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 findRowIndex = this.fields.findIndex((e) => e.chartType === 'row')
const findValueIndex = this.fields.findIndex(
(e) => e.chartType === 'bar'
)
if (this.chart.type === 'table-info') {
// 计算分页
this.currentPage.show = datas.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
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) {
// 交叉表数据处理
const xaxis = this.chart.xaxis ? JSON.parse(this.chart.xaxis) : []
const yaxisExt = this.chart.yaxisExt ? JSON.parse(this.chart.yaxisExt) : []
const xaxisFieldId = xaxis.map(e => e.dataeaseName)
const yaxisExtFieldId = yaxisExt.map(e => e.dataeaseName)
const yaxisExt = this.chart.yaxisExt
? JSON.parse(this.chart.yaxisExt)
: []
const xaxisFieldId = xaxis.map((e) => e.dataeaseName)
const yaxisExtFieldId = yaxisExt.map((e) => e.dataeaseName)
const fieldValueName = this.fields[findValueIndex].dataeaseName
this.cellDimension = xaxisFieldId.length
let fields = this.fields.filter(e => xaxisFieldId.includes(e.dataeaseName))
let fields = this.fields.filter((e) =>
xaxisFieldId.includes(e.dataeaseName)
)
console.log(fields)
let rowSum = 0
let columnValue = []
let rowName = []
yaxisExtFieldId.forEach((e, index) => {
const arr = []
datas.forEach(ele => {
datas.forEach((ele) => {
if (index > 0) {
arr.push({
dataeaseName: e + ele[e] + ',' + yaxisExtFieldId[0] + ele[yaxisExtFieldId[0]],
dataeaseName:
e +
ele[e] +
',' +
yaxisExtFieldId[0] +
ele[yaxisExtFieldId[0]],
name: ele[e]
})
} else {
@ -230,9 +250,9 @@ export default {
})
if (index > 0) {
const copyArr = this.deteleObject(arr)
rowName.forEach(item => {
rowName.forEach((item) => {
const newArr = []
copyArr.forEach(sube => {
copyArr.forEach((sube) => {
if (item.dataeaseName === sube.dataeaseName.split(',')[1]) {
newArr.push(sube)
}
@ -246,7 +266,7 @@ export default {
if (xaxisFieldId.length > 1) {
let arr1 = []
let arr2 = []
datas.forEach(obj => {
datas.forEach((obj) => {
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const element = obj[key]
@ -265,42 +285,57 @@ export default {
arr1 = this.deteleObject(arr1)
arr2 = this.deteleObject(arr2)
let rowIndex = 0
arr1.forEach(e => {
arr1.forEach((e) => {
this.mergeCells.push({
col: 0,
row: rowIndex,
rowspan: arr2.length,
colspan: 1
})
arr2.forEach(item => {
arr2.forEach((item) => {
const obj = {}
columnValue.push(Object.assign(obj, e, item))
rowIndex += 1
})
})
columnValue.forEach(ele => {
columnValue.forEach((ele) => {
if (yaxisExtFieldId.length > 1) {
datas.forEach(subEle => {
if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] && ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]) {
const key = yaxisExtFieldId[1] + subEle[yaxisExtFieldId[1]] + ',' + yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
datas.forEach((subEle) => {
if (
ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] &&
ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]
) {
const key =
yaxisExtFieldId[1] +
subEle[yaxisExtFieldId[1]] +
',' +
yaxisExtFieldId[0] +
subEle[yaxisExtFieldId[0]]
ele[key] = subEle[fieldValueName]
rowSum += subEle[fieldValueName]
}
})
} else {
datas.forEach(subEle => {
if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] && ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]) {
datas.forEach((subEle) => {
if (
ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] &&
ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]
) {
const key = yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
ele[key] = subEle[fieldValueName]
rowSum += subEle[fieldValueName]
}
})
}
rowSum = rowSum.toFixed(2)
if (this.fields[findValueIndex].summary === 'ratio') {
rowSum += '%'
}
ele.rowTotal = rowSum
rowSum = 0
})
} else {
datas.forEach(obj => {
datas.forEach((obj) => {
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const element = obj[key]
@ -313,21 +348,28 @@ export default {
}
})
columnValue = this.deteleObject(columnValue)
columnValue.forEach(ele => {
columnValue.forEach((ele) => {
if (yaxisExtFieldId.length > 1) {
datas.forEach(subEle => {
datas.forEach((subEle) => {
if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]]) {
const key = yaxisExtFieldId[1] + subEle[yaxisExtFieldId[1]] + ',' + yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
const key =
yaxisExtFieldId[1] +
subEle[yaxisExtFieldId[1]] +
',' +
yaxisExtFieldId[0] +
subEle[yaxisExtFieldId[0]]
ele[key] = subEle[fieldValueName]
rowSum += subEle[fieldValueName]
console.log(3, ele)
}
})
} else {
datas.forEach(subEle => {
datas.forEach((subEle) => {
if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]]) {
const key = yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
ele[key] = subEle[fieldValueName]
rowSum += subEle[fieldValueName]
console.log(3, subEle)
}
})
}
@ -335,6 +377,7 @@ export default {
rowSum = 0
})
}
fields = fields.concat(rowName)
fields.push({
dataeaseName: 'rowTotal',
@ -367,7 +410,8 @@ export default {
pageHeight = 36
}
const currentHeight = this.$refs.tableContainer.offsetHeight
const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
const tableMaxHeight =
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
let tableHeight
if (this.chart.data) {
if (this.chart.type === 'table-info') {
@ -396,17 +440,28 @@ export default {
const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) {
this.table_header_class.color = customAttr.color.tableFontColor
this.table_header_class.backgroundColor = 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)
this.table_item_class.background = hexColorToRGBA(
customAttr.color.tableItemBgColor,
customAttr.color.alpha
)
}
if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
this.table_header_class.height = customAttr.size.tableTitleHeight + 'px'
this.table_header_class.fontSize =
customAttr.size.tableTitleFontSize + 'px'
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'
}
this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
this.table_item_class_stripe = JSON.parse(
JSON.stringify(this.table_item_class)
)
// 暂不支持斑马纹
// if (customAttr.color.tableStripe) {
// // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
@ -425,11 +480,18 @@ export default {
this.title_class.fontSize = customStyle.text.fontSize + 'px'
this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
this.title_class.fontStyle = customStyle.text.isItalic
? 'italic'
: 'normal'
this.title_class.fontWeight = customStyle.text.isBolder
? 'bold'
: 'normal'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
this.bg_class.background = hexColorToRGBA(
customStyle.background.color,
customStyle.background.alpha
)
}
}
// 修改footer合计样式
@ -439,7 +501,15 @@ export default {
// console.log(s_table)
let s = ''
for (const i in this.table_header_class) {
s += (i === 'fontSize' ? 'font-size' : i === 'backgroundColor' ? 'background-color' : 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++) {
@ -455,7 +525,12 @@ export default {
}
},
getColumStyle({ columnIndex }) {
if (this.chart.type === 'table-normal' && this.cellDimension > 0 && (columnIndex < this.cellDimension || columnIndex === this.fields.length - 1)) {
if (
this.chart.type === 'table-normal' &&
this.cellDimension > 0 &&
(columnIndex < this.cellDimension ||
columnIndex === this.fields.length - 1)
) {
return this.table_header_class
} else {
return ''
@ -464,7 +539,9 @@ export default {
summaryMethod({ columns, data }) {
const that = this
const means = [] // 合计
const findValueIndex = this.chart.data.fields.findIndex(e => e.chartType === 'bar')
const findValueIndex = this.chart.data.fields.findIndex(
(e) => e.chartType === 'bar'
)
columns.forEach((column, columnIndex) => {
if (columnIndex === 0) {
if (this.cellDimension > 0 && findValueIndex !== -1) {
@ -473,10 +550,23 @@ export default {
means.push('合计')
}
} else {
if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length || this.cellDimension > 0) {
const values = data.map(item => Number(item[column.property]))
let isRatio = false
if (
columnIndex >=
that.chart.data.fields.length - that.chart.data.series.length ||
this.cellDimension > 0
) {
const values = data.map((item) => {
let a = item[column.property]
if (typeof a === 'string' && a.indexOf('%') >= 0) {
a = a.replace('%', '')
isRatio = true
}
return Number(a)
})
// 合计
if (!values.every(value => isNaN(value))) {
if (!values.every((value) => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
@ -485,7 +575,14 @@ export default {
return prev
}
}, 0)
means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
means[columnIndex] = (means[columnIndex] + '').includes('.')
? means[columnIndex].toFixed(2)
: means[columnIndex]
if (isRatio) {
means[columnIndex] =
means[columnIndex] > 100 ? 100 : means[columnIndex]
means[columnIndex] += '%'
}
} else {
means[columnIndex] = ''
}
@ -533,14 +630,14 @@ export default {
</script>
<style scoped>
.table-class>>>.body--wrapper{
background: rgba(1,1,1,0);
}
.table-class>>>.elx-cell{
max-height: none!important;
line-height: normal!important;
}
.table-page{
.table-class >>> .body--wrapper {
background: rgba(1, 1, 1, 0);
}
.table-class >>> .elx-cell {
max-height: none !important;
line-height: normal !important;
}
.table-page {
position: absolute;
bottom: 0;
display: flex;
@ -548,23 +645,23 @@ export default {
justify-content: flex-end;
width: 100%;
overflow: hidden;
}
.page-style{
}
.page-style {
margin-right: auto;
}
.total-style{
}
.total-style {
flex: 1;
font-size: 12px;
color: #606266;
white-space:nowrap;
}
.page-style >>> .el-input__inner{
white-space: nowrap;
}
.page-style >>> .el-input__inner {
height: 24px;
}
.colum-header {
}
.colum-header {
font-size: 12px;
color: #000;
background: rgb(78, 129, 187);
height: 36px;
}
}
</style>

Write Preview
Loading…
Cancel
Save