deesCloud-web/scripts/tool_detail.js

982 lines
38 KiB
JavaScript
Raw Permalink Normal View History

2025-08-01 16:50:32 +08:00
// 获取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;
}
});
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', async function() {
const seriesNum = getUrlParameter('series');
const instrumentNum = getUrlParameter('instrument');
const wellName = getUrlParameter('well');
const flag = getUrlParameter('flag');
const content = getUrlParameter('content');
console.log('wellName:', wellName);
if (seriesNum) {
document.getElementById('seriesNum').textContent = seriesNum;
// 调用查询接口
const toolData = await fetchToolData(wellName ,seriesNum , instrumentNum ,flag ,content);
if (toolData) {
console.log('Received tool data:', toolData);
}
}
});
// 查询仪器详细信息
async function fetchToolData(wellName, seriesNum, instrumentNum ,flag ,content) {
console.log("wellName----------", wellName);
console.log("seriesNum----------", seriesNum);
console.log("instrumentNum----------", instrumentNum);
try {
// 添加 await 关键字
const response = await axios.post('/deescloud/getInstrumentMess', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
series: seriesNum,
instrument: instrumentNum,
wellName: wellName,
flag:flag,
content : content
}, {
headers: {
'Content-Type': 'application/json'
}
});
// 检查响应状态
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
//基本信息
renderInstrumentData(response.data);
//上井情况
populateBasicInfo(response.data);
console.log('响应结果:', response.data);
return response.data;
} catch (error) {
console.error('获取仪器数据失败:', error);
// 添加错误提示(可选)
if (typeof this !== 'undefined' && this.$notify) {
this.$notify.error({
title: '数据获取失败',
message: '请检查网络或联系管理员',
duration: 5000
});
} else {
console.error('获取仪器数据失败,请稍后重试');
}
return null;
}
}
//基本信息
function renderInstrumentData(data) {
if (!data) {
console.error("无有效数据");
return;
}
// 1. 更新仪器名称Series + Instrument
const instrumentName = `${data.series || ""} - ${data.instrument || ""}`;
document.getElementById("seriesNum").textContent = instrumentName;
// 2. 格式化出厂日期(去掉 "T00:00:00Z"
const formattedTime = data.time ? data.time.split('T')[0] : "";
document.querySelector(".basic-info-table tbody tr:nth-child(1) td:nth-child(2)").textContent =
formattedTime;
// 3. 格式化入库日期
const formattedHouseDate = data.houseDate ? data.houseDate.split('T')[0] : "";
document.querySelector(".basic-info-table tbody tr:nth-child(1) td:nth-child(4)").textContent =
formattedHouseDate;
// 4. 更新累计工作时间workTime
document.querySelector(".basic-info-table tbody tr:nth-child(2) td:nth-child(2)").textContent =
`${data.workTime || "0"} 小时`;
// 5. 更新当次工作时间workTimes
document.querySelector(".basic-info-table tbody tr:nth-child(2) td:nth-child(4)").textContent =
`${data.workTimes || "0"} 小时`;
// 6. 更新固件版本号
document.querySelector(".basic-info-table tbody tr:nth-child(3) td:nth-child(2)").textContent =
data.version || "";
}
//上井情况汇总
function populateBasicInfo(data){
const tbody = document.getElementById('wellDataBody');
if (!tbody) return;
// 清空现有内容
tbody.innerHTML = '';
// 遍历数据并创建表格行
// 井上仪器信息
data.data.forEach(item => {
const row = document.createElement('tr');
// 井名
const wellNameCell = document.createElement('td');
wellNameCell.textContent = item.wellName || '';
// 入井工作情况 (使用sampleField)
const sampleFieldCell = document.createElement('td');
sampleFieldCell.textContent = item.sampleField || '';
// 施工井段 (使用valueInterval)
const valueIntervalCell = document.createElement('td');
valueIntervalCell.textContent = item.valueInterval || '';
// 最高工作温度 (使用globalMax1 + °C)
const globalMax1Cell = document.createElement('td');
globalMax1Cell.textContent = item.globalMax1 ? item.globalMax1 + '°C' : '';
// 最高承压 (使用globalMax2 + MPa)
const globalMax2Cell = document.createElement('td');
globalMax2Cell.textContent = item.globalMax2 ? item.globalMax2 + 'MPa' : '';
// 仪器工作情况 (使用content)
const contentCell = document.createElement('td');
contentCell.textContent = item.content || '';
// 上井人 (使用personnelList)
const personnelListCell = document.createElement('td');
personnelListCell.textContent = item.personnelList || '';
// 文件列(合并了操作和文件)
const fileCell = document.createElement('td');
fileCell.className = 'file-column';
// 上传附件部分
const uploadDiv = document.createElement('div');
const uploadInput = document.createElement('input');
uploadInput.type = 'file';
uploadInput.id = 'upload-' + item.id;
uploadInput.style.display = 'none';
uploadInput.setAttribute('data-id', item.id);
const uploadButton = document.createElement('button');
uploadButton.textContent = '上传附件';
uploadButton.className = 'upload-button'; // 使用统一的按钮样式
uploadButton.onclick = function() {
uploadInput.click();
};
uploadInput.onchange = function(e) {
handleFileUpload(e, item);
};
uploadDiv.appendChild(uploadInput);
uploadDiv.appendChild(uploadButton);
fileCell.appendChild(uploadDiv);
// 文件列表部分
if (item.data && item.data.length > 0) {
const fileListContainer = document.createElement('div');
fileListContainer.className = 'file-list-container';
fileListContainer.style.marginTop = '10px';
const fileListTitle = document.createElement('div');
fileListTitle.textContent = '已上传文件:';
fileListTitle.style.fontSize = '12px';
fileListTitle.style.color = '#666';
fileListTitle.style.marginBottom = '5px';
fileListTitle.style.fontWeight = 'bold';
const fileListDiv = document.createElement('div');
fileListDiv.className = 'file-list';
item.data.forEach(file => {
const fileItemDiv = document.createElement('div');
fileItemDiv.className = 'file-item';
fileItemDiv.style.padding = '3px 0';
// 创建文件图标
const fileIcon = document.createElement('span');
fileIcon.className = 'file-icon';
fileIcon.innerHTML = '📄';
fileIcon.style.fontSize = '14px';
// 创建文件链接
const fileLink = document.createElement('a');
fileLink.href = 'javascript:void(0)';
fileLink.textContent = getFileNameFromPath(file.fileName);
fileLink.onclick = function() {
downloadFile(file.fileName.replace('./upload/', ''));
};
fileLink.style.fontSize = '14px';
fileLink.style.textDecoration = 'none';
fileItemDiv.appendChild(fileIcon);
fileItemDiv.appendChild(fileLink);
fileListDiv.appendChild(fileItemDiv);
});
fileListContainer.appendChild(fileListTitle);
fileListContainer.appendChild(fileListDiv);
fileCell.appendChild(fileListContainer);
}
// 添加单元格到行中
row.appendChild(wellNameCell);
row.appendChild(sampleFieldCell);
row.appendChild(valueIntervalCell);
row.appendChild(globalMax1Cell);
row.appendChild(globalMax2Cell);
row.appendChild(contentCell);
row.appendChild(personnelListCell);
row.appendChild(fileCell); // 合并后的文件列
// 添加行到表格中
tbody.appendChild(row);
});
}
// 从文件路径中提取文件名
function getFileNameFromPath(filePath) {
if (!filePath) return '';
return filePath.split('/').pop();
}
//下载
//下载
function downloadFile(fileName) {
fetch('/deescloud/download_ds_file?id=' + encodeURIComponent(fileName))
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常: ' + response.status);
}
// 从URL中提取文件名如果没有指定则使用传递的文件名
let filename = fileName ? fileName.split('/').pop() : 'downloaded_file';
// 尝试从Content-Disposition头获取文件名如果后端设置了的话
const contentDisposition = response.headers.get('Content-Disposition');
if (contentDisposition) {
const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
if (filenameMatch && filenameMatch[1]) {
filename = filenameMatch[1];
}
}
return response.blob().then(blob => ({ blob, filename }));
})
.then(({ blob, filename }) => {
// 创建下载链接
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('下载文件出错:', error);
alert('文件下载失败: ' + error.message);
});
}
// 添加文件上传处理函数
function handleFileUpload(event, item) {
const file = event.target.files[0];
if (!file) return;
// 调试信息 - 打印整个item对象
console.log('上传数据项:', item);
// 创建FormData对象
const formData = new FormData();
// 添加文件
formData.append('file', file);
// 添加额外参数与Element UI示例中:data="upload_param(scope.row)"一致)
// 确保正确获取item中的id
const id = item.id || '';
const wellName = item.wellName || '';
const opuser = localStorage.getItem("online_user") || '';
const instrument = item.instrument || '';
// 将参数添加到FormData中
formData.append('id', id);
formData.append('wellName', wellName);
formData.append('opuser', opuser);
formData.append('type', "tool_detail");
// 显示上传中提示
const uploadButton = event.target.nextElementSibling;
const originalText = uploadButton.textContent;
uploadButton.textContent = '上传中...';
uploadButton.disabled = true;
// 显示调试信息
console.log('发送的参数:', {
id: id,
wellName: wellName,
opuser: opuser,
instrument: instrument
});
// 发送上传请求
fetch('/deescloud/upload', {
method: 'POST',
body: formData // 使用FormData与Element UI的实现方式一致
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
// 调用成功回调函数模拟Element UI的on-success
if (typeof upload_file_success === 'function') {
upload_file_success(data, file, [data]);
}
// 局部刷新文件列表
refreshFileList(item.id, file);
})
.catch(error => {
console.error('上传失败:', error);
// 调用错误回调函数模拟Element UI的on-error
if (typeof upload_file_error === 'function') {
upload_file_error(error, file, []);
}
alert('文件上传失败: ' + error.message);
})
.finally(() => {
// 恢复按钮状态
uploadButton.textContent = originalText;
uploadButton.disabled = false;
// 清空文件输入框
event.target.value = '';
});
}
// 局部刷新文件列表
function refreshFileList(itemId, uploadedFile) {
// 查找对应行的文件列表容器
const tbody = document.getElementById('wellDataBody');
if (!tbody) return;
// 查找包含该itemId的行
const rows = tbody.querySelectorAll('tr');
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const uploadInput = row.querySelector(`#upload-${itemId}`);
if (uploadInput) {
// 找到对应的文件单元格
const fileCell = row.cells[row.cells.length - 1]; // 最后一个单元格是文件列
if (fileCell) {
// 查找或创建文件列表容器
let fileListContainer = fileCell.querySelector('.file-list-container');
if (!fileListContainer) {
fileListContainer = document.createElement('div');
fileListContainer.className = 'file-list-container';
fileListContainer.style.marginTop = '10px';
const fileListTitle = document.createElement('div');
fileListTitle.textContent = '已上传文件:';
fileListTitle.style.fontSize = '12px';
fileListTitle.style.color = '#666';
fileListTitle.style.marginBottom = '5px';
fileListTitle.style.fontWeight = 'bold';
const fileListDiv = document.createElement('div');
fileListDiv.className = 'file-list';
fileListContainer.appendChild(fileListTitle);
fileListContainer.appendChild(fileListDiv);
fileCell.appendChild(fileListContainer);
}
// 获取文件列表div
const fileListDiv = fileListContainer.querySelector('.file-list');
// 创建新文件项
const fileItemDiv = document.createElement('div');
fileItemDiv.className = 'file-item';
fileItemDiv.style.padding = '3px 0';
// 创建文件图标
const fileIcon = document.createElement('span');
fileIcon.className = 'file-icon';
fileIcon.innerHTML = '📄';
fileIcon.style.fontSize = '14px';
// 创建文件链接
const fileLink = document.createElement('a');
fileLink.href = 'javascript:void(0)';
fileLink.textContent = uploadedFile.name;
// 由于刚上传的文件还没有ID我们暂时使用文件名作为下载参数
fileLink.onclick = function() {
console.log('下载文件:', uploadedFile.name);
downloadFile(uploadedFile.name);
};
fileLink.style.fontSize = '14px';
fileLink.style.textDecoration = 'none';
fileItemDiv.appendChild(fileIcon);
fileItemDiv.appendChild(fileLink);
fileListDiv.appendChild(fileItemDiv);
}
break;
}
}
}
// 模拟Element UI的on-success回调
function upload_file_success(response, file, fileList) {
console.log('上传成功回调:', response);
// 你可以在这里添加自定义的成功处理逻辑
}
// 模拟Element UI的on-error回调
function upload_file_error(error, file, fileList) {
console.log('上传失败回调:', error);
// 你可以在这里添加自定义的错误处理逻辑
}
async function fetchToolData(wellName, seriesNum, instrumentNum, flag, content) {
console.log("wellName----------", wellName);
console.log("seriesNum----------", seriesNum);
console.log("instrumentNum----------", instrumentNum);
try {
// 添加 await 关键字
const response = await axios.post('/deescloud/getInstrumentMess', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
series: seriesNum,
instrument: instrumentNum,
wellName: wellName,
flag: flag,
content: content
}, {
headers: {
'Content-Type': 'application/json'
}
});
// 检查响应状态
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
//基本信息
renderInstrumentData(response.data);
//上井情况
populateBasicInfo(response.data);
//维保情况
populateMaintenanceInfo(response.data.data1);
//部门信息
renderDeptInfo(response.data);
// 调用新接口获取更多数据
// if (response.data && response.data.data && response.data.data.length > 0) {
// const firstItem = response.data.data[0];
// await fetchLcmData(firstItem);
// }
return response.data;
} catch (error) {
console.error('获取仪器数据失败:', error);
// 添加错误提示(可选)
if (typeof this !== 'undefined' && this.$notify) {
this.$notify.error({
title: '数据获取失败',
message: '请检查网络或联系管理员',
duration: 5000
});
} else {
console.error('获取仪器数据失败,请稍后重试');
}
return null;
}
}
// 维保情况数据渲染
function populateMaintenanceInfo(data) {
const tbody = document.getElementById('maintenanceDataBody');
if (!tbody) return;
// 清空现有内容
tbody.innerHTML = '';
// 检查数据是否存在且为数组
if (!data || !Array.isArray(data)) {
console.warn('No valid maintenance data found');
return;
}
// 如果没有维保数据
if (data.length === 0) {
const emptyRow = document.createElement('tr');
const emptyCell = document.createElement('td');
emptyCell.colSpan = 4;
emptyCell.textContent = '暂无维保记录';
emptyCell.style.textAlign = 'center';
emptyRow.appendChild(emptyCell);
tbody.appendChild(emptyRow);
return;
}
// 遍历数据并创建表格行
data.forEach(item => {
const row = document.createElement('tr');
// 时间 (使用time字段)
const timeCell = document.createElement('td');
timeCell.textContent = item.time ? item.time.split(' ')[0] : ''; // 只显示日期部分
// 等级
const locationCell = document.createElement('td');
locationCell.textContent = item.repair_level ? `${item.repair_level}` : '';
// 维保信息 (使用note字段结合repair_level)
const noteCell = document.createElement('td');
const levelText = item.repair_level ? `等级${item.repair_level}维保` : '';
const noteText = item.note || '';
noteCell.textContent = levelText && noteText ? `${levelText}${noteText}` : (levelText || noteText || '');
// 维保人 (使用applicanter字段)
const applicantCell = document.createElement('td');
applicantCell.textContent = item.applicanter || '';
// 添加单元格到行中
row.appendChild(timeCell);
row.appendChild(locationCell);
row.appendChild(noteCell);
row.appendChild(applicantCell);
// 添加行到表格中
tbody.appendChild(row);
});
}
// 新增维保记录按钮点击处理函数
function addMaintenanceRecord() {
// 获取URL中的参数
const seriesNum = getUrlParameter('series');
const instrumentNum = getUrlParameter('instrument');
const wellName = getUrlParameter('well');
// 创建模态框
const modal = document.createElement('div');
modal.id = 'maintenanceModal';
modal.style.cssText = `
display: block;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
`;
modal.innerHTML = `
<div style="background-color: white; margin: 5% auto; padding: 0; border-radius: 4px; width: 60%; max-width: 800px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; background-color: #f5f7fa;">
<h3 style="margin: 0; color: #333; font-size: 18px;">维保信息</h3>
<button id="closeModal" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #999; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">×</button>
</div>
<form id="maintenanceForm" style="padding: 20px;">
<div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">系列号</label>
<input type="text" id="seriesInput" value="${seriesNum || ''}" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;background-color: #e9e9eaff;" disabled>
</div>
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">编码</label>
<input type="text" id="instrumentIdInput" value="${instrumentNum || ''}" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box; background-color: #e9e9eaff;" disabled>
</div>
</div>
<div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">维保次数</label>
<input type="text" id="repairCntInput" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;">
</div>
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">维保等级</label>
<input type="text" id="repairLevelInput" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;">
</div>
</div>
<div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">维保人</label>
<input type="text" id="applicanterInput" value="${localStorage.getItem('online_user') || ''}" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;background-color: #e9e9eaff;" disabled>
</div>
<div style="width: 50%; padding: 0 10px; box-sizing: border-box; margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">维保内容</label>
<input type="text" id="noteInput" style="width: 100%; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;">
</div>
</div>
</form>
<div style="display: flex; justify-content: flex-end; padding: 15px 20px; border-top: 1px solid #eee; background-color: #f5f7fa;">
<button id="cancelBtn" style="margin-right: 10px; padding: 8px 16px; background-color: #ffffff; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer; color: #606266;"> </button>
<button id="confirmBtn" style="padding: 8px 16px; background-color: #409eff; border: 1px solid #409eff; border-radius: 4px; color: white; cursor: pointer;"> </button>
</div>
</div>
`;
// 添加模态框到页面
document.body.appendChild(modal);
// 添加事件监听器
document.getElementById('closeModal').addEventListener('click', closeModal);
document.getElementById('cancelBtn').addEventListener('click', closeModal);
document.getElementById('confirmBtn').addEventListener('click', submitMaintenanceRecord);
// 点击模态框外部关闭
modal.addEventListener('click', function(event) {
if (event.target === modal) {
closeModal();
}
});
// 阻止表单内部点击关闭模态框
const modalContent = modal.querySelector('div');
modalContent.addEventListener('click', function(event) {
event.stopPropagation();
});
}
// 关闭模态框函数
function closeModal() {
const modal = document.getElementById('maintenanceModal');
if (modal) {
document.body.removeChild(modal);
}
}
// 提交维保记录函数
function submitMaintenanceRecord() {
// 获取表单数据
const formData = {
series: document.getElementById('seriesInput').value,
instrument_id: document.getElementById('instrumentIdInput').value,
repair_cnt: document.getElementById('repairCntInput').value,
repair_level: document.getElementById('repairLevelInput').value,
applicanter: document.getElementById('applicanterInput').value,
note: document.getElementById('noteInput').value,
time: new Date().toISOString().slice(0, 19).replace('T', ' '), // 当前时间
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid")
};
axios.post('/deescloud/postLcm', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
oper_type: 1,
...formData
})
.then(function (response) {
console.log('提交成功:', response.data);
closeModal();
// 重新加载维保数据
location.reload();
})
.catch(function (error) {
console.error('提交失败:', error);
});
}
// 添加渲染部门信息的函数
function renderDeptInfo(data) {
if (!data || !data.dept) {
console.warn("无部门信息");
return;
}
const deptContainer = document.getElementById("deptContainer");
if (deptContainer) {
deptContainer.textContent = data.dept;
}
}
// 页面加载完成后自动获取并渲染质检数据
document.addEventListener('DOMContentLoaded', async function() {
// 存储每个字段的输入框状态
const inputStates = {
process_record: { visible: false, input: null },
process_inspection: { visible: false, input: null },
final_inspection: { visible: false, input: null }
};
// 初始化编辑按钮事件
document.getElementById('editProcessRecord').addEventListener('click', function() {
toggleEditInput(this, '生产过程记录', 'process_record', inputStates);
});
document.getElementById('editProcessInspection').addEventListener('click', function() {
toggleEditInput(this, '生产过程检验', 'process_inspection', inputStates);
});
document.getElementById('editFinalInspection').addEventListener('click', function() {
toggleEditInput(this, '成品检验记录', 'final_inspection', inputStates);
});
// 页面加载后立即获取并渲染质检数据
await loadAndRenderQualityData(inputStates);
// 将inputStates保存到全局以便其他函数访问
window.inputStates = inputStates;
});
// 加载并渲染所有质检数据
async function loadAndRenderQualityData(inputStates) {
try {
// 获取所有质检数据
const qualityData = await fetchAllQualityData();
console.log("qualityData:", qualityData);
// 渲染到对应的输入框
renderQualityData(qualityData, inputStates);
} catch (error) {
console.error('加载质检数据失败:', error);
}
}
// 获取所有质检数据
async function fetchAllQualityData() {
try {
const seriesNum = getUrlParameter('series');
const instrumentNum = getUrlParameter('instrument');
const wellName = getUrlParameter('well');
const response = await axios.post('/deescloud/getQualityData', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
series: seriesNum,
instrument: instrumentNum,
wellName: wellName,
field: 'all' // 添加一个参数表示获取所有字段
}, {
headers: {
'Content-Type': 'application/json'
}
});
if (response.status === 200) {
return response.data;
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error) {
console.error('获取质检数据失败:', error);
throw error;
}
}
// 确认并保存数据
async function confirmAndSave(buttonElement, fieldKey, inputElement, inputStates) {
const state = inputStates[fieldKey];
try {
// 调用新增接口保存数据
await saveQualityData(fieldKey, inputElement.value);
// 更新显示区域的值
state.displayElement.textContent = inputElement.value;
// 恢复显示区域,移除输入框
state.displayElement.style.display = '';
state.input.remove();
// 恢复按钮为编辑状态
buttonElement.textContent = '编辑';
buttonElement.classList.remove('confirm-btn');
// 更新状态
state.visible = false;
} catch (error) {
console.error('保存失败:', error);
alert('保存失败,请重试');
}
}
// 渲染质检数据到对应的输入框
function renderQualityData(responseData) {
console.log('正在渲染数据到以下元素:', {
processRecordDisplay: document.getElementById('processRecordDisplay'),
processInspectionDisplay: document.getElementById('processInspectionDisplay'),
finalInspectionDisplay: document.getElementById('finalInspectionDisplay')
});
if (!responseData?.data) return;
const { process_record, process_inspection, final_inspection } = responseData.data;
// 更新显示区域
const setDisplayValue = (id, value) => {
const element = document.getElementById(id);
if (element) element.textContent = value || '暂无数据';
};
setDisplayValue('processRecordDisplay', process_record);
setDisplayValue('processInspectionDisplay', process_inspection);
setDisplayValue('finalInspectionDisplay', final_inspection);
// 如果输入框已创建,也更新它们的值(可选)
if (window.inputStates) {
const updateInputValue = (state, value) => {
if (state?.input) state.input.value = value || '';
};
updateInputValue(inputStates.process_record, process_record);
updateInputValue(inputStates.process_inspection, process_inspection);
updateInputValue(inputStates.final_inspection, final_inspection);
}
}
// 切换编辑输入框的显示/隐藏
function toggleEditInput(buttonElement, fieldName, fieldKey, inputStates) {
const container = buttonElement.parentElement;
const state = inputStates[fieldKey];
if (state.visible) {
// 如果输入框已显示,执行保存操作
confirmAndSave(buttonElement, fieldKey, state.input, inputStates);
} else {
// 如果输入框未显示,创建并显示输入框
showEditInput(buttonElement, fieldName, fieldKey, inputStates);
}
}
// 显示编辑输入框
function showEditInput(buttonElement, fieldName, fieldKey, inputStates) {
const container = buttonElement.closest('.quality-header');
const state = inputStates[fieldKey];
const displayElement = container.querySelector('.quality-display');
const currentValue = displayElement.textContent.trim();
// 如果输入框不存在,则创建
if (!state.input) {
// 创建输入框
const input = document.createElement('input');
input.type = 'text';
input.className = 'edit-input';
input.value = currentValue;
input.placeholder = `请输入${fieldName}`;
// 保存输入框引用
state.input = input;
state.container = container;
state.displayElement = displayElement;
}
// 隐藏显示区域,显示输入框
displayElement.style.display = 'none';
container.insertBefore(state.input, buttonElement);
// 更新状态
state.visible = true;
// 修改按钮为确认按钮
buttonElement.textContent = '确认';
buttonElement.classList.add('confirm-btn');
// 聚焦到输入框
state.input.focus();
// 添加回车事件监听
state.input.addEventListener('keypress', function onEnter(event) {
if (event.key === 'Enter') {
confirmAndSave(buttonElement, fieldKey, state.input, inputStates);
}
});
}
// 新增质检记录数据
async function saveQualityData(fieldKey, value) {
try {
const seriesNum = getUrlParameter('series');
const instrumentNum = getUrlParameter('instrument');
const wellName = getUrlParameter('well');
const response = await axios.post('/deescloud/addQualityData', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
series: seriesNum,
instrument: instrumentNum,
field: fieldKey,
value: value,
wellName:wellName
}, {
headers: {
'Content-Type': 'application/json'
}
});
if (response.status === 200) {
console.log('质检记录保存成功:', response.data);
return response.data;
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error) {
console.error('质检记录保存失败:', error);
throw error;
}
}
// 查询质检记录数据
async function fetchQualityData(fieldKey, inputElement) {
try {
const seriesNum = getUrlParameter('series');
const instrumentNum = getUrlParameter('instrument');
const WellName = getUrlParameter('well');
const response = await axios.post('/deescloud/getQualityData', {
opuser: localStorage.getItem("online_user"),
opuser_uuid: localStorage.getItem("uuid"),
series: seriesNum,
instrument: instrumentNum,
field: fieldKey,
WellName:WellName
}, {
headers: {
'Content-Type': 'application/json'
}
});
if (response.status === 200) {
// 填充查询到的数据到输入框
inputElement.value = response.data.value || '';
return response.data;
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error) {
console.error('质检记录查询失败:', error);
inputElement.placeholder = '数据查询失败';
throw error;
}
}