|
|
|
|
@ -16,13 +16,12 @@
|
|
|
|
|
//canvas宽高
|
|
|
|
|
var canvaswidth = 302;
|
|
|
|
|
var canvasheight = 188;
|
|
|
|
|
var VUE_APP_BASE_API = window.location.protocol+"//"+window.location.host
|
|
|
|
|
var VUE_APP_BASE_API = window.location.protocol+"//"+window.location.host;
|
|
|
|
|
// var VUE_APP_BASE_API="http://hd-wuziguanli-test.ali251.langye.net"
|
|
|
|
|
//文字描述位置
|
|
|
|
|
var textleft = qrcodewidth / 2;
|
|
|
|
|
var texttop = qrcodeheight + 70;
|
|
|
|
|
$(function() {
|
|
|
|
|
console.log(VUE_APP_BASE_API)
|
|
|
|
|
$(function() {
|
|
|
|
|
$(".wrap").html("")
|
|
|
|
|
var ids = getIds('ids').split(",")
|
|
|
|
|
for (var i = 0; i < ids.length; i++) {
|
|
|
|
|
@ -43,11 +42,20 @@
|
|
|
|
|
url: VUE_APP_BASE_API+'/api/admin/base-form/show',
|
|
|
|
|
dataType: "json",
|
|
|
|
|
success: function(result) {
|
|
|
|
|
var printObj = result
|
|
|
|
|
$(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;'>" +
|
|
|
|
|
"<img src='' style='display: block;width:8cm; height:5cm;'>" +
|
|
|
|
|
"</li>")
|
|
|
|
|
createCode("#page" + index, printObj)
|
|
|
|
|
var printObj = result
|
|
|
|
|
$(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;font-size: 18px;font-weight:bold;background-color: #fff;'>" +
|
|
|
|
|
"<p style='text-align:center;margin-bottom:0;padding-top:5px;'>苏州河道处</p>"+
|
|
|
|
|
"<div style='padding:15px;padding-top:5px'>"+
|
|
|
|
|
"<img src='"+printObj['path']+"' style='width:3cm; height:3cm;display: inline-block'>"+
|
|
|
|
|
"<div style='display:inline-block;vertical-align: top;width:170px'>"+
|
|
|
|
|
"<p style='margin:0'>编码:"+printObj['wuzibianma']+"</p>"+
|
|
|
|
|
"<p style='margin:0'>类型:"+printObj['wuzileixing']+"</p>"+
|
|
|
|
|
"<p style='margin:0'>名称:"+printObj['zichanmingcheng']+"</p>"+
|
|
|
|
|
"</div>"+
|
|
|
|
|
"</div>"+
|
|
|
|
|
"</li>")
|
|
|
|
|
|
|
|
|
|
// createCode("#page" + index, printObj)
|
|
|
|
|
$(".load").remove()
|
|
|
|
|
},
|
|
|
|
|
complete: function(xhr, textStatus) {
|
|
|
|
|
@ -55,75 +63,6 @@
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 生成二维码
|
|
|
|
|
function utf16to8(str) {
|
|
|
|
|
var out, i, len, c;
|
|
|
|
|
out = "";
|
|
|
|
|
len = str.length;
|
|
|
|
|
for (i = 0; i < len; i++) {
|
|
|
|
|
c = str.charCodeAt(i);
|
|
|
|
|
if ((c >= 0x0001) && (c <= 0x007F)) {
|
|
|
|
|
out += str.charAt(i);
|
|
|
|
|
} else if (c > 0x07FF) {
|
|
|
|
|
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
|
|
|
|
|
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
|
|
|
|
|
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
|
|
|
|
} else {
|
|
|
|
|
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
|
|
|
|
|
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createCode(id, printObji) {
|
|
|
|
|
// alert(id)
|
|
|
|
|
var qrcode = $(id).qrcode({
|
|
|
|
|
render: 'canvas',
|
|
|
|
|
text:VUE_APP_BASE_API+'/admin/printShow.html',
|
|
|
|
|
width: qrcodewidth,
|
|
|
|
|
height: qrcodeheight,
|
|
|
|
|
background: '#ffffff',
|
|
|
|
|
foreground: '#000000',
|
|
|
|
|
});
|
|
|
|
|
var canvas = qrcode.find('canvas').get(0);
|
|
|
|
|
var img = new Image();
|
|
|
|
|
var str = decodeURI(decodeURI(printObji['zichanmingcheng'])).replace(/\s+/g,'')
|
|
|
|
|
var wzlx = decodeURI(decodeURI(printObji['wuzileixing']))
|
|
|
|
|
var zcbm = decodeURI(decodeURI(printObji['wuzibianma']))
|
|
|
|
|
img.src = canvas.toDataURL('image/png');
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
canvas.width = canvaswidth;
|
|
|
|
|
canvas.height = canvasheight;
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.fillStyle = '#ffffff';
|
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
//设置文字样式
|
|
|
|
|
ctx.fillStyle = '#000000';
|
|
|
|
|
ctx.font = 'bold ' + 18 + 'px Arial';
|
|
|
|
|
ctx.textAlign = 'left';
|
|
|
|
|
//文字描述
|
|
|
|
|
ctx.fillText("苏州河道管理处", 100, 30);
|
|
|
|
|
ctx.fillText("编码:" + zcbm, qrcodeleft + 110, 65);
|
|
|
|
|
if(str.length<=6){
|
|
|
|
|
ctx.fillText("类型:" + wzlx, qrcodeleft + 110, 95);
|
|
|
|
|
ctx.fillText("名称:"+str, qrcodeleft + 110, 125);
|
|
|
|
|
}else{
|
|
|
|
|
ctx.fillText("类型:" + wzlx, qrcodeleft + 110, 95);
|
|
|
|
|
ctx.fillText("名称:"+str.substring(0,6), qrcodeleft + 110, 125);
|
|
|
|
|
ctx.fillText(str.substring(6,str.length), qrcodeleft + 110, 155);
|
|
|
|
|
}
|
|
|
|
|
ctx.drawImage(img, qrcodeleft, qrcodetop);
|
|
|
|
|
var data = canvas.toDataURL('image/png', 1);
|
|
|
|
|
var imgOk = new Image();
|
|
|
|
|
imgOk.src = data;
|
|
|
|
|
$(id).children('img').attr('src', imgOk.src)
|
|
|
|
|
$(id).children('canvas').remove()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function doPrint(obj) {
|
|
|
|
|
if ($(obj).hasClass("disabled")) {
|
|
|
|
|
alert("已经打印过了，如要重新打印请刷新本页");
|
|
|
|
|
@ -258,15 +197,38 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lists li {
|
|
|
|
|
// float: left;
|
|
|
|
|
/* float: left; */
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
/* color:#fff; */
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.lists li>p{
|
|
|
|
|
text-align:center;
|
|
|
|
|
margin-bottom:0;
|
|
|
|
|
padding-top:10px;
|
|
|
|
|
}
|
|
|
|
|
.lists li>div{
|
|
|
|
|
padding:15px;
|
|
|
|
|
}
|
|
|
|
|
.lists li>div img{
|
|
|
|
|
display: inline-block
|
|
|
|
|
}
|
|
|
|
|
.lists li>div div{
|
|
|
|
|
display:inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
width:180px
|
|
|
|
|
}
|
|
|
|
|
.lists li>div div p{
|
|
|
|
|
margin:0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="lists">
|
|
|
|
|
<div class="load">加载中...</div>
|
|
|
|
|
<!-- <div class="load">加载中...</div> -->
|
|
|
|
|
<ul class="wrap">
|
|
|
|
|
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
|
