From d820cce6d42b968a5e0b6792cb9059bd876e509b Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Sat, 29 Jan 2022 21:44:22 +0800 Subject: [PATCH] =?UTF-8?q?featr:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Bars/BarCommon/config.ts | 10 +-- src/packages/index.d.ts | 14 ++- .../chartEditStore/chartEditStore.d.ts | 13 +-- .../modules/chartEditStore/chartEditStore.ts | 27 ++++-- .../components/EditBottom/index.vue | 4 +- .../components/ListItem/index.vue | 88 ++++++++++++++----- src/views/chart/ContentLayers/index.vue | 26 +++++- 7 files changed, 137 insertions(+), 45 deletions(-) diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts index 1e454d42..15bb9b6f 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.ts +++ b/src/packages/components/Charts/Bars/BarCommon/config.ts @@ -1,13 +1,13 @@ import { getUUID } from '@/utils' import { BarCommonConfig } from './index' -import { ConfigType } from '@/packages/index.d' +import { ConfigType, CreateComponentType } from '@/packages/index.d' import omit from 'lodash/omit' -export default class Config { - private id: string = getUUID() - private key: string = BarCommonConfig.key +export default class Config implements CreateComponentType { + public id: string = getUUID() + public key: string = BarCommonConfig.key - chartData: Exclude = omit(BarCommonConfig, ['node']) + public chartData: Exclude = omit(BarCommonConfig, ['node']) public attr = { x: 0, y: 0, w: 500, h: 300 } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index a4e24360..7b2154fb 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -1,6 +1,6 @@ import { Component } from '@/router/types' -// import { ConfigType } from '@/packages/index.d' +// 组件配置 export type ConfigType = { key: string title: string @@ -12,6 +12,16 @@ export type ConfigType = { [T: string]: unknown } +// 组件实例类 +export interface CreateComponentType { + id: string + key: string + chartData: ConfigType + config: object + setPosition: Function +} + +// 包分类枚举 export enum PackagesCategoryEnum { CHARTS = 'Charts', TABLES = 'Tables', @@ -19,6 +29,7 @@ export enum PackagesCategoryEnum { DECORATES = 'Decorates' } +// 包分类名称 export enum PackagesCategoryName { CHARTS = '图表', TABLES = '表格', @@ -26,6 +37,7 @@ export enum PackagesCategoryName { DECORATES = '小组件' } +// 图表包类型 export type PackagesType = { [PackagesCategoryEnum.CHARTS]: ConfigType[] [PackagesCategoryEnum.INFORMATION]: ConfigType[] diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 725b4215..b751245f 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -44,11 +44,12 @@ export type MousePositionType = { // 操作目标 export type TargetChartType = { - index: number + hoverIndex?: string + selectIndex?: string } // Store 类型 -export enum chartEditStoreEnum { +export enum ChartEditStoreEnum { EDITCANVAS = 'editCanvas', MOUSEPOSITION = 'mousePosition', COMPONENT_LIST = 'componentList', @@ -56,8 +57,8 @@ export enum chartEditStoreEnum { } export interface chartEditStoreType { - [chartEditStoreEnum.EDITCANVAS]: EditCanvasType - [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType - [chartEditStoreEnum.TARGET_CHART]: TargetChartType - [chartEditStoreEnum.COMPONENT_LIST]: any[] + [ChartEditStoreEnum.EDITCANVAS]: EditCanvasType + [ChartEditStoreEnum.MOUSEPOSITION]: MousePositionType + [ChartEditStoreEnum.TARGET_CHART]: TargetChartType + [ChartEditStoreEnum.COMPONENT_LIST]: any[] } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index ff6ca6c2..503cd394 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -4,7 +4,8 @@ import { loadingStart, loadingFinish, loadingError } from '@/utils' import { chartEditStoreType, EditCanvasType, - MousePositionType + MousePositionType, + TargetChartType } from './chartEditStore.d' // 编辑区域内容 @@ -35,7 +36,8 @@ export const useChartEditStoreStore = defineStore({ y: 0 }, targetChart: { - index: 0 + hoverIndex: undefined, + selectIndex: undefined }, componentList: [] }), @@ -46,11 +48,25 @@ export const useChartEditStoreStore = defineStore({ getEditCanvas(): EditCanvasType { return this.editCanvas }, + getTargetChart():TargetChartType { + return this.targetChart + }, getComponentList(): any[] { return this.componentList } }, actions: { + // * 设置 editCanvas 数据项 + setEditCanvasItem< T extends keyof EditCanvasType, K extends EditCanvasType[T] >(key: T, value: K) { + this.editCanvas[key] = value + }, + // * 设置目标数据 + setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) { + this.targetChart.hoverIndex = hoverIndex + }, + setTargetSelectChart(selectIndex?:TargetChartType["selectIndex"]) { + this.targetChart.selectIndex = selectIndex + }, // * 新增组件列表 addComponentList(chartData: T): void { this.componentList.push(chartData) @@ -75,13 +91,6 @@ export const useChartEditStoreStore = defineStore({ loadingError() } }, - // * 设置数据项 - setEditCanvasItem< - T extends keyof EditCanvasType, - K extends EditCanvasType[T] - >(key: T, value: K) { - this.editCanvas[key] = value - }, // * 设置页面样式属性 setPageStyle( key: T, diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue index d86da7c7..8524e43d 100644 --- a/src/views/chart/ContentEdit/components/EditBottom/index.vue +++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue @@ -75,7 +75,7 @@ const designStore = useDesignStore() const themeColor = ref(designStore.getAppTheme) const chartEditStore = getChartEditStore() -const chartEditStoreEnum = getChartEditStoreEnum() +const ChartEditStoreEnum = getChartEditStoreEnum() const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas) // 缩放选项 @@ -117,7 +117,7 @@ const selectHandle = (v: number) => { // 点击锁处理 const lockHandle = () => { chartEditStore.setEditCanvasItem( - chartEditStoreEnum.LOCK_SCALE, + ChartEditStoreEnum.LOCK_SCALE, !lockScale.value ) } diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue index 0eea9707..ec283a2b 100644 --- a/src/views/chart/ContentLayers/components/ListItem/index.vue +++ b/src/views/chart/ContentLayers/components/ListItem/index.vue @@ -1,27 +1,36 @@