<!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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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
="check
Column" 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">查詢</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).has
Class('selected')) { $(this).remove
Class('selected'); } else { $('#table_id tbody > tr').remove
Class('selected'); $(this).add
Class('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) { $(e
val(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
="check
Column"]'); 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(); } </script> </body> </html> 切换中英文页面
本文深入讲解了CSS选择器的各种类型，包括属性选择器如[attr=val]、[attr~=val]、[attr|=val]等，以及类名选择器如[attr*=“val-”]、[attr^=“val-”]、[attr$=-val]。通过实例对比[attr*=“test”]与[attr~=val]的区别，帮助读者掌握更精准的选择器应用。
扫一扫
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
