|
@@ -1,14 +1,67 @@
|
|
|
-<% layout('/layouts/default.html', {title: '工件拍照记录详情', libs: ['validate','dataGrid','fileupload']}){ %>
|
|
|
|
|
-
|
|
|
|
|
|
|
+<% layout('/layouts/default.html', {title: '工件拍照记录详情', libs: ['validate']}){ %>
|
|
|
<style>
|
|
<style>
|
|
|
- table{
|
|
|
|
|
- width: 100%;
|
|
|
|
|
|
|
+ table { width: 100%; }
|
|
|
|
|
+ th, td { padding: 10px; }
|
|
|
|
|
+ .table.table-bordered th {
|
|
|
|
|
+ width: 150px;
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
}
|
|
|
- th,td{
|
|
|
|
|
- padding: 10px;
|
|
|
|
|
|
|
+ .gp12-img {
|
|
|
|
|
+ width: 500px;
|
|
|
|
|
+ height: 350px;
|
|
|
|
|
+ object-fit: contain;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ transition: box-shadow 0.2s;
|
|
|
}
|
|
}
|
|
|
- .table.table-bordered th {
|
|
|
|
|
- width: 200px;
|
|
|
|
|
|
|
+ .gp12-img:hover {
|
|
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+ .img-not-found {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ width: 500px;
|
|
|
|
|
+ height: 200px;
|
|
|
|
|
+ line-height: 200px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background: #f9f9f9;
|
|
|
|
|
+ color: #ccc;
|
|
|
|
|
+ border: 1px dashed #e0e0e0;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .modal-overlay {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ z-index: 9999;
|
|
|
|
|
+ top: 0; left: 0;
|
|
|
|
|
+ width: 100%; height: 100%;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.85);
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ .modal-overlay img {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ max-width: 92%; max-height: 92%;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%; left: 50%;
|
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-header {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
|
+ margin: 15px 0 0 0;
|
|
|
|
|
+ border-left: 4px solid #3498db;
|
|
|
|
|
+ background: #f0f7ff;
|
|
|
|
|
+ color: #2c3e50;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-header.back-side {
|
|
|
|
|
+ border-left-color: #e67e22;
|
|
|
|
|
+ background: #fef5ec;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
<div class="main-content">
|
|
<div class="main-content">
|
|
@@ -21,48 +74,61 @@
|
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <#form:form id="inputForm" model="${mesProductGp12}" action="${ctx}/mes/mesProductGp12/save" method="post" class="form-horizontal">
|
|
|
|
|
<div class="box-body">
|
|
<div class="box-body">
|
|
|
<div class="form-unit">${text('基本信息')}</div>
|
|
<div class="form-unit">${text('基本信息')}</div>
|
|
|
<table class="table table-bordered">
|
|
<table class="table table-bordered">
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">工件码</th>
|
|
|
|
|
|
|
+ <th>工件码</th>
|
|
|
<td>${mesProductGp12.sn}</td>
|
|
<td>${mesProductGp12.sn}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
-
|
|
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">工位号</th>
|
|
|
|
|
|
|
+ <th>工位号</th>
|
|
|
<td>${mesProductGp12.oprno}</td>
|
|
<td>${mesProductGp12.oprno}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
-
|
|
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">产线编号</th>
|
|
|
|
|
|
|
+ <th>产线编号</th>
|
|
|
<td>${mesProductGp12.lineSn}</td>
|
|
<td>${mesProductGp12.lineSn}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
-
|
|
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">备注</th>
|
|
|
|
|
- <td>${mesProductGp12.remark}</td>
|
|
|
|
|
|
|
+ <th>创建人</th>
|
|
|
|
|
+ <td>${mesProductGp12.createBy}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
-
|
|
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">创建人</th>
|
|
|
|
|
- <td>${mesProductGp12.createBy}</td>
|
|
|
|
|
|
|
+ <th>创建时间</th>
|
|
|
|
|
+ <td>${mesProductGp12.createDate,dateFormat='yyyy-MM-dd HH:mm:ss'}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
|
|
+ </table>
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <div class="section-header">正面图片(上 / 左 / 右 / 前 / 后)</div>
|
|
|
|
|
+ <table class="table table-bordered">
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>上</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}shang.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>左</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}zuo.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>右</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}you.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
|
|
+ </tr>
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">创建时间</th>
|
|
|
|
|
- <td>${mesProductGp12.createDate,dateFormat='yyyy-MM-dd HH:mm'}</td>
|
|
|
|
|
|
|
+ <th>前</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}qian.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
</tr>
|
|
</tr>
|
|
|
<tr>
|
|
<tr>
|
|
|
- <th class="mpc-header">图片</th>
|
|
|
|
|
- <td>
|
|
|
|
|
- <#form:fileupload id="uploadImage" bizKey="${mesProductGp12.id}" bizType="mesProductGp12_image"
|
|
|
|
|
- uploadType="image" class="" readonly="true" preview="true"/>
|
|
|
|
|
- </td>
|
|
|
|
|
|
|
+ <th>后</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}hou.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
</tr>
|
|
</tr>
|
|
|
|
|
+ </table>
|
|
|
|
|
|
|
|
|
|
+ <div class="section-header back-side">反面图片(下)</div>
|
|
|
|
|
+ <table class="table table-bordered">
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>下</th>
|
|
|
|
|
+ <td><img class="gp12-img" src="${ctx}/mes/mesProductGp12/image?path=${imgSubPath}xia.jpg" onclick="showBigImg(this)" onerror="imgError(this)"/></td>
|
|
|
|
|
+ </tr>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="box-footer">
|
|
<div class="box-footer">
|
|
@@ -72,24 +138,23 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </#form:form>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+<div id="bigImgModal" class="modal-overlay" onclick="this.style.display='none'">
|
|
|
|
|
+ <img id="bigImgModalImg"/>
|
|
|
</div>
|
|
</div>
|
|
|
<% } %>
|
|
<% } %>
|
|
|
<script>
|
|
<script>
|
|
|
-
|
|
|
|
|
-</script>
|
|
|
|
|
-<script>
|
|
|
|
|
- $("#inputForm").validate({
|
|
|
|
|
- submitHandler: function(form){
|
|
|
|
|
- js.ajaxSubmitForm($(form), function(data){
|
|
|
|
|
- js.showMessage(data.message);
|
|
|
|
|
- if(data.result == Global.TRUE){
|
|
|
|
|
- js.closeCurrentTabPage(function(contentWindow){
|
|
|
|
|
- contentWindow.page();
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- }, "json");
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ function showBigImg(imgEl) {
|
|
|
|
|
+ var modal = document.getElementById("bigImgModal");
|
|
|
|
|
+ var modalImg = document.getElementById("bigImgModalImg");
|
|
|
|
|
+ modalImg.src = imgEl.src;
|
|
|
|
|
+ modal.style.display = "block";
|
|
|
|
|
+ }
|
|
|
|
|
+ function imgError(imgEl) {
|
|
|
|
|
+ var placeholder = document.createElement('span');
|
|
|
|
|
+ placeholder.className = 'img-not-found';
|
|
|
|
|
+ placeholder.innerText = '待拍照';
|
|
|
|
|
+ imgEl.parentNode.replaceChild(placeholder, imgEl);
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|