<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>作业指导书</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../../layuiadmin/layui/css/modules/layer/default/layer.css" media="all">
|
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
<script src="../../../layuiadmin/layui/layui.js"></script>
|
<script src="../../../layuiadmin/Scripts/json2.js"></script>
|
<script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../../layuiadmin/Scripts/webConfig.js"></script>
|
<script src="../../../layuiadmin/PubCustom.js"></script>
|
<script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script>
|
|
<style>
|
/*
|
tr:nth-child(even) {
|
background: #CDCDCD;
|
}
|
table{
|
margin-top:1px;
|
}
|
tr:nth-child(1) {
|
background: #f8ff00;
|
}*/
|
li {
|
/*时间显示字体大小*/
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
|
.layui-table-cell{
|
height:20px;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-col-md12">
|
<div class="layui-card" style="padding: 1px">
|
<div class="layui-card-body" style="padding: 1px;">
|
<!--<form class="layui-form" action="" lay-filter="component-form-group">-->
|
<div class="layui-collapse">
|
<div class="layui-colla-item"> <!--top-->
|
<div class="layui-inline">
|
<button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="Exit" style="background-color:#959393">退出</button>
|
</div>
|
<div class="layui-inline">
|
<button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="IsAuto" style="background-color:#959393;margin-left:15px" id="auto">自动播放</button>
|
</div>
|
<div class="layui-inline">
|
<h1 style="text-align: center;margin-left:300px"><b>工位作业指导书</b></h1>
|
</div>
|
<div class="layui-inline" style="margin-left:460px;">
|
<ul>
|
<li id="Date"></li>
|
</ul>
|
</div>
|
<div class="layui-inline">
|
<ul>
|
<li id="hours"> </li>
|
</ul>
|
</div>
|
<div class="layui-inline">
|
<ul>
|
<li id="point">:</li>
|
</ul>
|
</div>
|
<div class="layui-inline">
|
<ul>
|
<li id="min"> </li>
|
</ul>
|
</div>
|
<div class="layui-inline">
|
<ul>
|
<li id="point">:</li>
|
</ul>
|
</div>
|
<div class="layui-inline">
|
<ul>
|
<li id="sec"> </li>
|
</ul>
|
</div>
|
</div> <!--top-end-->
|
<!--<table class="" id="mainTable" lay-filter="mainTable"></table>-->
|
<div style="margin-top:10px; width:100%;height:100%">
|
<div style="width:77%;height:670px;float:left;line-height:500px">
|
<!--<button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="" style="background-color:#959393;width:10px;height:80px;vertical-align:middle;float:left;margin:200px 0 0 1.5px;font-size:25px"><</button>-->
|
|
<div class="layui-carousel" id="test1">
|
<div carousel-item>
|
<div><img src="OIP-C.jpg" style="width:100%;height:100%"></div>
|
<div><img src="R-C.jpg" style="width:100%;height:100%"></div>
|
<div><img src="测试.jpeg" style="width:100%;height:100%"></div>
|
<div><embed src="Test PDF.pdf" type="application/pdf" style="width:100%;height:100%" internalinstanceid="81" /></div>
|
</div>
|
</div>
|
|
<!--<button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="" style="background-color:#959393;width:10px;height:80px;vertical-align:middle;float:left;margin-top:200px;font-size:25px">></button>-->
|
</div>
|
<div style="width:22%;height:670px;float:left;margin-left:1%">
|
<div style="width:100%;height:49%;margin-bottom:2%">
|
<div style="width:100px;height:23px; background: linear-gradient(-135deg, transparent 30px, #2baaca 0);"><span style="color:aliceblue;">工单列表</span></div>
|
<!--<table border="1" style="border-collapse: collapse;">
|
<thead>
|
<tr>
|
<th style="min-width:40PX">计划</th>
|
<th style="min-width:40PX">日期</th>
|
<th style="min-width:40PX">物料代码</th>
|
<th style="min-width:40PX">物料名称</th>
|
<th style="min-width:40PX">规格型号</th>
|
<th style="min-width:40PX">工序</th>
|
</tr>
|
<tr>
|
<td>S00001</td>
|
<td>2022</td>
|
<td>001</td>
|
<td>S500</td>
|
<td>S500</td>
|
<td>151545</td>
|
</tr>
|
<tr>
|
<td>S00001</td>
|
<td>2022</td>
|
<td>001</td>
|
<td>S500</td>
|
<td>S500</td>
|
<td>151545</td>
|
</tr>
|
<tr>
|
<td>S00001</td>
|
<td>2022</td>
|
<td>001</td>
|
<td>S500</td>
|
<td>S500</td>
|
<td>151545</td>
|
</tr>
|
</thead>
|
</table>-->
|
<table class="" id="mainTable" lay-filter="mainTable"></table>
|
</div>
|
<div style="width:100%;height:49%;">
|
<div style="width:100px;height:23px; background: linear-gradient(-135deg, transparent 30px, #2baaca 0);"><span style="color:aliceblue;">文件列表</span></div>
|
<!--<table border="1" style="border-collapse: collapse;">
|
<thead>
|
<tr>
|
<th style="min-width:65PX">序号</th>
|
<th style="min-width:87PX">工序</th>
|
<th style="min-width:88PX">文件名称</th>
|
</tr>
|
<tr>
|
<td>S001</td>
|
<td>2022-11-08</td>
|
<td>001</td>
|
</tr>
|
<tr>
|
<td>S001</td>
|
<td>2022-11-08</td>
|
<td>001</td>
|
</tr>
|
<tr>
|
<td>S001</td>
|
<td>2022-11-08</td>
|
<td>001</td>
|
</tr>
|
</thead>
|
</table>-->
|
<table class="" id="mainTable2" lay-filter="mainTable2"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--</form>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/html" id="barDemo">
|
<!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
|
<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
|
</script>
|
<script type="text/javascript">
|
//获取参数
|
var params = get_UrlVars();
|
if (typeof (params[params[0]]) == "undefined") {
|
var OperationType = 1;//操作类型
|
var closeType = 2; //关闭类型
|
} else {
|
debugger;
|
var OperationType = params[params[0]];//操作类型
|
var linterid = params[params[1]];//源单id
|
var HSouceBillType = params[params[2]];//源单类型
|
var closeType = params[params[3]]; //关闭类型
|
}
|
|
// 报工平台;工序流转卡维护;生产资源列表
|
|
//1.进入模块，从本地配置文件获取所属生产资源和工位，初始化模块。界面清空，右边上网格显示该生产资源生产状态表里的当日计划工单，默认为当前开工的工单，下网格显示这个工单及该工位的文件清单(获取作业指导书的数据)。
|
|
//2.左边显示工位作业指导书的第一张文件(图片或PDF) 。
|
|
//3.点击上一张，下一张，可以在作业指导书的本工位的文件列表里切换PDF文件或图片;
|
|
//4.工单列表里，双击或者点查看按钮，可以切换工单，左边 作业指导书也相应改变，下网格的文件列表也应改
|
//变;
|
|
//5.自动播放按钮，点击自动播放按钮，进行自动播放模式，按钮名字改为“手动播， 点击 手动播放 按钮，”进行手动播放模式
|
|
//6.手动播放模式下，不手动切换，当前工单，作业指导书均不做变更。
|
|
//7.自动播放模式下，每2分钟做一次查询，获取当前开工的工单，如果目前开工的工单和界面上显示的工单不符合时，自动切换到开工的工单，作业指导书也相关更新
|
|
//8.退出按钮。退出本模块。
|
|
|
//产品根据工单来；自动播放：当前工序完成后自动切换指导书等，手动播放：约等于什么都不做；工单列表里显示当日需要进行得任务；页面调整为全屏显示，
|
|
layui.config({
|
base: '../../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index', //主入口模块
|
}).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'carousel'], function () {
|
//#region 公共变量
|
var $ = layui.$
|
, admin = layui.admin
|
, layer = layui.layer
|
, table = layui.table
|
, form = layui.form
|
, element = layui.element
|
, laypage = layui.laypage
|
, laydate = layui.laydate
|
, util = layui.util
|
, carousel = layui.carousel
|
//查询条件
|
var sWhere = "";
|
var option = [];
|
var option2 = [];
|
var arr = [];
|
//#endregion
|
//#region 进入页面既加载
|
//初始化表格
|
set_InitGrid();
|
set_InitGrid2();
|
// 轮播图
|
var ins = carousel.render({
|
elem: '#test1'
|
, width: '100%' //设置容器宽度
|
, height: '100%' //设置容器高度
|
, arrow: 'always' //始终显示箭头
|
, indicator: 'none' //指示器不显示
|
, autoplay: false //手动播放
|
, interval: 2000 //播放速度
|
});
|
//#region 获取时间日期
|
$(document).ready(function () {
|
// 创建两个变量，一个数组中的月和日的名称
|
var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
|
setInterval(function () {
|
var date1 = new Date;
|
var year = date1.getFullYear();
|
var month = date1.getMonth();
|
var day = date1.getDate();
|
var hh = date1.getHours();
|
var mm = date1.getMinutes();
|
var ss = date1.getSeconds();
|
var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var Stamp = new Date();
|
|
|
$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日 " + ' ' + dayNames[Stamp.getDay()]);
|
$("#hours").html((hh < 10 ? ("0" + hh) : hh));
|
$("#min").html((mm < 10 ? ("0" + mm) : mm));
|
$("#sec").html((ss < 10 ? ("0" + ss) : ss));
|
|
}, 1000);
|
});
|
//#endregion
|
|
//加载数据到网格
|
get_Display(sWhere);
|
//判断操作类型
|
if (OperationType == 1 || OperationType == 2) {//无源新增
|
//初始基本信息赋值
|
set_AddFNew();
|
set_AddFNew2();
|
}
|
else if (OperationType == 3) {//编辑
|
set_EditFromGrid(linterid);
|
}
|
else {
|
layer.alert("未知操作类型！", { icon: 5 });
|
}
|
|
//#endregion
|
|
//退出
|
form.on('submit(Exit)', function (data) {
|
if (linterid == undefined) {
|
//关闭页签
|
Pub_Close(2);
|
}
|
else {
|
//关闭页签
|
Pub_Close(1);
|
}
|
});
|
|
//是否自动播放
|
form.on('submit(IsAuto)', function (data) {
|
var num = 0;
|
if (ins.config.autoplay == false) {
|
ins.reload({ autoplay: true }) //播放方式改为自动播放
|
document.getElementById("auto").innerHTML = "手动播放";
|
num = 1;
|
} else if (ins.config.autoplay == true && num == 0) {
|
ins.reload({ autoplay: false }) //播放方式改为手动播放
|
document.getElementById("auto").innerHTML = "自动播放";
|
}
|
});
|
|
//无源单新增
|
function set_AddFNew() {
|
option.data = [{
|
"流水号": "", "工序代码": "", "工序": "", "工位": "", "工位代码": "", "工作中心代码": "", "工作中心": "", "备注": ""
|
}];
|
table.render(option);
|
}
|
|
//#region 点击事件包括on form事件等
|
//头工具栏事件
|
table.on('toolbar(mainTable)', function (obj) {
|
var checkStatus = table.checkStatus('mainTable')
|
, data = checkStatus.data;;
|
var AddRow = table.cache['mainTable'];
|
var NewRow = { "流水号": "", "工序代码": "", "工序": "", "工位": "", "工位代码": "", "工作中心代码": "", "工作中心": "", "备注": "" };
|
switch (obj.event) {
|
//新增一行
|
case 'btn-AddLine': btnAddLine(NewRow);
|
break;
|
//复制一行
|
case 'btn-CopyLine': btnCopyLine(data);
|
break;
|
//列设置
|
case 'set_HideColumn': get_HideColumn();
|
break;
|
}
|
});
|
//行内事件
|
table.on('tool(mainTable)', function (obj) {
|
set_GridDelete(obj); //行内删除
|
//set_GridCellCheck(obj); //行内快捷键筛选
|
});
|
//监听单元格编辑 单元格编辑后 变更
|
//table.on('edit(mainTable)', function (obj) {
|
// var value = obj.value //得到修改后的值
|
// , data = obj.data //得到所在行所有键值
|
// , field = obj.field; //得到字段
|
// arr.push(data);
|
//});
|
|
//点击主表带出从表数据
|
table.on('row(mainTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
console.log(obj);
|
//var datas = obj.data; //获得当前行数据
|
//HBillNo = datas["单据号"].toString();
|
//var HMainID = datas.hmainid;
|
var wait = layer.load();
|
$.ajax({
|
url: GetWEBURL() + '/Sc_ICMOBillStatus_Tmp/Filelist',
|
type: "GET",
|
//data: { "sWhere": HMainID },
|
success: function (data1) {
|
if (data1.count == 1) {
|
option2.data = data1.data;
|
table.render(option2);
|
layer.close(wait);
|
} else {
|
layer.alert(data1.code + data1.Message, { icon: 5 });
|
layer.close(wait);
|
}
|
}, error: function () {
|
layer.close(wait);
|
layer.alert("接口失效!", { icon: 5 });
|
}
|
});
|
//DisPlay_HideColumn_Sec();
|
//set_ClearBillHMainID(HMainID); //器具清单
|
});
|
//#endregion
|
|
//初始化表格
|
function set_InitGrid() {
|
option = {
|
id: 'mainTable'
|
, elem: '#mainTable'
|
, toolbar: '#toolbarDemo'
|
, page: false
|
, cellMinWidth: 90
|
, totalRow: false
|
, toolbar: false
|
, limit: 50
|
, height: 300
|
, cols: [[
|
, { field: '计划', title: '计划', width: 100 }
|
, { field: '日期', title: '日期', width: 100, templet: "<div>{{d.日期 ==null ?'':layui.util.toDateString(d.日期, 'yyyy-MM-dd')}}</div>" }
|
, { field: '物料代码', title: '物料代码', width: 100 }
|
, { field: '物料名称', title: '物料名称', width: 100 }
|
, { field: '规格型号', title: '规格型号', width: 100 }
|
, { field: '工序', title: '工序', width: 100 }
|
//, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 60 }
|
]]
|
, limits: [50, 500, 5000, 20000]
|
, done: function (res, curr, count) {
|
|
}
|
};
|
}
|
function set_InitGrid2() {
|
option2 = {
|
id: 'mainTable2'
|
, elem: '#mainTable2'
|
, toolbar: '#toolbarDemo'
|
, page: false
|
, cellMinWidth: 20
|
, totalRow: false
|
, toolbar: false
|
, limit: 50
|
, height: 300
|
, cols: [[
|
, { field: '序号', title: '序号', width: 110,}
|
, { field: '工序', title: '工序', width: 110, }
|
, { field: '文件名称', title: '文件名称', width: 110 }
|
]]
|
, limits: [50, 500, 5000, 20000]
|
, done: function (res, curr, count) {
|
|
}
|
};
|
}
|
//无源单新增
|
function set_AddFNew() {
|
option.data = [{
|
"计划": "无", "日期": "2022", "物料代码": "SM001", "物料名称": "SM001", "规格型号": "SM001", "工序": "6"
|
}];
|
table.render(option);
|
}
|
function set_AddFNew2() {
|
option2.data = [{
|
"序号": "8", "工序": "6", "文件名称": "Hello"
|
}];
|
table.render(option2);
|
}
|
//加载网格
|
function get_Display(sWhere) {
|
var wait = layer.load();//遮罩
|
$.ajax({
|
url: GetWEBURL() + '/Sc_ICMOBillStatus_Tmp/list',
|
type: "GET",
|
data: { "sWhere": sessionStorage["HSourceID"], "user": sessionStorage["HUserName"] },
|
success: function (data1) {
|
if (data1.count == 1) {
|
option.data = data1.data;
|
table.render(option);
|
layer.close(wait);
|
} else {
|
layer.close(wait);
|
layer.alert(data1.Message, { icon: 5 });
|
}
|
}, error: function () {
|
layer.close(wait);
|
layer.alert("接口请求失败!", { icon: 5 });
|
}
|
});
|
}
|
|
// 表格行内事件删除
|
function set_GridDelete(obj) {
|
var data = obj.data;
|
var rowIndex = $(obj.tr).attr("data-index");
|
if (obj.event === 'del') {
|
layer.confirm('真的删除行么', function (index) {
|
console.log("索引为:" + rowIndex);
|
if (rowIndex === '0') {
|
layer.msg('首行无法删除！！！');
|
} else {
|
//obj.del();
|
//layer.close(index);
|
var oldData = table.cache["mainTable"];
|
oldData.splice(obj.tr.data('index'), 1);
|
table.reload('mainTable', { data: oldData });
|
layer.close(index);
|
}
|
});
|
}
|
}
|
//以上是layui模块
|
});
|
</script>
|
</body>
|
</html>
|
