fix: [数据源](动态请求)切换请求方式定时器未清除&配置修改后不同步

src/enums/httpEnum.ts

@@ -28,6 +28,8 @@ export enum RequestDataTypeEnum {
   Source = 3
 }
 
+export const RequestAJAXTypes = [RequestDataTypeEnum.AJAX, RequestDataTypeEnum.Source]
+
 // 请求主体类型
 export enum RequestContentTypeEnum {
   // 普通请求

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<typeof VChart | null>(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 = () => {
+  watch(() => targetComponent.request, () => {
-    const chartEditStore = useChartEditStore()
+    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)
+        echartsUpdateHandle(newData)
-          if (updateCallback) updateCallback(newData)
+        if (updateCallback) updateCallback(newData)
-        })
+      })
       : requestIntervalFn()
   } else {
     requestIntervalFn()
   }
-  console.log("vChartRef:",vChartRef)
+  console.log("vChartRef:", vChartRef)
   return { vChartRef }
-}
+}

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/index.vue

@@ -1,7 +1,7 @@
 <template>
   <setting-item-box
     :itemRightStyle="{
-      gridTemplateColumns: '3fr 3fr'
+      gridTemplateColumns: '3fr 3fr 1.5fr'
     }"
     style="padding-right: 25px"
   >
@@ -33,6 +33,21 @@
         @update:value="handleUpdateValue"
       />
     </setting-item>
+    <setting-item name="更新间隔,为0只会初始化">
+      <n-input-group>
+        <n-input-number
+          v-model:value.trim="targetDataSourceRequest.requestInterval"
+          placeholder="请输入数字"
+          min="0"
+          :show-button="false"
+        />
+        <n-select
+          class="select-time-options"
+          v-model:value="targetDataSourceRequest.requestIntervalUnit"
+          :options="selectTimeOptions"
+        />
+      </n-input-group>
+    </setting-item>
   </setting-item-box>
   <setting-item-box
     style="padding-right: 25px"
@@ -56,18 +71,19 @@
 
 <script setup lang="ts">
 import { SettingItem, SettingItemBox } from "@/components/Pages/ChartItemSetting";
-import { PropType, ref } from "vue";
+import { type PropType } from "vue";
 import {
-  deviceData, pointsData
+  deviceData,
+  pointsData
 } from "@/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/data";
 import { NCascader, NInfiniteScroll } from 'naive-ui'
 import type { RequestDataSourceConfig } from "@/store/modules/chartEditStore/chartEditStore.d";
+import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
 
 const props = defineProps<{
   targetDataSourceRequest: PropType<RequestDataSourceConfig>
 }>()
 
-const value1 = ref(null)
 const options = [
   {
     label: 'Everybody\'s Got Something to Hide Except Me and My Monkey',
@@ -101,16 +117,7 @@ const options = [
   }]
 </script>
 <style scoped lang="scss">
-.item {
+.select-time-options {
-  display: flex;
+  width: 120px;
-  align-items: center;
-  height: 46px;
-  justify-content: center;
-  margin-bottom: 10px;
-  background-color: rgba(0, 128, 0, 0.16);
-}
-
-.item:last-child {
-  margin-bottom: 0;
 }
 </style>