From ea2754a41c2bcca129e6323e893501c9acb2417e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Wed, 28 May 2025 10:06:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E7=89=88=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                           |   7 +-
 src/views/boardGenerate/index.vue             |   8 +-
 .../boardGenerate/nodes/board/barNode.vue     | 260 +++++++++--------
 .../boardGenerate/nodes/board/curveNode.vue   | 269 ++++++++++--------
 .../boardGenerate/nodes/board/lineNode.vue    |  33 ++-
 .../boardGenerate/nodes/other/areaNode.vue    |   2 +-
 src/views/boardGenerate/tool.js               |   6 +-
 src/views/boardGenerate/view.vue              |   5 +-
 src/views/print/index.vue                     |  39 +++
 9 files changed, 362 insertions(+), 267 deletions(-)
 create mode 100644 src/views/print/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index ea7db40..de4867a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,6 +26,11 @@ import Layout from '@/layout/index.vue';
 
 // 公共路由
 export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/print',
+    hidden: true,
+    component: () => import('@/views/print/index.vue')
+  },
   {
     path: '/boardGenerate',
     hidden: true,
@@ -419,7 +424,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         meta: { title: '保养工单申请', activeMenu: '/dms/maint/maintEdit', noCache: true }
       }
     ]
-  },
+  }
 
 ];
 
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 3139488..5c1ae7e 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -273,16 +273,16 @@
             <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
           </el-form-item>
           <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
-            <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" />
+            <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
           </el-form-item>
           <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
-            <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" />
+            <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
           </el-form-item>
           <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
-            <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" />
+            <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
           </el-form-item>
           <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
-            <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" />
+            <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
           </el-form-item>
           <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
             <el-date-picker
diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue
index e4c4c7d..b05e05d 100644
--- a/src/views/boardGenerate/nodes/board/barNode.vue
+++ b/src/views/boardGenerate/nodes/board/barNode.vue
@@ -49,134 +49,160 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const getOption = () => {
-  const chartOption = {
-    title: {
-      text: props.data.options.title || '设备运行数量',
-      textStyle: {
-        fontSize: 12,
-        fontWeight: 400,
-        color: '#fff'
-      },
-      left: '0',
-      top: '5%'
+const defaultOption = {
+  title: {
+    text: props.data.options.title || '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: '#fff'
     },
-    legend: {
-      icon: 'circle',
-      top: '5%',
-      right: '5%',
-      itemWidth: 6,
-      itemGap: 20,
-      textStyle: {
-        color: '#fff'
+    left: '0',
+    top: '5%'
+  },
+  legend: {
+    icon: 'circle',
+    top: '5%',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: '#fff',
+        color: '#000',
+        borderColor: 'rgba(0,0,0,0)',
+        shadowColor: 'rgba(0,0,0,0)',
+        shadowOffsetY: 0
+      },
+      lineStyle: {
+        width: 0
       }
     },
-    tooltip: {
-      trigger: 'axis',
+    backgroundColor: '#fff',
+    textStyle: {
+      color: '#000'
+    },
+    padding: [10, 10],
+    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+  },
+  grid: {
+    top: props.data?.options?.gridTop + '%' || '20%',
+    left: props.data?.options?.gridLeft + '%' || '20%',
+    bottom: props.data?.options?.gridBottom + '%' || '20%',
+    right: props.data?.options?.gridRight + '%' || '20%'
+  },
+  xAxis: [
+    {
+      name: props.data?.options?.xName || '',
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          color: '#DCE2E8'
+        }
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#fff'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 3
+      },
       axisPointer: {
         label: {
-          show: true,
-          backgroundColor: '#fff',
-          color: '#000',
-          borderColor: 'rgba(0,0,0,0)',
-          shadowColor: 'rgba(0,0,0,0)',
-          shadowOffsetY: 0
-        },
+          padding: [0, 0, 0, 0],
+          margin: 0,
+          // 移入时的字体大小
+          fontSize: 12
+        }
+      },
+      boundaryGap: true
+    }
+  ],
+  yAxis: [
+    {
+      name: props.data?.options?.yName || '',
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
         lineStyle: {
-          width: 0
+          color: '#fff'
         }
       },
-      backgroundColor: '#fff',
-      textStyle: {
-        color: '#000'
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
       },
-      padding: [10, 10],
-      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
-    },
-    grid: {
-      top: '30%',
-      bottom: '10%'
-    },
-    xAxis: [
-      {
-        type: 'category',
-        axisLine: {
-          lineStyle: {
-            color: '#DCE2E8'
-          }
-        },
-        axisTick: {
-          show: true
-        },
-        axisLabel: {
-          interval: 0,
-          textStyle: {
-            color: '#fff'
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+            offset: 0,
+            color: '#0372FF'
           },
-          // 默认x轴字体大小
-          fontSize: 12,
-          // margin:文字到x轴的距离
-          margin: 3
-        },
-        axisPointer: {
-          label: {
-            padding: [0, 0, 0, 0],
-            margin: 0,
-            // 移入时的字体大小
-            fontSize: 12
-          }
-        },
-        boundaryGap: true
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        axisTick: {
-          show: false
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#fff'
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        splitLine: {
-          show: false
+            {
+              offset: 1,
+              color: '#75ECFF'
+            }
+          ])
         }
+      },
+      barMaxWidth: 50,
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 16
       }
-    ],
-    series: [
-      {
-        type: 'bar',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: '#0372FF'
-            },
-              {
-                offset: 1,
-                color: '#75ECFF'
-              }
-            ])
-          }
-        },
-        barMaxWidth: 50,
-        label: {
-          show: true,
-          position: 'top',
-          color: '#fff',
-          fontSize: 16
+    }
+  ]
+};
+const getOption = () => {
+  const chartOption = {
+      title: {
+        text: props.data.options.title || ''
+      },
+      grid: {
+        top: props.data?.options?.gridTop + '%' || '20%',
+        left: props.data?.options?.gridLeft + '%' || '20%',
+        bottom: props.data?.options?.gridBottom + '%' || '20%',
+        right: props.data?.options?.gridRight + '%' || '20%'
+      },
+      xAxis: [
+        {
+          name: props.data?.options?.xName || ''
         }
-      }
-    ]
-  };
+      ],
+      yAxis: [
+        {
+          name: props.data?.options?.yName || ''
+        }
+      ]
+    }
+  ;
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
@@ -202,11 +228,11 @@ onMounted(() => {
   chart = echarts.init(chartRef.value, 'macarons', {
     renderer: 'svg'
   });
-  chart.setOption(getOption(), true);
+  chart.setOption(defaultOption, true);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart && chart.setOption(getOption(), true);
+    chart && chart.setOption(getOption(), false);
   }
 }, { deep: true, immediate: true });
 watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
