index.d.ts 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. import { BaseEvent, EventLife } from '@/enums/eventEnum'
  2. import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
  3. import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
  4. export enum ChartFrameEnum {
  5. // 支持 dataset 的 echarts 框架
  6. ECHARTS = 'echarts',
  7. // UI 组件框架
  8. NAIVE_UI = 'naiveUI',
  9. // 自定义带数据组件
  10. COMMON = 'common',
  11. // 无数据变更
  12. STATIC = 'static'
  13. }
  14. // 组件配置
  15. export type ConfigType = {
  16. key: string
  17. chartKey: string
  18. conKey: string
  19. title: string
  20. category: string
  21. categoryName: string
  22. package: string
  23. chartFrame?: ChartFrameEnum
  24. image: string
  25. }
  26. // 数据请求
  27. interface requestConfig {
  28. request: RequestConfigType
  29. }
  30. // Echarts 数据类型
  31. interface EchartsDataType {
  32. dimensions: string[]
  33. source: any[]
  34. }
  35. // 组件状态
  36. export interface StatusType {
  37. lock: boolean
  38. hide: boolean
  39. }
  40. // 滤镜/变换枚举
  41. export enum FilterEnum {
  42. // 是否启用
  43. FILTERS_SHOW = 'filterShow',
  44. // 透明度
  45. OPACITY = 'opacity',
  46. // 饱和度
  47. SATURATE = 'saturate',
  48. // 对比度
  49. CONTRAST = 'contrast',
  50. // 色相
  51. HUE_ROTATE = 'hueRotate',
  52. // 亮度
  53. BRIGHTNESS = 'brightness',
  54. // 旋转
  55. ROTATE_Z = 'rotateZ',
  56. ROTATE_X = 'rotateX',
  57. ROTATE_Y = 'rotateY',
  58. // 倾斜
  59. SKEW_X = 'skewX',
  60. SKEW_Y = 'skewY',
  61. // 混合模式
  62. BLEND_MODE = 'blendMode'
  63. }
  64. export const BlendModeEnumList = [
  65. { label: '正常', value: 'normal' },
  66. { label: '正片叠底', value: 'multiply' },
  67. { label: '叠加', value: 'overlay' },
  68. { label: '滤色', value: 'screen' },
  69. { label: '变暗', value: 'darken' },
  70. { label: '变亮', value: 'lighten' },
  71. { label: '颜色减淡', value: 'color-dodge' },
  72. { label: '颜色加深', value: 'color-burn;' },
  73. { label: '强光', value: 'hard-light' },
  74. { label: '柔光', value: 'soft-light' },
  75. { label: '差值', value: 'difference' },
  76. { label: '排除', value: 'exclusion' },
  77. { label: '色相', value: 'hue' },
  78. { label: '饱和度', value: 'saturation' },
  79. { label: '颜色', value: 'color' },
  80. { label: '亮度', value: 'luminosity' }
  81. ]
  82. // 组件实例类
  83. export interface PublicConfigType {
  84. id: string
  85. isGroup: boolean
  86. attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number }
  87. styles: {
  88. [FilterEnum.FILTERS_SHOW]: boolean
  89. [FilterEnum.OPACITY]: number
  90. [FilterEnum.SATURATE]: number
  91. [FilterEnum.CONTRAST]: number
  92. [FilterEnum.HUE_ROTATE]: number
  93. [FilterEnum.BRIGHTNESS]: number
  94. [FilterEnum.ROTATE_Z]: number
  95. [FilterEnum.ROTATE_X]: number
  96. [FilterEnum.ROTATE_Y]: number
  97. [FilterEnum.SKEW_X]: number
  98. [FilterEnum.SKEW_Y]: number
  99. [FilterEnum.BLEND_MODE]: string
  100. // 动画
  101. animations: string[]
  102. }
  103. filter?: string
  104. status: StatusType
  105. events: {
  106. baseEvent: {
  107. [K in BaseEvent]?: string
  108. },
  109. advancedEvents: {
  110. [K in EventLife]?: string
  111. }
  112. }
  113. }
  114. export interface CreateComponentType extends PublicConfigType, requestConfig {
  115. key: string
  116. chartConfig: ConfigType
  117. option: GlobalThemeJsonType,
  118. }
  119. // 组件成组实例类
  120. export interface CreateComponentGroupType extends CreateComponentType {
  121. groupList: Array<CreateComponentType>
  122. }
  123. // 获取组件实例类中某个key对应value类型的方法
  124. export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T]
  125. // 包分类枚举
  126. export enum PackagesCategoryEnum {
  127. CHARTS = 'Charts',
  128. TABLES = 'Tables',
  129. INFORMATIONS = 'Informations',
  130. DECORATES = 'Decorates'
  131. }
  132. // 包分类名称
  133. export enum PackagesCategoryName {
  134. CHARTS = '图表',
  135. TABLES = '列表',
  136. INFORMATIONS = '信息',
  137. DECORATES = '小组件'
  138. }
  139. // 获取组件
  140. export enum FetchComFlagType {
  141. VIEW,
  142. CONFIG
  143. }
  144. // 图表包类型
  145. export type PackagesType = {
  146. [PackagesCategoryEnum.CHARTS]: ConfigType[]
  147. [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
  148. [PackagesCategoryEnum.TABLES]: ConfigType[]
  149. [PackagesCategoryEnum.DECORATES]: ConfigType[]
  150. }