From 7f59083e7bd86c9fda06299c7ae48ce431ad5aa1 Mon Sep 17 00:00:00 2001 From: zhouzy062 Date: Mon, 4 Mar 2024 16:38:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=A5=E7=9C=8B=E8=AE=BE=E5=A4=87=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sgzb-ui/src/api/base/base.js | 9 +- sgzb-ui/src/permission.js | 2 +- sgzb-ui/src/router/index.js | 7 + sgzb-ui/src/utils/chapter.js | 76 ++++++++ sgzb-ui/src/views/qrCode/qrCode.vue | 184 ++++++++++++++++++ .../src/views/store/label/labelBinding.vue | 13 +- sgzb-ui/src/views/store/tools/devices.vue | 3 +- 7 files changed, 285 insertions(+), 9 deletions(-) create mode 100644 sgzb-ui/src/utils/chapter.js create mode 100644 sgzb-ui/src/views/qrCode/qrCode.vue diff --git a/sgzb-ui/src/api/base/base.js b/sgzb-ui/src/api/base/base.js index 1e7c6835..3e03f3bc 100644 --- a/sgzb-ui/src/api/base/base.js +++ b/sgzb-ui/src/api/base/base.js @@ -287,7 +287,14 @@ export function UnbindPropInfo(unitId) { } - +// 获取设备信息-qrCode +export function getMachineByQrCode(query) { + return request({ + url: '/base/machine/getMachineByQrCode', + method: 'get', + params: query + }) +} diff --git a/sgzb-ui/src/permission.js b/sgzb-ui/src/permission.js index d4e1126b..eb62d4e0 100644 --- a/sgzb-ui/src/permission.js +++ b/sgzb-ui/src/permission.js @@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request' NProgress.configure({ showSpinner: false }) -const whiteList = ['/login', '/register','/auth/sendCode'] +const whiteList = ['/login', '/register','/auth/sendCode','/qrCode/qrCodePage'] router.beforeEach((to, from, next) => { NProgress.start() diff --git a/sgzb-ui/src/router/index.js b/sgzb-ui/src/router/index.js index 71907b69..449b2f72 100644 --- a/sgzb-ui/src/router/index.js +++ b/sgzb-ui/src/router/index.js @@ -87,6 +87,13 @@ export const constantRoutes = [ meta: { title: '个人中心', icon: 'user' } } ] + }, + { + path: '/qrCode/qrCodePage', + component: () => import('@/views/qrCode/qrCode'), + hidden: true + + } ] diff --git a/sgzb-ui/src/utils/chapter.js b/sgzb-ui/src/utils/chapter.js new file mode 100644 index 00000000..3bebf97a --- /dev/null +++ b/sgzb-ui/src/utils/chapter.js @@ -0,0 +1,76 @@ +let chapter = (text, companyName) => { + let canvas = document.getElementById("canvas"); + let context = canvas.getContext("2d"); + + //let text = "XXX专用章"; + //let companyName = "XXX科技股份有限公司"; + + // 绘制印章边框 + let width = canvas.width / 2; + let height = canvas.height / 2; + context.lineWidth = 3; + context.strokeStyle = "#f00"; + context.beginPath(); + context.arc(width, height, 90, 0, Math.PI * 2); //宽、高、半径 + context.stroke(); + + //画五角星 + create5star(context, width, height, 25, "#f00", 0); + + // 绘制印章名称 + context.font = "18px 宋体"; + context.textBaseline = "middle"; //设置文本的垂直对齐方式 + context.textAlign = "center"; //设置文本的水平对对齐方式 + context.lineWidth = 1; + context.strokeStyle = "#f00"; + context.strokeText(text, width, height + 60); + + // 绘制印章单位 + context.translate(width, height); // 平移到此位置, + context.font = "21px 宋体"; + let count = companyName.length; // 字数 + let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度 + let chars = companyName.split(""); + let c; + for (let i = 0; i < count; i++) { + c = chars[i]; // 需要绘制的字符 + if (i == 0) { + context.rotate((5 * Math.PI) / 6); + } else { + context.rotate(angle); + } + + context.save(); + context.translate(70, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离 + context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴 + context.strokeText(c, 0, 0); // 此点为字的中心点 + context.restore(); + } + + //绘制五角星 + function create5star(context, sx, sy, radius, color, rotato) { + context.save(); + context.fillStyle = color; + context.translate(sx, sy); //移动坐标原点 + context.rotate(Math.PI + rotato); //旋转 + context.beginPath(); //创建路径 + // let x = Math.sin(0); + // let y = Math.cos(0); + let dig = (Math.PI / 5) * 4; + for (let i = 0; i < 5; i++) { + //画五角星的五条边 + let x = Math.sin(i * dig); + let y = Math.cos(i * dig); + context.lineTo(x * radius, y * radius); + } + context.closePath(); + context.stroke(); + context.fill(); + context.restore(); + } + }; + + export default chapter; + + + \ No newline at end of file diff --git a/sgzb-ui/src/views/qrCode/qrCode.vue b/sgzb-ui/src/views/qrCode/qrCode.vue new file mode 100644 index 00000000..c52ce65f --- /dev/null +++ b/sgzb-ui/src/views/qrCode/qrCode.vue @@ -0,0 +1,184 @@ + + + + \ No newline at end of file diff --git a/sgzb-ui/src/views/store/label/labelBinding.vue b/sgzb-ui/src/views/store/label/labelBinding.vue index 4a3e3d6a..fe9117cf 100644 --- a/sgzb-ui/src/views/store/label/labelBinding.vue +++ b/sgzb-ui/src/views/store/label/labelBinding.vue @@ -39,7 +39,7 @@ @@ -254,7 +254,7 @@ v-model="form.labelType" placeholder="请选择标签类型" style="width: 100%" - disabled filterable + disabled > { // this.selectionList.forEach((item, index) => { this.$refs.codeItem.innerHTML = ""; var qrcode = new QRCode(this.$refs.codeItem, { - text: row.labelCode, //二维码内容 + text: str, //二维码内容 width: 256, height: 256, colorDark: '#000000', diff --git a/sgzb-ui/src/views/store/tools/devices.vue b/sgzb-ui/src/views/store/tools/devices.vue index 34128f9a..3590274e 100644 --- a/sgzb-ui/src/views/store/tools/devices.vue +++ b/sgzb-ui/src/views/store/tools/devices.vue @@ -496,10 +496,11 @@ export default { this.uploadOpen = true; this.title = "二维码查看"; this.qrCode = row.qrCode + let str = 'http://10.40.92.46:80/qrCode/qrCodePage?qrCode='+row.qrCode this.$nextTick(() => { this.$refs.codeItem.innerHTML = ""; var qrcode = new QRCode(this.$refs.codeItem, { - text: row.qrCode, //二维码内容 + text: str, //二维码内容 width: 256, height: 256, colorDark: '#000000',