goview_vue/src/hooks/useChartDataFetch.hook.ts

import { ref, toRefs } from 'vue'
import type VChart from 'vue-echarts'
import { http } from '@/api/http'
import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { RequestDataTypeEnum } from '@/enums/httpEnum'
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'

// 获取类型
type ChartEditStoreType = typeof useChartEditStore

/**
 * setdata 数据监听与更改
 * @param targetComponent
 * @param useChartEditStore 若直接引会报错，只能动态传递
 * @param updateCallback 自定义更新函数
 */
export const useChartDataFetch = (
  targetComponent: CreateComponentType,
  useChartEditStore: ChartEditStoreType,
  updateCallback?: (...args: any) => any
) => {
  const vChartRef = ref<typeof VChart | null>(null)
  let fetchInterval: any = 0

  const requestIntervalFn = () => {
    const chartEditStore = useChartEditStore()
    const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
    // 组件类型
    const { chartFrame } = targetComponent.chartConfig
    // 请求配置
    const {
      requestDataType,
      requestHttpType,
      requestUrl,
      requestInterval: targetInterval
    } = toRefs(targetComponent.request)

    // 非请求类型
    if (
      requestDataType.value !== RequestDataTypeEnum.AJAX ||
      !requestInterval ||
      !requestInterval.value ||
      !targetInterval ||
      !targetInterval.value
    )
      return

    try {
      // 处理地址
      // @ts-ignore
      if (requestUrl?.value && requestInterval && requestInterval.value > 0) {
        // requestOriginUrl 允许为空
        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
        if (!completePath) return

        clearInterval(fetchInterval)

        const fetchFn = async () => {
          const res: any = await http(requestHttpType.value)(completePath || '', {})
          if (res.data) {
            try {
              const filter = targetComponent.filter
              // 更新回调函数
              if (updateCallback) {
                updateCallback(newFunctionHandle(res.data, filter))
              } else {
                // eCharts 组件配合 vChart 库更新方式
                if (chartFrame === ChartFrameEnum.ECHARTS) {
                  if (vChartRef.value) {
                    vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
                  }
                }
              }
            } catch (error) {
              console.error(error)
            }
          }
        }

        // 立即调用
        fetchFn()

        // 开启定时
        const time = targetInterval && targetInterval.value ? targetInterval.value : requestInterval.value

        // 处理单位时间
        fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, requestIntervalUnit.value))
      }
    } catch (error) {}
  }

  isPreview() && requestIntervalFn()
  return { vChartRef }
}