fix: 新增组件拖拽

package.json

@@ -12,10 +12,8 @@
     "animate.css": "^4.1.1",
     "axios": "^0.23.0",
     "crypto-ts": "^1.0.2",
-    "mockjs": "^1.1.0",
     "naive-ui": "^2.24.1",
     "pinia": "^2.0.6",
-    "plop": "^3.0.5",
     "screenfull": "^6.0.0",
     "vue": "^3.2.16",
     "vue-i18n": "^9.2.0-beta.23",
@@ -31,12 +29,15 @@
     "@vue/compiler-sfc": "^3.2.20",
     "@vueuse/core": "^7.3.0",
     "default-passive-events": "^2.0.0",
+    "echarts": "^5.2.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "lodash": "~4.17.21",
+    "mockjs": "^1.1.0",
+    "plop": "^3.0.5",
     "prettier": "^2.5.1",
     "sass": "^1.43.2",
     "sass-loader": "^12.2.0",
@@ -45,6 +46,7 @@
     "vite-plugin-importer": "^0.2.5",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
+    "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.7"
   },
   "lint-staged": {

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

@@ -1,11 +1,19 @@
 import { getUUID } from '@/utils'
+import { BarCommonConfig } from './index'
 
 export default class Config {
-  name: string = 'BarCommon'
   id: string = getUUID()
-  attr = { w: 500, h: 300 }
-  // 图表的
+  key: string = BarCommonConfig.key
+  attr = { x: 0, y: 0, w: 500, h: 300 }
+
+  // 图表配置项
   public config = {
     global: {}
   }
+
+  // 设置坐标
+  setPosition(x: number, y: number) {
+    this.attr.x = x
+    this.attr.y = y
+  }
 }

src/packages/index.ts

@@ -8,9 +8,8 @@ import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
-import {} from './useCreate'
 
-// 所有图表
+// * 所有图表
 let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATION]: InformationList,
