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

Merge branch 'dev-v2' into pr@dev-v2_export_data

Browse Source
This commit is contained in:
taojinlong 2024-05-24 18:17:00 +08:00
commit 10cc106874
10 changed files with 178 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
View File

@ -1,6 +1,6 @@
<template>
<el-row>
<el-form ref="form" size="small" style="width: 100%">
<el-form @submit.prevent ref="form" size="small" style="width: 100%">
<el-form-item>
<template #label>
<span class="data-area-label">

2
core/core-frontend/src/custom-component/de-stream-media/StreamMediaLinks.vue
View File

@ -1,6 +1,6 @@
<template>
<el-row>
<el-form :effect="themes" ref="form" size="mini" style="width: 100%">
<el-form @submit.prevent :effect="themes" ref="form" size="mini" style="width: 100%">
<el-form-item :effect="themes" :label="t('visualization.video_type')">
<el-radio-group :effect="themes" v-model="state.streamMediaInfoTemp.videoType">
<el-radio :effect="themes" :label="'flv'">FLV</el-radio>

2
core/core-frontend/src/custom-component/de-video/VideoLinks.vue
View File

@ -1,6 +1,6 @@
<template>
<el-row>
<el-form ref="form" size="small" style="width: 100%">
<el-form @submit.prevent ref="form" size="small" style="width: 100%">
<el-form-item :effect="themes" :label="t('visualization.auto_play')">
<el-switch
:effect="themes"

2
core/core-frontend/src/locales/zh-CN.ts
View File

