lupeng
/
deesCloud-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改前端页面

This commit is contained in:
lupeng 2025-08-26 12:46:43 +08:00
parent 819ec53de1
commit 1d2bf2042c
8 changed files with 2772 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/vcs.xml
View File

@ -2,5 +2,6 @@
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

2
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,2 @@
{
}

1901
scripts/tool_detail-en.js Normal file
View File

File diff suppressed because it is too large Load Diff

20
scripts/tool_detail.js
View File

@ -1420,12 +1420,12 @@ function upload_file_error(error, file, fileList) {
}
// 提交维保记录函数
function submitMaintenanceRecord() {
function submitMaintenanceRecord() {
// 获取表单数据
const formData = {
series: document.getElementById('seriesInput').value,
instrument_id: document.getElementById('instrumentIdInput').value,
repair_cnt: document.getElementById('repairCntInput').value,
// repair_cnt: document.getElementById('repairCntInput').value,
repair_level: document.getElementById('repairLevelInput').value,
applicanter: document.getElementById('applicanterInput').value,
note: document.getElementById('noteInput').value,
@ -1441,13 +1441,21 @@ function upload_file_error(error, file, fileList) {
...formData
})
.then(function (response) {
console.log('提交成功:', response.data);
closeModal();
// 重新加载维保数据
location.reload();
console.log('/deescloud/postLcm:', response.data);
// 检查返回结果
if (response.data.r === -1) {
alert('您处于离线状态，请重新登录');
} else {
closeModal();
location.reload();
}
})
.catch(function (error) {
console.error('提交失败:', error);
// 错误处理
alert('提交失败，请联系管理员');
});
}

196
scripts/tools-en.js
View File

@ -41,7 +41,7 @@
</el-table-column>
<el-table-column
label="Operation"
width="160">
width="260">
<template slot-scope="scope">
<div style="flex: 1;display: inline-flex;">
<div v-if="!scope.row.tsw">
@ -49,6 +49,7 @@
</div>
<el-button @click="show_pdf(scope.row)" type="text" size="medium">Report Detail</el-button>
<el-button @click="export_pdf(scope.row)" type="text" size="medium">Export</el-button>
<el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">Export(Testing)</el-button>
</div>
@ -69,51 +70,118 @@
</el-pagination>
</div>
<el-dialog
title="Instrument Status Information"
:visible.sync="pdf_visible"
:lock-scroll ="false"
:append-to-body="true"
width="60%">
<div style="height: 450px;overflow: auto;">
<div v-if="tool_warning_data.length>0">
<div>Risk warning: </div>
<div v-for="item in tool_warning_data">
<div style="display: flex;padding-top: 10px;">
<div style="width: 100%;">
{{item.time}}
&nbsp;{{item.err_level}}:
&nbsp;{{item.context}}
</div>
</div>
</div>
</div>
<div v-if="tool_warning_data.length==0">
<div>The instruments in this well are working normally.</div>
</div>
<el-divider></el-divider>
</div>
</el-dialog>
<!-- 仪器状态弹窗 -->
<el-dialog
title="Instrument Status Message"
:visible.sync="pdf_visible"
:lock-scroll="false"
:append-to-body="true"
width="60%"
>
<div style="height: 450px; overflow: auto;">
<div v-if="tool_warning_data.length > 0">
<div>Risk warning:</div>
<div v-for="item in tool_warning_data" :key="item.id">
<div style="display: flex; padding-top: 10px; align-items: center;">
<div
style="width: 100%;"
:style="{ color: item.flag === 1 ? 'red' : 'inherit' }"
>
<span style="font-weight: 500;">
<template v-if="item.flag === 0">
{{ item.series_num }} {{ item.instrument_id }} | Instrument Normal
</template>
<template v-else>
{{ item.time }} | {{ item.series_num }} |
</template>
</span>
<template v-if="item.flag === 1">
<span style="margin-left: 6px;">
{{ item.err_level }} | {{ item.context }}
</span>
</template>
<el-button
v-if="item.series_num"
@click="openDetail(item)"
type="text"
size="medium"
style="margin-left: 12px; padding: 0 4px;"
>
Details
</el-button>
</div>
</div>
</div>
</div>
<div v-if="tool_warning_data.length == 0">
<div>The instruments in this well are working normally</div>
</div>
<el-divider></el-divider>
</div>
</el-dialog>
// <el-dialog
// title="Instrument Status Information"
// :visible.sync="pdf_visible"
// :lock-scroll ="false"
// :append-to-body="true"
// width="60%">
// <div style="height: 450px;overflow: auto;">
// <div v-if="tool_warning_data.length>0">
// <div>Risk warning: </div>
// <div v-for="item in tool_warning_data">
// <div style="display: flex;padding-top: 10px;">
// <div style="width: 100%;">
// {{item.time}}
// &nbsp;{{item.err_level}}:
// &nbsp;{{item.context}}
// </div>
// </div>
// </div>
// </div>
// <div v-if="tool_warning_data.length==0">
// <div>No instrument information has been uploaded to this well.</div>
// </div>
// <el-divider></el-divider>
// </div>
// </el-dialog>
</div>
`,
data(){
// 获取当前屏幕的分辨率
let screenW = window.screen.width;
let screenW = window.screen.width;
let screenH = window.innerHeight;
console.log("screen width:",screenW);
console.log("screen height:",screenH);
return {
tHeight:screenH-192,
console.log("screen width:", screenW);
console.log("screen height:", screenH);
return {
tHeight: screenH - 192,
tableData: Array(0),
input:'',
input: '',
currentPage: 1,
pagesize:50,
recordTotal:0,
pdf_visible:false,
tool_warning_data:{},
checked:false,
}
pagesize: 50,
recordTotal: 0,
pdf_visible: false,
tool_warning_data: [],
checked: false,
currentWellName: '' // 新增：存储当前查看的井名
};
},
mounted() {
var _this = this;
@ -151,14 +219,35 @@
var fileid = response.data.fileId;
var downUrl = 'file/'+fileid;
downloadUrl(row.wellNameSource+"-Instrument status report.pdf",downUrl);
downloadUrl(row.wellNameSource+"_Instrument status report.pdf",downUrl);
})
.catch(function (error) {
console.log(error);
});
},
export_mess_pdf(row) {
var _this = this;
axios.post('deescloud/get_tool_mess_pdf_en', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
wellname: row.wellNameSource
})
.then(function (response) {
console.log(response.data);
var fileid = response.data.fileId;
var downUrl = 'file/' + fileid;
console.log("downUrl-----------",downUrl);
console.log("wellNameSource-----------",row.wellNameSource);
downloadUrl(row.wellNameSource + "_Instrument status report.pdf", downUrl);
})
.catch(function (error) {
console.log(error);
});
},
show_pdf(row){
let _this= this;
this.currentWellName = row.wellNameSource;
axios.post('/deescloud/get_tool_warning_en', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
@ -256,6 +345,33 @@
},
// 新增：打开详情页方法
openDetail(item) {
// 使用当前井名和预警项ID构建详情页URL
const wellName = this.currentWellName; // 不要预先编码
// 使用预警ID或时间戳作为唯一标识
// 构建基础URL，参数留待URLSearchParams处理
const detailUrl = 'tool_detail-en.html';
// 使用URLSearchParams自动处理编码
const params = new URLSearchParams({
well: wellName,
id: item.opuser_uuid,
name : item.name,
series: item.series_num,
instrument: item.instrument_id,
flag:item.flag,
content: item.context || ''
});
// 完整URL
const fullUrl = `${detailUrl}?${params.toString()}`;
// 在新标签页打开详情页
window.open(fullUrl, '_blank');
}
}
}

14
scripts/tools.js
View File

@ -22,7 +22,7 @@ var toolscomponent = {
<el-table-column prop="welltime" label="建井时间" :width="170"></el-table-column>
<el-table-column prop="welloperator" label="操作用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="upload_user" label="上传用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="操作" width="240">
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<div style="flex: 1; display: inline-flex;">
<div v-if="!scope.row.tsw">
@ -32,7 +32,7 @@ var toolscomponent = {
</div>
<el-button @click="show_pdf(scope.row)" type="text" size="medium">报告明细</el-button>
<el-button @click="export_pdf(scope.row)" type="text" size="medium">导出</el-button>
<el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">仪器报告导出</el-button>
<el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">导出(测试中)</el-button>
</div>
</template>
</el-table-column>
@ -63,7 +63,6 @@ var toolscomponent = {
width="60%"
>
<div style="height: 450px; overflow: auto;">
<div v-if="tool_warning_data.length > 0">
<div>风险预警:</div>
@ -78,7 +77,7 @@ var toolscomponent = {
>
<span style="font-weight: 500;">
<template v-if="item.flag === 0">
{{ item.series_num }} {{ item.instrument_id }} | 仪器正常
{{ item.series_num }} - {{ item.instrument_id }} | 仪器正常
</template>
<template v-else>
@ -109,7 +108,7 @@ var toolscomponent = {
</div>
<div v-if="tool_warning_data.length == 0">
<div>本口井仪器工作正常。</div>
<div>本口井未上传仪器信息</div>
</div>
<el-divider></el-divider>
</div>
@ -117,7 +116,6 @@ var toolscomponent = {
</div>
`,
data() {
// 获取当前屏幕的分辨率
let screenW = window.screen.width;
let screenH = window.innerHeight;
console.log("screen width:", screenW);
@ -171,7 +169,7 @@ var toolscomponent = {
var downUrl = 'file/' + fileid;
console.log("downUrl-----------",downUrl);
console.log("wellNameSource-----------",row.wellNameSource);
downloadUrl(row.wellNameSource + "-仪器状态报告.pdf", downUrl);
downloadUrl(row.wellNameSource + "_仪器状态报告.pdf", downUrl);
})
.catch(function (error) {
console.log(error);
@ -192,7 +190,7 @@ var toolscomponent = {
var downUrl = 'file/' + fileid;
console.log("downUrl-----------",downUrl);
console.log("wellNameSource-----------",row.wellNameSource);
downloadUrl(row.wellNameSource + "-仪器报告.pdf", downUrl);
downloadUrl(row.wellNameSource + "_仪器报告.pdf", downUrl);
})
.catch(function (error) {
console.log(error);

581
tool_detail-en.html Normal file
View File

@ -0,0 +1,581 @@
<!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;
}
@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-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>Working hours:</td>
<td></td>
<td>This working hours:</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" style="width: 10;">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">Persion</th>
<th class="table-cell-wrap">File</th>
<th class="fixed-width-260 table-cell-wrap">Url</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-140 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">Url</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');
if (seriesNum) {
document.getElementById('seriesNum').textContent = seriesNum;
}
});
</script>
</body>
</html>

177
tool_detail.html
View File

@ -54,6 +54,10 @@
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.file-item a {
font-size: 14px;
text-decoration: none;
}
/* 基本信息无边框表格样式 */
.basic-info-table {
@ -68,18 +72,13 @@
.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;
font-weight: 600;
color: #333;
}
.basic-info-table td {
font-size: 1.1rem;
font-weight: 500;
color: #222;
}
/* 其他表格样式保持不变 */
@ -87,6 +86,7 @@
width: 100%;
border-collapse: collapse;
margin-top: 20px;
table-layout: fixed;
}
.info-table th,
@ -98,7 +98,7 @@
.info-table th {
background-color: #f5f7fa;
font-weight: 600;
font-weight: 400;
color: #333;
}
@ -108,6 +108,38 @@
color: #222;
}
/* 固定宽度列样式 */
.fixed-width-260 {
width: 260px;
}
.fixed-width-160 {
width: 160px;
}
.fixed-width-180 {
width: 180px;
}
.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;
@ -122,15 +154,14 @@
.info-label {
font-size: 1.1rem;
font-weight: 500;
color: #555;
color: #333;
margin-bottom: 8px;
text-align: center;
}
.info-value {
font-size: 1.4rem;
font-weight: 600;
color: #222;
font-size: 1.1rem;
color: #333;
padding: 8px 0;
text-align: center;
}
@ -177,7 +208,7 @@
.component-name {
width: 150px;
font-weight: 600;
font-weight: 400;
color: #444;
padding-right: 10px;
}
@ -202,7 +233,10 @@
.quality-title {
font-size: 1.1rem;
color: #333;
width: 120px;
font-weight: 500;
width: auto;
padding-right: 10px;
margin-left: 40px;
flex-shrink: 0;
}
@ -321,7 +355,17 @@
border-color: #a0cfff;
cursor: not-allowed;
}
.fixed-width-40 {
width: 50px;
}
.fixed-width-80 {
width: 80px;
}
.fixed-width-180 {
width: 180px;
}
@media (max-width: 768px) {
.container {
padding: 20px;
@ -358,14 +402,15 @@
<script src="./scripts/vue.min.js"></script>
<script src="./scripts/vue-router.js"></script>
<body>
<div class="container">
<header>
<h1>仪器汇总</h1>
<h1></h1>
</header>
<div class="content">
<div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 600;">
<div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 400;">
仪器名称： <span id="seriesNum"></span>
</div>
<div class="info-section">
@ -374,19 +419,19 @@
<table class="basic-info-table">
<tbody>
<tr>
<th>出厂日期</th>
<th>出厂日期：</th>
<td></td>
<th>入库日期</th>
<th>入库日期：</th>
<td></td>
</tr>
<tr>
<td>累计工作时间</td>
<td>累计工作时间：</td>
<td></td>
<td>当次工作时间</td>
<td>当次累计工作时间：</td>
<td></td>
</tr>
<tr>
<td>固件版本号</td>
<td>固件版本号：</td>
<td colspan="3"></td>
</tr>
</tbody>
@ -394,32 +439,32 @@
</div>
</div>
<div class="info-section">
<h2 class="info-label">质检记录</h2>
<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-title">生产过程记录：</div>
<div class="quality-display" id="processRecordDisplay"></div>
<button id="editProcessRecord" class="edit-btn">编辑</button>
<button id="editProcessRecord" class="edit-btn" style="margin-right: 120px;">编辑</button>
</div>
</div>
<!-- 生产过程检验 -->
<div class="quality-item">
<div class="quality-header">
<div class="quality-title">生产过程检验</div>
<div class="quality-title">生产过程检验：</div>
<div class="quality-display" id="processInspectionDisplay"></div>
<button id="editProcessInspection" class="edit-btn">编辑</button>
<button id="editProcessInspection" class="edit-btn" style="margin-right: 120px;">编辑</button>
</div>
</div>
<!-- 成品检验记录 -->
<div class="quality-item">
<div class="quality-header">
<div class="quality-title">成品检验记录</div>
<div class="quality-title">成品检验记录：</div>
<div class="quality-display" id="finalInspectionDisplay"></div>
<button id="editFinalInspection" class="edit-btn">编辑</button>
<button id="editFinalInspection" class="edit-btn" style="margin-right: 120px;">编辑</button>
</div>
</div>
</div>
@ -429,14 +474,15 @@
<table class="info-table">
<thead>
<tr>
<th>井名</th>
<th>入井工作情况</th>
<th>施工井段</th>
<th>最高工作温度</th>
<th>最高承压</th>
<th>仪器工作情况</th>
<th>上井人</th>
<th>文件</th>
<th class="fixed-width-80 table-cell-wrap">井名</th>
<th class="fixed-width-100 table-cell-wrap">入井工作情况</th>
<th class="fixed-width-100 table-cell-wrap">施工井段</th>
<th class="fixed-width-80 table-cell-wrap">最高工作温度</th>
<th class="fixed-width-80 table-cell-wrap">最高承压</th>
<th class="fixed-width-80 table-cell-wrap">仪器工作情况</th>
<th class="fixed-width-100 table-cell-wrap">上井人</th>
<th class="fixed-width-160 table-cell-wrap">文件</th>
<th class="fixed-width-260 table-cell-wrap">链接</th>
</tr>
</thead>
<tbody id="wellDataBody">
@ -447,28 +493,35 @@
<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 style="flex: 1;"></div>
<h2 class="info-label" style="flex: 1; text-align: center;">维保情况</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>
新增维保记录
</button>
</div>
</div>
<table class="info-table">
<thead>
<tr>
<th>时间</th>
<th>等级</th>
<th>维保信息</th>
<th>维保人</th>
<th class="fixed-width-100 table-cell-wrap">时间</th>
<th class="fixed-width-40 table-cell-wrap">等级</th>
<th class="fixed-width-180 table-cell-wrap">维保信息</th>
<th class="fixed-width-80 table-cell-wrap">维保人</th>
<th class="fixed-width-160 table-cell-wrap">文件</th>
<th class="fixed-width-260 table-cell-wrap">链接</th>
</tr>
</thead>
<tbody id="maintenanceDataBody">
<!-- 动态数据将在这里插入 -->
<tr>
<td colspan="6" style="text-align: center;">暂无数据</td>
</tr>
</tbody>
</table>
</div>
@ -476,30 +529,18 @@
<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="no-data">暂无数据</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>
<h2 class="info-label">仪器所属部门</h2>
<div class="component-item">
<div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
<div class="component-item">
<div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
</div>
</div>
</div>
</div>
<footer>
<p>版权所有 © 北京六合伟业科技股份有限公司</p>