<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<title>${constants.getSystemName()}</title>
|
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
|
<style>
|
/** 卡片轮播图样式 */
|
.admin-carousel .layui-carousel-ind {
|
position: absolute;
|
top: -41px;
|
text-align: right;
|
}
|
|
.admin-carousel .layui-carousel-ind ul {
|
background: 0 0;
|
}
|
|
.admin-carousel .layui-carousel-ind li {
|
background-color: #e2e2e2;
|
}
|
|
.admin-carousel .layui-carousel-ind li.layui-this {
|
background-color: #999;
|
}
|
|
/** 广告位轮播图 */
|
.admin-news .layui-carousel-ind {
|
height: 45px;
|
}
|
|
.admin-news a {
|
display: block;
|
line-height: 60px;
|
text-align: center;
|
}
|
|
</style>
|
</head>
|
|
<body>
|
|
<!-- 加载动画，移除位置在common.js中 -->
|
<div class="page-loading">
|
<div class="ball-loader">
|
<span></span><span></span><span></span><span></span>
|
</div>
|
</div>
|
|
<!-- 正文开始 -->
|
<div class="layui-fluid">
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">
|
计划数量<span class="layui-badge layui-bg-black pull-right">日</span>
|
</div>
|
<div class="layui-card-body">
|
<p class="lay-big-font" id="planNum"></p>
|
<p>月计划数量<span class="pull-right"><i class="layui-icon layui-icon-flag" id="planQtyWeek"></i></span></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">
|
实时产量<span class="layui-badge layui-bg-black pull-right">日</span>
|
</div>
|
<div class="layui-card-body">
|
<p class="lay-big-font" id="realityNum"></p>
|
<p>月实时产量<span class="pull-right"><i class="layui-icon layui-icon-diamond" id="actualQtyWeek"></i></span></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">
|
不良数量<span class="layui-badge layui-bg-black pull-right">日</span>
|
</div>
|
<div class="layui-card-body">
|
<p class="lay-big-font" id="repairQty"></p>
|
<p>月不良数量<span class="pull-right"><i class="layui-icon layui-icon-notice" id="repairQtyWeek"></i></span></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">
|
报废数量<span class="layui-badge layui-bg-black pull-right">日</span>
|
</div>
|
<div class="layui-card-body">
|
<p class="lay-big-font" id="scrapQty"></p>
|
<p>月报废数量<span class="pull-right"><i class="layui-icon layui-icon-notice" id="scrapQtyWeek"></i></span></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-lg15 layui-col-md15">
|
<div class="layui-card">
|
<div class="layui-card-header">设备报警</div>
|
<div class="layui-card-body">
|
<table class="layui-table" id="equipmentAlarmTable" lay-filter="equipmentAlarmTable"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-lg8 layui-col-md7">
|
<div class="layui-card">
|
<div class="layui-card-header">设备状态</div>
|
<div class="layui-card-body">
|
<table class="layui-table" id="equipmentStatusTable" lay-filter="equipmentStatusTable"></table>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-lg4 layui-col-md5">
|
<div class="layui-card">
|
<div class="layui-card-header">日生产计划</div>
|
<div class="layui-card-body">
|
<table class="layui-table layui-text">
|
<colgroup>
|
<col width="100">
|
<col>
|
</colgroup>
|
<tbody>
|
<tr>
|
<td>生产工单号</td>
|
<td id="workOrderNo"></td>
|
</tr>
|
<tr>
|
<td>产品编号</td>
|
<td id="materialCode"></td>
|
</tr>
|
<tr>
|
<td>产品名称</td>
|
<td id="materialName"></td>
|
</tr>
|
<tr>
|
<td>客户编号</td>
|
<td id="custom"></td>
|
</tr>
|
<tr>
|
<td>计划数量</td>
|
<td id="planQty"></td>
|
</tr>
|
<tr>
|
<td>完成数量</td>
|
<td id="actualQty"></td>
|
</tr>
|
<tr>
|
<td>实际上线数量</td>
|
<td id="actualOnlineQty"></td>
|
</tr>
|
<tr>
|
<td>创建时间</td>
|
<td id="createTime"></td>
|
</tr>
|
<tr>
|
<td>实际开始时间</td>
|
<td id="actualStartTime"></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- js部分 -->
|
@/* 加入contextPath属性和session超时的配置 */
|
<script type="text/javascript">
|
var Feng = {
|
ctxPath: "${ctxPath}",
|
version: '${constants.getReleaseVersion()}'
|
};
|
</script>
|
|
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
|
<script>
|
layui.use(['table', 'ax','layer', 'carousel'], function () {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var carousel = layui.carousel;
|
var $ax = layui.ax;
|
var table = layui.table;
|
var device = layui.device;
|
|
// 渲染轮播
|
carousel.render({
|
elem: '.layui-carousel',
|
width: '100%',
|
height: '60px',
|
arrow: 'none',
|
autoplay: true,
|
trigger: device.ios || device.android ? 'click' : 'hover',
|
anim: 'fade'
|
});
|
|
var order = new $ax(Feng.ctxPath + "/home/getOrder");
|
var orderAjx = order.start();
|
console.log(orderAjx);
|
//头部
|
$("#planNum").html(orderAjx.data.planQty);
|
console.log(orderAjx.data.actualQty);
|
if(orderAjx.data.actualQty === ""){
|
$("#realityNum").html(0)
|
}else {
|
$("#realityNum").html(orderAjx.data.actualQty);
|
}
|
$("#scrapQty").html(orderAjx.data.scrapQty);
|
$("#repairQty").html(orderAjx.data.repairQty);
|
|
$("#planQtyWeek").html(orderAjx.data.planQtyWeek);
|
$("#actualQtyWeek").html(orderAjx.data.actualQtyWeek);
|
$("#repairQtyWeek").html(orderAjx.data.repairQtyWeek);
|
$("#scrapQtyWeek").html(orderAjx.data.scrapQtyWeek);
|
|
|
|
//日生产计划
|
$("#workOrderNo").html(orderAjx.data.workOrderNo);
|
$("#materialCode").html(orderAjx.data.materialCode);
|
$("#materialName").html(orderAjx.data.materialName);
|
$("#custom").html(orderAjx.data.custom);
|
$("#planQty").html(orderAjx.data.planQty);
|
$("#actualQty").html(orderAjx.data.actualQty);
|
$("#actualOnlineQty").html(orderAjx.data.actualOnlineQty);
|
$("#createTime").html(orderAjx.data.createTime);
|
$("#actualStartTime").html(orderAjx.data.actualStartTime);
|
|
/**
|
* 设备状态管理
|
*/
|
var EquipmentStatus = {
|
tableId: "equipmentStatusTable"
|
};
|
|
/**
|
* 初始化表格的列
|
*/
|
EquipmentStatus.initColumn = function () {
|
return [[
|
{type: 'checkbox'},
|
{field: 'id', hide: true, title: 'ID'},
|
{field: 'equipmentNo', sort: true, title: '设备编号'},
|
{field: 'equipmentName', sort: true, title: '设备名称'},
|
{field: 'workshopCode', sort: true, title: '车间编号'},
|
{field: 'productionLineCode', sort: true, title: '产线编号'},
|
{field: 'locationCode', sort: true, title: '工位编号'},
|
{field: 'status', sort: true, title: '设备状态'},//(1运转2待机3故障)
|
{field: 'remarks', sort: true, title: '备注'},
|
{field: 'updateTime', sort: true, title: '更新时间'},
|
]];
|
};
|
|
var tableResult = table.render({
|
elem: '#' + EquipmentStatus.tableId,
|
url: Feng.ctxPath + '/equipmentStatus/list',
|
toolbar: '#toolbarDemo',
|
page: true,
|
// height: "full-158",
|
cellMinWidth: 100,
|
height: 412,
|
cols: EquipmentStatus.initColumn()
|
});
|
|
/**
|
* 设备报警管理
|
*/
|
var EquipmentAlarm = {
|
tableId: "equipmentAlarmTable"
|
};
|
|
/**
|
* 初始化表格的列
|
*/
|
EquipmentAlarm.initColumn = function () {
|
return [[
|
{type: 'checkbox'},
|
{field: 'id', hide: true, title: 'ID'},
|
{field: 'equipmentNo', sort: true, title: '设备编号'},
|
{field: 'equipmentName', sort: true, title: '设备名称'},
|
{field: 'workshopCode', sort: true, title: '车间编号'},
|
{field: 'productionLineCode', sort: true, title: '产线编号'},
|
{field: 'locationCode', sort: true, title: '工位编号'},
|
{field: 'errorNo', sort: true, title: '故障代码'},
|
{field: 'errorDesc', sort: true, title: '故障描述'},
|
{field: 'alarmTime', sort: true, title: '报警时间'},
|
]];
|
};
|
|
// 渲染表格
|
var tableResult = table.render({
|
elem: '#' + EquipmentAlarm.tableId,
|
url: Feng.ctxPath + '/equipmentAlarm/list',
|
toolbar: '#toolbarDemo',
|
page: true,
|
// height: "full-158",
|
cellMinWidth: 100,
|
height: 287,
|
limit:4,
|
cols: EquipmentAlarm.initColumn()
|
});
|
|
});
|
</script>
|
</body>
|
|
</html>
|
