From aa89ca0a32631d365b42ab7d1e9dbb60a8ae8108 Mon Sep 17 00:00:00 2001
From: tjx <t2856754968@163.com>
Date: 星期二, 04 十一月 2025 14:17:02 +0800
Subject: [PATCH] 样式调整1

---
 components/mold.vue |  563 ++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 380 insertions(+), 183 deletions(-)

diff --git a/components/mold.vue b/components/mold.vue
index 8b76410..3c0088a 100644
--- a/components/mold.vue
+++ b/components/mold.vue
@@ -2,24 +2,45 @@
     <view class="page">
         <!-- 鍒�鍏烽�夋嫨鍖� -->
         <view class="top-section-grid">
-            <view class="form-cell">
-                <label class="form-label">鍒�鍏风紪鍙凤細</label>
-                <input class="input" v-model="selectedToolNo" placeholder="璇烽�氳繃鍒�鍏风洰褰曢�夋嫨" disabled />
-                <button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">鍒�鍏风洰褰�</button>
+            <!-- 绗竴琛岋細绉婚櫎鍒�鍏风洰褰曟寜閽� -->
+            <view class="form-row">
+                <view class="form-cell">
+                    <label class="form-label">鍒�鍏风紪鍙凤細</label>
+                    <input class="input small-font" v-model="selectedToolNo" placeholder="璇烽�氳繃鍒�鍏风洰褰曢�夋嫨" disabled />
+                </view>
+                <view class="form-cell">
+                    <label class="form-label">璁剧疆浣跨敤涓婇檺锛�</label>
+                    <input class="input small-font" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo || loadingForm" />
+                </view>
+                <view class="form-cell">
+                    <label class="form-label">瀵垮懡姣旈璀﹀�硷細</label>
+                    <view class="input-with-unit">
+                        <input class="input small-font"
+                               v-model="lifeWarnInput"
+                               placeholder="濡�0.9鎴�90"
+                               :disabled="!selectedToolNo || loadingForm" />
+                        <span class="unit-text">%</span>
+                    </view>
+                </view>
             </view>
-            <view class="form-cell">
-                <label class="form-label">璁剧疆浣跨敤涓婇檺锛�</label>
-                <input class="input" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo || loadingForm" />
-            </view>
-            <view class="form-cell">
-                <label class="form-label">鍒�鍏峰悕绉帮細</label>
-                <input class="input" v-model="toolName" placeholder="鍒�鍏峰甫鍑�" disabled />
-                <label class="form-label" style="margin-left: 16px;">瑙勬牸鍨嬪彿锛�</label>
-                <input class="input" v-model="toolModel" placeholder="鍒�鍏峰甫鍑�" disabled />
-            </view>
-        </view>
 
-        <!-- 鎿嶄綔鎸夐挳 -->
+            <!-- 绗簩琛岋細鍦ㄦ渶鍚庢坊鍔犲垁鍏风洰褰曟寜閽� -->
+            <view class="form-row">
+                <view class="form-cell">
+                    <label class="form-label">鍒�鍏峰悕绉帮細</label>
+                    <input class="input small-font" v-model="toolName" placeholder="鍒�鍏峰甫鍑�" disabled />
+                </view>
+                <view class="form-cell">
+                    <label class="form-label">瑙勬牸鍨嬪彿锛�</label>
+                    <input class="input small-font" v-model="toolModel" placeholder="鍒�鍏峰甫鍑�" disabled />
+                </view>
+                <!-- 鏂板鐨勫垁鍏风洰褰曟寜閽� -->
+                <view class="form-cell">
+                    <button class="btn-blue large-btn" @click="openToolDialog" :disabled="loadingTools">鍒�鍏风洰褰�</button>
+                </view>
+            </view>
+        </view>  <!-- 杩欓噷闂悎 top-section-grid -->
+        <!-- 鎿嶄綔鎸夐挳 - 绉诲嚭 top-section-grid -->
         <view class="button-row">
             <button class="save-btn" @click="handleUpTool" :disabled="submitting || loadingForm">涓婂垁鎻愪氦</button>
             <button class="save-btn" @click="handleDownTool" :disabled="submitting || loadingForm">涓嬪垁鎻愪氦</button>
