554 lines
20 KiB
HTML
554 lines
20 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>
|
||
<script src="./scripts/polyfill.js"></script>
|
||
<script src="./scripts/vue.min.js"></script>
|
||
<script src="./scripts/vue-router.js"></script>
|
||
<script src="./scripts/elementindex.js"></script>
|
||
<link rel="stylesheet" href="./scripts/elementindex.css">
|
||
<script src="scripts/axiosmin.js"></script>
|
||
<script src="scripts/checkuser.js"></script>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background-color: rgb(18,25,34);
|
||
margin: 0;
|
||
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
|
||
color: rgb(255,255,0);
|
||
}
|
||
|
||
.homeWrap {
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #3C8DBC;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: bolder;
|
||
color: rgb(255,255,0);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 16px;
|
||
color: rgb(255,255,200);
|
||
}
|
||
|
||
.instrument-info {
|
||
background-color: #fdf6ec;
|
||
color: #e6a23c;
|
||
padding: 12px 20px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.section-card {
|
||
margin-bottom: 20px;
|
||
border: 1px solid #3C8DBC;
|
||
border-radius: 4px;
|
||
background: rgba(30, 40, 50, 0.8);
|
||
}
|
||
|
||
.section-header {
|
||
background-color: #00a2e8;
|
||
padding: 12px 20px;
|
||
color: rgb(255,255,0);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid #3C8DBC;
|
||
}
|
||
|
||
.section-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
/* 表格样式 - 与lcm.html完全一致 */
|
||
.el-table {
|
||
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
|
||
background-color: rgb(18,25,34);
|
||
}
|
||
|
||
.el-table th {
|
||
background-color: #00a2e8;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.el-table th>.cell {
|
||
color: rgb(255,255,0);
|
||
text-align: center;
|
||
font-weight: 600;
|
||
padding: 0;
|
||
}
|
||
|
||
.el-table td {
|
||
background-color: rgb(18,25,34);
|
||
border-right: 1px solid #EBEEF5;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.el-table td>.cell {
|
||
color: rgb(255,255,0);
|
||
text-align: center;
|
||
font-size: 13px;
|
||
padding: 3px 0;
|
||
}
|
||
|
||
.el-table .warning-row {
|
||
color: #ff0000;
|
||
}
|
||
|
||
/* 分页样式 */
|
||
.pagination-container {
|
||
margin-top: 15px;
|
||
background-color: #ECF5FF;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.quality-item {
|
||
margin-bottom: 15px;
|
||
padding: 12px;
|
||
border: 1px solid #3C8DBC;
|
||
border-radius: 4px;
|
||
background: rgba(40, 50, 60, 0.6);
|
||
}
|
||
|
||
.quality-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.quality-title {
|
||
color: rgb(255,255,200);
|
||
font-weight: 500;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.quality-display {
|
||
flex: 1;
|
||
color: rgb(255,255,0);
|
||
padding: 6px 12px;
|
||
background: rgba(30, 40, 50, 0.8);
|
||
border-radius: 3px;
|
||
min-height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.no-data {
|
||
text-align: center;
|
||
color: rgb(255,255,200);
|
||
padding: 30px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.component-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.component-item {
|
||
display: flex;
|
||
padding: 10px 15px;
|
||
border: 1px solid #3C8DBC;
|
||
border-radius: 4px;
|
||
background: rgba(40, 50, 60, 0.6);
|
||
}
|
||
|
||
.component-name {
|
||
color: rgb(255,255,200);
|
||
font-weight: 500;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.component-detail {
|
||
color: rgb(255,255,0);
|
||
flex: 1;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.file-item a {
|
||
color: #66b1ff;
|
||
text-decoration: none;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.file-item a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.homeWrap {
|
||
padding: 10px;
|
||
}
|
||
|
||
.quality-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.quality-title {
|
||
min-width: auto;
|
||
}
|
||
|
||
.action-buttons {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" class="homeWrap">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<div class="page-title">DEES 测井作业管理云系统 V1.0.1</div>
|
||
<div class="page-subtitle">仪器信息汇总</div>
|
||
</div>
|
||
|
||
<!-- 仪器基本信息 -->
|
||
<div class="instrument-info">
|
||
仪器名称： <span id="seriesNum"></span>
|
||
</div>
|
||
|
||
<el-container style="gap: 20px;">
|
||
<!-- 左侧区域 -->
|
||
<el-aside style="width: 45%;">
|
||
<!-- 基本信息 -->
|
||
<div class="section-card">
|
||
<div class="section-header">基本信息</div>
|
||
<div class="section-content">
|
||
<div style="padding: 0 15px;">
|
||
<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>
|
||
|
||
<!-- 产品质检记录 -->
|
||
<div class="section-card">
|
||
<div class="section-header">产品质检记录</div>
|
||
<div class="section-content">
|
||
<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" style="margin-right: 120px;">编辑</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" style="margin-right: 120px;">编辑</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" style="margin-right: 120px;">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内部组件 -->
|
||
<div class="section-card">
|
||
<div class="section-header">内部组件</div>
|
||
<div class="section-content">
|
||
<div class="no-data">暂无数据</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 仪器所属部门 -->
|
||
<div class="section-card">
|
||
<div class="section-header">仪器所属部门</div>
|
||
<div class="section-content">
|
||
<div class="component-item">
|
||
<div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-aside>
|
||
|
||
<!-- 右侧区域 -->
|
||
<el-main style="width: 55%; padding: 0; margin: 0;">
|
||
<!-- 仪器施工汇总 -->
|
||
<div class="section-card">
|
||
<div class="section-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||
<span>仪器施工汇总</span>
|
||
</div>
|
||
<div class="section-content">
|
||
<el-table
|
||
style="background-color: #121922;"
|
||
:data="tableData"
|
||
tooltip-effect="dark"
|
||
style="width: 100%"
|
||
:height="tHeight"
|
||
:cell-style="{background:'#121922'}"
|
||
border>
|
||
<el-table-column
|
||
prop="wellname"
|
||
label="井名"
|
||
width="80"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="workStatus"
|
||
label="入井工作情况"
|
||
width="100"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="workSection"
|
||
label="施工井段"
|
||
width="100"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxTemp"
|
||
label="最高工作温度"
|
||
width="80">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxPressure"
|
||
label="最高承压"
|
||
width="80">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="instrumentStatus"
|
||
label="仪器工作情况"
|
||
width="80">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="worker"
|
||
label="上井人"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="files"
|
||
label="文件"
|
||
width="160"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="links"
|
||
label="链接"
|
||
width="260"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[50,100, 200, 300]"
|
||
:page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="recordTotal"
|
||
style="background-color: #ECF5FF;">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 维保情况 -->
|
||
<div class="section-card">
|
||
<div class="section-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||
<span>维保情况</span>
|
||
<el-button id="bt_add" style="margin-left: 5px;" plain type="primary" icon="el-icon-circle-plus-outline" @click="addMaintenanceRecord()">新增维保记录</el-button>
|
||
</div>
|
||
<div class="section-content">
|
||
<el-table
|
||
style="background-color: #121922;"
|
||
:data="tableData"
|
||
tooltip-effect="dark"
|
||
style="width: 100%"
|
||
:height="tHeight"
|
||
:cell-style="{background:'#121922'}"
|
||
border>
|
||
<el-table-column
|
||
prop="time"
|
||
label="时间"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="level"
|
||
label="等级"
|
||
width="40">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="info"
|
||
label="维保信息"
|
||
width="180"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maintainer"
|
||
label="维保人"
|
||
width="80">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="files"
|
||
label="文件"
|
||
width="160"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="links"
|
||
label="链接"
|
||
width="260"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[50,100, 200, 300]"
|
||
:page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="recordTotal"
|
||
style="background-color: #ECF5FF;">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
|
||
<!-- 底部版权 -->
|
||
<div style="text-align: center; padding: 20px 0; color: rgb(255,255,200); font-size: 12px; border-top: 1px solid #3C8DBC; margin-top: 20px;">
|
||
<span>版权所有 © 北京六合伟业科技股份有限公司</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
// 仅保留必要的空数据结构
|
||
tableData: [],
|
||
currentPage: 1,
|
||
pagesize: 50,
|
||
recordTotal: 0,
|
||
tHeight: 400
|
||
}
|
||
},
|
||
mounted() {
|
||
// 仅保留原有的设置仪器名称的逻辑
|
||
const seriesNum = this.getUrlParameter('series');
|
||
const instrument = this.getUrlParameter('instrument');
|
||
if (seriesNum) {
|
||
document.getElementById('seriesNum').textContent = seriesNum + '-' + instrument;
|
||
}
|
||
|
||
// 设置表格高度
|
||
this.calculateTableHeight();
|
||
window.addEventListener('resize', this.calculateTableHeight);
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.calculateTableHeight);
|
||
},
|
||
methods: {
|
||
// 获取URL参数
|
||
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, ' '));
|
||
},
|
||
|
||
// 计算表格高度
|
||
calculateTableHeight() {
|
||
const windowHeight = window.innerHeight;
|
||
this.tHeight = windowHeight - 400;
|
||
},
|
||
|
||
// 分页处理 - 空方法，由外部JS文件实现
|
||
handleSizeChange(val) {
|
||
// 由外部JS文件实现
|
||
},
|
||
|
||
handleCurrentChange(val) {
|
||
// 由外部JS文件实现
|
||
},
|
||
|
||
// 新增维保记录 - 空方法，由外部JS文件实现
|
||
addMaintenanceRecord() {
|
||
// 由外部JS文件实现
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- 原有的脚本引入 -->
|
||
<script src="./scripts/tool_detail.js"></script>
|
||
</body>
|
||
</html> |