820 lines
20 KiB
JavaScript
820 lines
20 KiB
JavaScript
// ===== 仓库/端口 IP 映射 =====
|
||
var warehouseIpMap = {
|
||
"02": "http://172.19.40.46:10012", // 二联
|
||
"01": "http://172.19.50.70:10012" // 三联
|
||
};
|
||
|
||
// ===== 从 localStorage 读取配置，默认二联/入库端 =====
|
||
var warehouseId = localStorage.getItem("warehouseId") || "02";
|
||
var type = localStorage.getItem("type") || "1";
|
||
var ip = warehouseIpMap[warehouseId];
|
||
function getData() {
|
||
$.ajax({
|
||
url: ip+"/api/stock/all",
|
||
type: "GET",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
shuzi(res.data)
|
||
liebiao(res.data)
|
||
}
|
||
})
|
||
}
|
||
|
||
function getData2() {
|
||
$.ajax({
|
||
url: ip+"/api/stock/cargoSpace/pie",
|
||
type: "GET",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
pieCharts(res.data.pie)
|
||
$("#total").html(res.data.totalCargoSpace)
|
||
}
|
||
})
|
||
|
||
$.ajax({
|
||
url: ip+"/api/stock/inout/stat",
|
||
type: "GET",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
tiaoxintu(res.data.drrk,res.data.drck)
|
||
zhuzhuangzhexiantu(res.data.statistic)
|
||
zhexiantu('bzrk', 'rgb(5, 243, 255)', 'rgb(3, 148, 153)', 'rgb(1, 77, 80)', res.data.bzrk)
|
||
zhexiantu('bzck','rgb(25, 255, 236)', 'rgb(16, 171, 158)', 'rgb(6, 62, 57)' , res.data.bzck)
|
||
}
|
||
})
|
||
}
|
||
function shuzi(res){
|
||
let totalQuantity=res.totalQuantity+""
|
||
let dom=''
|
||
for (let i = 0; i < totalQuantity.length; i++) {
|
||
dom+='<div class="shuzi1">'+totalQuantity[i]+'</div>'
|
||
}
|
||
dom+='<div class="shuzi1" style="color: #ffb742;font-size: 32px;line-height: 60px;">件</div>'
|
||
$("#shuzi").html(dom)
|
||
}
|
||
// 饼图
|
||
function pieCharts(data) {
|
||
var chartDom = document.getElementById('middleDiv');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
color: myColor1,
|
||
legend: {
|
||
bottom: 60,
|
||
itemWidth: 30,
|
||
itemHeight: 20,
|
||
// itemGap:100,
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#fff',
|
||
padding: [0, 10]
|
||
}
|
||
},
|
||
|
||
series: [{
|
||
name: 'Nightingale Chart',
|
||
type: 'pie',
|
||
radius: [160, 260],
|
||
center: ['50%', '43%'],
|
||
// roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 8
|
||
},
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 24,
|
||
color: "#fff",
|
||
},
|
||
formatter: '{b}{c}\n{d}%'
|
||
},
|
||
data: data
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
// 条形图
|
||
function tiaoxintu(a,b) {
|
||
var chartDom1 = document.getElementById('drcrk');
|
||
var myChart = echarts.init(chartDom1);
|
||
var option;
|
||
|
||
const builderJson = {
|
||
all: Number(a)+Number(b),
|
||
charts: {
|
||
出库量: b,
|
||
入库量: a,
|
||
}
|
||
};
|
||
var myColor = ["#19ffec", "#19ffec"]
|
||
const canvas = document.createElement('canvas');
|
||
option = {
|
||
backgroundColor: {
|
||
type: 'pattern',
|
||
image: canvas,
|
||
repeat: 'repeat'
|
||
},
|
||
tooltip: {},
|
||
title: [{
|
||
subtext: '总计 ' + builderJson.all + ' 件',
|
||
left: 'center',
|
||
subtextStyle: {
|
||
color: '#ffb742',
|
||
fontSize: 20
|
||
}
|
||
}],
|
||
grid: [{
|
||
top: 40,
|
||
left: 80,
|
||
bottom: 110
|
||
}],
|
||
xAxis: [{
|
||
type: 'value',
|
||
max: builderJson.all,
|
||
axisLabel: {
|
||
color: '#00fff9',
|
||
fontSize: 20
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'category',
|
||
data: Object.keys(builderJson.charts),
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: '#00fff9',
|
||
fontSize: 20,
|
||
rotate: 30
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
type: 'bar',
|
||
stack: 'chart',
|
||
z: 3,
|
||
label: {
|
||
color: '#fff',
|
||
position: 'right',
|
||
show: true,
|
||
fontSize: 20
|
||
},
|
||
itemStyle: {
|
||
barBorderRadius: 5,
|
||
// 修改每个柱子的颜色
|
||
color: function(params) {
|
||
var num = myColor.length;
|
||
return myColor[params.dataIndex % num]
|
||
},
|
||
},
|
||
// 修改柱子的距离
|
||
barCategoryGap: 0,
|
||
// 柱子的宽度
|
||
barWidth: 10,
|
||
data: Object.keys(builderJson.charts).map(function(key) {
|
||
return builderJson.charts[key];
|
||
})
|
||
},
|
||
{
|
||
type: 'bar',
|
||
stack: 'chart',
|
||
silent: true,
|
||
itemStyle: {
|
||
barBorderRadius: 2,
|
||
color: '#0b4a54'
|
||
},
|
||
data: Object.keys(builderJson.charts).map(function(key) {
|
||
return builderJson.all - builderJson.charts[key];
|
||
})
|
||
}
|
||
]
|
||
};
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
// 柱状图折现图
|
||
function zhuzhuangzhexiantu(data) {
|
||
var chartDom = document.getElementById('dycrk');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
var labelOption
|
||
labelOption = {
|
||
show: true,
|
||
position: "top",
|
||
verticalAlign: 'middle',
|
||
fontSize: 15,
|
||
color: "#ffffff"
|
||
};
|
||
option = {
|
||
legend: {
|
||
left: "65%",
|
||
textStyle: {
|
||
fontSize: 15,
|
||
color: "#19ffec"
|
||
},
|
||
},
|
||
tooltip: {},
|
||
dataset: {
|
||
dimensions: ['mouth', '入库', '出库'],
|
||
source: data
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
show: false, //显示边框
|
||
borderColor: "#012f4a", //边框颜色
|
||
containLabel: true //包含刻度文字在内
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
color: '#00f2f1', //文本颜色
|
||
fontSize: 15
|
||
}
|
||
},
|
||
yAxis: {
|
||
axisLabel: {
|
||
color: '#00f2f1', //文本颜色
|
||
fontSize: 15
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(25,255,255,.3)"
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
type: "bar",
|
||
showBackground: false,
|
||
barWidth: '50%',
|
||
label: labelOption,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#19ffec'
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#07554e'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#04252b'
|
||
}
|
||
])
|
||
}
|
||
}, {
|
||
type: "line",
|
||
showBackground: true,
|
||
label: labelOption,
|
||
itemStyle: {
|
||
color: '#ffb742'
|
||
}
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
// 折线图
|
||
function zhexiantu(a, b, c, d, e) {
|
||
var chartDom = document.getElementById(a);
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
var labelOption = {
|
||
show: true,
|
||
position: "top",
|
||
verticalAlign: 'middle',
|
||
fontSize: 15,
|
||
color: "#ffb742"
|
||
};
|
||
option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false, //坐标轴两边不留白
|
||
axisLabel: {
|
||
color: '#00f2f1', //文本颜色
|
||
fontSize: 15
|
||
},
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#00f2f1', //文本颜色
|
||
fontSize: 15
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
// 设置背景横线
|
||
color: "#097176",
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
top: '10%',
|
||
// right: '4%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
series: [{
|
||
data: e,
|
||
type: 'line',
|
||
smooth: 0.2,
|
||
itemStyle: {
|
||
color: b
|
||
},
|
||
label: labelOption,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: c
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: d
|
||
}
|
||
])
|
||
}
|
||
}]
|
||
};
|
||
option && myChart.setOption(option);
|
||
|
||
}
|
||
|
||
var biaoshi = 0
|
||
|
||
function info() {
|
||
var tr = $("#aa ul>li:eq(1)").clone();
|
||
var height = $("#kcxx").innerHeight();
|
||
var allheight = $("#box").innerHeight()
|
||
if (height > allheight) {
|
||
$("#aa ul>li:eq(1)").animate({
|
||
marginTop: "-1.8rem"
|
||
}, 500, function() {
|
||
$("#aa ul>li:eq(1)").remove();
|
||
})
|
||
biaoshi = 1
|
||
} else {
|
||
biaoshi = 2
|
||
}
|
||
}
|
||
|
||
function liebiao(res) {
|
||
let data = res.stockMsg
|
||
let dom = "";
|
||
if (biaoshi == 2) {
|
||
$(".tt").remove()
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (i % 2 == 0) {
|
||
dom += "<li class='tt' style='background: #046566'><p>" + data[i].productId +
|
||
"</p><p>" + data[i].productName +
|
||
"</p><p>" + data[i].lotNo +
|
||
"</p><p>" + data[i].quantity + "</p></li>"
|
||
} else {
|
||
dom += "<li class='tt' style='background: #05383c'><p>" + data[i].productId +
|
||
"</p><p>" + data[i].productName +
|
||
"</p><p>" + data[i].lotNo +
|
||
"</p><p>" + data[i].quantity + "</p></li>"
|
||
}
|
||
|
||
}
|
||
$("#kcxx").append(dom)
|
||
}
|
||
}
|
||
|
||
// 时间
|
||
var t = null;
|
||
$(document).ready(function() {
|
||
time()
|
||
|
||
// 初始化巷道标题
|
||
updateLaneHeaders();
|
||
|
||
getAlarmData();
|
||
window.setInterval(getAlarmData, 1500);
|
||
|
||
getLaneData();
|
||
window.setInterval(getLaneData, 1500);
|
||
|
||
// window.setInterval(scrollAlarmList, 1000);
|
||
})
|
||
|
||
function getAlarmData() {
|
||
$.ajax({
|
||
url: ip + "/api/screen/selectFaultRecord?warehouseId="+warehouseId+"&type="+type,
|
||
type: "GET",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
if (res.code === 200) {
|
||
renderAlarmData(res.data);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.log("Error fetching alarm data", err);
|
||
}
|
||
})
|
||
}
|
||
|
||
function renderAlarmData(data) {
|
||
var dom = "";
|
||
// Ensure we have data
|
||
if (!data || data.length === 0) {
|
||
$(".alarm-items").html("");
|
||
return;
|
||
}
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var bg = i % 2 == 0 ? "#046566" : "#05383c";
|
||
|
||
// Map fields
|
||
// Time: Extract HH:mm:ss from startTime "yyyy-MM-dd HH:mm:ss"
|
||
var timeStr = item.startTime ? item.startTime.split(' ')[1] : "";
|
||
|
||
// Type: Default to "故障"
|
||
var type = "故障";
|
||
var color = "#ff4d4d"; // Red for fault
|
||
|
||
// Detail: deviceName + fault description
|
||
var faultDesc = item.fault;
|
||
/*if (item.deviceType === "ddj") {
|
||
faultDesc = faultDesc;
|
||
} else if (item.deviceType === "ssj") {
|
||
faultDesc = faultDesc;
|
||
}*/
|
||
|
||
var detail = (item.deviceName || "") + " " + (faultDesc || "");
|
||
|
||
// Task No
|
||
var taskNo = item.taskNo || "";
|
||
|
||
dom += "<li class='alarm-item' style='background: " + bg + "'>" +
|
||
"<p>" + taskNo + "</p>" +
|
||
"<p>" + timeStr + "</p>" +
|
||
"<p style='color:" + color + "'>" + type + "</p>" +
|
||
"<p>" + detail + "</p>" +
|
||
"</li>";
|
||
}
|
||
$(".alarm-items").html(dom);
|
||
}
|
||
|
||
function getLaneData() {
|
||
$.ajax({
|
||
url: ip + "/api/screen/selectJobListByWarehouseIdAndType?warehouseId="+warehouseId+"&type="+type,
|
||
type: "GET",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
if (res.code === 200) {
|
||
renderLaneData(res.data);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.log("Error fetching lane data", err);
|
||
}
|
||
})
|
||
}
|
||
|
||
function renderLaneData(data) {
|
||
// 根据仓库ID动态设置巷道编号
|
||
let laneIds;
|
||
if (warehouseId === "02") {
|
||
laneIds = ['4', '5', '6']; //二联：4、5、6巷道
|
||
} else {
|
||
laneIds = ['1', '2', '3']; //三联：1、2、3巷道
|
||
}
|
||
|
||
console.log(laneIds);
|
||
// 前端dom固定 lane1/lane2/lane3，依次渲染三个巷道
|
||
const domIdList = ["lane1", "lane2", "lane3"];
|
||
|
||
// 同步更新页面顶部巷道标题
|
||
updateLaneHeaders();
|
||
|
||
laneIds.forEach(function(key, idx) {
|
||
var list = data[key] || [];
|
||
var content = "";
|
||
content += "<ul class='lane-list'>";
|
||
|
||
// Header：把表头改成当前真实巷道号
|
||
content += "<li class='lane-item header'>" +
|
||
"<p>任务号</p>" +
|
||
"<p>托盘码</p>" +
|
||
"<p>类型</p>" +
|
||
"<p>状态</p>" +
|
||
"</li>";
|
||
|
||
for (var i = 0; i < list.length; i++) {
|
||
var item = list[i];
|
||
var taskId = item.taskNo;
|
||
var palletId = item.trayCode || "";
|
||
var typeName = getTaskTypeName(item.inOrOut);
|
||
var statusName = getTaskStatusName(item.status);
|
||
|
||
var statusColor = (statusName === "执行中" || statusName === "完成") ? "#00ffc0" : "#ffb742";
|
||
var typeColor = (typeName.indexOf("入") > -1) ? "#0dede4" : "#ff7e00";
|
||
var bg = i % 2 == 0 ? "rgba(4, 101, 102, 0.5)" : "rgba(5, 56, 60, 0.5)";
|
||
|
||
content += "<li class='lane-item' style='background: " + bg + "'>" +
|
||
"<p>" + taskId + "</p>" +
|
||
"<p>" + palletId + "</p>" +
|
||
"<p style='color:" + typeColor + "'>" + typeName + "</p>" +
|
||
"<p style='color:" + statusColor + "'>" + statusName + "</p>" +
|
||
"</li>";
|
||
}
|
||
content += "</ul>";
|
||
// 依次填充 lane1/lane2/lane3
|
||
$("#" + domIdList[idx]).html(content);
|
||
});
|
||
}
|
||
|
||
function getTaskTypeName(code) {
|
||
// 空值/假值直接返回空字符串（保留原逻辑）
|
||
if (!code) return "";
|
||
// 将编码转为数字（兼容字符串/数字类型入参），判断大小后返回对应名称
|
||
const numCode = Number(code);
|
||
return numCode >= 20 ? "出库" : "入库";
|
||
}
|
||
|
||
function getTaskStatusName(code) {
|
||
if (!code) return "";
|
||
if (code === "4") return "完成";
|
||
if (code === "0") return "创建";
|
||
if (code === "1" || code == "2" || code == "3") return "执行中";
|
||
return code;
|
||
}
|
||
|
||
function getDdjFaultDescription(value) {
|
||
if (value === "0") return "待机";
|
||
if (value === "1") return "工作";
|
||
if (value === "1031") return "急停";
|
||
if (value === "1032") return "货叉不在中位";
|
||
if (value === '1033') return "行走变频报警";
|
||
if (value === "1034") return "升降变频报警";
|
||
if (value === "1035") return "货叉变频报警";
|
||
if (value === "1036") return "货叉变频报警";
|
||
if (value === "1037") return "运行限位故障";
|
||
if (value === "1038") return "升降限位故障";
|
||
if (value === "1039") return "运行不能纠偏";
|
||
if (value === "1040") return "升降不能纠偏";
|
||
if (value === "1041") return "水平测距出错";
|
||
if (value === "1042") return "垂直BPS出错";
|
||
if (value === "1043") return "超速保护";
|
||
if (value === "1044") return "前边超宽";
|
||
if (value === "1045") return "后边超宽";
|
||
if (value === "1046") return "左边歪斜";
|
||
if (value === "1047") return "右边歪斜";
|
||
if (value === "1048") return "超高1";
|
||
if (value === "1049") return "超高2";
|
||
if (value === "1050") return "放货完毕货叉有货";
|
||
if (value === "1051") return "取货时货叉有货";
|
||
if (value === "1052") return "放货目标有货";
|
||
if (value === "1053") return "取货完毕无货";
|
||
if (value === "1054") return "放货时货叉无货";
|
||
if (value === "1055") return "货叉动作超时";
|
||
if (value === "1056") return "货叉不能纠偏";
|
||
if (value === "1057") return "微升降超时";
|
||
if (value === "1058") return "松绳过载";
|
||
if (value === "1059") return "设定超限";
|
||
if (value === "1060") return "取双伸时单伸有货";
|
||
if (value === "1061") return "放双伸时单伸有货";
|
||
if (value === "1062") return "入库输送机任务不符";
|
||
if (value === "1063") return "安全门打开";
|
||
if (value === "9999") return "设备未联机";
|
||
return value;
|
||
}
|
||
|
||
function getSsjFaultDescription(value) {
|
||
if (value == 101) return "前超长";
|
||
if (value == 102) return "后超长";
|
||
if (value == 103) return "左超宽";
|
||
if (value == 104) return "右超宽";
|
||
if (value == 105) return "超高";
|
||
if (value == 106) return "称重异常";
|
||
return value;
|
||
}
|
||
|
||
function time() {
|
||
clearTimeout(t);
|
||
dt = new Date();
|
||
var y = dt.getFullYear();
|
||
var mt = dt.getMonth() + 1;
|
||
var day = dt.getDate();
|
||
var h = dt.getHours();
|
||
var m = dt.getMinutes();
|
||
var s = dt.getSeconds();
|
||
var a = new Date().getDay();
|
||
var b = "";
|
||
switch (a) {
|
||
case 0:
|
||
b = "日";
|
||
break;
|
||
case 1:
|
||
b = "一";
|
||
break;
|
||
case 2:
|
||
b = "二";
|
||
break;
|
||
case 3:
|
||
b = "三";
|
||
break;
|
||
case 4:
|
||
b = "四";
|
||
break;
|
||
case 5:
|
||
b = "五";
|
||
break;
|
||
default:
|
||
b = "六";
|
||
}
|
||
document.querySelector(".riqi").innerHTML = "星期" + b + "<br>" + y + "年" + mt + "月" + day + "日";
|
||
document.querySelector(".shijian").innerHTML = jialing(h) + ":" + jialing(m);
|
||
t = setTimeout(time, 1000);
|
||
|
||
}
|
||
|
||
function jialing(m) {
|
||
if (m < 10) {
|
||
m = "0" + m
|
||
return m;
|
||
} else {
|
||
return m;
|
||
}
|
||
}
|
||
|
||
function mockAlarmData() {
|
||
var alarms = [
|
||
{ time: "10:00:01", type: "故障", detail: "1号堆垛机通信中断", status: "未处理" },
|
||
{ time: "10:05:23", type: "警告", detail: "2号入库口货物堆积", status: "处理中" },
|
||
{ time: "10:15:11", type: "故障", detail: "3号出库口光电异常", status: "未处理" },
|
||
{ time: "10:20:45", type: "提示", detail: "系统自动备份完成", status: "已完成" },
|
||
{ time: "10:30:00", type: "警告", detail: "库位占用率过高", status: "处理中" },
|
||
{ time: "10:35:12", type: "故障", detail: "1号巷道急停按下", status: "未处理" },
|
||
{ time: "10:40:00", type: "提示", detail: "入库任务下发成功", status: "已完成" },
|
||
{ time: "10:45:30", type: "警告", detail: "网络延迟较高", status: "处理中" }
|
||
];
|
||
|
||
var dom = "";
|
||
for (var i = 0; i < alarms.length; i++) {
|
||
var bg = i % 2 == 0 ? "#046566" : "#05383c";
|
||
var color = alarms[i].type === "故障" ? "#ff4d4d" : (alarms[i].type === "警告" ? "#ffb742" : "#fff");
|
||
|
||
dom += "<li class='alarm-item' style='background: " + bg + "'>" +
|
||
"<p>" + alarms[i].time + "</p>" +
|
||
"<p style='color:" + color + "'>" + alarms[i].type + "</p>" +
|
||
"<p>" + alarms[i].detail + "</p>" +
|
||
"<p>" + alarms[i].status + "</p>" +
|
||
"</li>";
|
||
}
|
||
$(".alarm-items").html(dom);
|
||
}
|
||
|
||
function scrollAlarmList() {
|
||
var list = $(".alarm-items");
|
||
var firstItem = list.find("li:first");
|
||
if (firstItem.length === 0) return;
|
||
|
||
var height = firstItem.outerHeight(true);
|
||
// Default to some height if 0 (e.g. if hidden)
|
||
if (height === 0) height = 44;
|
||
|
||
if (list.children().length >= 1) {
|
||
firstItem.animate({
|
||
marginTop: -height + "px"
|
||
}, 600, function() {
|
||
firstItem.css("marginTop", 0).appendTo(list);
|
||
});
|
||
}
|
||
}
|
||
|
||
function mockLaneData() {
|
||
// Generate mock data for 3 lanes (merged inbound/outbound)
|
||
var laneIds = ['lane1', 'lane2', 'lane3'];
|
||
|
||
laneIds.forEach(function(id) {
|
||
var content = "";
|
||
// Create a list structure
|
||
content += "<ul class='lane-list'>";
|
||
|
||
// Header
|
||
content += "<li class='lane-item header'>" +
|
||
"<p>任务号</p>" +
|
||
"<p>托盘码</p>" +
|
||
"<p>类型</p>" +
|
||
"<p>状态</p>" +
|
||
"</li>";
|
||
|
||
// Randomly generate 4-8 rows of data
|
||
var rowCount = Math.floor(Math.random() * 5) + 4;
|
||
for (var i = 0; i < rowCount; i++) {
|
||
var taskId = "T" + Math.floor(Math.random() * 10000);
|
||
var palletId = "P" + Math.floor(Math.random() * 1000);
|
||
var type = Math.random() > 0.5 ? "入库" : "出库";
|
||
var status = Math.random() > 0.5 ? "执行中" : "等待中";
|
||
var statusColor = status === "执行中" ? "#00ffc0" : "#ffb742";
|
||
var typeColor = type === "入库" ? "#0dede4" : "#ff7e00";
|
||
var bg = i % 2 == 0 ? "rgba(4, 101, 102, 0.5)" : "rgba(5, 56, 60, 0.5)";
|
||
|
||
content += "<li class='lane-item' style='background: " + bg + "'>" +
|
||
"<p>" + taskId + "</p>" +
|
||
"<p>" + palletId + "</p>" +
|
||
"<p style='color:" + typeColor + "'>" + type + "</p>" +
|
||
"<p style='color:" + statusColor + "'>" + status + "</p>" +
|
||
"</li>";
|
||
}
|
||
|
||
content += "</ul>";
|
||
$("#" + id).html(content);
|
||
});
|
||
}
|
||
|
||
// ===== 服务器设置弹窗 =====
|
||
|
||
// 临时选中状态（未保存前不生效）
|
||
var _pendingWarehouse = warehouseId;
|
||
var _pendingType = type;
|
||
|
||
function openSettingModal() {
|
||
_pendingWarehouse = warehouseId;
|
||
_pendingType = type;
|
||
|
||
// 初始化选中状态
|
||
$("#warehouseOptions .setting-option").each(function() {
|
||
$(this).toggleClass("active", $(this).data("value") === _pendingWarehouse);
|
||
});
|
||
$("#typeOptions .setting-option").each(function() {
|
||
$(this).toggleClass("active", $(this).data("value") + "" === _pendingType + "");
|
||
});
|
||
|
||
updatePreview();
|
||
$("#settingModalMask").fadeIn(200);
|
||
$("#settingModal").fadeIn(200);
|
||
}
|
||
|
||
function closeSettingModal() {
|
||
$("#settingModalMask").fadeOut(200);
|
||
$("#settingModal").fadeOut(200);
|
||
}
|
||
|
||
function selectOption(group, el) {
|
||
var val = $(el).data("value") + "";
|
||
if (group === "warehouse") {
|
||
_pendingWarehouse = val;
|
||
$("#warehouseOptions .setting-option").removeClass("active");
|
||
} else {
|
||
_pendingType = val;
|
||
$("#typeOptions .setting-option").removeClass("active");
|
||
}
|
||
$(el).addClass("active");
|
||
updatePreview();
|
||
}
|
||
|
||
function updatePreview() {
|
||
var whName = _pendingWarehouse === "02" ? "二联" : "三联";
|
||
var typeName = _pendingType === "1" ? "入库端" : "出库端";
|
||
var previewIp = warehouseIpMap[_pendingWarehouse];
|
||
$("#settingPreview").html(
|
||
"仓库：<b>" + whName + "</b> 端口：<b>" + typeName + "</b><br>" +
|
||
"IP：" + previewIp
|
||
);
|
||
}
|
||
|
||
function updateLaneHeaders() {
|
||
var laneIds = (warehouseId === "02") ? ['4', '5', '6'] : ['1', '2', '3'];
|
||
var laneHeaders = document.querySelectorAll(".lane-header");
|
||
laneIds.forEach(function(key, idx) {
|
||
if (laneHeaders[idx]) {
|
||
laneHeaders[idx].textContent = key + "巷道";
|
||
}
|
||
});
|
||
}
|
||
|
||
function saveSettings() {
|
||
// 更新全局变量
|
||
warehouseId = _pendingWarehouse;
|
||
type = _pendingType;
|
||
ip = warehouseIpMap[warehouseId];
|
||
|
||
// 持久化到 localStorage
|
||
localStorage.setItem("warehouseId", warehouseId);
|
||
localStorage.setItem("type", type);
|
||
|
||
// 立即更新巷道标题
|
||
updateLaneHeaders();
|
||
|
||
closeSettingModal();
|
||
|
||
// 立即刷新数据
|
||
getAlarmData();
|
||
getLaneData();
|
||
}
|