@@ -28,82 +49,81 @@
 
         <!-- 鍒�鍏风洰褰曞脊绐� -->
         <view v-if="showToolDialog" class="dialog-overlay">
-            <view class="dialog">
-                <view class="form-group">
-                    <input v-model="searchKey" placeholder="杈撳叆鍒�鍏风紪鐮併�佸悕绉版ā绯婃悳绱�" class="input" @input="onSearchKeyInput" />
-                    <button class="btn-blue" @click="searchTool" :disabled="loadingTools">鎼滅储</button>
+                <view class="dialog">
+                    <view class="form-group">
+                        <input v-model="searchKey" placeholder="杈撳叆鍒�鍏风紪鐮併�佸悕绉版ā绯婃悳绱�" class="input" @input="onSearchKeyInput" />
+                        <button class="btn-blue" @click="searchTool" :disabled="loadingTools">鎼滅储</button>
+                    </view>
+                    <view class="tool-list">
+                        <button v-for="tool in filteredTools"
+                                :key="tool.no"
+                                class="tool-btn"
+                                :class="{ active: activeToolNo === tool.no }"
+                                @click="selectTool(tool)">
+                            {{ tool.no }} | {{ tool.name }}
+                        </button>
+                    </view>
+                    <view class="dialog-actions">
+                        <div style="display: flex; align-items: center;">
+                            <button class="btn-blue" @click="prevPage" :disabled="pageIndex === 1 || loadingTools">涓婁竴椤�</button>
+                            <span style="margin: 0 12px;">绗瑊{ pageIndex }}椤� / 鍏眥{ totalPages }}椤�</span>
+                            <button class="btn-blue" @click="nextPage" :disabled="pageIndex === totalPages || loadingTools">涓嬩竴椤�</button>
+                        </div>
+                        <div style="display: flex; gap: 18px; align-items: center;">
+                            <button class="btn-blue" @click="confirmTool">纭畾</button>
+                            <button class="btn-disabled" @click="closeToolDialog">鍙栨秷</button>
+                        </div>
+                    </view>
                 </view>
-                <view class="tool-list">
-                    <button v-for="tool in filteredTools"
-                            :key="tool.no"
-                            class="tool-btn"
-                            :class="{ active: activeToolNo === tool.no }"
-                            @click="selectTool(tool)">
-                        {{ tool.no }} | {{ tool.name }}
-                    </button>
-                </view>
-                <view class="dialog-actions">
-                    <div style="display: flex; align-items: center;">
-                        <button class="btn-blue" @click="prevPage" :disabled="pageIndex === 1 || loadingTools">涓婁竴椤�</button>
-                        <span style="margin: 0 12px;">绗瑊{ pageIndex }}椤� / 鍏眥{ totalPages }}椤�</span>
-                        <button class="btn-blue" @click="nextPage" :disabled="pageIndex === totalPages || loadingTools">涓嬩竴椤�</button>
-                    </div>
-                    <div style="display: flex; gap: 18px; align-items: center;">
-                        <button class="btn-blue" @click="confirmTool">纭畾</button>
-                        <button class="btn-disabled" @click="closeToolDialog">鍙栨秷</button>
-                    </div>
-                </view>
-            </view>
         </view>
 
         <!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍� -->
         <view class="table-section">
