console
const erp_base_url = 'https://erp.dropshippinglite.com';
const res = {
"pack_machine": "p1",
"pack_by": 67,
"operator": "张三",
"today": 232,
"month": 562441,
"perDay": 210,
"data": [
{
"ticketsNum": "92626903590992110041655769",
"result": "true",
"message": "JPS",
"detail": [
{
"product": "春秋T恤",
"sku": "黑色/XL",
"img": "https://images.pexels.com/photos/9582594/pexels-photo-9582594.jpeg?auto=compress&cs=tinysrgb&w=800",
"quanity": 36
},
{
"product": "春秋T恤",
"sku": "白色/M",
"img": "https://images.pexels.com/photos/9544524/pexels-photo-9544524.jpeg?auto=compress&cs=tinysrgb&w=800",
"quanity": 1
}
]
}
]
};
mainTask();
async function mainTask() {
await conectCom(upload);
await initSelect();
let pack_by;
$('select').on('change', e => {
pack_by = $('select').val();
});
async function upload(s) {
if (pack_by === '0' || !pack_by) { return Toast('请先选择打包人'); }
let body = [
{
"pack_machine": "p1",
"ticketsNum": "92626903590992110041655738",
"pack_by": 67
}
];
let r = await fetchPost(erp_base_url + '/api/shipment_parcels/pack_data', body);
console.log(r)
res.data[0]=r[0]
res.data[0].detail=[];
insert(res)
}
}
async function initSelect() {
let arr = await fetch(erp_base_url + '/api/filters/warehouse_users').then(r => r.json());
arr.unshift({ id: 0, username: "请选择" })
let optionHtml = arr.map(v => `<option value="${v.id}">${v.username}</option>`).join('');
$('select').empty().append(optionHtml);
}
async function conectCom(cb) {
let port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
port.readable.pipeTo(new WritableStream({
write(chunk) {
let s = new TextDecoder('utf-8').decode(chunk);
cb(s);
}
}));
}
function insert(res) {
['today', 'month', 'perDay'].map(s => $('#' + s).text(res[s]));
$('#package_img_container').empty().append(res.data[0].detail.map(getImgItem).join(''));
$('#records').prepend(getRecordItem(res.data[0]));
}
function getImgItem(o) {
return `<div class="package_img_card">
<img class="package_img" src="${o.img}">
<div style="display:flex;">
<div style="flex-grow: 1;">
<div class="product_name">${o.product}</div>
<div class="product_name product_sku">${o.sku}</div>
</div>
<div style="padding:5px;">
<strong class="sku_pcs">${o.quanity}</strong>件
</div>
</div>
</div>`;
}
function getRecordItem(o) {
return `<div>
<span class="gray">07/19 12:34:21</span><span style="color: darkorange;margin:0 10px;">${o.message}</span>
${o.ticketsNum}
<span class="gray">${o.detail.map(v => [v.product, v.sku, '×' + v.quanity].join(' ')).join('；')}</span>
</div>`;
}
function fetchPost(url, body) {
return fetch(url, {
"headers": {
"content-type": "application/json"
},
"body": JSON.stringify(body),
"method": "POST"
}).then(r => r.json())
}
function sleep(t) {
return new Promise(r => setTimeout(r, t));
}
function Toast(msg, duration = 2000) {
var m = document.createElement('div');
m.innerHTML = msg;
m.style.cssText = "max-width:80%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
document.body.appendChild(m);
setTimeout(() => {
var d = 0.5;
m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
m.style.opacity = '0';
setTimeout(() => { document.body.removeChild(m) }, d * 1000);
}, duration);
}
<div class="vertical_container">
<div style="display:flex;">
<div style="flex:1;">
<span class="gray">打包人:</span>
<select style="font-size:16px;width:120px;">
<option value="aaa">张三</option>
<option value="aaa">李四</option>
</select>
</div>
<div style="flex:1;" class="gray">设备名称:</div>
</div>
<div id="statistics" class="gray" style="display:flex;width:460px;">
<div style="flex:1;">
今日：<span style="color:darkorange" id="today">23324</span>
</div>
<div style="flex:1;">
本月：<span id="month">23324</span>
</div>
<div style="flex:1;">
日均：<span id="perDay">23324</span>
</div>
</div>
<div style="display:flex;flex-wrap:wrap" id="package_img_container">
</div>
<div style="border:1px solid gray;flex-grow:1;padding:5px;overflow:scroll;" id="records">
</div>
<p></p>
</div>
.gray{color:gray;}
.vertical_container{display:flex;flex-direction:column;height:100vh;max-width:1000px;margin:10px auto;}
.vertical_container>div{margin-top: 10px;}
.package_img_card{width: 240px;height: 282px;background: lightgrey;margin:5px;text-align: center;font-size: 14px;}
.package_img{width: 240px;height: 240px;}
.product_sku{color:darkorange!important;font-weight: bolder}
.product_name{color:black;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 180px;}
.sku_pcs{color:red;font-weight:boldere;font-size:26px;}
#statistics>div>span{color:black;font-weight: bolder;font-size:24px;}