fix: 编写拖拽信息

src/enums/editPageEnum.ts

@@ -0,0 +1,4 @@
+// 页面拖拽键名
+export enum DragKeyEnum {
+  DROG_KEY = 'ChartData'
+}

src/packages/components/Chart/Bars/BarCommon/config.ts

@@ -0,0 +1,11 @@
+import { getUUID } from '@/utils'
+
+export class Config {
+  name: string = 'BarCommon'
+  id: string = getUUID()
+  attr = { w: 500, h: 300 }
+  // 图表的
+  public config = {
+    global: {}
+  }
+}

src/packages/components/Chart/Bars/BarCommon/config.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

src/packages/components/Chart/Bars/BarCommon/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div>
-    柱状图组件渲染
+    这里是柱状图组件渲染
   </div>
 </template>
 
 <script setup lang="ts">
-
+const props = defineProps({
+  chart: {
+    type: Object,
+    require: true
+  }
+})
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>

src/packages/index.ts

@@ -8,6 +8,7 @@ import { ChartList } from '@/packages/components/Chart/index'
 import { DecorateList } from '@/packages/components/Decorate/index'
 import { InformationList } from '@/packages/components/Information/index'
 import { TableList } from '@/packages/components/Table/index'
+import {} from './useCreate'
 
 // 所有图表
 let packagesList: PackagesType = {

src/packages/useCreate.ts

@@ -0,0 +1,9 @@
+import { ConfigType } from '@/packages/index.d'
+
+/**
+ * * 获取目标拖拽组件信息
+ * @param drayData
+ */
+export const createComponent = (drayData: Exclude<ConfigType, 'node'>) => {
+  
+}

src/router/router-guards.ts

@@ -5,7 +5,7 @@ import { PageEnum } from '@/enums/pageEnum'
 export function createRouterGuards(router: Router) {
   // 前置
   router.beforeEach(async (to, from, next) => {
-    const Loading = window['$loading'] || null;
+    const Loading = window['$loading'];
     Loading && Loading.start();
     const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);
     if (isErrorPage === -1) {
@@ -15,7 +15,7 @@ export function createRouterGuards(router: Router) {
   })
 
   router.afterEach((to, _, failure) => {
-    const Loading = window['$loading'] || null;
+    const Loading = window['$loading'];
     document.title = (to?.meta?.title as string) || document.title;
     Loading && Loading.finish();
   })

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -1,19 +1,19 @@
 // 编辑区域大小
 export enum EditCanvasTypeEnum {
-  EDITLAYOUTDOM = 'editLayoutDom',
+  EDIT_LAYOUT_DOM = 'editLayoutDom',
-  EDITCONTENTDON = 'editContentDom',
+  EDIT_CONTENT_DOM = 'editContentDom',
   WIDTH = 'width',
   HEIGHT = 'height',
   OFFSET = 'offset',
   SCALE = 'scale',
-  USERSCALE = 'userScale',
+  USER_SCALE = 'userScale',
-  LOCKSCALE = 'lockScale',
+  LOCK_SCALE = 'lockScale',
-  BACKGROUND = 'background'
+  BACKGROUND = 'background',
 }
 export type EditCanvasType = {
   // 编辑区域 DOM
-  [EditCanvasTypeEnum.EDITLAYOUTDOM]: HTMLElement | null
+  [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
-  [EditCanvasTypeEnum.EDITCONTENTDON]: HTMLElement | null
+  [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
   // 大屏宽度
   [EditCanvasTypeEnum.WIDTH]: number
   // 大屏高度
@@ -23,9 +23,9 @@ export type EditCanvasType = {
   // 缩放
   [EditCanvasTypeEnum.SCALE]: number
   // 缩放
-  [EditCanvasTypeEnum.USERSCALE]: number
+  [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
-  [EditCanvasTypeEnum.LOCKSCALE]: boolean
+  [EditCanvasTypeEnum.LOCK_SCALE]: boolean
   // 背景色
   [EditCanvasTypeEnum.BACKGROUND]?: string
 }
@@ -45,9 +45,12 @@ export type MousePositionType = {
 // Store 类型
 export enum chartEditStoreEnum {
   EDITCANVAS = 'editCanvas',
-  MOUSEPOSITION = 'mousePosition'
+  MOUSEPOSITION = 'mousePosition',
+  COMPONENT_LIST = 'componentList'
 }
+
 export interface chartEditStoreType {
   [chartEditStoreEnum.EDITCANVAS]: EditCanvasType
   [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType
+  [chartEditStoreEnum.COMPONENT_LIST]: any[]
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -32,7 +32,8 @@ export const useChartEditStoreStore = defineStore({
     mousePosition: {
       x: 0,
       y: 0
-    }
+    },
+    componentList: []
   }),
   getters: {
     getMousePosition(): MousePositionType {
@@ -41,8 +42,15 @@ export const useChartEditStoreStore = defineStore({
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
     },
+    getComponentList(): any[] {
+      return this.componentList
+    },
   },
   actions: {
+    // * 新增组件列表
+    addComponentList<T>(chartData:T):void {
+      this.componentList.push(chartData)
+    },
     // * 设置数据项
     setEditCanvasItem<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value

src/utils/utils.ts

@@ -7,7 +7,7 @@ import debounce from 'lodash/debounce'
  * * 生成一个不重复的ID
  * @param { Number } randomLength
  */
-export function getUUID(randomLength: number) {
+export function getUUID(randomLength: number = 10) {
   return Number(
     Math.random().toString().substr(2, randomLength) + Date.now()
   ).toString(36)

src/views/chart/components/ContentCharts/components/ItemBox/index.vue

@@ -28,6 +28,10 @@
 <script setup lang="ts">
 import { AppleControlBtn } from '@/components/AppleControlBtn/index'
 import { requireFallbackImg } from '@/utils'
+import { DragKeyEnum } from '@/enums/editPageEnum'
+import { ConfigType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
 defineProps({
   menuOptions: {
     type: Array,
@@ -36,11 +40,9 @@ defineProps({
 })
 
 // 拖拽处理
-const handleDragStart = (e: DragEvent, item: any) => {
+const handleDragStart = (e: DragEvent, item: ConfigType) => {
-  if (e.dataTransfer instanceof Object && e.target instanceof Object) {
+  // 将配置项绑定到拖拽属性上
-    e.dataTransfer.setData('chartName', item.key)
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
-    e.dataTransfer.setData('chartNode', item.node)
-  }
 }
 </script>
 

src/views/chart/components/ContentEdit/components/EditBottom/index.vue

@@ -109,7 +109,7 @@ const selectHandle = (v: number) => {
 // 点击锁处理
 const lockHandle = () => {
   chartEditStore.setEditCanvasItem(
-    chartEditStoreEnum.LOCKSCALE,
+    chartEditStoreEnum.LOCK_SCALE,
     !lockScale.value
   )
 }

src/views/chart/components/ContentEdit/hooks/useDrop.hook.ts

@@ -0,0 +1,35 @@
+import { toRefs } from 'vue'
+import { useThrottleFn } from '@vueuse/core'
+import { getChartEditStore } from './useStore.hook'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { DragKeyEnum } from '@/enums/editPageEnum'
+
+const chartEditStore = getChartEditStore()
+const { scale } = toRefs(chartEditStore.getEditCanvas)
+
+// * 拖拽中
+export const handleDrop = (e: DragEvent) => {
+  e.preventDefault()
+  const Loading = window['$loading']
+  try {
+    Loading.start()
+
+    const chartName = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
+    console.log(chartName)
+    chartEditStore.setMousePosition(e.offsetX, e.offsetY)
+
+    setTimeout(() => {
+      Loading.finish()
+    })
+  } catch (error) {
+    Loading.error()
+    window['$message'].success(`添加图表失败，请保存数据后刷新重试`)
+  }
+}
+
+// * 拖拽结束
+export const handleDragOver = (e: DragEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}

src/views/chart/components/ContentEdit/hooks/useLayout.hook.ts

@@ -6,13 +6,13 @@ const chartEditStore = getChartEditStore()
 
 export const useLayout = () => {
   onMounted(() => {
-    // 设置 Dom 值(ref 不生效先用document)
+    // 设置 Dom 值(ref 不生效先用 document)
     chartEditStore.setEditCanvasItem(
-      EditCanvasTypeEnum.EDITLAYOUTDOM,
+      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
       document.getElementById('go-chart-edit-layout')
     )
     chartEditStore.setEditCanvasItem(
-      EditCanvasTypeEnum.EDITCONTENTDON,
+      EditCanvasTypeEnum.EDIT_CONTENT_DOM,
       document.getElementById('go-chart-edit-content')
     )
 

src/views/chart/components/ContentEdit/index.vue

@@ -6,6 +6,8 @@
     :showTop="false"
     :showBottom="true"
     :depth="1"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
@@ -19,15 +21,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted } from 'vue'
+import { onUnmounted, onMounted,toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { useLayout } from './hooks/useLayout.hook'
+import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 
 // 布局处理
 useLayout()
-
 </script>
 
 <style lang="scss" scoped>
@@ -35,7 +37,7 @@ useLayout()
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image("background-point");
+  @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     position: relative;
@@ -47,7 +49,7 @@ useLayout()
     @extend .go-transition;
     &.content-resize {
       border-radius: 15px;
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
   }
 }