Showing
1 changed file
with
115 additions
and
115 deletions
| 1 | -import { ref, toRefs, toRaw, watch } from 'vue' | |
| 1 | +import {ref, toRefs, toRaw, watch} from 'vue' | |
| 2 | 2 | import type VChart from 'vue-echarts' | 
| 3 | -import { useChartDataPondFetch } from '@/hooks/' | |
| 4 | -import { CreateComponentType, ChartFrameEnum, CreateComponentGroupType } from '@/packages/index.d' | |
| 5 | -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | |
| 6 | -import { isPreview, intervalUnitHandle } from '@/utils' | |
| 7 | -import { setOption } from '@/packages/public/chart' | |
| 8 | -import { useChartDataSocket } from './useChartDataSocket' | |
| 9 | -import { customRequest } from '@/api/external/customRequest' | |
| 10 | -import { useFilterFn } from './useFilterFn' | |
| 11 | -import { RequestContentTypeEnum } from '@/enums/external/httpEnum' | |
| 3 | +import {useChartDataPondFetch} from '@/hooks/' | |
| 4 | +import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d' | |
| 5 | +import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | |
| 6 | +import {isPreview, intervalUnitHandle} from '@/utils' | |
| 7 | +import {setOption} from '@/packages/public/chart' | |
| 8 | +import {useChartDataSocket} from './useChartDataSocket' | |
| 9 | +import {customRequest} from '@/api/external/customRequest' | |
| 10 | +import {useFilterFn} from './useFilterFn' | |
| 11 | +import {RequestContentTypeEnum} from '@/enums/external/httpEnum' | |
| 12 | 12 | import dayjs from 'dayjs' | 
| 13 | 13 | |
| 14 | 14 | |
| ... | ... | @@ -22,123 +22,123 @@ type ChartEditStoreType = typeof useChartEditStore | 
| 22 | 22 | * @param updateCallback 自定义更新函数 | 
| 23 | 23 | */ | 
| 24 | 24 | export const useChartDataFetch = ( | 
| 25 | - targetComponent: CreateComponentType, | |
| 26 | - useChartEditStore: ChartEditStoreType, | |
| 27 | - updateCallback?: (...args: any) => any | |
| 25 | + targetComponent: CreateComponentType, | |
| 26 | + useChartEditStore: ChartEditStoreType, | |
| 27 | + updateCallback?: (...args: any) => any | |
| 28 | 28 | ) => { | 
| 29 | - const vChartRef = ref<typeof VChart | null>(null) | |
| 30 | - let fetchInterval: any = 0 | |
| 29 | + const vChartRef = ref<typeof VChart | null>(null) | |
| 30 | + let fetchInterval: any = 0 | |
| 31 | 31 | |
| 32 | - // 组件类型 | |
| 33 | - const { chartFrame } = targetComponent.chartConfig | |
| 32 | + // 组件类型 | |
| 33 | + const {chartFrame} = targetComponent.chartConfig | |
| 34 | 34 | |
| 35 | - // eCharts 组件配合 vChart 库更新方式 | |
| 36 | - const echartsUpdateHandle = (dataset: any) => { | |
| 37 | - if (chartFrame === ChartFrameEnum.ECHARTS) { | |
| 38 | - if (vChartRef.value) { | |
| 39 | - setOption(vChartRef.value, { dataset: dataset }) | |
| 40 | - } | |
| 35 | + // eCharts 组件配合 vChart 库更新方式 | |
| 36 | + const echartsUpdateHandle = (dataset: any) => { | |
| 37 | + if (chartFrame === ChartFrameEnum.ECHARTS) { | |
| 38 | + if (vChartRef.value) { | |
| 39 | + setOption(vChartRef.value, {dataset: dataset}) | |
| 40 | + } | |
| 41 | + } | |
| 41 | 42 | } | 
| 42 | - } | |
| 43 | 43 | |
| 44 | - const requestIntervalFn = () => { | |
| 45 | - const chartEditStore = useChartEditStore() | |
| 46 | - if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return | |
| 44 | + const requestIntervalFn = () => { | |
| 45 | + const chartEditStore = useChartEditStore() | |
| 46 | + if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return | |
| 47 | 47 | |
| 48 | - // 全局数据 | |
| 49 | - const { | |
| 50 | - requestOriginUrl, | |
| 51 | - requestIntervalUnit: globalUnit, | |
| 52 | - requestInterval: globalRequestInterval | |
| 53 | - } = toRefs(chartEditStore.getRequestGlobalConfig) | |
| 48 | + // 全局数据 | |
| 49 | + const { | |
| 50 | + requestOriginUrl, | |
| 51 | + requestIntervalUnit: globalUnit, | |
| 52 | + requestInterval: globalRequestInterval | |
| 53 | + } = toRefs(chartEditStore.getRequestGlobalConfig) | |
| 54 | 54 | |
| 55 | - // 目标组件 | |
| 56 | - const { | |
| 57 | - requestUrl, | |
| 58 | - requestIntervalUnit: targetUnit, | |
| 59 | - requestInterval: targetInterval | |
| 60 | - } = toRefs(targetComponent.request) | |
| 55 | + // 目标组件 | |
| 56 | + const { | |
| 57 | + requestUrl, | |
| 58 | + requestIntervalUnit: targetUnit, | |
| 59 | + requestInterval: targetInterval | |
| 60 | + } = toRefs(targetComponent.request) | |
| 61 | 61 | |
| 62 | - try { | |
| 63 | - // 处理地址 | |
| 64 | - if (requestUrl?.value) { | |
| 65 | - // requestOriginUrl 允许为空 | |
| 66 | - const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value | |
| 67 | - if (!completePath) return | |
| 62 | + try { | |
| 63 | + // 处理地址 | |
| 64 | + if (requestUrl?.value) { | |
| 65 | + // requestOriginUrl 允许为空 | |
| 66 | + const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value | |
| 67 | + if (!completePath) return | |
| 68 | 68 | |
| 69 | - clearInterval(fetchInterval) | |
| 69 | + clearInterval(fetchInterval) | |
| 70 | 70 | |
| 71 | - const fetchFn = async () => { | |
| 72 | - let startTsValue = null | |
| 73 | - let endTsValue = null | |
| 74 | - const { requestParams } = toRaw(targetComponent.request) | |
| 75 | - const { Params } = requestParams | |
| 76 | - const { entityType, startTs, endTs } = Params | |
| 77 | - const days = Math.ceil((endTs - startTs) / (1 * 60 * 60 * 24 * 1000)) | |
| 78 | - if (entityType === 'DEVICE') { | |
| 79 | - startTsValue = Date.now() - days <= 32 ? 2592000000: days <= 8 ? 604800000 : startTs | |
| 80 | - endTsValue = Date.now() | |
| 81 | - toRaw(targetComponent.request).requestParams.Params.startTs = startTsValue | |
| 82 | - toRaw(targetComponent.request).requestParams.Params.endTs = endTsValue | |
| 83 | - } | |
| 84 | - const res = await customRequest(toRaw(targetComponent.request)) | |
| 85 | - if (res) { | |
| 86 | - try { | |
| 87 | - const filter = targetComponent.filter | |
| 88 | - const { value } = useFilterFn(filter, res) | |
| 89 | - echartsUpdateHandle(value) | |
| 90 | - // 更新回调函数 | |
| 91 | - if (updateCallback) { | |
| 92 | - updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表,这里传过去当前组件的信息 | |
| 93 | - } | |
| 94 | - } catch (error) { | |
| 95 | - console.error(error) | |
| 96 | - } | |
| 97 | - } | |
| 98 | - } | |
| 71 | + const fetchFn = async () => { | |
| 72 | + let startTsValue = null | |
| 73 | + let endTsValue = null | |
| 74 | + const {requestParams} = toRaw(targetComponent.request) | |
| 75 | + const {Params} = requestParams | |
| 76 | + const {entityType, startTs, endTs} = Params | |
| 77 | + const days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000)) | |
| 78 | + if (entityType === 'DEVICE') { | |
| 79 | + startTsValue = Date.now() - days <= 32 ? 2592000000 : days <= 8 ? 604800000 : startTs | |
| 80 | + endTsValue = Date.now() | |
| 81 | + ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number | |
| 82 | + ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue | |
| 83 | + } | |
| 84 | + const res = await customRequest(toRaw(targetComponent.request)) | |
| 85 | + if (res) { | |
| 86 | + try { | |
| 87 | + const filter = targetComponent.filter | |
| 88 | + const {value} = useFilterFn(filter, res) | |
| 89 | + echartsUpdateHandle(value) | |
| 90 | + // 更新回调函数 | |
| 91 | + if (updateCallback) { | |
| 92 | + updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表,这里传过去当前组件的信息 | |
| 93 | + } | |
| 94 | + } catch (error) { | |
| 95 | + console.error(error) | |
| 96 | + } | |
| 97 | + } | |
| 98 | + } | |
| 99 | 99 | |
| 100 | - // 普通初始化与组件交互处理监听 | |
| 101 | - watch( | |
| 102 | - () => targetComponent.request, | |
| 103 | - () => { | |
| 104 | - fetchFn() | |
| 105 | - }, | |
| 106 | - { | |
| 107 | - immediate: true, | |
| 108 | - deep: true | |
| 109 | - } | |
| 110 | - ) | |
| 100 | + // 普通初始化与组件交互处理监听 | |
| 101 | + watch( | |
| 102 | + () => targetComponent.request, | |
| 103 | + () => { | |
| 104 | + fetchFn() | |
| 105 | + }, | |
| 106 | + { | |
| 107 | + immediate: true, | |
| 108 | + deep: true | |
| 109 | + } | |
| 110 | + ) | |
| 111 | 111 | |
| 112 | - // 定时时间 | |
| 113 | - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value | |
| 114 | - // 单位 | |
| 115 | - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | |
| 116 | - // 开启轮询 | |
| 117 | - if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) | |
| 118 | - } | |
| 119 | - // eslint-disable-next-line no-empty | |
| 120 | - } catch (error) { | |
| 121 | - console.log(error) | |
| 112 | + // 定时时间 | |
| 113 | + const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value | |
| 114 | + // 单位 | |
| 115 | + const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | |
| 116 | + // 开启轮询 | |
| 117 | + if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) | |
| 118 | + } | |
| 119 | + // eslint-disable-next-line no-empty | |
| 120 | + } catch (error) { | |
| 121 | + console.log(error) | |
| 122 | + } | |
| 122 | 123 | } | 
| 123 | - } | |
| 124 | 124 | |
| 125 | - if (isPreview()) { | |
| 126 | - requestIntervalFn() | |
| 127 | - const chartEditStore = useChartEditStore() | |
| 128 | - const { initial } = useChartDataSocket() | |
| 129 | - /** | |
| 130 | - * 支持分组也可以接受ws | |
| 131 | - * 如果是分组并且绑定了ws | |
| 132 | - */ | |
| 133 | - chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => { | |
| 134 | - if (item.isGroup) { | |
| 135 | - if (item.request.requestUrl?.includes('ws')) { | |
| 136 | - initial(item, useChartEditStore, updateCallback) | |
| 137 | - } | |
| 138 | - } | |
| 139 | - }) | |
| 140 | - // | |
| 141 | - initial(targetComponent, useChartEditStore, updateCallback) | |
| 142 | - } | |
| 143 | - return { vChartRef } | |
| 125 | + if (isPreview()) { | |
| 126 | + requestIntervalFn() | |
| 127 | + const chartEditStore = useChartEditStore() | |
| 128 | + const {initial} = useChartDataSocket() | |
| 129 | + /** | |
| 130 | + * 支持分组也可以接受ws | |
| 131 | + * 如果是分组并且绑定了ws | |
| 132 | + */ | |
| 133 | + chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => { | |
| 134 | + if (item.isGroup) { | |
| 135 | + if (item.request.requestUrl?.includes('ws')) { | |
| 136 | + initial(item, useChartEditStore, updateCallback) | |
| 137 | + } | |
| 138 | + } | |
| 139 | + }) | |
| 140 | + // | |
| 141 | + initial(targetComponent, useChartEditStore, updateCallback) | |
| 142 | + } | |
| 143 | + return {vChartRef} | |
| 144 | 144 | } | ... | ... |