feat: 新增数据请求配置

src/layout/components/LayoutHeader/index.vue

@@ -13,8 +13,8 @@
         <n-space>
           <slot name="ri-left"> </slot>
           <lang-select></lang-select>
-          <Theme-select></Theme-select>
           <theme-color-select></theme-color-select>
+          <Theme-select></Theme-select>
           <slot name="ri-right"> </slot>
         </n-space>
       </div>

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<typeof import('*.png')>)
 }
 
+// 数据请求
+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<ConfigType, 'node' | 'conNode'>
+  chartConfig: ConfigType
   option: GlobalThemeJsonType
 }
 
 // 获取组件实例类中某个key对应value类型的方法
-export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T]
+export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType,T>[T]
 
 // 包分类枚举
 export enum PackagesCategoryEnum {
@@ -48,7 +53,8 @@ export enum PackagesCategoryName {
 
 // 获取组件
 export enum FetchComFlagType {
-  VIEW, CONFIG
+  VIEW,
+  CONFIG
 }
 
 // 图表包类型

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

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[]
 }

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
       }
     }
   },

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue

@@ -1,7 +1,37 @@
 <template>
-  <h1>全局接口配置</h1>
+  <div>
+    <setting-item-box name="源地址" :alone="true">
+      <n-input
+        v-model:value="requestConfig.requestUrl"
+        placeholder="源地址如: http://127.0.0.1"
+      ></n-input>
+    </setting-item-box>
+    <setting-item-box name="更新间隔">
+      <n-input-number
+        v-model:value="requestConfig.requestInterval"
+        min="0"
+        :show-button="false"
+        placeholder="为 0 不更新"
+      >
+        <template #suffix>
+          秒
+        </template>
+      </n-input-number>
+    </setting-item-box>
+  </div>
 </template>
 
 <script setup lang="ts">
+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<RequestConfigType> = computed(() => {
+  return chartEditStore.getRequestConfig
+})
 </script>
+
+<style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -4,10 +4,8 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts" >
 
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

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(() => {

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;
   
 }