From a6194b8fa942153f47bdd2a2e9898bc874b5ed51 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, 23 Apr 2023 20:05:49 +0800 Subject: [PATCH 01/15] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=86=99?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useChartDataFetch.hook.ts | 245 +++++------ .../components/ChartDataAjax/index.vue | 393 +++++++++--------- 2 files changed, 320 insertions(+), 318 deletions(-) diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index cba17e0d..c39cc34e 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,122 +1,123 @@ -import { ref, toRefs, toRaw, watch } 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' -import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' -import { setOption } from '@/packages/public/chart' - -// 获取类型 -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(null) - let fetchInterval: any = 0 - - // 数据池 - const { addGlobalDataInterface } = useChartDataPondFetch() - - // 组件类型 - const { chartFrame } = targetComponent.chartConfig - - // eCharts 组件配合 vChart 库更新方式 - const echartsUpdateHandle = (dataset: any) => { - if (chartFrame === ChartFrameEnum.ECHARTS) { - if (vChartRef.value) { - setOption(vChartRef.value, { dataset: dataset }) - } - } - } - - const requestIntervalFn = () => { - const chartEditStore = useChartEditStore() - - // 全局数据 - const { - requestOriginUrl, - requestIntervalUnit: globalUnit, - requestInterval: globalRequestInterval - } = toRefs(chartEditStore.getRequestGlobalConfig) - - // 目标组件 - const { - requestDataType, - requestUrl, - requestIntervalUnit: targetUnit, - requestInterval: targetInterval - } = toRefs(targetComponent.request) - - // 非请求类型 - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - - try { - // 处理地址 - // @ts-ignore - if (requestUrl?.value) { - // requestOriginUrl 允许为空 - const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return - - clearInterval(fetchInterval) - - const fetchFn = async () => { - const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) - if (res) { - try { - const filter = targetComponent.filter - echartsUpdateHandle(newFunctionHandle(res?.data, res, filter)) - // 更新回调函数 - if (updateCallback) { - updateCallback(newFunctionHandle(res?.data, res, filter)) - } - } catch (error) { - console.error(error) - } - } - } - - // 普通初始化与组件交互处理监听 - watch( - () => targetComponent.request, - () => { - fetchFn() - }, - { - immediate: true, - deep: true - } - ) - - // 定时时间 - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value - // 单位 - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value - // 开启轮询 - if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) - } - // eslint-disable-next-line no-empty - } catch (error) { - console.log(error) - } - } - - if (isPreview()) { - // 判断是否是数据池类型 - targetComponent.request.requestDataType === RequestDataTypeEnum.Pond - ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) - : requestIntervalFn() - } - return { vChartRef } -} +import { ref, toRefs, toRaw, watch } 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' +import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' +import { setOption } from '@/packages/public/chart' + +// 获取类型 +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(null) + let fetchInterval: any = 0 + + // 数据池 + const { addGlobalDataInterface } = useChartDataPondFetch() + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + + // eCharts 组件配合 vChart 库更新方式 + const echartsUpdateHandle = (dataset: any) => { + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + setOption(vChartRef.value, { dataset: dataset }) + } + } + } + + const requestIntervalFn = () => { + const chartEditStore = useChartEditStore() + + // 全局数据 + const { + requestOriginUrl, + requestIntervalUnit: globalUnit, + requestInterval: globalRequestInterval + } = toRefs(chartEditStore.getRequestGlobalConfig) + + // 目标组件 + const { + requestDataType, + requestUrl, + requestIntervalUnit: targetUnit, + requestInterval: targetInterval + } = toRefs(targetComponent.request) + + // 非请求类型 + if (requestDataType.value !== RequestDataTypeEnum.AJAX) return + + try { + // 处理地址 + // @ts-ignore + if (requestUrl?.value) { + // requestOriginUrl 允许为空 + const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return + + clearInterval(fetchInterval) + + const fetchFn = async () => { + const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) + if (res) { + try { + const filter = targetComponent.filter + const { data } = res + echartsUpdateHandle(newFunctionHandle(data, res, filter)) + // 更新回调函数 + if (updateCallback) { + updateCallback(newFunctionHandle(data, res, filter)) + } + } catch (error) { + console.error(error) + } + } + } + + // 普通初始化与组件交互处理监听 + watch( + () => targetComponent.request, + () => { + fetchFn() + }, + { + immediate: true, + deep: true + } + ) + + // 定时时间 + const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value + // 单位 + const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value + // 开启轮询 + if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + } + // eslint-disable-next-line no-empty + } catch (error) { + console.log(error) + } + } + + if (isPreview()) { + // 判断是否是数据池类型 + targetComponent.request.requestDataType === RequestDataTypeEnum.Pond + ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) + : requestIntervalFn() + } + return { vChartRef } +} 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 68b73edf..203bb0e6 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -1,196 +1,197 @@ - - - - - + + + + + From 2a8d0717f80f43c11cadd5a515cbf6c494360238 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, 23 Apr 2023 20:33:46 +0800 Subject: [PATCH 02/15] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=92=8C=E9=A2=84=E8=A7=88=E4=B8=8D=E4=B8=80=E8=87=B4?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ChartDataAjax/index.vue | 2 +- .../ChartDataMonacoEditor/index.vue | 430 +++++++++--------- 2 files changed, 216 insertions(+), 216 deletions(-) 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 203bb0e6..1e4cce55 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -132,7 +132,7 @@ const sendHandle = async () => { if (res) { const { data } = res if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') - targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter) + targetData.value.option.dataset = newFunctionHandle(data.data, data, targetData.value.filter) showMatching.value = true return } 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 129b50c1..529fb248 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -1,215 +1,215 @@ - - - - - + + + + + From a400526108435a7511d7e2b4974d1b44ff6281c2 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, 23 Apr 2023 21:05:52 +0800 Subject: [PATCH 03/15] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=B8=8D?= =?UTF-8?q?=E8=BF=94=E5=9B=9E=20code=20=E5=AF=BC=E8=87=B4=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axios.ts | 2 +- .../components/ChartData/components/ChartDataAjax/index.vue | 2 +- .../ChartData/components/ChartDataMonacoEditor/index.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/api/axios.ts b/src/api/axios.ts index a64cfcd0..65ff033c 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -21,7 +21,7 @@ axiosInstance.interceptors.request.use( axiosInstance.interceptors.response.use( (res: AxiosResponse) => { const { code } = res.data as { code: number } - if (code === undefined || code === null) return Promise.resolve(res) + if (code === undefined || code === null) return Promise.resolve(res.data) if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data) // 重定向 if (ErrorPageNameMap.get(code)) redirectErrorPage(code) 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 1e4cce55..203bb0e6 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -132,7 +132,7 @@ const sendHandle = async () => { if (res) { const { data } = res if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') - targetData.value.option.dataset = newFunctionHandle(data.data, data, targetData.value.filter) + targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter) showMatching.value = true return } 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 529fb248..8bdb6440 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -129,7 +129,7 @@ const fetchTargetData = async () => { try { const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { - sourceData.value = res.data + sourceData.value = res return } window['$message'].warning('没有拿到返回值，请检查接口！') From 9ce042cc8afab8d568fd464fb37fc6ef5ff7d004 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, 23 Apr 2023 21:14:28 +0800 Subject: [PATCH 04/15] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=9B=BE=E8=A1=A8=E5=AF=BC=E8=87=B4=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E7=9A=84=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartLayoutStore/chartLayoutStore.ts | 160 +++++++-------- .../ContentCharts/hooks/useAside.hook.ts | 184 +++++++++--------- 2 files changed, 175 insertions(+), 169 deletions(-) diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index c2b63592..95a0cb70 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -1,77 +1,83 @@ -import { defineStore } from 'pinia' -import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' -import { setLocalStorage, getLocalStorage } from '@/utils' -import { StorageEnum } from '@/enums/storageEnum' -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' - -const chartEditStore = useChartEditStore() - -const { GO_CHART_LAYOUT_STORE } = StorageEnum - -const storageChartLayout: Partial = getLocalStorage(GO_CHART_LAYOUT_STORE) - -// 编辑区域布局和静态设置 -export const useChartLayoutStore = defineStore({ - id: 'useChartLayoutStore', - state: (): ChartLayoutType => ({ - // 图层控制 - layers: true, - // 图表组件 - charts: true, - // 详情设置（收缩为true） - details: false, - // 组件列表展示类型（默认单列） - chartType: ChartModeEnum.SINGLE, - // 图层类型（默认图片） - layerType: LayerModeEnum.THUMBNAIL, - // 当前加载数量 - percentage: 0, - // 是否重置当前画布位置 - rePositionCanvas: false, - // 防止值不存在 - ...storageChartLayout - }), - getters: { - getLayers(): boolean { - return this.layers - }, - getCharts(): boolean { - return this.charts - }, - getDetails(): boolean { - return this.details - }, - getChartType(): ChartModeEnum { - return this.chartType - }, - getLayerType(): LayerModeEnum { - return this.layerType - }, - getPercentage(): number { - return this.percentage - }, - getRePositionCanvas(): boolean { - return this.rePositionCanvas - } - }, - actions: { - setItem(key: T, value: K): void { - this.$patch(state => { - state[key] = value - }) - // 存储本地 - setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) - // 这里需要标记重置画布位置 - this.rePositionCanvas = true; - // 重新计算拖拽区域缩放比例 - setTimeout(() => { - chartEditStore.computedScale() - }, 500) - }, - setItemUnHandle(key: T, value: K): void { - this.$patch(state => { - state[key] = value - }) - } - } -}) +import { defineStore } from 'pinia' +import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' +import { setLocalStorage, getLocalStorage } from '@/utils' +import { StorageEnum } from '@/enums/storageEnum' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' + +const chartEditStore = useChartEditStore() + +const { GO_CHART_LAYOUT_STORE } = StorageEnum + +const storageChartLayout: Partial = getLocalStorage(GO_CHART_LAYOUT_STORE) + +// 编辑区域布局和静态设置 +export const useChartLayoutStore = defineStore({ + id: 'useChartLayoutStore', + state: (): ChartLayoutType => ({ + // 图层控制 + layers: true, + // 图表组件 + charts: true, + // 详情设置（收缩为true） + details: false, + // 组件列表展示类型（默认单列） + chartType: ChartModeEnum.SINGLE, + // 图层类型（默认图片） + layerType: LayerModeEnum.THUMBNAIL, + // 当前加载数量 + percentage: 0, + // 是否重置当前画布位置 + rePositionCanvas: false, + // 防止值不存在 + ...storageChartLayout + }), + getters: { + getLayers(): boolean { + return this.layers + }, + getCharts(): boolean { + return this.charts + }, + getDetails(): boolean { + return this.details + }, + getChartType(): ChartModeEnum { + return this.chartType + }, + getLayerType(): LayerModeEnum { + return this.layerType + }, + getPercentage(): number { + return this.percentage + }, + getRePositionCanvas(): boolean { + return this.rePositionCanvas + } + }, + actions: { + setItem( + key: T, + value: K, + computedScale = true + ): void { + this.$patch(state => { + state[key] = value + }) + // 存储本地 + setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) + // 这里需要标记重置画布位置 + this.rePositionCanvas = true; + // 重新计算拖拽区域缩放比例 + if (computedScale) { + setTimeout(() => { + chartEditStore.computedScale() + }, 500) + } + }, + setItemUnHandle(key: T, value: K): void { + this.$patch(state => { + state[key] = value + }) + } + } +}) diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts index eb69d0c1..45c7c609 100644 --- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts +++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts @@ -1,92 +1,92 @@ -import { shallowReactive, ref } from 'vue' -import { icon } from '@/plugins' -import { renderLang, renderIcon } from '@/utils' -import { themeColor, setItem, getCharts } from './useLayout.hook' -import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d' -// 图表 -import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' -import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' -// 图标 -const { BarChartIcon } = icon.ionicons5 -const { - TableSplitIcon, - RoadmapIcon, - SpellCheckIcon, - GraphicalDataFlowIcon, -} = icon.carbon - - -// 图表 -export type MenuOptionsType = { - key: string - icon: ReturnType - label: ReturnType - list: PackagesType -} - -const { getPackagesList } = usePackagesStore() -const menuOptions: MenuOptionsType[] = [] - -const packagesListObj = { - [PackagesCategoryEnum.CHARTS]: { - icon: renderIcon(RoadmapIcon), - label: PackagesCategoryName.CHARTS, - }, - [PackagesCategoryEnum.INFORMATIONS]: { - icon: renderIcon(SpellCheckIcon), - label: PackagesCategoryName.INFORMATIONS, - }, - [PackagesCategoryEnum.TABLES]: { - icon: renderIcon(TableSplitIcon), - label: PackagesCategoryName.TABLES, - }, - [PackagesCategoryEnum.DECORATES]: { - icon: renderIcon(GraphicalDataFlowIcon), - label: PackagesCategoryName.DECORATES, - }, -} - -// 处理列表 -const handlePackagesList = () => { - for (const val in getPackagesList) { - menuOptions.push({ - key: val, - // @ts-ignore - icon: packagesListObj[val].icon, - // @ts-ignore - label: packagesListObj[val].label, - // @ts-ignore - list: getPackagesList[val], - }) - } -} -handlePackagesList() - -// 记录选中值 -let beforeSelect: string = menuOptions[0]['key'] -const selectValue = ref(menuOptions[0]['key']) - -// 选中的对象值 -const selectOptions = ref(menuOptions[0]) - -// 点击 item -const clickItemHandle = (key: string, item: any) => { - selectOptions.value = item - // 处理折叠 - if (beforeSelect === key) { - setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value) - } else { - setItem(ChartLayoutStoreEnum.CHARTS, true) - } - beforeSelect = key -} - -export { - getCharts, - BarChartIcon, - themeColor, - selectOptions, - selectValue, - clickItemHandle, - menuOptions, -} +import { shallowReactive, ref } from 'vue' +import { icon } from '@/plugins' +import { renderLang, renderIcon } from '@/utils' +import { themeColor, setItem, getCharts } from './useLayout.hook' +import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d' +// 图表 +import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' +import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' +// 图标 +const { BarChartIcon } = icon.ionicons5 +const { + TableSplitIcon, + RoadmapIcon, + SpellCheckIcon, + GraphicalDataFlowIcon, +} = icon.carbon + + +// 图表 +export type MenuOptionsType = { + key: string + icon: ReturnType + label: ReturnType + list: PackagesType +} + +const { getPackagesList } = usePackagesStore() +const menuOptions: MenuOptionsType[] = [] + +const packagesListObj = { + [PackagesCategoryEnum.CHARTS]: { + icon: renderIcon(RoadmapIcon), + label: PackagesCategoryName.CHARTS, + }, + [PackagesCategoryEnum.INFORMATIONS]: { + icon: renderIcon(SpellCheckIcon), + label: PackagesCategoryName.INFORMATIONS, + }, + [PackagesCategoryEnum.TABLES]: { + icon: renderIcon(TableSplitIcon), + label: PackagesCategoryName.TABLES, + }, + [PackagesCategoryEnum.DECORATES]: { + icon: renderIcon(GraphicalDataFlowIcon), + label: PackagesCategoryName.DECORATES, + }, +} + +// 处理列表 +const handlePackagesList = () => { + for (const val in getPackagesList) { + menuOptions.push({ + key: val, + // @ts-ignore + icon: packagesListObj[val].icon, + // @ts-ignore + label: packagesListObj[val].label, + // @ts-ignore + list: getPackagesList[val], + }) + } +} +handlePackagesList() + +// 记录选中值 +let beforeSelect: string = menuOptions[0]['key'] +const selectValue = ref(menuOptions[0]['key']) + +// 选中的对象值 +const selectOptions = ref(menuOptions[0]) + +// 点击 item +const clickItemHandle = (key: string, item: any) => { + selectOptions.value = item + // 处理折叠 + if (beforeSelect === key) { + setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false) + } else { + setItem(ChartLayoutStoreEnum.CHARTS, true, false) + } + beforeSelect = key +} + +export { + getCharts, + BarChartIcon, + themeColor, + selectOptions, + selectValue, + clickItemHandle, + menuOptions, +} From 4dc8725b3e43e831c2c3a5c175b5652c5d075cd8 Mon Sep 17 00:00:00 2001 From: Ming <739803697@qq.com> Date: Thu, 4 May 2023 17:04:08 +0800 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=20=E5=85=88=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=90=8E=E8=A7=A6=E5=8F=91=E7=94=BB=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/ContentEdit/hooks/useLayout.hook.ts | 20 +++++++++++-------- src/views/chart/ContentEdit/index.vue | 4 ++-- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts index 1da17d5c..4fb3fb76 100644 --- a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts @@ -5,8 +5,9 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor const chartEditStore = useChartEditStore() // 布局处理 -export const useLayout = () => { - onMounted(() => { +export const useLayout = (fn: () => Promise) => { + let removeScale: Function = () => { } + onMounted(async () => { // 设置 Dom 值(ref 不生效先用 document) chartEditStore.setEditCanvas( EditCanvasTypeEnum.EDIT_LAYOUT_DOM, @@ -17,13 +18,16 @@ export const useLayout = () => { document.getElementById('go-chart-edit-content') ) + // 获取数据 + await fn() // 监听初始化 - const removeScale = chartEditStore.listenerScale() + removeScale = chartEditStore.listenerScale() - onUnmounted(() => { - chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null) - chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null) - removeScale() - }) + }) + + onUnmounted(() => { + chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null) + chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null) + removeScale() }) } \ No newline at end of file diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 34b7122a..f3820290 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -109,10 +109,10 @@ const chartEditStore = useChartEditStore() const { handleContextMenu } = useContextMenu() // 编辑时注入scale变量，消除警告 -provide(SCALE_KEY, null); +provide(SCALE_KEY, null) // 布局处理 -useLayout() +useLayout(async () => {}) // 点击事件 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() From 0370bc5c6cf7c5f62a6ee4f0e64e8ca128fc6849 Mon Sep 17 00:00:00 2001 From: Ming <739803697@qq.com> Date: Thu, 4 May 2023 17:07:35 +0800 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E4=B8=AD?= =?UTF-8?q?=E6=97=A0=E9=9C=80=E8=AE=A1=E7=AE=97hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/ContentEdit/components/EditShapeBox/index.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue index b509b32b..babd1211 100644 --- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue @@ -23,6 +23,8 @@