Skip to content

C
CivManage
Commit 5ae4d251 authored by 涂伟's avatar 涂伟
Browse files
Options

feat: '维保二维码编辑新增宿州二维码样式'

parent 1f6d727c
Show whitespace changes
Inline Side-by-side
Showing with 322 additions and 14 deletions
src/assets/font/omsfont/方正综艺_GBK.ttf 0 → 100644
View file @ 5ae4d251
This diff was suppressed by a .gitattributes entry.
src/assets/images/bsmanager/patrolMaintenance/maintenance/宿州tip.png 0 → 100644
View file @ 5ae4d251
This diff was suppressed by a .gitattributes entry.
src/assets/images/bsmanager/patrolMaintenance/maintenance/宿州标题.png 0 → 100644
View file @ 5ae4d251
This diff was suppressed by a .gitattributes entry.
src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.js
View file @ 5ae4d251
import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react'
import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag, Spin } from 'antd'
import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag, Spin, Select } from 'antd'
import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons'
import styles from './index.less'
import QRCode from 'qrcode.react'
......@@ -10,7 +10,7 @@ import { saveAs } from 'file-saver'
const downloadFileUrl = '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles'
const QRCodeView = (props) => {
const QRCodeView = props => {
const { style, values, active, isBatch, id } = props
......@@ -56,6 +56,83 @@ const QRCodeView = (props) => {
</div>
)
}
const QRCodeViewSuzhou = 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.QRCodeSuzhou} style={style || {}} id={id}>
<div className={styles.info}>
{isBatch ? (
<span className={styles.tag} type="设备名称">
【设备名称】
</span>
) : (
<div className={styles.DeviceName}>{values.DeviceName}</div>
)}
<div style={{ margin: '2%' }} />
{isBatch ? (
<span className={styles.tag} type="设备编号">
【设备编号】
</span>
) : (
<div className={styles.DeviceCode}>{values.DeviceCode}</div>
)}
<div className={styles.infoTip}>
<img src={require('@/assets/images/bsmanager/patrolMaintenance/maintenance/宿州tip.png')} />
</div>
</div>
<div className={styles.QR}>
{/* 8888888 */}
<QRCode
value={QRCodeValue}
size={310}
level="H"
fgColor="#000000"
style={{ margin: 'auto' }}
/>
<div className={styles.QRLogo} active={`${active === 'IsSystemLogo'}`}>
{values.IsSystemLogo === '系统LOGO' ? (
<img
alt="系统logo"
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
alt="自定义logo"
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' }}
>
<img
alt="熊猫logo"
style={{ width: '100%', height: '100%' }}
src={require('@/assets/images/bsmanager/patrolMaintenance/maintenance/熊猫logo.png')}
/>
</div>
</div> */}
<div className={styles.company} active={`${active === 'CorporateName'}`}>
{values.CorporateName}
</div>
</div>
)
}
const QRCodeDesign = (props, ref) => {
......@@ -88,7 +165,7 @@ const QRCodeDesign = (props, ref) => {
render: (r, t, i) => i + 1
},
{
title: '设备名称',
title: '设备���称',
dataIndex: 'DeviceName',
key: 'DeviceName',
align: 'center',
......@@ -112,6 +189,7 @@ const QRCodeDesign = (props, ref) => {
key: 'Title',
align: 'center',
render: (_, row) => {
const Component = row.Template === 'default' ? QRCodeView : QRCodeViewSuzhou;
return (
<div
className={styles.qrCodeCell}
......@@ -120,7 +198,7 @@ const QRCodeDesign = (props, ref) => {
setCurrentRow(row)
}}
>
<QRCodeView
<Component
values={{
CorporateName: row.CorporateName || '熊猫水务',
Title: row.Title || '设备二维码',
......@@ -130,6 +208,7 @@ const QRCodeDesign = (props, ref) => {
DeviceName: row.DeviceName,
DeviceCode: row.DeviceCode,
AccountName: row.AccountName,
Template: row.Template
}}
isBatch={false}
style={{ width: '610px', height: '980px', zoom: 0.075, margin: '0 auto' }}
......@@ -224,16 +303,20 @@ const QRCodeDesign = (props, ref) => {
const downFile = async (row) => {
setLoading(true)
const canvas = document.getElementById(row.DeviceCode);
const can = await html2canvas(canvas, {
const options = {
allowTaint: false,
useCORS: true,
width: 610,
height: 980,
scale: 1,
})
scale: row.Template === 'suzhou' ? 2 : 1,
backgroundColor: '#ffffff'
};
const can = await html2canvas(canvas, options);
let a = document.createElement('a');
a.setAttribute('href', can.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
a.setAttribute('download', `${row.DeviceName}_${row.DeviceCode}`); //这个是必须的，否则会报错
a.setAttribute('href', can.toDataURL());
a.setAttribute('download', `${row.DeviceName}_${row.DeviceCode}`);
a.setAttribute('target', '_self');
a.click();
setLoading(false)
......@@ -289,13 +372,14 @@ const QRCodeDesign = (props, ref) => {
if (code === 0) {
setDataSource(data?.DeviceQRCodeConfigList || [])
setParentQRCode(data?.AccountQRCodeConfig || {})
const { CorporateName, Title, IsPandaLogo, IsSystemLogo, LabelLogoUrl } = data?.AccountQRCodeConfig || {}
const { CorporateName, Title, IsPandaLogo, IsSystemLogo, LabelLogoUrl, Template } = data?.AccountQRCodeConfig || {}
let values = {
CorporateName: CorporateName || '熊猫水务',
Title: Title || '设备二维码',
IsSystemLogo: Boolean(IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
IsPandaLogo: Boolean(IsPandaLogo),
LabelLogoUrl: LabelLogoUrl
LabelLogoUrl: LabelLogoUrl,
Template: Template ? Template : 'default'
}
setShowList(valueToList(LabelLogoUrl))
form?.setFieldsValue(values)
......@@ -315,6 +399,7 @@ const QRCodeDesign = (props, ref) => {
const onValuesChange = (values) => {
form.setFieldsValue(values)
setValues(form.getFieldsValue(true))
console.log(values, 'valuesvaluesvaluesvalues66666');
}
const bathEdit = () => {
......@@ -365,6 +450,7 @@ const QRCodeDesign = (props, ref) => {
labelLogoUrl: values.LabelLogoUrl,
isSystemLogo: values.IsSystemLogo === '系统LOGO' ? 1 : 0,
isPandaLogo: values.IsPandaLogo ? 1 : 0,
Template: values.Template
}
const { code, data } = await EditOrAddDeviceQRCodeConfig(params)
if (code === 0) {
......@@ -432,8 +518,36 @@ const QRCodeDesign = (props, ref) => {
initialValues={values}
onValuesChange={onValuesChange}
>
{/* <div className={styles.gName}>模板选择</div>
<div style={{ padding: '10px 10px 0 10px' }}>
<Form.Item label="LOGO" name="Template">
<Radio.Group onChange={() => setActive('IsSystemLogo')}>
<Radio value="自定义LOGO">自定义LOGO</Radio>
<Radio value="系统LOGO">系统LOGO</Radio>
</Radio.Group>
</Form.Item>
</div> */}
<div className={styles.gName}>基础信息</div>
<div style={{ padding: '10px 10px 0 10px' }}>
<Form.Item label="模板选择" name="Template">
<Select
// defaultValue="lucy"
style={{
width: 120,
}}
// disabled
options={[
{
value: 'default',
label: '默认样式',
},
{
value: 'suzhou',
label: '宿州样式',
},
]}
/>
</Form.Item>
<Form.Item label="公司名称" name="CorporateName">
<Input onFocus={() => setActive('CorporateName')} placeholder="请选择公司名称" allowClear />
</Form.Item>
......@@ -483,7 +597,11 @@ const QRCodeDesign = (props, ref) => {
</div>
<div className={styles.right}>
<div className={styles.box}>
{values.Template === 'default' ? (
<QRCodeView values={values} active={active} isBatch={isBatch} />
) : (
<QRCodeViewSuzhou values={values} active={active} isBatch={isBatch} />
)}
</div>
</div>
</div>
......@@ -495,7 +613,8 @@ const QRCodeDesign = (props, ref) => {
width={620}
bodyStyle={{ width: '100%', height: '980px', padding: '0' }}
>
<QRCodeView
{currentRow.Template === 'default' ? <QRCodeView
id={currentRow.DeviceCode}
values={{
CorporateName: currentRow.CorporateName || '熊猫水务',
......@@ -508,13 +627,27 @@ const QRCodeDesign = (props, ref) => {
AccountName: currentRow.AccountName,
}}
isBatch={false}
/>
/> : <QRCodeViewSuzhou
id={currentRow.DeviceCode}
values={{
CorporateName: currentRow.CorporateName || '熊猫水务',
Title: currentRow.Title || '设备二维码',
IsSystemLogo: Boolean(currentRow.IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
IsPandaLogo: Boolean(currentRow.IsPandaLogo),
LabelLogoUrl: currentRow.LabelLogoUrl,
DeviceName: currentRow.DeviceName,
DeviceCode: currentRow.DeviceCode,
AccountName: currentRow.AccountName,
}}
isBatch={false}
/>}
</Modal>
<div id={'QRCodeBoxs'} style={{ position: 'fixed', left: '-1200px', top: '-1200px', background: '#fff' }}>
{
dataSource.map(row => {
const Component = row.Template === 'default' ? QRCodeView : QRCodeViewSuzhou;
return (
<QRCodeView
<Component
id={row.DeviceCode}
values={{
CorporateName: row.CorporateName || '熊猫水务',
......@@ -525,6 +658,7 @@ const QRCodeDesign = (props, ref) => {
DeviceName: row.DeviceName,
DeviceCode: row.DeviceCode,
AccountName: row.AccountName,
Template: row.Template || 'default'
}}
isBatch={false}
style={{ width: '610px', height: '980px', margin: '0 auto' }}
......
src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.less
View file @ 5ae4d251
@imgSrc: '@/assets/images/bsmanager/patrolMaintenance/maintenance';
@font-face {
font-family: 'FZZYK';
src: url('@/assets/font/omsfont/方正综艺_GBK.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.QRCodeModal {
.ant-modal-header {
padding: 0
......@@ -329,6 +336,173 @@
}
}
.QRCodeSuzhou {
width: 100%;
height: 100%;
background: url('@{imgSrc}/宿州二维码背景.png');
background-size: 100% 90%;
position: relative;
.company {
height: 100px;
width: 100%;
color: #0086D1;
padding: 3%;
text-align: center;
font-size: 40px;
background: white;
position: absolute;
bottom: 0;
font-family: 'FZZYK', sans-serif;
&[active='true'] {
border: 1.5px solid #f57c00;
}
}
.title {
text-align: center;
font-size: 52px;
color: white;
font-weight: 700;
font-style: italic;
&[active='true'] {
border: 1.5px solid #f57c00;
}
}
.QR {
position: absolute;
top: 32.5%;
left: 22%;
// transform: translate(-50%, -50%);
width: 56.3%;
height: 35.7%;
overflow: hidden;
background: #fff;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
// position: absolute;
// top: 37.5%;
// left: 26.2%;
// width: 47.3%;
// height: 29.7%;
// overflow: hidden;
.QRLogo {
z-index: 99;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 86px;
height: 86px;
&[active='true'] {
border: 1.5px solid #f57c00;
}
.systemLogo {
width: 100%;
height: 100%;
background: url('@{imgSrc}/熊猫-蓝色.png');
background-size: 100% 100%;
}
}
}
.pandaLogo {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 22%;
width: 47%;
height: 5%;
.pandaLogoC {
// width: 100%;
// height: 100%;
// background: url('@{imgSrc}/熊猫logo.png');
// background-size: 100% 100%;
}
&[active='true'] {
border: 1.5px solid #f57c00;
}
}
.info {
position: absolute;
left: 50%;
top: 6%;
transform: translateX(-50%);
width: 84%;
height: 15%;
background: url('@{imgSrc}/宿州标题.png');
background-size: 100% 40%;
background-repeat: no-repeat;
background-position-y: 100%;
text-align: center;
.infoTip {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 120%);
img {
width: 100px;
}
}
.tag {
// margin-left: 29%;
padding: 4px 20px;
border-radius: 2px;
font-size: 26px;
&[type='设备名称'] {
background: rgb(205 235 221);
color: rgb(42 91 68);
display: inline-block;
margin-top: 10px;
}
&[type='设备编号'] {
color: rgb(224, 95, 66);
background: rgb(224 201 196);
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
}
}
.DeviceName {
text-align: center;
font-size: 50px;
font-weight: bold;
color: #fff;
}
.DeviceCode {
text-align: center;
font-size: 34px;
font-weight: bold;
color: #0086D1;
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
}
}
}
.QRCodeMinModal {
.ant-modal {
zoom: 0.5;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment