diff --git a/src/api/basic/basic.js b/src/api/basic/basic.js index 188ab870..856eee7e 100644 --- a/src/api/basic/basic.js +++ b/src/api/basic/basic.js @@ -355,7 +355,7 @@ export function PropDetail(id) { // 获取设备信息-qrCode export function getMachineByQrCode(query) { return request({ - url: '/material/base/machine/getMachineByQrCode', + url: '/material/ma_machine/getHisByQrcode', method: 'get', params: query }) diff --git a/src/utils/chapter.js b/src/utils/chapter.js index 52fc2747..48775ec3 100644 --- a/src/utils/chapter.js +++ b/src/utils/chapter.js @@ -1,78 +1,76 @@ let chapter = (text, companyName) => { - let canvas = document.getElementById("canvas"); - if(canvas!=null){ - 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, 80, 0, Math.PI * 2); //宽、高、半径 - context.stroke(); - - //画五角星 - create5star(context, width, height, 20, "#f00", 0); - - // 绘制印章名称 - context.font = "14px 宋体"; - context.textBaseline = "middle"; //设置文本的垂直对齐方式 - context.textAlign = "center"; //设置文本的水平对对齐方式 - context.lineWidth = 1; - context.strokeStyle = "#f00"; - context.strokeText(text, width, height + 50); - - // 绘制印章单位 - context.translate(width, height); // 平移到此位置, - context.font = "14px 宋体"; - 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(65, 0); // 平移到此位置,此时字和x轴垂直,公司名称和最外圈的距离 - context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴 - context.strokeText(c, 0, 0); // 此点为字的中心点 - context.restore(); + let canvas = document.getElementById('canvas') + if (canvas != null) { + let context = canvas.getContext('2d') + + //let text = "XXX专用章"; + //let companyName = "XXX科技股份有限公司"; + + // 绘制印章边框 + let width = canvas.width / 2 + let height = canvas.height / 2 + context.lineWidth = 1 // 边框宽度 + context.strokeStyle = '#f00' + context.beginPath() + context.arc(width, height, 90, 0, Math.PI * 2) //宽、高、半径 + context.stroke() + + //画五角星 + create5star(context, width, height, 30, '#f00', 0) + + // 绘制印章名称 + context.font = '16px 宋体' + context.textBaseline = 'middle' //设置文本的垂直对齐方式 + context.textAlign = 'center' //设置文本的水平对对齐方式 + context.lineWidth = 1 + // context.strokeStyle = '#f00' + context.fillStyle = '#f00' + context.fillText(text, width, height + 45) + + // 绘制印章单位 + context.translate(width, height) // 平移到此位置, + context.font = '16px 宋体' + 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(80, 0) // 平移到此位置,此时字和x轴垂直,公司名称和最外圈的距离 + context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴 + context.fillText(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() + } } - - //绘制五角星 - 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 +} + +export default chapter diff --git a/src/views/qrCode/qrCode.vue b/src/views/qrCode/qrCode.vue index d705acb8..40004860 100644 --- a/src/views/qrCode/qrCode.vue +++ b/src/views/qrCode/qrCode.vue @@ -3,15 +3,13 @@