-            <table class="styled-table">
-                <thead>
-                    <tr>
-                        <th style="width:8%">鍒�鍏风紪鍙�</th>
-                        <th style="width:14%">鍒�鍏峰悕绉�</th>
-                        <th style="width:12%">涓婂垁鏃堕棿</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, idx) in toolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
-                        <td>{{ item.no }}</td>
-                        <td class="left">{{ item.name }}</td>
-                        <td>{{ item.upTime }}</td>
-                        <td class="num">{{ item.upCount != null ? item.upCount : '' }}</td>
-                        <td>{{ item.downTime }}</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 === '姝e父' ? '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>
-                    </tr>
-                </tbody>
-            </table>
+                <table class="styled-table">
+                    <thead>
+                        <tr>
+                            <th style="width:8%">鍒�鍏风紪鍙�</th>
+                            <th style="width:14%">鍒�鍏峰悕绉�</th>
+                            <th style="width:12%">涓婂垁鏃堕棿</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, idx) in toolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
+                            <td>{{ item.no }}</td>
+                            <td class="left">{{ item.name }}</td>
+                            <td>{{ item.upTime }}</td>
+                            <td class="num">{{ item.upCount != null ? item.upCount : '' }}</td>
+                            <td>{{ item.downTime }}</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 === '姝e父' ? '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>
+                        </tr>
+                    </tbody>
+                </table>
         </view>
 
-        <!-- 璇存槑 -->
-        <view class="tool-desc">
-            <p style="color:red;">褰撳墠宸ュ崟涓紝鎹簡鍑犳鍒�锛屽氨浼氫骇鐢熷嚑鏉℃暟鎹�備笂鍒�鏃堕棿銆佷笅鍒�鏃堕棿鍦ㄨ〃涓兘鐪嬪埌銆�</p>
-            <p style="color:red;">涓婂垁鏃堕棿鍜屽搴旀椂闂寸敤鐢熶骇璁℃暟鍣ㄥ尮閰嶏紝鏌ュ嚭褰撴椂鐨勭敓浜ф暟锛堢疮璁¤鏁帮級銆�</p>
-            <p style="color:red;">瀵垮懡姣旈璀﹀�煎湪鍒�鍏蜂笂锛岄粯璁ょ粺涓�銆�</p>
-        </view>
+            <!-- 璇存槑 -->
+            <!--<view class="tool-desc">
+        <p style="color:red;">'浣跨敤涓婇檺'浠ヤ笅鍒�鏃剁殑'浣跨敤涓婇檺'涓鸿绠楁爣鍑�</p>
+        <p style="color:red;">瀵垮懡姣旈璀﹀�奸粯璁や负90%</p>
+    </view>-->
     </view>
 </template>
 
@@ -125,12 +145,20 @@
                 searchKey: '',
                 filteredTools: [],
                 useLimitInput: '',
+                lifeWarnInput: '', // 鏂板锛氬鍛芥瘮棰勮鍊煎師濮嬭緭鍏�
                 toolRecords: [],
                 loadingTools: false,
                 loadingForm: false,
                 submitting: false,
                 _searchTimer: null,
-                workOrderCurrentCjNum: null // 宸ュ崟褰撳墠鏁伴噰
+                workOrderCurrentCjNum: null, // 宸ュ崟褰撳墠鏁伴噰
+
+                // 鑷姩淇濆瓨鐩稿叧
+                autoSaveTimer: null,
+                isDirty: false, // 琛ㄥ崟鏄惁鏈夋湭淇濆瓨鍙樻洿
+                autoSaveIntervalMs: 5 * 60 * 1000, // 榛樿 5 鍒嗛挓
+                autoSaveEnabled: true,
+                autoSaveActionName: 'handleUpTool' // 鑷姩瑙﹀彂鐨勬柟娉曞悕锛屽彲鏀逛负鑷畾涔変繚瀛樻柟娉�
             };
         },
         computed: {
@@ -138,7 +166,65 @@
                 return Math.max(1, Math.ceil(this.total / this.pageSize) || 1);
             }
         },
