610 lines
17 KiB
HTML
610 lines
17 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>Summary of Instrument Information</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;
|
|
}
|
|
.file-item a {
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 基本信息无边框表格样式 */
|
|
.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;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.basic-info-table th {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 其他表格样式保持不变 */
|
|
.info-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.info-table th,
|
|
.info-table td {
|
|
padding: 15px;
|
|
text-align: center;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.info-table th {
|
|
background-color: #f5f7fa;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.info-table td {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: #222;
|
|
}
|
|
|
|
/* 固定宽度列样式 */
|
|
.fixed-width-260 {
|
|
width: 200px;
|
|
}
|
|
|
|
.fixed-width-160 {
|
|
width: 160px;
|
|
}
|
|
|
|
.fixed-width-180 {
|
|
width: 180px;
|
|
}
|
|
|
|
.fixed-width-90 {
|
|
width: 90px;
|
|
}
|
|
|
|
.fixed-width-100 {
|
|
width: 100px;
|
|
}
|
|
|
|
.fixed-width-80 {
|
|
width: 80px;
|
|
}
|
|
|
|
.fixed-width-40 {
|
|
width: 40px;
|
|
}
|
|
|
|
/* 表格内容换行样式 */
|
|
.table-cell-wrap {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
}
|
|
|
|
.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: #333;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 1.1rem;
|
|
color: #333;
|
|
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: 400;
|
|
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;
|
|
font-weight: 500;
|
|
width: auto;
|
|
padding-right: 10px;
|
|
margin-left: 40px;
|
|
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;
|
|
}
|
|
.fixed-width-40 {
|
|
width: 50px;
|
|
}
|
|
|
|
.fixed-width-80 {
|
|
width: 80px;
|
|
}
|
|
.fixed-width-140 {
|
|
width: 140px;
|
|
}
|
|
.fixed-width-130 {
|
|
width: 130px;
|
|
}
|
|
.fixed-width-180 {
|
|
width: 180px;
|
|
}
|
|
|
|
.link-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.link-display, .link-input {
|
|
flex: 1;
|
|
min-width: 0; /* 允许输入框收缩 */
|
|
white-space: normal; /* 允许换行 */
|
|
word-wrap: break-word; /* 长单词换行 */
|
|
}
|
|
|
|
.edit-link-btn, .confirm-link-btn {
|
|
flex-shrink: 0; /* 防止按钮被压缩 */
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* 当输入框显示时，使用不同的布局 */
|
|
.link-input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.confirm-link-btn {
|
|
margin-left: 0;
|
|
}
|
|
@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/checkuser.js"></script>
|
|
<script src="./scripts/tool_detail-en.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: 400;">
|
|
Instrument Name: <span id="seriesNum"></span>
|
|
</div>
|
|
<div class="info-section">
|
|
<h2 class="info-label">Basic Information</h2>
|
|
<div style="padding: 0 20px;">
|
|
<table class="basic-info-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Date Of Manufacture:</th>
|
|
<td></td>
|
|
<th>Date Of Warehousing:</th>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Total Working Time:</td>
|
|
<td></td>
|
|
<td>Current Working Time:</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Firmware Version:</td>
|
|
<td colspan="3"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="info-section">
|
|
<h2 class="info-label">Product Quality Inspection Record</h2>
|
|
<div style="padding: 15px 0;">
|
|
<!-- 生产过程记录 -->
|
|
<div class="quality-item">
|
|
<div class="quality-header">
|
|
<div class="quality-title">Production Process Record:</div>
|
|
<div class="quality-display" id="processRecordDisplay"></div>
|
|
<button id="editProcessRecord" class="edit-btn" style="margin-right: 120px;">Redact</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 生产过程检验 -->
|
|
<div class="quality-item">
|
|
<div class="quality-header">
|
|
<div class="quality-title">Production Process Inspection:</div>
|
|
<div class="quality-display" id="processInspectionDisplay"></div>
|
|
<button id="editProcessInspection" class="edit-btn" style="margin-right: 120px;">Redact</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成品检验记录 -->
|
|
<div class="quality-item">
|
|
<div class="quality-header">
|
|
<div class="quality-title">Final Inspection Display:</div>
|
|
<div class="quality-display" id="finalInspectionDisplay"></div>
|
|
<button id="editFinalInspection" class="edit-btn" style="margin-right: 120px;">Redact</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-section">
|
|
<h2 class="info-label">Summary Of Instrument Construction</h2>
|
|
<table class="info-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="table-cell-wrap">Well Name</th>
|
|
<th class="table-cell-wrap">Well Work Situation</th>
|
|
<th class="fixed-width-130 table-cell-wrap">Well Section</th>
|
|
<th class="table-cell-wrap">Max Temp</th>
|
|
<th class="fixed-width-130 table-cell-wrap">Max Pressure</th>
|
|
<th class="fixed-width-80 table-cell-wrap">Status</th>
|
|
<th class="table-cell-wrap">Person</th>
|
|
<th class="table-cell-wrap">File</th>
|
|
<th class="fixed-width-180 table-cell-wrap">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="wellDataBody">
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="flex: 1;"></div>
|
|
<h2 class="info-label" style="flex: 1; text-align: center;">Maintenance And Repair Situation</h2>
|
|
<div style="flex: 1; display: flex; justify-content: flex-end;">
|
|
<button id="bt_add" style="margin-left: 5px; padding: 8px 16px; background-color: #67c23a; border: 1px solid #67c23a; 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>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="info-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="fixed-width-100 table-cell-wrap">Time</th>
|
|
<th class="fixed-width-40 table-cell-wrap">Level</th>
|
|
<th class="fixed-width-160 table-cell-wrap">Maintenance Info</th>
|
|
<th class="fixed-width-90 table-cell-wrap">Maintenance Person</th>
|
|
<th class="fixed-width-160 table-cell-wrap">File</th>
|
|
<th class="fixed-width-260 table-cell-wrap">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="maintenanceDataBody">
|
|
<tr>
|
|
<td colspan="6" style="text-align: center;">No Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="info-label">Internal Components</h2>
|
|
|
|
<div class="no-data">No Data</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="info-label">The Department To Which The Instrument Belongs</h2>
|
|
|
|
<div class="component-item">
|
|
<div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">No Data</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>All rights reserved © Beijing Liuhe Weiye Technology Co., LTD</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');
|
|
const instrument = getUrlParameter('instrument');
|
|
if (seriesNum) {
|
|
document.getElementById('seriesNum').textContent = seriesNum + '1'+ instrument;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |