修改看版配置

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 }
       }
     ]
-  },
+  }
 
 ];
 

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

src/views/boardGenerate/nodes/board/barNode.vue

@@ -49,10 +49,9 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const getOption = () => {
+const defaultOption = {
-  const chartOption = {
   title: {
-      text: props.data.options.title || '设备运行数量',
+    text: props.data.options.title || '',
     textStyle: {
       fontSize: 12,
       fontWeight: 400,
@@ -94,11 +93,14 @@ const getOption = () => {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
   },
   grid: {
-      top: '30%',
+    top: props.data?.options?.gridTop + '%' || '20%',
-      bottom: '10%'
+    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: {
@@ -131,6 +133,7 @@ const getOption = () => {
   ],
   yAxis: [
     {
+      name: props.data?.options?.yName || '',
       type: 'value',
       axisTick: {
         show: false
@@ -177,6 +180,29 @@ const getOption = () => {
     }
   ]
 };
+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) => {

src/views/boardGenerate/nodes/board/curveNode.vue

@@ -49,10 +49,9 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const getOption = () => {
+const defaultOption = {
-  const chartOption = {
   title: {
-      text: props.data.options.title || '设备运行数量',
+    text: props.data.options.title || '',
     textStyle: {
       fontSize: 12,
       fontWeight: 400,
@@ -94,11 +93,14 @@ const getOption = () => {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
   },
   grid: {
-      top: '30%',
+    top: props.data?.options?.gridTop + '%' || '20%',
-      bottom: '10%'
+    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: {
@@ -131,6 +133,7 @@ const getOption = () => {
   ],
   yAxis: [
     {
+      name: props.data?.options?.yName || '',
       type: 'value',
       axisTick: {
         show: false
@@ -184,6 +187,28 @@ const getOption = () => {
     }
   ]
 };
+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));
@@ -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) => {

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -183,11 +183,11 @@ const defaultOption= {
       }
     }
   ]
-}
+};
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '',
+      text: props.data.options.title || ''
     },
     grid: {
       top: props.data?.options?.gridTop + '%' || '20%',
@@ -197,16 +197,15 @@ const getOption = () => {
     },
     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));

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>

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>

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>