2022-03-24 14:19:07 +08:00
|
|
|
|
import { ref, toRefs, watchEffect, nextTick } from 'vue'
|
|
|
|
|
import type VChart from 'vue-echarts'
|
2022-03-23 20:41:50 +08:00
|
|
|
|
import { http } from '@/api/http'
|
2022-04-02 11:34:54 +08:00
|
|
|
|
import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
2022-03-23 20:41:50 +08:00
|
|
|
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
|
|
|
|
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
2022-03-24 14:19:07 +08:00
|
|
|
|
import { isPreview } from '@/utils'
|
2022-03-23 20:41:50 +08:00
|
|
|
|
|
2022-04-02 11:34:54 +08:00
|
|
|
|
// 获取类型
|
2022-03-25 19:58:39 +08:00
|
|
|
|
type ChartEditStoreType = typeof useChartEditStore
|
|
|
|
|
|
2022-03-23 20:41:50 +08:00
|
|
|
|
/**
|
2022-04-02 11:34:54 +08:00
|
|
|
|
* setdata 数据监听与更改
|
|
|
|
|
* @param targetComponent
|
|
|
|
|
* @param useChartEditStore 若直接引会报错,只能动态传递
|
|
|
|
|
* @param updateCallback 自定义更新函数
|
2022-03-23 20:41:50 +08:00
|
|
|
|
*/
|
2022-04-02 11:34:54 +08:00
|
|
|
|
export const useChartDataFetch = (
|
|
|
|
|
targetComponent: CreateComponentType,
|
|
|
|
|
useChartEditStore: ChartEditStoreType,
|
|
|
|
|
updateCallback?: (...args: any) => any
|
|
|
|
|
) => {
|
2022-03-24 14:19:07 +08:00
|
|
|
|
const vChartRef = ref<typeof VChart | null>(null)
|
|
|
|
|
let fetchInterval: any = 0
|
2022-03-23 20:41:50 +08:00
|
|
|
|
|
2022-04-02 11:34:54 +08:00
|
|
|
|
isPreview() &&
|
|
|
|
|
watchEffect(() => {
|
|
|
|
|
clearInterval(fetchInterval)
|
2022-03-23 20:41:50 +08:00
|
|
|
|
|
2022-04-02 11:34:54 +08:00
|
|
|
|
const chartEditStore = useChartEditStore()
|
|
|
|
|
const { requestOriginUrl, requestInterval } = toRefs(
|
|
|
|
|
chartEditStore.getRequestGlobalConfig
|
|
|
|
|
)
|
|
|
|
|
const { requestDataType, requestHttpType, requestUrl } = toRefs(
|
|
|
|
|
targetComponent.data
|
|
|
|
|
)
|
|
|
|
|
if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
|
|
|
|
|
// 处理地址
|
|
|
|
|
if (requestUrl?.value && requestInterval.value > 0) {
|
|
|
|
|
// requestOriginUrl 允许为空
|
|
|
|
|
const completePath =
|
|
|
|
|
requestOriginUrl && requestOriginUrl.value + requestUrl.value
|
|
|
|
|
if (!completePath) return
|
2022-03-23 20:41:50 +08:00
|
|
|
|
|
2022-04-02 11:34:54 +08:00
|
|
|
|
fetchInterval = setInterval(async () => {
|
|
|
|
|
const res:any = await http(requestHttpType.value)(completePath || '', {})
|
|
|
|
|
if (res.data) {
|
2022-04-06 13:38:19 +08:00
|
|
|
|
// 是否是 Echarts 组件
|
2022-04-02 11:34:54 +08:00
|
|
|
|
const isECharts =
|
|
|
|
|
targetComponent.chartConfig.package ===
|
|
|
|
|
PackagesCategoryEnum.CHARTS
|
|
|
|
|
|
|
|
|
|
try {
|
2022-05-02 23:10:47 +08:00
|
|
|
|
if (isECharts && vChartRef?.value?.setOption) {
|
2022-04-02 11:34:54 +08:00
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (vChartRef.value) {
|
|
|
|
|
vChartRef.value.setOption({ dataset: res.data })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
2022-06-25 11:18:04 +08:00
|
|
|
|
// 若遵守规范使用 dataset 作为数据 key,则会自动赋值数据
|
2022-04-27 17:45:40 +08:00
|
|
|
|
targetComponent.option.dataset && (targetComponent.option.dataset = res.data)
|
2022-04-02 11:34:54 +08:00
|
|
|
|
}
|
|
|
|
|
if (updateCallback) {
|
|
|
|
|
updateCallback(res.data)
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(error)
|
2022-03-24 14:19:07 +08:00
|
|
|
|
}
|
2022-04-02 11:34:54 +08:00
|
|
|
|
}
|
|
|
|
|
}, requestInterval.value * 1000)
|
|
|
|
|
}
|
|
|
|
|
})
|
2022-03-24 14:19:07 +08:00
|
|
|
|
|
|
|
|
|
return { vChartRef }
|
2022-03-23 20:41:50 +08:00
|
|
|
|
}
|