From 0b297584c945a9e44dcc13f044ac1038bebda6c2 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Mon, 1 Jul 2024 10:42:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8-=E7=AC=A6=E5=8F=B7?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE):=20=E7=AC=A6=E5=8F=B7=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E5=A4=A7=E5=B1=8F=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-style/components/LabelSelector.vue |  3 +-
 .../components/TooltipSelector.vue            |  5 ++--
 .../js/panel/charts/map/symbolic-map.ts       | 29 +++++++++++++++----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index d27babd708..08ce8ef788 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -370,7 +370,7 @@ onMounted(() => {
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="showProperty('customContent')" class="form-item">
+      <el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
         <template #label>
           <span class="data-area-label">
             <span>
@@ -389,6 +389,7 @@ onMounted(() => {
         <el-input
           style="font-size: smaller; font-weight: normal"
           v-model="state.labelForm.customContent"
+          :effect="themes"
           type="textarea"
           :autosize="{ minRows: 4, maxRows: 4 }"
           :placeholder="defaultPlaceholder"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
index 0dcec8ec49..81eda6205d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@@ -401,7 +401,6 @@ onMounted(() => {
     label-position="top"
   >
     <el-form-item
-      v-if="props.chart.type !== 'symbolic-map'"
       :label="t('chart.background') + t('chart.color')"
       class="form-item"
       :class="'form-item-' + themes"
@@ -479,7 +478,7 @@ onMounted(() => {
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="showProperty('customContent')" class="form-item">
+      <el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
         <template #label>
           <span class="data-area-label">
             <span>
@@ -497,6 +496,7 @@ onMounted(() => {
         </template>
         <el-input
           style="font-size: smaller; font-weight: normal"
+          :effect="themes"
           v-model="state.tooltipForm.customContent"
           type="textarea"
           :autosize="{ minRows: 4, maxRows: 4 }"
@@ -811,6 +811,7 @@ onMounted(() => {
     border-right: unset;
   }
 }
+
 .series-select-option {
   display: flex;
   align-items: center;
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
index 0a2cc9e517..459df759d9 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
@@ -33,7 +33,14 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     ...MAP_EDITOR_PROPERTY_INNER,
     'basic-style-selector': ['colors', 'alpha', 'mapBaseStyle', 'symbolicMapStyle', 'zoom'],
     'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
-    'tooltip-selector': ['color', 'fontSize', 'showFields', 'customContent', 'show']
+    'tooltip-selector': [
+      'color',
+      'fontSize',
+      'showFields',
+      'customContent',
+      'show',
+      'backgroundColor'
+    ]
   }
   axis: AxisType[] = ['xAxis', 'xAxisExt', 'extBubble', 'filter', 'extLabel', 'extTooltip']
   axisConfig: AxisConfig = {
@@ -91,7 +98,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     const configList: L7Config[] = []
     const symbolicLayer = this.buildSymbolicLayer(chart, basicStyle)
     configList.push(symbolicLayer)
-    const tooltipLayer = this.buildTooltip(chart, symbolicLayer)
+    const tooltipLayer = this.buildTooltip(chart, container, symbolicLayer)
     if (tooltipLayer) {
       scene.addPopup(tooltipLayer)
     }
@@ -233,7 +240,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
    * @param chart
    * @param pointLayer
    */
-  buildTooltip = (chart, pointLayer) => {
+  buildTooltip = (chart, container, pointLayer) => {
     const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null
     if (customAttr?.tooltip?.show) {
       const { tooltip } = deepCopy(customAttr)
@@ -244,9 +251,19 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           ...chart.xAxis.map(i => `${i.dataeaseName}@${i.name}`)
         ]
       }
+      // 修改背景色
+      const style = document.createElement('style')
+      style.innerHTML = `
+          #${container} .l7-popup-content {
+            background-color: ${tooltip.backgroundColor} !important;
+          }
+          #${container} .l7-popup-tip {
+           border-top-color: ${tooltip.backgroundColor} !important;
+          }
+        `
+      document.head.appendChild(style)
       const htmlPrefix = `<div style='font-size:${tooltip.fontSize}px;color:${tooltip.color}'>`
       const htmlSuffix = '</div>'
-
       return new LayerPopup({
         items: [
           {
@@ -360,7 +377,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
   setupDefaultOptions(chart: ChartObj): ChartObj {
     chart.customAttr.label = {
       ...chart.customAttr.label,
-      show: true
+      show: false
     }
     chart.customAttr.basicStyle = {
       ...chart.customAttr.basicStyle,
@@ -371,6 +388,6 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
   }
 
   protected setupOptions(chart: Chart, config: L7Config): L7Config {
-    return flow(this.configEmptyDataStrategy, this.configTooltip, this.configLabel)(chart, config)
+    return flow(this.configEmptyDataStrategy, this.configLabel)(chart, config)
   }
 }