256 lines
13 KiB
HTML
256 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>设备测试监控</title>
|
|
<!-- 引入 Bootstrap CSS -->
|
|
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- 引入 Flatpickr CSS -->
|
|
<link href="../static/css/flatpickr.min.css" rel="stylesheet">
|
|
<!-- 引入自定义 CSS -->
|
|
<link href="../static/styles.css" rel="stylesheet">
|
|
<!-- 在 <head> 部分添加 Font Awesome 图标库 -->
|
|
<link href="../static/css/all.min.css" rel="stylesheet">
|
|
|
|
<script src="../static/js/xlsx.full.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<div class="d-flex flex-column flex-md-row justify-content-flex-start align-items-center mb-4">
|
|
<img src="../static/images/celex_logo.png" alt="Celex" class="mb-3 mb-md-0 me-md-3" style="height: 50px;">
|
|
<h1 class="mb-0 text-center text-md-start">通力电梯检修手柄功能检测系统</h1>
|
|
</div>
|
|
|
|
<!-- 信息区域 -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">基本信息</h5>
|
|
<div class="row">
|
|
<!-- 现有的输入字段 -->
|
|
<div class="col-md-3">
|
|
<label for="deviceType" class="form-label">设备型号</label>
|
|
<select class="form-select info-input" id="deviceType">
|
|
<option selected>请选择...</option>
|
|
<option value="4">四孔</option>
|
|
<option value="5">五孔</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="tester" class="form-label">检测人员</label>
|
|
<select class="form-select info-input" id="tester">
|
|
<option selected>请选择...</option>
|
|
<option value="邱东财">邱东财</option>
|
|
<option value="陈翠芹">陈翠芹</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="orderNumber" class="form-label">订单编号</label>
|
|
<input type="text" class="form-control info-input" id="orderNumber">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="testDate" class="form-label">测试日期</label>
|
|
<input type="text" class="form-control flatpickr info-input" id="testDate">
|
|
</div>
|
|
<!-- 添加开始测试按钮 -->
|
|
<div class="col-md-3 mb-3 mt-3">
|
|
<button id="startTestBtn" class="btn btn-primary ">开始测试</button>
|
|
</div>
|
|
<div class="col-md-3 mb-3 mt-3">
|
|
<button id="selectPortBtn" class="btn btn-secondary">选择串口</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加模态框 -->
|
|
<div class="modal fade" id="portModal" tabindex="-1" aria-labelledby="portModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="portModalLabel">选择串口</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<select class="form-select" id="portSelect">
|
|
<!-- 串口选项将通过 JavaScript 动态添加 -->
|
|
</select>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirmPortBtn">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4" style="height:300px;">
|
|
<!-- 灯光状态监控 -->
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center mb-4">灯光状态监控</h5>
|
|
<!-- 五孔灯光状态 -->
|
|
<div id="fiveHoleLights" class="light-container">
|
|
<div class="light-item">
|
|
<div class="light common off" id="common-5"></div>
|
|
<p>公共灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light up off" id="up-5"></div>
|
|
<p>上行灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light down off" id="down-5"></div>
|
|
<p>下行灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light alarm off" id="alarm-5"></div>
|
|
<p>警铃灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light emergency_stop off" id="emergency_stop-5"></div>
|
|
<p>急停灯</p>
|
|
</div>
|
|
</div>
|
|
<!-- 四孔灯光状态 -->
|
|
<div id="fourHoleLights" class="light-container" style="display: none;">
|
|
<div class="light-item">
|
|
<div class="light common off" id="common-4"></div>
|
|
<p>公共灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light emergency_stop off" id="emergency_stop-4"></div>
|
|
<p>急停灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light up off" id="up-4"></div>
|
|
<p>上行灯</p>
|
|
</div>
|
|
<div class="light-item">
|
|
<div class="light down off" id="down-4"></div>
|
|
<p>下行灯</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 检测状态记录 -->
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center mb-4">检测状态记录</h5>
|
|
<ul class="list-group" id="statusCheckList5" style="display: none;">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="common">
|
|
公共
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="up">
|
|
上行
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="down">
|
|
下行
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="alarm">
|
|
警铃
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="emergency_stop">
|
|
急停
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="list-group" id="statusCheckList4" style="display: none;">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="common">
|
|
公共
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="up">
|
|
上行
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="down">
|
|
下行
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-light="emergency_stop">
|
|
急停
|
|
<span class="badge bg-success rounded-pill" style="display: none;">✓</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 测试结果记录模块 -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center mb-4">测试结果记录</h5>
|
|
<table class="table" id="resultTable">
|
|
<thead>
|
|
<tr>
|
|
<th>设备序列号</th>
|
|
<th>测试结果</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="text" class="form-control serial-number" id="firstSerialNumber" placeholder="输入设备序列号"></td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="result-0" disabled>
|
|
<label class="form-check-label" for="result-0">
|
|
<span class="pending">待测试</span>
|
|
<span class="pass" style="display: none;">合格</span>
|
|
<span class="fail" style="display: none;">不合格</span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
<td><button class="btn btn-primary add-row-btn" onclick="addNewRow(this)">增加下一条</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="copyright">
|
|
<small>© <span id="currentYear"></span> 捷力思智能科技（上海）有限公司. 保留所有权利。</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-success" onclick="exportToExcel()">
|
|
<i class="fas fa-file-excel me-2"></i>导出结果到Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引入 Bootstrap JS 和 Popper.js -->
|
|
<script src="../static/js/popper.min.js"></script>
|
|
<script src="../static/js/bootstrap.min.js"></script>
|
|
<!-- 引入 Flatpickr JS -->
|
|
<script src="../static/js/flatpickr.js"></script>
|
|
<!-- 引入 Flatpickr 中文语言包 -->
|
|
<script src="../static/js/zh.js"></script>
|
|
<script src="../static/main.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
flatpickr("#testDate", {
|
|
dateFormat: "Y-m-d",
|
|
locale: "zh",
|
|
disableMobile: "true"
|
|
});
|
|
|
|
// 设置当前年份
|
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|