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

feat: 阈值/辅助线开关

Browse Source
This commit is contained in:
wisonic-s 2023-10-24 19:39:07 +08:00
parent b2144a4678
commit a6012476b0
15 changed files with 130 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
View File

@ -821,9 +821,11 @@ public class ChartDataManage {
return list;
}
String assistLine = (String) JsonUtil.toJSONString(senior.get("assistLine"));
List<ChartSeniorAssistDTO> assistLines = JsonUtil.parseList(assistLine, new TypeReference<>() {
});
var assistLineCfg = JsonUtil.parseObject((String) JsonUtil.toJSONString(senior.get("assistLineCfg")), ChartSeniorAssistCfgDTO.class);
if (null == assistLineCfg || !assistLineCfg.isEnable()) {
return list;
}
List<ChartSeniorAssistDTO> assistLines = assistLineCfg.getAssistLine();
if (ObjectUtils.isEmpty(assistLines)) {
return list;

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

@ -9,7 +9,7 @@ declare interface ChartSenior {
/**
* 辅助线
*/
assistLine: AssistLine[]
assistLineCfg: ChartAssistLineCfg
/**
* 阈值
*/
@ -61,6 +61,19 @@ declare interface ChartFunctionCfg {
/**
* 辅助线设置
*/
declare interface ChartAssistLineCfg {
/**
* 是否启用
*/
enable: boolean
/**
* 辅助线配置
*/
assistLine: AssistLine[]
}
/**
* 辅助线
*/
declare interface AssistLine {
/**
* 辅助线名称
@ -100,6 +113,10 @@ declare interface AssistLine {
* 阈值设置
*/
declare interface ChartThreshold {
/**
* 是否启用
*/
enable: boolean
/**
* 仪表盘阈值: x,y,z
*/

33
core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
View File

@ -5,7 +5,7 @@ import ScrollCfg from '@/views/chart/components/editor/editor-senior/components/
import AssistLine from '@/views/chart/components/editor/editor-senior/components/AssistLine.vue'
import Threshold from '@/views/chart/components/editor/editor-senior/components/Threshold.vue'
import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
import { computed, PropType, ref, toRefs } from 'vue'
import { computed, PropType, ref, toRefs, watch } from 'vue'
import LinkJumpSet from '@/components/visualization/LinkJumpSet.vue'
import LinkageSet from '@/components/visualization/LinkageSet.vue'
import { canvasSave } from '@/utils/canvasUtils'
@ -15,6 +15,8 @@ import { updateLinkageActive } from '@/api/visualization/linkage'
import { includesAny } from '../util/StringUtils'
import { ElIcon, ElMessage } from 'element-plus-secondary'
import { storeToRefs } from 'pinia'
import { BASE_VIEW_CONFIG } from '../util/chart'
import { cloneDeep, defaultsDeep } from 'lodash-es'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo } = storeToRefs(dvMainStore)
@ -70,7 +72,12 @@ const props = defineProps({
})
const { chart, themes, properties, propertyInnerAll } = toRefs(props)
watch(
() => chart.value?.senior,
() => {
chart.value.senior = defaultsDeep(chart.value?.senior || {}, cloneDeep(BASE_VIEW_CONFIG.senior))
}
)
const seniorCounts = computed(() => {
let linkageCount = 0
let jumpCount = 0
@ -187,11 +194,14 @@ const linkageActiveChange = () => {
/>
</el-collapse-item>
<el-collapse-item
<collapse-switch-item
:effect="themes"
v-if="showProperties('assist-line')"
name="analyse"
:title="t('chart.assist_line')"
:change-model="chart.senior.assistLineCfg"
v-if="showProperties('assist-line')"
v-model="chart.senior.assistLineCfg.enable"
name="analyse"
@modelChange="val => onAssistLineChange({ data: val })"
>
<assist-line
:chart="props.chart"
@ -200,13 +210,13 @@ const linkageActiveChange = () => {
:property-inner="propertyInnerAll['assist-line']"
@onAssistLineChange="onAssistLineChange"
/>
</el-collapse-item>
</collapse-switch-item>
<collapse-switch-item
v-if="showProperties('scroll-cfg')"
:effect="themes"
:title="t('chart.scroll_cfg')"
:change-model="chart.senior.scrollCfg"
v-if="showProperties('scroll-cfg')"
v-model="chart.senior.scrollCfg.open"
name="scroll"
@modelChange="onScrollCfgChange"
@ -219,11 +229,14 @@ const linkageActiveChange = () => {
/>
</collapse-switch-item>
<el-collapse-item
<collapse-switch-item
:effect="themes"
:title="t('chart.threshold')"
:change-model="chart.senior.threshold"
v-model="chart.senior.threshold.enable"
v-if="showProperties('threshold')"
name="threshold"
:title="t('chart.threshold')"
@modelChange="onThresholdChange"
>
<threshold
:themes="themes"
@ -231,7 +244,7 @@ const linkageActiveChange = () => {
:property-inner="propertyInnerAll['threshold']"
@onThresholdChange="onThresholdChange"
/>
</el-collapse-item>
</collapse-switch-item>
<collapse-switch-item
v-if="showProperties('linkage')"

63
core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
View File

@ -3,7 +3,8 @@ import { onMounted, reactive, watch, computed, PropType } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElIcon, ElMessage } from 'element-plus-secondary'
import AssistLineEdit from '@/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue'
import _ from 'lodash'
import { defaultsDeep, find } from 'lodash-es'
import { DEFAULT_ASSIST_LINE_CFG } from '../../util/chart'
const { t } = useI18n()
@ -11,7 +12,7 @@ const emit = defineEmits(['onAssistLineChange'])
const props = defineProps({
chart: {
type: Object,
type: Object as PropType<ChartObj>,
required: true
},
quotaData: {
@ -32,28 +33,26 @@ const quotaFields = computed<Array<any>>(() => {
})
const state = reactive({
assistLine: [],
assistLineCfg: {
enable: false,
assistLine: []
},
editLineDialog: false,
lineArr: [],
quotaFields: []
})
watch(
() => props.chart,
() => props.chart.senior.assistLineCfg,
() => {
init()
}
},
{ deep: true }
)
const changeAssistLine = () => {
let flag = false
const arr = state.assistLine.filter(ele => {
return ele.field === '1'
})
if (arr && arr.length > 0) {
flag = true
}
emit('onAssistLineChange', { data: state.assistLine, requestData: flag })
const flag = state.assistLineCfg.assistLine.findIndex(ele => ele.field === '1') !== -1
emit('onAssistLineChange', { data: state.assistLineCfg, requestData: flag })
}
const lineChange = val => {
@ -68,7 +67,6 @@ const closeEditLine = () => {
}
const changeLine = () => {
console.log(state.lineArr)
// check line config
for (let i = 0; i < state.lineArr.length; i++) {
const ele = state.lineArr[i]
@ -96,35 +94,29 @@ const changeLine = () => {
}
}
}
state.assistLine = JSON.parse(JSON.stringify(state.lineArr))
state.assistLineCfg.assistLine = JSON.parse(JSON.stringify(state.lineArr))
changeAssistLine()
closeEditLine()
}
function existField(line) {
return !!_.find(quotaFields.value, d => d.id === line.id)
return !!find(quotaFields.value, d => d.id === line.id)
}
const init = () => {
const chart = JSON.parse(JSON.stringify(props.chart))
if (chart.senior) {
let senior = null
if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
senior = JSON.parse(JSON.stringify(chart.senior))
} else {
senior = JSON.parse(chart.senior)
}
if (senior.assistLine) {
for (let i = 0; i < senior.assistLine.length; i++) {
if (!senior.assistLine[i].fontSize) {
senior.assistLine[i].fontSize = '10'
const senior = chart.senior
if (senior.assistLineCfg?.assistLine) {
const assistLine = senior.assistLineCfg.assistLine
for (let i = 0; i < assistLine.length; i++) {
if (!assistLine[i].fontSize) {
assistLine[i].fontSize = 10
}
}
state.assistLine = senior.assistLine
} else {
state.assistLine = []
state.assistLineCfg = defaultsDeep(senior.assistLineCfg, DEFAULT_ASSIST_LINE_CFG)
}
state.lineArr = JSON.parse(JSON.stringify(state.assistLine))
state.lineArr = JSON.parse(JSON.stringify(state.assistLineCfg.assistLine))
}
}
@ -141,16 +133,17 @@ onMounted(() => {
<span
class="set-text-info"
:class="{ 'set-text-info-dark': themes === 'dark' }"
v-if="state.assistLine.length > 0"
v-if="state.assistLineCfg.assistLine.length > 0"
>
已设置
</span>
<el-button
class="circle-button font14"
:class="'label-' + props.themes"
:style="{ width: '24px', marginLeft: '6px' }"
:disabled="!state.assistLineCfg.enable"
class="circle-button font14"
text
size="small"
:style="{ width: '24px', marginLeft: '6px' }"
@click="editLine"
>
<template #icon>
@ -162,7 +155,7 @@ onMounted(() => {
</span>
</div>
<el-row v-for="(item, index) in state.assistLine" :key="index" class="line-style">
<el-row v-for="(item, index) in state.assistLineCfg.assistLine" :key="index" class="line-style">
<el-col :span="8">
<span :title="item.name">{{ item.name }}</span>
</el-col>
@ -199,7 +192,7 @@ onMounted(() => {
class="dialog-css"
>
<assist-line-edit
:line="state.assistLine"
:line="state.assistLineCfg.assistLine"
:quota-fields="quotaFields"
@onAssistLineChange="lineChange"
/>

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

@ -7,12 +7,13 @@ import TableThresholdEdit from '@/views/chart/components/editor/editor-senior/co
import TextLabelThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue'
import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue'
import { fieldType } from '@/utils/attr'
import { defaultsDeep } from 'lodash-es'
const { t } = useI18n()
const props = defineProps({
chart: {
type: Object,
type: Object as PropType<ChartObj>,
required: true
},
themes: {
@ -28,14 +29,15 @@ const showProperty = prop => props.propertyInner?.includes(prop)
const emit = defineEmits(['onThresholdChange'])
watch(
() => props.chart,
() => props.chart.senior.threshold,
() => {
init()
}
},
{ deep: true }
)
const state = reactive({
thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD)),
thresholdForm: {} as ChartThreshold,
editTextLabelThresholdDialog: false,
textThresholdArr: [],
editLabelThresholdDialog: false,
@ -47,14 +49,9 @@ const state = reactive({
const init = () => {
const chart = JSON.parse(JSON.stringify(props.chart))
if (chart.senior) {
let senior = null
if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
senior = JSON.parse(JSON.stringify(chart.senior))
} else {
senior = JSON.parse(chart.senior)
}
const senior = chart.senior
if (senior.threshold) {
state.thresholdForm = senior.threshold
state.thresholdForm = defaultsDeep(senior.threshold, DEFAULT_THRESHOLD)
}
state.textThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.textLabelThreshold))
state.thresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.labelThreshold))
@ -243,9 +240,10 @@ init()
<span>0,</span>
<el-input
:effect="themes"
:placeholder="t('chart.threshold_range')"
:disabled="!state.thresholdForm.enable"
v-model="state.thresholdForm.gaugeThreshold"
style="width: 100px; margin: 0 10px"
:placeholder="t('chart.threshold_range')"
size="small"
clearable
@change="gaugeThresholdChange"
@ -409,11 +407,12 @@ init()
</span>
<el-button
:title="t('chart.edit')"
class="circle-button"
:class="'label-' + props.themes"
:style="{ width: '24px', marginLeft: '6px' }"
:disabled="!state.thresholdForm.enable"
class="circle-button"
text
size="small"
:style="{ width: '24px', marginLeft: '6px' }"
@click="editTableThreshold"
>
<template #icon>

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

@ -562,7 +562,7 @@ span {
.series-select-option {
display: flex;
align-items: center;
justify-content: start;
justify-content: flex-start;
padding: 0 11px;
}
</style>

2
core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
View File

@ -814,7 +814,7 @@ onMounted(() => {
.series-select-option {
display: flex;
align-items: center;
justify-content: start;
justify-content: flex-start;
padding: 0 11px;
}
.m-divider {

4
core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
View File

@ -863,12 +863,12 @@ onMounted(() => {
.series-select-option {
display: flex;
align-items: center;
justify-content: start;
justify-content: flex-start;
padding: 0 11px;
}
.invalid-field {
::v-deep(.ed-input__wrapper) {
:deep(.ed-input__wrapper) {
box-shadow: 0 0 0 1px rgb(245, 74, 69) inset !important;
}
}

2
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -666,7 +666,7 @@ const onBackgroundChange = val => {
}
const onAssistLineChange = val => {
view.value.senior.assistLine = val.data
view.value.senior.assistLineCfg = val.data
if (val.requestData) {
calcData(view.value)
} else {

7
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -604,7 +604,12 @@ export const DEFAULT_FUNCTION_CFG: ChartFunctionCfg = {
emptyDataStrategy: 'breakLine',
emptyDataFieldCtrl: []
}
export const DEFAULT_ASSIST_LINE_CFG: ChartAssistLineCfg = {
enable: false,
assistLine: []
}
export const DEFAULT_THRESHOLD: ChartThreshold = {
enable: false,
gaugeThreshold: '',
labelThreshold: [],
tableThreshold: [],
@ -1268,7 +1273,7 @@ export const BASE_VIEW_CONFIG = {
},
senior: {
functionCfg: DEFAULT_FUNCTION_CFG,
assistLine: [],
assistLineCfg: DEFAULT_ASSIST_LINE_CFG,
threshold: DEFAULT_THRESHOLD,
scrollCfg: DEFAULT_SCROLL
}

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
View File

@ -143,7 +143,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
if (chart.senior) {
const senior = parseJson(chart.senior)
const threshold = senior.threshold ?? DEFAULT_THRESHOLD
if (threshold.gaugeThreshold) {
if (threshold.enable && threshold.gaugeThreshold) {
hasThreshold = true
const arr = threshold.gaugeThreshold.split(',')
for (let i = 0; i < arr.length; i++) {

20
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@ -534,7 +534,11 @@ export function getSlider(chart: Chart) {
export function getAnalyse(chart: Chart) {
const assistLine = []
const senior = parseJson(chart.senior)
if (senior.assistLine?.length > 0) {
if (!senior.assistLineCfg?.enable) {
return assistLine
}
const assistLineArr = senior.assistLineCfg.assistLine
if (assistLineArr?.length > 0) {
const customStyle = parseJson(chart.customStyle)
let yAxisPosition, axisFormatterCfg
if (customStyle.yAxis) {
@ -545,8 +549,8 @@ export function getAnalyse(chart: Chart) {
: DEFAULT_YAXIS_STYLE.axisLabelFormatter
}
const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
const dynamicLineFields = senior.assistLine
const fixedLines = assistLineArr.filter(ele => ele.field === '0')
const dynamicLineFields = assistLineArr
.filter(ele => ele.field === '1')
.map(item => item.fieldId)
const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')
@ -589,7 +593,11 @@ export function getAnalyse(chart: Chart) {
export function getAnalyseHorizontal(chart: Chart) {
const assistLine = []
const senior = parseJson(chart.senior)
if (senior.assistLine?.length > 0) {
if (!senior.assistLineCfg?.enable) {
return assistLine
}
const assistLineArr = senior.assistLineCfg.assistLine
if (assistLineArr?.length > 0) {
const customStyle = parseJson(chart.customStyle)
let xAxisPosition, axisFormatterCfg
if (customStyle.xAxis) {
@ -600,8 +608,8 @@ export function getAnalyseHorizontal(chart: Chart) {
: DEFAULT_XAXIS_STYLE.axisLabelFormatter
}
const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
const dynamicLineFields = senior.assistLine
const fixedLines = assistLineArr.filter(ele => ele.field === '0')
const dynamicLineFields = assistLineArr
.filter(ele => ele.field === '1')
.map(item => item.fieldId)
const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')

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

@ -329,11 +329,15 @@ export function getCurrentField(valueFieldList: Axis[], field: ChartViewField) {
}
export function getConditions(chart: Chart) {
const { threshold } = parseJson(chart.senior)
if (!threshold.enable) {
return
}
const res = {
text: [],
background: []
}
const conditions = parseJson(chart.senior).threshold.tableThreshold ?? []
const conditions = threshold.tableThreshold ?? []
if (conditions?.length > 0) {
const { tableCell, basicStyle } = parseJson(chart.customAttr)

2
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -290,7 +290,7 @@ onBeforeUnmount(() => {
.canvas-content {
width: 100% !important;
height: 100% !important;
::v-deep(.g2-tooltip) {
:deep(.g2-tooltip) {
position: fixed !important;
}
}

11
sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/ChartSeniorAssistCfgDTO.java Normal file
View File

@ -0,0 +1,11 @@
package io.dataease.api.chart.dto;
import lombok.Data;
import java.util.List;
@Data
public class ChartSeniorAssistCfgDTO {
private boolean enable;
private List<ChartSeniorAssistDTO> assistLine;
}