perf: 修改数据展示为动态获取

src/hooks/useChartDataFetch.hook.ts

@@ -45,14 +45,15 @@ export const useChartDataFetch = (
         const res: any = await http(requestHttpType.value)(completePath || '', {})
         if (res.data) {
           try {
+            const filter = targetComponent.filter
             // 更新回调函数
             if (updateCallback) {
-              updateCallback(res.data)
+              updateCallback(newFunctionHandle(res.data, filter))
             } else {
               // eCharts 组件配合 vChart 库更新方式
               if (chartFrame === ChartFrameEnum.ECHARTS) {
                 if (vChartRef.value) {
-                  const filter = targetComponent.filter
+                  
                   vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
                 }
               }

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

@@ -15,7 +15,7 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{option.dataset}} {{unit}}
+      {{ option.dataset }} {{ unit }}
     </n-text>
   </n-progress>
 </template>
@@ -24,7 +24,8 @@
 import { PropType, toRefs, watch, shallowReactive } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import config, { option as configOption  } from './config'
+import config, { option as configOption } from './config'
+import { toNumber } from '@/utils'
 
 const props = defineProps({
   chartConfig: {
@@ -57,11 +58,11 @@ const option = shallowReactive({
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
-    option.dataset = newData
+    option.dataset = toNumber(newData, 2)
   }
 )
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
-  option.dataset = newData
+  option.dataset = toNumber(newData, 2)
 })
 </script>

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

@@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
 import config from './config'
-import { isPreview } from '@/utils'
+import { isPreview, isString } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -66,7 +66,8 @@ watch(
 )
 
 // 数据处理
-const dataHandle = (newData: number) => {
+const dataHandle = (newData: number | string) => {
+  newData = isString(newData) ? parseFloat(newData) : newData
   return parseFloat(newData.toFixed(2))
 }
 

src/utils/type.ts

@@ -1,3 +1,5 @@
+import isObject from 'lodash/isObject'
+
 export function isString(p: any): p is string {
   return typeof p === 'string'
 }
@@ -21,3 +23,11 @@ export function isNull(p: any): p is null {
 export function isArray(p: any): p is [] {
   return Array.isArray(p)
 }
+
+export const toNumber = (number: number | string, toFixedNumber = 2) => {
+  return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number
+}
+
+export const toString = (str: any) => {
+  return isNumber(str) ? `${str}` : (isObject(str) ? JSON.stringify(str) : str)
+}

src/utils/utils.ts

@@ -204,7 +204,7 @@ export const newFunctionHandle = (
     if (!funcStr) return data
     const fn = new Function('data', funcStr)
     const fnRes = fn( cloneDeep(data))
-    const resHandle = toString && isString(fnRes) ? JSON.stringify(fnRes) : fnRes
+    const resHandle = toString && isString(fnRes) ? fnRes : JSON.stringify(fnRes) 
     // 成功回调
     successCallBack && successCallBack(resHandle)
     return resHandle

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

@@ -90,6 +90,7 @@ import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
+import { toString } from '@/utils'
 
 const { targetData } = useTargetData()
 const props = defineProps({
@@ -120,11 +121,6 @@ const filterShow = computed(() => {
   return targetData.value.data.requestDataType === RequestDataTypeEnum.AJAX
 })
 
-// 字符串处理
-const dataToString = (str: any) => {
-  return isObject(str) ? JSON.stringify(str) : str
-}
-
 // 是图表类型
 const isCharts = computed(() => {
   return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS
@@ -178,7 +174,7 @@ const filterRes = (data: any) => {
     if(targetData.value.filter) {
       const fn = new Function('data', targetData.value.filter)
       const res = fn(cloneDeep(data))
-      return dataToString(res)
+      return toString(res)
     }
     return data
   } catch (error) {

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

@@ -55,7 +55,6 @@
         <n-space justify="space-between">
           <div>
             <n-space vertical>
-              <n-text depth="3">// 数据参数 => data </n-text>
               <n-tag type="info">
                 <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data)&nbsp;&nbsp;{
               </n-tag>
@@ -69,11 +68,7 @@
               <div class="editor-data-show">
                 <n-space>
                   <n-text depth="3">目标数据：</n-text>
-                  <n-code
+                  <n-code :code="toString(sourceData)" language="typescript" :word-wrap="true"></n-code>
-                    :code="dataToString(targetData.option.dataset)"
-                    language="typescript"
-                    :word-wrap="true"
-                  ></n-code>
                 </n-space>
               </div>
               <div class="editor-data-show">
@@ -109,15 +104,19 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, toRefs } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { RequestHttpEnum, RequestDataTypeEnum, ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
-import { goDialog, isString } from '@/utils'
+import { goDialog, toString } from '@/utils'
+import { http } from '@/api/http'
 import cloneDeep from 'lodash/cloneDeep'
 
 const { PencilIcon, TrashIcon, FilterIcon, DocumentTextIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
+const { requestDataType } = toRefs(targetData.value.data)
+const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 
 // 受控弹窗
 const showModal = ref(false)
@@ -125,17 +124,35 @@ const showModal = ref(false)
 const filter = ref(targetData.value.filter || `return data`)
 // 过滤错误标识
 const errorFlag = ref(false)
+// 目标静态/接口数据
+const sourceData = ref<any>('')
 
-// 字符串处理
+// 动态获取数据
-const dataToString = (str: any) => {
+const fetchTargetData = async () => {
-  return isString(str) ? str : JSON.stringify(str)
+  try {
+    const { requestUrl, requestHttpType } = targetData.value.data
+    if (!requestUrl) {
+      window['$message'].warning('请求参数不正确，请检查！')
+      sourceData.value = '请求参数不正确，请检查！'
+      return
+    }
+    const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
+    const res = await http(requestHttpType)(completePath || '', {})
+    if (res.status === ResultEnum.SUCCESS) {
+      sourceData.value = res.data
+      console.log(sourceData.value)
+      return
+    }
+  } catch (error) {
+    window['$message'].warning('数据异常，请检查接口数据！')
+  }
 }
 
 // 过滤结果
 const filterRes = computed(() => {
   try {
     const fn = new Function('data', filter.value)
-    const res = fn(cloneDeep(targetData.value.option.dataset))
+    const res = fn(cloneDeep(sourceData.value))
     errorFlag.value = false
     return JSON.stringify(res)
   } catch (error) {
@@ -173,6 +190,13 @@ const saveFilter = () => {
   targetData.value.filter = filter.value
   closeFilter()
 }
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) fetchTargetData()
+  }
+)
 </script>
 
 <style lang="scss" scoped>