+        watch: {
+            // 鏍囪鑴忔暟鎹細鎸夐渶鐩戝惉瀛楁鍙樺寲
+            selectedToolNo() { this.isDirty = true; },
+            useLimitInput() { this.isDirty = true; },
+            lifeWarnInput() { this.isDirty = true; },
+            toolName() { this.isDirty = true; },
+            toolModel() { this.isDirty = true; }
+        },
         methods: {
+            // 鑷姩淇濆瓨锛氬惎鍔�
+            startAutoSave() {
+                if (!this.autoSaveEnabled) return;
+                this.stopAutoSave();
+                this.autoSaveTimer = setInterval(() => {
+                    this.autoSaveTick();
+                }, this.autoSaveIntervalMs);
+            },
+            // 鑷姩淇濆瓨锛氬仠姝�
+            stopAutoSave() {
+                if (this.autoSaveTimer) {
+                    clearInterval(this.autoSaveTimer);
+                    this.autoSaveTimer = null;
+                }
+            },
+            // 鑷姩淇濆瓨锛氭瘡娆″畾鏃舵墽琛屾椂鐨勯�昏緫
+            async autoSaveTick() {
+                if (!this.autoSaveEnabled) return;
+                if (!this.isDirty) return;
+                if (this.submitting || this.loadingForm) return;
+
+                const fn = this.autoSaveActionName && typeof this[this.autoSaveActionName] === 'function'
+                    ? this[this.autoSaveActionName]
+                    : null;
+                if (!fn) {
+                    console.warn('鑷姩淇濆瓨锛氭湭鎵惧埌鏂规硶', this.autoSaveActionName);
+                    return;
+                }
+
+                try {
+                    this.submitting = true;
+                    await fn.call(this); // 璋冪敤淇濆瓨鏂规硶锛堜緥濡� handleUpTool锛�
+                    // 濡傛灉淇濆瓨鎴愬姛锛屾竻鑴忔爣璁帮紙淇濆瓨鏂规硶鍐呴儴鑻ュけ璐ユ病鏈夋姏鍑哄彲淇濇寔姝ゆ柟寮忥級
+                    this.isDirty = false;
+                } catch (e) {
+                    console.error('鑷姩淇濆瓨澶辫触锛�', e);
+                } finally {
+                    this.submitting = false;
+                }
+            },
+
+            // 鏂板锛氬鍛芥瘮棰勮鍊煎綊涓�鍖� (杩斿洖 0~1 鎴� null)
+            normalizeLifeWarn(v) {
+                if (v == null) return null;
+                const raw = String(v).trim().replace(/[%锛匽/g, '');
+                if (raw === '') return null;
+                const num = Number(raw);
+                if (!isFinite(num) || num <= 0) return null;
+                return num > 1 ? (num / 100) : num;
+            },
             openToolDialog() {
                 this.showToolDialog = true;
                 this.pageIndex = 1;
@@ -171,10 +257,12 @@
                             return null;
                         };
 
+                        // 杩欓噷闇�瑕佹妸 lifeWarn 瀛楁涔熷甫鍑烘潵
                         const mapped = (payload || []).map(t => ({
                             no: getField(t, 'cutterId', 'CUTTER_ID', 'cutteR_ID', 'daA001', 'no'),
                             name: getField(t, 'cutterName', 'CUTTER_NAME', 'cutteR_NAME', 'name'),
-                            model: getField(t, 'cutterModel', 'CUTTER_MODEL', 'cutteR_MODEL', 'model')
+                            model: getField(t, 'cutterModel', 'CUTTER_MODEL', 'cutteR_MODEL', 'model'),
+                            lifeWarn: getField(t, 'modlLifeWorning', 'lifeWarn', 'LIFE_WARN', 'lifE_WARN')
                         }));
 
                         this.filteredTools = mapped;
@@ -224,6 +312,14 @@
                 this.toolName = tool.name;
                 this.toolModel = tool.model;
                 this.activeToolNo = tool.no;
+                // 鏂板锛氬甫鍑哄鍛芥瘮棰勮鍊�
+                if (tool.lifeWarn !== undefined && tool.lifeWarn !== null) {
+                    // 鏍煎紡鍖栦负鐧惧垎姣斿瓧绗︿覆
+                    const warn = Number(tool.lifeWarn);
+                    this.lifeWarnInput = warn <= 1 ? (warn * 100).toFixed(0) : warn.toFixed(0);
+                } else {
+                    this.lifeWarnInput = '';
+                }
             },
             confirmTool() {
                 this.showToolDialog = false;
@@ -252,20 +348,22 @@
                 if (!this.workOrderNo) { this.$showMessage('宸ュ崟鍙蜂笉鑳戒负绌�'); return; }
                 if (!this.machineNo) { this.$showMessage('鏈哄彴鍙蜂笉鑳戒负绌�'); return; }
                 if (!this.selectedToolNo) { this.$showMessage('鍒�鍏风紪鍙蜂笉鑳戒负绌�'); return; }
-                if (!this.useLimitInput) { this.$showMessage('浣跨敤涓婇檺涓嶈兘涓虹┖'); return; }
+                //涓婂垁涓嶅己鍒跺綍鍏ヤ娇鐢ㄤ笂闄�
+                //if (!this.useLimitInput) { this.$showMessage('浣跨敤涓婇檺涓嶈兘涓虹┖'); return; }
                 const useLimit = Number(this.useLimitInput);
-                if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('璇疯緭鍏ユ湁鏁堢殑浣跨敤涓婇檺'); return; }
+                //if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('璇疯緭鍏ユ湁鏁堢殑浣跨敤涓婇檺'); return; }
 
                 // sdjs 浣跨敤宸ュ崟 currentCjNum
                 const sdjs = this.workOrderCurrentCjNum != null ? Number(this.workOrderCurrentCjNum) : null;
-
+                const lifeWarnRatio = this.normalizeLifeWarn(this.lifeWarnInput);
                 const payload = {
                     workOrderNo: this.workOrderNo,
                     machineNo: this.machineNo,
                     toolNo: this.selectedToolNo,
                     type: '涓婃満',
                     useLimit,
-                    sdjs // 涓婂垁璁℃暟锛堝伐鍗曞綋鍓嶆暟閲囷級
+                    sdjs,// 涓婂垁璁℃暟锛堝伐鍗曞綋鍓嶆暟閲囷級
+                    modlLifeWorning: lifeWarnRatio // 鏂板
                 };
                 try {
                     this.submitting = true;
@@ -280,14 +378,20 @@
                             icon: 'error'
                         });
                         return;