diff --git a/src/views/boardGenerate/nodes/board/curveNode.vue b/src/views/boardGenerate/nodes/board/curveNode.vue
index 7df5999..c3a5b1a 100644
--- a/src/views/boardGenerate/nodes/board/curveNode.vue
+++ b/src/views/boardGenerate/nodes/board/curveNode.vue
@@ -49,138 +49,163 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
+const defaultOption = {
+  title: {
+    text: props.data.options.title || '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: '#fff'
+    },
+    left: '0',
+    top: '5%'
+  },
+  legend: {
+    icon: 'circle',
+    top: '5%',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: '#fff',
+        color: '#000',
+        borderColor: 'rgba(0,0,0,0)',
+        shadowColor: 'rgba(0,0,0,0)',
+        shadowOffsetY: 0
+      },
+      lineStyle: {
+        width: 0
+      }
+    },
+    backgroundColor: '#fff',
+    textStyle: {
+      color: '#000'
+    },
+    padding: [10, 10],
+    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+  },
+  grid: {
+    top: props.data?.options?.gridTop + '%' || '20%',
+    left: props.data?.options?.gridLeft + '%' || '20%',
+    bottom: props.data?.options?.gridBottom + '%' || '20%',
+    right: props.data?.options?.gridRight + '%' || '20%'
+  },
+  xAxis: [
+    {
+      name: props.data?.options?.xName || '',
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          color: '#DCE2E8'
+        }
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#fff'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 3
+      },
+      axisPointer: {
+        label: {
+          padding: [0, 0, 0, 0],
+          margin: 0,
+          // 移入时的字体大小
+          fontSize: 12
+        }
+      },
+      boundaryGap: true
+    }
+  ],
+  yAxis: [
+    {
+      name: props.data?.options?.yName || '',
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      },
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'line',
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 1,
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#9effff'
+          },
+          {
+            offset: 1,
+            color: '#9E87FF'
+          }
+        ]),
+        shadowColor: 'rgba(158,135,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[0],
+          borderColor: colorList[0]
+        }
+      }
+    }
+  ]
+};
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
-      textStyle: {
-        fontSize: 12,
-        fontWeight: 400,
-        color: '#fff'
-      },
-      left: '0',
-      top: '5%'
-    },
-    legend: {
-      icon: 'circle',
-      top: '5%',
-      right: '5%',
-      itemWidth: 6,
-      itemGap: 20,
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        label: {
-          show: true,
-          backgroundColor: '#fff',
-          color: '#000',
-          borderColor: 'rgba(0,0,0,0)',
-          shadowColor: 'rgba(0,0,0,0)',
-          shadowOffsetY: 0
-        },
-        lineStyle: {
-          width: 0
-        }
-      },
-      backgroundColor: '#fff',
-      textStyle: {
-        color: '#000'
-      },
-      padding: [10, 10],
-      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+      text: props.data.options.title || ''
     },
     grid: {
-      top: '30%',
-      bottom: '10%'
+      top: props.data?.options?.gridTop + '%' || '20%',
+      left: props.data?.options?.gridLeft + '%' || '20%',
+      bottom: props.data?.options?.gridBottom + '%' || '20%',
+      right: props.data?.options?.gridRight + '%' || '20%'
     },
     xAxis: [
       {
-        type: 'category',
-        axisLine: {
-          lineStyle: {
-            color: '#DCE2E8'
-          }
-        },
-        axisTick: {
-          show: true
-        },
-        axisLabel: {
-          interval: 0,
-          textStyle: {
-            color: '#fff'
-          },
-          // 默认x轴字体大小
-          fontSize: 12,
-          // margin:文字到x轴的距离
-          margin: 3
-        },
-        axisPointer: {
-          label: {
-            padding: [0, 0, 0, 0],
-            margin: 0,
-            // 移入时的字体大小
-            fontSize: 12
-          }
-        },
-        boundaryGap: true
+        name: props.data?.options?.xName || ''
       }
     ],
     yAxis: [
       {
-        type: 'value',
-        axisTick: {
-          show: false
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#fff'
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        splitLine: {
-          show: false
-        }
-      }
-    ],
-    series: [
-      {
-        type: 'line',
-        symbolSize: 1,
-        symbol: 'circle',
-        smooth: true,
-        yAxisIndex: 0,
-        showSymbol: false,
-        lineStyle: {
-          width: 1,
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            {
-              offset: 0,
-              color: '#9effff'
-            },
-            {
-              offset: 1,
-              color: '#9E87FF'
-            }
-          ]),
-          shadowColor: 'rgba(158,135,255, 0.3)',
-          shadowBlur: 10,
-          shadowOffsetY: 20
-        },
-        itemStyle: {
-          normal: {
-            color: colorList[0],
-            borderColor: colorList[0]
-          }
-        }
+        name: props.data?.options?.yName || ''
       }
     ]
   };
@@ -209,11 +234,11 @@ onMounted(() => {
   chart = echarts.init(chartRef.value, 'macarons', {
     renderer: 'svg'
   });
-  chart.setOption(getOption(), true);
+  chart.setOption(defaultOption, true);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart && chart.setOption(getOption(), true);
+    chart && chart.setOption(getOption(), false);
   }
 }, { deep: true, immediate: true });
 watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue
