diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
index b82d8b3561..b8953f6b34 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
@@ -5,7 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
import { ElRow } from 'element-plus-secondary'
import { fieldType } from '@/utils/attr'
-import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { cloneDeep, defaultsDeep, isEmpty } from 'lodash-es'
import { useEmitt } from '@/hooks/web/useEmitt'
import { iconFieldMap } from '@/components/icon-group/field-list'
@@ -37,7 +37,7 @@ useEmitt({
const emit = defineEmits(['onMiscChange'])
watch(
- () => props.chart,
+ () => props.chart.customAttr.misc,
() => {
init()
initField()
@@ -98,112 +98,118 @@ const init = () => {
}
const initField = () => {
- state.quotaData = props.quotaFields.filter(ele => ele.summary !== '' && ele.id !== '-1')
- if (state.miscForm.gaugeMinField.id) {
+ state.quotaData = props.quotaFields.filter(ele => ele.id !== '-1')
+ if (!isEmpty(state.miscForm.gaugeMinField.id)) {
state.minField = getQuotaField(state.miscForm.gaugeMinField.id)
}
- if (state.miscForm.gaugeMaxField.id) {
+ if (!isEmpty(state.miscForm.gaugeMaxField.id)) {
state.maxField = getQuotaField(state.miscForm.gaugeMaxField.id)
}
- if (state.miscForm.liquidMaxField.id) {
+ if (!isEmpty(state.miscForm.liquidMaxField.id)) {
state.liquidMaxField = getQuotaField(state.miscForm.liquidMaxField.id)
}
initDynamicDefaultField()
}
const COUNT_DE_TYPE = [0, 1, 5]
+const NUMBER_DE_TYPE = [1, 2, 3]
const getFieldSummaryByDeType = (deType: number) => {
return COUNT_DE_TYPE.includes(deType) || !deType ? 'count' : 'sum'
}
const initDynamicDefaultField = () => {
- const yAxisId = props.chart.yAxis?.[0]?.id
- if (yAxisId !== '-1' && state.quotaData.length) {
- // 查找 quotaData 中是否存在 chart.yAxis[0].id
- const yAxisExists = state.quotaData.find(ele => ele.id === yAxisId)
- // 如果不存在
- if (!yAxisExists && (state.miscForm.liquidMaxField.id || state.miscForm.gaugeMaxField.id)) {
- if (props.chart.type === 'liquid' && !state.liquidProcessedNoYAxis) {
- state.liquidProcessedNoYAxis = true
- state.miscForm.liquidMaxField.id = ''
- state.miscForm.liquidMaxField.summary = ''
- state.liquidMaxField = getQuotaField(state.miscForm.liquidMaxField.id)
- changeMisc('liquidMaxField', false)
- } else {
- if (!state.gaugeProcessedNoYAxis) {
- state.gaugeProcessedNoYAxis = true
- state.miscForm.gaugeMaxField.id = ''
- state.miscForm.gaugeMaxField.summary = ''
- state.maxField = {}
- changeMisc('gaugeMaxField', false)
+ const yAxisField = props.chart.yAxis?.[0]
+ const yAxisId = yAxisField?.id
+ if (quotaData.value?.length === 0 || yAxisField?.id === '-1') {
+ state.miscForm.liquidMaxType = 'fix'
+ state.miscForm.liquidMaxField.id = ''
+ state.miscForm.gaugeMaxType = 'fix'
+ state.miscForm.gaugeMaxField.id = ''
+ state.miscForm.gaugeMinType = 'fix'
+ state.miscForm.gaugeMinField.id = ''
+ } else {
+ if (state.quotaData.length) {
+ // 查找 quotaData 中是否存在 chart.yAxis[0].id
+ const yAxisExists = state.quotaData.find(ele => ele.id === yAxisId)
+ // 如果不存在
+ if (!yAxisExists) {
+ if (props.chart.type === 'liquid' && !state.liquidProcessedNoYAxis) {
+ state.liquidProcessedNoYAxis = true
+ state.miscForm.liquidMaxField.id = ''
+ state.miscForm.liquidMaxField.summary = ''
+ state.liquidMaxField = {}
+ changeMisc('liquidMaxField', false)
+ } else {
+ if (!state.gaugeProcessedNoYAxis) {
+ state.gaugeProcessedNoYAxis = true
+ state.miscForm.gaugeMaxField.id = ''
+ state.miscForm.gaugeMaxField.summary = ''
+ state.maxField = {}
+ changeMisc('gaugeMaxField', false)
+ }
}
- }
- } else {
- if (props.chart.type === 'liquid') {
- if (state.miscForm.liquidMaxType === 'dynamic') {
- state.miscForm.liquidMax = undefined
- // 查找 quotaData 中是否存在 liquidMaxField.id
- const liquidMaxFieldExists = state.quotaData.find(
- ele => ele.id === state.miscForm.liquidMaxField.id
- )
- if (!liquidMaxFieldExists) {
- if (yAxisId) {
+ } else {
+ if (props.chart.type === 'liquid') {
+ if (state.miscForm.liquidMaxType === 'dynamic') {
+ state.miscForm.liquidMax = undefined
+ // 拖入的字段是计算字段,并且当前选择的是该字段时,取其他字段
+ if (
+ yAxisId &&
+ (yAxisField.extField === 2 || !NUMBER_DE_TYPE.includes(yAxisField.deType)) &&
+ (state.miscForm.liquidMaxField.id === yAxisId || !state.miscForm.liquidMaxField.id)
+ ) {
state.liquidProcessedNoYAxis = false
// 根据查找结果设置 liquidMaxField.id
- state.miscForm.liquidMaxField.id = yAxisExists ? yAxisId : state.quotaData[0]?.id
+ state.miscForm.liquidMaxField.id = getDynamicFieldId()
state.liquidMaxField = getQuotaField(state.miscForm.liquidMaxField.id)
// 设置 summary 和 maxField
state.miscForm.liquidMaxField.summary = getFieldSummaryByDeType(
state.liquidMaxField?.deType
)
- // 触发 changeMisc 事件
- if (yAxisExists) {
- changeMisc('liquidMaxField', true)
- }
+ changeMisc('liquidMaxField', true)
}
}
- }
- if (!state.miscForm.liquidMax && state.miscForm.liquidMaxType === 'fix') {
- state.miscForm.liquidMax = cloneDeep(defaultMaxValue.liquidMax)
- }
- } else {
- if (state.miscForm.gaugeMaxType === 'dynamic') {
- state.miscForm.gaugeMax = undefined
+ if (!state.miscForm.liquidMax && state.miscForm.liquidMaxType === 'fix') {
+ state.miscForm.liquidMax = cloneDeep(defaultMaxValue.liquidMax)
+ }
+ } else {
+ if (state.miscForm.gaugeMaxType === 'dynamic') {
+ state.miscForm.gaugeMax = undefined
- // 查找 quotaData 中是否存在 gaugeMaxField.id
- const gaugeMaxFieldExists = state.quotaData.find(
- ele => ele.id === state.miscForm.gaugeMaxField.id
- )
- if (!gaugeMaxFieldExists) {
- if (yAxisId) {
+ // 拖入的字段是计算字段,并且当前选择的是该字段时,取其他字段
+ if (
+ yAxisId &&
+ (yAxisField.extField === 2 || !NUMBER_DE_TYPE.includes(yAxisField.deType)) &&
+ (state.miscForm.gaugeMaxField.id === yAxisId || !state.miscForm.gaugeMaxField.id)
+ ) {
state.gaugeProcessedNoYAxis = false
// 根据查找结果设置 gaugeMaxField.id
- state.miscForm.gaugeMaxField.id = yAxisExists ? yAxisId : state.quotaData[0]?.id
+ state.miscForm.gaugeMaxField.id = getDynamicFieldId()
state.maxField = getQuotaField(state.miscForm.gaugeMaxField.id)
// 设置 summary 和 maxField
state.miscForm.gaugeMaxField.summary = getFieldSummaryByDeType(state.maxField?.deType)
- if (yAxisExists) {
- // 触发 changeMisc 事件
- changeMisc('gaugeMaxField', true)
- }
+ changeMisc('gaugeMaxField', true)
}
}
- }
- if (!state.miscForm.gaugeMax && state.miscForm.gaugeMaxType === 'fix') {
- state.miscForm.gaugeMax = cloneDeep(defaultMaxValue.gaugeMax)
+ if (!state.miscForm.gaugeMax && state.miscForm.gaugeMaxType === 'fix') {
+ state.miscForm.gaugeMax = cloneDeep(defaultMaxValue.gaugeMax)
+ }
}
}
}
}
}
+const getDynamicFieldId = () => {
+ return quotaData.value?.filter(
+ item => item.extField !== 2 && NUMBER_DE_TYPE.includes(item.deType)
+ )?.[0]?.id
+}
+
const changeQuotaField = (type: string, resetSummary?: boolean) => {
let isCountField = props.chart.yAxis?.[0]?.id === '-1'
if (type === 'min') {
if (state.miscForm.gaugeMinType === 'dynamic') {
- if (isCountField && state.quotaData.length) {
- state.miscForm.gaugeMinField.id = state.quotaData[0]?.id
- }
if (!state.miscForm.gaugeMinField.id && !isCountField) {
- state.miscForm.gaugeMinField.id = props.chart.yAxis?.[0]?.id
+ setDynamicFieldId(state.miscForm.gaugeMinField)
}
if (!state.miscForm.gaugeMinField.summary) {
state.miscForm.gaugeMinField.summary = 'count'
@@ -226,16 +232,13 @@ const changeQuotaField = (type: string, resetSummary?: boolean) => {
}
} else if (type === 'max') {
if (props.chart.type === 'liquid') {
- if (isCountField && state.quotaData.length) {
- state.miscForm.liquidMaxField.id = state.quotaData[0]?.id
- }
if (state.miscForm.liquidMaxType === 'dynamic') {
state.miscForm.liquidMax = undefined
} else if (!state.miscForm.liquidMax) {
state.miscForm.liquidMax = cloneDeep(defaultMaxValue.liquidMax)
}
if (!state.miscForm.liquidMaxField.id) {
- state.miscForm.liquidMaxField.id = props.chart.yAxis?.[0]?.id
+ setDynamicFieldId(state.miscForm.liquidMaxField)
}
if (!state.miscForm.liquidMaxField.summary) {
state.miscForm.liquidMaxField.summary = 'count'
@@ -249,12 +252,9 @@ const changeQuotaField = (type: string, resetSummary?: boolean) => {
}
} else {
if (state.miscForm.gaugeMaxType === 'dynamic') {
- if (isCountField && state.quotaData.length) {
- state.miscForm.gaugeMaxField.id = state.quotaData[0]?.id
- }
state.miscForm.gaugeMax = undefined
if (!state.miscForm.gaugeMaxField.id && !isCountField) {
- state.miscForm.gaugeMaxField.id = props.chart.yAxis?.[0]?.id
+ setDynamicFieldId(state.miscForm.gaugeMaxField)
}
if (!state.miscForm.gaugeMaxField.summary) {
state.miscForm.gaugeMaxField.summary = 'count'
@@ -282,6 +282,18 @@ const changeQuotaField = (type: string, resetSummary?: boolean) => {
}
}
+const setDynamicFieldId = fieldObj => {
+ if (
+ props.chart.yAxis?.[0]?.extField === 2 ||
+ props.chart.yAxis?.[0]?.id === '-1' ||
+ !NUMBER_DE_TYPE.includes(props.chart.yAxis?.[0]?.deType)
+ ) {
+ fieldObj.id = getDynamicFieldId()
+ } else {
+ fieldObj.id = props.chart.yAxis?.[0]?.id
+ }
+}
+
const getQuotaField = id => {
if (!id) {
return {}
@@ -340,14 +352,22 @@ const changeMaxValidate = prop => {
changeMisc(prop, true)
}
const addAxis = (form: AxisEditForm) => {
+ if (form.axis[0]?.id && !form.quotaData?.length) {
+ const uniqueIds = new Set(state.quotaData.map(item => item.id))
+ state.quotaData = [
+ ...state.quotaData,
+ ...props.quotaFields.filter(ele => ele.id !== '-1' && !uniqueIds.has(ele.id))
+ ]
+ }
const maxTypeKey = props.chart.type === 'liquid' ? 'liquidMaxType' : 'gaugeMaxType'
const maxValueKey = props.chart.type === 'liquid' ? 'liquidMax' : 'gaugeMax'
if (form.axis[0]?.id === '-1') {
state.miscForm[maxTypeKey] = 'fix'
state.miscForm[maxValueKey] = cloneDeep(defaultMaxValue[maxValueKey])
- changeMisc(maxValueKey + 'Field')
} else {
state.miscForm[maxTypeKey] = 'dynamic'
+ state.miscForm[maxValueKey + 'Field']['id'] = getDynamicFieldId()
+ state.miscForm[maxValueKey + 'Field']['summary'] = 'sum'
}
if (props.chart.type === 'gauge') {
state.miscForm.gaugeMinType = 'fix'
@@ -355,11 +375,33 @@ const addAxis = (form: AxisEditForm) => {
state.miscForm.gaugeMinField.id = ''
state.miscForm.gaugeMinField.summary = ''
}
+ if (!quotaData.value.length) {
+ state.miscForm[maxTypeKey] = 'fix'
+ state.miscForm[maxValueKey] = cloneDeep(defaultMaxValue[maxValueKey])
+ }
+ changeMisc(maxValueKey + 'Field', false)
+}
+const changeChartType = () => {
+ const maxTypeKey = props.chart.type === 'liquid' ? 'liquidMaxType' : 'gaugeMaxType'
+ const yAxisField = props.chart.yAxis?.[0]
+ if (quotaData.value?.length === 0 || yAxisField?.id === '-1') {
+ state.miscForm.liquidMaxType = 'fix'
+ state.miscForm.liquidMaxField.id = ''
+ state.miscForm.gaugeMaxType = 'fix'
+ state.miscForm.gaugeMaxField.id = ''
+ state.miscForm.gaugeMinType = 'fix'
+ state.miscForm.gaugeMinField.id = ''
+ changeMisc(null, true)
+ }
}
onMounted(() => {
init()
initField()
useEmitt({ name: 'addAxis', callback: addAxis })
+ useEmitt({ name: 'chart-type-change', callback: changeChartType })
+})
+const quotaData = computed(() => {
+ return state.quotaData.filter(item => NUMBER_DE_TYPE.includes(item.deType) && item.extField !== 2)
})
@@ -415,6 +457,7 @@ onMounted(() => {
v-model="state.miscForm.gaugeMinType"
size="small"
@change="changeQuotaField('min')"
+ :disabled="quotaData.length === 0"
>
{{ t('chart.fix') }}
{{ t('chart.dynamic') }}
@@ -448,7 +491,7 @@ onMounted(() => {
>
{
v-model="state.miscForm.gaugeMaxType"
size="small"
@change="changeQuotaField('max')"
+ :disabled="quotaData.length === 0"
>
{{ t('chart.fix') }}
{{ t('chart.dynamic') }}
@@ -546,7 +590,7 @@ onMounted(() => {
>
{
v-model="state.miscForm.liquidMaxType"
size="small"
@change="changeQuotaField('max')"
+ :disabled="quotaData.length === 0"
>
{{ t('chart.fix') }}
@@ -697,7 +742,7 @@ onMounted(() => {
>
{
}
} else {
if (!dup && typeValid) {
+ const isGaugeOrLiquid = view.value.type === 'gauge' || view.value.type === 'liquid'
+ const quotaData = cloneDeep(state.quotaData)
emitter.emit('addAxis', {
axisType: axis,
axis: [view.value[axis][e.newDraggableIndex]],
- editType: 'add'
+ editType: 'add',
+ ...(isGaugeOrLiquid ? { quotaData: quotaData } : {})
})
}
}