From 819ec53de19995f7867b6502371ba0447d04d09b Mon Sep 17 00:00:00 2001 From: lupeng <1486083023@qq.com> Date: Tue, 19 Aug 2025 16:29:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E4=B8=8A?= =?UTF-8?q?=E7=9A=84=E5=86=92=E5=8F=B7=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/tool_detail.js | 1227 +++++++++++++++++++++++++++++++++++----- scripts/tools.js | 12 +- 2 files changed, 1082 insertions(+), 157 deletions(-) diff --git a/scripts/tool_detail.js b/scripts/tool_detail.js index b861cd1..277992b 100644 --- a/scripts/tool_detail.js +++ b/scripts/tool_detail.js @@ -120,133 +120,306 @@ function renderInstrumentData(data) { document.querySelector(".basic-info-table tbody tr:nth-child(3) td:nth-child(2)").textContent = data.version || ""; } -//上井情况汇总 +//仪器施工汇总 function populateBasicInfo(data){ const tbody = document.getElementById('wellDataBody'); if (!tbody) return; - + // 清空现有内容 tbody.innerHTML = ''; // 遍历数据并创建表格行 // 井上仪器信息 - data.data.forEach(item => { - const row = document.createElement('tr'); - - // 井名 - const wellNameCell = document.createElement('td'); - wellNameCell.textContent = item.wellName || ''; - - // 入井工作情况 (使用sampleField) - const sampleFieldCell = document.createElement('td'); - sampleFieldCell.textContent = item.sampleField || ''; - - // 施工井段 (使用valueInterval) - const valueIntervalCell = document.createElement('td'); - valueIntervalCell.textContent = item.valueInterval || ''; - - // 最高工作温度 (使用globalMax1 + °C) - const globalMax1Cell = document.createElement('td'); - globalMax1Cell.textContent = item.globalMax1 ? item.globalMax1 + '°C' : ''; - - // 最高承压 (使用globalMax2 + MPa) - const globalMax2Cell = document.createElement('td'); - globalMax2Cell.textContent = item.globalMax2 ? item.globalMax2 + 'MPa' : ''; - - // 仪器工作情况 (使用content) - const contentCell = document.createElement('td'); - contentCell.textContent = item.content || ''; - - // 上井人 (使用personnelList) - const personnelListCell = document.createElement('td'); - personnelListCell.textContent = item.personnelList || ''; - - // 文件列（合并了操作和文件） - const fileCell = document.createElement('td'); - fileCell.className = 'file-column'; - - // 上传附件部分 - const uploadDiv = document.createElement('div'); - const uploadInput = document.createElement('input'); - uploadInput.type = 'file'; - uploadInput.id = 'upload-' + item.id; - uploadInput.style.display = 'none'; - uploadInput.setAttribute('data-id', item.id); - - const uploadButton = document.createElement('button'); - uploadButton.textContent = '上传附件'; - uploadButton.className = 'upload-button'; // 使用统一的按钮样式 - uploadButton.onclick = function() { - uploadInput.click(); - }; - - uploadInput.onchange = function(e) { - handleFileUpload(e, item); - }; - - uploadDiv.appendChild(uploadInput); - uploadDiv.appendChild(uploadButton); - fileCell.appendChild(uploadDiv); - - // 文件列表部分 - if (item.data && item.data.length > 0) { - const fileListContainer = document.createElement('div'); - fileListContainer.className = 'file-list-container'; - fileListContainer.style.marginTop = '10px'; + if (data.data && Array.isArray(data.data)) { + data.data.forEach(item => { + const row = document.createElement('tr'); - const fileListTitle = document.createElement('div'); - fileListTitle.textContent = '已上传文件:'; - fileListTitle.style.fontSize = '12px'; - fileListTitle.style.color = '#666'; - fileListTitle.style.marginBottom = '5px'; - fileListTitle.style.fontWeight = 'bold'; + // 井名 + const wellNameCell = document.createElement('td'); + wellNameCell.textContent = item.wellName || ''; + wellNameCell.classList.add('table-cell-wrap', 'fixed-width-80'); - const fileListDiv = document.createElement('div'); - fileListDiv.className = 'file-list'; + // 入井工作情况 (使用sampleField) + const sampleFieldCell = document.createElement('td'); + sampleFieldCell.textContent = item.sampleField || ''; + sampleFieldCell.classList.add('table-cell-wrap', 'fixed-width-100'); - item.data.forEach(file => { - const fileItemDiv = document.createElement('div'); - fileItemDiv.className = 'file-item'; - fileItemDiv.style.padding = '3px 0'; + // 施工井段 (使用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 fileIcon = document.createElement('span'); - fileIcon.className = 'file-icon'; - fileIcon.innerHTML = '📄'; - fileIcon.style.fontSize = '14px'; + const fileListTitle = document.createElement('div'); + fileListTitle.textContent = '已上传文件:'; + fileListTitle.style.fontSize = '12px'; + fileListTitle.style.color = '#666'; + fileListTitle.style.marginBottom = '5px'; + fileListTitle.style.fontWeight = 'bold'; - // 创建文件链接 - const fileLink = document.createElement('a'); - fileLink.href = 'javascript:void(0)'; - fileLink.textContent = getFileNameFromPath(file.fileName); - fileLink.onclick = function() { - downloadFile(file.fileName.replace('./upload/', '')); - }; - fileLink.style.fontSize = '14px'; - fileLink.style.textDecoration = 'none'; + const fileListDiv = document.createElement('div'); + fileListDiv.className = 'file-list'; - fileItemDiv.appendChild(fileIcon); - fileItemDiv.appendChild(fileLink); - fileListDiv.appendChild(fileItemDiv); + // 添加计数器，用于跟踪有效文件数量 + 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(); }); - fileListContainer.appendChild(fileListTitle); - fileListContainer.appendChild(fileListDiv); - fileCell.appendChild(fileListContainer); - } - // 添加单元格到行中 - row.appendChild(wellNameCell); - row.appendChild(sampleFieldCell); - row.appendChild(valueIntervalCell); - row.appendChild(globalMax1Cell); - row.appendChild(globalMax2Cell); - row.appendChild(contentCell); - row.appendChild(personnelListCell); - row.appendChild(fileCell); // 合并后的文件列 + // 确认按钮点击事件 + 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); - }); + // 添加行到表格中 + tbody.appendChild(row); + }); + } + } // 从文件路径中提取文件名 @@ -254,8 +427,6 @@ function getFileNameFromPath(filePath) { if (!filePath) return ''; return filePath.split('/').pop(); } - -//下载 //下载 function downloadFile(fileName) { fetch('/deescloud/download_ds_file?id=' + encodeURIComponent(fileName)) @@ -292,12 +463,41 @@ function downloadFile(fileName) { }) .catch(error => { console.error('下载文件出错:', error); - alert('文件下载失败: ' + error.message); }); } +// 删除文件函数 +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 handleFileUpload(event, item) { +function handleMaintenanceFileUpload(event, item) { const file = event.target.files[0]; if (!file) return; @@ -313,15 +513,18 @@ function handleFileUpload(event, item) { // 添加额外参数（与Element UI示例中:data="upload_param(scope.row)"一致） // 确保正确获取item中的id const id = item.id || ''; - const wellName = item.wellName || ''; + const wellName = getUrlParameter('well') || ''; const opuser = localStorage.getItem("online_user") || ''; - const instrument = item.instrument || ''; + 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"); + formData.append('type', "tool_detail_repair"); + formData.append('series', series); + formData.append('instrument', instrument); // 显示上传中提示 const uploadButton = event.target.nextElementSibling; @@ -334,9 +537,10 @@ function handleFileUpload(event, item) { id: id, wellName: wellName, opuser: opuser, - instrument: instrument + instrument: instrument, + series: series }); - + console.log('上传文件:11111111111111111111111111111111'); // 发送上传请求 fetch('/deescloud/upload', { method: 'POST', @@ -351,7 +555,7 @@ function handleFileUpload(event, item) { } // 局部刷新文件列表 - refreshFileList(item.id, file); + refreshFileList(item.id, file,data.realFileName); }) .catch(error => { console.error('上传失败:', error); @@ -359,7 +563,6 @@ function handleFileUpload(event, item) { if (typeof upload_file_error === 'function') { upload_file_error(error, file, []); } - alert('文件上传失败: ' + error.message); }) .finally(() => { // 恢复按钮状态 @@ -371,19 +574,19 @@ function handleFileUpload(event, item) { } // 局部刷新文件列表 -function refreshFileList(itemId, uploadedFile) { +function refreshMaintenanceFileList(itemId,id, uploadedFile , realFileName) { // 查找对应行的文件列表容器 - const tbody = document.getElementById('wellDataBody'); + 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-${itemId}`); + const uploadInput = row.querySelector(`#upload-maintenance-${itemId}`); if (uploadInput) { // 找到对应的文件单元格 - const fileCell = row.cells[row.cells.length - 1]; // 最后一个单元格是文件列 + const fileCell = row.cells[row.cells.length - 2]; // 倒数第二列是文件列 if (fileCell) { // 查找或创建文件列表容器 let fileListContainer = fileCell.querySelector('.file-list-container'); @@ -414,12 +617,187 @@ function refreshFileList(itemId, uploadedFile) { 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.innerHTML = '📄'; 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); + 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'); @@ -427,14 +805,17 @@ function refreshFileList(itemId, uploadedFile) { fileLink.textContent = uploadedFile.name; // 由于刚上传的文件还没有ID，我们暂时使用文件名作为下载参数 fileLink.onclick = function() { - console.log('下载文件：', uploadedFile.name); - downloadFile(uploadedFile.name); + console.log('下载文件：222222222222', realFileName); + downloadFile(realFileName); }; fileLink.style.fontSize = '14px'; fileLink.style.textDecoration = 'none'; + fileLink.style.flex = '1'; - fileItemDiv.appendChild(fileIcon); - fileItemDiv.appendChild(fileLink); + // 按正确顺序添加元素 + fileItemDiv.appendChild(deleteIcon); // 删除图标 + fileItemDiv.appendChild(fileIcon); // 文件图标 + fileItemDiv.appendChild(fileLink); // 文件链接 fileListDiv.appendChild(fileItemDiv); } break; @@ -454,10 +835,6 @@ function upload_file_error(error, file, fileList) { } 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', { @@ -481,7 +858,7 @@ async function fetchToolData(wellName, seriesNum, instrumentNum, flag, content) //基本信息 renderInstrumentData(response.data); - //上井情况 + //仪器施工汇总 populateBasicInfo(response.data); //维保情况 populateMaintenanceInfo(response.data.data1); @@ -530,7 +907,7 @@ function populateMaintenanceInfo(data) { if (data.length === 0) { const emptyRow = document.createElement('tr'); const emptyCell = document.createElement('td'); - emptyCell.colSpan = 4; + emptyCell.colSpan = 6; // 更新为6列 emptyCell.textContent = '暂无维保记录'; emptyCell.style.textAlign = 'center'; emptyRow.appendChild(emptyCell); @@ -545,33 +922,405 @@ function populateMaintenanceInfo(data) { // 时间 (使用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字段，结合repair_level) + // 维保信息 (仅使用note字段) const noteCell = document.createElement('td'); - const levelText = item.repair_level ? `等级${item.repair_level}维保` : ''; - const noteText = item.note || ''; - noteCell.textContent = levelText && noteText ? `${levelText}，${noteText}` : (levelText || noteText || ''); + 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); + + // 局部刷新文件列表 + 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中的参数 @@ -613,14 +1362,15 @@ function populateMaintenanceInfo(data) {
-
- - -
+
+
+ + +
@@ -628,10 +1378,7 @@ function populateMaintenanceInfo(data) {
-
- - -
+ @@ -816,7 +1563,6 @@ async function confirmAndSave(buttonElement, fieldKey, inputElement, inputStates state.visible = false; } catch (error) { console.error('保存失败:', error); - alert('保存失败，请重试'); } } @@ -833,7 +1579,7 @@ function renderQualityData(responseData) { // 更新显示区域 const setDisplayValue = (id, value) => { const element = document.getElementById(id); - if (element) element.textContent = value || '暂无数据'; + if (element) element.textContent = value; }; setDisplayValue('processRecordDisplay', process_record); @@ -979,3 +1725,180 @@ async function fetchQualityData(fieldKey, inputElement) { 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'); + if (seriesNum) { + document.getElementById('seriesNum').textContent = seriesNum; + } + + // 获取URL中的well参数并更新h1标题 + const wellName = getUrlParameter('well'); + if (wellName) { + document.querySelector('h1').textContent = wellName; + } +}); \ No newline at end of file diff --git a/scripts/tools.js b/scripts/tools.js index d447af4..ca1eea8 100644 --- a/scripts/tools.js +++ b/scripts/tools.js @@ -169,6 +169,8 @@ var toolscomponent = { console.log(response.data); var fileid = response.data.fileId; var downUrl = 'file/' + fileid; + console.log("downUrl-----------",downUrl); + console.log("wellNameSource-----------",row.wellNameSource); downloadUrl(row.wellNameSource + "-仪器状态报告.pdf", downUrl); }) .catch(function (error) { @@ -188,7 +190,9 @@ var toolscomponent = { console.log(response.data); var fileid = response.data.fileId; var downUrl = 'file/' + fileid; - // downloadUrl(row.wellNameSource + "-仪器报告.pdf", downUrl); + console.log("downUrl-----------",downUrl); + console.log("wellNameSource-----------",row.wellNameSource); + downloadUrl(row.wellNameSource + "-仪器报告.pdf", downUrl); }) .catch(function (error) { console.log(error); @@ -291,9 +295,7 @@ var toolscomponent = { console.log(error); }); }, - - // 新增：打开详情页方法 - // 新增：打开详情页方法 + // 新增：打开详情页方法 openDetail(item) { // 使用当前井名和预警项ID构建详情页URL const wellName = this.currentWellName; // 不要预先编码 @@ -310,7 +312,7 @@ var toolscomponent = { series: item.series_num, instrument: item.instrument_id, flag:item.flag, - content: item.content || '' + content: item.context || '' }); // 完整URL