perf: implement data board component add && copy layout recommend algorithm

@@ -110,7 +110,7 @@ export interface DataComponentRecord {
 
 export interface AddDataComponentParams {
   boardId: string;
-  record: Partial<DataComponentRecord>;
+  record: Partial<DataComponentRecord> & { layout?: Partial<Layout> };
 }
 
 export interface Layout {

@@ -103,7 +103,7 @@
     unref(chartRef)?.setOption(props?.layout?.chartOption || {});
   }, 500);
 
-  watch(() => props.layout.chartOption, updateChartType);
+  watch(() => props.layout.componentType, updateChartType);
 
   let timeout: Nullable<number> = null;
 

@@ -6,6 +6,7 @@ export enum MoreActionEvent {
 
 // export enum
 
+export const DEFAULT_MAX_COL = 24;
 export const DEFAULT_WIDGET_WIDTH = 6;
 export const DEFAULT_WIDGET_HEIGHT = 6;
 

@@ -11,11 +11,16 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { decode } from '../../config/config';
   import { ComponentInfo } from '/@/api/dataBoard/model';
+  import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
   }
 
+  const props = defineProps<{
+    layout: DataBoardLayoutInfo[];
+  }>();
+
   const emit = defineEmits(['update', 'create', 'register']);
 
   const ROUTE = useRoute();
@@ -62,21 +67,25 @@
     resetForm();
   };
 
