forked from github/dataease
feat(视图): 表格支持阈值设置
This commit is contained in:
junjun
parent
ae7ec67161
commit
12d8e572ba
@ -1,7 +1,8 @@
|
||||
import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
|
||||
import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
|
||||
import { DEFAULT_TOTAL } from '@/views/chart/chart/chart'
|
||||
import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
|
||||
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
|
||||
export function baseTableInfo(s2, container, chart, action, tableData) {
|
||||
const containerDom = document.getElementById(container)
|
||||
@ -59,6 +60,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.groupType === 'd') {
|
||||
return value
|
||||
} else {
|
||||
@ -86,6 +90,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.groupType === 'd') {
|
||||
return value
|
||||
} else {
|
||||
@ -116,7 +123,8 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
|
||||
width: containerDom.offsetWidth,
|
||||
height: containerDom.offsetHeight,
|
||||
// showSeriesNumber: true
|
||||
style: getSize(chart)
|
||||
style: getSize(chart),
|
||||
conditions: getConditions(chart)
|
||||
}
|
||||
|
||||
// 开始渲染
|
||||
@ -190,6 +198,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.formatterCfg) {
|
||||
return valueFormatter(value, f.formatterCfg)
|
||||
} else {
|
||||
@ -211,6 +222,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.formatterCfg) {
|
||||
return valueFormatter(value, f.formatterCfg)
|
||||
} else {
|
||||
@ -235,7 +249,8 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
|
||||
width: containerDom.offsetWidth,
|
||||
height: containerDom.offsetHeight,
|
||||
// showSeriesNumber: true
|
||||
style: getSize(chart)
|
||||
style: getSize(chart),
|
||||
conditions: getConditions(chart)
|
||||
}
|
||||
|
||||
// 开始渲染
|
||||
@ -319,6 +334,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.formatterCfg) {
|
||||
return valueFormatter(value, f.formatterCfg)
|
||||
} else {
|
||||
@ -340,6 +358,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
|
||||
if (!f) {
|
||||
return value
|
||||
}
|
||||
if (value === null || value === undefined) {
|
||||
return value
|
||||
}
|
||||
if (f.formatterCfg) {
|
||||
return valueFormatter(value, f.formatterCfg)
|
||||
} else {
|
||||
@ -385,7 +406,8 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
|
||||
width: containerDom.offsetWidth,
|
||||
height: containerDom.offsetHeight,
|
||||
style: getSize(chart),
|
||||
totals: totalCfg
|
||||
totals: totalCfg,
|
||||
conditions: getConditions(chart)
|
||||
}
|
||||
|
||||
// 开始渲染
|
||||
@ -424,3 +446,190 @@ function getCurrentField(valueFieldList, field) {
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function getConditions(chart) {
|
||||
const res = {
|
||||
text: [],
|
||||
background: []
|
||||
}
|
||||
let conditions
|
||||
try {
|
||||
const senior = JSON.parse(chart.senior)
|
||||
conditions = senior.threshold.tableThreshold
|
||||
} catch (err) {
|
||||
const senior = JSON.parse(JSON.stringify(chart.senior))
|
||||
conditions = senior.threshold.tableThreshold
|
||||
}
|
||||
|
||||
if (conditions && conditions.length > 0) {
|
||||
// table item color
|
||||
let valueColor = DEFAULT_COLOR_CASE.tableFontColor
|
||||
let valueBgColor = DEFAULT_COLOR_CASE.tableItemBgColor
|
||||
if (chart.customAttr) {
|
||||
const customAttr = JSON.parse(chart.customAttr)
|
||||
// color
|
||||
if (customAttr.color) {
|
||||
const c = JSON.parse(JSON.stringify(customAttr.color))
|
||||
valueColor = c.tableFontColor
|
||||
valueBgColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < conditions.length; i++) {
|
||||
const field = conditions[i]
|
||||
res.text.push({
|
||||
field: field.field.dataeaseName,
|
||||
mapping(value) {
|
||||
return {
|
||||
fill: mappingColor(value, valueColor, field, 'color')
|
||||
}
|
||||
}
|
||||
})
|
||||
res.background.push({
|
||||
field: field.field.dataeaseName,
|
||||
mapping(value) {
|
||||
return {
|
||||
fill: mappingColor(value, valueBgColor, field, 'backgroundColor')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
function mappingColor(value, defaultColor, field, type) {
|
||||
let color
|
||||
for (let i = 0; i < field.conditions.length; i++) {
|
||||
let flag = false
|
||||
const t = field.conditions[i]
|
||||
if (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) {
|
||||
const tv = parseFloat(t.value)
|
||||
if (t.term === 'eq') {
|
||||
if (value === tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not_eq') {
|
||||
if (value !== tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'lt') {
|
||||
if (value < tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'gt') {
|
||||
if (value > tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'le') {
|
||||
if (value <= tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'ge') {
|
||||
if (value >= tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
break
|
||||
} else if (i === field.conditions.length - 1) {
|
||||
color = defaultColor
|
||||
}
|
||||
} else if (field.field.deType === 0) {
|
||||
const tv = t.value
|
||||
if (t.term === 'eq') {
|
||||
if (value === tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not_eq') {
|
||||
if (value !== tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'like') {
|
||||
if (value.includes(tv)) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not like') {
|
||||
if (!value.includes(tv)) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'null') {
|
||||
if (value === null || value === undefined) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not_null') {
|
||||
if (value !== null && value !== undefined) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'empty') {
|
||||
if (value === '') {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not_empty') {
|
||||
if (value !== '') {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
break
|
||||
} else if (i === field.conditions.length - 1) {
|
||||
color = defaultColor
|
||||
}
|
||||
} else {
|
||||
// time
|
||||
const tv = new Date(t.value + ' GMT+8').getTime()
|
||||
const v = new Date(value + ' GMT+8').getTime()
|
||||
if (t.term === 'eq') {
|
||||
if (v === tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'not_eq') {
|
||||
if (v !== tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'lt') {
|
||||
if (v < tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'gt') {
|
||||
if (v > tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'le') {
|
||||
if (v <= tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
} else if (t.term === 'ge') {
|
||||
if (v >= tv) {
|
||||
color = t[type]
|
||||
flag = true
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
break
|
||||
} else if (i === field.conditions.length - 1) {
|
||||
color = defaultColor
|
||||
}
|
||||
}
|
||||
}
|
||||
return color
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user