index b1eba6f..f73b5fa 100644
--- a/src/views/boardGenerate/nodes/board/lineNode.vue
+++ b/src/views/boardGenerate/nodes/board/lineNode.vue
@@ -49,7 +49,7 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const defaultOption= {
+const defaultOption = {
   title: {
     text: props.data.options.title || '',
     textStyle: {
@@ -93,14 +93,14 @@ const defaultOption= {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
   },
   grid: {
-    top: props.data?.options?.gridTop+'%' || '20%',
-    left: props.data?.options?.gridLeft+'%' || '20%',
-    bottom: props.data?.options?.gridBottom+'%' || '20%',
-    right: props.data?.options?.gridRight+'%' || '20%'
+    top: props.data?.options?.gridTop + '%' || '20%',
+    left: props.data?.options?.gridLeft + '%' || '20%',
+    bottom: props.data?.options?.gridBottom + '%' || '20%',
+    right: props.data?.options?.gridRight + '%' || '20%'
   },
   xAxis: [
     {
-      name:props.data?.options?.xName || '',
+      name: props.data?.options?.xName || '',
       type: 'category',
       axisLine: {
         lineStyle: {
@@ -130,7 +130,7 @@ const defaultOption= {
   ],
   yAxis: [
     {
-      name:props.data?.options?.yName || '',
+      name: props.data?.options?.yName || '',
       type: 'value',
       axisTick: {
         show: false
@@ -183,30 +183,29 @@ const defaultOption= {
       }
     }
   ]
-}
+};
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '',
+      text: props.data.options.title || ''
     },
     grid: {
-      top: props.data?.options?.gridTop+'%' || '20%',
-      left: props.data?.options?.gridLeft+'%' || '20%',
-      bottom: props.data?.options?.gridBottom+'%' || '20%',
-      right: props.data?.options?.gridRight+'%' || '20%'
+      top: props.data?.options?.gridTop + '%' || '20%',
+      left: props.data?.options?.gridLeft + '%' || '20%',
+      bottom: props.data?.options?.gridBottom + '%' || '20%',
+      right: props.data?.options?.gridRight + '%' || '20%'
     },
     xAxis: [
       {
-        name:props.data?.options?.xName || '',
+        name: props.data?.options?.xName || ''
       }
     ],
     yAxis: [
       {
-        name:props.data?.options?.yName || '',
+        name: props.data?.options?.yName || ''
       }
-    ],
+    ]
   };
-  console.log(chartOption);
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
diff --git a/src/views/boardGenerate/nodes/other/areaNode.vue b/src/views/boardGenerate/nodes/other/areaNode.vue
index 54c6ed8..7ccb34e 100644
--- a/src/views/boardGenerate/nodes/other/areaNode.vue
+++ b/src/views/boardGenerate/nodes/other/areaNode.vue
@@ -2,7 +2,7 @@
   <div style="pointer-events: none">
     <div class="custom-node">
       <div class="area"
-           :style='`width:${props.pageData.width || "1920px"};height:${props.pageData.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData.bg})`'></div>
+           :style='`width:${props.pageData?.width || "1920px"};height:${props.pageData?.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData?.bg})`'></div>
     </div>
   </div>
 </template>
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index 023f05f..32b48e7 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -10,11 +10,11 @@ const getId = (type) => {
 
 const getOption = (e) => {
   if (e === 'line' || e === 'multiLines') {
-    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
   } else if (e === 'bar' || e === 'multiBars') {
-    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
   } else if (e === 'curve' || e === 'multiCurves') {
-    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
   } else if (e === 'pie') {
     return { title: '', yNames: [] };
   } else if (e === 'customBoard') {
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index d098bdb..fb2ee04 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="content"
-       :style='`width:${area.width || "100%"};height:${area.height || "100%"};background-image:url(${area.bg})`'>
+       :style='`width:${area?.width || "100%"};height:${area?.height || "100%"};background-image:url(${area?.bg})`'>
     <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
       <template v-if="i.type === 'customBoard'">
         <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
-      </template>00
+      </template>
+      00
       <template v-if="i.type === 'customData'">
         <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
       </template>
diff --git a/src/views/print/index.vue b/src/views/print/index.vue
new file mode 100644
index 0000000..a02f2e7
--- /dev/null
+++ b/src/views/print/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="ep-draggable-item" />
+    <div id="hiprint-printTemplate" />
+    <div id="PrintElementOptionSetting" />
+  </div>
+</template>
+<script>
+import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint';
+
+console.log([new defaultElementTypeProvider()]);
+hiprint.init({
+  providers: [new defaultElementTypeProvider()]
+});
+hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
+let hiprintTemplate = new hiprint.PrintTemplate({
+  template: {}, // 模板json
+  settingContainer: '#PrintElementOptionSetting', // 元素参数容器
+  history: true, // 是否需要 撤销重做功能
+  onDataChanged: (type, json) => {
+    // 模板发生改变回调
+    console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
+    console.log(json); // 返回 template
+  },
+  onUpdateError: (e) => {
+    // 更新失败回调
+    console.log(e);
+  }
+});
+// 设计器的容器
+hiprintTemplate.design('#hiprint-printTemplate');
+</script>
+<style scoped>
+.ep-draggable-item, #hiprint-printTemplate, #PrintElementOptionSetting {
+  display: inline-block;
+  width: 300px;
+  height: 100vh;
+}
+</style>