From 7b8d996ef684bdabfad47a17bf7a25e6ffccbb0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 2 May 2022 23:10:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B0=B4=E7=90=83?=
 =?UTF-8?q?=E5=9B=BE=E6=95=B0=E6=8D=AE=E5=8F=98=E5=8C=96=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useChartDataFetch.hook.ts           |  2 +-
 .../Charts/Lines/LineGradientSingle/index.vue |  8 ++-
 .../Charts/Mores/WaterPolo/config.ts          |  9 ++-
 .../Charts/Mores/WaterPolo/config.vue         | 35 +++++++++++
 .../Charts/Mores/WaterPolo/index.vue          | 61 ++++++++++++++++---
 src/settings/chartThemes/index.ts             |  2 +-
 .../ChartDataMatchingAndShow/index.vue        | 13 +++-
 .../components/LayersListItem/index.vue       |  3 +
 8 files changed, 114 insertions(+), 19 deletions(-)

diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts
index b0230bb5..ac522475 100644
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@@ -51,7 +51,7 @@ export const useChartDataFetch = (
               PackagesCategoryEnum.CHARTS
 
             try {
-              if (isECharts) {
+              if (isECharts && vChartRef?.value?.setOption) {
                 nextTick(() => {
                   if (vChartRef.value) {
                     vChartRef.value.setOption({ dataset: res.data })
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index f85cac0b..6e998cbf 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.options" 
+    :manual-update="isPreview()" 
+    autoresize>
+  </v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Mores/WaterPolo/config.ts b/src/packages/components/Charts/Mores/WaterPolo/config.ts
index cf3908d6..8c786b0b 100644
--- a/src/packages/components/Charts/Mores/WaterPolo/config.ts
+++ b/src/packages/components/Charts/Mores/WaterPolo/config.ts
@@ -6,11 +6,12 @@ import cloneDeep from 'lodash/cloneDeep'
 export const includes = []
 
 export const option = {
+  dataset: 0.5,
   series: [
     {
       type: 'liquidFill',
       radius: '90%',
-      data: [0.5],
+      data: [0],
       center: ['50%', '50%'],
       color: [
         {
@@ -34,7 +35,7 @@ export const option = {
       ],
       backgroundStyle: {
         borderWidth: 1,
-        color: 'RGBA(51, 66, 127, 0.7)',
+        color: 'rgba(51, 66, 127, 0.7)',
       },
       label: {
         normal: {
@@ -56,9 +57,7 @@ export const option = {
   ],
 }
 
-export default class Config
-  extends publicConfig
-  implements CreateComponentType
+export default class Config extends publicConfig implements CreateComponentType
 {
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)
diff --git a/src/packages/components/Charts/Mores/WaterPolo/config.vue b/src/packages/components/Charts/Mores/WaterPolo/config.vue
index 44a7bc22..41a9585d 100644
--- a/src/packages/components/Charts/Mores/WaterPolo/config.vue
+++ b/src/packages/components/Charts/Mores/WaterPolo/config.vue
@@ -1,6 +1,41 @@
 <template>
+  <CollapseItem name="水球" :expanded="true">
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <n-input-number
+          v-model:value="optionData.series[0].data[0]"
+          :min="0"
+          :step="0.01"
+          size="small"
+          placeholder="水球数值"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景" :alone="true">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.series[0].backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
 </script>
diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue
index 4715f5d0..1e91911d 100644
--- a/src/packages/components/Charts/Mores/WaterPolo/index.vue
+++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue
@@ -2,22 +2,24 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option"
+    :option="option.options"
     :manual-update="isPreview()"
     autoresize
   ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
-import { mergeTheme } from '@/packages/public/chart'
-import config, { includes } from './config'
+import config  from './config'
 import { isPreview } from '@/utils'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   themeSetting: {
@@ -36,9 +38,52 @@ const props = defineProps({
 
 use([CanvasRenderer, GridComponent])
 
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  options: {},
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series[0].color[0].colorStops = [  
+        {
+          offset: 0,
+          color: themeColor[0],
+        },
+        {
+          offset: 1,
+          color: themeColor[1],
+        },
+      ]
+    }
+    option.options = props.chartConfig.option
+  },
+  {
+    immediate: true,
+  }
+)
+
+const updateDataset = (newData: number) => {
+  props.chartConfig.option.series[0].data = [newData]
+  option.options = props.chartConfig.option
+}
+
+updateDataset(0.5)
+
+watch(
+  () => props.chartConfig.option.value,
+  newData => updateDataset(newData),
+  {
+    deep: true,
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  updateDataset(newData)
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts
index 28bf108e..d066d858 100644
--- a/src/settings/chartThemes/index.ts
+++ b/src/settings/chartThemes/index.ts
@@ -63,7 +63,7 @@ export const chartColorsshow = {
   shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
   roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
 }
-// 渐变主题色列表（阴影，渐变1，渐变2）
+// 渐变主题色列表（主色1、主色2、阴影、渐变1、渐变2）
 export const chartColorsSearch = {
   dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],
   customed: ['#5470c6', '#91cc75', 'rgba(84, 112, 198, 0.5)', 'rgba(84, 112, 198, 0.5)', 'rgba(145, 204, 117, 0.5)'],
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
index 41637bb7..1e5974d5 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@@ -1,6 +1,6 @@
 <template>
   <n-timeline class="go-chart-configurations-timeline">
-    <n-timeline-item v-if="isCharts" type="info" :title="TimelineTitleEnum.MAPPING">
+    <n-timeline-item v-if="isCharts && dimensionsAndSource" type="info" :title="TimelineTitleEnum.MAPPING">
       <n-table striped>
         <thead>
           <tr>
@@ -70,6 +70,7 @@ import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import isObject from 'lodash/isObject'
 const { targetData } = useTargetData()
 
 const props = defineProps({
@@ -135,14 +136,20 @@ const dimensionsAndSourceHandle = () => {
   }
 }
 
-watch(() => targetData.value?.option?.dataset, (newData) => {
-  if (newData) {
+watch(() => targetData.value?.option?.dataset, (newData: {
+  source: any,
+  dimensions: any
+} | null) => {
+  if (isObject(newData)) {
     // 只有 Echarts 数据才有对应的格式
     source.value = isCharts.value ? newData.source : newData
     if (isCharts.value) {
       dimensions.value = newData.dimensions
       dimensionsAndSource.value = dimensionsAndSourceHandle()
     }
+  } else {
+    dimensionsAndSource.value = null
+    source.value = newData
   }
 }, {
   immediate: true
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index e058a199..232933d0 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@@ -74,6 +74,9 @@ $textSize: 10px;
     border: 1px solid v-bind('themeColor');
     /* 需要设置最高级，覆盖 hover 的颜色 */
     background-color: rgba(0, 0, 0, 0);
+    .list-img {
+      border:1px solid v-bind('themeColor')!important;
+    }
   }
   .select-modal,
   .item-content {