// 获取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 instrument = getUrlParameter('instrument'); if (seriesNum) { document.getElementById('seriesNum').textContent = seriesNum + ' ' + 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) { document.getElementById('seriesNum').textContent = seriesNum + ' ' + instrumentNum; // 调用查询接口 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 || ""; const seriesNum = getUrlParameter('series') ; const instrument =getUrlParameter('instrument'); if (seriesNum) { document.getElementById('seriesNum').textContent = seriesNum+" "+instrument; } } //仪器施工汇总 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 = '上传附件'; 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'; // 添加计数器,用于跟踪有效文件数量 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 = '删除文件'; // 添加删除事件 deleteIcon.onclick = function() { showConfirmDialog('确定要删除这个文件吗?', () => { console.log('删除文件333333333333333333333333:', file.id); 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 = '编辑'; 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 = '请输入链接信息'; // 确认按钮(初始隐藏) const confirmLinkButton = document.createElement('button'); confirmLinkButton.className = 'confirm-link-btn'; confirmLinkButton.textContent = '确认'; 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_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 = '上传中...'; uploadButton.disabled = true; // 显示调试信息 console.log('发送的参数:', { id: id, wellName: wellName, opuser: opuser, instrument: instrument, series: series }); console.log('上传文件:11111111111111111111111111111111'); // 发送上传请求 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 = '已上传文件:'; 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 = '删除文件'; // 添加删除事件(添加这部分) deleteIcon.onclick = function() { showConfirmDialog('确定要删除这个文件吗?', () => { // 注意:这里可能需要根据实际情况调整参数 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() { console.log('下载文件111111111111111111111111:', realFileName); 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); // 可以在这里添加上传失败的处理逻辑 // 比如显示错误消息 alert('文件上传失败,请重试'); }) .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 = '已上传文件:'; 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 = '删除文件'; // 添加删除事件 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: '数据获取失败', 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 = 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 = '上传附件'; 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 = '已上传文件:'; 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 = '删除文件'; // 添加删除事件 deleteIcon.onclick = function() { showConfirmDialog('确定要删除这个文件吗?', () => { console.log('删除文件2222222222222222222:', file.id); 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 = '编辑'; 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 = '请输入链接信息'; // 确认按钮(初始隐藏) const confirmLinkButton = document.createElement('button'); confirmLinkButton.className = 'confirm-link-btn'; confirmLinkButton.textContent = '确认'; 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'; 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(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对象 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 = '上传中...'; uploadButton.disabled = true; // 显示调试信息 console.log('发送的参数:', { id: id, wellName: wellName, opuser: opuser, instrument: instrument, series: series }); console.log('上传文件:333333333333333333333333333'); // 发送上传请求 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]); } console.log('上传成功file:', file); setTimeout(() => { location.reload(); }, 500); // 局部刷新文件列表 refreshMaintenanceFileList(item.id,data.data.id, file,data.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 = ''; }); } // 模拟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 = `

维保信息

`; // 添加模态框到页面 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); // 检查返回结果 closeModal(); // 重新加载维保数据 location.reload(); }) .catch(function (error) { console.error('提交失败:', error); // 错误处理 alert('提交失败,请联系管理员'); }); } // 添加渲染部门信息的函数 function renderDeptInfo(data) { if (!data?.dept?.trim()) { console.warn("无部门信息"); deptContainer.textContent = "暂无部门信息"; 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); } } // 渲染质检数据到对应的输入框 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; } } // 显示自定义确认对话框 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 = '确认操作'; // 对话框内容 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 = '取消'; 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 = '确定'; 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) { document.getElementById('seriesNum').textContent = seriesNum + ' ' + instrument; } // 获取URL中的well参数并更新h1标题 const wellName = getUrlParameter('well'); if (wellName) { document.querySelector('h1').textContent = wellName; } });