diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 419f3f24..485d433a 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -3,5 +3,6 @@ export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' export * from '@/hooks/useChartDataFetch.hook' export * from '@/hooks/useSystemInit.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..50792971 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,11 @@ export const useChartDataFetch = ( } } - isPreview() && requestIntervalFn() + if (isPreview()) { + // 判断是否有数据池对应 id + 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/packages/components/Charts/Bars/CapsuleChart/index.vue b/src/packages/components/Charts/Bars/CapsuleChart/index.vue index 4a0ed72f..87971d01 100644 --- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue +++ b/src/packages/components/Charts/Bars/CapsuleChart/index.vue @@ -2,7 +2,7 @@
import { onMounted, watch, reactive, PropType } from 'vue' -import merge from 'lodash/merge' -import cloneDeep from 'lodash/cloneDeep' import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import config, { option } from './config' +import cloneDeep from 'lodash/cloneDeep' type DataProps = { name: string | number @@ -114,12 +113,11 @@ watch( const calcData = (data: any) => { mergeConfig(props.chartConfig.option) - calcCapsuleLengthAndLabelData() } const mergeConfig = (data: any) => { - state.mergedConfig = merge(cloneDeep(state.defaultConfig), data || {}) + state.mergedConfig = cloneDeep(data || {}) } // 数据解析 diff --git a/src/packages/components/Tables/Tables/TableList/index.vue b/src/packages/components/Tables/Tables/TableList/index.vue index 5fd3e02d..24324ec6 100644 --- a/src/packages/components/Tables/Tables/TableList/index.vue +++ b/src/packages/components/Tables/Tables/TableList/index.vue @@ -62,7 +62,7 @@ const status = reactive({ const calcRowsData = () => { let { dataset, rowNum, sort } = status.mergedConfig // @ts-ignore - sort && dataset.sort(({ value: a }, { value: b }) => { + sort &&dataset.sort(({ value: a }, { value: b } ) => { if (a > b) return -1 if (a < b) return 1 if (a === b) return 0 @@ -94,6 +94,7 @@ const calcHeights = (onresize = false) => { const { rowNum, dataset } = status.mergedConfig const avgHeight = h.value / rowNum status.avgHeight = avgHeight + if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight) } @@ -131,12 +132,17 @@ const stopAnimation = () => { const onRestart = async () => { try { if (!status.mergedConfig) return + let { dataset, rowNum, sort } = status.mergedConfig stopAnimation() calcRowsData() - calcHeights(true) - animation(true) + let flag = true + if (dataset.length <= rowNum) { + flag=false + } + calcHeights(flag) + animation(flag) } catch (error) { - console.log(error) + console.error(error) } } diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index db5f2433..62473e4c 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -185,16 +185,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 47d04044..04dcd3cf 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -131,6 +131,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..61d94101 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -102,12 +102,11 @@ diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts index d3b06a95..3a1633a0 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -21,6 +21,11 @@ const useSyncUpdateHandle = () => { // 开启侦听 const use = () => { + // // 1、定时同步数据 + // timer = setInterval(() => { + // // 窗口激活并且处于工作台 + // document.hasFocus() && syncData() + // }, editToJsonInterval) // // 1、定时同步数据 // timer = setInterval(() => { // // 窗口激活并且处于工作台 @@ -35,6 +40,7 @@ const useSyncUpdateHandle = () => { // 关闭侦听 const unUse = () => { + // clearInterval(timer) // clearInterval(timer) removeEventListener(SavePageEnum.JSON, updateFn) removeEventListener('blur', syncData) 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" + }" >