fix: 新增图表居中拖拽

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

@@ -1,10 +1,15 @@
 import { getUUID } from '@/utils'
 import { BarCommonConfig } from './index'
 
+export const chartSize = {
+  w: 500,
+  h: 300
+}
+
 export default class Config {
   private id: string = getUUID()
   private key: string = BarCommonConfig.key
-  public attr = { x: 0, y: 0, w: 500, h: 300 }
+  public attr = { x: 0, y: 0, ...chartSize }
 
   // 图表配置项
   public config = {
@@ -17,21 +22,21 @@ export default class Config {
     },
     xAxis: {
       type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
-      type: 'value',
+      type: 'value'
     },
     series: [
       {
         data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar',
-      },
-    ],
+        type: 'bar'
+      }
+    ]
   }
 
   // 设置坐标
-  public setPosition(x: number, y: number):void {
+  public setPosition(x: number, y: number): void {
     this.attr.x = x
     this.attr.y = y
   }

src/packages/components/Charts/Bars/BarCommon/index.ts

@@ -2,6 +2,7 @@ import BarCommon from './index.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { chartSize } from './config'
 
 export const BarCommonConfig: ConfigType = {
   key: 'VBarCommon',
@@ -10,5 +11,6 @@ export const BarCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   node: BarCommon,
-  image: image
+  image: image,
+  chartData: { chartSize }
 }

src/packages/index.d.ts

@@ -7,6 +7,12 @@ export type ConfigType = {
   category: string
   categoryName: string
   package: string
+  chartData: {
+    chartSize: {
+      w: number
+      h: number
+    }
+  }
   node: Component
   image: string | (() => Promise<typeof import('*.png')>)
   [T: string]: unknown
@@ -16,14 +22,14 @@ export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
   TABLES = 'Tables',
   INFORMATION = 'Informations',
-  DECORATES = 'Decorates',
+  DECORATES = 'Decorates'
 }
 
 export enum PackagesCategoryName {
   CHARTS = '图表',
   TABLES = '表格',
   INFORMATION = '信息',
-  DECORATES = '小组件',
+  DECORATES = '小组件'
 }
 
 export type PackagesType = {

src/store/modules/chartEditStore/chartEditStore.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import debounce from 'lodash/debounce'
+import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import {
   chartEditStoreType,
   EditCanvasType,
@@ -53,16 +54,23 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 删除组件列表
     removeComponentList<T extends { key: string }>(chartData: T | number): void {
-      if(typeof chartData === 'number') {
-        this.componentList.splice(chartData, 1)
-        return
+      loadingStart()
+      try {
+        if(typeof chartData === 'number') {
+          this.componentList.splice(chartData, 1)
+          loadingFinish()
+          return
+        }
+        const i = this.componentList.findIndex(e => e.key === chartData.key)
+        if (i !== -1) {
+          this.componentList.splice(i, 1)
+          loadingFinish()
+          return
+        }
+        window['$message'].success(`图表删除失败，无法找到此元素`)
+      } catch(value) {
+        loadingError()
       }
-      const i = this.componentList.findIndex(e => e.key === chartData.key)
-      if (i !== -1) {
-        this.componentList.splice(i, 1)
-        return
-      }
-      window['$message'].success(`图表删除失败，无法找到此元素`)
     },
     // * 设置数据项
     setEditCanvasItem<

src/utils/plugin.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue'
 import { icon } from '@/plugins'
 import { DialogEnum } from '@/enums/pluginEnum'
 import { dialogIconSize } from '@/settings/designSetting'
@@ -6,6 +7,25 @@ import { DialogReactive } from 'naive-ui'
 const { InformationCircleIcon } = icon.ionicons5
 import { renderIcon } from '@/utils'
 
+// * 开启加载
+export const loadingStart = () => {
+  window['$loading'].start()
+}
+
+// * 加载结束
+export const loadingFinish = () => {
+  setTimeout(() => {
+    window['$loading'].finish()
+  })
+}
+
+// * 加载错误
+export const loadingError = () => {
+  setTimeout(() => {
+    window['$loading'].error()
+  })
+}
+
 /**
  * * render 对话框
  * @param { Object} params 配置参数

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

@@ -1,16 +1,20 @@
 <template>
-  <div class="go-edit-range">
+  <div class="go-edit-range" :style="useSizeStyle(size)">
     <slot></slot>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useSizeStyle } from '../../hooks/useStyle.hook'
+const size = {
+  w: 1920,
+  h: 1080
+}
+</script>
 
 <style lang="scss" scoped>
 @include go(edit-range) {
   position: relative;
-  height: 1080px;
-  width: 1920px;
   border: 1px solid;
   background-color: #333;
   border-radius: 15px;

src/views/chart/ContentEdit/hooks/useContextMenu.hook.ts

@@ -1,5 +1,7 @@
 import { reactive, ref, nextTick } from 'vue'
 import { getChartEditStore } from './useStore.hook'
+import { loadingError } from '@/utils'
+
 const chartEditStore = getChartEditStore()
 
 enum MenuEnum {
@@ -46,6 +48,7 @@ export const useContextMenu = () => {
       case MenuEnum.DELETE:
         chartEditStore.removeComponentList(targetIndex.value)
         break
+      default: loadingError()
     }
   }
 

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

@@ -3,6 +3,7 @@ import { getChartEditStore } from './useStore.hook'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
+import { loadingStart, loadingFinish, loadingError } from '@/utils'
 
 const chartEditStore = getChartEditStore()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
@@ -10,27 +11,26 @@ const { scale } = toRefs(chartEditStore.getEditCanvas)
 // * 拖拽中
 export const handleDrop = async (e: DragEvent) => {
   e.preventDefault()
-  const Loading = window['$loading']
+
   try {
-    Loading.start()
+    loadingStart()
 
+    // 获取拖拽数据
     const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
-
     const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
       drayDataString
     )
+    // 创建新图表组件
+    let newComponent = await createComponent(dropData)
 
-    let newComponent= await createComponent(dropData)
-    newComponent.setPosition(e.offsetX, e.offsetY)
-    
+    const { w, h } = dropData.chartData.chartSize
+    newComponent.setPosition(e.offsetX - w / 2, e.offsetY - h / 2)
     chartEditStore.addComponentList(newComponent)
 
-    setTimeout(() => {
-      Loading.finish()
-    })
+    loadingFinish()
   } catch (error) {
-    Loading.error()
-    window['$message'].success(`图表正在研发中, 敬请期待...`)
+    loadingError()
+    window['$message'].warning(`图表正在研发中, 敬请期待...`)
   }
 }
 

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -13,6 +13,7 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
   }
   return componentStyle
 }
+
 export const useSizeStyle = (attr: AttrType) => {
   const sizeStyle = {
     width: `${attr.w}px`,