useChartDataPondFetch.hook.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { toRaw } from 'vue'
  2. import { customizeHttp } from '@/api/http'
  3. import { CreateComponentType } from '@/packages/index.d'
  4. import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  5. import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
  6. import { newFunctionHandle } from '@/utils'
  7. // 获取类型
  8. type ChartEditStoreType = typeof useChartEditStore
  9. // 数据池存储的数据类型
  10. type DataPondMapType = {
  11. updateCallback: (...args: any) => any
  12. filter?: string | undefined
  13. }
  14. // 数据池 Map 中请求对应 callback
  15. const mittDataPondMap = new Map<string, DataPondMapType[]>()
  16. // 创建单个数据项轮询接口
  17. const newPondItemInterval = (
  18. requestGlobalConfig: RequestGlobalConfigType,
  19. requestDataPondItem: RequestDataPondItemType,
  20. dataPondMapItem?: DataPondMapType[]
  21. ) => {
  22. if (!dataPondMapItem) return
  23. // 请求
  24. const fetchFn = async () => {
  25. try {
  26. const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
  27. if (res) {
  28. try {
  29. // 遍历更新回调函数
  30. dataPondMapItem.forEach(item => {
  31. item.updateCallback(newFunctionHandle(res?.data, res, item.filter))
  32. })
  33. } catch (error) {
  34. console.error(error)
  35. return error
  36. }
  37. }
  38. } catch (error) {
  39. return error
  40. }
  41. }
  42. // 立即调用
  43. fetchFn()
  44. }
  45. /**
  46. * 数据池接口处理
  47. */
  48. export const useChartDataPondFetch = () => {
  49. // 新增全局接口
  50. const addGlobalDataInterface = (
  51. targetComponent: CreateComponentType,
  52. useChartEditStore: ChartEditStoreType,
  53. updateCallback: (...args: any) => any
  54. ) => {
  55. const chartEditStore = useChartEditStore()
  56. const { requestDataPond } = chartEditStore.getRequestGlobalConfig
  57. // 组件对应的数据池 Id
  58. const requestDataPondId = targetComponent.request.requestDataPondId as string
  59. // 新增数据项
  60. const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || []
  61. mittPondIdArr.push({
  62. updateCallback: updateCallback,
  63. filter: targetComponent.filter
  64. })
  65. mittDataPondMap.set(requestDataPondId, mittPondIdArr)
  66. }
  67. // 初始化数据池
  68. const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
  69. const { requestDataPond } = requestGlobalConfig
  70. // 根据 mapId 查找对应的数据池配置
  71. for (let pondKey of mittDataPondMap.keys()) {
  72. const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
  73. if (requestDataPondItem) {
  74. newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
  75. }
  76. }
  77. }
  78. return {
  79. addGlobalDataInterface,
  80. initDataPond
  81. }
  82. }