feat: 阈值/辅助线开关

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

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

core/core-frontend/src/models/chart/chart-senior.d.ts

@@ -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
    */

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

@@ -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')"

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

@@ -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 flag = state.assistLineCfg.assistLine.findIndex(ele => ele.field === '1') !== -1
-  const arr = state.assistLine.filter(ele => {
+  emit('onAssistLineChange', { data: state.assistLineCfg, requestData: flag })
-    return ele.field === '1'
-  })
-  if (arr && arr.length > 0) {
-    flag = true
-  }
-  emit('onAssistLineChange', { data: state.assistLine, 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
+    const senior = chart.senior
-    if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+    if (senior.assistLineCfg?.assistLine) {
-      senior = JSON.parse(JSON.stringify(chart.senior))
+      const assistLine = senior.assistLineCfg.assistLine
-    } else {
+      for (let i = 0; i < assistLine.length; i++) {
-      senior = JSON.parse(chart.senior)
+        if (!assistLine[i].fontSize) {
-    }
+          assistLine[i].fontSize = 10
-    if (senior.assistLine) {
-      for (let i = 0; i < senior.assistLine.length; i++) {
-        if (!senior.assistLine[i].fontSize) {
-          senior.assistLine[i].fontSize = '10'
         }
       }
-      state.assistLine = senior.assistLine
+      state.assistLineCfg = defaultsDeep(senior.assistLineCfg, DEFAULT_ASSIST_LINE_CFG)
-    } else {
-      state.assistLine = []
     }
-    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"
       />

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

@@ -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
+    const senior = chart.senior
-    if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
-      senior = JSON.parse(JSON.stringify(chart.senior))
-    } else {
-      senior = JSON.parse(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>

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

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

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

@@ -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 {

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

@@ -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;
   }
 }

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

@@ -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 {

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

@@ -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
   }

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

@@ -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++) {

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

@@ -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 fixedLines = assistLineArr.filter(ele => ele.field === '0')
-    const dynamicLineFields = senior.assistLine
+    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 fixedLines = assistLineArr.filter(ele => ele.field === '0')
-    const dynamicLineFields = senior.assistLine
+    const dynamicLineFields = assistLineArr
       .filter(ele => ele.field === '1')
       .map(item => item.fieldId)
     const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')

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

@@ -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)

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

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

sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/ChartSeniorAssistCfgDTO.java

@@ -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;
+}