982 lines
38 KiB
JavaScript
982 lines
38 KiB
JavaScript
// 获取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;
|
||
}
|
||
}
|