增加摩擦力配置弹窗界面

src/components/HelloWorld.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="table-container" align="center">
+    <!-- 新增标题 -->
+    <h2 class="table-title">1.J1 摩擦力数据表</h2>
     <!-- el-table 组件 -->
     <el-table
       :data="paginatedData"
@@ -66,6 +68,78 @@
       ></el-pagination>
     </div>
   </div>
+
+  <div class="table-container" align="center">
+    <!-- ... existing table and other elements ... -->
+    
+    <!-- 新增对话框 -->
+    <el-dialog
+      title="摩擦力配置"
+      v-model="dialogVisible"
+      width="30%"
+    >
+      <div style="display: grid; grid-template-columns: 1fr 1fr; row-gap: 15px; align-items: center;">
+        <span style="text-align: center;">定反位置:</span>
+        <el-select v-model="selectedPosition" placeholder="请选择">
+          <el-option
+            v-for="item in positionOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        
+        <span style="text-align: center;">发生日期:</span>
+        <el-date-picker
+          v-model="currentRow.date"
+          type="datetime"
+          placeholder="选择日期时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        />
+        
+        <span style="text-align: center;">摩擦力值:</span>
+         <el-input 
+          v-model="currentRow.mochali" 
+          placeholder="请输入摩擦力值"
+          style="width: 100%"
+        >
+          <template #append>N</template>
+        </el-input>
+
+        <span style="text-align: center;">起始值:</span>
+        <div style="display: flex; gap: 10px;">
+          <el-input 
+            v-model="startValue" 
+            placeholder="起始值"
+            style="flex: 1"
+          >
+            <template #append>N</template>
+          </el-input>
+          <el-button 
+            type="primary" 
+            @click="calculateFriction"
+          >
+            计算
+          </el-button>
+        </div>
+
+        <span style="text-align: center;">终点值:</span>
+        <el-input 
+          v-model="endValue" 
+          placeholder="终点值"
+          style="width: 100%"
+        >
+          <template #append>N</template>
+        </el-input>
+
+      </div>
+      <template #footer>  <!-- Changed from slot="footer" to template #footer -->
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = true">删除</el-button>
+        <el-button type="primary" @click="dialogVisible = true">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -74,34 +148,43 @@ export default {
     return {
       currentPage: 1,
       pageSize: 10,
+      dialogVisible: false,  // 新增对话框显示状态
+      currentRow: null,      // 新增当前行数据
+      positionOptions: [  // 新增下拉选项
+        { label: '定扳反', value: '定扳反' },
+        { label: '反扳定', value: '反扳定' }
+      ],
+      selectedPosition: '',  // 新增选中值
+      startValue: '',
+      endValue: '',
       // 表格数据
       tableData: [
         {
           name: "原摩擦力",
           date: "2025-05-29 12:30:00",
           btn: "确认",
-          mochali: "5100N",
+          mochali: "5100",
           his: "历史数据",
         },
         {
           name: "摩擦力1",
           date: "2025-05-30 12:30:00",
           btn: "确认",
-          mochali: "6100N",
+          mochali: "6100",
           his: "历史数据",
         },
         {
           name: "摩擦力2",
           date: "2025-05-31 12:30:00",
           btn: "确认",
-          mochali: "6200N",
+          mochali: "6200",
           his: "历史数据",
         },
         {
           name: "摩擦力3",
           date: "2025-06-01 12:30:00",
           btn: "确认",
-          mochali: "6500N",
+          mochali: "6500",
           his: "历史数据",
         },
       ],
@@ -124,6 +207,17 @@ export default {
     handleConfirmClick(row) {
       this.$message.success(`点击确认: ${row.btn}, 日期: ${row.date}, 值: ${row.mochali}`);
       // 这里可以添加更多业务逻辑
+      this.currentRow = row;  // 保存当前行数据
+      this.dialogVisible = true;  // 显示对话框
+    },
+    calculateFriction() {
+      if (this.startValue && this.endValue) {
+        const start = parseFloat(this.startValue);
+        const end = parseFloat(this.endValue);
+        this.currentRow.mochali = Math.abs(end - start).toString();
+      } else {
+        this.$message.warning('请输入起始值和终点值');
+      }
     }
   }
 };