fix: 二维码编辑器优化

package.json

@@ -96,7 +96,7 @@
         "@wisdom-cesium/krpano": "^1.0.29-60",
         "@wisdom-map/amap": "1.7.0",
         "@wisdom-map/arcgismap": "1.4.0-294",
-        "@wisdom-map/basemap":  "1.1.0-41",
+        "@wisdom-map/basemap": "1.1.0-41",
         "@wisdom-utils/components": "0.1.337",
         "@wisdom-utils/utils": "0.1.377",
         "ace-builds": "^1.4.12",
@@ -112,6 +112,7 @@
         "dragm": "^0.0.5",
         "echarts-for-react": "^3.0.2",
         "express": "4.16.4",
+        "file-saver": "^2.0.5",
         "fontfaceobserver": "2.1.0",
         "gojs": "2.1.49",
         "gsap": "^3.10.4",
@@ -125,6 +126,7 @@
         "invariant": "2.2.4",
         "ip": "1.1.5",
         "js-calendar-converter": "0.0.4",
+        "jszip": "^3.10.1",
         "lodash": "4.17.11",
         "minimist": "1.2.0",
         "panda-xform": "6.0.16",

src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.js

 import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react'
-import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag } from 'antd'
+import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag, Spin } from 'antd'
 import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import QRCode from 'qrcode.react'
 import { GetDeviceQRCodeConfig, EditOrAddDeviceQRCodeConfig } from '@/services/flow/flow'
 import html2canvas from 'html2canvas'
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
 
 const downloadFileUrl = '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles'
 
