EDFS-VIEW/src/hooks/useChartDataFetch.hook.ts

import { ref, toRaw, toRefs, watch } from 'vue'
import type VChart from 'vue-echarts'
import { customizeHttp } from '@/api/http'
import { useChartDataPondFetch } from '@/hooks/'
import {
  RequestConfigType,
  RequestDataSourceConfig
} from '@/store/modules/chartEditStore/chartEditStore.d'
import { ChartFrameEnum, CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { RequestAJAXTypes, RequestDataTypeEnum } from '@/enums/httpEnum'
import { intervalUnitHandle, isPreview, newFunctionHandle } from '@/utils'
import { setOption } from '@/packages/public/chart'
import { isNil } from 'lodash'
import dayjs from "dayjs";

// 获取类型
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 { addGlobalDataInterface } = useChartDataPondFetch()

  // 组件类型
  const { chartFrame } = targetComponent.chartConfig

  // eCharts 组件配合 vChart 库更新方式
  const echartsUpdateHandle = (dataset: any) => {
    if (chartFrame === ChartFrameEnum.ECHARTS) {
      if (vChartRef.value) {
        setOption(vChartRef.value, { dataset: dataset }, false)
      }
    }
  }

  watch(() => targetComponent.request.requestContentType, () => {
    if (isPreview()) return
    requestIntervalFn()
  }, { deep: true })


  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 {
      requestUrl,
      requestIntervalUnit: targetUnit,
      requestInterval: targetInterval
    } = toRefs(targetComponent.request)

    // 全局数据
    const {
      requestOriginUrl,
      requestIntervalUnit: globalUnit,
      requestInterval: globalRequestInterval
    } = toRefs(chartEditStore.getRequestGlobalConfig)

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

        const fetchFn = async () => {
          console.log("监听到更改", dayjs().format('YYYY-MM-DD HH:mm:ss'))
          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
          if (res) {
            try {
              const filter = targetComponent.filter
              const { data } = res
              echartsUpdateHandle(newFunctionHandle(data, res, filter))
              // 更新回调函数
              if (updateCallback) {
                updateCallback(newFunctionHandle(data, res, filter))
              }
            } catch (error) {
              console.error(error)
            }
          }
        }

        createFetchInterval(fetchFn, targetComponent.request)
      }
      // eslint-disable-next-line no-empty
    } catch (error) {
      console.log('AJAXRequestIntervalFn Error:', error)
    }
  }

  function SourceRequestIntervalFn() {
    const chartEditStore = useChartEditStore()
    const {
      station,
      device,
      points,
      requestIntervalUnit: targetUnit,
      requestInterval: targetInterval
    } = toRefs(targetComponent.requestSource)
    try {
      function fetchFn() {
        console.log(station.value)
      }

      createFetchInterval(fetchFn, targetComponent.requestSource)
    } catch (error) {
      console.log('SourceRequestIntervalFn Error:', error)
    }
  }


  function createFetchInterval(fetchFn: () => void, targetComponentRequest: RequestConfigType | RequestDataSourceConfig) {
    const chartEditStore = useChartEditStore()
    const {
      requestIntervalUnit: targetUnit,
      requestInterval: targetInterval
    } = toRefs(targetComponentRequest)

    // 全局数据
    const {
      requestOriginUrl,
      requestIntervalUnit: globalUnit,
      requestInterval: globalRequestInterval
    } = toRefs(chartEditStore.getRequestGlobalConfig)
    fetchFn()
    // 定时时间
    const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value
    // 单位
    const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value
    // 开启轮询
    if (time && isPreview()) {
      fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
    }
  }

  if (isPreview()) {
    console.log(targetComponent)
    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
      ? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => {
        echartsUpdateHandle(newData)
        if (updateCallback) updateCallback(newData)
      })
      : requestIntervalFn()
  } else {
    requestIntervalFn()
  }
  return { vChartRef }
}