报工界面修改3

快乐的昕的电脑

2025-10-14 c16a1e600f57e14e53f4d3451de2937b364d53d2

 components/mold.vue

@@ -56,37 +56,40 @@
         </view>
      </view>

      <!-- 刀具使用记录表格 -->
      <!-- 刀具使用记录表格（重写样式以贴合示例图） -->
      <view class="table-section">
         <table>
         <table class="styled-table">
            <thead>
               <tr>
                  <th>刀具编号</th>
                  <th>刀具名称</th>
                  <th>上刀时间</th>
                  <th>上刀计数</th>
                  <th>下刀时间</th>
                  <th>下刀计数</th>
                  <th>使用次数</th>
                  <th>使用上限</th>
                  <th>寿命比%</th>
                  <th>寿命比预警值</th>
                  <th>预警状态</th>
                  <th style="width:8%">刀具编号</th>
                  <th style="width:14%">刀具名称</th>
                  <th style="width:12%">上刀时间 <span class="header-badge">1</span></th>
                  <th class="num" style="width:8%">上刀计数</th>
                  <th style="width:12%">下刀时间</th>
                  <th class="num" style="width:8%">下刀计数</th>
                  <th class="num" style="width:8%">使用次数</th>
                  <th class="num" style="width:8%">使用上限</th>
                  <th class="num" style="width:8%">寿命比%</th>
                  <th class="num" style="width:8%">寿命比预警值</th>
                  <th style="width:8%">预警状态</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="item in toolRecords" :key="item.id">
               <tr v-for="(item, idx) in toolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
                  <td>{{ item.no }}</td>
                  <td>{{ item.name }}</td>
                  <td class="left">{{ item.name }}</td>
                  <td>{{ item.upTime }}</td>
                  <td>{{ item.upCount }}</td>
                  <td class="num">{{ item.upCount != null ? item.upCount : '' }}</td>
                  <td>{{ item.downTime }}</td>
                  <td>{{ item.downCount }}</td>
                  <td>{{ item.useCount }}</td>
                  <td>{{ item.useLimit }}</td>
                  <td>{{ item.lifePercent }}</td>
                  <td>{{ item.lifeWarn }}</td>
                  <td :class="item.warnStatus === '预警' ? 'warn' : ''">{{ item.warnStatus }}</td>
                  <td class="num">{{ item.downCount != null ? item.downCount : '' }}</td>
                  <td class="num">{{ item.useCount != null ? item.useCount : '' }}</td>
                  <td class="num">{{ item.useLimit != null ? item.useLimit : '' }}</td>
                  <td class="num">{{ item.lifePercent }}</td>
                  <td class="num">{{ item.lifeWarn }}</td>
                  <td :class="item.warnStatus === '预警' ? 'warn-cell' : (item.warnStatus === '正常' ? 'ok-cell' : '')">
                     <span v-if="item.warnStatus === '预警'" class="warn-badge">警告</span>
                     <span v-else>{{ item.warnStatus }}</span>
                  </td>
               </tr>
               <tr v-if="!toolRecords.length">
                  <td colspan="11">暂无数据</td>
@@ -562,16 +565,89 @@
      overflow-x: auto;
   }

   table {
   /* 新的表格样式，贴近截图风格 */
   table.styled-table {
      width: 100%;
      border-collapse: collapse;
      border-collapse: separate;
      border-spacing: 0;
      border: 2px solid #bfbfbf;
      background: #fff;
   }

   th, td {
      border: 1px solid #ccc;
      padding: 8px 4px;
      text-align: center;
      font-size: 1vw;
      table.styled-table thead th {
         background: #fafafa;
         border-bottom: 2px solid #bfbfbf;
         padding: 10px 6px;
         font-weight: bold;
         font-size: 1vw;
         text-align: center;
      }

      table.styled-table tbody td {
         border-bottom: 1px solid #e8e8e8;
         padding: 10px 6px;
         font-size: 0.95vw;
         vertical-align: middle;
      }

   .table-section table th:first-child,
   .table-section table td:first-child {
      border-left: 2px solid #bfbfbf;
   }

   .table-section table th:last-child,
   .table-section table td:last-child {
      border-right: 2px solid #bfbfbf;
   }

   .row-odd {
      background: #fff;
   }

      .row-odd + tr {
         background: #fafafa;
      }

   .num {
      text-align: right;
      padding-right: 12px;
      font-variant-numeric: tabular-nums;
   }

   .left {
      text-align: left;
      padding-left: 8px;
   }

   .warn-cell {
      color: #d93025;
      font-weight: bold;
   }

   .ok-cell {
      color: #333;
   }

   .warn-badge {
      display: inline-block;
      background: #ff4d4f;
      color: #fff;
      padding: 2px 6px;
      border-radius: 3px;
      font-weight: bold;
      font-size: 0.9vw;
   }

   .header-badge {
      display: inline-block;
      background: #fff7e6;
      color: #8a6d00;
      border: 1px solid #ffe58f;
      padding: 1px 6px;
      border-radius: 3px;
      margin-left: 6px;
      font-size: 0.8vw;
      vertical-align: middle;
   }

   .warn {