@@ -18,7 +17,7 @@ let packagesList: PackagesType = {
   [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
-// 注册
+// * 注册
 const packagesInstall = (app: App): void => {
   for (const item in packagesList) {
     const chartList: ConfigType[] = (packagesList as any)[item]
@@ -28,4 +27,15 @@ const packagesInstall = (app: App): void => {
   }
 }
 
-export { packagesList, packagesInstall }
+/**
+ * * 获取目标拖拽组件信息
+ * @param dropData
+ */
+const createComponent = async (dropData: ConfigType) => {
+  const { category } = dropData
+  const key = dropData.key.substring(1)
+  const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`)
+  return new chart.default()
+}
+
+export { packagesList, packagesInstall, createComponent }

src/packages/useCreate.ts

@@ -1,10 +0,0 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-
-/**
- * * 获取目标拖拽组件信息
- * @param drayData
- */
-export const  createComponent = async (drayData: Exclude<ConfigType, 'node'>) => {
-  const chart = await import(`./${drayData.categoryName}`)
-  return new chart()
-}

src/store/modules/chartEditStore/chartEditStore.ts

@@ -44,15 +44,27 @@ export const useChartEditStoreStore = defineStore({
     },
     getComponentList(): any[] {
       return this.componentList
-    },
+    }
   },
   actions: {
     // * 新增组件列表
-    addComponentList<T>(chartData:T):void {
+    addComponentList<T>(chartData: T): void {
       this.componentList.push(chartData)
     },
+    // * 删除组件列表
+    removeComponentList<T extends { key: string }>(chartData: T): void {
+      const i = this.componentList.findIndex(e => e.key === chartData.key)
+      if (i !== -1) {
+        this.componentList.splice(i, 1)
+        return
+      }
+      window['$message'].success(`图表删除失败，无法找到此元素`)
+    },
     // * 设置数据项
-    setEditCanvasItem<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
+    setEditCanvasItem<
+      T extends keyof EditCanvasType,
+      K extends EditCanvasType[T]
+    >(key: T, value: K) {
       this.editCanvas[key] = value
     },
     // * 设置页面样式属性
@@ -72,7 +84,7 @@ export const useChartEditStoreStore = defineStore({
         dom.classList.add('content-resize')
         setTimeout(() => {
           dom.classList.remove('content-resize')
-        }, 600);
+        }, 600)
       }
     },
     // * 设置页面大小

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

@@ -1,13 +1,18 @@
 <template>
   <div class="go-edit-bottom">
-    <n-popselect :options="shortcutKeyOptions" size="medium">
-      <n-button class="scale-btn" secondary size="mini">
-        <n-icon class="lock-icon" size="18" :depth="2">
-          <DicomOverlayIcon />
-        </n-icon>
-      </n-button>
-    </n-popselect>
-
+    <n-space>
+      <n-text>
+        滤镜设置
+      </n-text>
+      <!-- 快捷键提示 -->
+      <n-popselect :options="shortcutKeyOptions" size="medium">
+        <n-button class="scale-btn" secondary size="mini">
+          <n-icon class="lock-icon" size="18" :depth="3">
+            <DicomOverlayIcon />
+          </n-icon>
+        </n-button>
+      </n-popselect>
+    </n-space>
     <n-space class="bottom-ri">
       <!-- 缩放比例 -->
       <n-select
@@ -55,11 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, shallowReactive, watchEffect } from 'vue'
+import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 const { DicomOverlayIcon } = icon.carbon
-import { getChartEditStore, getChartEditStoreEnum } from '../../hooks/useStore.hook'
+import {
+  getChartEditStore,
+  getChartEditStoreEnum
+} from '../../hooks/useStore.hook'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 // 全局颜色
@@ -71,7 +79,7 @@ const chartEditStoreEnum = getChartEditStoreEnum()
 const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
 
 // 缩放选项
-let filterOptions = reactive([
+let filterOptions = [
   {
     label: '自适应',
     value: 0
@@ -92,7 +100,7 @@ let filterOptions = reactive([
     label: '200%',
     value: 200
   }
-])
+]
 
 // 选择值
 const filterValue = ref('')
@@ -127,7 +135,7 @@ const sliderMaks = reactive({
 })
 
 // 快捷键
-const shortcutKeyOptions = shallowReactive([
+const shortcutKeyOptions = [
   {
     label: '键盘快捷键列表',
     value: '1'
@@ -136,7 +144,7 @@ const shortcutKeyOptions = shallowReactive([
     label: 'Ctrl + C 复制',
     value: '2'
   }
-])
+]
 
 // 监听 scale 变化
 watchEffect(() => {

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

@@ -3,27 +3,36 @@ import { useThrottleFn } from '@vueuse/core'
 import { getChartEditStore } from './useStore.hook'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { DragKeyEnum } from '@/enums/editPageEnum'
+import { createComponent } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
 
 const chartEditStore = getChartEditStore()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
 
 // * 拖拽中
-export const handleDrop = (e: DragEvent) => {
+export const handleDrop = async (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)
+    const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
+
+    const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
+      drayDataString
+    )
+
+    let newComponent= await createComponent(dropData)
+    newComponent.setPosition(e.offsetX, e.offsetY)
+    
+    chartEditStore.addComponentList(newComponent)
 
     setTimeout(() => {
       Loading.finish()
     })
   } catch (error) {
     Loading.error()
-    window['$message'].success(`添加图表失败，请保存数据后刷新重试`)
+    window['$message'].success(`图表正在研发中, 敬请期待...`)
   }
 }
 

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

@@ -11,7 +11,12 @@
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
-      <EditRange></EditRange>
+      <EditRange>
+        <!-- 组件名称会重复，必须使用 id -->
+        <div v-for="item in chartEditStore.getComponentList" :key="item.id">
+          <component :is="item.key" />
+        </div>
+      </EditRange>
     </div>
     <!-- 底部控制 -->
     <template #bottom>
@@ -21,12 +26,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted,toRefs } 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'
+import { getChartEditStore } from './hooks/useStore.hook'
+
+const chartEditStore = getChartEditStore()
 
 // 布局处理
 useLayout()