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

src/api/mock/index.ts

@@ -4,11 +4,12 @@ import { RequestHttpEnum } from '@/enums/httpEnum'
 
 // 单个X数据
 export const chartDataUrl = '/mock/chartData'
-export const rankListUrl = '/mock/rankList'
 export const numberFloatUrl = '/mock/number/float'
 export const numberIntUrl = '/mock/number/int'
 export const textUrl = '/mock/text'
 export const imageUrl = '/mock/image'
+export const rankListUrl = '/mock/rankList'
+export const scrollBoardUrl = '/mock/scrollBoard'
 
 const mockObject: MockMethod[] = [
   {
@@ -16,33 +17,38 @@ const mockObject: MockMethod[] = [
     // url: /\/mock\/mockData(|\?\S*)$/,
     url: chartDataUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchMockData,
-  },
-  {
-    url: rankListUrl,
-    method: RequestHttpEnum.GET,
-    response: () => test.fetchRankList,
+    response: () => test.fetchMockData
   },
   {
     url: numberFloatUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchNumberFloat,
+    response: () => test.fetchNumberFloat
   },
   {
     url: numberIntUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchNumberInt,
+    response: () => test.fetchNumberInt
   },
   {
     url: textUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchText,
+    response: () => test.fetchText
   },
   {
     url: imageUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchImage(Math.round(Math.random()*10)),
+    response: () => test.fetchImage(Math.round(Math.random() * 10))
   },
+  {
+    url: rankListUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchRankList
+  },
+  {
+    url: scrollBoardUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchScrollBoard
+  }
 ]
 
 export default mockObject

src/api/mock/test.mock.ts

@@ -10,35 +10,35 @@ export default {
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
         },
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
         },
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
         },
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
         },
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
         },
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
-        },
-      ],
-    },
+          'dataTwo|100-900': 3
+        }
+      ]
+    }
   },
   // 排名列表
   fetchRankList: {
@@ -58,32 +58,50 @@ export default {
       { name: '@name', 'value|100-900': 5 },
       { name: '@name', 'value|100-900': 5 },
       { name: '@name', 'value|100-900': 5 },
-      { name: '@name', 'value|100-900': 5 },
-    ],
+      { name: '@name', 'value|100-900': 5 }
+    ]
+  },
+  // 轮播表格
+  fetchScrollBoard: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: [
+      ['行1列1', '行1列2', '1'],
+      ['行2列1', '行2列2', '2'],
+      ['行3列1', '行3列2', '3'],
+      ['行4列1', '行4列2', '4'],
+      ['行5列1', '行5列2', '5'],
+      ['行6列1', '行6列2', '6'],
+      ['行7列1', '行7列2', '行7列3'],
+      ['行8列1', '行8列2', '行8列3'],
+      ['行9列1', '行9列2', '行9列3'],
+      ['行10列1', '行10列2', '行10列3']
+    ]
   },
   // 获取数字
   fetchNumberFloat: {
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: '@float(0, 0.99, 1, 2)',
+    data: '@float(0, 0.99, 1, 4)'
   },
   fetchNumberInt: {
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: '@integer(0, 100)',
+    data: '@integer(0, 100)'
   },
   fetchText: {
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: '@paragraph(1, 10)',
+    data: '@paragraph(1, 10)'
   },
   fetchImage: (num: number) => ({
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: `https://robohash.org/${num}`,
-  }),
+    data: `https://robohash.org/${num}`
+  })
 }

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()

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -62,7 +62,7 @@ import { ref, toRefs } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
-import { chartDataUrl, rankListUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
+import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
@@ -81,9 +81,6 @@ const apiList = [
   {
     value: `【图表】${ chartDataUrl }`
   },
-  {
-    value: `【表格】${ rankListUrl }`
-  },
   {
     value: `【文本】${ textUrl }`
   },
@@ -95,7 +92,14 @@ const apiList = [
   },
   {
     value: `【图片地址】${ imageUrl }`
-  }
+  },
+  {
+    value: `【排名列表】${ rankListUrl }`
+  },
+  {
+    value: `【滚动表格】${ scrollBoardUrl }`
+  },
+    
 ]
 
 // 选项