diff --git a/src/layout/components/LayoutHeader/index.vue b/src/layout/components/LayoutHeader/index.vue index d90ba699..dd63af9e 100644 --- a/src/layout/components/LayoutHeader/index.vue +++ b/src/layout/components/LayoutHeader/index.vue @@ -13,8 +13,8 @@ - + diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 00b7b97d..405a8047 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -1,11 +1,11 @@ -import { Component } from '@/router/types' -import { GlobalThemeJsonType } from '@/settings/chartThemes/index' +import type { GlobalThemeJsonType } from '@/settings/chartThemes/index' +import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' // 组件配置 export type ConfigType = { key: string - chartKey: string, - conKey: string, + chartKey: string + conKey: string title: string category: string categoryName: string @@ -13,22 +13,27 @@ export type ConfigType = { image: string | (() => Promise) } +// 数据请求 +interface requestConfig { + data: RequestConfigType +} + // 组件实例类 -export interface PublicConfigType { +export interface PublicConfigType extends requestConfig { id: string rename?: string attr: { x: number; y: number; w: number; h: number; zIndex: number } - styles: { opacity: number, animations: string[] } + styles: { opacity: number; animations: string[] } setPosition: Function } export interface CreateComponentType extends PublicConfigType { key: string - chartConfig: Omit + chartConfig: ConfigType option: GlobalThemeJsonType } // 获取组件实例类中某个key对应value类型的方法 -export type PickCreateComponentType = Pick[T] +export type PickCreateComponentType = Pick[T] // 包分类枚举 export enum PackagesCategoryEnum { @@ -48,7 +53,8 @@ export enum PackagesCategoryName { // 获取组件 export enum FetchComFlagType { - VIEW, CONFIG + VIEW, + CONFIG } // 图表包类型 diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index d4f1aa11..7212d610 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,10 @@ import { getUUID } from '@/utils' import { PublicConfigType } from '@/packages/index.d' +import { RequestDataTypeEnum, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' + +const requestConfig: RequestConfigType = { + requestDataType: RequestDataTypeEnum.STATIC, +} export class publicConfig implements PublicConfigType { public id = getUUID() @@ -12,6 +17,11 @@ export class publicConfig implements PublicConfigType { opacity: 1, animations: [] } + public data = { + requestDataType: RequestDataTypeEnum.STATIC + } + // 数据获取 + public requestData = { ...requestConfig } // 设置坐标 public setPosition(x: number, y: number): void { this.attr.x = x diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 7dbe0e73..9cf58a69 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,6 +1,9 @@ import { CreateComponentType } from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' -import { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' +import type { + ChartColorsNameType, + GlobalThemeJsonType +} from '@/settings/chartThemes/index' // 编辑画布属性 export enum EditCanvasTypeEnum { @@ -10,7 +13,7 @@ export enum EditCanvasTypeEnum { SCALE = 'scale', USER_SCALE = 'userScale', LOCK_SCALE = 'lockScale', - IS_DRAG= 'isDrag', + IS_DRAG = 'isDrag' } // 编辑区域 @@ -30,7 +33,7 @@ export type EditCanvasType = { [EditCanvasTypeEnum.IS_DRAG]: boolean } -// 滤镜 +// 滤镜/背景色/宽高主题等 export enum EditCanvasConfigEnum { WIDTH = 'width', HEIGHT = 'height', @@ -108,14 +111,33 @@ export type RecordChartType = { export enum ChartEditStoreEnum { EDIT_RANGE = 'editRange', EDIT_CANVAS = 'editCanvas', - EDIT_CANVAS_CONFIG = 'editCanvasConfig', RIGHT_MENU_SHOW = 'rightMenuShow', MOUSE_POSITION = 'mousePosition', TARGET_CHART = 'targetChart', RECORD_CHART = 'recordChart', + // 以下需要存储 + EDIT_CANVAS_CONFIG = 'editCanvasConfig', + REQUEST_CONFIG = 'requestConfig', COMPONENT_LIST = 'componentList' } +// 数据相关 +export enum RequestDataTypeEnum { + // 静态数据 + STATIC = 'static', + // 请求数据 + AJAX = 'ajax' +} + +// 数据配置 +export type RequestConfigType = { + // 获取数据的方式 + requestDataType: RequestDataTypeEnum, + // 请求源地址 + requestUrl?: string, + requestInterval?: number +} + // Store 类型 export interface ChartEditStoreType { [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType @@ -124,10 +146,12 @@ export interface ChartEditStoreType { [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType [ChartEditStoreEnum.TARGET_CHART]: TargetChartType [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType + [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] } export interface ChartEditStorage { - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType, + [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType + [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] } \ No newline at end of file diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index f2a619eb..8d745e62 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -15,6 +15,8 @@ import { MousePositionType, TargetChartType, RecordChartType, + RequestConfigType, + RequestDataTypeEnum, EditCanvasConfigType } from './chartEditStore.d' @@ -82,6 +84,12 @@ export const useChartEditStore = defineStore({ // 全局配置 chartThemeSetting: globalThemeJson }, + // 数据请求处理 + requestConfig: { + requestDataType: RequestDataTypeEnum.STATIC, + requestUrl: undefined, + requestInterval: 10 + }, // 图表数组(需存储给后端) componentList: [] }), @@ -104,6 +112,9 @@ export const useChartEditStore = defineStore({ getRecordChart(): RecordChartType | undefined { return this.recordChart }, + getRequestConfig(): RequestConfigType { + return this.requestConfig + }, getComponentList(): CreateComponentType[] { return this.componentList }, @@ -111,7 +122,8 @@ export const useChartEditStore = defineStore({ getStorageInfo(): ChartEditStorage { return { [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig, - [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList + [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList, + [ChartEditStoreEnum.REQUEST_CONFIG]: this.getRequestConfig } } }, diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue index b0a11877..adf765b7 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue @@ -1,7 +1,37 @@ \ No newline at end of file +import { computed, Ref } from 'vue' +import { SettingItemBox } from '@/components/ChartItemSetting/index' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' + +const chartEditStore = useChartEditStore() + +const requestConfig: Ref = computed(() => { + return chartEditStore.getRequestConfig +}) + + + diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue index 56978192..1a693517 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue @@ -4,10 +4,8 @@ - - \ No newline at end of file + diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 4299dc91..36e4d73f 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -74,7 +74,7 @@ const selectId = computed(() => chartEditStore.getTargetChart.selectId) const selectTatget = computed( () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()] ) -const selectAttr = computed(() => selectTatget.value.attr) +const selectAttr = computed(() => selectTatget.value.attr || {}) // * 画布坐标 const canvasPositionList = computed(() => { diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue index 26b6d1a6..d6d5b58d 100644 --- a/src/views/chart/ContentEdit/components/EditRule/index.vue +++ b/src/views/chart/ContentEdit/components/EditRule/index.vue @@ -44,7 +44,7 @@ const lines = { /* 横线 */ #mb-ruler .v-container .lines .line { /* 最大缩放 200% */ - height: 200vw!important; + width: 200vw!important; border-top: 1px dashed v-bind('themeColor') !important; }