From 90c1f095c0747ba5f4f331856955c8307b502dc3 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 31 Jan 2024 13:29:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=8D=A1=E5=AD=97=E4=BD=93=E9=A2=9C=E8=89=B2=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E8=B7=9F=E9=9A=8F=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicator/DeIndicator.vue                 | 28 ++++++++++++++--
 .../editor/editor-style/ChartStyle.vue        | 19 +++++++++--
 .../components/IndicatorNameSelector.vue      | 28 ++++++++++++++--
 .../components/IndicatorValueSelector.vue     | 33 +++++++++++++++++--
 .../views/chart/components/editor/index.vue   | 20 ++++++++---
 .../chart/components/editor/util/chart.ts     |  6 ++--
 6 files changed, 116 insertions(+), 18 deletions(-)

diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
index 4242a34d4b..5b37c41ced 100644
--- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
+++ b/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],
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index 54707fee91..956efabf42 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/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"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
index 0c54dbc03d..0faddb8183 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/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">
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
index 6cd2ffc63e..9f2e6cea22 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/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">
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 77b3e2ecd2..dbda67309d 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/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)
 }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index d3d71ecb7a..590bab5478 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/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',