Merge branch 'ft' into 'main_dev'

perf(src/hooks/): 优化自定义下拉选择器和图表交互，接口请求多次

See merge request yunteng/thingskit-view!101

+/**
+ * 重写select下拉框联动
+ */
+import {toRaw, toRefs} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import {customRequest} from "@/api/external/customRequest";
+import {useFilterFn} from "@/hooks/external/useFilterFn";
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+    chartConfig: CreateComponentType,
+    useChartEditStore: ChartEditStoreType,
+    param: { [T: string]: any },
+    interactEventOn: string
+) => {
+    const chartEditStore = useChartEditStore()
+    const {interactEvents} = chartConfig.events
+    const fnOnEvent = interactEvents.filter(item => {
+        return item.interactOn === interactEventOn
+    })
+
+    if (fnOnEvent.length === 0) return
+    fnOnEvent.forEach(async (item) => {
+        const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+        if (index === -1) return
+        const {Params, Header} = toRefs(chartEditStore.componentList[index].request.requestParams)
+        Object.keys(item.interactFn).forEach(key => {
+            if (Params.value[key]) {
+                Params.value[key] = param[item.interactFn[key]]
+            }
+            if (Header.value[key]) {
+                Header.value[key] = param[item.interactFn[key]]
+            }
+        })
+        const res = await customRequest(toRaw(chartEditStore.componentList[index].request))
+        if (res) {
+            try {
+                const filter = chartEditStore.componentList[index].filter
+                const {value} = useFilterFn(filter, res)
+                if (!value) return
+                chartEditStore.componentList[index].option.dataset = value
+            } finally { 
+                console.log
+            }
+        }
+    })
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+// export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+// }

 /**
  * 重写select下拉框联动
  */
-import {toRaw, toRefs} from 'vue'
+import {toRefs} from 'vue'
 import {CreateComponentType} from '@/packages/index.d'
 import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
-import {customRequest} from "@/api/external/customRequest";
-import {useFilterFn} from "@/hooks/external/useFilterFn";
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -36,21 +34,10 @@ export const useChartInteract = (
                 Header.value[key] = param[item.interactFn[key]]
             }
         })
-        const res = await customRequest(toRaw(chartEditStore.componentList[index].request))
-        if (res) {
-            try {
-                const filter = chartEditStore.componentList[index].filter
-                const {value} = useFilterFn(filter, res)
-                if (!value) return
-                chartEditStore.componentList[index].option.dataset = value
-            } finally { 
-                console.log
-            }
-        }
     })
 }
 
 // 联动事件触发的 type 变更时，清除当前绑定内容
-export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+// export const clearInteractEvent = (chartConfig: CreateComponentType) => {
 
-}
+// }

@@ -54,6 +54,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe
 
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
+const chartEditStore = useChartEditStore()
+
 const replaceMergeArr = ref<string[]>()
 
 const option = computed(() => {
@@ -195,7 +197,7 @@ watch(
 )
 
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData:SocketReceiveMessageType) => {
+const updateVChart =async (newData:SocketReceiveMessageType) => {
   //区分是普通请求还是ws请求
   if (!isObject(newData) || !('dimensions' in newData)) {
     const { data } = newData
@@ -207,26 +209,25 @@ const updateVChart = (newData:SocketReceiveMessageType) => {
       }
     })
   } else {
-    //异步更新，同步更新会造成联动组件控制，图表不及时更新
-    new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(
-          vChartRef.value?.setOption(
-            {
-              ...option.value,
-              dataset: newData
-            },
-            {
-              notMerge: true
-            }
-          )
-        )
-      }, 100)
+     //异步更新，同步更新会造成联动组件控制，图表不及时更新
+     await nextTick().then(()=>{
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+           dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
     })
   }
 }
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+  const index = chartEditStore.fetchTargetIndex(props.chartConfig.id)
+  if (index === -1) return
+  chartEditStore.componentList[index].option.dataset = newData
   updateVChart(newData)
 })
 

@@ -54,6 +54,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
+const chartEditStore = useChartEditStore()
+
 const replaceMergeArr = ref<string[]>()
 
 const option = computed(() => {
@@ -194,7 +196,7 @@ watch(
 )
 
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData:SocketReceiveMessageType) => {
+const updateVChart =async (newData:SocketReceiveMessageType) => {
   //区分是普通请求还是ws请求
   if (!isObject(newData) || !('dimensions' in newData)) {
     const { data } = newData
@@ -207,25 +209,24 @@ const updateVChart = (newData:SocketReceiveMessageType) => {
     })
   } else {
     //异步更新，同步更新会造成联动组件控制，图表不及时更新
-    new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(
-          vChartRef.value?.setOption(
-            {
-              ...option.value,
-              dataset: newData
-            },
-            {
-              notMerge: true
-            }
-          )
-        )
-      }, 100)
+    await nextTick().then(()=>{
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+           dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
     })
   }
 }
 
 const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
+   const index = chartEditStore.fetchTargetIndex(props.chartConfig.id)
+  if (index === -1) return
+  chartEditStore.componentList[index].option.dataset = newData
   updateVChart(newData)
 })
 

@@ -226,7 +226,7 @@ watch(
 )
 
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData:SocketReceiveMessageType) => {
+const updateVChart =async (newData:SocketReceiveMessageType) => {
   //区分是普通请求还是ws请求
   if (!isObject(newData) || !('dimensions' in newData)) {
     const { data } = newData
@@ -239,25 +239,24 @@ const updateVChart = (newData:SocketReceiveMessageType) => {
     })
   } else {
     //异步更新，同步更新会造成联动组件控制，图表不及时更新
-    new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(
-          vChartRef.value?.setOption(
-            {
-              ...option.value,
-              dataset: newData
-            },
-            {
-              notMerge: true
-            }
-          )
-        )
-      }, 100)
+    await nextTick().then(()=>{
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+           dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
     })
   }
 }
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+  const index = chartEditStore.fetchTargetIndex(props.chartConfig.id)
+  if (index === -1) return
+  chartEditStore.componentList[index].option.dataset = newData
   updateVChart(newData)
 })
 

@@ -15,7 +15,7 @@ import { PropType, toRefs, shallowReactive, watch ,ref,computed} from 'vue'
 import dayjs, {ManipulateType} from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
+import { useChartInteract } from '@/hooks/external/useChartDateInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';