大屏项目初始化
This commit is contained in:
liuhanqing
45
js/echarts.min.js
vendored
Normal file
45
js/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
25224
js/echarts.min.old.js
Normal file
25224
js/echarts.min.old.js
Normal file
File diff suppressed because it is too large
Load Diff
723
js/index.js
Normal file
723
js/index.js
Normal file
@@ -0,0 +1,723 @@
|
||||
var ip="http://172.19.50.70:10012"
|
||||
//仓库 01 三联 02 二联
|
||||
var warehouseId="01"
|
||||
//入出库端 1 入库 2 出库
|
||||
var type="1"
|
||||
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()
|
||||
// getData()
|
||||
// window.setInterval("getData()", 10000);
|
||||
// getData2()
|
||||
// window.setInterval("getData2()", 3000);
|
||||
// info()
|
||||
// window.setInterval("info()", 3000);
|
||||
|
||||
// mockAlarmData();
|
||||
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) {
|
||||
var laneIds = ['1', '2', '3']; // Keys in the data object
|
||||
|
||||
laneIds.forEach(function(key) {
|
||||
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>";
|
||||
$("#lane" + key).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.height();
|
||||
// Default to some height if 0 (e.g. if hidden)
|
||||
if (height === 0) height = 30;
|
||||
|
||||
if (list.children().length > 3) {
|
||||
firstItem.animate({
|
||||
marginTop: -height + "px"
|
||||
}, 500, 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);
|
||||
});
|
||||
}
|
||||
4
js/jquery-3.1.1.min.js
vendored
Normal file
4
js/jquery-3.1.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user