Vue.component("devp-card", {
template: `
{{ item.stationId }}站
自动
手动
{{ item.stationId }}
{{ item.taskNo }}
{{ item.targetStaNo }}
{{ item.autoing ? '自动' : '手动' }}
{{ item.loading ? '有' : '无' }}
{{ item.inEnable ? 'Y' : 'N' }}
{{ item.outEnable ? 'Y' : 'N' }}
{{ item.emptyMk ? 'Y' : 'N' }}
{{ item.fullPlt ? 'Y' : 'N' }}
{{ item.runBlock ? 'Y' : 'N' }}
{{ item.enableIn ? 'Y' : 'N' }}
{{ item.palletHeight }}
![]()
{{ item.barcode }}
{{ item.barcode }}
-
{{ item.weight }}
{{ item.error }}
{{ item.errorMsg }}
{{ item.extend }}
`,
props: {
param: {
type: Object,
default: () => ({})
},
autoRefresh: {
type: Boolean,
default: true
},
readOnly: {
type: Boolean,
default: false
}
},
data() {
return {
stationList: [],
fullStationList: [],
activeNames: "",
searchStationId: "",
showControl: false,
controlParam: {
stationId: "",
taskNo: "",
targetStationId: "",
},
barcodePreviewCache: {},
pageSize: 25,
currentPage: 1,
timer: null
};
},
created() {
if (this.autoRefresh) {
this.timer = setInterval(() => {
this.getDevpStateInfo();
}, 1000);
}
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
computed: {
displayStationList() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.stationList.slice(start, end);
}
},
watch: {
param: {
handler(newVal, oldVal) {
if (newVal && newVal.stationId && newVal.stationId != 0) {
this.activeNames = newVal.stationId;
this.searchStationId = newVal.stationId;
}
},
deep: true, // 深度监听嵌套属性
immediate: true, // 立即触发一次（可选）
},
},
methods: {
handlePageChange(page) {
this.currentPage = page;
},
handleSizeChange(size) {
this.pageSize = size;
this.currentPage = 1;
},
getBarcodePreview(barcode) {
const value = String(barcode || "").trim();
if (!value) {
return "";
}
if (this.barcodePreviewCache[value]) {
return this.barcodePreviewCache[value];
}
const encodeResult = this.encodeCode128(value);
if (!encodeResult) {
return "";
}
const svg = this.buildCode128Svg(encodeResult, value);
const dataUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
this.$set(this.barcodePreviewCache, value, dataUrl);
return dataUrl;
},
encodeCode128(value) {
if (!value) {
return null;
}
const isNumeric = /^\d+$/.test(value);
if (isNumeric && value.length % 2 === 0) {
return this.encodeCode128C(value);
}
return this.encodeCode128B(value);
},
encodeCode128B(value) {
const codes = [104];
for (let i = 0; i < value.length; i++) {
const code = value.charCodeAt(i) - 32;
if (code < 0 || code > 94) {
return null;
}
codes.push(code);
}
return this.buildCode128Pattern(codes);
},
encodeCode128C(value) {
if (value.length % 2 !== 0) {
return null;
}
const codes = [105];
for (let i = 0; i < value.length; i += 2) {
codes.push(parseInt(value.substring(i, i + 2), 10));
}
return this.buildCode128Pattern(codes);
},
buildCode128Pattern(codes) {
const patterns = this.getCode128Patterns();
let checksum = codes[0];
for (let i = 1; i < codes.length; i++) {
checksum += codes[i] * i;
}
const checkCode = checksum % 103;
const fullCodes = codes.concat([checkCode, 106]);
let bars = "";
for (let i = 0; i < fullCodes.length; i++) {
const code = fullCodes[i];
if (patterns[code] == null) {
return null;
}
bars += patterns[code];
}
bars += "11";
return bars;
},
buildCode128Svg(bars, text) {
const quietModules = 20;
const modules = quietModules * 2 + bars.split("").reduce((sum, n) => sum + parseInt(n, 10), 0);
const moduleWidth = modules > 300 ? 1 : 2;
const width = modules * moduleWidth;
const barTop = 10;
const barHeight = 110;
let x = quietModules * moduleWidth;
let black = true;
let rects = "";
for (let i = 0; i < bars.length; i++) {
const w = parseInt(bars[i], 10) * moduleWidth;
if (black) {
rects += '';
}
x += w;
black = !black;
}
return (
'"
);
},
getCode128Patterns() {
return [
"212222", "222122", "222221", "121223", "121322", "131222", "122213", "122312", "132212", "221213",
"221312", "231212", "112232", "122132", "122231", "113222", "123122", "123221", "223211", "221132",
"221231", "213212", "223112", "312131", "311222", "321122", "321221", "312212", "322112", "322211",
"212123", "212321", "232121", "111323", "131123", "131321", "112313", "132113", "132311", "211313",
"231113", "231311", "112133", "112331", "132131", "113123", "113321", "133121", "313121", "211331",
"231131", "213113", "213311", "213131", "311123", "311321", "331121", "312113", "312311", "332111",
"314111", "221411", "431111", "111224", "111422", "121124", "121421", "141122", "141221", "112214",
"112412", "122114", "122411", "142112", "142211", "241211", "221114", "413111", "241112", "134111",
"111242", "121142", "121241", "114212", "124112", "124211", "411212", "421112", "421211", "212141",
"214121", "412121", "111143", "111341", "131141", "114113", "114311", "411113", "411311", "113141",
"114131", "311141", "411131", "211412", "211214", "211232", "2331112"
];
},
escapeXml(text) {
return String(text)
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
},
getDevpStateInfo() {
if (this.readOnly) {
// Frontend filtering for readOnly mode
if (this.searchStationId == "") {
this.stationList = this.fullStationList;
} else {
this.stationList = this.fullStationList.filter(item => item.stationId == this.searchStationId);
this.currentPage = 1;
}
} else if (this.$root.sendWs) {
this.$root.sendWs(JSON.stringify({
"url": "/console/latest/data/station",
"data": {}
}));
}
},
setStationList(res) {
let that = this;
if (res.code == 200) {
let list = res.data;
that.fullStationList = list;
if (that.searchStationId == "") {
that.stationList = list;
} else {
let tmp = [];
list.forEach((item) => {
if (item.stationId == that.searchStationId) {
tmp.push(item);
}
});
that.stationList = tmp;
that.currentPage = 1;
}
}
},
openControl() {
this.showControl = !this.showControl;
},
controlCommand() {
let that = this;
//下发命令
$.ajax({
url: baseUrl + "/station/command/move",
headers: {
token: localStorage.getItem("token"),
},
contentType: "application/json",
method: "post",
data: JSON.stringify(that.controlParam),
success: (res) => {
if (res.code == 200) {
that.$message({
message: res.msg,
type: "success",
});
} else {
that.$message({
message: res.msg,
type: "warning",
});
}
},
});
},
resetCommand() {
let that = this;
//下发命令
$.ajax({
url: baseUrl + "/station/command/reset",
headers: {
token: localStorage.getItem("token"),
},
contentType: "application/json",
method: "post",
data: JSON.stringify(that.controlParam),
success: (res) => {
if (res.code == 200) {
that.$message({
message: res.msg,
type: "success",
});
} else {
that.$message({
message: res.msg,
type: "warning",
});
}
},
});
},
},
});