优化

快乐的昕的电脑

2025-10-13 1afab6f99376a3ac33ab5e0f2dbf5e75f07fc024

优化

 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 ?? '' }}</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 ?? '' }}</td>
                        <td class="num">{{ item.useCount ?? '' }}</td>
                        <td class="num">{{ 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 {