+  const { calcLayoutInfo } = useCalcGridLayout();
   const handleAddComponent = async (value: Recordable) => {
     try {
       if (!unref(frontId)) {
         createMessage.warning('请选择可视化组件');
         return;
       }
+      const layout = calcLayoutInfo(unref(props.layout));
+      console.log({ ...layout });
       changeOkLoading(true);
       await addDataComponent({
         boardId: unref(boardId),
-        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value },
+        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value, layout },
       });
       createMessage.success('创建成功');
       closeModal();
       emit('create');
     } catch (error) {
+      console.log(error);
       // createMessage.error('创建失败');
     } finally {
       changeOkLoading(false);

@@ -9,6 +9,7 @@
   import { useModal } from '/@/components/Modal';
   import {
     decode,
+    DEFAULT_MAX_COL,
     DEFAULT_WIDGET_HEIGHT,
     DEFAULT_WIDGET_WIDTH,
     isBataBoardSharePage,
@@ -40,6 +41,7 @@
   import HistoryTrendModal from './components/HistoryTrendModal.vue';
   import trendIcon from '/@/assets/svg/trend.svg';
   import backIcon from '/@/assets/images/back.png';
+  import { useCalcGridLayout } from '../hook/useCalcGridLayout';
 
   const ROUTE = useRoute();
 
@@ -71,7 +73,7 @@
   const draggable = ref(!unref(getIsSharePage));
   const resizable = ref(!unref(getIsSharePage));
 
-  const GirdLayoutColNum = 24;
+  const GirdLayoutColNum = DEFAULT_MAX_COL;
   const GridLayoutMargin = 20;
 
   const handleBack = () => {
@@ -310,6 +312,8 @@
     openModal(true, { isEdit: true, record });
   };
 
+  const { calcLayoutInfo } = useCalcGridLayout();
+
   const handleCopy = async (id: string) => {
     const record = unref(dataBoardList).find((item) => item.i === id);
     try {
@@ -325,16 +329,13 @@
       const _id = data.data.id;
       const layoutInfo = getLayoutInfo();
 
+      const newGridLayout = calcLayoutInfo(unref(dataBoardList), {
+        width: record?.w || DEFAULT_WIDGET_HEIGHT,
+        height: record?.h || DEFAULT_WIDGET_HEIGHT,
+      });
       layoutInfo.push({
         id: _id,
-        // x: (unref(layoutInfo).length * 2) % (GirdLayoutColNum || 24),
-        // y: unref(layoutInfo).length + (GirdLayoutColNum || 24),
-        // w: record?.w || DEFAULT_WIDGET_WIDTH,
-        // h: record?.h || DEFAULT_WIDGET_HEIGHT,
-        h: record?.h,
-        w: record?.w,
-        x: record?.x,
-        y: record?.y,
+        ...newGridLayout,
       } as Layout);
 
       await updateDataBoardLayout({
@@ -471,6 +472,7 @@
       </Spin>
     </section>
     <DataBindModal
+      :layout="dataBoardList"
       @register="register"
       @update="handleUpdateComponent"
       @create="getDataBoardComponent"

+import { unref } from 'vue';
+import { Layout } from 'vue3-grid-layout';
+import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, DEFAULT_MAX_COL } from '../config/config';
+
+interface GapRecord {
+  maxGap: number;
+  startIndex: Nullable<number>;
+  endIndex: Nullable<number>;
+}
+
+export function useCalcGridLayout() {
+  const calcLayoutInfo = (
+    layoutInfo: Layout[],
+    randomLayout = { width: DEFAULT_WIDGET_WIDTH, height: DEFAULT_WIDGET_HEIGHT }
+  ) => {
+    let maxWidth = 0;
+    let maxHeight = 0;
+    let maxWidthRecord = {} as unknown as Layout;
+    let maxHeightRecord = {} as unknown as Layout;
+
+    for (const item of unref(layoutInfo)) {
+      const { x, y, h, w } = item;
+      if (x + w > maxWidth) {
+        maxWidth = x + w;
+        maxWidthRecord = item;
+      }
+      if (y + h > maxHeight) {
+        maxHeight = y + h;
+        maxHeightRecord = item;
+      }
+    }
+
+    maxWidth = maxWidthRecord.x + maxWidthRecord.w;
+    maxHeight = maxHeightRecord.y + maxHeightRecord.h;
+
+    const array = Array.from({ length: maxHeight }, (_value) => {
+      return Array.from({ length: maxWidth });
+    });
+
+    for (const item of layoutInfo) {
+      const { x, y, w, h } = item;
+
+      for (let i = 0; i < h; i++) {
+        const rowIndex = y + i > array.length - 1 ? array.length - 1 : y + i;
+        const colEnd = x + w;
+        const row = array[rowIndex];
+        row.fill(true, x, colEnd);
+      }
+    }
+
+    const checkAreaIsAvaliable = (rowIndex: number, rowRecord: GapRecord[]) => {
+      const { height } = randomLayout;
+
+      for (const { startIndex: colStartIndex } of rowRecord) {
+        let record: GapRecord = { maxGap: 0, startIndex: null, endIndex: null };
+        const heightGapRecord: GapRecord[] = [];
+        for (let i = 0; i < height; i++) {
+          const rowStartIndex = rowIndex + i > array.length - 1 ? array.length - 1 : rowIndex + i;
+          const row = array[rowStartIndex];
+          const col = row[colStartIndex!];
+          if (col) {
+            if (record.maxGap > 0) heightGapRecord.push(record);
+            record = { maxGap: 0, startIndex: null, endIndex: null };
+          }
+          if (!col) {
+            record = {
+              maxGap: record.maxGap + 1,
+              startIndex: record.startIndex === null ? rowStartIndex : record.startIndex,
+              endIndex: rowStartIndex,
+            };
+          }
+          if (i + 1 === height) if (record.maxGap > 0) heightGapRecord.push(record);
+        }
+        const minHeight = heightGapRecord.length
+          ? Math.min(...heightGapRecord.map((item) => item.maxGap))
+          : 0;
+        if (minHeight >= height) {
+          let flag = true;
+          for (let colIndex = colStartIndex!; colIndex < record.endIndex!; colIndex++) {
+            for (let _rowIndex = rowIndex; _rowIndex < height; _rowIndex++) {
+              if (array[_rowIndex][colIndex]) {
+                flag = false;
+                break;
+              }
+            }
+          }
+          if (flag) return { y: rowIndex, x: colStartIndex!, flag: true };
+        }
+      }
+
+      return { flag: false, x: 0, y: 0 };
+    };
+
+    for (let rowIndex = 0; rowIndex < array.length; rowIndex++) {
+      const row = array[rowIndex];
+      let record: GapRecord = { maxGap: 0, startIndex: null, endIndex: null };
+      const widthGapRecord: GapRecord[] = [];
+
+      const { width } = unref(randomLayout);
+
+      for (let colIndex = 0; colIndex < DEFAULT_MAX_COL; colIndex++) {
+        const col = row[colIndex];
+        if (col) {
+          if (record.maxGap > 0) widthGapRecord.push(record);
+          record = { maxGap: 0, startIndex: null, endIndex: null };
+        }
+        if (!col) {
+          record = {
+            maxGap: record.maxGap + 1,
+            startIndex: record.startIndex === null ? colIndex : record.startIndex,
+            endIndex: colIndex,
+          };
+        }
+        if (colIndex + 1 === DEFAULT_MAX_COL) if (record.maxGap > 0) widthGapRecord.push(record);
+      }
+
+      const maxWidth = widthGapRecord.length
+        ? Math.max(...widthGapRecord.map((item) => item.maxGap))
+        : 0;
+
+      if (maxWidth >= width) {
+        const maxRecordList = widthGapRecord.filter((item) => item.maxGap >= maxWidth);
+        const { flag, x, y } = checkAreaIsAvaliable(rowIndex, maxRecordList);
+        if (flag) return { x, y, w: randomLayout.width, h: randomLayout.height };
+      }
+    }
+
+    return { x: 0, y: array.length, w: randomLayout.width, h: randomLayout.height };
+  };
+
+  return { calcLayoutInfo };
+}