diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 9f1e8865..03f64dae 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,7 +1,7 @@ -import { ref, toRefs, watchEffect, nextTick } from 'vue' +import { ref, toRefs } from 'vue' import type VChart from 'vue-echarts' import { http } from '@/api/http' -import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d' +import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview } from '@/utils' @@ -17,60 +17,64 @@ type ChartEditStoreType = typeof useChartEditStore */ export const useChartDataFetch = ( targetComponent: CreateComponentType, - useChartEditStore: ChartEditStoreType, + useChartEditStore: ChartEditStoreType, updateCallback?: (...args: any) => any ) => { const vChartRef = ref(null) let fetchInterval: any = 0 - isPreview() && - watchEffect(() => { - clearInterval(fetchInterval) + const requestInterval = () => { + const chartEditStore = useChartEditStore() + const { requestOriginUrl, requestInterval } = toRefs( + chartEditStore.getRequestGlobalConfig + ) + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + // 请求配置 + const { requestDataType, requestHttpType, requestUrl } = toRefs( + targetComponent.data + ) + // 非请求类型 + if (requestDataType.value !== RequestDataTypeEnum.AJAX) return + // 处理地址 + if (requestUrl?.value && requestInterval.value > 0) { + // requestOriginUrl 允许为空 + const completePath = + requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return - const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs( - chartEditStore.getRequestGlobalConfig - ) - const { requestDataType, requestHttpType, requestUrl } = toRefs( - targetComponent.data - ) - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - // 处理地址 - if (requestUrl?.value && requestInterval.value > 0) { - // requestOriginUrl 允许为空 - const completePath = - requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return - - fetchInterval = setInterval(async () => { - const res:any = await http(requestHttpType.value)(completePath || '', {}) - if (res.data) { - // 是否是 Echarts 组件 - const isECharts = - targetComponent.chartConfig.package === - PackagesCategoryEnum.CHARTS - - try { - if (isECharts && vChartRef?.value?.setOption) { - nextTick(() => { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: res.data }) - } - }) - } else { - // 若遵守规范使用 dataset 作为数据 key,则会自动赋值数据 - targetComponent.option.dataset && (targetComponent.option.dataset = res.data) + const fetchFn = async () => { + const res: any = await http(requestHttpType.value)(completePath || '', {}) + if (res.data) { + try { + // echarts 组件更新方式 + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: res.data }) } - if (updateCallback) { - updateCallback(res.data) - } - } catch (error) { - console.error(error) + } else { + // 若遵守规范使用 dataset 作为数据 key,则会自动赋值数据 + targetComponent.option.dataset && (targetComponent.option.dataset = res.data) } + // 更新回调函数 + if (updateCallback) { + updateCallback(res.data) + } + } catch (error) { + console.error(error) } - }, requestInterval.value * 1000) + } } - }) + + // 立即调用 + fetchFn() + // 开启定时 + setInterval(fetchFn, requestInterval.value * 1000) + } + } + + isPreview() && requestInterval() + return { vChartRef } } diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue index cc2f0a47..b5170486 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.vue +++ b/src/packages/components/Informations/Texts/TextCommon/index.vue @@ -15,19 +15,21 @@ background-color:${backgroundColor}`" > - {{ dataset }} + {{ option.dataset }}