<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/datatables.min.css" rel="stylesheet" />
<link href="../css/jquery.datetimepicker.css" rel="stylesheet" />
<script type="text/javascript" src="../../../js/date.format.js"></script>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.datetimepicker.full.js"></script>
<script src="../js/jquery.form.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../../js/datatables.min.js"></script>
<script type="text/javascript" src="../../../js/buttons.html5.min.js"></script>
<script src="../../js/datav.min.vue.js"></script>
<style>
.search-span
{
background-color: LightSteelBlue;
}
.row-div-20
{
margin: 20px;
}
.row-div-10
{
margin: 10px;
}
.row-div-5
{
margin: 5px;
}
.custom-tooltip
{
--bs-tooltip-bg: var(--bs-secondary);
}
</style>
</head>
<body>
<!-- search form -->
<form id="search_form" action="../Controller/getTraceabilityList.ashx" method="post"
enctype="application/x-www-form-urlencoded" onsubmit="loadDataTable();return false;">
<div class="row row-div-20">
<div class="col-3">
<div class="row">
<div class="col-12">
<div class="input-group">
<span class="input-group-text search-span">生產單號</span>
<input id="base-id" name="base-id" type="text" class="form-control" />
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text search-span">出貨單號</span>
<input type="text" class="form-control" disabled />
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text search-span">日期</span>
<input id="start-time" name="start-time" type="text" class="form-control" autocomplete="off" />
<input id="end-time" name="end-time" type="text" class="form-control" autocomplete="off" />
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-8">
<div class="row">
<div class="col-12">
<div class="input-group">
<span class="input-group-text search-span">料號</span>
<input id="parn-no" name="parn-no" type="text" class="form-control" /><!--required-->
<span class="input-group-text search-span">批號</span>
<input name="batch-no" type="text" class="form-control" />
<span class="input-group-text search-span">DC</span>
<input name="dc" type="text" class="form-control" />
<span class="input-group-text search-span">版本</span>
<input name="version" type="text" class="form-control" />
</div>
</div>
<div class="col-10">
<div class="input-group">
<span class="input-group-text search-span">客戶料號</span>
<input type="text" class="form-control" disabled />
<span class="input-group-text search-span">客戶批號</span>
<input type="text" class="form-control" disabled />
<span class="input-group-text search-span">機臺編號</span>
<input name="machine-no" type="text" class="form-control" />
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text search-span">站別</span>
<input id="station" name="station" type="text" readonly class="form-control" autocomplete="off" />
<button type="button" onclick="showStationModal()" class="btn btn-outline-primary">
選擇站別</button>
<span class="input-group-text search-span">WPNL 號</span>
<input name="wpnl-no" type="text" class="form-control" disabled />
<span class="input-group-text search-span">SPNL 號</span>
<input name="spnl-no" type="text" class="form-control" disabled />
<span class="input-group-text search-span">PCS 號</span>
<input name="pcs-no" type="text" class="form-control" disabled />
</div>
</div>
<div class="col-8">
<div class="input-group">
<span class="input-group-text search-span">Bacode</span>
<input id="Code-no" name="Code-no" type="text" class="form-control" />
<button id="search-btn" class="btn btn-primary">查詢</button>
</div>
</div>
</div>
</div>
</div>
<div class="row row-div-10">
<div class="col-11">
<input id="reject" name="checkColumn" type="checkbox" title="test" class="btn-check"
onchange="checkboxChange($(this))" autocomplete="off" />
<label for="reject" class="btn btn-outline-success" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip" data-bs-title="AOI / OS / VI">
不良率</label>
<input name="reject" type="text" value="N" style="display: none" />
<input id="scrap" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="scrap" class="btn btn-outline-success" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip" data-bs-title="AOI / OS / VI">
報廢率</label>
<input name="scrap" type="text" value="N" style="display: none" />
<input id="ipqc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="ipqc" class="btn btn-outline-success">
IPQC</label>
<input name="ipqc" type="text" value="N" style="display: none" />
<input id="oqc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="oqc" class="btn btn-outline-success">
OQC 批退率</label>
<input name="oqc" type="text" value="N" style="display: none" />
<input id="mrb" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="mrb" class="btn btn-outline-success">
MRB 報廢率</label>
<input name="mrb" type="text" value="N" style="display: none" />
</div>
</div>
<div class="row row-div-10">
<div class="col-12">
<input id="materiel" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="materiel" class="btn btn-outline-success">原物料異常</label>
<input name="materiel" type="text" value="N" style="display: none" />
<input id="eim" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="eim" class="btn btn-outline-success">設備 A 級告警數</label>
<input name="eim" type="text" value="N" style="display: none" />
<input id="mes" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="mes" class="btn btn-outline-success">MES 設備維修記錄</label>
<input name="mes" type="text" value="N" style="display: none" />
<input id="potion-oos" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="potion-oos" class="btn btn-outline-success">藥水 OOS 異常點數</label>
<input name="potion-oos" type="text" value="N" style="display: none" />
<input id="potion-ooc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="potion-ooc" class="btn btn-outline-success">藥水 OOC 異常點數</label>
<input name="potion-ooc" type="text" value="N" style="display: none" />
<input id="product-oos" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="product-oos" class="btn btn-outline-success">產品 OOS 異常點數</label>
<input name="product-oos" type="text" value="N" style="display: none" />
<input id="product-ooc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="product-ooc" class="btn btn-outline-success">產品 OOC 異常點數</label>
<input name="product-ooc" type="text" value="N" style="display: none" />
<input id="great-exception" name="checkColumn" type="checkbox" class="btn-check"
onchange="checkboxChange($(this))" autocomplete="off" />
<label for="great-exception" class="btn btn-outline-success">重大異常</label>
<input name="great-exception" type="text" value="N" style="display: none" />
<input id="rework" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="rework" class="btn btn-outline-success">重工</label>
<input name="rework" type="text" value="N" style="display: none" />
<input id="exception-handle" name="checkColumn" type="checkbox" class="btn-check"
onchange="checkboxChange($(this))" autocomplete="off" disabled />
<label for="exception-handle" class="btn btn-outline-success">異常處置</label>
<input name="exception-handle" type="text" value="N" style="display: none" />
<input id="complaint" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="complaint" class="btn btn-outline-success">客訴</label>
<input name="complaint" type="text" value="N" style="display: none" />
</div>
</div>
<div class="row row-div-10">
<div class="col-12">
<input id="only-exception" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="only-exception" class="btn btn-outline-success">只看異常</label>
<input name="only-exception" type="text" value="N" style="display: none" />
<input id="all" type="checkbox" class="btn-check" onchange="changeAll($(this))" autocomplete="off" />
<label for="all" class="btn btn-outline-success">ALL</label>
<input name="type" type="text" value="list" style="display: none" />
<input id="isSearching" type="text" value="N" style="display: none" />
<button id="submit-btn" type="submit" class="btn btn-primary" onclick="return submit-btn_onclick()">查詢</button>
</div>
</div>
</form>
<!-- datatable -->
<div class="row row-div-20">
<div class="table-responsive col-lg-12">
<table id="table_id" class="display nowrap table table-primary table-striped table-hover text-center align-middle">
<thead>
<tr id="table_head_id">
</tr>
</thead>
<tbody id="tbody_id">
</tbody>
</table>
</div>
</div>
<!-- Station Modal -->
<div id="station-modal" class="modal fade" tabindex="-1" data-bs-backdrop="static"
data-bs-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
站別選擇</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-4">
<input type="text" placeholder="站別名稱" onkeyup="screenStation($(this))" class="form-control" />
</div>
</div>
<br />
<div id="station-div" class="row">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
關閉</button>
<button type="button" onclick="clearStation()" class="btn btn-danger">
清除</button>
<button type="button" onclick="confirmStation()" class="btn btn-primary" data-bs-dismiss="modal">
確認</button>
</div>
</div>
</div>
</div>
<!-- Info Modal -->
<div id="info-modal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 id="modal-head-id" class="modal-title">
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div id="modal-content-id" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var table;
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
$(function () {
//得到当前时间
var now = new Date();
var endDate = now.format('Y-m-d H:i');
now.setTime(now.getTime() - 60 * 60 * 1000);
var startDate = now.format("Y-m-d H:i");
$('#start-time').datetimepicker({
format: 'Y-m-d H:i',
step: 1,
value: startDate
});
$('#end-time').datetimepicker({
format: 'Y-m-d H:i',
step: 1,
value: endDate
});
$.datetimepicker.setLocale('zh');
initStation();
//给行绑定选中事件
$('#table_id tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$('#table_id tbody > tr').removeClass('selected');
$(this).addClass('selected');
}
});
});
function initStation() {
$.ajax({
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'station'
},
success: function(result) {
$.each(result.data.list, function(i, n) {
$('#station-div').append(
'<div class="col-2">' +
'<div class="form-check">' +
'<input id="' + n + '" value="' + n + '" type="checkbox" class="btn-check" />' +
'<label for="' + n + '" class="btn btn-outline-success btn-sm">' + n + '</label>' +
'</div>' +
'</div>'
);
});
}
});
}
// code輸入後查詢
function getSampleBoardData() {
var data;
var codeNo = document.getElementById("Code-no").value;
$.ajax({
url: '../Controller/getTraceabilityList.ashx?type=codeNo',
data: {
'codeNo': codeNo
},
async: false,
success: function (result) {
data = result;
}
});
return data;
};
document.getElementById("search-btn").addEventListener("click", function() {
var codeNo = document.getElementById("Code-no").value;
var date = getSampleBoardData()
document.getElementsByName('base-id')[0].value = date.list;
document.getElementsByName('batch-no')[0].value = date.list1;
document.getElementsByName('parn-no')[0].value = date.list2;
// error: function() {
// alert('查询失败,请重试');
// }
});
function showStationModal() {
clearStation();
var stationStr = $('#station').val();
var stationArr
if (stationStr != '') {
stationArr = stationStr.split(',');
}
$.each(stationArr, function(i, n) {
$(eval(n)).prop('checked', true);
});
var stationModal = new bootstrap.Modal($("#station-modal"));
stationModal.show();
}
function screenStation(input) {
var str = input.val().toUpperCase();
$('#station-div > div').hide();
if (str == "") {
$('#station-div > div').show();
} else {
$('[id*="' + str + '"]').parent().parent().show();
}
}
function clearStation() {
$('#station-div input').prop('checked', false);
}
function confirmStation() {
var str = "";
$('#station-div input:checked').each(function (i, e) {
str += ($(e).attr('id') + ',');
});
$('#station').val(str.substring(0, str.length - 1));
}
function checkboxChange(checkbox) {
$('[name="' + checkbox.attr('id') + '"]').val(checkbox.prop('checked') ? 'Y' : 'N');
}
function changeAll(checkbox) {
var checkboxes = $('[name="checkColumn"]');
if (checkbox.prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
checkboxes.each(function (i, e) {
checkboxChange($(e));
});
}
function loadDataTable() {
if ($('#isSearching').val() === 'Y') {
alert('系統查詢中,請稍等···');
return;
}
$('#isSearching').val('Y');
if (!$('#reject').prop('checked') && !$('#scrap').prop('checked') && !$('#oqc').prop('checked') &&
!$('#mrb').prop('checked') && !$('#eim').prop('checked') && !$('#mes').prop('checked') &&
!$('#great-exception').prop('checked') && $('#only-exception').prop('checked')) {
$('#isSearching').val('N');
alert('未選擇異常項,無法只看異常。');
return;
}
let startTime = Date.parse($('#start-time').val());
let endTime = Date.parse($('#end-time').val());
let diffMin = Math.floor((endTime - startTime) / 60000);
if (diffMin > 3 * 24 * 60) {
$('#isSearching').val('N');
alert('只能查询三天内数据。');
return;
}
if ($('#base-id').val() == '' && $('#parn-no').val() == '' &&
($('#reject').prop('checked') || $('#scrap').prop('checked') || $('#oqc').prop('checked') ||
$('#mrb').prop('checked') || $('#eim').prop('checked') || $('#mes').prop('checked') ||
$('#great-exception').prop('checked'))) {
$('#isSearching').val('N');
alert('查询额外字段,请添加生产单号或批号条件进行筛选。')
return;
}
$('#submit-btn').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
$('#search_form').ajaxSubmit({
success: function (result) {
if (table != null) {
table.destroy();
}
$('#table_head_id').empty();
$('#tbody_id').empty();
$.each(result.data.head, function (i, n) {
$('#table_head_id').append('<th class="text-center">' + n + '</th>');
});
table = $('#table_id').DataTable({
data: result.data.list,
fixedHeader: true,
autoWidth: false,
scrollX: true,
scrollY: 700,
searching: 5000,
destroy: true,
deferRender: true, //延遲渲染
lengthMenu: [
[25, 50, -1],
[25, 50, 'All']
],
dom: "<'row'<'col-sm-12 col-md-2'B><'col-sm-12 col-md-1'l><'col-sm-12 col-md-9'f>>"
+ "<'row'<'col-sm-12'tr>>"
+ "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: ['copy', 'excel'],
ordering: false
});
$('#submit-btn').text('查詢');
$('#isSearching').val('N');
}
});
}
function showEIM(count, partId, lotId, machineNo, inDate, outDate) {
if (count <= 0) {
shwoInfoModal('設備 A 級告警明細', '該機臺告警數為 0');
return;
}
$.ajax({
async: false,
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'eim',
'partId': partId,
'lotId': lotId,
'machineNo': machineNo,
'inDate': inDate,
'outDate': outDate
},
success: function (result) {
var content =
'<table class="table table-warning table-striped table-hover text-nowrap">' +
'<thead><tr>' +
'<th>設備名稱</th>' +
'<th>告警編碼</th>' +
'<th>告警信息</th>' +
'<th>時間</th>' +
'</tr></thead>' +
'<tbody id="tbody_id">'
$.each(result.data.list, function (i, n) {
content +=
'<tr>' +
'<td>' + n.eqName + '</td>' +
'<td>' + n.eventCode + '</td>' +
'<td>' + n.eventMessage + '</td>' +
'<td>' + n.insertTime + '</td>' +
'</tr>'
});
content += '</tbody></table>'
shwoInfoModal('設備 A 級告警明細', content);
}
});
}
function showMES(count, machineNo, inDate, outDate) {
if (count <= 0) {
shwoInfoModal('MES 設備維修記錄', '該機臺維修記錄為 0。');
return;
}
$.ajax({
async: false,
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'mes',
'machineNo': machineNo,
'inDate': inDate,
'outDate': outDate
},
success: function (result) {
var content =
'<table class="table table-warning table-striped table-hover text-nowrap">' +
'<thead><tr>' +
'<th>設備名稱</th>' +
'<th>記錄 1</th>' +
'<th>記錄 2</th>' +
'<th>記錄 3</th>' +
'<th>記錄 4</th>' +
'<th>記錄 5</th>' +
'<th>申請時間</th>' +
'<th>維修開始時間</th>' +
'<th>維修結束時間</th>' +
'</tr></thead>' +
'<tbody id="tbody_id">'
$.each(result.data.list, function (i, n) {
content +=
'<tr>' +
'<td>' + n.deptName + '</td>' +
'<td>' + n.notepad1 + '</td>' +
'<td>' + n.notepad4 + '</td>' +
'<td>' + n.notepad5 + '</td>' +
'<td>' + n.notepad6 + '</td>' +
'<td>' + n.notepad7 + '</td>' +
'<td>' + n.entDate + '</td>' +
'<td>' + n.startRepairDate + '</td>' +
'<td>' + n.endRepairDate + '</td>' +
'</tr>'
});
content += '</tbody></table>'
shwoInfoModal('設備 A 級告警明細', content);
}
});
};
function shwoInfoModal(title, content) {
$('#modal-head-id').text(title)
$('#modal-content-id').empty();
$('#modal-content-id').append(content);
var infoModal = new bootstrap.Modal($("#info-modal"));
infoModal.show();
}
function submit-btn_onclick() {
}
</script>
</body>
</html>
为什么不在原界面直接显示查询结果,而是直接跳转到ashx文件
最新发布