From 8c201da584b06802bcc1c91bc9d9609d51610d96 Mon Sep 17 00:00:00 2001 From: betaqi <3188864257@qq.com> Date: Wed, 10 Sep 2025 19:09:33 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20[=E6=95=B0=E6=8D=AE=E6=BA=90](=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E8=AF=B7=E6=B1=82)=E5=88=87=E6=8D=A2=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E6=96=B9=E5=BC=8F=E5=AE=9A=E6=97=B6=E5=99=A8=E6=9C=AA?= =?UTF-8?q?=E6=B8=85=E9=99=A4&=E9=85=8D=E7=BD=AE=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=90=8E=E4=B8=8D=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/enums/httpEnum.ts | 2 + src/hooks/useChartDataFetch.hook.ts | 126 +++++++++++++----- .../RequestDataSourceConfig/index.vue | 37 ++--- 3 files changed, 117 insertions(+), 48 deletions(-) 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 @@