+const QRCodeView = (props) => {
+
+  const { style, values, active, isBatch, id } = props
+
+  const QRCodeValue = useMemo(() => {
+    return `${window.location.origin}/civ_mobile/product/workflow/equipment/devicePatrol?DeviceCode=${values.DeviceCode}&AccountName=${values.AccountName}`
+  }, [values.DeviceCode, values.AccountName])
+
+  return (
+    <div className={styles.QRCode} style={style || {}} id={id}>
+      <div className={styles.company} active={`${active === 'CorporateName'}`}>{values.CorporateName}</div>
+      <div className={styles.title} active={`${active === 'Title'}`}>{values.Title}</div>
+      <div className={styles.QR}>
+        <QRCode
+          value={QRCodeValue}
+          size={158} // 二维码的大小
+          level="H" // 设置容错等级为最高
+          fgColor="#000000" // 二维码的颜色
+          style={{
+            margin: 'auto',
+          }}
+        />
+        <div className={styles.QRLogo} active={`${active === 'IsSystemLogo'}`}>
+          {
+            values.IsSystemLogo === '系统LOGO' ? (
+              <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png`} />
+            ) : (
+              <img
+                style={{ width: '100%', height: '100%', display: values.LabelLogoUrl ? 'block' : 'none' }}
+                src={`${window.origin}${downloadFileUrl}?filePath=${values.LabelLogoUrl}`}
+              />
+            )
+          }
+        </div>
+      </div>
+      <div className={styles.pandaLogo} active={`${active === 'IsPandaLogo'}`}>
+        <div className={styles.pandaLogoC} style={{ display: values.IsPandaLogo ? 'block' : 'none' }}></div>
+      </div>
+      <div className={styles.info}>
+        {isBatch ? <span className={styles.tag} type={'设备名称'}>【设备名称】</span> : <div className={styles.DeviceName}>{values.DeviceName}</div>}
+        <div style={{ margin: '2%' }}></div>
+        {isBatch ? <span className={styles.tag} type={'设备编号'}>【设备编号】</span> : <div className={styles.DeviceCode}>{values.DeviceCode}</div>}
+      </div>
+    </div>
+  )
+}
+
 const QRCodeDesign = (props, ref) => {
 
   useImperativeHandle(ref, () => ({
@@ -25,6 +74,7 @@ const QRCodeDesign = (props, ref) => {
   const [values, setValues] = useState({})
   const [currentRow, setCurrentRow] = useState({})
   const [minVisible, setMinVisible] = useState(false)
+  const [active, setActive] = useState('')
   const [form] = Form.useForm()
 
   const columns = useMemo(() => {
@@ -109,12 +159,12 @@ const QRCodeDesign = (props, ref) => {
 
   const option = {
     name: 'file',
-    action: `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`,
+    action: `${window.location.origin} /PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`,
     listType: 'picture',
     withCredentials: true,
     maxCount: 1,
     showUploadList: {
-      showRemoveIcon: false,
+      showRemoveIcon: true,
       showDownloadIcon: true,
     },
     beforeUpload(file, fileList) {
@@ -139,7 +189,7 @@ const QRCodeDesign = (props, ref) => {
     },
     onChange: ({ file, fileList, event }) => {
       if (!file.size) {
-        return message.error('上传文件为空，禁止上传！')
+        return
       }
       // 检验名字，名字不通过不允许显示
       // if (filenameVerification(file).type === 'error') return false;
@@ -165,25 +215,24 @@ const QRCodeDesign = (props, ref) => {
     // onPreview: async (file) => {
 
     // },
-    // onRemove: async (file) => {
-    //   console.log('file', file)
-    // },
+    onRemove: (file) => {
+      setShowList([])
+      form.setFieldsValue({ LabelLogoUrl: '' })
+      setValues({ ...values, LabelLogoUrl: '' })
+    },
   }
 
-  const downFile = (row) => {
-    let canvas = document.getElementById(row.DeviceCode);
-    html2canvas(canvas, {
-      allowTaint: false,
-      useCORS: true,
-      width: 310,
-      scale: 2 // 增加像素密度
-    }).then((can) => {
-      let a = document.createElement('a');
-      a.setAttribute('href', can.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
-      a.setAttribute('download', `${row.AccountName}_${row.DeviceCode}`); //这个是必须的，否则会报错
-      a.setAttribute('target', '_self');
-      a.click();
-    });
+  const downFile = async (row) => {
+    setLoading(true)
+    const canvas = document.getElementById(row.DeviceCode);
+    const can = await html2canvas(canvas, { allowTaint: false, useCORS: true, width: 310, scale: 2 })
+    console.log('can', can.toDataURL())
+    let a = document.createElement('a');
+    a.setAttribute('href', can.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
+    a.setAttribute('download', `${row.AccountName}_${row.DeviceCode}`); //这个是必须的，否则会报错
+    a.setAttribute('target', '_self');
+    a.click();
+    setLoading(false)
   }
 
   const editStyle = (row) => {
@@ -252,6 +301,7 @@ const QRCodeDesign = (props, ref) => {
   }
 
   const open = (record) => {
+    setActive('')
     setRecord(record)
     setShow(false)
     setVisible(true)
@@ -268,9 +318,34 @@ const QRCodeDesign = (props, ref) => {
     setShow(true)
   }
 
+  const dataURLtoBlob = (dataurl) => {
+    var arr = dataurl.split(',');
+    var mime = arr[0].match(/:(.*?);/)[1];
+    var bstr = atob(arr[1]);
+    var n = bstr.length;
+    var u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  }
+
   const Allexport = async () => {
-    dataSource.forEach(row => {
-      downFile(row)
+    setLoading(true)
+    let zip = new JSZip()
+    if (dataSource.length) {
+      for (let i = 0; i < dataSource.length; i++) {
+        let row = dataSource[i]
+        const canvas = document.getElementById(row.DeviceCode);
+        const can = await html2canvas(canvas, { allowTaint: false, useCORS: true, width: 310, scale: 2 })
+        let img = new Image()
+        img.src = can.toDataURL('image/png')
+        zip.file(`${row.AccountName}_${row.DeviceCode}.png`, dataURLtoBlob(img.src))
+      }
+    }
+    zip.generateAsync({ type: 'blob' }).then((res) => {
+      saveAs(res)
+      setLoading(false)
     })
   }
 
@@ -297,49 +372,6 @@ const QRCodeDesign = (props, ref) => {
     }
   }
 
-  const QRCodeView = (props) => {
-
-    const { style, values, isBatch, id } = props
-    const QRCodeValue = `${window.location.origin}/civ_mobile/product/workflow/equipment/devicePatrol?DeviceCode=${values.DeviceCode}&AccountName=${values.AccountName}`
-
-    return (
-      <div className={styles.QRCode} style={style || {}} id={id}>
-        <div className={styles.company}>{values.CorporateName}</div>
-        <div className={styles.title}>{values.Title}</div>
-        <div className={styles.QR}>
-          <QRCode
-            value={QRCodeValue}
-            size={158} // 二维码的大小
-            level="H" // 设置容错等级为最高
-            fgColor="#000000" // 二维码的颜色
-            style={{
-              margin: 'auto',
-            }}
-          />
-          <div className={styles.QRLogo}>
-            {
-              values.IsSystemLogo === '系统LOGO' ? (
-                // <div className={styles.systemLogo}></div>
-                <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png`} />
-              ) : (
-                <img
-                  style={{ width: '100%', height: '100%', display: values.LabelLogoUrl ? 'block' : 'none' }}
-                  src={`${window.origin}${downloadFileUrl}?filePath=${values.LabelLogoUrl}`}
-                />
-              )
-            }
-          </div>
-        </div>
-        <div className={styles.pandaLogo} style={{ display: values.IsPandaLogo ? 'block' : 'none' }}></div>
-        <div className={styles.info}>
-          {isBatch ? <span className={styles.tag} type={'设备名称'}>【设备名称】</span> : <div className={styles.DeviceName}>{values.DeviceName}</div>}
-          <div style={{ margin: '2%' }}></div>
-          {isBatch ? <span className={styles.tag} type={'设备编号'}>【设备编号】</span> : <div className={styles.DeviceCode}>{values.DeviceCode}</div>}
-        </div>
-      </div>
-    )
-  }
-
   const footer = (
     <div>
       {
@@ -369,16 +401,17 @@ const QRCodeDesign = (props, ref) => {
       footer={footer}
     >
       <div className={styles.QRCodeList} style={{ display: show ? 'none' : 'block' }}>
-        <div className={styles.table}>
-          <Table
-            size='small'
-            loading={loading}
-            columns={columns}
-            dataSource={dataSource}
-            pagination={false}
-            scroll={{ y: 570 }}
-          />
-        </div>
+        <Spin spinning={loading} tip="下载中...">
+          <div className={styles.table}>
+            <Table
+              size='small'
+              columns={columns}
+              dataSource={dataSource}
+              pagination={false}
+              scroll={{ y: 570 }}
+            />
+          </div>
+        </Spin>
       </div>
       <div className={styles.QRCodeDesign} style={{ display: show ? 'flex' : 'none' }}>
         <div className={styles.left}>
@@ -398,10 +431,10 @@ const QRCodeDesign = (props, ref) => {
               <div className={styles.gName}>基础信息</div>
               <div style={{ padding: '10px 10px 0 10px' }}>
                 <Form.Item label="公司名称" name="CorporateName">
-                  <Input placeholder="请选择公司名称" allowClear />
+                  <Input onFocus={() => setActive('CorporateName')} placeholder="请选择公司名称" allowClear />
                 </Form.Item>
                 <Form.Item label="标题" name="Title">
-                  <Input placeholder="请选择标题" allowClear />
+                  <Input onFocus={() => setActive('Title')} placeholder="请选择标题" allowClear />
                 </Form.Item>
                 <Form.Item label="设备名称" name="DeviceName">
                   {isBatch ? <span className={styles.tag} type={'设备名称'}>【设备名称】</span> : <Input placeholder="" allowClear />}
@@ -413,7 +446,7 @@ const QRCodeDesign = (props, ref) => {
               <div className={styles.gName}>标签LOGO</div>
               <div style={{ padding: '10px 10px 0 10px' }}>
                 <Form.Item label="LOGO" name="IsSystemLogo">
-                  <Radio.Group>
+                  <Radio.Group onChange={() => setActive('IsSystemLogo')}>
                     <Radio value="自定义LOGO">自定义LOGO</Radio>
                     <Radio value="系统LOGO">系统LOGO</Radio>
                   </Radio.Group>
@@ -438,7 +471,7 @@ const QRCodeDesign = (props, ref) => {
                   </div>
                 </Upload.Dragger>
                 <Form.Item label="熊猫LOGO" name="IsPandaLogo" valuePropName="checked" style={{ marginTop: '10px' }}>
-                  <Switch checkedChildren="启用" unCheckedChildren="禁用" />
+                  <Switch onChange={() => setActive('IsPandaLogo')} checkedChildren="启用" unCheckedChildren="禁用" />
                 </Form.Item>
               </div>
             </Form>
@@ -446,16 +479,17 @@ const QRCodeDesign = (props, ref) => {
         </div>
         <div className={styles.right}>
           <div className={styles.box}>
-            <QRCodeView values={values} isBatch={isBatch} />
+            <QRCodeView values={values} active={active} isBatch={isBatch} />
           </div>
         </div>
       </div>
       <Modal
+        wrapClassName={styles.QRCodeMinModal}
         onCancel={() => setMinVisible(false)}
         visible={minVisible}
         footer={null}
         width={310}
-        bodyStyle={{ width: '100%', height: '491px', padding: '10px' }}
+        bodyStyle={{ width: '100%', height: '491px', padding: '0' }}
       >
         <QRCodeView
           id={currentRow.DeviceCode}

src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.less

@@ -183,10 +183,14 @@
   background-size: 100% 100%;
   position: relative;
   .company {
+    height: 50px;
     color: white;
     padding: 3%;
     text-align: center;
     font-size: 20px;
+    &[active='true'] {
+      border: 1.5px solid #f57c00;
+    }
   }
   .title {
     text-align: center;
@@ -194,6 +198,9 @@
     color: white;
     font-weight: 700;
     font-style: italic;
+    &[active='true'] {
+      border: 1.5px solid #f57c00;
+    }
   }
   .QR {
     position: absolute;
@@ -211,6 +218,9 @@
       transform: translate(-50%, -50%);
       width: 30%;
       height: 30%;
+      &[active='true'] {
+        border: 1.5px solid #f57c00;
+      }
       .systemLogo {
         width: 100%;
         height: 100%;
@@ -226,8 +236,15 @@
     bottom: 22%;
     width: 47%;
     height: 5%;
-    background: url('@{imgSrc}/熊猫logo.png');
-    background-size: 100% 100%;
+    .pandaLogoC {
+      width: 100%;
+      height: 100%;
+      background: url('@{imgSrc}/熊猫logo.png');
+      background-size: 100% 100%;
+    }
+    &[active='true'] {
+      border: 1.5px solid #f57c00;
+    }
   }
   .info {
     position: absolute;
@@ -260,4 +277,12 @@
       font-weight: bold;
     }
   }
+}
+
+.QRCodeMinModal {
+  .ant-modal-close-x {
+    width: 40px;
+    height: 40px;
+    color: white;
+  }
 }
\ No newline at end of file