图片导出bug

src/common/X6.js

@@ -25,7 +25,8 @@ const textQrcodeToBase64 = text => {
   });
 };
 export default function CreateJPEG(dom) {
-  return async function (json, temp) {
+  return async function (json, tempStr) {
+    let tempObj = JSON.parse(tempStr);
     let graph = new Graph(
       {
         container: dom,
@@ -47,28 +48,28 @@ export default function CreateJPEG(dom) {
     );
     for (const key in json) {
       // console.log(json[key]);
-      for (let index = 0; index < temp.cells.length; index++) {
+      for (let index = 0; index < tempObj.cells.length; index++) {
 
-        if (temp.cells[index].data.type == key) {
-          if (temp.cells[index].shape == 'image') {
-            temp.cells[index].attrs.image['xlink:href'] = await textQrcodeToBase64(json[key]);
+        if (tempObj.cells[index].data.type == key) {
+          if (tempObj.cells[index].shape == 'image') {
+            tempObj.cells[index].attrs.image['xlink:href'] = await textQrcodeToBase64(json[key]);
           }
-          if (temp.cells[index].shape == 'rect') {
+          if (tempObj.cells[index].shape == 'rect') {
             console.log(111);
-            temp.cells[index].attrs.label.text = temp.cells[index].attrs.label.text + json[key];
+            tempObj.cells[index].attrs.label.text = tempObj.cells[index].attrs.label.text + json[key];
           }
         }
       }
     }
-    graph.fromJSON(temp);
+    graph.fromJSON(tempObj);
     return new Promise(res => {
       setTimeout(() => {
         graph.toJPEG(dataUri => {
           // dataUri就是base64的图片地址
           res(dataUri);
           // console.log(dataUri);
-          // 'temp.jpeg' 就是图片名称
-          // DataUri.downloadDataUri(dataUri, 'temp.jpeg')
+          // 'tempObj.jpeg' 就是图片名称
+          // DataUri.downloadDataUri(dataUri, 'tempObj.jpeg')
         }, {
           serializeImages: true,
           quality: 1,

src/customer/printTemp/step2.vue

@@ -14,7 +14,7 @@
           <a-input v-model:value="formState.text" @change="textChange" />
         </a-form-item>
         <a-form-item v-show="formState.type != null" label="节点类型">
-          <a-input v-model:value="formState.type" @change="typeChange" />
+          <a-input v-model:value="formState.type" disabled @change="typeChange" />
         </a-form-item>
         <a-form-item v-show="formState.textColor != null" label="文字颜色">
           <a-input v-model:value="formState.textColor" type="color" @change="textColorChange" />
@@ -26,26 +26,28 @@
           <a-input v-model:value="formState.imgUrl" @change="imgUrlChange" />
         </a-form-item>
       </a-form>
-      <div>
-        <a-button @click="output">保存模版</a-button>
-        <a-modal
-          v-model:visible="visible" title="请填写模版名称" ok-text="确认"
-          cancel-text="取消" @ok="handleOk"
-        >
-          <a-input v-model:value="TempName" placeholder="请输入模版名称" />
-        </a-modal>
-        <a-button @click="getPng">预览图片</a-button>
-        <a-modal
-          v-model:visible="imgVisible" title="预览图片" ok-text="确认"
-          cancel-text="取消" @ok="imgHandleOk"
-        >
-          <div style=" display: flex; justify-content: center;"><img style="border: 1px solid #000;" :src="imgBase64" alt="" /></div>
-        </a-modal>
-      </div>
     </div>
   </div>
   <a-divider />
-  <div style="display: flex; justify-content: start; width: 100%"><a-button @click="before">上一步</a-button></div>
+  <div style="display: flex; justify-content: space-between; width: 100%">
+    <a-button @click="before">上一步</a-button>
+    <div>
+      <a-button @click="output">保存模版</a-button>
+      <a-modal
+        v-model:visible="visible" title="请填写模版名称" ok-text="确认"
+        cancel-text="取消" @ok="handleOk"
+      >
+        <a-input v-model:value="TempName" placeholder="请输入模版名称" />
+      </a-modal>
+      <a-button @click="getPng">预览图片</a-button>
+      <a-modal
+        v-model:visible="imgVisible" title="预览图片" ok-text="确认"
+        cancel-text="取消" @ok="imgHandleOk"
+      >
+        <div style=" display: flex; justify-content: center;"><img style="border: 1px solid #000;" :src="imgBase64" alt="" /></div>
+      </a-modal>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -58,10 +60,14 @@ import Common from '../../common/Common.js';
 const route = useRoute();
 const router = useRouter();
 const store = useStore();
-const { Stencil } = Addon;
-
+const { Stencil ,Dnd} = Addon;
+let dnd = null;
+const CreateDnd = () =>{
+  dnd =  new Dnd({
+    target:graph,
+  });
+};
 const { Rect, Image } = Shape;
-
 let cellTem = null;
 
 const TemText = computed(()=> store.state.downloadStore.tempText );
@@ -163,7 +169,7 @@ const getPng = () => {
     imgVisible.value = true;
     imgBase64.value = dataUri;
     console.log(dataUri);
-    DataUri.downloadDataUri(dataUri, 'temp.jpeg');
+    // DataUri.downloadDataUri(dataUri, 'temp.jpeg');
   }, {
     serializeImages: true,
     quality: 1,
@@ -282,7 +288,7 @@ const setGraph = () => {
     // angle: 30,
     attrs: {
       rect: {
-        stroke: '#fff',
+        stroke: '#FFFFFF',
       },
     },
     data: {
@@ -314,22 +320,22 @@ const setStencil = () => {
   const tem1 = new Rect({
     width: 100,
     height: 50,
-    stroke:'#fff',
+    stroke:'#FFFFFF',
     attrs: {
       label: {
         fontSize: 12,
-        text: '节点1',
+        text: '文本',
         refX: 0,
         // refY: 5,
         textAnchor: 'start',
         textVerticalAnchor: 'middle',
       },
       rect: {
-        stroke: '#fff',
+        stroke: '#FFFFFF',
       },
     },
     data:{
-      type:'文本',
+      type:'静态文本',
     },
   });
   const tem2 = new Rect({
@@ -338,18 +344,18 @@ const setStencil = () => {
     attrs: {
       label: {
         fontSize: 12,
-        text: '节点2',
-        refX: 10,
+        text: '动态文本：',
+        refX: 0,
         // refY: 5,
         textAnchor: 'start',
         textVerticalAnchor: 'middle',
       },
       rect: {
-        stroke: '#fff',
+        stroke: '#FFFFFF',
       },
     },
     data:{
-      type:'节点2',
+      type:'动态文本',
     },
   });
   const tem3 = new Image({
@@ -383,6 +389,8 @@ onMounted(() => {
   console.log('加载完毕');
   setGraph();
   setStencil();
+  CreateDnd();
+  dnd.start();
   let temp =  store.state.downloadStore.templateVal;
   if (temp != '') {
     console.log(temp);