1115

.stylelintrc.js

+const fabric = require('@umijs/fabric');
+
+module.exports = {
+    ...fabric.stylelint,
+};

package.json

@@ -54,8 +54,9 @@
     "browserslist": "^4.21.4",
     "classnames": "^2.3.0",
     "crypto-js": "^4.1.1",
+    "fabric": "^5.3.0",
+    "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
-    "konva": "^9.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "omit.js": "^2.0.2",
@@ -68,10 +69,8 @@
     "react-dev-inspector": "^1.7.0",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.2.0",
-    "react-konva": "^18.2.10",
     "react-resizable": "^3.0.4",
-    "umi-request": "^1.4.0",
-    "use-image": "^1.1.1"
+    "umi-request": "^1.4.0"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.1.0",

src/components/Imagecanvas/index.jsx

-import React from 'react';
-import { Group, Image, Layer, Rect, Stage, Text } from 'react-konva';
-import useImage from 'use-image';
-
-const Imagecanvas = (props) => {
-
-    const text = {
-        text: '左玲玲智能设备01',
-        x: 50,
-        y: 180,
-        width: 150,
-        align: 'center',
-        fontSize: 14,
-        fill: '#FFFFFF',
-    };
-    return <Stage width={200} height={200}>
-        <Layer>
-            <Image url={require('@/assets/logo.png')} width={150} height={150} />
-            <Text {...text} />
-            <Text {...text} />
-        </Layer>
-    </Stage>
-}
-export default Imagecanvas;
\ No newline at end of file

src/pages/lease/ledger/index.jsx

@@ -12,6 +12,7 @@ import Leaseresume from "./Leaseresume";
 import Operatinghistory from "./Operatinghistory";
 import Resume from "./Resume";
 import Basemsg from "./Basemsg";
+import setAllCanvas from "@/utils/drawimage"//导出二维码
 const Ledger = () => {
     let actionRef = useRef();
     const [drawer, setdrawer] = useState({
@@ -287,7 +288,7 @@ const Ledger = () => {
                     type: 'default',
                     onClick: async () => {
                         message.warning('导出中，请稍后');
-                        await exportFetch({ url: '/lease/umLeaseLedger/exportExcel', params: { ...searchParams } });
+                        await exportFetch({ url: '/lease/umLeaseLedger/exportExcel', params: { ...searchParams, ...extraparams } });
                     },
                     style: { margin: '0 12px' }
                 }}
@@ -298,8 +299,9 @@ const Ledger = () => {
                 key='exportqrcode'
                 btn={{
                     type: 'default',
-                    onClick: () => {
-
+                    onClick: async () => {
+                        let res = await doFetch({ url: '/lease/umLeaseLedger/queryQrCode', params: { ...searchParams, ...extraparams } });
+                        setAllCanvas(res?.data?.dataList ?? [], 20, 20);
                     },
                 }}
             >

src/utils/drawimage.js

+import React, { Component } from 'react';
+import {
+    message
+} from 'antd';
+import { fabric } from "fabric"
+import { saveAs } from 'file-saver';
+import JSZip from 'jszip';
+
+
+
+function dataURLtoBlob(dataurl) {
+    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+}
+
+function setAllCanvas(data, ft, fs, tp, ts) {
+    if (data.length == 0) {
+        message.warn("暂无设备...");
+        return
+    }
+    message.loading('二维码生成中...');
+    let contain = document.createElement("div"), urlArr = [], _it = this;
+    contain.setAttribute("id", "contain");
+    contain.innerHTML = '';
+    data.map((item, i) => {
+        let cvs = document.createElement("canvas");
+        cvs.id = "canvas" + i;
+        contain.appendChild(cvs);
+        let contains = document.getElementById("canvas" + i);
+        let canvas = new fabric.StaticCanvas(contains, {
+            backgroundColor: "white",
+            selection: false,
+            width: 220,
+            height: 378
+        }), pos = new fabric.Triangle({
+            width: 200, height: 200, left: 10, top: 10
+        });
+
+
+        fabric.Image.fromURL(item.qrCodeUrl, function (oImg) {
+            oImg.scale(0.22).set({ left: 10, top: 10 });
+            canvas.add(oImg);
+            var text1 = new fabric.Textbox(item.equipmentName ? item.equipmentName : "", {
+                width: 200,
+                left: 10,
+                splitByGrapheme: true,
+                top: tp ? tp : 260,
+                fontSize: ft ? ft : 56,
+                textAlign: "center"
+            });
+
+            canvas.add(text1);
+            var text2 = new fabric.Textbox(item.equipmentNo ? item.equipmentNo : "", {
+                width: 200,
+                left: 10,
+                splitByGrapheme: true,
+                top: ts ? ts : 320,
+                fontSize: fs ? fs : 36,
+                textAlign: "center"
+            });
+            canvas.add(text2);
+            urlArr.push({
+                base64: dataURLtoBlob(canvas.toDataURL('png')),
+                name: item.equipmentNo && item.equipmentNo + "-" + new Date().getTime() + i
+            })
+            if (urlArr.length == data.length) {
+                let zip = new JSZip();
+                message.destroy();
+                urlArr.map((item, i) => {
+                    zip.file(`${item.name}.png`, item.base64, { base64: true });
+                })
+                zip.generateAsync({ type: "blob" }).then(function (content) {
+                    saveAs(content, "二维码.zip");
+                });
+            }
+        }, { crossOrigin: '*' });
+    })
+}
+
+
+
+export default setAllCanvas;
\ No newline at end of file