96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
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 }
|
|
}
|