+                    } else if (res.data && res.data.outMsg) {
+                        uni.showToast({
+                            title: res.data.outMsg,
+                            icon: 'none'
+                        });
                     }
-                    else uni.showToast({ title: res.data.outMsg || '' });
+                    // 鍚庣画閫昏緫缁х画鎵ц
                     if (res.status === 0) {
                         await this.fetchFormData();
                     }
                 } catch (err) {
                     console.error(err);
                     this.$showMessage('涓婂垁鎻愪氦澶辫触锛岃妫�鏌ョ綉缁�');
+                    throw err; // 鎶涘嚭浠ヤ究鑷姩淇濆瓨閫昏緫鎹曡幏骞朵繚鐣� isDirty
                 } finally {
                     this.submitting = false;
                 }
@@ -303,14 +407,15 @@
 
                 // 涓嬪垁璁℃暟鍚屾牱鍙栧伐鍗曟渶鏂伴噰闆嗘暟
                 const xdjs = this.workOrderCurrentCjNum != null ? Number(this.workOrderCurrentCjNum) : null;
-
+                const lifeWarnRatio = this.normalizeLifeWarn(this.lifeWarnInput);
                 const payload = {
                     workOrderNo: this.workOrderNo,
                     machineNo: this.machineNo,
                     toolNo: this.selectedToolNo,
                     type: '涓嬫満',
                     useLimit,
-                    xdjs // 涓嬪垁璁℃暟
+                    xdjs,// 涓嬪垁璁℃暟
+                    modlLifeWorning: lifeWarnRatio // 鏂板
                 };
                 try {
                     this.submitting = true;
@@ -325,14 +430,20 @@
                             icon: 'error'
                         });
                         return;
+                    } else if (res.data && res.data.outMsg) {
+                        uni.showToast({
+                            title: res.data.outMsg,
+                            icon: 'none'
+                        });
                     }
-                    else uni.showToast({ title: res.data.outMsg || '' });
+                    // 鍚庣画閫昏緫缁х画鎵ц
                     if (res.status === 0) {
                         await this.fetchFormData();
                     }
                 } catch (err) {
                     console.error(err);
                     this.$showMessage('涓嬪垁鎻愪氦澶辫触锛岃妫�鏌ョ綉缁�');
+                    throw err;
                 } finally {
                     this.submitting = false;
                 }
