feat: dashboard

Author: ziyujiahao

frontend/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -23,10 +24,12 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

frontend/src/views/dashboard/PreviewDashboard.vue

@@ -6,32 +6,32 @@ const baseWidth = ref(0)
 const baseHeight = ref(0)
 const baseMarginLeft = ref(0)
 const baseMarginTop = ref(0)
-const componentData = [
+const componentData = ref([
   {
     id: 4,
     x: 1,
     y: 1,
-    sizex: 2,
-    sizey: 2,
-    _dragId:0
+    sizeX: 2,
+    sizeY: 2,
+    _dragId: 0
   },
   {
     id: 10,
     x: 2,
     y: 1,
-    sizex: 2,
-    sizey: 2,
-    _dragId:1
+    sizeX: 2,
+    sizeY: 2,
+    _dragId: 1
   },
   {
     id: 7,
     x: 1,
     y: 2,
-    sizex: 2,
-    sizey: 3,
-    _dragId:2
+    sizeX: 2,
+    sizeY: 3,
+    _dragId: 2
   }
-]
+])
 
 onMounted(() => {
   const screenWidth = window.innerWidth
@@ -40,7 +40,6 @@ onMounted(() => {
   baseHeight.value = 100 * (screenHeight / 638)
   baseMarginLeft.value = 20 * (screenWidth / 1366)
   baseMarginTop.value = 20 * (screenHeight / 638)
-
   nextTick(() => {
     if (cyGridster.value) {
       // @ts-ignore