diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 5ecfe3dd..b5ab7ef8 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -2,5 +2,6 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useChartDataPondFetch.hook' export * from '@/hooks/useLifeHandler.hook' export * from '@/hooks/useLang.hook' \ No newline at end of file diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index df48ae16..1c96c301 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,6 +1,7 @@ import { ref, toRefs, toRaw } from 'vue' import type VChart from 'vue-echarts' import { customizeHttp } from '@/api/http' +import { useChartDataPondFetch } from '@/hooks/' import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' @@ -23,6 +24,22 @@ export const useChartDataFetch = ( const vChartRef = ref(null) let fetchInterval: any = 0 + // 数据池 + const { addGlobalDataInterface } = useChartDataPondFetch() + const { requestDataPondId } = toRefs(targetComponent.request) + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + + // eCharts 组件配合 vChart 库更新方式 + const echartsUpdateHandle = (dataset: any) => { + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: dataset }) + } + } + } + const requestIntervalFn = () => { const chartEditStore = useChartEditStore() @@ -41,9 +58,6 @@ export const useChartDataFetch = ( requestInterval: targetInterval } = toRefs(targetComponent.request) - // 组件类型 - const { chartFrame } = targetComponent.chartConfig - // 非请求类型 if (requestDataType.value !== RequestDataTypeEnum.AJAX) return @@ -58,16 +72,11 @@ export const useChartDataFetch = ( clearInterval(fetchInterval) const fetchFn = async () => { - const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { try { const filter = targetComponent.filter - // eCharts 组件配合 vChart 库更新方式 - if (chartFrame === ChartFrameEnum.ECHARTS) { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: newFunctionHandle(res?.data, res, filter) }) - } - } + echartsUpdateHandle(newFunctionHandle(res?.data, res, filter)) // 更新回调函数 if (updateCallback) { updateCallback(newFunctionHandle(res?.data, res, filter)) @@ -94,6 +103,10 @@ export const useChartDataFetch = ( } } - isPreview() && requestIntervalFn() + if (isPreview()) { + requestDataPondId + ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) + : requestIntervalFn() + } return { vChartRef } } diff --git a/src/hooks/useChartDataPondFetch.hook.ts b/src/hooks/useChartDataPondFetch.hook.ts new file mode 100644 index 00000000..2126384b --- /dev/null +++ b/src/hooks/useChartDataPondFetch.hook.ts @@ -0,0 +1,93 @@ +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() + +// 创建单个数据项轮询接口 +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 + } +} diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 4d0232cb..78927f70 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -150,16 +150,27 @@ type RequestPublicConfigType = { requestParams: RequestParams } +// 数据池项类型 +export type RequestDataPondItemType = { + dataPondId: string, + dataPondName: string, + dataPondRequestConfig: RequestConfigType +} + // 全局的图表请求配置 export interface RequestGlobalConfigType extends RequestPublicConfigType { // 组件定制轮询时间 requestInterval: number // 请求源地址 requestOriginUrl?: string + // 公共数据池 + requestDataPond: RequestDataPondItemType[] } // 单个图表请求配置 export interface RequestConfigType extends RequestPublicConfigType { + // 所选全局数据池的对应 id + requestDataPondId?: string // 组件定制轮询时间 requestInterval?: number // 获取数据的方式 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index d6f8ddf3..16a4eda4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -113,6 +113,7 @@ export const useChartEditStore = defineStore({ }, // 数据请求处理（需存储给后端） requestGlobalConfig: { + requestDataPond: [], requestOriginUrl: '', requestInterval: requestInterval, requestIntervalUnit: requestIntervalUnit, diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 9d3654ae..9e27f94f 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -125,7 +125,7 @@ const sendHandle = async () => { if (!targetData.value?.request) return loading.value = true try { - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) loading.value = false if (res) { if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index cea1e1c8..a0d76216 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -128,7 +128,7 @@ const sourceData = ref('') // 动态获取数据 const fetchTargetData = async () => { try { - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { sourceData.value = res return diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 9bb0cbec..d4354055 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -10,7 +10,7 @@ ...getTransformStyle(item.styles), ...getStatusStyle(item.status), ...getBlendModeStyle(item.styles) as any - } as any" + }" >