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

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

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

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

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

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

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

core/core-frontend/src/locales/zh-CN.ts

@@ -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: '总计配置',

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

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

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

@@ -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]}`"
+                    :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
-                    :name="`field_${fieldType[fieldItem.field.deType.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

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

@@ -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]') {
+    fields = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = JSON.parse(JSON.stringify(props.chart.xAxis))
-    } else {
-      state.fields = JSON.parse(props.chart.xAxis)
-    }
   } else if (props.chart.type === 'table-pivot') {
-    if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = JSON.parse(JSON.stringify(props.chart.yAxis))
+    const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
-    } else {
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
-      state.fields = JSON.parse(props.chart.yAxis)
+    fields = [...xAxis, ...xAxisExt, ...yAxis]
-    }
   } else {
-    if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis)))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
-    } else {
+    fields = [...xAxis, ...yAxis]
-      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))
-    }
   }
-  // 暂不支持时间
+  state.fields.splice(0, state.fields.length, ...fields)
-  // this.fields = this.fields.filter(ele => ele.deType !== 1)
 }
 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
+              <el-form-item class="form-item">
-                v-model="item.min"
+                <el-input-number
-                controls-position="right"
+                  v-model="item.min"
-                class="between-item"
+                  controls-position="right"
-                :placeholder="t('chart.axis_value_min')"
+                  class="between-item"
-                clearable
+                  :placeholder="t('chart.axis_value_min')"
-                @change="changeThreshold"
+                  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
+              <el-form-item class="form-item">
-                v-model="item.max"
+                <el-input-number
-                controls-position="right"
+                  v-model="item.max"
-                class="between-item"
+                  controls-position="right"
-                :placeholder="t('chart.axis_value_max')"
+                  class="between-item"
-                clearable
+                  :placeholder="t('chart.axis_value_max')"
-                @change="changeThreshold"
+                  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
+              <el-form-item class="form-item">
-                is-custom
+                <el-color-picker
-                size="large"
+                  is-custom
-                v-model="item.color"
+                  size="large"
-                show-alpha
+                  v-model="item.color"
-                class="color-picker-style"
+                  show-alpha
-                :predefine="predefineColors"
+                  class="color-picker-style"
-                @change="changeThreshold"
+                  :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
+              <el-form-item class="form-item">
-                is-custom
+                <el-color-picker
-                size="large"
+                  is-custom
-                v-model="item.backgroundColor"
+                  size="large"
-                show-alpha
+                  v-model="item.backgroundColor"
-                class="color-picker-style"
+                  show-alpha
-                :predefine="predefineColors"
+                  class="color-picker-style"
-                @change="changeThreshold"
+                  :predefine="predefineColors"
-              />
+                  @change="changeThreshold"
+                />
+              </el-form-item>
             </div>
             <div
               style="display: flex; align-items: center; justify-content: center; margin-left: 8px"

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

@@ -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) => {
+      color1 = color1.map((ele, _index) => {
-        if (index === 1) {
+        return setGradientColor(ele, true, 0)
-          return ele
-        }
-        const tmp = hexColorToRGBA(ele, basicStyle.alpha)
-        return setGradientColor(tmp, 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)
   }
 

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

@@ -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 { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr)
-    const valueColor = tableCell.tableFontColor
-    let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
     const enableTableCrossBG = tableCell.enableTableCrossBG
-    if (enableTableCrossBG) {
+    const valueColor = tableCell.tableFontColor
-      valueBgColor = null
+    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) {
+        mapping(value, rowData) {
-          const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
+          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
         }
       })

pom.xml

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