diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts index 1cdb889..fb97332 100644 --- a/src/enums/httpEnum.ts +++ b/src/enums/httpEnum.ts @@ -28,6 +28,8 @@ export enum RequestDataTypeEnum { Source = 3 } +export const RequestAJAXTypes = [RequestDataTypeEnum.AJAX, RequestDataTypeEnum.Source] + // 请求主体类型 export enum RequestContentTypeEnum { // 普通请求 diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 57fa70e..b0d2583 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -4,10 +4,12 @@ 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' +import { RequestAJAXTypes, RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' import { setOption } from '@/packages/public/chart' import { isNil } from 'lodash' +import dayjs from "dayjs"; +import { debounce } from "lodash"; // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -25,7 +27,7 @@ export const useChartDataFetch = ( ) => { const vChartRef = ref(null) let fetchInterval: any = 0 - console.log("vChartRef:",vChartRef) + console.log("vChartRef:", vChartRef) // 数据池 const { addGlobalDataInterface } = useChartDataPondFetch() @@ -41,26 +43,46 @@ export const useChartDataFetch = ( } } - const requestIntervalFn = () => { - const chartEditStore = useChartEditStore() + watch(() => targetComponent.request, () => { + if (isPreview()) return + console.log("监听到 request 更改:", targetComponent.request) + requestIntervalFn() + }, { deep: true }) - // 全局数据 - const { - requestOriginUrl, - requestIntervalUnit: globalUnit, - requestInterval: globalRequestInterval - } = toRefs(chartEditStore.getRequestGlobalConfig) + function requestIntervalFn() { // 目标组件 + const { requestDataType, } = toRefs(targetComponent.request) + clearInterval(fetchInterval) + // 非请求类型 + if (!RequestAJAXTypes.includes(requestDataType.value)) return; + + switch (requestDataType.value) { + case RequestDataTypeEnum.AJAX: + AJAXRequestIntervalFn() + break; + case RequestDataTypeEnum.Source: + SourceRequestIntervalFn() + break; + default: + break; + } + } + + function AJAXRequestIntervalFn() { + const chartEditStore = useChartEditStore() const { - requestDataType, requestUrl, requestIntervalUnit: targetUnit, requestInterval: targetInterval } = toRefs(targetComponent.request) - // 非请求类型 - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return + // 全局数据 + const { + requestOriginUrl, + requestIntervalUnit: globalUnit, + requestInterval: globalRequestInterval + } = toRefs(chartEditStore.getRequestGlobalConfig) try { // 处理地址 @@ -70,10 +92,8 @@ export const useChartDataFetch = ( const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value if (!completePath) return - clearInterval(fetchInterval) - const fetchFn = async () => { - console.log("监听到更改") + console.log("监听到更改", dayjs().format('YYYY-MM-DD HH:mm:ss')) const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { try { @@ -91,44 +111,84 @@ export const useChartDataFetch = ( } // 普通初始化与组件交互处理监听 + // 定义一个防抖的函数 + const debouncedFetch = debounce(() => { + clearInterval(fetchInterval) + // 定时时间 + const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value + // 单位 + const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value + // 开启轮询 + if (time) { + fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + } + fetchFn() + }, 500) // 500ms 后触发，可以按需调整 + watch( () => targetComponent.request.requestParams, () => { - fetchFn() + debouncedFetch() }, { immediate: true, deep: true } ) - - // 定时时间 - const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value - // 单位 - const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value - // 开启轮询 - if (time) { - fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) - } } // eslint-disable-next-line no-empty } catch (error) { - console.log(error) + console.log('AJAXRequestIntervalFn Error:', error) } } + function SourceRequestIntervalFn() { + const chartEditStore = useChartEditStore() + const { + station, + devices, + points, + requestIntervalUnit: targetUnit, + requestInterval: targetInterval + } = toRefs(targetComponent.requestSource) + + + try { + function fetchFn() { + clearInterval(fetchInterval) + console.log(station, devices, points, targetUnit, targetInterval) + } + + + watch( + () => targetComponent.requestSource, + () => { + fetchFn() + }, + { + immediate: true, + deep: true + } + ) + + } catch (error) { + console.log('SourceRequestIntervalFn Error:', error) + } + + + } + if (isPreview()) { - console.log("是否是数据池:",targetComponent.request.requestDataType === RequestDataTypeEnum.Pond) console.log(targetComponent) targetComponent.request.requestDataType === RequestDataTypeEnum.Pond ? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => { - echartsUpdateHandle(newData) - if (updateCallback) updateCallback(newData) - }) + echartsUpdateHandle(newData) + if (updateCallback) updateCallback(newData) + }) : requestIntervalFn() } else { requestIntervalFn() } - console.log("vChartRef:",vChartRef) + console.log("vChartRef:", vChartRef) return { vChartRef } -} +} \ No newline at end of file diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/index.vue index 7b2754e..c08b33d 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/index.vue @@ -1,7 +1,7 @@