531 lines
15 KiB
HTML
531 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>仪器信息汇总</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: white;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
background: white;
|
||
padding: 40px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 600;
|
||
color: #222;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.1rem;
|
||
color: #666;
|
||
}
|
||
|
||
.info-section {
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
/* 基本信息无边框表格样式 */
|
||
.basic-info-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.basic-info-table th,
|
||
.basic-info-table td {
|
||
padding: 15px 20px;
|
||
text-align: left;
|
||
}
|
||
|
||
.basic-info-table th {
|
||
background-color: transparent;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.basic-info-table td {
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
color: #222;
|
||
}
|
||
|
||
/* 其他表格样式保持不变 */
|
||
.info-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.info-table th,
|
||
.info-table td {
|
||
padding: 15px;
|
||
text-align: center;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.info-table th {
|
||
background-color: #f5f7fa;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.info-table td {
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
color: #222;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 25px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.info-item {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
color: #555;
|
||
margin-bottom: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: #222;
|
||
padding: 8px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-card {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
padding: 15px;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-title {
|
||
font-size: 1rem;
|
||
color: #555;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
color: #777;
|
||
font-size: 0.9rem;
|
||
border-top: 1px solid #eee;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
/* 内部组件样式 */
|
||
.component-item {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.component-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.component-name {
|
||
width: 150px;
|
||
font-weight: 600;
|
||
color: #444;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.component-detail {
|
||
flex: 1;
|
||
color: #666;
|
||
}
|
||
|
||
.quality-item {
|
||
margin-bottom: 15px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.quality-header {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.quality-title {
|
||
font-size: 1.1rem;
|
||
color: #333;
|
||
width: 120px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.quality-display {
|
||
flex: 1;
|
||
padding: 6px 12px;
|
||
min-height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.edit-btn {
|
||
padding: 6px 12px;
|
||
background-color: #409eff;
|
||
border: 1px solid #409eff;
|
||
border-radius: 4px;
|
||
color: white;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.edit-input {
|
||
flex: 1;
|
||
padding: 6px 12px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background-color: #67c23a;
|
||
border-color: #67c23a;
|
||
}
|
||
|
||
|
||
/* 文件列表样式 */
|
||
.file-list {
|
||
margin-top: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.file-item a {
|
||
color: #409eff;
|
||
text-decoration: none;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.file-item a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.file-icon {
|
||
color: #409eff;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
|
||
/* 文件列表样式 */
|
||
.file-list {
|
||
margin-top: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.file-item a {
|
||
color: #409eff;
|
||
text-decoration: none;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.file-item a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.file-icon {
|
||
color: #409eff;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* 文件列样式 */
|
||
.file-column {
|
||
text-align: left;
|
||
}
|
||
|
||
.upload-button {
|
||
background-color: #409eff;
|
||
border: 1px solid #409eff;
|
||
border-radius: 4px;
|
||
color: white;
|
||
padding: 6px 12px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.upload-button:hover {
|
||
background-color: #66b1ff;
|
||
border-color: #66b1ff;
|
||
}
|
||
|
||
.upload-button:disabled {
|
||
background-color: #a0cfff;
|
||
border-color: #a0cfff;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.info-table th,
|
||
.info-table td {
|
||
padding: 10px 5px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.info-table td {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.component-item {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.component-name {
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<script src="./scripts/tool_detail.js"></script>
|
||
<script src="scripts/axiosmin.js"></script>
|
||
<script src="./scripts/polyfill.js"></script>
|
||
<script src="./scripts/vue.min.js"></script>
|
||
<script src="./scripts/vue-router.js"></script>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>仪器汇总</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 600;">
|
||
仪器名称： <span id="seriesNum"></span>
|
||
</div>
|
||
<div class="info-section">
|
||
<h2 class="info-label">基本信息</h2>
|
||
<div style="padding: 0 20px;">
|
||
<table class="basic-info-table">
|
||
<tbody>
|
||
<tr>
|
||
<th>出厂日期</th>
|
||
<td></td>
|
||
<th>入库日期</th>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>累计工作时间</td>
|
||
<td></td>
|
||
<td>当次工作时间</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>固件版本号</td>
|
||
<td colspan="3"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="info-section">
|
||
<h2 class="info-label">质检记录</h2>
|
||
<div style="padding: 15px 0;">
|
||
<!-- 生产过程记录 -->
|
||
<div class="quality-item">
|
||
<div class="quality-header">
|
||
<div class="quality-title">生产过程记录</div>
|
||
<div class="quality-display" id="processRecordDisplay"></div>
|
||
<button id="editProcessRecord" class="edit-btn">编辑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 生产过程检验 -->
|
||
<div class="quality-item">
|
||
<div class="quality-header">
|
||
<div class="quality-title">生产过程检验</div>
|
||
<div class="quality-display" id="processInspectionDisplay"></div>
|
||
<button id="editProcessInspection" class="edit-btn">编辑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成品检验记录 -->
|
||
<div class="quality-item">
|
||
<div class="quality-header">
|
||
<div class="quality-title">成品检验记录</div>
|
||
<div class="quality-display" id="finalInspectionDisplay"></div>
|
||
<button id="editFinalInspection" class="edit-btn">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-section">
|
||
<h2 class="info-label">仪器施工汇总</h2>
|
||
<table class="info-table">
|
||
<thead>
|
||
<tr>
|
||
<th>井名</th>
|
||
<th>入井工作情况</th>
|
||
<th>施工井段</th>
|
||
<th>最高工作温度</th>
|
||
<th>最高承压</th>
|
||
<th>仪器工作情况</th>
|
||
<th>上井人</th>
|
||
<th>文件</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="wellDataBody">
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h2 class="info-label">维保情况</h2>
|
||
<button id="bt_add" style="margin-left: 5px; padding: 8px 16px; background-color: #409eff; border: 1px solid #409eff; border-radius: 4px; color: white; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center;" onclick="addMaintenanceRecord()">
|
||
<i style="margin-right: 5px;">
|
||
<svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor">
|
||
<path d="M512 128C304.3 128 128 304.3 128 512s176.3 384 384 384 384-176.3 384-384S719.7 128 512 128z m0 64c176.7 0 320 143.3 320 320s-143.3 320-320 320S192 688.7 192 512 335.3 192 512 192z m48 304h-96v96h-96v-96H320v-96h96v-96h96v96h96v96z"></path>
|
||
</svg>
|
||
</i>
|
||
新增维保记录
|
||
</button>
|
||
</div>
|
||
|
||
<table class="info-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>等级</th>
|
||
<th>维保信息</th>
|
||
<th>维保人</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="maintenanceDataBody">
|
||
<!-- 动态数据将在这里插入 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h2 class="info-label">内部组件</h2>
|
||
|
||
<div class="component-item">
|
||
<div class="component-name">伽马传感器：</div>
|
||
<div class="component-detail">编码 GH2025-001，序列号 SN-GM-0625A</div>
|
||
</div>
|
||
|
||
<div class="component-item">
|
||
<div class="component-name">温度传感器：</div>
|
||
<div class="component-detail">编码 TP2025-002，序列号 SN-TP-0521B</div>
|
||
</div>
|
||
|
||
<div class="component-item">
|
||
<div class="component-name">压力传感器：</div>
|
||
<div class="component-detail">编码 PS2025-003，序列号 SN-PS-0415C</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h2 class="info-label">仪器所属部门</h2>
|
||
|
||
<div class="component-item">
|
||
<div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>版权所有 © 北京六合伟业科技股份有限公司</p>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
// 获取URL参数
|
||
function getUrlParameter(name) {
|
||
name = name.replace(/[\[\]]/g, '\\$&');
|
||
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
|
||
const results = regex.exec(window.location.href);
|
||
if (!results) return null;
|
||
if (!results[2]) return '';
|
||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||
}
|
||
|
||
// 设置序列号
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const seriesNum = getUrlParameter('series');
|
||
if (seriesNum) {
|
||
document.getElementById('seriesNum').textContent = seriesNum;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |