修改前端页面

.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

scripts/tool_detail.js

@@ -1420,12 +1420,12 @@ function upload_file_error(error, file, fileList) {
     }
     
     // 提交维保记录函数
-    function submitMaintenanceRecord() {
+  function submitMaintenanceRecord() {
         // 获取表单数据
         const formData = {
             series: document.getElementById('seriesInput').value,
             instrument_id: document.getElementById('instrumentIdInput').value,
-            repair_cnt: document.getElementById('repairCntInput').value,
+            // repair_cnt: document.getElementById('repairCntInput').value,
             repair_level: document.getElementById('repairLevelInput').value,
             applicanter: document.getElementById('applicanterInput').value,
             note: document.getElementById('noteInput').value,
@@ -1441,13 +1441,21 @@ function upload_file_error(error, file, fileList) {
             ...formData
         })
         .then(function (response) {
-            console.log('提交成功:', response.data);
+            console.log('/deescloud/postLcm:', response.data);
-            closeModal();
+            // 检查返回结果
-            // 重新加载维保数据
+            if (response.data.r === -1) {
-            location.reload();
+                alert('您处于离线状态，请重新登录');
+            } else {
+                closeModal();
+                location.reload();
+            }
         })
         .catch(function (error) {
             console.error('提交失败:', error);
+            // 错误处理
+            
+            alert('提交失败，请联系管理员');
+            
         });
     }
 

scripts/tools-en.js

@@ -41,7 +41,7 @@
 					</el-table-column>
 					<el-table-column
 					      label="Operation"
-					      width="160">
+					      width="260">
 					      <template slot-scope="scope">
 							  <div style="flex: 1;display: inline-flex;">
 								<div v-if="!scope.row.tsw">
@@ -49,7 +49,8 @@
 								</div>
 							  	<el-button @click="show_pdf(scope.row)" type="text" size="medium">Report Detail</el-button>
 								<el-button @click="export_pdf(scope.row)" type="text" size="medium">Export</el-button>
-							  							
+								<el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">Export(Testing)</el-button>
+						
 							  </div>
 							  
 						  </template>
@@ -68,52 +69,119 @@
 			      :total="recordTotal" style="background-color: #ECF5FF;">
 			    </el-pagination>
 			  </div>
+
+
+
+<!-- 仪器状态弹窗 -->
+      <el-dialog
+        title="Instrument Status Message"
+        :visible.sync="pdf_visible"
+        :lock-scroll="false"
+        :append-to-body="true"
+        width="60%"
+      >
+        <div style="height: 450px; overflow: auto;">
+        <div v-if="tool_warning_data.length > 0">
+          <div>Risk warning:</div>
+
+
+
+
+         <div v-for="item in tool_warning_data" :key="item.id">
+            <div style="display: flex; padding-top: 10px; align-items: center;">
+              <div 
+                style="width: 100%;" 
+                :style="{ color: item.flag === 1 ? 'red' : 'inherit' }"
+              >
+                <span style="font-weight: 500;">
+                  <template v-if="item.flag === 0">
+                    {{ item.series_num }} {{ item.instrument_id }} | Instrument Normal
+                  </template>
+                  
+                  <template v-else>
+                    {{ item.time }} | {{ item.series_num }} |
+                  </template>
+                </span>
+
+                <template v-if="item.flag === 1">
+                  <span style="margin-left: 6px;">
+                    {{ item.err_level }} | {{ item.context }}
+                  </span>
+                </template>
+
+                <el-button
+                  v-if="item.series_num"
+                  @click="openDetail(item)"
+                  type="text"
+                  size="medium"
+                  style="margin-left: 12px; padding: 0 4px;"
+                >
+                  Details
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          
+        </div>
+
+          <div v-if="tool_warning_data.length == 0">
+            <div>The instruments in this well are working normally</div>
+           	</div>
+			<el-divider></el-divider>
+			</div>
+      </el-dialog>
+
+
+
+
+
 			  
-			<el-dialog
+			// <el-dialog
-			 title="Instrument Status Information"
+			//  title="Instrument Status Information"
-			 :visible.sync="pdf_visible"
+			//  :visible.sync="pdf_visible"
-			 :lock-scroll ="false"
+			//  :lock-scroll ="false"
-			 :append-to-body="true"
+			//  :append-to-body="true"
-			 width="60%">
+			//  width="60%">
-				<div style="height: 450px;overflow: auto;">
+			// 	<div style="height: 450px;overflow: auto;">
-					<div v-if="tool_warning_data.length>0">
+			// 		<div v-if="tool_warning_data.length>0">
-						<div>Risk warning: </div>
+			// 			<div>Risk warning: </div>
-						<div v-for="item in tool_warning_data">
+			// 			<div v-for="item in tool_warning_data">
-							<div style="display: flex;padding-top: 10px;">
+			// 				<div style="display: flex;padding-top: 10px;">
-								<div style="width: 100%;">
+			// 					<div style="width: 100%;">
-									{{item.time}}
+			// 						{{item.time}}
-									&nbsp;{{item.err_level}}: 
+			// 						&nbsp;{{item.err_level}}: 
-									&nbsp;{{item.context}}
+			// 						&nbsp;{{item.context}}
-								</div>
+			// 					</div>
-							</div>
+			// 				</div>
-						</div>
+			// 			</div>
-					</div>
+			// 		</div>
-					<div v-if="tool_warning_data.length==0">
+			// 		<div v-if="tool_warning_data.length==0">
-						<div>The instruments in this well are working normally.</div>
+			// 			<div>No instrument information has been uploaded to this well.</div>
-					</div>
+			// 		</div>
-					<el-divider></el-divider>
+			// 		<el-divider></el-divider>
-				</div>
+			// 	</div>
-			</el-dialog>
+			// </el-dialog>
 		</div>
 		`,
 	data(){
 		// 获取当前屏幕的分辨率
-		let screenW = window.screen.width;
+		 let screenW = window.screen.width;
 		let screenH = window.innerHeight;
-		console.log("screen width:",screenW);
+		console.log("screen width:", screenW);
-		console.log("screen height:",screenH);
+		console.log("screen height:", screenH);
-	  return {
+		return {
-		tHeight:screenH-192,
+		tHeight: screenH - 192,
 		tableData: Array(0),
-		input:'',
+		input: '',
 		currentPage: 1,
-		pagesize:50,
+		pagesize: 50,
-		recordTotal:0,
+		recordTotal: 0,
-		
+		pdf_visible: false,
-		pdf_visible:false,
+		tool_warning_data: [],
-		tool_warning_data:{},
+		checked: false,
-		checked:false,
+		currentWellName: '' // 新增：存储当前查看的井名
-	  }
+		};
 	},
 	mounted() {
 		var _this = this;
@@ -151,14 +219,35 @@
 				var fileid = response.data.fileId;
 				
 				var downUrl = 'file/'+fileid;
-				downloadUrl(row.wellNameSource+"-Instrument status report.pdf",downUrl);
+				downloadUrl(row.wellNameSource+"_Instrument status report.pdf",downUrl);
 			})
 			.catch(function (error) {
 				console.log(error);
 			});
 		},
+
+		    export_mess_pdf(row) {
+				var _this = this;
+				axios.post('deescloud/get_tool_mess_pdf_en', {
+					opuser: localStorage.getItem("online_user"),
+					opuser_uuid: localStorage.getItem("uuid"),
+					wellname: row.wellNameSource
+				})
+				.then(function (response) {
+					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 + "_Instrument status report.pdf", downUrl);
+				})
+				.catch(function (error) {
+					console.log(error);
+				});
+			},
 		show_pdf(row){
 			let _this= this;
+			this.currentWellName = row.wellNameSource;
 			axios.post('/deescloud/get_tool_warning_en', {
 				opuser:localStorage.getItem("online_user"),
 				opuser_uuid:localStorage.getItem("uuid"),
@@ -255,6 +344,33 @@
 				});
 				
 		},
+
+		 // 新增：打开详情页方法
+		openDetail(item) {
+		// 使用当前井名和预警项ID构建详情页URL
+		const wellName = this.currentWellName; // 不要预先编码
+		// 使用预警ID或时间戳作为唯一标识
+			
+		// 构建基础URL，参数留待URLSearchParams处理
+		const detailUrl = 'tool_detail-en.html';
+		
+		// 使用URLSearchParams自动处理编码
+		const params = new URLSearchParams({
+			well: wellName,
+			id: item.opuser_uuid,
+			name : item.name,
+			series: item.series_num,
+			instrument: item.instrument_id,
+			flag:item.flag,
+			content: item.context || ''
+		});
+		
+		// 完整URL
+		const fullUrl = `${detailUrl}?${params.toString()}`;
+		
+		// 在新标签页打开详情页
+		window.open(fullUrl, '_blank');
+		}
 		
 	  }
 	}

scripts/tools.js

@@ -22,7 +22,7 @@ var toolscomponent = {
           <el-table-column prop="welltime" label="建井时间" :width="170"></el-table-column>
           <el-table-column prop="welloperator" label="操作用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
           <el-table-column prop="upload_user" label="上传用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column label="操作" width="240">
+          <el-table-column label="操作" width="200">
             <template slot-scope="scope">
               <div style="flex: 1; display: inline-flex;">
                 <div v-if="!scope.row.tsw">
@@ -32,7 +32,7 @@ var toolscomponent = {
                 </div>
                 <el-button @click="show_pdf(scope.row)" type="text" size="medium">报告明细</el-button>
                 <el-button @click="export_pdf(scope.row)" type="text" size="medium">导出</el-button>
-                <el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">仪器报告导出</el-button>
+                <el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">导出(测试中)</el-button>
               </div>
             </template>
           </el-table-column>
@@ -63,7 +63,6 @@ var toolscomponent = {
         width="60%"
       >
         <div style="height: 450px; overflow: auto;">
-
         <div v-if="tool_warning_data.length > 0">
           <div>风险预警:</div>
 
@@ -78,7 +77,7 @@ var toolscomponent = {
               >
                 <span style="font-weight: 500;">
                   <template v-if="item.flag === 0">
-                    {{ item.series_num }} {{ item.instrument_id }} | 仪器正常
+                    {{ item.series_num }} - {{ item.instrument_id }} | 仪器正常
                   </template>
                   
                   <template v-else>
@@ -109,7 +108,7 @@ var toolscomponent = {
         </div>
 
           <div v-if="tool_warning_data.length == 0">
-            <div>本口井仪器工作正常。</div>
+            <div>本口井未上传仪器信息</div>
           </div>
           <el-divider></el-divider>
         </div>
@@ -117,7 +116,6 @@ var toolscomponent = {
     </div>
   `,
   data() {
-    // 获取当前屏幕的分辨率
     let screenW = window.screen.width;
     let screenH = window.innerHeight;
     console.log("screen width:", screenW);
@@ -171,7 +169,7 @@ var toolscomponent = {
         var downUrl = 'file/' + fileid;
         console.log("downUrl-----------",downUrl);
         console.log("wellNameSource-----------",row.wellNameSource);
-        downloadUrl(row.wellNameSource + "-仪器状态报告.pdf", downUrl);
+        downloadUrl(row.wellNameSource + "_仪器状态报告.pdf", downUrl);
       })
       .catch(function (error) {
         console.log(error);
@@ -192,7 +190,7 @@ var toolscomponent = {
         var downUrl = 'file/' + fileid;
         console.log("downUrl-----------",downUrl);
         console.log("wellNameSource-----------",row.wellNameSource);
-        downloadUrl(row.wellNameSource + "-仪器报告.pdf", downUrl);
+        downloadUrl(row.wellNameSource + "_仪器报告.pdf", downUrl);
       })
       .catch(function (error) {
         console.log(error);

tool_detail-en.html

@@ -0,0 +1,581 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Summary of Instrument Information</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        body {
+            background: white;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            background: white;
+            padding: 40px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        }
+        
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #eee;
+        }
+        
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 600;
+            color: #222;
+            margin-bottom: 10px;
+        }
+        
+        .subtitle {
+            font-size: 1.1rem;
+            color: #666;
+        }
+        
+        .info-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            border: 1px solid #e0e0e0;
+            border-radius: 5px;
+        }
+        .file-item a {
+            font-size: 14px;
+            text-decoration: none;
+        }
+        
+        /* 基本信息无边框表格样式 */
+        .basic-info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .basic-info-table th, 
+        .basic-info-table td {
+            padding: 15px 20px;
+            text-align: left;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .basic-info-table th {
+            background-color: transparent;
+        }
+
+        /* 其他表格样式保持不变 */
+        .info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            table-layout: fixed; 
+        }
+        
+        .info-table th, 
+        .info-table td {
+            padding: 15px;
+            text-align: center;
+            border: 1px solid #e0e0e0;
+        }
+        
+        .info-table th {
+            background-color: #f5f7fa;
+            font-weight: 400;
+            color: #333;
+        }
+        
+        .info-table td {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #222;
+        }
+        
+        /* 固定宽度列样式 */
+        .fixed-width-260 {
+            width: 200px;
+        }
+        
+        .fixed-width-160 {
+            width: 160px;
+        }
+        
+        .fixed-width-180 {
+            width: 180px;
+        }
+        
+        .fixed-width-90 {
+            width: 90px;
+        }   
+
+        .fixed-width-100 {
+            width: 100px;
+        }
+        
+        .fixed-width-80 {
+            width: 80px;
+        }
+        
+        .fixed-width-40 {
+            width: 40px;
+        }
+        
+        /* 表格内容换行样式 */
+        .table-cell-wrap {
+            word-wrap: break-word;
+            word-break: break-all;
+            white-space: normal;
+        }
+        
+        .info-row {
+            display: flex;
+            margin-bottom: 25px;
+            flex-wrap: wrap;
+        }
+        
+        .info-item {
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        
+        .info-label {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 8px;
+            text-align: center;
+        }
+        
+        .info-value {
+            font-size: 1.1rem;
+            color: #333;
+            padding: 8px 0;
+            text-align: center;
+        }
+        
+        .stat-card {
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
+            padding: 15px;
+            margin-top: 10px;
+            text-align: center;
+        }
+        
+        .stat-title {
+            font-size: 1rem;
+            color: #555;
+            margin-bottom: 10px;
+        }
+        
+        .stat-value {
+            font-size: 1.8rem;
+            font-weight: 700;
+        }
+        
+        footer {
+            text-align: center;
+            padding: 20px 0;
+            color: #777;
+            font-size: 0.9rem;
+            border-top: 1px solid #eee;
+            margin-top: 40px;
+        }
+
+        /* 内部组件样式 */
+        .component-item {
+            display: flex;
+            margin-bottom: 15px;
+            padding: 12px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .component-item:last-child {
+            border-bottom: none;
+        }
+
+        .component-name {
+            width: 150px;
+            font-weight: 400;
+            color: #444;
+            padding-right: 10px;
+        }
+
+        .component-detail {
+            flex: 1;
+            color: #666;
+        }
+                
+        .quality-item {
+            margin-bottom: 15px;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .quality-header {
+            display: flex;
+            align-items: center;
+            width: 100%;
+        }
+
+        .quality-title {
+            font-size: 1.1rem;
+            color: #333;
+            font-weight: 500;
+            width: auto;
+            padding-right: 10px;
+            margin-left: 40px;
+            flex-shrink: 0;
+        }
+
+        .quality-display {
+            flex: 1;
+            padding: 6px 12px;
+            min-height: 20px;
+            margin-right: 10px;
+        }
+
+        .edit-btn {
+            padding: 6px 12px;
+            background-color: #409eff;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: white;
+            font-size: 14px;
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+
+        .edit-input {
+            flex: 1;
+            padding: 6px 12px;
+            border: 1px solid #dcdfe6;
+            border-radius: 4px;
+            font-size: 14px;
+            margin-right: 10px;
+            min-width: 200px;
+        }
+
+        .confirm-btn {
+            background-color: #67c23a;
+            border-color: #67c23a;
+        }
+
+
+        /* 文件列表样式 */
+        .file-list {
+            margin-top: 10px;
+            text-align: left;
+        }
+
+        .file-item {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+        }
+
+        .file-item a {
+            color: #409eff;
+            text-decoration: none;
+            margin-left: 5px;
+        }
+
+        .file-item a:hover {
+            text-decoration: underline;
+        }
+
+        .file-icon {
+            color: #409eff;
+            margin-right: 5px;
+        }
+
+
+                /* 文件列表样式 */
+        .file-list {
+            margin-top: 10px;
+            text-align: left;
+        }
+        
+        .file-item {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+        }
+        
+        .file-item a {
+            color: #409eff;
+            text-decoration: none;
+            margin-left: 5px;
+        }
+        
+        .file-item a:hover {
+            text-decoration: underline;
+        }
+        
+        .file-icon {
+            color: #409eff;
+            margin-right: 5px;
+        }
+        
+        /* 文件列样式 */
+        .file-column {
+            text-align: left;
+        }
+        
+        .upload-button {
+            background-color: #409eff;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: white;
+            padding: 6px 12px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .upload-button:hover {
+            background-color: #66b1ff;
+            border-color: #66b1ff;
+        }
+        
+        .upload-button:disabled {
+            background-color: #a0cfff;
+            border-color: #a0cfff;
+            cursor: not-allowed;
+        }
+        .fixed-width-40 {
+            width: 50px;
+        }
+
+        .fixed-width-80 {
+            width: 80px;
+        }
+        .fixed-width-140 {
+            width: 140px;
+        }
+        .fixed-width-130 {
+            width: 130px;
+        }
+        .fixed-width-180 {
+            width: 180px;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+            }
+            
+            h1 {
+                font-size: 2rem;
+            }
+            
+            .info-table th, 
+            .info-table td {
+                padding: 10px 5px;
+                font-size: 0.9rem;
+            }
+            
+            .info-table td {
+                font-size: 1rem;
+            }
+
+            .component-item {
+                flex-direction: column;
+            }
+
+            .component-name {
+                width: 100%;
+                margin-bottom: 5px;
+            }
+        }
+    </style>
+</head>
+<script src="./scripts/tool_detail-en.js"></script>
+<script src="scripts/axiosmin.js"></script>
+<script src="./scripts/polyfill.js"></script>
+<script src="./scripts/vue.min.js"></script>
+<script src="./scripts/vue-router.js"></script>
+
+
+<body>
+    <div class="container">
+        <header>
+            <h1></h1>
+        </header>
+        
+        <div class="content">
+           <div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 400;">
+                Instrument Name: <span id="seriesNum"></span>
+            </div>
+            <div class="info-section">
+                <h2 class="info-label">Basic information</h2>
+                <div style="padding: 0 20px;"> 
+                    <table class="basic-info-table">
+                        <tbody>
+                            <tr>
+                                <th>Date of manufacture:</th>
+                                <td></td>
+                                <th>Date of warehousing:</th>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>Working hours:</td>
+                                <td></td>
+                                <td>This working hours:</td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>Firmware version:</td>
+                                <td colspan="3"></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div> 
+            </div>
+      <div class="info-section">
+        <h2 class="info-label">Product Quality Inspection Record</h2>
+        <div style="padding: 15px 0;">
+    <!-- 生产过程记录 -->
+    <div class="quality-item">
+        <div class="quality-header">
+            <div class="quality-title">Production Process Record:</div>
+            <div class="quality-display" id="processRecordDisplay"></div>
+            <button id="editProcessRecord" class="edit-btn" style="margin-right: 120px;">Redact</button>
+        </div>
+    </div>
+    
+    <!-- 生产过程检验 -->
+    <div class="quality-item">
+        <div class="quality-header">
+            <div class="quality-title">Production Process Inspection:</div>
+            <div class="quality-display" id="processInspectionDisplay"></div>
+            <button id="editProcessInspection" class="edit-btn" style="margin-right: 120px;">Redact</button>
+        </div>
+    </div>
+    
+    <!-- 成品检验记录 -->
+    <div class="quality-item">
+        <div class="quality-header">
+            <div class="quality-title">Final Inspection Display:</div>
+            <div class="quality-display" id="finalInspectionDisplay"></div>
+            <button id="editFinalInspection" class="edit-btn" style="margin-right: 120px;">Redact</button>
+        </div>
+    </div>
+</div>
+        </div>
+            <div class="info-section">
+                <h2 class="info-label">Summary of Instrument Construction</h2>
+                <table class="info-table">
+                    <thead>
+                        <tr>
+                            <th class="table-cell-wrap" style="width: 10;">Well name</th>
+                            <th class="table-cell-wrap">Well work situation</th>
+                            <th class="fixed-width-130 table-cell-wrap">well section</th>
+                            <th class="table-cell-wrap">Max temp</th>
+                            <th class="fixed-width-130 table-cell-wrap">Max pressure</th>
+                            <th class="fixed-width-80 table-cell-wrap">Status</th>
+                            <th class="table-cell-wrap">Persion</th>
+                            <th class="table-cell-wrap">File</th>
+                            <th class="fixed-width-260 table-cell-wrap">Url</th>
+                        </tr>
+                    </thead>
+                    <tbody id="wellDataBody">
+                    </tbody>
+                  
+                </table>
+            </div>
+
+            <div class="info-section">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="flex: 1;"></div>
+                    <h2 class="info-label" style="flex: 1; text-align: center;">Maintenance and repair situation</h2>
+                    <div style="flex: 1; display: flex; justify-content: flex-end;">
+                        <button id="bt_add" style="margin-left: 5px; padding: 8px 16px; background-color: #67c23a; border: 1px solid #67c23a; border-radius: 4px; color: white; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center;" onclick="addMaintenanceRecord()">
+                            <i style="margin-right: 5px;">
+                                <svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor">
+                                    <path d="M512 128C304.3 128 128 304.3 128 512s176.3 384 384 384 384-176.3 384-384S719.7 128 512 128z m0 64c176.7 0 320 143.3 320 320s-143.3 320-320 320S192 688.7 192 512 335.3 192 512 192z m48 304h-96v96h-96v-96H320v-96h96v-96h96v96h96v96z"></path>
+                                </svg>
+                            </i>
+                            add
+                        </button>
+                    </div>
+                </div>
+                
+                <table class="info-table">
+                    <thead>
+                        <tr>
+                            <th class="fixed-width-100 table-cell-wrap">Time</th>
+                            <th class="fixed-width-40 table-cell-wrap">Level</th>
+                            <th class="fixed-width-140 table-cell-wrap">Maintenance info</th>
+                            <th class="fixed-width-90 table-cell-wrap">Maintenance person</th>
+                            <th class="fixed-width-160 table-cell-wrap">File</th>
+                            <th class="fixed-width-260 table-cell-wrap">Url</th>
+                        </tr>
+                    </thead>
+                    <tbody id="maintenanceDataBody">
+                        <tr>
+                            <td colspan="6" style="text-align: center;">No data</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="info-section">
+                <h2 class="info-label">Internal components</h2>
+                
+                <div class="no-data">No Data</div>
+
+            </div>
+
+            <div class="info-section">
+                <h2 class="info-label">The department to which the instrument belongs</h2>
+    
+                <div class="component-item">
+                    <div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">No Data</div>
+                </div>
+            </div>
+        </div>
+        
+        <footer>
+            <p>All rights reserved © Beijing Liuhe Weiye Technology Co., LTD</p>
+        </footer>
+    </div>
+
+
+<script>
+    // 获取URL参数
+    function getUrlParameter(name) {
+        name = name.replace(/[\[\]]/g, '\\$&');
+        const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+        const results = regex.exec(window.location.href);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    }
+
+    // 设置序列号
+    document.addEventListener('DOMContentLoaded', function() {
+        const seriesNum = getUrlParameter('series');
+        if (seriesNum) {
+            document.getElementById('seriesNum').textContent = seriesNum;
+        }
+    });
+</script>
+
+</body>
+</html>

tool_detail.html

@@ -54,6 +54,10 @@
             border: 1px solid #e0e0e0;
             border-radius: 5px;
         }
+        .file-item a {
+            font-size: 14px;
+            text-decoration: none;
+        }
         
         /* 基本信息无边框表格样式 */
         .basic-info-table {
@@ -68,25 +72,21 @@
         .basic-info-table td {
             padding: 15px 20px;
             text-align: left;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #333;
         }
 
         .basic-info-table th {
             background-color: transparent;
-            font-weight: 600;
-            color: #333;
         }
 
-        .basic-info-table td {
-            font-size: 1.1rem;
-            font-weight: 500;
-            color: #222;
-        }
-        
         /* 其他表格样式保持不变 */
         .info-table {
             width: 100%;
             border-collapse: collapse;
             margin-top: 20px;
+            table-layout: fixed; 
         }
         
         .info-table th, 
@@ -98,7 +98,7 @@
         
         .info-table th {
             background-color: #f5f7fa;
-            font-weight: 600;
+            font-weight: 400;
             color: #333;
         }
         
@@ -108,6 +108,38 @@
             color: #222;
         }
         
+        /* 固定宽度列样式 */
+        .fixed-width-260 {
+            width: 260px;
+        }
+        
+        .fixed-width-160 {
+            width: 160px;
+        }
+        
+        .fixed-width-180 {
+            width: 180px;
+        }
+        
+        .fixed-width-100 {
+            width: 100px;
+        }
+        
+        .fixed-width-80 {
+            width: 80px;
+        }
+        
+        .fixed-width-40 {
+            width: 40px;
+        }
+        
+        /* 表格内容换行样式 */
+        .table-cell-wrap {
+            word-wrap: break-word;
+            word-break: break-all;
+            white-space: normal;
+        }
+        
         .info-row {
             display: flex;
             margin-bottom: 25px;
@@ -122,15 +154,14 @@
         .info-label {
             font-size: 1.1rem;
             font-weight: 500;
-            color: #555;
+            color: #333;
             margin-bottom: 8px;
             text-align: center;
         }
         
         .info-value {
-            font-size: 1.4rem;
+            font-size: 1.1rem;
-            font-weight: 600;
+            color: #333;
-            color: #222;
             padding: 8px 0;
             text-align: center;
         }
@@ -177,7 +208,7 @@
 
         .component-name {
             width: 150px;
-            font-weight: 600;
+            font-weight: 400;
             color: #444;
             padding-right: 10px;
         }
@@ -202,7 +233,10 @@
         .quality-title {
             font-size: 1.1rem;
             color: #333;
-            width: 120px;
+            font-weight: 500;
+            width: auto;
+            padding-right: 10px;
+            margin-left: 40px;
             flex-shrink: 0;
         }
 
@@ -321,7 +355,17 @@
             border-color: #a0cfff;
             cursor: not-allowed;
         }
+        .fixed-width-40 {
+            width: 50px;
+        }
 
+        .fixed-width-80 {
+            width: 80px;
+        }
+
+        .fixed-width-180 {
+            width: 180px;
+        }
         @media (max-width: 768px) {
             .container {
                 padding: 20px;
@@ -358,14 +402,15 @@
 <script src="./scripts/vue.min.js"></script>
 <script src="./scripts/vue-router.js"></script>
 
+
 <body>
     <div class="container">
         <header>
-            <h1>仪器汇总</h1>
+            <h1></h1>
         </header>
         
         <div class="content">
-           <div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 600;">
+           <div style="text-align: left; margin-bottom: 20px; font-size: 1.2rem; font-weight: 400;">
                 仪器名称： <span id="seriesNum"></span>
             </div>
             <div class="info-section">
@@ -374,19 +419,19 @@
                     <table class="basic-info-table">
                         <tbody>
                             <tr>
-                                <th>出厂日期</th>
+                                <th>出厂日期：</th>
                                 <td></td>
-                                <th>入库日期</th>
+                                <th>入库日期：</th>
                                 <td></td>
                             </tr>
                             <tr>
-                                <td>累计工作时间</td>
+                                <td>累计工作时间：</td>
                                 <td></td>
-                                <td>当次工作时间</td>
+                                <td>当次累计工作时间：</td>
                                 <td></td>
                             </tr>
                             <tr>
-                                <td>固件版本号</td>
+                                <td>固件版本号：</td>
                                 <td colspan="3"></td>
                             </tr>
                         </tbody>
@@ -394,32 +439,32 @@
                 </div> 
             </div>
       <div class="info-section">
-        <h2 class="info-label">质检记录</h2>
+        <h2 class="info-label">产品质检记录</h2>
         <div style="padding: 15px 0;">
     <!-- 生产过程记录 -->
     <div class="quality-item">
         <div class="quality-header">
-            <div class="quality-title">生产过程记录</div>
+            <div class="quality-title">生产过程记录：</div>
             <div class="quality-display" id="processRecordDisplay"></div>
-            <button id="editProcessRecord" class="edit-btn">编辑</button>
+            <button id="editProcessRecord" class="edit-btn" style="margin-right: 120px;">编辑</button>
         </div>
     </div>
     
     <!-- 生产过程检验 -->
     <div class="quality-item">
         <div class="quality-header">
-            <div class="quality-title">生产过程检验</div>
+            <div class="quality-title">生产过程检验：</div>
             <div class="quality-display" id="processInspectionDisplay"></div>
-            <button id="editProcessInspection" class="edit-btn">编辑</button>
+            <button id="editProcessInspection" class="edit-btn" style="margin-right: 120px;">编辑</button>
         </div>
     </div>
     
     <!-- 成品检验记录 -->
     <div class="quality-item">
         <div class="quality-header">
-            <div class="quality-title">成品检验记录</div>
+            <div class="quality-title">成品检验记录：</div>
             <div class="quality-display" id="finalInspectionDisplay"></div>
-            <button id="editFinalInspection" class="edit-btn">编辑</button>
+            <button id="editFinalInspection" class="edit-btn" style="margin-right: 120px;">编辑</button>
         </div>
     </div>
 </div>
@@ -429,14 +474,15 @@
                 <table class="info-table">
                     <thead>
                         <tr>
-                            <th>井名</th>
+                            <th class="fixed-width-80 table-cell-wrap">井名</th>
-                            <th>入井工作情况</th>
+                            <th class="fixed-width-100 table-cell-wrap">入井工作情况</th>
-                            <th>施工井段</th>
+                            <th class="fixed-width-100 table-cell-wrap">施工井段</th>
-                            <th>最高工作温度</th>
+                            <th class="fixed-width-80 table-cell-wrap">最高工作温度</th>
-                            <th>最高承压</th>
+                            <th class="fixed-width-80 table-cell-wrap">最高承压</th>
-                            <th>仪器工作情况</th>
+                            <th class="fixed-width-80 table-cell-wrap">仪器工作情况</th>
-                            <th>上井人</th>
+                            <th class="fixed-width-100 table-cell-wrap">上井人</th>
-                            <th>文件</th>
+                            <th class="fixed-width-160 table-cell-wrap">文件</th>
+                            <th class="fixed-width-260 table-cell-wrap">链接</th>
                         </tr>
                     </thead>
                     <tbody id="wellDataBody">
@@ -447,28 +493,35 @@
 
             <div class="info-section">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <h2 class="info-label">维保情况</h2>
+                    <div style="flex: 1;"></div>
-                    <button id="bt_add" style="margin-left: 5px; padding: 8px 16px; background-color: #409eff; border: 1px solid #409eff; border-radius: 4px; color: white; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center;" onclick="addMaintenanceRecord()">
+                    <h2 class="info-label" style="flex: 1; text-align: center;">维保情况</h2>
-                        <i style="margin-right: 5px;">
+                    <div style="flex: 1; display: flex; justify-content: flex-end;">
-                            <svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor">
+                        <button id="bt_add" style="margin-left: 5px; padding: 8px 16px; background-color: #67c23a; border: 1px solid #67c23a; border-radius: 4px; color: white; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center;" onclick="addMaintenanceRecord()">
-                                <path d="M512 128C304.3 128 128 304.3 128 512s176.3 384 384 384 384-176.3 384-384S719.7 128 512 128z m0 64c176.7 0 320 143.3 320 320s-143.3 320-320 320S192 688.7 192 512 335.3 192 512 192z m48 304h-96v96h-96v-96H320v-96h96v-96h96v96h96v96z"></path>
+                            <i style="margin-right: 5px;">
-                            </svg>
+                                <svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor">
-                        </i>
+                                    <path d="M512 128C304.3 128 128 304.3 128 512s176.3 384 384 384 384-176.3 384-384S719.7 128 512 128z m0 64c176.7 0 320 143.3 320 320s-143.3 320-320 320S192 688.7 192 512 335.3 192 512 192z m48 304h-96v96h-96v-96H320v-96h96v-96h96v96h96v96z"></path>
-                        新增维保记录
+                                </svg>
-                    </button>
+                            </i>
+                            新增维保记录
+                        </button>
+                    </div>
                 </div>
                 
                 <table class="info-table">
                     <thead>
                         <tr>
-                            <th>时间</th>
+                            <th class="fixed-width-100 table-cell-wrap">时间</th>
-                            <th>等级</th>
+                            <th class="fixed-width-40 table-cell-wrap">等级</th>
-                            <th>维保信息</th>
+                            <th class="fixed-width-180 table-cell-wrap">维保信息</th>
-                            <th>维保人</th>
+                            <th class="fixed-width-80 table-cell-wrap">维保人</th>
+                            <th class="fixed-width-160 table-cell-wrap">文件</th>
+                            <th class="fixed-width-260 table-cell-wrap">链接</th>
                         </tr>
                     </thead>
                     <tbody id="maintenanceDataBody">
-                        <!-- 动态数据将在这里插入 -->
+                        <tr>
+                            <td colspan="6" style="text-align: center;">暂无数据</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -476,30 +529,18 @@
             <div class="info-section">
                 <h2 class="info-label">内部组件</h2>
                 
-                <div class="component-item">
+                <div class="no-data">暂无数据</div>
-                    <div class="component-name">伽马传感器：</div>
+
-                    <div class="component-detail">编码 GH2025-001，序列号 SN-GM-0625A</div>
-                </div>
-                
-                <div class="component-item">
-                    <div class="component-name">温度传感器：</div>
-                    <div class="component-detail">编码 TP2025-002，序列号 SN-TP-0521B</div>
-                </div>
-                
-                <div class="component-item">
-                    <div class="component-name">压力传感器：</div>
-                    <div class="component-detail">编码 PS2025-003，序列号 SN-PS-0415C</div>
-                </div>
             </div>
 
             <div class="info-section">
-            <h2 class="info-label">仪器所属部门</h2>
+                <h2 class="info-label">仪器所属部门</h2>
     
-            <div class="component-item">
+                <div class="component-item">
-                <div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
+                    <div class="component-name" id="deptContainer" style="width: auto; white-space: nowrap;">暂无部门信息</div>
+                </div>
             </div>
         </div>
-        </div>
         
         <footer>
             <p>版权所有 © 北京六合伟业科技股份有限公司</p>