@ -953,7 +953,7 @@ export default {
line_type_dotted: '点',
value_can_not_empty: '值不能为空',
value_error: '值必须为数值',
threshold: '阈值',
threshold: '条件样式',
threshold_range: '阈值区间',
gauge_threshold_format_error: '格式错误',
total_cfg: '总计配置',

18
core/core-frontend/src/models/chart/chart-senior.d.ts vendored
View File

@ -134,12 +134,26 @@ declare interface ChartThreshold {
/**
* 表格阈值
*/
tableThreshold: Threshold[]
tableThreshold: TableThreshold[]
/**
* 文本卡阈值
*/
textLabelThreshold: Threshold[]
}
declare interface TableThreshold {
/**
* 字段id
*/
fieldId: string
/**
* 字段
*/
field: ChartViewField
/**
* 条件
*/
conditions: Threshold[]
}
/**
* 阈值
*/
@ -157,7 +171,7 @@ declare interface Threshold {
*/
term: string
/**
*
* 字段
*/
field: ChartViewField
/**

12
core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
View File

@ -336,7 +336,9 @@ init()
}}</span>
</el-col>
<el-col :span="12">
<span v-if="!item.term.includes('null')" :title="item.value">{{ item.value }}</span>
<span v-if="!item.term.includes('null')" :title="item.value + ''">{{
item.value
}}</span>
<span v-else>&nbsp;</span>
</el-col>
<el-col :span="6">
@ -426,7 +428,7 @@ init()
}}</span>
</div>
<div style="flex: 1; margin: 0 8px">
<span v-if="item.term !== 'between'" :title="item.value">{{ item.value }}</span>
<span v-if="item.term !== 'between'" :title="item.value + ''">{{ item.value }}</span>
<span v-if="item.term === 'between'">
{{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
</span>
@ -498,8 +500,8 @@ init()
<span>
<el-icon>
<Icon
:className="`field-icon-${fieldType[fieldItem.field.deType.deType]}`"
:name="`field_${fieldType[fieldItem.field.deType.deType]}`"
:className="`field-icon-${fieldType[fieldItem.field.deType]}`"
:name="`field_${fieldType[fieldItem.field.deType]}`"
/>
</el-icon>
</span>
@ -556,7 +558,7 @@ init()
!item.term.includes('empty') &&
item.term !== 'between'
"
:title="item.value"
:title="item.value + ''"
>{{ item.value }}</span
>
<span

138
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
View File

@ -1,15 +1,14 @@
<script lang="tsx" setup>
import { computed, reactive } from 'vue'
import { PropType, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
import { fieldType } from '@/utils/attr'
import _ from 'lodash'
const { t } = useI18n()
const props = defineProps({
chart: {
type: Object,
type: Object as PropType<ChartObj>,
required: true
},
threshold: {
@ -164,17 +163,17 @@ const valueOptions = [
const predefineColors = COLOR_PANEL
const state = reactive({
thresholdArr: [],
thresholdArr: [] as TableThreshold[],
fields: [],
thresholdObj: {
fieldId: '',
field: {},
conditions: []
}
} as TableThreshold
})
const init = () => {
state.thresholdArr = JSON.parse(JSON.stringify(props.threshold))
state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) as TableThreshold[]
initFields()
}
const initOptions = item => {
@ -193,33 +192,20 @@ const initOptions = item => {
}
}
const initFields = () => {
// 暂时支持指标
let fields = []
if (props.chart.type === 'table-info') {
if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
state.fields = JSON.parse(JSON.stringify(props.chart.xAxis))
} else {
state.fields = JSON.parse(props.chart.xAxis)
}
fields = JSON.parse(JSON.stringify(props.chart.xAxis))
} else if (props.chart.type === 'table-pivot') {
if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
state.fields = JSON.parse(JSON.stringify(props.chart.yAxis))
} else {
state.fields = JSON.parse(props.chart.yAxis)
}
const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
fields = [...xAxis, ...xAxisExt, ...yAxis]
} else {
if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis)))
} else {
state.fields = state.fields.concat(JSON.parse(props.chart.xAxis))
}
if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.yAxis)))
} else {
state.fields = state.fields.concat(JSON.parse(props.chart.yAxis))
}
const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
fields = [...xAxis, ...yAxis]
}
// 暂不支持时间
// this.fields = this.fields.filter(ele => ele.deType !== 1)
state.fields.splice(0, state.fields.length, ...fields)
}
const addThreshold = () => {
state.thresholdArr.push(JSON.parse(JSON.stringify(state.thresholdObj)))
@ -243,9 +229,6 @@ const removeCondition = (item, index) => {
changeThreshold()
}
const computedFields = computed(() => {
return _.filter(state.fields, f => f.deType === 2 || f.deType === 3)
})
const addField = item => {
// get field
if (state.fields && state.fields.length > 0) {
@ -280,7 +263,7 @@ init()
<el-select v-model="fieldItem.fieldId" @change="addField(fieldItem)">
<el-option
class="series-select-option"
v-for="fieldOption in computedFields"
v-for="fieldOption in state.fields"
:key="fieldOption.id"
:label="fieldOption.name"
:value="fieldOption.id"
@ -344,10 +327,19 @@ init()
>
<el-form-item class="form-item">
<el-input-number
controls-position="right"
v-model="item.value"
class="value-item"
v-if="[2, 3].includes(fieldItem.field.deType)"
:placeholder="t('chart.drag_block_label_value')"
controls-position="right"
class="value-item"
clearable
@change="changeThreshold"
/>
<el-input
v-model="item.value"
v-else
:placeholder="t('chart.drag_block_label_value')"
controls-position="right"
clearable
@change="changeThreshold"
/>
@ -355,14 +347,16 @@ init()
</el-col>
<el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
<el-input-number
v-model="item.min"
controls-position="right"
class="between-item"
:placeholder="t('chart.axis_value_min')"
clearable
@change="changeThreshold"
/>
<el-form-item class="form-item">
<el-input-number
v-model="item.min"
controls-position="right"
class="between-item"
:placeholder="t('chart.axis_value_min')"
clearable
@change="changeThreshold"
/>
</el-form-item>
</el-col>
<el-col v-if="item.term === 'between'" :span="2" style="text-align: center">
@ -372,43 +366,49 @@ init()
</el-col>
<el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
<el-input-number
v-model="item.max"
controls-position="right"
class="between-item"
:placeholder="t('chart.axis_value_max')"
clearable
@change="changeThreshold"
/>
<el-form-item class="form-item">
<el-input-number
v-model="item.max"
controls-position="right"
class="between-item"
:placeholder="t('chart.axis_value_max')"
clearable
@change="changeThreshold"
/>
</el-form-item>
</el-col>
<div
style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
>
<div class="color-title">{{ t('chart.textColor') }}</div>
<el-color-picker
is-custom
size="large"
v-model="item.color"
show-alpha
class="color-picker-style"
:predefine="predefineColors"
@change="changeThreshold"
/>
<el-form-item class="form-item">
<el-color-picker
is-custom
size="large"
v-model="item.color"
show-alpha
class="color-picker-style"
:predefine="predefineColors"
@change="changeThreshold"
/>
</el-form-item>
</div>
<div
style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
>
<div class="color-title">{{ t('chart.backgroundColor') }}</div>
<el-color-picker
is-custom
size="large"
v-model="item.backgroundColor"
show-alpha
class="color-picker-style"
:predefine="predefineColors"
@change="changeThreshold"
/>
<el-form-item class="form-item">
<el-color-picker
is-custom
size="large"
v-model="item.backgroundColor"
show-alpha
class="color-picker-style"
:predefine="predefineColors"
@change="changeThreshold"
/>
</el-form-item>
</div>
<div
style="display: flex; align-items: center; justify-content: center; margin-left: 8px"

59
core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
View File

@ -9,6 +9,7 @@ import {
} from '@/views/chart/components/js/panel/charts/bar/common'
import { cloneDeep, defaultTo } from 'lodash-es'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { Options } from '@antv/g2plot/esm'
const { t } = useI18n()
@ -38,6 +39,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
'tooltip-selector',
'y-axis-selector',
'title-selector',
'function-cfg',
'jump-set',
'linkage'
]
@ -45,10 +47,11 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
...BAR_EDITOR_PROPERTY_INNER,
'legend-selector': null,
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'gradient'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['hPosition', 'color', 'fontSize'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter'],
'y-axis-selector': ['name', 'color', 'fontSize', 'axisForm', 'axisLabel', 'position']
'y-axis-selector': ['name', 'color', 'fontSize', 'axisForm', 'axisLabel', 'position'],
'function-cfg': ['emptyDataStrategy']
}
axis: AxisType[] = [...BAR_AXIS_TYPE, 'yAxisExt']
protected baseOptions: BarOptions = {
@ -133,18 +136,14 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
const basicStyle = parseJson(chart.customAttr).basicStyle
let color1 = basicStyle.colors?.map((ele, index) => {
if (index === 1) {
return hexColorToRGBA(ele, 10)
return hexColorToRGBA(ele, basicStyle.alpha > 10 ? 10 : basicStyle.alpha)
} else {
return ele
return hexColorToRGBA(ele, basicStyle.alpha)
}
})
if (basicStyle.gradient) {
color1 = color1.map((ele, index) => {
if (index === 1) {
return ele
}
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
return setGradientColor(tmp, true, 0)
color1 = color1.map((ele, _index) => {
return setGradientColor(ele, true, 0)
})
}
options = {
@ -186,7 +185,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
const result = []
originalItems.forEach(item => {
if (item.data) {
const value = valueFormatter(item.data.originalValue, tooltipAttr.tooltipFormatter)
const value = valueFormatter(item.data.value, tooltipAttr.tooltipFormatter)
if (item.data.id === yAxis.id) {
result.push({
...item,
@ -275,6 +274,41 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
}
}
protected configEmptyDataStrategy(chart: Chart, options: BarOptions): BarOptions {
const { data } = options as unknown as Options
if (!data?.length) {
return options
}
const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy
if (strategy === 'ignoreData') {
const emptyFields = data.filter(obj => obj['value'] === null).map(obj => obj['field'])
return {
...options,
data: data.filter(obj => {
if (emptyFields.includes(obj['field'])) {
return false
}
return true
})
}
}
if (strategy === 'breakLine') {
data.forEach(obj => {
if (obj['value'] === null) {
obj['value'] = null
}
})
}
if (strategy === 'setZero') {
data.forEach(obj => {
if (obj['value'] === null) {
obj['value'] = 0
}
})
}
return options
}
protected setupOptions(chart: Chart, options: BarOptions): BarOptions {
return flow(
this.configTheme,
@ -282,7 +316,8 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
this.configLabel,
this.configTooltip,
this.configLegend,
this.configYAxis
this.configYAxis,
this.configEmptyDataStrategy
)(chart, options)
}

43
core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
View File

@ -393,28 +393,51 @@ export function getConditions(chart: Chart) {
}
const conditions = threshold.tableThreshold ?? []
const dimFields = [...chart.xAxis, ...chart.xAxisExt].map(i => i.dataeaseName)
if (conditions?.length > 0) {
const { tableCell, basicStyle } = parseJson(chart.customAttr)
const valueColor = tableCell.tableFontColor
let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
const { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr)
const enableTableCrossBG = tableCell.enableTableCrossBG
if (enableTableCrossBG) {
valueBgColor = null
}
const valueColor = tableCell.tableFontColor
const valueBgColor = enableTableCrossBG
? null
: hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
const headerValueColor = tableHeader.tableHeaderFontColor
const headerValueBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha)
for (let i = 0; i < conditions.length; i++) {
const field = conditions[i]
let defaultValueColor = valueColor
let defaultBgColor = valueBgColor
// 透视表表头颜色配置
if (chart.type === 'table-pivot' && dimFields.includes(field.field.dataeaseName)) {
defaultValueColor = headerValueColor
defaultBgColor = headerValueBgColor
}
res.text.push({
field: field.field.dataeaseName,
mapping(value) {
mapping(value, rowData) {
// 总计小计
if (rowData?.isTotals) {
return null
}
// 表头
if (rowData?.id && rowData?.field === rowData.id) {
return null
}
return {
fill: mappingColor(value, valueColor, field, 'color')
fill: mappingColor(value, defaultValueColor, field, 'color')
}
}
})
res.background.push({
field: field.field.dataeaseName,
mapping(value) {
const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
mapping(value, rowData) {
if (rowData?.isTotals) {
return null
}
if (rowData?.id && rowData?.field === rowData.id) {
return null
}
const fill = mappingColor(value, defaultBgColor, field, 'backgroundColor')
return fill ? { fill } : null
}
})

3
pom.xml
View File

@ -14,7 +14,8 @@
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>${spring-boot.version}</version>
<version>3.3.0</version>
<relativePath />
</parent>
<properties>