From 18d976cf3cadcf7fd9234afd3b18d463357afec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 13 Nov 2022 21:28:38 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/icon.ts | 14 +- .../chartLayoutStore/chartLayoutStore.d.ts | 8 + .../chartLayoutStore/chartLayoutStore.ts | 7 +- .../components/ChartsItemBox/index.vue | 68 ++++- .../components/ChartsOptionContent/index.vue | 1 - .../components/ChartsSearch/index.vue | 259 +++++++++++------- src/views/chart/ContentLayers/index.vue | 3 +- 7 files changed, 244 insertions(+), 116 deletions(-) diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 390200de..1f485371 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -63,7 +63,8 @@ import { Images as ImagesIcon, List as ListIcon, EyeOutline as EyeOutlineIcon, - EyeOffOutline as EyeOffOutlineIcon + EyeOffOutline as EyeOffOutlineIcon, + Albums as AlbumsIcon } from '@vicons/ionicons5' import { @@ -95,7 +96,8 @@ import { Carbon3DCursor as Carbon3DCursorIcon, Carbon3DSoftware as Carbon3DSoftwareIcon, Filter as FilterIcon, - FilterEdit as FilterEditIcon + FilterEdit as FilterEditIcon, + Laptop as LaptopIcon } from '@vicons/carbon' const ionicons5 = { @@ -228,7 +230,9 @@ const ionicons5 = { ListIcon, // 眼睛 EyeOutlineIcon, - EyeOffOutlineIcon + EyeOffOutlineIcon, + // 图表列表 + AlbumsIcon } const carbon = { @@ -279,7 +283,9 @@ const carbon = { Carbon3DSoftwareIcon, // 过滤器 FilterIcon, - FilterEditIcon + FilterEditIcon, + // 图层 + LaptopIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index 135f155a..b1155ea5 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -1,3 +1,8 @@ +export enum ChartModeEnum { + SINGLE= 'single', + DOUBLE = 'double' +} + export enum LayerModeEnum { THUMBNAIL = 'thumbnail', TEXT = 'text' @@ -7,6 +12,7 @@ export enum ChartLayoutStoreEnum { LAYERS = 'layers', CHARTS = 'charts', DETAILS = 'details', + Chart_TYPE = 'chartType', LAYER_TYPE = 'layerType' } @@ -17,6 +23,8 @@ export interface ChartLayoutType { [ChartLayoutStoreEnum.CHARTS]: boolean // 详情设置 [ChartLayoutStoreEnum.DETAILS]: boolean + // 组件展示方式 + [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum // 层级展示方式 [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index 6a8bcc1a..b3f0919f 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { ChartLayoutType, LayerModeEnum } from './chartLayoutStore.d' +import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' import { setLocalStorage, getLocalStorage } from '@/utils' import { StorageEnum } from '@/enums/storageEnum' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -21,6 +21,8 @@ export const useChartLayoutStore = defineStore({ charts: true, // 详情设置（收缩为true） details: false, + // 组件列表展示类型（默认单列） + chartType: ChartModeEnum.SINGLE, // 图层类型（默认图片） layerType: LayerModeEnum.THUMBNAIL }, @@ -34,6 +36,9 @@ export const useChartLayoutStore = defineStore({ getDetails(): boolean { return this.details }, + getChartType(): ChartModeEnum { + return this.chartType + }, getLayerType(): LayerModeEnum { return this.layerType } diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index efaee756..80552c4a 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -1,5 +1,5 @@ \ No newline at end of file + diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index 0576ab24..4f5895d2 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -81,12 +81,13 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index' import { icon } from '@/plugins' const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5 +const { LaptopIcon } = icon.carbon const chartLayoutStore = useChartLayoutStore() const chartEditStore = useChartEditStore() const { handleContextMenu, onClickOutSide } = useContextMenu() const layerModeList = [ - { label: '缩略图', icon: GridIcon, value: LayerModeEnum.THUMBNAIL }, + { label: '缩略图', icon: LaptopIcon, value: LayerModeEnum.THUMBNAIL }, { label: '文本列表', icon: ListIcon, value: LayerModeEnum.TEXT } ] From 80e5dbd9cb1b42643ef9805f84fdeabb1c0d0bed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 13 Nov 2022 21:38:46 +0800 Subject: [PATCH 02/10] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=9A=84=E6=A0=B7=E5=BC=8Fwenti?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/ContentCharts/components/ChartsItemBox/index.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 80552c4a..e87e0bf6 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -104,6 +104,7 @@ $halfCenterHeight: 50px; @include go('content-charts-item-box') { display: flex; flex-wrap: wrap; + justify-content: space-between; gap: 9px; padding: 10px; .item-box { From 649ab1fe8cf842da5970ff34d21317980543f4a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 15 Nov 2022 21:25:35 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=B1=A0=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/index.ts | 1 + src/hooks/useChartDataFetch.hook.ts | 35 ++++--- src/hooks/useChartDataPondFetch.hook.ts | 93 +++++++++++++++++++ .../chartEditStore/chartEditStore.d.ts | 11 +++ .../modules/chartEditStore/chartEditStore.ts | 1 + .../components/ChartDataAjax/index.vue | 2 +- .../ChartDataMonacoEditor/index.vue | 2 +- .../components/PreviewRenderList/index.vue | 13 ++- 8 files changed, 143 insertions(+), 15 deletions(-) create mode 100644 src/hooks/useChartDataPondFetch.hook.ts diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 5ecfe3dd..b5ab7ef8 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -2,5 +2,6 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useChartDataPondFetch.hook' export * from '@/hooks/useLifeHandler.hook' export * from '@/hooks/useLang.hook' \ No newline at end of file diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index df48ae16..1c96c301 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,6 +1,7 @@ import { ref, toRefs, toRaw } from 'vue' import type VChart from 'vue-echarts' import { customizeHttp } from '@/api/http' +import { useChartDataPondFetch } from '@/hooks/' import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' @@ -23,6 +24,22 @@ export const useChartDataFetch = ( const vChartRef = ref(null) let fetchInterval: any = 0 + // 数据池 + const { addGlobalDataInterface } = useChartDataPondFetch() + const { requestDataPondId } = toRefs(targetComponent.request) + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + + // eCharts 组件配合 vChart 库更新方式 + const echartsUpdateHandle = (dataset: any) => { + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: dataset }) + } + } + } + const requestIntervalFn = () => { const chartEditStore = useChartEditStore() @@ -41,9 +58,6 @@ export const useChartDataFetch = ( requestInterval: targetInterval } = toRefs(targetComponent.request) - // 组件类型 - const { chartFrame } = targetComponent.chartConfig - // 非请求类型 if (requestDataType.value !== RequestDataTypeEnum.AJAX) return @@ -58,16 +72,11 @@ export const useChartDataFetch = ( clearInterval(fetchInterval) const fetchFn = async () => { - const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { try { const filter = targetComponent.filter - // eCharts 组件配合 vChart 库更新方式 - if (chartFrame === ChartFrameEnum.ECHARTS) { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: newFunctionHandle(res?.data, res, filter) }) - } - } + echartsUpdateHandle(newFunctionHandle(res?.data, res, filter)) // 更新回调函数 if (updateCallback) { updateCallback(newFunctionHandle(res?.data, res, filter)) @@ -94,6 +103,10 @@ export const useChartDataFetch = ( } } - isPreview() && requestIntervalFn() + if (isPreview()) { + requestDataPondId + ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) + : requestIntervalFn() + } return { vChartRef } } diff --git a/src/hooks/useChartDataPondFetch.hook.ts b/src/hooks/useChartDataPondFetch.hook.ts new file mode 100644 index 00000000..2126384b --- /dev/null +++ b/src/hooks/useChartDataPondFetch.hook.ts @@ -0,0 +1,93 @@ +import { toRaw } from 'vue' +import { customizeHttp } from '@/api/http' +import { CreateComponentType } from '@/packages/index.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { newFunctionHandle } from '@/utils' + +// 获取类型 +type ChartEditStoreType = typeof useChartEditStore + +// 数据池存储的数据类型 +type DataPondMapType = { + updateCallback: (...args: any) => any + filter?: string | undefined +} + +// 数据池 Map 中请求对应 callback +const mittDataPondMap = new Map() + +// 创建单个数据项轮询接口 +const newPondItemInterval = ( + requestGlobalConfig: RequestGlobalConfigType, + requestDataPondItem: RequestDataPondItemType, + dataPondMapItem?: DataPondMapType[] +) => { + if (!dataPondMapItem) return + + // 请求 + const fetchFn = async () => { + try { + const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig)) + + if (res) { + try { + // 遍历更新回调函数 + dataPondMapItem.forEach(item => { + item.updateCallback(newFunctionHandle(res?.data, res, item.filter)) + }) + } catch (error) { + console.error(error) + return error + } + } + } catch (error) { + return error + } + } + + // 立即调用 + fetchFn() +} + +/** + * 数据池接口处理 + */ +export const useChartDataPondFetch = () => { + // 新增全局接口 + const addGlobalDataInterface = ( + targetComponent: CreateComponentType, + useChartEditStore: ChartEditStoreType, + updateCallback: (...args: any) => any + ) => { + const chartEditStore = useChartEditStore() + const { requestDataPond } = chartEditStore.getRequestGlobalConfig + + // 组件对应的数据池 Id + const requestDataPondId = '111' || (targetComponent.request.requestDataPondId as string) + // 新增数据项 + const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || [] + mittPondIdArr.push({ + updateCallback: updateCallback, + filter: targetComponent.filter + }) + mittDataPondMap.set(requestDataPondId, mittPondIdArr) + } + + // 初始化数据池 + const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => { + const { requestDataPond } = requestGlobalConfig + // 根据 mapId 查找对应的数据池配置 + for (let pondKey of mittDataPondMap.keys()) { + const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey) + if (requestDataPondItem) { + newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey)) + } + } + } + + return { + addGlobalDataInterface, + initDataPond + } +} diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 4d0232cb..78927f70 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -150,16 +150,27 @@ type RequestPublicConfigType = { requestParams: RequestParams } +// 数据池项类型 +export type RequestDataPondItemType = { + dataPondId: string, + dataPondName: string, + dataPondRequestConfig: RequestConfigType +} + // 全局的图表请求配置 export interface RequestGlobalConfigType extends RequestPublicConfigType { // 组件定制轮询时间 requestInterval: number // 请求源地址 requestOriginUrl?: string + // 公共数据池 + requestDataPond: RequestDataPondItemType[] } // 单个图表请求配置 export interface RequestConfigType extends RequestPublicConfigType { + // 所选全局数据池的对应 id + requestDataPondId?: string // 组件定制轮询时间 requestInterval?: number // 获取数据的方式 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index d6f8ddf3..16a4eda4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -113,6 +113,7 @@ export const useChartEditStore = defineStore({ }, // 数据请求处理（需存储给后端） requestGlobalConfig: { + requestDataPond: [], requestOriginUrl: '', requestInterval: requestInterval, requestIntervalUnit: requestIntervalUnit, diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 9d3654ae..9e27f94f 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -125,7 +125,7 @@ const sendHandle = async () => { if (!targetData.value?.request) return loading.value = true try { - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) loading.value = false if (res) { if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index cea1e1c8..a0d76216 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -128,7 +128,7 @@ const sourceData = ref('') // 动态获取数据 const fetchTargetData = async () => { try { - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { sourceData.value = res return diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 9bb0cbec..d4354055 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -10,7 +10,7 @@ ...getTransformStyle(item.styles), ...getStatusStyle(item.status), ...getBlendModeStyle(item.styles) as any - } as any" + }" >