// 获取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 = `