feat:选中保存为我的组件

src/services/common.ts

@@ -107,6 +107,58 @@ export const save = async (
     localforage.setItem(localStorageName, JSON.stringify(data));
     return;
   }
+  let componentActive = false;
+  if (
+    meta2d.store.active &&
+    meta2d.store.active.length === 1 &&
+    meta2d.store.active[0].name === 'combine'
+  ) {
+    componentActive = true;
+  }
+  if (componentActive) {
+    let comData: any = {
+      center: data.center,
+      folder: '',
+      origin: data.origin,
+      scale: data.scale,
+      x: data.x,
+      y: data.y,
+    };
+    let blob: Blob;
+    try {
+      blob = dataURLtoBlob(meta2d.activeToPng(0) + '');
+      console.log('blob', blob);
+    } catch (e) {
+      MessagePlugin.error(
+        '无法下载，宽度不合法，可能没有选中画笔/选中画笔大小超出浏览器最大限制'
+      );
+      return;
+    }
+
+    const file = await upload(blob, true);
+    if (!file) {
+      return;
+    }
+
+    // 缩略图
+    comData.image = file.url;
+    comData.component = true;
+    const allPens = meta2d.canvas.getAllByPens(meta2d.store.active);
+    comData.componentDatas = meta2d.toComponent(
+      allPens,
+      (meta2d.store.data as Meta2dBackData).showChild,
+      false
+    );
+    comData.name =
+      (meta2d.store.active[0] as any).description ||
+      `meta2d.${new Date().toLocaleString()}`;
+    let ret: any = await addCollection('le5leV-components', comData); // 新增
+    if (ret.error) {
+      return;
+    }
+    MessagePlugin.success('成功保存为组件！');
+    return;
+  }
   checkData(data);
   if (!data._id && router.currentRoute.value.query.id) {
     data._id = router.currentRoute.value.query.id as string;

src/services/echarts.ts

@@ -37,10 +37,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -127,10 +127,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -263,10 +263,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -319,10 +319,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -410,10 +410,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -548,10 +548,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -605,10 +605,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -702,10 +702,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -794,10 +794,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -940,10 +940,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -1117,10 +1117,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               xAxis: {
@@ -1252,10 +1252,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               xAxis: {
@@ -1395,10 +1395,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               fontSize: 10,
@@ -1623,10 +1623,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               yAxis: {
@@ -1762,10 +1762,10 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                bottom: 16,
-                left: 16,
-                right: 16,
-                top: 24,
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 12,
                 containLabel: true,
               },
               yAxis: {
@@ -5294,7 +5294,8 @@ export const charts = [
             { value: 234, name: '大屏' },
             { value: 135, name: '物联网平台' },
             { value: 1548, name: '图形库' },
-          ],realTimes: [
+          ],
+          realTimes: [
             {
               key: 'data.0.value',
               label: '2D',
@@ -5329,10 +5330,10 @@ export const charts = [
               type: 'float',
               enableMock: true,
               mock: '10-100',
-            }
-          ]
-        }
-      }
+            },
+          ],
+        },
+      },
     ],
   },
 ];