@@ -342,6 +453,8 @@
                 this.toolName = '';
                 this.toolModel = '';
                 this.useLimitInput = '';
+                this.lifeWarnInput = ''; // 鏂板锛氭竻绌�
+                this.isDirty = false;
             },
             async fetchFormData() {
                 if (!this.workOrderNo || !this.machineNo) {
@@ -374,19 +487,6 @@
                         return null;
                     };
 
-                    const parseNumber = v => {
-                        if (v === null || v === undefined || v === '') return null;
-                        const s = String(v).replace(/[,锛�%]/g, '').trim();
-                        const n = parseFloat(s);
-                        return Number.isFinite(n) ? n : null;
-                    };
-
-                    const formatPercent = n => {
-                        if (n === null || n === undefined || isNaN(n)) return '';
-                        if (n <= 1) return `${(n * 100).toFixed(0)}%`;
-                        return `${Number(n).toFixed(0)}%`;
-                    };
-
                     const mapped = (list || []).map(t => {
                         const upTimeRaw = getField(t, 'uP_TIME', 'UP_TIME', 'uPTime', 'UPTIME', 'UpTime');
                         const downTimeRaw = getField(t, 'dowN_TIME', 'DOWN_TIME', 'downTime', 'DOWNTIME');
@@ -397,11 +497,7 @@
                         const useLimit = getField(t, 'usE_LIMIT', 'USE_LIMIT', 'useLimit');
 
                         let percent = '';
-                        if (
-                            useCount != null && useLimit != null &&
-                            !isNaN(useCount) && !isNaN(useLimit) &&
-                            Number(useLimit) > 0
-                        ) {
+                        if (useCount != null && useLimit != null && !isNaN(useCount) && !isNaN(useLimit) && Number(useLimit) > 0) {
                             percent = ((Number(useCount) / Number(useLimit)) * 100).toFixed(0) + '%';
                         }
 
@@ -443,6 +539,18 @@
                         };
                     });
 
+                    // 鏂板锛氭寜涓婂垁鏃堕棿闄嶅簭鎺掑簭锛堣秺鏅氱殑瓒婁笂闈級
+                    mapped.sort((a, b) => {
+                        // 鏃堕棿鏍煎紡濡� "10-24 16:03"锛岃浆涓� Date 瀵硅薄姣旇緝
+                        const parse = s => {
+                            if (!s) return 0;
+                            // 琛ュ勾浠斤紝鍋囪閮芥槸浠婂勾
+                            const year = new Date().getFullYear();
+                            return new Date(`${year}-${s.replace(/-/g, '-')}:00`).getTime();
+                        };
+                        return parse(b.upTime) - parse(a.upTime); // 娉ㄦ剰杩欓噷椤哄簭鍙嶈繃鏉�
+                    });
+
                     this.toolRecords = mapped;
                     const totalFromRes = Number(
                         res.data?.total ?? res.data?.totalCount ?? res.total ?? res.totalCount ?? mapped.length
@@ -472,6 +580,13 @@
                         this.toolModel = order.cutterModel || order.cutteR_MODEL || '';
                         // 鍏抽敭锛氳幏鍙栧伐鍗曟渶鏂伴噰闆嗘暟
                         this.workOrderCurrentCjNum = order.CurrentCjNum ?? order.currentCjNum ?? null;
+                        // 鏂板锛氳嚜鍔ㄥ~鍏呭鍛芥瘮棰勮鍊�
+                        if (order.modlLifeWorning !== undefined && order.modlLifeWorning !== null) {
+                            const warn = Number(order.modlLifeWorning);
+                            this.lifeWarnInput = warn <= 1 ? (warn * 100).toFixed(0) : warn.toFixed(0);
+                        } else {
+                            this.lifeWarnInput = '';
+                        }
                     } else {
                         this.workOrderCurrentCjNum = null;
                     }
@@ -508,9 +623,8 @@
             this.fetchTools('');
             this.machineNo = uni.getStorageSync('machineNo') || '';
             this.workOrderNo = uni.getStorageSync('daa001') || '';
-
-            console.log('鏈哄彴鍙�:', this.machineNo);
-            console.log('宸ュ崟鍙�:', this.workOrderNo);
+            // 鍘婚櫎榛樿棰勮鍊� (90% -> 0.9)
+            //this.lifeWarnInput = '90';
 
             if (this.machineNo && this.workOrderNo) {
                 this.fetchFormData();
@@ -518,77 +632,118 @@
             } else {
                 console.warn('鏈哄彴鍙锋垨宸ュ崟鍙蜂负绌猴紝鏃犳硶鑾峰彇琛ㄥ崟鏁版嵁');
             }
+
+            // 鍚姩鑷姩淇濆瓨瀹氭椂鍣�
+            this.startAutoSave();
+        },
+        beforeDestroy() {
+            // 娓呯悊瀹氭椂鍣紝闃叉鍐呭瓨娉勬紡
+            this.stopAutoSave();
         }
     };
 </script>
 
 <style scoped>
