go-view/src/hooks/useChartDataPondFetch.hook.ts
2022-11-15 21:25:35 +08:00

94 lines
2.7 KiB
TypeScript

import { toRaw } from 'vue'
import { customizeHttp } from '@/api/http'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
import { newFunctionHandle } from '@/utils'
// 获取类型
type ChartEditStoreType = typeof useChartEditStore
// 数据池存储的数据类型
type DataPondMapType = {
updateCallback: (...args: any) => any
filter?: string | undefined
}
// 数据池 Map 中请求对应 callback
const mittDataPondMap = new Map<string, DataPondMapType[]>()
// 创建单个数据项轮询接口
const newPondItemInterval = (
requestGlobalConfig: RequestGlobalConfigType,
requestDataPondItem: RequestDataPondItemType,
dataPondMapItem?: DataPondMapType[]
) => {
if (!dataPondMapItem) return
// 请求
const fetchFn = async () => {
try {
const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
if (res) {
try {
// 遍历更新回调函数
dataPondMapItem.forEach(item => {
item.updateCallback(newFunctionHandle(res?.data, res, item.filter))
})
} catch (error) {
console.error(error)
return error
}
}
} catch (error) {
return error
}
}
// 立即调用
fetchFn()
}
/**
* 数据池接口处理
*/
export const useChartDataPondFetch = () => {
// 新增全局接口
const addGlobalDataInterface = (
targetComponent: CreateComponentType,
useChartEditStore: ChartEditStoreType,
updateCallback: (...args: any) => any
) => {
const chartEditStore = useChartEditStore()
const { requestDataPond } = chartEditStore.getRequestGlobalConfig
// 组件对应的数据池 Id
const requestDataPondId = '111' || (targetComponent.request.requestDataPondId as string)
// 新增数据项
const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || []
mittPondIdArr.push({
updateCallback: updateCallback,
filter: targetComponent.filter
})
mittDataPondMap.set(requestDataPondId, mittPondIdArr)
}
// 初始化数据池
const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
const { requestDataPond } = requestGlobalConfig
// 根据 mapId 查找对应的数据池配置
for (let pondKey of mittDataPondMap.keys()) {
const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
if (requestDataPondItem) {
newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
}
}
}
return {
addGlobalDataInterface,
initDataPond
}
}