diff --git a/src/api/http.ts b/src/api/http.ts index 33950baa..0d433a73 100644 --- a/src/api/http.ts +++ b/src/api/http.ts @@ -163,7 +163,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req params = translateStr(params) // form 类型处理 let formData: FormData = new FormData() - formData.set('default', 'defaultData') // 类型处理 switch (requestParamsBodyType) { diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index c39cc34e..91271e8d 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -90,12 +90,12 @@ export const useChartDataFetch = ( // 普通初始化与组件交互处理监听 watch( - () => targetComponent.request, + () => targetComponent.request.requestParams, () => { fetchFn() }, { - immediate: true, + immediate: false, deep: true } ) @@ -105,7 +105,11 @@ export const useChartDataFetch = ( // 单位 const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value // 开启轮询 - if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + if (time) { + fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + } else { + fetchFn() + } } // eslint-disable-next-line no-empty } catch (error) { @@ -114,10 +118,11 @@ export const useChartDataFetch = ( } if (isPreview()) { - // 判断是否是数据池类型 targetComponent.request.requestDataType === RequestDataTypeEnum.Pond ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) : requestIntervalFn() + } else { + requestIntervalFn() } return { vChartRef } } diff --git a/src/hooks/useChartDataPondFetch.hook.ts b/src/hooks/useChartDataPondFetch.hook.ts index 24ac7660..a506f274 100644 --- a/src/hooks/useChartDataPondFetch.hook.ts +++ b/src/hooks/useChartDataPondFetch.hook.ts @@ -1,4 +1,4 @@ -import { toRaw } from 'vue' +import { toRaw, watch, computed, ComputedRef } from 'vue' import { customizeHttp } from '@/api/http' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -20,7 +20,7 @@ const mittDataPondMap = new Map() // 创建单个数据项轮询接口 const newPondItemInterval = ( requestGlobalConfig: RequestGlobalConfigType, - requestDataPondItem: RequestDataPondItemType, + requestDataPondItem: ComputedRef, dataPondMapItem?: DataPondMapType[] ) => { if (!dataPondMapItem) return @@ -31,8 +31,7 @@ const newPondItemInterval = ( // 请求 const fetchFn = async () => { try { - const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig)) - + const res = await customizeHttp(toRaw(requestDataPondItem.value.dataPondRequestConfig), toRaw(requestGlobalConfig)) if (res) { try { // 遍历更新回调函数 @@ -49,19 +48,32 @@ const newPondItemInterval = ( } } + watch( + () => requestDataPondItem.value.dataPondRequestConfig.requestParams.Params, + () => { + fetchFn() + }, + { + immediate: false, + deep: true + } + ) + + // 立即调用 fetchFn() - const targetInterval = requestDataPondItem.dataPondRequestConfig.requestInterval - const targetUnit = requestDataPondItem.dataPondRequestConfig.requestIntervalUnit + + const targetInterval = requestDataPondItem.value.dataPondRequestConfig.requestInterval + const targetUnit = requestDataPondItem.value.dataPondRequestConfig.requestIntervalUnit const globalRequestInterval = requestGlobalConfig.requestInterval const globalUnit = requestGlobalConfig.requestIntervalUnit // 定时时间 - const time = targetInterval ? targetInterval : globalRequestInterval + const time = targetInterval ? targetInterval : globalRequestInterval // 单位 - const unit = targetInterval ? targetUnit : globalUnit + const unit = targetInterval ? targetUnit : globalUnit // 开启轮询 if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) } @@ -96,13 +108,16 @@ export const useChartDataPondFetch = () => { } // 初始化数据池 - const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => { - const { requestDataPond } = requestGlobalConfig + const initDataPond = (useChartEditStore: ChartEditStoreType) => { + const { requestGlobalConfig } = useChartEditStore() + const chartEditStore = useChartEditStore() // 根据 mapId 查找对应的数据池配置 for (let pondKey of mittDataPondMap.keys()) { - const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey) + const requestDataPondItem = computed(() => { + return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey) + }) as ComputedRef if (requestDataPondItem) { - newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey)) + newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey)) } } } diff --git a/src/hooks/useChartInteract.hook.ts b/src/hooks/useChartInteract.hook.ts index efa2ae73..aa0b1ed6 100644 --- a/src/hooks/useChartInteract.hook.ts +++ b/src/hooks/useChartInteract.hook.ts @@ -1,4 +1,5 @@ import { toRefs } from 'vue' +import { isPreview } from '@/utils' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -12,6 +13,7 @@ export const useChartInteract = ( param: { [T: string]: any }, interactEventOn: string ) => { + if (!isPreview()) return const chartEditStore = useChartEditStore() const { interactEvents } = chartConfig.events const fnOnEvent = interactEvents.filter(item => { @@ -20,20 +22,37 @@ export const useChartInteract = ( if (fnOnEvent.length === 0) return fnOnEvent.forEach(item => { - const index = chartEditStore.fetchTargetIndex(item.interactComponentId) - if (index === -1) return - const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) - Object.keys(item.interactFn).forEach(key => { - if (Params.value[key]) { - Params.value[key] = param[item.interactFn[key]] - } - if (Header.value[key]) { - Header.value[key] = param[item.interactFn[key]] - } - }) + + const globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem => + cItem.dataPondId === item.interactComponentId + ) + if (globalConfigPindAprndex !== -1) { + const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams) + + Object.keys(item.interactFn).forEach(key => { + if (Params.value[key]) { + Params.value[key] = param[item.interactFn[key]] + } + if (Header.value[key]) { + Header.value[key] = param[item.interactFn[key]] + } + }) + } else { + const index = chartEditStore.fetchTargetIndex(item.interactComponentId) + if (index === -1) return + const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) + + Object.keys(item.interactFn).forEach(key => { + if (Params.value[key]) { + Params.value[key] = param[item.interactFn[key]] + } + if (Header.value[key]) { + Header.value[key] = param[item.interactFn[key]] + } + }) + } }) } - // 联动事件触发的 type 变更时,清除当前绑定内容 export const clearInteractEvent = (chartConfig: CreateComponentType) => { diff --git a/src/packages/components/Charts/Pies/PieCircle/config.vue b/src/packages/components/Charts/Pies/PieCircle/config.vue index a3206946..f343aa23 100644 --- a/src/packages/components/Charts/Pies/PieCircle/config.vue +++ b/src/packages/components/Charts/Pies/PieCircle/config.vue @@ -7,6 +7,22 @@ + + + + + + + + + + @@ -31,24 +47,8 @@ > - - - - - - - - - - - + @@ -69,6 +69,18 @@ v-model:value="item.data[1].itemStyle.shadowColor" > + + + diff --git a/src/packages/components/Charts/Pies/PieCircle/index.vue b/src/packages/components/Charts/Pies/PieCircle/index.vue index 26bda2a7..bf6250cd 100644 --- a/src/packages/components/Charts/Pies/PieCircle/index.vue +++ b/src/packages/components/Charts/Pies/PieCircle/index.vue @@ -41,7 +41,7 @@ const option = reactive({ const dataHandle = (newData: any) => { const d = parseFloat(`${newData}`) * 100 let config = props.chartConfig.option - config.title.text = d.toFixed(2) + '%' + config.title.text = `${+d.toFixed(2)}%` config.series[0].data[0].value[0] = d config.series[0].data[1].value[0] = 100 - d option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes) @@ -68,7 +68,7 @@ watch( useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => { let d = parseFloat(`${resData}`) * 100 // @ts-ignore - option.value.title.text = d.toFixed(2) + '%' + option.value.title.text = `${+d.toFixed(2)}%` // @ts-ignore option.value.series[0].data[0].value[0] = d // @ts-ignore diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue index b5a74bd4..614b3d15 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue @@ -58,7 +58,7 @@ - 不支持「静态组件」 + 不支持「静态组件」支持「组件」「公共APi」 - 关联目标组件请求参数 + 关联目标请求参数 { // 绑定组件数据 request const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => { if (!id) return {} + const globalConfigPindApr = chartEditStore.requestGlobalConfig.requestDataPond.find(item => { + return item.dataPondId === id + })?.dataPondRequestConfig.requestParams + + if (globalConfigPindApr) return globalConfigPindApr[key] return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key] } @@ -178,12 +183,10 @@ const fnEventsOptions = (): Array => { iter: Array, val: CreateComponentType | CreateComponentGroupType ) => { - if (val.groupList && val.groupList.length > 0) { - iter.push(val) - } else { + if (!val.groupList && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl) { iter.push(val) } - return val.groupList ? [...iter, ...fnFlattern(val.groupList)] : iter + return val.groupList && val.groupList.length > 0 ? [...iter, ...fnFlattern(val.groupList)] : iter }, [] ) @@ -203,18 +206,26 @@ const fnEventsOptions = (): Array => { const mapOptionList = filterOptionList.map(item => ({ id: item.id, title: item.chartConfig.title, - disabled: false + disabled: false, + type: 'componentList' })) + const requestDataPond = chartEditStore.requestGlobalConfig.requestDataPond.map(item => ({ + id: item.dataPondId, + title: item.dataPondName, + disabled: false, + type: 'requestDataPond' + })) + const tarArr = requestDataPond.concat(mapOptionList) targetData.value.events.interactEvents?.forEach(iaItem => { - mapOptionList.forEach(optionItem => { + tarArr.forEach(optionItem => { if (optionItem.id === iaItem.interactComponentId) { optionItem.disabled = true } }) }) - return mapOptionList + return tarArr } // 新增模块 diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index f685f983..07675175 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -74,7 +74,7 @@ const themeColor = computed(() => { // 组件渲染结束初始化数据池 clearMittDataPondMap() onMounted(() => { - initDataPond(chartEditStore.requestGlobalConfig) + initDataPond(useChartEditStore) }) diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts index fbfc8922..fa19c5db 100644 --- a/types/shims-vue.d.ts +++ b/types/shims-vue.d.ts @@ -5,4 +5,5 @@ declare module '*.vue' { } declare module 'lodash/*' -declare module 'dom-helpers' \ No newline at end of file +declare module 'dom-helpers' +declare module '@iconify/vue' \ No newline at end of file