+    /* 浼樺寲椤堕儴琛ㄥ崟鍖哄煙鏍峰紡 */
     .top-section-grid {
         display: flex;
+        flex-direction: column;
         justify-content: center;
-        align-items: flex-end;
-        gap: 32px;
+        align-items: center;
+        gap: 12px;
         margin-bottom: 2vh;
-        width: 95vw; /* 鏂板锛屽拰琛ㄦ牸瀹藉害涓�鑷� */
-        max-width: 1600px; /* 鏂板锛屽拰琛ㄦ牸涓�鑷� */
-        margin-left: auto; /* 鏂板锛屽眳涓� */
-        margin-right: auto; /* 鏂板锛屽眳涓� */
+        width: 95vw;
+        max-width: 1600px;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 12px;
+        background: #f8f9fa;
+        border-radius: 8px;
+        border: 1px solid #e9ecef;
     }
+
+    /* 琛ㄥ崟琛屾牱寮忎紭鍖� */
+    .form-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 8px;
+    }
+
+        .form-row:last-child {
+            margin-bottom: 0;
+        }
 
     .form-cell {
         display: flex;
         align-items: center;
+        flex: 1;
+        margin: 0 8px;
+        min-height: 44px;
     }
 
     .form-label {
-        width: 90px;
+        width: 100px;
         font-weight: bold;
+        font-size: 18px;
+        color: #333;
+        white-space: nowrap;
+        margin-right: 8px;
+        flex-shrink: 0;
     }
 
     .input {
-        padding: 1vh;
-        font-size: 1.1vw;
-        border: 1px solid #ccc;
-        width: 10vw;
-        margin-right: 8px;
-        border-radius: 6px;
-        background: #f8f8f8;
+        padding: 8px 12px;
+        font-size: 16px;
+        border: 1px solid #dcdfe6;
+        flex: 1;
+        margin-right: 0;
+        border-radius: 4px;
+        background: #fff;
+        min-width: 0;
+        height: 36px;
+        box-sizing: border-box;
     }
 
-    .form-select {
-        width: 12vw;
-        padding: 1vh;
-        font-size: 1.1vw;
-        margin-right: 8px;
-        border-radius: 6px;
-        background: #f8f8f8;
-    }
+        .input.small-font {
+            font-size: 15px;
+        }
+
+        .input:disabled {
+            background-color: #f5f7fa;
+            color: #c0c4cc;
+            cursor: not-allowed;
+        }
 
     .btn-blue {
-        background-color: #00A2E9;
+        background-color: #1890ff;
         color: white;
         border: none;
-        padding: 14px 36px;
-        margin-left: 8px;
-        border-radius: 10px;
+        padding: 8px 16px;
+        border-radius: 4px;
         cursor: pointer;
-        font-size: 1.1vw;
-        font-weight: bold;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-        transition: background 0.2s, box-shadow 0.2s;
+        font-size: 16px;
+        font-weight: 500;
+        white-space: nowrap;
+        height: 36px;
+        box-sizing: border-box;
+        transition: all 0.3s;
+        flex-shrink: 0;
     }
 
