feat(图表): 符号地图支持条件样式 #13785

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 import { ElMessage, UploadProps } from 'element-plus-secondary'
 import { svgStrToUrl } from '@/views/chart/components/js/util'
 import { useI18n } from '@/hooks/web/useI18n'
+import { cloneDeep, debounce, defaultsDeep } from 'lodash-es'
 
 const props = withDefaults(
   defineProps<{
@@ -119,6 +120,37 @@ const mapCustomRangeValidate = prop => {
   }
   changeBasicStyle(prop)
 }
+
+const init = () => {
+  const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+  if (
+    basicStyle.mapSymbol === 'custom' &&
+    state.basicStyleForm.customIcon !== basicStyle.customIcon
+  ) {
+    let file
+    if (basicStyle.customIcon?.startsWith('data')) {
+      file = basicStyle.customIcon
+    } else {
+      file = svgStrToUrl(basicStyle.customIcon)
+    }
+    file && (state.fileList[0] = { url: file })
+  }
+  state.basicStyleForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
+  if (!state.customColor) {
+    state.customColor = state.basicStyleForm.colors[0]
+    state.colorIndex = 0
+  }
+}
+
+const debouncedInit = debounce(init, 500)
+watch(
+  [() => props.chart.customAttr.basicStyle, () => props.chart.xAxis, () => props.chart.yAxis],
+  debouncedInit,
+  { deep: true }
+)
+onMounted(() => {
+  init()
+})
 </script>
 
 <template>
@@ -317,4 +349,91 @@ const mapCustomRangeValidate = prop => {
   flex-direction: row;
   align-items: center;
 }
+.avatar-uploader-container {
+  :deep(.ed-upload--picture-card) {
+    background: #eff0f1;
+    border: 1px dashed #dee0e3;
+    border-radius: 4px;
+
+    .ed-icon {
+      color: #1f2329;
+    }
+
+    &:hover {
+      .ed-icon {
+        color: var(--ed-color-primary);
+      }
+    }
+  }
+
+  &.img-area_dark {
+    :deep(.ed-upload-list__item).is-ready {
+      border-color: #434343;
+    }
+    :deep(.ed-upload--picture-card) {
+      background: #373737;
+      border-color: #434343;
+      .ed-icon {
+        color: #ebebeb;
+      }
+    }
+  }
+
+  &.img-area_light {
+    :deep(.ed-upload-list__item).is-ready {
+      border-color: #dee0e3;
+    }
+  }
+  :deep(.ed-upload-list__item-preview) {
+    display: none !important;
+  }
+  :deep(.ed-upload-list__item-delete) {
+    margin-left: 0 !important;
+  }
+  :deep(.ed-upload-list__item-status-label) {
+    display: none !important;
+  }
+  :deep(.ed-icon--close-tip) {
+    display: none !important;
+  }
+}
+.avatar-uploader {
+  width: 90px;
+  height: 80px;
+  overflow: hidden;
+}
+.avatar-uploader {
+  width: 90px;
+  :deep(.ed-upload) {
+    width: 80px;
+    height: 80px;
+    line-height: 90px;
+  }
+
+  :deep(.ed-upload-list li) {
+    width: 80px !important;
+    height: 80px !important;
+  }
+
+  :deep(.ed-upload--picture-card) {
+    background: #eff0f1;
+    border: 1px dashed #dee0e3;
+    border-radius: 4px;
+
+    .ed-icon {
+      color: #1f2329;
+    }
+
+    &:hover {
+      .ed-icon {
+        color: var(--ed-color-primary);
+      }
+    }
+  }
+}
+.uploader {
+  :deep(.ed-form-item__content) {
+    justify-content: center;
+  }
+}
 </style>

core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts

@@ -246,8 +246,12 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     const extBubbleIds = chart.extBubble.map(i => i.id)
     conditions = filter(conditions, c => extBubbleIds.includes(c.fieldId))
 
+    const baseColor = colorsWithAlpha[0]
+    const baseColorList = []
+
     const data = chart.data?.tableRow
       ? chart.data.tableRow.map((item, index) => {
+          item['_index'] = '_index' + index
           // 颜色标识
           const identifier = item[xAxisExt[0]?.dataeaseName]
           // 检查该标识是否已有颜色分配，如果没有则分配
@@ -257,6 +261,9 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
             // 记录分配的颜色
             colorAssignments.set(identifier, color)
           }
+
+          baseColorList[index] = color
+
           if (conditions.length > 0) {
             for (let i = 0; i < conditions.length; i++) {
               const c = conditions[i]
@@ -271,38 +278,45 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
                   const start = parseFloat(t.min)
                   const end = parseFloat(t.max)
                   if (start <= value && value <= end) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('lt' === t.term) {
                   if (value < v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('le' === t.term) {
                   if (value <= v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('gt' === t.term) {
                   if (value > v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('ge' === t.term) {
                   if (value >= v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('eq' === t.term) {
                   if (value === v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 } else if ('not_eq' === t.term) {
                   if (value !== v) {
-                    color = t.color
-                    colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+                    color = hexColorToRGBA(_color, alpha)
+                    colorsWithAlpha[index] = color
+                    baseColorList[index] = color
                   }
                 }
               }
@@ -349,7 +363,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           })
         }
       } else {
-        pointLayer.shape(mapSymbol).color(xAxisExt[0]?.dataeaseName, colorsWithAlpha)
+        pointLayer.shape(mapSymbol).color('_index', colorsWithAlpha)
         pointLayer.style({
           stroke: {
             field: 'color'
@@ -366,7 +380,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           pointLayer.shape('customIcon')
         } else {
           const parser = new DOMParser()
-          const color = colorsWithAlpha[0]
+          const color = baseColor
           const fillRegex = /(fill="[^"]*")/g
           const svgStr = basicStyle.customIcon.replace(fillRegex, '')
           const doc = parser.parseFromString(svgStr, 'image/svg+xml')
@@ -378,9 +392,11 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       } else {
         pointLayer
           .shape(mapSymbol)
-          .color(colorsWithAlpha[0])
+          .color('_index', baseColorList)
           .style({
-            stroke: colorsWithAlpha[0],
+            stroke: {
+              field: 'color'
+            },
             strokeWidth: mapSymbolStrokeWidth,
             opacity: mapSymbolOpacity / 10
           })