Merge pull request #7934 from ulleo/dev-v2

feat(图表): 指标卡字体颜色可以跟随配色方案进行设置

core/core-frontend/src/custom-component/indicator/DeIndicator.vue

@@ -12,6 +12,7 @@ import {
   DEFAULT_INDICATOR_STYLE
 } from '@/views/chart/components/editor/util/chart'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
+import { hexColorToRGBA } from '@/views/chart/components/js/util'
 
 const props = defineProps({
   view: {
@@ -222,15 +223,21 @@ const renderChart = async view => {
   if (!view) {
     return
   }
+
+  const TEMP_DEFAULT_CHART = cloneDeep(BASE_VIEW_CONFIG)
+  delete TEMP_DEFAULT_CHART.customAttr.basicStyle.alpha
+
   const chart = deepCopy({
-    ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)),
+    ...defaultsDeep(view, TEMP_DEFAULT_CHART),
     data: chartData.value
   })
+
   recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
   recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
 
   if (chart.customAttr) {
     const customAttr = chart.customAttr
+
     if (customAttr.indicator) {
       switch (customAttr.indicator.hPosition) {
         case 'left':
@@ -254,6 +261,15 @@ const renderChart = async view => {
       }
 
       indicatorColor.value = customAttr.indicator.color
+      let suffixColor = customAttr.indicator.suffixColor
+
+      if (customAttr.basicStyle && customAttr.basicStyle.alpha !== undefined) {
+        indicatorColor.value = hexColorToRGBA(
+          customAttr.basicStyle.colors[0],
+          customAttr.basicStyle.alpha
+        )
+        suffixColor = hexColorToRGBA(customAttr.basicStyle.colors[1], customAttr.basicStyle.alpha)
+      }
 
       indicatorClass.value = {
         color: thresholdColor.value,
@@ -270,7 +286,7 @@ const renderChart = async view => {
       }
 
       indicatorSuffixClass.value = {
-        color: customAttr.indicator.suffixColor,
+        color: suffixColor,
         'font-size': customAttr.indicator.suffixFontSize + 'px',
         'font-family': defaultTo(
           CHART_CONT_FAMILY_MAP[customAttr.indicator.suffixFontFamily],
@@ -287,9 +303,15 @@ const renderChart = async view => {
       suffixContent.value = defaultTo(customAttr.indicator.suffix, '')
     }
     if (customAttr.indicatorName && customAttr.indicatorName.show) {
+      let nameColor = customAttr.indicatorName.color
+
+      if (customAttr.basicStyle && customAttr.basicStyle.alpha !== undefined) {
+        nameColor = hexColorToRGBA(customAttr.basicStyle.colors[2], customAttr.basicStyle.alpha)
+      }
+
       indicatorNameShow.value = true
       indicatorNameClass.value = {
-        color: customAttr.indicatorName.color,
+        color: nameColor,
         'font-size': customAttr.indicatorName.fontSize + 'px',
         'font-family': defaultTo(
           CHART_CONT_FAMILY_MAP[customAttr.indicatorName.fontFamily],

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { PropType, toRefs, nextTick, watch } from 'vue'
+import { PropType, toRefs, nextTick, watch, ref } from 'vue'
 import MiscSelector from '@/views/chart/components/editor/editor-style/components/MiscSelector.vue'
 import LabelSelector from '@/views/chart/components/editor/editor-style/components/LabelSelector.vue'
 import TooltipSelector from '@/views/chart/components/editor/editor-style/components/TooltipSelector.vue'
@@ -90,6 +90,9 @@ const emit = defineEmits([
   'onIndicatorNameChange'
 ])
 
+const indicatorValueRef = ref()
+const indicatorNameRef = ref()
+
 const showProperties = (property: EditorProperty) => properties.value?.includes(property)
 
 const onMiscChange = (val, prop) => {
@@ -117,11 +120,19 @@ const onTextChange = (val, prop) => {
 }
 
 const onIndicatorChange = (val, prop) => {
-  state.initReady && emit('onIndicatorChange', val, prop)
+  const value = { indicatorValue: val, indicatorName: undefined }
+  if (prop === 'color' || prop === 'suffixColor') {
+    value.indicatorName = indicatorNameRef.value?.getFormData()
+  }
+  state.initReady && emit('onIndicatorChange', value, prop)
 }
 
 const onIndicatorNameChange = (val, prop) => {
-  state.initReady && emit('onIndicatorNameChange', val, prop)
+  const value = { indicatorName: val, indicatorValue: undefined }
+  if (prop === 'color') {
+    value.indicatorValue = indicatorValueRef.value?.getFormData()
+  }
+  state.initReady && emit('onIndicatorNameChange', value, prop)
 }
 
 const onLegendChange = (val, prop) => {
@@ -243,6 +254,7 @@ watch(
             title="指标值"
           >
             <indicator-value-selector
+              ref="indicatorValueRef"
               :property-inner="propertyInnerAll['indicator-value-selector']"
               :themes="themes"
               class="attr-selector"
@@ -261,6 +273,7 @@ watch(
             name="indicator-name"
           >
             <indicator-name-selector
+              ref="indicatorNameRef"
               :property-inner="propertyInnerAll['indicator-name-selector']"
               :themes="themes"
               class="attr-selector"

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

@@ -5,13 +5,15 @@ import {
   COLOR_PANEL,
   CHART_FONT_FAMILY,
   CHART_FONT_LETTER_SPACE,
-  DEFAULT_INDICATOR_NAME_STYLE
+  DEFAULT_INDICATOR_NAME_STYLE,
+  DEFAULT_BASIC_STYLE
 } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { ElButton, ElIcon } from 'element-plus-secondary'
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { hexColorToRGBA } from '@/views/chart/components/js/util'
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
 
@@ -40,7 +42,8 @@ const fontFamily = CHART_FONT_FAMILY
 const fontLetterSpace = CHART_FONT_LETTER_SPACE
 
 const state = reactive({
-  indicatorNameForm: JSON.parse(JSON.stringify(DEFAULT_INDICATOR_NAME_STYLE))
+  indicatorNameForm: JSON.parse(JSON.stringify(DEFAULT_INDICATOR_NAME_STYLE)),
+  basicStyleForm: {} as ChartBasicStyle
 })
 
 const { chart } = toRefs(props)
@@ -61,11 +64,25 @@ const changeTitleStyle = prop => {
 }
 
 const init = () => {
+  const TEMP_DEFAULT_BASIC_STYLE = cloneDeep(DEFAULT_BASIC_STYLE)
+  delete TEMP_DEFAULT_BASIC_STYLE.alpha
+
+  state.basicStyleForm = defaultsDeep(
+    cloneDeep(props.chart?.customAttr?.basicStyle),
+    cloneDeep(TEMP_DEFAULT_BASIC_STYLE)
+  )
+
   const customText = defaultsDeep(
     cloneDeep(props.chart?.customAttr?.indicatorName),
     cloneDeep(DEFAULT_INDICATOR_NAME_STYLE)
   )
 
+  if (state.basicStyleForm.alpha !== undefined) {
+    const color = hexColorToRGBA(state.basicStyleForm.colors[2], state.basicStyleForm.alpha)
+
+    customText.color = color
+  }
+
   state.indicatorNameForm = cloneDeep(customText)
 
   //第一次颜色可能赋值失败，单独赋值一次
@@ -85,6 +102,12 @@ watch(
   },
   { deep: true }
 )
+
+function getFormData() {
+  return state.indicatorNameForm
+}
+
+defineExpose({ getFormData })
 </script>
 
 <template>
@@ -125,6 +148,7 @@ watch(
             :predefine="predefineColors"
             @change="changeTitleStyle('color')"
             is-custom
+            show-alpha
           />
         </el-form-item>
         <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">

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

@@ -5,13 +5,15 @@ import {
   COLOR_PANEL,
   CHART_FONT_FAMILY,
   CHART_FONT_LETTER_SPACE,
-  DEFAULT_INDICATOR_STYLE
+  DEFAULT_INDICATOR_STYLE,
+  DEFAULT_BASIC_STYLE
 } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { ElButton, ElIcon, ElInput } from 'element-plus-secondary'
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { hexColorToRGBA } from '@/views/chart/components/js/util'
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
 
@@ -31,7 +33,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['onIndicatorChange'])
+const emit = defineEmits(['onIndicatorChange', 'onBasicStyleChange'])
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -40,7 +42,8 @@ const fontFamily = CHART_FONT_FAMILY
 const fontLetterSpace = CHART_FONT_LETTER_SPACE
 
 const state = reactive({
-  indicatorValueForm: JSON.parse(JSON.stringify(DEFAULT_INDICATOR_STYLE))
+  indicatorValueForm: JSON.parse(JSON.stringify(DEFAULT_INDICATOR_STYLE)),
+  basicStyleForm: {} as ChartBasicStyle
 })
 
 const { chart } = toRefs(props)
@@ -61,11 +64,27 @@ const changeTitleStyle = prop => {
 }
 
 const init = () => {
+  const TEMP_DEFAULT_BASIC_STYLE = cloneDeep(DEFAULT_BASIC_STYLE)
+  delete TEMP_DEFAULT_BASIC_STYLE.alpha
+
+  state.basicStyleForm = defaultsDeep(
+    cloneDeep(props.chart?.customAttr?.basicStyle),
+    cloneDeep(TEMP_DEFAULT_BASIC_STYLE)
+  )
+
   const customText = defaultsDeep(
     cloneDeep(props.chart?.customAttr?.indicator),
     cloneDeep(DEFAULT_INDICATOR_STYLE)
   )
 
+  if (state.basicStyleForm.alpha !== undefined) {
+    const color = hexColorToRGBA(state.basicStyleForm.colors[0], state.basicStyleForm.alpha)
+    const suffixColor = hexColorToRGBA(state.basicStyleForm.colors[1], state.basicStyleForm.alpha)
+
+    customText.color = color
+    customText.suffixColor = suffixColor
+  }
+
   state.indicatorValueForm = cloneDeep(customText)
 
   //第一次颜色可能赋值失败，单独赋值一次
@@ -86,6 +105,12 @@ watch(
   },
   { deep: true }
 )
+
+function getFormData() {
+  return state.indicatorValueForm
+}
+
+defineExpose({ getFormData })
 </script>
 
 <template>
@@ -125,6 +150,7 @@ watch(
             class="color-picker-style"
             :predefine="predefineColors"
             @change="changeTitleStyle('color')"
+            show-alpha
             is-custom
           />
         </el-form-item>
@@ -410,6 +436,7 @@ watch(
               :predefine="predefineColors"
               @change="changeTitleStyle('suffixColor')"
               is-custom
+              show-alpha
             />
           </el-form-item>
           <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">

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

@@ -691,13 +691,25 @@ const onLabelChange = val => {
   renderChart(view.value)
 }
 
-const onIndicatorChange = val => {
-  view.value.customAttr.indicator = val
+const onIndicatorChange = (val, prop) => {
+  if (prop === 'color' || prop === 'suffixColor') {
+    view.value.customAttr.basicStyle.alpha = undefined
+    if (val.indicatorName !== undefined) {
+      view.value.customAttr.indicatorName = val.indicatorName
+    }
+  }
+  view.value.customAttr.indicator = val.indicatorValue
   renderChart(view.value)
 }
 
-const onIndicatorNameChange = val => {
-  view.value.customAttr.indicatorName = val
+const onIndicatorNameChange = (val, prop) => {
+  if (prop === 'color') {
+    view.value.customAttr.basicStyle.alpha = undefined
+    if (val.indicatorValue !== undefined) {
+      view.value.customAttr.indicator = val.indicatorValue
+    }
+  }
+  view.value.customAttr.indicatorName = val.indicatorName
   renderChart(view.value)
 }
 

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

@@ -354,7 +354,7 @@ export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
 export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
   show: true,
   fontSize: '20',
-  color: '#5470C6',
+  color: '#5470C6ff',
   hPosition: 'center',
   vPosition: 'center',
   isItalic: false,
@@ -366,7 +366,7 @@ export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
   suffixEnable: true,
   suffix: '',
   suffixFontSize: '14',
-  suffixColor: '#5470C6',
+  suffixColor: '#5470C6ff',
   suffixIsItalic: false,
   suffixIsBolder: true,
   suffixFontFamily: 'Microsoft YaHei',
@@ -376,7 +376,7 @@ export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
 export const DEFAULT_INDICATOR_NAME_STYLE: ChartIndicatorNameStyle = {
   show: true,
   fontSize: '18',
-  color: '#ffffff',
+  color: '#ffffffff',
   isItalic: false,
   isBolder: true,
   fontFamily: 'Microsoft YaHei',