1911 lines
76 KiB
JavaScript
1911 lines
76 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');
|
||
const instrumentNum = getUrlParameter('instrument');
|
||
|
||
});
|
||
|
||
|
||
// 页面加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', async function() {
|
||
setInterval(checkUser,5000);
|
||
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) {
|
||
// 调用查询接口
|
||
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) {
|
||
|
||
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);
|
||
return response.data;
|
||
} catch (error) {
|
||
console.error('获取仪器数据失败:', error);
|
||
|
||
// 添加错误提示（可选）
|
||
if (typeof this !== 'undefined' && this.$notify) {
|
||
this.$notify.error({
|
||
title: 'Data acquisition failed',
|
||
message: 'Please check the network or contact the administrator',
|
||
duration: 5000
|
||
});
|
||
} else {
|
||
console.error('获取仪器数据失败，请稍后重试');
|
||
}
|
||
|
||
return null;
|
||
}
|
||
}
|
||
|
||
//基本信息
|
||
function renderInstrumentData(data) {
|
||
if (!data) {
|
||
console.error("无有效数据");
|
||
return;
|
||
}
|
||
|
||
const seriesNum = getUrlParameter('series');
|
||
const instrument = getUrlParameter('instrument');;
|
||
if (seriesNum) {
|
||
document.getElementById('seriesNum').textContent = seriesNum + ' ' + instrument;
|
||
}
|
||
|
||
// 1. 更新仪器名称（Series + Instrument）
|
||
|
||
|
||
// 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"} h`;
|
||
|
||
// 5. 更新当次工作时间（workTimes）
|
||
document.querySelector(".basic-info-table tbody tr:nth-child(2) td:nth-child(4)").textContent =
|
||
`${data.workTimes || "0"} h`;
|
||
|
||
// 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 = '';
|
||
|
||
// 遍历数据并创建表格行
|
||
// 井上仪器信息
|
||
if (data.data && Array.isArray(data.data)) {
|
||
data.data.forEach(item => {
|
||
const row = document.createElement('tr');
|
||
|
||
// 井名
|
||
const wellNameCell = document.createElement('td');
|
||
wellNameCell.textContent = item.wellName || '';
|
||
wellNameCell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 入井工作情况 (使用sampleField)
|
||
const sampleFieldCell = document.createElement('td');
|
||
sampleFieldCell.textContent = item.sampleField || '';
|
||
sampleFieldCell.classList.add('table-cell-wrap', 'fixed-width-100');
|
||
|
||
// 施工井段 (使用valueInterval)
|
||
const valueIntervalCell = document.createElement('td');
|
||
valueIntervalCell.textContent = item.valueInterval || '';
|
||
valueIntervalCell.classList.add('table-cell-wrap', 'fixed-width-100');
|
||
|
||
// 最高工作温度 (使用globalMax1 + °C)
|
||
const globalMax1Cell = document.createElement('td');
|
||
globalMax1Cell.textContent = item.globalMax1 ? item.globalMax1 + '°C' : '';
|
||
globalMax1Cell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 最高承压 (使用globalMax2 + MPa)
|
||
const globalMax2Cell = document.createElement('td');
|
||
globalMax2Cell.textContent = item.globalMax2 ? item.globalMax2 + 'MPa' : '';
|
||
globalMax2Cell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 仪器工作情况 (使用content)
|
||
const contentCell = document.createElement('td');
|
||
contentCell.textContent = item.content || '';
|
||
contentCell.classList.add('table-cell-wrap', 'fixed-width-100');
|
||
|
||
// 上井人 (使用personnelList)
|
||
const personnelListCell = document.createElement('td');
|
||
personnelListCell.textContent = item.personnelList || '';
|
||
personnelListCell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 文件列（合并了操作和文件）
|
||
const fileCell = document.createElement('td');
|
||
fileCell.className = 'file-column';
|
||
fileCell.classList.add('fixed-width-160', 'table-cell-wrap');
|
||
|
||
// 上传附件部分
|
||
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 = 'Upload';
|
||
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 = 'File:';
|
||
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';
|
||
|
||
// 添加计数器，用于跟踪有效文件数量
|
||
let validFileCount = 0;
|
||
|
||
item.data.forEach(file => {
|
||
// 检查文件名是否为空
|
||
if (!file.fileName) {
|
||
return; // 跳过空文件名的文件
|
||
}
|
||
|
||
const fileItemDiv = document.createElement('div');
|
||
fileItemDiv.className = 'file-item';
|
||
fileItemDiv.style.padding = '3px 0';
|
||
fileItemDiv.style.display = 'flex';
|
||
fileItemDiv.style.alignItems = 'center';
|
||
|
||
// 创建删除图标
|
||
const deleteIcon = document.createElement('span');
|
||
deleteIcon.className = 'delete-icon';
|
||
deleteIcon.innerHTML = '×';
|
||
deleteIcon.style.color = 'red';
|
||
deleteIcon.style.fontSize = '18px';
|
||
deleteIcon.style.cursor = 'pointer';
|
||
deleteIcon.style.marginRight = '5px';
|
||
deleteIcon.title = 'delete file';
|
||
|
||
// 添加删除事件
|
||
deleteIcon.onclick = function() {
|
||
showConfirmDialog('Are you sure you want to delete this file?', () => {
|
||
deleteFile(file.realFileName,file.id, fileItemDiv);
|
||
});
|
||
};
|
||
|
||
// 创建文件图标
|
||
const fileIcon = document.createElement('span');
|
||
fileIcon.className = 'file-icon';
|
||
fileIcon.style.fontSize = '14px';
|
||
fileIcon.style.marginRight = '5px';
|
||
|
||
// 创建文件链接
|
||
const fileLink = document.createElement('a');
|
||
fileLink.href = 'javascript:void(0)';
|
||
fileLink.textContent = getFileNameFromPath(file.fileName);
|
||
fileLink.style.fontSize = '14px';
|
||
fileLink.onclick = function() {
|
||
downloadFile(file.realFileName.replace('./upload/', ''));
|
||
};
|
||
|
||
fileItemDiv.appendChild(deleteIcon);
|
||
fileItemDiv.appendChild(fileIcon);
|
||
fileItemDiv.appendChild(fileLink);
|
||
fileListDiv.appendChild(fileItemDiv);
|
||
|
||
// 增加有效文件计数
|
||
validFileCount++;
|
||
});
|
||
|
||
// 只有当存在有效文件时才显示文件列表
|
||
if (validFileCount > 0) {
|
||
fileListContainer.appendChild(fileListTitle);
|
||
fileListContainer.appendChild(fileListDiv);
|
||
fileCell.appendChild(fileListContainer);
|
||
}
|
||
}
|
||
|
||
// 链接列
|
||
const linkCell = document.createElement('td');
|
||
linkCell.classList.add('fixed-width-260', 'table-cell-wrap');
|
||
|
||
// 创建链接容器
|
||
const linkContainer = document.createElement('div');
|
||
linkContainer.className = 'link-container';
|
||
|
||
linkContainer.style.display = 'flex';
|
||
linkContainer.style.alignItems = 'center';
|
||
|
||
// 显示区域
|
||
const linkDisplay = document.createElement('div');
|
||
linkDisplay.className = 'link-display';
|
||
linkDisplay.style.flex = '1';
|
||
linkDisplay.style.padding = '6px 12px';
|
||
linkDisplay.style.minHeight = '20px';
|
||
linkDisplay.style.marginRight = '10px';
|
||
linkDisplay.textContent = item.link || '';
|
||
|
||
// 编辑按钮
|
||
const editLinkButton = document.createElement('button');
|
||
editLinkButton.className = 'edit-link-btn';
|
||
editLinkButton.textContent = 'Editor';
|
||
editLinkButton.style.padding = '6px 12px';
|
||
editLinkButton.style.backgroundColor = '#409eff';
|
||
editLinkButton.style.border = '1px solid #409eff';
|
||
editLinkButton.style.borderRadius = '4px';
|
||
editLinkButton.style.color = 'white';
|
||
editLinkButton.style.fontSize = '14px';
|
||
editLinkButton.style.cursor = 'pointer';
|
||
editLinkButton.style.flexShrink = '0';
|
||
|
||
// 输入框（初始隐藏）
|
||
const linkInput = document.createElement('input');
|
||
linkInput.type = 'text';
|
||
linkInput.className = 'link-input';
|
||
linkInput.style.flex = '1';
|
||
linkInput.style.padding = '6px 12px';
|
||
linkInput.style.border = '1px solid #dcdfe6';
|
||
linkInput.style.borderRadius = '4px';
|
||
linkInput.style.fontSize = '14px';
|
||
linkInput.style.marginRight = '10px';
|
||
linkInput.style.minWidth = '150px';
|
||
linkInput.style.display = 'none';
|
||
linkInput.value = item.link || '';
|
||
linkInput.placeholder = 'please enter the link';
|
||
|
||
// 确认按钮（初始隐藏）
|
||
const confirmLinkButton = document.createElement('button');
|
||
confirmLinkButton.className = 'confirm-link-btn';
|
||
confirmLinkButton.textContent = 'Confirm';
|
||
confirmLinkButton.style.padding = '6px 12px';
|
||
confirmLinkButton.style.marginTop = '3px';
|
||
confirmLinkButton.style.backgroundColor = '#67c23a';
|
||
confirmLinkButton.style.border = '1px solid #67c23a';
|
||
confirmLinkButton.style.borderRadius = '4px';
|
||
confirmLinkButton.style.color = 'white';
|
||
confirmLinkButton.style.fontSize = '14px';
|
||
confirmLinkButton.style.cursor = 'pointer';
|
||
confirmLinkButton.style.flexShrink = '0';
|
||
confirmLinkButton.style.display = 'none';
|
||
|
||
// 编辑按钮点击事件
|
||
editLinkButton.addEventListener('click', function() {
|
||
// 切换到编辑模式
|
||
linkDisplay.style.display = 'none';
|
||
linkInput.style.display = 'block';
|
||
editLinkButton.style.display = 'none';
|
||
confirmLinkButton.style.display = 'block';
|
||
linkInput.focus();
|
||
});
|
||
|
||
// 确认按钮点击事件
|
||
confirmLinkButton.addEventListener('click', async function() {
|
||
// 保存链接数据
|
||
try {
|
||
const response = await axios.post('/deescloud/saveLinkData', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
id: item.id,
|
||
link: linkInput.value,
|
||
wellName: getUrlParameter('well'),
|
||
series: getUrlParameter('series'),
|
||
instrument: getUrlParameter('instrument'),
|
||
type: "tool_detail_instrument"
|
||
}, {
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.status === 200) {
|
||
// 更新显示
|
||
linkDisplay.textContent = linkInput.value || '';
|
||
|
||
// 切换回显示模式
|
||
linkDisplay.style.display = 'block';
|
||
linkInput.style.display = 'none';
|
||
editLinkButton.style.display = 'block';
|
||
confirmLinkButton.style.display = 'none';
|
||
|
||
console.log('链接数据保存成功');
|
||
} else {
|
||
throw new Error('保存失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('保存链接数据失败:', error);
|
||
}
|
||
});
|
||
|
||
// 回车键确认
|
||
linkInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
confirmLinkButton.click();
|
||
}
|
||
});
|
||
|
||
// 组装链接容器
|
||
linkContainer.appendChild(linkDisplay);
|
||
linkContainer.appendChild(linkInput);
|
||
linkContainer.appendChild(editLinkButton);
|
||
linkContainer.appendChild(confirmLinkButton);
|
||
|
||
// 添加到链接单元格
|
||
linkCell.appendChild(linkContainer);
|
||
|
||
// 添加单元格到行中
|
||
row.appendChild(wellNameCell);
|
||
row.appendChild(sampleFieldCell);
|
||
row.appendChild(valueIntervalCell);
|
||
row.appendChild(globalMax1Cell);
|
||
row.appendChild(globalMax2Cell);
|
||
row.appendChild(contentCell);
|
||
row.appendChild(personnelListCell);
|
||
row.appendChild(fileCell); // 合并后的文件列
|
||
row.appendChild(linkCell); // 链接列
|
||
|
||
// 添加行到表格中
|
||
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);
|
||
});
|
||
}
|
||
|
||
// 删除文件函数
|
||
function deleteFile(fileName, id, fileItemElement) {
|
||
// 调用删除接口
|
||
fetch('/deescloud/delete_ds_file', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
fileName: fileName,
|
||
id: id
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// 删除成功，从页面移除该文件项
|
||
fileItemElement.remove();
|
||
console.log('文件删除成功');
|
||
|
||
// 检查是否还有其他文件项，如果没有则移除整个文件列表容器
|
||
const fileListContainer = fileItemElement.closest('.file-list-container');
|
||
const fileListDiv = fileListContainer.querySelector('.file-list');
|
||
|
||
// 如果文件列表为空，则移除整个容器
|
||
if (fileListDiv && fileListDiv.children.length === 0) {
|
||
fileListContainer.remove();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加文件上传处理函数
|
||
function handleMaintenanceFileUpload(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 = getUrlParameter('well') || '';
|
||
const opuser = localStorage.getItem("online_user") || '';
|
||
const instrument = getUrlParameter('instrument') || '';
|
||
const series = getUrlParameter('series') || '';
|
||
|
||
// 将参数添加到FormData中
|
||
formData.append('id', id);
|
||
formData.append('wellName', wellName);
|
||
formData.append('opuser', opuser);
|
||
formData.append('type', "tool_detail_repair");
|
||
formData.append('series', series);
|
||
formData.append('instrument', instrument);
|
||
|
||
// 显示上传中提示
|
||
const uploadButton = event.target.nextElementSibling;
|
||
const originalText = uploadButton.textContent;
|
||
uploadButton.textContent = 'Uploading...';
|
||
uploadButton.disabled = true;
|
||
|
||
// 显示调试信息
|
||
console.log('发送的参数:', {
|
||
id: id,
|
||
wellName: wellName,
|
||
opuser: opuser,
|
||
instrument: instrument,
|
||
series: series
|
||
});
|
||
// 发送上传请求
|
||
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]);
|
||
}
|
||
setTimeout(() => {
|
||
location.reload();
|
||
}, 500);
|
||
// 局部刷新文件列表
|
||
refreshFileList(item.id, file,data.realFileName);
|
||
})
|
||
.catch(error => {
|
||
console.error('上传失败:', error);
|
||
// 调用错误回调函数（模拟Element UI的on-error）
|
||
if (typeof upload_file_error === 'function') {
|
||
upload_file_error(error, file, []);
|
||
}
|
||
})
|
||
.finally(() => {
|
||
// 恢复按钮状态
|
||
uploadButton.textContent = originalText;
|
||
uploadButton.disabled = false;
|
||
// 清空文件输入框
|
||
event.target.value = '';
|
||
});
|
||
}
|
||
|
||
// 局部刷新文件列表
|
||
function refreshMaintenanceFileList(itemId,id, uploadedFile , realFileName) {
|
||
// 查找对应行的文件列表容器
|
||
const tbody = document.getElementById('maintenanceDataBody');
|
||
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-maintenance-${itemId}`);
|
||
if (uploadInput) {
|
||
// 找到对应的文件单元格
|
||
const fileCell = row.cells[row.cells.length - 2]; // 倒数第二列是文件列
|
||
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 = 'File:';
|
||
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';
|
||
fileItemDiv.style.display = 'flex'; // 添加flex布局
|
||
fileItemDiv.style.alignItems = 'center'; // 垂直居中
|
||
|
||
// 创建删除图标（添加这部分）
|
||
const deleteIcon = document.createElement('span');
|
||
deleteIcon.className = 'delete-icon';
|
||
deleteIcon.innerHTML = '×';
|
||
deleteIcon.style.color = 'red';
|
||
deleteIcon.style.fontSize = '18px';
|
||
deleteIcon.style.cursor = 'pointer';
|
||
deleteIcon.style.marginRight = '5px';
|
||
deleteIcon.title = 'Delete file';
|
||
|
||
// 添加删除事件（添加这部分）
|
||
deleteIcon.onclick = function() {
|
||
showConfirmDialog('Are you sure you want to delete this file?', () => {
|
||
// 注意：这里可能需要根据实际情况调整参数
|
||
console.log('删除文件111111111111111：', id);
|
||
deleteFile(realFileName, id, fileItemDiv);
|
||
});
|
||
};
|
||
|
||
// 创建文件图标
|
||
const fileIcon = document.createElement('span');
|
||
fileIcon.className = 'file-icon';
|
||
fileIcon.style.fontSize = '14px';
|
||
fileIcon.style.marginRight = '5px'; // 添加右边距
|
||
|
||
// 创建文件链接
|
||
const fileLink = document.createElement('a');
|
||
fileLink.href = 'javascript:void(0)';
|
||
fileLink.textContent = uploadedFile.name;
|
||
fileLink.onclick = function() {
|
||
downloadFile(realFileName.replace('./upload/', ''));
|
||
};
|
||
fileLink.style.fontSize = '14px';
|
||
fileLink.style.textDecoration = 'none';
|
||
fileLink.style.flex = '1'; // 添加flex属性
|
||
|
||
// 按正确顺序添加元素
|
||
fileItemDiv.appendChild(deleteIcon); // 添加删除图标
|
||
fileItemDiv.appendChild(fileIcon);
|
||
fileItemDiv.appendChild(fileLink);
|
||
fileListDiv.appendChild(fileItemDiv);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
//仪器施工汇总上传文件
|
||
function handleFileUpload(event, item) {
|
||
const fileInput = event.target;
|
||
const file = fileInput.files[0];
|
||
|
||
if (!file) {
|
||
console.log('未选择文件');
|
||
return;
|
||
}
|
||
|
||
// 创建FormData对象
|
||
const formData = new FormData();
|
||
|
||
// 添加文件
|
||
formData.append('file', file);
|
||
|
||
// 添加额外参数（与handleMaintenanceFileUpload函数中的一致）
|
||
const id = item.id || '';
|
||
const wellName = getUrlParameter('well') || '';
|
||
const opuser = localStorage.getItem("online_user") || '';
|
||
const instrument = getUrlParameter('instrument') || '';
|
||
const series = getUrlParameter('series') || '';
|
||
|
||
// 将参数添加到FormData中
|
||
formData.append('id', id);
|
||
formData.append('wellName', wellName);
|
||
formData.append('opuser', opuser);
|
||
formData.append('type', "tool_detail_instrument");
|
||
formData.append('series', series);
|
||
formData.append('instrument', instrument);
|
||
|
||
console.log('上传文件:333333333333333333333333333', {
|
||
id: id,
|
||
wellName: wellName,
|
||
opuser: opuser,
|
||
instrument: instrument,
|
||
series: series
|
||
});
|
||
|
||
// 使用fetch发送上传请求（与handleMaintenanceFileUpload函数中的一致）
|
||
fetch('/deescloud/upload', {
|
||
method: 'POST',
|
||
body: formData // 使用FormData，与维保记录上传方式一致
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
console.log('文件上传成功:', data);
|
||
setTimeout(() => {
|
||
location.reload();
|
||
}, 500);
|
||
refreshFileList(item.id, file, data.data.realFileName.replace('./upload/', ''));
|
||
})
|
||
.catch(error => {
|
||
console.error('文件上传失败:', error);
|
||
// 可以在这里添加上传失败的处理逻辑
|
||
// 比如显示错误消息
|
||
})
|
||
.finally(() => {
|
||
// 清空文件输入框
|
||
fileInput.value = '';
|
||
});
|
||
}
|
||
|
||
// 局部刷新仪器施工汇总
|
||
function refreshFileList(itemId, uploadedFile , realFileName) {
|
||
// 查找对应行的文件列表容器
|
||
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 - 2]; // 倒数第二列是文件列
|
||
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 = 'File:';
|
||
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';
|
||
fileItemDiv.style.display = 'flex'; // 添加flex布局
|
||
fileItemDiv.style.alignItems = 'center'; // 垂直居中
|
||
|
||
// 创建删除图标
|
||
const deleteIcon = document.createElement('span');
|
||
deleteIcon.className = 'delete-icon';
|
||
deleteIcon.innerHTML = '×';
|
||
deleteIcon.style.color = 'red';
|
||
deleteIcon.style.fontSize = '18px';
|
||
deleteIcon.style.cursor = 'pointer';
|
||
deleteIcon.style.marginRight = '5px';
|
||
deleteIcon.title = 'Delete file';
|
||
|
||
// 添加删除事件
|
||
deleteIcon.onclick = function() {
|
||
showConfirmDialog('确定要删除这个文件吗？', () => {
|
||
// 这里需要根据实际情况调整参数
|
||
deleteFile(uploadedFile.name, itemId, fileItemDiv);
|
||
});
|
||
};
|
||
|
||
// 创建文件图标
|
||
const fileIcon = document.createElement('span');
|
||
fileIcon.className = 'file-icon';
|
||
fileIcon.style.fontSize = '14px';
|
||
fileIcon.style.marginRight = '5px';
|
||
|
||
// 创建文件链接
|
||
const fileLink = document.createElement('a');
|
||
fileLink.href = 'javascript:void(0)';
|
||
fileLink.textContent = uploadedFile.name;
|
||
// 由于刚上传的文件还没有ID，我们暂时使用文件名作为下载参数
|
||
fileLink.onclick = function() {
|
||
console.log('下载文件：222222222222', realFileName);
|
||
downloadFile(realFileName);
|
||
};
|
||
fileLink.style.fontSize = '14px';
|
||
fileLink.style.textDecoration = 'none';
|
||
fileLink.style.flex = '1';
|
||
|
||
// 按正确顺序添加元素
|
||
fileItemDiv.appendChild(deleteIcon); // 删除图标
|
||
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) {
|
||
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: 'Data acquisition failed',
|
||
message: 'Please check the network or contact the administrator',
|
||
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 = 6; // 更新为6列
|
||
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] : ''; // 只显示日期部分
|
||
timeCell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 等级
|
||
const locationCell = document.createElement('td');
|
||
locationCell.textContent = item.repair_level ? `${item.repair_level}` : '';
|
||
locationCell.classList.add('table-cell-wrap', 'fixed-width-40');
|
||
|
||
// 维保信息 (仅使用note字段)
|
||
const noteCell = document.createElement('td');
|
||
noteCell.textContent = item.note || ''; // 如果没有note则留空
|
||
noteCell.classList.add('table-cell-wrap', 'fixed-width-180');
|
||
|
||
// 维保人 (使用applicanter字段)
|
||
const applicantCell = document.createElement('td');
|
||
applicantCell.textContent = item.applicanter || '';
|
||
applicantCell.classList.add('table-cell-wrap', 'fixed-width-80');
|
||
|
||
// 文件列
|
||
const fileCell = document.createElement('td');
|
||
fileCell.className = 'file-column';
|
||
fileCell.classList.add('fixed-width-160', 'table-cell-wrap');
|
||
|
||
// 上传附件部分
|
||
const uploadDiv = document.createElement('div');
|
||
const uploadInput = document.createElement('input');
|
||
uploadInput.type = 'file';
|
||
uploadInput.id = 'upload-maintenance-' + item.id;
|
||
uploadInput.style.display = 'none';
|
||
uploadInput.setAttribute('data-id', item.id);
|
||
|
||
const uploadButton = document.createElement('button');
|
||
uploadButton.textContent = 'Upload';
|
||
uploadButton.className = 'upload-button';
|
||
uploadButton.onclick = function() {
|
||
uploadInput.click();
|
||
};
|
||
|
||
uploadInput.onchange = function(e) {
|
||
handleMaintenanceFileUpload(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 = 'File:';
|
||
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';
|
||
|
||
// 添加计数器，用于统计实际显示的文件数量
|
||
let validFileCount = 0;
|
||
|
||
item.data.forEach(file => {
|
||
// 新增判断：只有当fileName存在时才创建DOM元素
|
||
if (file.fileName) {
|
||
validFileCount++; // 统计有效文件
|
||
|
||
const fileItemDiv = document.createElement('div');
|
||
fileItemDiv.className = 'file-item';
|
||
fileItemDiv.style.padding = '3px 0';
|
||
fileItemDiv.style.display = 'flex';
|
||
fileItemDiv.style.alignItems = 'center';
|
||
|
||
// 创建删除图标
|
||
const deleteIcon = document.createElement('span');
|
||
deleteIcon.className = 'delete-icon';
|
||
deleteIcon.innerHTML = '×';
|
||
deleteIcon.style.color = 'red';
|
||
deleteIcon.style.fontSize = '18px';
|
||
deleteIcon.style.cursor = 'pointer';
|
||
deleteIcon.style.marginRight = '5px';
|
||
deleteIcon.title = 'Delete';
|
||
|
||
// 添加删除事件
|
||
deleteIcon.onclick = function() {
|
||
showConfirmDialog('Are you sure you want to delete this file?', () => {
|
||
deleteFile(file.realFileName,file.id ,fileItemDiv);
|
||
});
|
||
};
|
||
|
||
// 创建文件图标
|
||
const fileIcon = document.createElement('span');
|
||
fileIcon.className = 'file-icon';
|
||
fileIcon.style.fontSize = '14px';
|
||
fileIcon.style.marginRight = '5px';
|
||
|
||
// 创建文件链接
|
||
const fileLink = document.createElement('a');
|
||
fileLink.href = 'javascript:void(0)';
|
||
fileLink.textContent = getFileNameFromPath(file.fileName);
|
||
fileLink.onclick = function() {
|
||
downloadFile(file.realFileName.replace('./upload/', ''));
|
||
};
|
||
fileLink.style.fontSize = '14px';
|
||
fileLink.style.textDecoration = 'none';
|
||
fileLink.style.flex = '1';
|
||
|
||
fileItemDiv.appendChild(deleteIcon);
|
||
fileItemDiv.appendChild(fileIcon);
|
||
fileItemDiv.appendChild(fileLink);
|
||
fileListDiv.appendChild(fileItemDiv);
|
||
}
|
||
});
|
||
|
||
// 只有当存在有效文件时才显示整个容器
|
||
if (validFileCount > 0) {
|
||
fileListContainer.appendChild(fileListTitle);
|
||
fileListContainer.appendChild(fileListDiv);
|
||
fileCell.appendChild(fileListContainer);
|
||
}
|
||
}
|
||
|
||
// 链接列
|
||
const linkCell = document.createElement('td');
|
||
linkCell.classList.add('fixed-width-260', 'table-cell-wrap');
|
||
|
||
// 创建链接容器
|
||
const linkContainer = document.createElement('div');
|
||
linkContainer.className = 'link-container';
|
||
linkContainer.style.display = 'flex';
|
||
linkContainer.style.alignItems = 'center';
|
||
|
||
// 显示区域
|
||
const linkDisplay = document.createElement('div');
|
||
linkDisplay.className = 'link-display';
|
||
linkDisplay.style.flex = '1';
|
||
linkDisplay.style.padding = '6px 12px';
|
||
linkDisplay.style.minHeight = '20px';
|
||
linkDisplay.style.marginRight = '10px';
|
||
linkDisplay.textContent = item.link || '';
|
||
|
||
// 编辑按钮
|
||
const editLinkButton = document.createElement('button');
|
||
editLinkButton.className = 'edit-link-btn';
|
||
editLinkButton.textContent = 'Redact';
|
||
editLinkButton.style.padding = '6px 12px';
|
||
editLinkButton.style.backgroundColor = '#409eff';
|
||
editLinkButton.style.border = '1px solid #409eff';
|
||
editLinkButton.style.borderRadius = '4px';
|
||
editLinkButton.style.color = 'white';
|
||
editLinkButton.style.fontSize = '14px';
|
||
editLinkButton.style.cursor = 'pointer';
|
||
editLinkButton.style.flexShrink = '0';
|
||
|
||
// 输入框（初始隐藏）
|
||
const linkInput = document.createElement('input');
|
||
linkInput.type = 'text';
|
||
linkInput.className = 'link-input';
|
||
linkInput.style.flex = '1';
|
||
linkInput.style.padding = '6px 12px';
|
||
linkInput.style.border = '1px solid #dcdfe6';
|
||
linkInput.style.borderRadius = '4px';
|
||
linkInput.style.fontSize = '14px';
|
||
linkInput.style.marginRight = '10px';
|
||
linkInput.style.minWidth = '150px';
|
||
linkInput.style.display = 'none';
|
||
linkInput.value = item.link || '';
|
||
linkInput.placeholder = 'please enter the link';
|
||
|
||
// 确认按钮（初始隐藏）
|
||
const confirmLinkButton = document.createElement('button');
|
||
confirmLinkButton.className = 'confirm-link-btn';
|
||
confirmLinkButton.textContent = 'Confirm';
|
||
confirmLinkButton.style.padding = '6px 12px';
|
||
confirmLinkButton.style.backgroundColor = '#67c23a';
|
||
confirmLinkButton.style.border = '1px solid #67c23a';
|
||
confirmLinkButton.style.borderRadius = '4px';
|
||
confirmLinkButton.style.color = 'white';
|
||
confirmLinkButton.style.fontSize = '14px';
|
||
confirmLinkButton.style.cursor = 'pointer';
|
||
confirmLinkButton.style.flexShrink = '0';
|
||
confirmLinkButton.style.display = 'none';
|
||
|
||
// 编辑按钮点击事件
|
||
editLinkButton.addEventListener('click', function() {
|
||
// 切换到编辑模式
|
||
linkDisplay.style.display = 'none';
|
||
linkInput.style.display = 'block';
|
||
editLinkButton.style.display = 'none';
|
||
confirmLinkButton.style.display = 'block';
|
||
linkInput.focus();
|
||
});
|
||
|
||
// 确认按钮点击事件
|
||
confirmLinkButton.addEventListener('click', async function() {
|
||
// 保存链接数据
|
||
try {
|
||
const response = await axios.post('/deescloud/saveLinkData', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
id: item.id,
|
||
link: linkInput.value,
|
||
wellName: getUrlParameter('well'),
|
||
series: getUrlParameter('series'),
|
||
instrument: getUrlParameter('instrument'),
|
||
type: "tool_detail_repair"
|
||
}, {
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.status === 200) {
|
||
// 更新显示
|
||
linkDisplay.textContent = linkInput.value || '';
|
||
|
||
// 切换回显示模式
|
||
linkDisplay.style.display = 'block';
|
||
linkInput.style.display = 'none';
|
||
editLinkButton.style.display = 'block';
|
||
confirmLinkButton.style.display = 'none';
|
||
|
||
} else {
|
||
throw new Error('Save failed');
|
||
}
|
||
} catch (error) {
|
||
console.error('保存链接数据失败:', error);
|
||
}
|
||
});
|
||
|
||
// 回车键确认
|
||
linkInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
confirmLinkButton.click();
|
||
}
|
||
});
|
||
|
||
// 组装链接容器
|
||
linkContainer.appendChild(linkDisplay);
|
||
linkContainer.appendChild(linkInput);
|
||
linkContainer.appendChild(editLinkButton);
|
||
linkContainer.appendChild(confirmLinkButton);
|
||
|
||
// 添加到链接单元格
|
||
linkCell.appendChild(linkContainer);
|
||
|
||
// 添加单元格到行中
|
||
row.appendChild(timeCell);
|
||
row.appendChild(locationCell);
|
||
row.appendChild(noteCell);
|
||
row.appendChild(applicantCell);
|
||
row.appendChild(fileCell);
|
||
row.appendChild(linkCell);
|
||
|
||
// 添加行到表格中
|
||
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);
|
||
});
|
||
}
|
||
|
||
// 添加文件上传处理函数
|
||
function handleMaintenanceFileUpload(event, item) {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
|
||
// 调试信息 - 打印整个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 = getUrlParameter('well') || '';
|
||
const opuser = localStorage.getItem("online_user") || '';
|
||
const instrument = getUrlParameter('instrument') || '';
|
||
const series = getUrlParameter('series') || '';
|
||
|
||
// 将参数添加到FormData中
|
||
formData.append('id', id);
|
||
formData.append('wellName', wellName);
|
||
formData.append('opuser', opuser);
|
||
formData.append('type', "tool_detail_repair");
|
||
formData.append('series', series);
|
||
formData.append('instrument', instrument);
|
||
|
||
// 显示上传中提示
|
||
const uploadButton = event.target.nextElementSibling;
|
||
const originalText = uploadButton.textContent;
|
||
uploadButton.textContent = 'being uploaded...';
|
||
uploadButton.disabled = true;
|
||
|
||
// 显示调试信息
|
||
console.log('发送的参数:', {
|
||
id: id,
|
||
wellName: wellName,
|
||
opuser: opuser,
|
||
instrument: instrument,
|
||
series: series
|
||
});
|
||
// 发送上传请求
|
||
fetch('/deescloud/upload', {
|
||
method: 'POST',
|
||
body: formData // 使用FormData，与Element UI的实现方式一致
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// 调用成功回调函数（模拟Element UI的on-success）
|
||
if (typeof upload_file_success === 'function') {
|
||
upload_file_success(data, file, [data]);
|
||
}
|
||
setTimeout(() => {
|
||
location.reload();
|
||
}, 500);
|
||
// 局部刷新文件列表
|
||
refreshMaintenanceFileList(item.id,data.data.id, file,data.data.realFileName);
|
||
})
|
||
.catch(error => {
|
||
// 调用错误回调函数（模拟Element UI的on-error）
|
||
if (typeof upload_file_error === 'function') {
|
||
upload_file_error(error, file, []);
|
||
}
|
||
})
|
||
.finally(() => {
|
||
// 恢复按钮状态
|
||
uploadButton.textContent = originalText;
|
||
uploadButton.disabled = false;
|
||
// 清空文件输入框
|
||
event.target.value = '';
|
||
});
|
||
}
|
||
|
||
|
||
// 模拟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);
|
||
// 你可以在这里添加自定义的错误处理逻辑
|
||
}
|
||
|
||
// 新增维保记录按钮点击处理函数
|
||
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;">Maintenance Information</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;">Series Num</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;">Instrument Num</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;">Maintenance Level</label>
|
||
<input type="text" id="repairLevelInput" 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;">Maintenance Info</label>
|
||
<input type="text" id="noteInput" 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;">Maintenance Person</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>
|
||
</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;">Cancel</button>
|
||
<button id="confirmBtn" style="padding: 8px 16px; background-color: #409eff; border: 1px solid #409eff; border-radius: 4px; color: white; cursor: pointer;">Confirm</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('/deescloud/postLcm:', response.data);
|
||
// 检查返回结果
|
||
if (response.data.r === -1) {
|
||
|
||
alert('You are offline. Please login in again.');
|
||
|
||
} else {
|
||
closeModal();
|
||
// 重新加载维保数据
|
||
location.reload();
|
||
}
|
||
})
|
||
.catch(function (error) {
|
||
console.error('提交失败:', error);
|
||
// 错误处理
|
||
alert('Submission failed. Please contact the administrator');
|
||
|
||
});
|
||
}
|
||
|
||
|
||
|
||
// 添加渲染部门信息的函数
|
||
function renderDeptInfo(data) {
|
||
if (!data?.dept?.trim()) {
|
||
console.warn("无部门信息");
|
||
deptContainer.textContent = "No data";
|
||
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, 'Edit Process Record', 'process_record', inputStates);
|
||
});
|
||
|
||
document.getElementById('editProcessInspection').addEventListener('click', function() {
|
||
toggleEditInput(this, 'Edit Process Inspection', 'process_inspection', inputStates);
|
||
});
|
||
|
||
document.getElementById('editFinalInspection').addEventListener('click', function() {
|
||
toggleEditInput(this, 'Edit Final Inspection', 'final_inspection', inputStates);
|
||
});
|
||
|
||
// 页面加载后立即获取并渲染质检数据
|
||
await loadAndRenderQualityData(inputStates);
|
||
|
||
// 将inputStates保存到全局，以便其他函数访问
|
||
window.inputStates = inputStates;
|
||
});
|
||
|
||
// 加载并渲染所有质检数据
|
||
async function loadAndRenderQualityData(inputStates) {
|
||
try {
|
||
// 获取所有质检数据
|
||
const qualityData = await fetchAllQualityData();
|
||
// 渲染到对应的输入框
|
||
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 = 'Redact';
|
||
buttonElement.classList.remove('confirm-btn');
|
||
|
||
// 更新状态
|
||
state.visible = false;
|
||
} catch (error) {
|
||
console.error('error:', error);
|
||
}
|
||
}
|
||
|
||
// 渲染质检数据到对应的输入框
|
||
function renderQualityData(responseData) {
|
||
console.log('loading data:', {
|
||
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 = `please enter ${fieldName}`;
|
||
|
||
// 保存输入框引用
|
||
state.input = input;
|
||
state.container = container;
|
||
state.displayElement = displayElement;
|
||
}
|
||
|
||
// 隐藏显示区域，显示输入框
|
||
displayElement.style.display = 'none';
|
||
container.insertBefore(state.input, buttonElement);
|
||
|
||
// 更新状态
|
||
state.visible = true;
|
||
|
||
// 修改按钮为确认按钮
|
||
buttonElement.textContent = 'Confirm';
|
||
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('success:', response.data);
|
||
return response.data;
|
||
} else {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('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 = 'Data query failed';
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 显示自定义确认对话框
|
||
function showConfirmDialog(message, onConfirm) {
|
||
// 创建遮罩层
|
||
const overlay = document.createElement('div');
|
||
overlay.style.position = 'fixed';
|
||
overlay.style.top = '0';
|
||
overlay.style.left = '0';
|
||
overlay.style.width = '100%';
|
||
overlay.style.height = '100%';
|
||
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||
overlay.style.display = 'flex';
|
||
overlay.style.justifyContent = 'center';
|
||
overlay.style.alignItems = 'center';
|
||
overlay.style.zIndex = '10000';
|
||
overlay.style.opacity = '0';
|
||
overlay.style.transition = 'opacity 0.3s ease';
|
||
|
||
// 创建对话框
|
||
const dialog = document.createElement('div');
|
||
dialog.style.backgroundColor = 'white';
|
||
dialog.style.borderRadius = '8px';
|
||
dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||
dialog.style.padding = '0';
|
||
dialog.style.minWidth = '320px';
|
||
dialog.style.maxWidth = '90%';
|
||
dialog.style.transform = 'scale(0.7)';
|
||
dialog.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
|
||
dialog.style.opacity = '0';
|
||
dialog.style.fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';
|
||
|
||
// 对话框头部
|
||
const header = document.createElement('div');
|
||
header.style.padding = '20px 20px 10px';
|
||
header.style.fontSize = '20px';
|
||
header.style.fontWeight = '500';
|
||
header.style.color = '#333';
|
||
header.style.textAlign = 'center';
|
||
header.textContent = 'Confirm operation';
|
||
|
||
// 对话框内容
|
||
const content = document.createElement('div');
|
||
content.style.padding = '10px 20px 20px';
|
||
content.style.fontSize = '16px';
|
||
content.style.color = '#666';
|
||
content.style.textAlign = 'center';
|
||
content.textContent = message;
|
||
|
||
// 对话框底部按钮区域
|
||
const footer = document.createElement('div');
|
||
footer.style.display = 'flex';
|
||
footer.style.justifyContent = 'center';
|
||
footer.style.padding = '15px';
|
||
footer.style.gap = '15px';
|
||
footer.style.backgroundColor = '#f8f9fa';
|
||
footer.style.borderTop = '1px solid #eee';
|
||
footer.style.borderRadius = '0 0 8px 8px';
|
||
|
||
// 取消按钮
|
||
const cancelButton = document.createElement('button');
|
||
cancelButton.textContent = 'Cancel';
|
||
cancelButton.style.padding = '10px 20px';
|
||
cancelButton.style.backgroundColor = '#fff';
|
||
cancelButton.style.border = '1px solid #dcdfe6';
|
||
cancelButton.style.borderRadius = '4px';
|
||
cancelButton.style.color = '#606266';
|
||
cancelButton.style.fontSize = '14px';
|
||
cancelButton.style.cursor = 'pointer';
|
||
cancelButton.style.transition = 'all 0.3s';
|
||
cancelButton.style.minWidth = '80px';
|
||
|
||
// 确认按钮
|
||
const confirmButton = document.createElement('button');
|
||
confirmButton.textContent = 'Confirm';
|
||
confirmButton.style.padding = '10px 20px';
|
||
confirmButton.style.backgroundColor = '#409eff';
|
||
confirmButton.style.border = '1px solid #409eff';
|
||
confirmButton.style.borderRadius = '4px';
|
||
confirmButton.style.color = 'white';
|
||
confirmButton.style.fontSize = '14px';
|
||
confirmButton.style.cursor = 'pointer';
|
||
confirmButton.style.transition = 'all 0.3s';
|
||
confirmButton.style.minWidth = '80px';
|
||
|
||
// 按钮悬停效果
|
||
cancelButton.addEventListener('mouseenter', function() {
|
||
this.style.backgroundColor = '#f5f5f5';
|
||
});
|
||
|
||
cancelButton.addEventListener('mouseleave', function() {
|
||
this.style.backgroundColor = '#fff';
|
||
});
|
||
|
||
confirmButton.addEventListener('mouseenter', function() {
|
||
this.style.backgroundColor = '#66b1ff';
|
||
this.style.borderColor = '#66b1ff';
|
||
});
|
||
|
||
confirmButton.addEventListener('mouseleave', function() {
|
||
this.style.backgroundColor = '#409eff';
|
||
this.style.borderColor = '#409eff';
|
||
});
|
||
|
||
// 按钮事件
|
||
cancelButton.onclick = function() {
|
||
closeDialog();
|
||
};
|
||
|
||
confirmButton.onclick = function() {
|
||
closeDialog();
|
||
if (onConfirm) onConfirm();
|
||
};
|
||
|
||
// 关闭对话框函数
|
||
function closeDialog() {
|
||
dialog.style.transform = 'scale(0.7)';
|
||
dialog.style.opacity = '0';
|
||
overlay.style.opacity = '0';
|
||
|
||
setTimeout(() => {
|
||
if (overlay.parentNode) {
|
||
document.body.removeChild(overlay);
|
||
}
|
||
}, 300);
|
||
}
|
||
|
||
// ESC键关闭对话框
|
||
function handleEscKey(event) {
|
||
if (event.key === 'Escape') {
|
||
closeDialog();
|
||
document.removeEventListener('keydown', handleEscKey);
|
||
}
|
||
}
|
||
|
||
// 组装对话框
|
||
footer.appendChild(cancelButton);
|
||
footer.appendChild(confirmButton);
|
||
|
||
dialog.appendChild(header);
|
||
dialog.appendChild(content);
|
||
dialog.appendChild(footer);
|
||
|
||
overlay.appendChild(dialog);
|
||
document.body.appendChild(overlay);
|
||
|
||
// 点击遮罩层关闭对话框
|
||
overlay.onclick = function(event) {
|
||
if (event.target === overlay) {
|
||
closeDialog();
|
||
document.removeEventListener('keydown', handleEscKey);
|
||
}
|
||
};
|
||
|
||
// 添加ESC键监听
|
||
document.addEventListener('keydown', handleEscKey);
|
||
|
||
// 动画显示
|
||
setTimeout(() => {
|
||
overlay.style.opacity = '1';
|
||
dialog.style.transform = 'scale(1)';
|
||
dialog.style.opacity = '1';
|
||
}, 10);
|
||
}
|
||
|
||
// 设置序列号
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const seriesNum = getUrlParameter('series');
|
||
const instrument = getUrlParameter('instrument');
|
||
if (seriesNum) {
|
||
}
|
||
|
||
// 获取URL中的well参数并更新h1标题
|
||
const wellName = getUrlParameter('well');
|
||
if (wellName) {
|
||
document.querySelector('h1').textContent = wellName;
|
||
}
|
||
}); |