From 4d560ab93751f78598b5334dc044795a60f515c1 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: Fri, 5 Aug 2022 21:12:05 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?= =?UTF-8?q?=E7=9A=84=E5=85=A8=E9=83=A8=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?,=20=E7=BB=93=E6=9E=84=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.d.ts | 13 +++-- src/packages/public/publicConfig.ts | 48 +++++++++++++++++-- .../chartEditStore/chartEditStore.d.ts | 9 ++-- .../modules/chartEditStore/chartEditStore.ts | 32 +++++++++---- .../chartHistoryStore/chartHistoryStore.d.ts | 4 +- .../chartHistoryStore/chartHistoryStore.ts | 16 +++---- .../components/ChartDataRequest/index.vue | 5 +- src/views/chart/hooks/useContextMenu.hook.ts | 8 ++-- 8 files changed, 100 insertions(+), 35 deletions(-) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 41a1caac..9e0c88d7 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -60,9 +60,8 @@ export enum FilterEnum { } // 组件实例类 -export interface PublicConfigType extends requestConfig { +export interface PublicConfigType { id: string - rename?: string attr: { x: number; y: number; w: number; h: number; zIndex: number } styles: { [FilterEnum.OPACITY]: number; @@ -84,12 +83,20 @@ export interface PublicConfigType extends requestConfig { setPosition: Function } -export interface CreateComponentType extends PublicConfigType { +export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType option: GlobalThemeJsonType } +// 组件成组实例类 (部分属性用不到设置为 any) +export interface CreateComponentGroupType extends PublicConfigType { + chartConfig: { + categoryName: string + } + groupList: Array +} + // 获取组件实例类中某个key对应value类型的方法 export type PickCreateComponentType = Pick[T] diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 8a3bd08a..33d1113c 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,5 @@ import { getUUID } from '@/utils' -import { PublicConfigType } from '@/packages/index.d' +import { PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { RequestHttpEnum, @@ -10,6 +10,7 @@ import { } from '@/enums/httpEnum' import { chartInitConfig } from '@/settings/designSetting' +// 请求基础属性 const requestConfig: RequestConfigType = { requestDataType: RequestDataTypeEnum.STATIC, requestHttpType: RequestHttpEnum.GET, @@ -33,10 +34,9 @@ const requestConfig: RequestConfigType = { } } +// 单实例类 export class publicConfig implements PublicConfigType { public id = getUUID() - // 重命名 - public rename = undefined // 基本信息 public attr = { ...chartInitConfig, zIndex: -1 } // 基本样式 @@ -75,3 +75,45 @@ export class publicConfig implements PublicConfigType { this.attr.y = y } } + +// 成组类 (部分属性不需要, 不继承 publicConfig) +export class PublicGroupConfigClass implements CreateComponentGroupType { + public id = getUUID() + chartConfig = { + categoryName: '分组' + } + // 基本信息 + public attr = { ...chartInitConfig, zIndex: -1 } + // 基本样式 + public styles = { + // 色相 + hueRotate: 0, + // 饱和度 + saturate: 1, + // 对比度 + contrast: 1, + // 亮度 + brightness: 1, + // 透明 + opacity: 1, + + // 旋转 + rotateZ: 0, + rotateX: 0, + rotateY: 0, + + // 倾斜 + skewX: 0, + skewY: 0, + + // 动画 + animations: [] + } + // 组成员列表 + public groupList: Array = [] + // 设置坐标 + public setPosition(x: number, y: number): void { + this.attr.x = x + this.attr.y = y + } +} diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 8e8ec864..599d1fdd 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,4 +1,4 @@ -import { CreateComponentType, FilterEnum } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { RequestHttpEnum, @@ -117,7 +117,7 @@ export type TargetChartType = { // 数据记录 export type RecordChartType = { - charts: CreateComponentType | CreateComponentType[] + charts: CreateComponentType | CreateComponentType[] | CreateComponentGroupType type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY } @@ -180,11 +180,12 @@ export interface ChartEditStoreType { [ChartEditStoreEnum.TARGET_CHART]: TargetChartType [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType - [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] + [ChartEditStoreEnum.COMPONENT_LIST]: Array } +// 存储数据类型 export interface ChartEditStorage { [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType - [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] + [ChartEditStoreEnum.COMPONENT_LIST]: Array } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 27cab452..828314d0 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -1,10 +1,10 @@ import { defineStore } from 'pinia' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' +import { PublicGroupConfigClass } from '@/packages/public/publicConfig' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting' -import { RequestBodyEnum } from '@/enums/httpEnum' // 记录记录 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' // 全局设置 @@ -148,7 +148,7 @@ export const useChartEditStore = defineStore({ getRequestGlobalConfig(): RequestGlobalConfigType { return this.requestGlobalConfig }, - getComponentList(): CreateComponentType[] { + getComponentList(): Array { return this.componentList }, // 获取需要存储的数据项 @@ -243,7 +243,7 @@ export const useChartEditStore = defineStore({ * @param isHistory 是否进行记录 * @returns */ - addComponentList(chartConfig: CreateComponentType, isHead = false, isHistory = false): void { + addComponentList(chartConfig: CreateComponentType | CreateComponentGroupType, isHead = false, isHistory = false): void { if (isHistory) { chartHistoryStore.createAddHistory(chartConfig) } @@ -253,7 +253,7 @@ export const useChartEditStore = defineStore({ } this.componentList.push(chartConfig) }, - // * 删除组件列表 + // * 删除单个组件 removeComponentList(isHistory = true): void { try { loadingStart() @@ -269,7 +269,7 @@ export const useChartEditStore = defineStore({ } }, // * 更新组件列表某一项的值 - updateComponentList(index: number, newData: CreateComponentType) { + updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { if (index < 1 && index > this.getComponentList.length) return this.componentList[index] = newData }, @@ -303,7 +303,7 @@ export const useChartEditStore = defineStore({ } // 记录原有位置 - const setIndex = (t:CreateComponentType, i:number) => { + const setIndex = (t:CreateComponentType | CreateComponentGroupType, i:number) => { const temp = cloneDeep(t) temp.attr.zIndex = i return temp @@ -412,7 +412,7 @@ export const useChartEditStore = defineStore({ loadingFinish() return } - const parseHandle = (e: CreateComponentType) => { + const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => { e = cloneDeep(e) // 生成新 id e.id = getUUID() @@ -566,6 +566,22 @@ export const useChartEditStore = defineStore({ break; } }, + // * 创建分组 + setGroup() { + const groupClass = new PublicGroupConfigClass() + this.getTargetChart.selectId.forEach((id: string) => { + // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理) + const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType + groupClass.groupList.push(item) + }) + this.addComponentList(groupClass) + // todo 输出 + console.log(this.getComponentList) + }, + // * 解除分组 + setUnGroup() { + + }, // ---------------- // * 设置页面大小 setPageSize(scale: number): void { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 624b954b..835a4dc9 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -1,4 +1,4 @@ -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' // 操作类型枚举 @@ -55,7 +55,7 @@ export interface HistoryItemType { [HistoryStackItemEnum.ID]: string | string[] [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum - [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType + [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | CreateComponentGroupType | EditCanvasType } // 历史 Store 类型 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 31b0425d..9f362160 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' import { loadingStart, loadingFinish, loadingError } from '@/utils' import { editHistoryMax } from '@/settings/designSetting' @@ -35,7 +35,7 @@ export const useChartHistoryStore = defineStore({ * @param targetType 对象类型（默认图表） */ createStackItem( - item: CreateComponentType | EditCanvasType, + item: CreateComponentType | CreateComponentGroupType | EditCanvasType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART ) { @@ -148,7 +148,7 @@ export const useChartHistoryStore = defineStore({ } }, // * 新增组件记录 - createAddHistory(item: CreateComponentType) { + createAddHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.ADD, @@ -156,7 +156,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 更新属性记录（大小、图表属性） - createUpdateHistory(item: CreateComponentType) { + createUpdateHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.UPDATE, @@ -164,7 +164,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 删除组件记录 - createDeleteHistory(item: CreateComponentType) { + createDeleteHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.DELETE, @@ -172,7 +172,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 移动组件记录 - createMoveHistory(item: CreateComponentType) { + createMoveHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.MOVE, @@ -181,7 +181,7 @@ export const useChartHistoryStore = defineStore({ }, // * 改变层级组件记录 createLayerHistory( - item: CreateComponentType, + item: CreateComponentType | CreateComponentGroupType, type: | HistoryActionTypeEnum.TOP | HistoryActionTypeEnum.DOWN @@ -195,7 +195,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 剪切组件记录 - createPasteHistory(item: CreateComponentType) { + createPasteHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.CUT, diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue index ab469c05..36fb25b2 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue @@ -15,7 +15,7 @@