-        .btn-blue:active,
-        .btn-blue:focus {
-            background-color: #0086c2;
-            box-shadow: 0 4px 12px rgba(0,162,233,0.12);
+        .btn-blue:hover {
+            background-color: #40a9ff;
+        }
+
+        .btn-blue:active {
+            background-color: #096dd9;
         }
 
         .btn-blue:disabled {
-            background: #b3e0f7;
-            color: #eee;
+            background: #bae7ff;
+            color: #91d5ff;
             cursor: not-allowed;
-            box-shadow: none;
         }
 
     .button-row {
@@ -615,6 +770,20 @@
         color: #333;
     }
 
+    .save-btn:hover {
+        background-color: #40a9ff;
+    }
+
+    .save-btn:active {
+        background-color: #096dd9;
+    }
+
+    .save-btn:disabled, .cancel-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    /* 寮圭獥鏍峰紡 */
     .dialog-overlay {
         position: fixed;
         top: 0;
@@ -655,7 +824,7 @@
     }
 
     .tool-btn {
-        flex: 0 0 24%; /* 姣忚4涓寜閽� */
+        flex: 0 0 24%;
         box-sizing: border-box;
         margin: 5px 1% 5px 0;
         padding: 12px 18px;
@@ -711,7 +880,7 @@
         box-shadow: none;
     }
 
-    /* 琛ㄦ牸鏁翠綋灞呬腑锛屽搴﹂檺鍒讹紝鍐呭灞呬腑 */
+    /* 琛ㄦ牸鏍峰紡 */
     .table-section {
         display: flex;
         justify-content: center;
@@ -720,8 +889,8 @@
     }
 
     table.styled-table {
-        max-width: 1600px; /* 鍘熶负1400px锛岃皟瀹� */
-        width: 95vw; /* 鍘熶负90vw锛岃皟瀹� */
+        max-width: 1600px;
+        width: 95vw;
         margin: 0 auto;
         border-collapse: separate;
         border-spacing: 0;
@@ -749,13 +918,11 @@
             text-align: center;
         }
 
-    .table-section table th:first-child,
-    .table-section table td:first-child {
+    .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 {
+    .table-section table th:last-child, .table-section table td:last-child {
         border-right: 2px solid #bfbfbf;
     }
 
@@ -797,30 +964,60 @@
         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 {
-        color: red;
-        font-weight: bold;
-    }
-
-    .bottom-section {
+    /* 甯﹀崟浣嶇殑杈撳叆妗嗘牱寮� */
+    .input-with-unit {
         display: flex;
-        justify-content: space-around;
-        margin-top: 2vh;
+        align-items: center;
+        flex: 1;
     }
 
-    .tool-desc {
-        margin-top: 2vh;
+        .input-with-unit .input {
+            flex: 1;
+            margin-right: 8px;
+        }
+
+    .unit-text {
+        color: #666;
+        font-size: 14px;
+        white-space: nowrap;
+        width: 20px;
     }
+
+    /* 鍝嶅簲寮忚皟鏁� */
+    @media (max-width: 1200px) {
+        .form-cell {
+            margin: 0 4px;
+        }
+
+        .form-label {
+            width: 90px;
+            font-size: 16px;
+        }
+
+        .input {
+            font-size: 14px;
+            padding: 6px 10px;
+        }
+
+        .btn-blue {
+            padding: 6px 12px;
+            font-size: 14px;
+        }
+    }
+
+    /* 鏂板澶ф寜閽牱寮� */
+    .btn-blue.large-btn {
+        padding: 8px 24px;
+        font-size: 16px;
+        height: 36px;
+        min-width: 100px;
+    }
+
+    /* 璋冩暣琛ㄥ崟鍗曞厓鏍煎竷灞�浠ラ�傚簲鎸夐挳 */
+    .form-row .form-cell:last-child {
+        justify-content: center;
+        flex: 0 0 auto;
+        min-width: 120px;
+    }
+
 </style>
\ No newline at end of file

--
Gitblit v1.9.3