fix: 解决组件数据无法更新的问题

src/packages/components/Charts/Mores/Process/index.vue

@@ -3,7 +3,7 @@
     :type="type"
     :height="h"
     :processing="processing"
-    :percentage="dataset"
+    :percentage="option.dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :rail-color="railColor"
@@ -15,16 +15,16 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{dataset}} {{unit}}
+      {{option.dataset}} {{unit}}
     </n-text>
   </n-progress>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch } from 'vue'
+import { PropType, toRefs, watch, shallowReactive } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import config from './config'
+import config, { option as configOption  } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -49,5 +49,19 @@ const {
   dataset
 } = toRefs(props.chartConfig.option)
 
-useChartDataFetch(props.chartConfig, useChartEditStore)
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  option.dataset = newData
+})
 </script>

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
+  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +9,7 @@ import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
-import config  from './config'
+import config from './config'
 import { isPreview } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -24,16 +18,16 @@ import { useChartDataFetch } from '@/hooks'
 const props = defineProps({
   themeSetting: {
     type: Object,
-    required: true,
+    required: true
   },
   themeColor: {
     type: Object,
-    required: true,
+    required: true
   },
   chartConfig: {
     type: Object as PropType<config>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 use([CanvasRenderer, GridComponent])
@@ -41,7 +35,7 @@ use([CanvasRenderer, GridComponent])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
-  value: {},
+  value: {}
 })
 
 // 渐变色处理
@@ -53,36 +47,45 @@ watch(
       // 背景颜色
       props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
       // 水球颜色
-      props.chartConfig.option.series[0].color[0].colorStops = [  
+      props.chartConfig.option.series[0].color[0].colorStops = [
         {
           offset: 0,
-          color: themeColor[0],
+          color: themeColor[0]
         },
         {
           offset: 1,
-          color: themeColor[1],
-        },
+          color: themeColor[1]
+        }
       ]
     }
     option.value = props.chartConfig.option
   },
   {
-    immediate: true,
+    immediate: true
   }
 )
 
-const updateDataset = (newData: string | number) => {
-  props.chartConfig.option.series[0].data = [parseFloat(`${newData}`).toFixed(2)]
-  option.value = props.chartConfig.option
+// 数据处理
+const dataHandle = (newData: number) => {
+  return parseFloat(newData.toFixed(2))
 }
 
+// 编辑
 watch(
   () => props.chartConfig.option.dataset,
-  newData => updateDataset(newData),
+  newData => {
+    console.log(dataHandle(newData))
+    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+    option.value = props.chartConfig.option
+  },
   {
-    immediate: true,
+    immediate: true
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  // @ts-ignore
+  option.value.series[0].data = [dataHandle(newData)]
+})
 </script>

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -48,9 +48,7 @@ const dataHandle = (newData: any) => {
 // 配置时
 watch(
   () => props.chartConfig.option.dataset,
-  newData => {
-    dataHandle(newData)
-  },
+  newData => dataHandle(newData),
   {
     immediate: true
   }

src/packages/components/Decorates/Mores/Number/config.ts

@@ -4,12 +4,13 @@ import { NumberConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  from: 50000,
-  to: 100000,
+  // 数据说明
+  dataset: 100000,
+  from: 0,
   dur: 3,
   precision: 0,
   showSeparator: true,
-  numberSize: 24,
+  numberSize: 34,
   numberColor: '#4a9ef8',
   prefixText: '￥',
   prefixColor: '#4a9ef8',

src/packages/components/Decorates/Mores/Number/config.vue

@@ -1,13 +1,6 @@
 <template>
   <CollapseItem name="内容" :expanded="true">
     <SettingItemBox name="数值">
-      <SettingItem name="起始值">
-        <n-input-number
-          v-model:value="optionData.from"
-          size="small"
-          :min="0"
-        ></n-input-number>
-      </SettingItem>
       <SettingItem name="终点值">
         <n-input-number
           v-model:value="optionData.to"
@@ -22,12 +15,6 @@
           :min="1"
         ></n-input-number>
       </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.showSeparator" size="small" />
-          <n-text>展示分割符</n-text>
-        </n-space>
-      </SettingItem>
       <SettingItem name="精度">
         <n-input-number
           v-model:value="optionData.precision"
@@ -35,6 +22,12 @@
           :min="0"
         ></n-input-number>
       </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showSeparator" size="small" />
+          <n-text>展示分割符</n-text>
+        </n-space>
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="数值">

src/packages/components/Decorates/Mores/Number/index.vue

@@ -6,7 +6,7 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation :from="option.from" :to="option.to" :duration="dur * 1000" :show-separator="showSeparator"
+      <n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
         :precision="precision"></n-number-animation>
     </span>
     <template #suffix>
@@ -31,7 +31,7 @@ const props = defineProps({
 })
 const option = reactive({
   from: 0,
-  to: 0,
+  dataset: 0,
 })
 const { w, h } = toRefs(props.chartConfig.attr)
 let {
@@ -48,8 +48,8 @@ let {
 
 const updateNumber = (newData: number) => {
   // 原来的目标值作为新的数字动画的起始值
-  option.from = option.to
-  option.to = newData
+  option.from = option.dataset
+  option.dataset = newData
 }
 
 watch(
@@ -60,14 +60,15 @@ watch(
 )
 
 watch(
-  () => props.chartConfig.option.to,
+  () => props.chartConfig.option.dataset,
   () => {
-    option.to = props.chartConfig.option.to
+    option.dataset = props.chartConfig.option.dataset
   }, { immediate: true }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
 </script>
+
 <style lang="scss" scoped>
 @include go('decorates-number') {
   display: flex;

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -24,6 +24,7 @@ import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption  } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -48,7 +49,7 @@ const {
 } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
-  dataset: ''
+  dataset: configOption.dataset
 })
 
 // 手动更新
@@ -62,7 +63,7 @@ watch(
 )
 
 // 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   option.dataset = newData
 })
 </script>

src/packages/components/Informations/Texts/TextGradient/index.vue

@@ -10,6 +10,7 @@ import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption  } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -19,7 +20,7 @@ const props = defineProps({
 })
 
 const option = shallowReactive({
-  dataset: ''
+  dataset: configOption.dataset
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
@@ -30,8 +31,6 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = newData
-  }, {
-    immediate: true
   }
 )
 

src/packages/components/Tables/Tables/TableScrollBoard/index.vue

@@ -308,7 +308,10 @@ watch(
 )
 
 // 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
-useChartDataFetch(props.chartConfig, useChartEditStore)
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData
+  onRestart()
+})
 
 onUnmounted(() => {
   stopAnimation()