From 547619dceb61d9aaa33378f100a873e86447983d Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期六, 18 十月 2025 09:38:36 +0800
Subject: [PATCH] 界面优化

---
 components/mold.vue |  603 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 506 insertions(+), 97 deletions(-)

diff --git a/components/mold.vue b/components/mold.vue
index 0257f11..80af0d7 100644
--- a/components/mold.vue
+++ b/components/mold.vue
@@ -3,16 +3,13 @@
 		<!-- 鍒�鍏烽�夋嫨鍖� -->
 		<view class="top-section-grid">
 			<view class="form-cell">
-				<label class="form-label">閫夋嫨鍒�鍏风紪鍙凤細</label>
-				<select v-model="selectedToolNo" class="form-select">
-					<option v-for="tool in toolList" :key="tool.no" :value="tool.no">{{ tool.no }} | {{ tool.name }}</option>
-				</select>
-				<button class="btn-blue" @click="showToolDialog = true">鍒�鍏风洰褰�</button>
+				<label class="form-label">鍒�鍏风紪鍙凤細</label>
+				<input class="input" v-model="selectedToolNo" placeholder="璇烽�氳繃鍒�鍏风洰褰曢�夋嫨" disabled />
+				<button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">鍒�鍏风洰褰�</button>
 			</view>
 			<view class="form-cell">
 				<label class="form-label">璁剧疆浣跨敤涓婇檺锛�</label>
-				<input class="input" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo" />
-				<button class="btn-blue" @click="setUseLimit" :disabled="!selectedToolNo || !useLimitInput">淇濆瓨涓婇檺</button>
+				<input class="input" type="number" v-model="useLimitInput" placeholder="姣忔鎹㈠垁鍚庢墜濉�" :disabled="!selectedToolNo || loadingForm" />
 			</view>
 			<view class="form-cell">
 				<label class="form-label">鍒�鍏峰悕绉帮細</label>
@@ -24,61 +21,78 @@
 
 		<!-- 鎿嶄綔鎸夐挳 -->
 		<view class="button-row">
-			<button class="save-btn" @click="handleUpTool">涓婂垁鎻愪氦</button>
-			<button class="save-btn" @click="handleDownTool">涓嬪垁鎻愪氦</button>
-			<button class="cancel-btn" @click="cancel">鍙栨秷</button>
+			<button class="save-btn" @click="handleUpTool" :disabled="submitting || loadingForm">涓婂垁鎻愪氦</button>
+			<button class="save-btn" @click="handleDownTool" :disabled="submitting || loadingForm">涓嬪垁鎻愪氦</button>
+			<button class="cancel-btn" @click="cancel" :disabled="submitting || loadingForm">鍙栨秷</button>
 		</view>
 
 		<!-- 鍒�鍏风洰褰曞脊绐� -->
 		<view v-if="showToolDialog" class="dialog-overlay">
 			<view class="dialog">
 				<view class="form-group">
-					<input v-model="searchKey" placeholder="杈撳叆鍒�鍏风紪鐮併�佸悕绉版ā绯婃悳绱�" class="input" />
-					<button class="btn-blue" @click="searchTool">鎼滅储</button>
+					<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" @click="selectTool(tool)">
+					<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">
-					<button class="btn-blue" @click="confirmTool">纭畾</button>
-					<button class="btn-disabled" @click="showToolDialog = false">鍙栨秷</button>
+					<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>
+						<button class="btn-blue" @click="confirmTool">纭畾</button>
+						<button class="btn-disabled" @click="closeToolDialog">鍙栨秷</button>
+					</div>
 				</view>
 			</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 === '姝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>
@@ -97,11 +111,13 @@
 	export default {
 		data() {
 			return {
-				toolList: [
-					// 绀轰緥鏁版嵁锛屽疄闄呭簲浠庡悗绔帴鍙h幏鍙�
-					{ no: 'T22050338', name: 'm1.5鍚堥噾闀垮垁', model: 'xxx' },
-					{ no: 'T22050337', name: 'm0.546鍚堥噾闀垮垁', model: 'yyy' }
-				],
+				machineNo: '',//鏈哄彴缂栫爜
+				workOrderNo: '',//宸ュ崟鍙�
+                activeToolNo: '', // 褰撳墠閫変腑鐨勫垁鍏风紪鍙�
+				pageIndex: 1,
+				pageSize: 18,
+				total: 0,
+				toolList: [],
 				selectedToolNo: '',
 				toolName: '',
 				toolModel: '',
@@ -109,61 +125,361 @@
 				searchKey: '',
 				filteredTools: [],
 				useLimitInput: '',
-				toolRecords: [
-					// 绀轰緥鏁版嵁锛屽疄闄呭簲浠庡悗绔帴鍙h幏鍙�
-					{ id: 1, no: 'T22050338', name: 'm1.5鍚堥噾闀垮垁', upTime: '7-13 9:00', upCount: 15, downTime: '7-13 19:00', downCount: 3115, useCount: 3100, useLimit: 8888, lifePercent: '34.88%', lifeWarn: '90%', warnStatus: '姝e父' }
-				]
+				toolRecords: [],
+				loadingTools: false,
+				loadingForm: false,
+				submitting: false,
+				_searchTimer: null
 			};
 		},
+		computed: {
+			totalPages() {
+				return Math.max(1, Math.ceil(this.total / this.pageSize) || 1);
+			}
+		},
 		methods: {
-            async fetchTools(searchKey) {
-                // 浼犻�掑璞★紝鑰屼笉鏄瓧绗︿覆
-                const res = await this.$post({
-                    url: '/MesCutterLedger/QueryTools',
-                    data:searchKey
-                });
-                if (res.status === 0) {
-                    this.filteredTools = res.data.tbBillList.map(t => ({
-                        no: t.cutterId || t.no,
-                        name: t.cutterName || t.name,
-                        model: t.cutterModel || t.model
-                    }));
-                } else {
-                    this.$showMessage(res.message || '鏌ヨ澶辫触');
-                }
-            },
+			openToolDialog() {
+				this.showToolDialog = true;
+				this.pageIndex = 1;
+				this.fetchTools(this.searchKey);
+			},
+			closeToolDialog() {
+				this.showToolDialog = false;
+			},
+			async fetchTools(searchKey) {
+				this.loadingTools = true;
+				try {
+					const res = await this.$post({
+						url: '/MesCutterLedger/QueryTools',
+						data: JSON.stringify({
+							searchKey,
+							pageIndex: this.pageIndex,
+							pageSize: this.pageSize
+						}),
+						headers: { 'Content-Type': 'application/json' }
+					});
+
+					if (res.status === 0) {
+						const payload = Array.isArray(res.data) ? res.data
+							: (res.data && res.data.tbBillList) ? res.data.tbBillList
+								: (res.data && res.data.data) ? res.data.data
+									: [];
+
+						const getField = (obj, ...keys) => {
+							for (const k of keys) if (obj?.[k] !== undefined && obj?.[k] !== null) return obj[k];
+							return null;
+						};
+
+						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')
+						}));
+
+						this.filteredTools = mapped;
+						this.toolList = mapped.slice();
+
+						// 淇 total 璧嬪�间紭鍏堢骇锛屼紭鍏堝彇 res.data.total
+						const totalFromRes = Number(
+							res.data?.total ?? res.data?.totalCount ?? res.total ?? res.totalCount ?? mapped.length
+						);
+						this.total = Number.isFinite(totalFromRes) ? totalFromRes : mapped.length;
+						if (this.pageIndex > this.totalPages) {
+							this.pageIndex = this.totalPages;
+						}
+					} else {
+						this.$showMessage(res.message || '鏌ヨ澶辫触');
+					}
+				} catch (err) {
+					console.error('fetchTools 閿欒锛�', err);
+					this.$showMessage('鏌ヨ鍒�鍏峰け璐ワ紝璇锋鏌ョ綉缁滄垨鎺ュ彛');
+				} finally {
+					this.loadingTools = false;
+				}
+			},
+			//缈婚〉
+			async prevPage() {
+				if (this.pageIndex > 1) {
+					this.pageIndex--;
+					await this.fetchTools(this.searchKey);
+				}
+			},
+			async nextPage() {
+				if (this.pageIndex < this.totalPages) {
+					this.pageIndex++;
+					await this.fetchTools(this.searchKey);
+				}
+			},
+			onSearchKeyInput() {
+				// 闃叉姈锛氳緭鍏ユ椂鑷姩鎼滅储锛堣妭鐪佺偣鍑伙級
+				clearTimeout(this._searchTimer);
+				this._searchTimer = setTimeout(() => {
+					this.searchTool();
+				}, 300);
+			},
 			async searchTool() {
+				this.pageIndex = 1; // 鎼滅储鏃堕噸缃埌绗竴椤�
 				await this.fetchTools(this.searchKey);
 			},
 			selectTool(tool) {
 				this.selectedToolNo = tool.no;
 				this.toolName = tool.name;
 				this.toolModel = tool.model;
+                this.activeToolNo = tool.no; // 璁板綍閫変腑
 			},
 			confirmTool() {
 				this.showToolDialog = false;
 			},
-			handleUpTool() {
-				// 涓婂垁鎻愪氦閫昏緫锛岃皟鐢ㄥ悗绔帴鍙�
-				this.$showMessage('涓婂垁鎻愪氦鎴愬姛锛堢ず渚嬶級');
+			async setUseLimit() {
+				if (!this.selectedToolNo) {
+					this.$showMessage('璇烽�夋嫨鍒�鍏峰悗鍐嶈缃笂闄�');
+					return;
+				}
+				const v = Number(this.useLimitInput);
+				if (isNaN(v) || v <= 0) {
+					this.$showMessage('璇疯緭鍏ユ湁鏁堢殑浣跨敤涓婇檺');
+					return;
+				}
+				// 浠呭墠绔洿鏂拌〃鏍兼樉绀猴紙濡傞渶鎸佷箙鍖栬璋冪敤鍚庣鎺ュ彛锛�
+				this.toolRecords = this.toolRecords.map(r => {
+					if (r.no === this.selectedToolNo) {
+						return { ...r, useLimit: v };
+					}
+					return r;
+				});
+				// 鍚屾 toolList 涓殑妯″瀷锛堝彲鐢ㄦ潵灞曠ず锛�
+				this.toolList = this.toolList.map(t => t.no === this.selectedToolNo ? { ...t, useLimit: v } : t);
+				this.$showMessage('浣跨敤涓婇檺宸茶缃紙浠呭墠绔樉绀猴級');
 			},
-			handleDownTool() {
-				// 涓嬪垁鎻愪氦閫昏緫锛岃皟鐢ㄥ悗绔帴鍙�
-				this.$showMessage('涓嬪垁鎻愪氦鎴愬姛锛堢ず渚嬶級');
+			async handleUpTool() {
+				if (!this.workOrderNo) { this.$showMessage('宸ュ崟鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.machineNo) { this.$showMessage('鏈哄彴鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.selectedToolNo) { this.$showMessage('鍒�鍏风紪鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.useLimitInput) { this.$showMessage('浣跨敤涓婇檺涓嶈兘涓虹┖'); return; }
+				const useLimit = Number(this.useLimitInput);
+				if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('璇疯緭鍏ユ湁鏁堢殑浣跨敤涓婇檺'); return; }
+
+				const payload = {
+					workOrderNo: this.workOrderNo,
+					machineNo: this.machineNo,
+					toolNo: this.selectedToolNo,
+					type: '涓婂垁',
+					useLimit
+				};
+				try {
+					this.submitting = true;
+					const res = await this.$post({
+						url: '/MesCutterLedger/SubmitToolAction',
+						data: JSON.stringify(payload),
+						headers: { 'Content-Type': 'application/json' }
+					});
+					if (res.status === 0) {
+						this.$showMessage('涓婂垁鎻愪氦鎴愬姛');
+						await this.fetchFormData();
+					} else {
+						this.$showMessage(res.message || '涓婂垁鎻愪氦澶辫触');
+					}
+				} catch (err) {
+					console.error(err);
+					this.$showMessage('涓婂垁鎻愪氦澶辫触锛岃妫�鏌ョ綉缁�');
+				} finally {
+					this.submitting = false;
+				}
+			},
+			async handleDownTool() {
+				if (!this.workOrderNo) { this.$showMessage('宸ュ崟鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.machineNo) { this.$showMessage('鏈哄彴鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.selectedToolNo) { this.$showMessage('鍒�鍏风紪鍙蜂笉鑳戒负绌�'); return; }
+				if (!this.useLimitInput) { this.$showMessage('浣跨敤涓婇檺涓嶈兘涓虹┖'); return; }
+				const useLimit = Number(this.useLimitInput);
+				if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('璇疯緭鍏ユ湁鏁堢殑浣跨敤涓婇檺'); return; }
+
+				const payload = {
+					workOrderNo: this.workOrderNo,
+					machineNo: this.machineNo,
+					toolNo: this.selectedToolNo,
+					type: '涓嬪垁',
+					useLimit
+				};
+				try {
+					this.submitting = true;
+					const res = await this.$post({
+						url: '/MesCutterLedger/SubmitToolAction',
+						data: JSON.stringify(payload),
+						headers: { 'Content-Type': 'application/json' }
+					});
+					if (res.status === 0) {
+						this.$showMessage('涓嬪垁鎻愪氦鎴愬姛');
+						await this.fetchFormData();
+					} else {
+						this.$showMessage(res.message || '涓嬪垁鎻愪氦澶辫触');
+					}
+				} catch (err) {
+					console.error(err);
+					this.$showMessage('涓嬪垁鎻愪氦澶辫触锛岃妫�鏌ョ綉缁�');
+				} finally {
+					this.submitting = false;
+				}
 			},
 			cancel() {
 				this.selectedToolNo = '';
 				this.toolName = '';
 				this.toolModel = '';
+				this.useLimitInput = '';
 			},
-			setUseLimit() {
-				// 淇濆瓨浣跨敤涓婇檺閫昏緫锛屽疄闄呭簲璋冪敤鍚庣鎺ュ彛
-				this.$showMessage('浣跨敤涓婇檺宸蹭繚瀛橈紙绀轰緥锛�');
+			async fetchFormData() {
+				if (!this.workOrderNo || !this.machineNo) {
+					console.warn('宸ュ崟鍙锋垨鏈哄彴鍙蜂负绌猴紝璺宠繃鑾峰彇琛ㄥ崟鏁版嵁');
+					return;
+				}
+				this.loadingForm = true;
+				const payload = {
+					workOrderNo: this.workOrderNo.trim(),
+					machineNo: this.machineNo.trim()
+				};
+				try {
+					const res = await this.$post({
+						url: '/MesCutterLedger/GetFormData',
+						data: JSON.stringify(payload),
+						headers: { 'Content-Type': 'application/json' }
+					});
+					if (res.status !== 0) {
+						this.$showMessage(res.message || '鑾峰彇琛ㄥ崟鏁版嵁澶辫触');
+						this.toolRecords = [];
+						return;
+					}
+					const list = Array.isArray(res.data) ? res.data
+						: (res.data && res.data.tbBillList) ? res.data.tbBillList
+							: (res.data && res.data.data) ? res.data.data
+								: [];
+
+					const getField = (obj, ...keys) => {
+						for (const k of keys) if (obj?.[k] !== undefined && obj?.[k] !== null) return obj[k];
+						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 '';
+                        // 濡傛灉鏄皬浜庣瓑浜�1鐨勫皬鏁帮紝鎸夋瘮渚嬫斁澶�
+                        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');
+                        const lifeWarnRaw = getField(t, 'lifE_WARN', 'LIFE_WARN', 'lifeWarn', 'LIFEWARN');
+
+                        // 浣跨敤娆℃暟鍜屼笂闄�
+                        const useCount = getField(t, 'usE_COUNT', 'USE_COUNT', 'useCount');
+                        const useLimit = getField(t, 'usE_LIMIT', 'USE_LIMIT', 'useLimit');
+
+                        // 璁$畻瀵垮懡姣旓紙浣跨敤娆℃暟/浣跨敤涓婇檺锛�
+                        let percent = '';
+                        if (
+                            useCount != null && useLimit != null &&
+                            !isNaN(useCount) && !isNaN(useLimit) &&
+                            Number(useLimit) > 0
+                        ) {
+                            percent = ((Number(useCount) / Number(useLimit)) * 100).toFixed(0) + '%';
+                        }
+
+                        // 棰勮鍊兼牸寮忓寲
+                        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 lifeWarnNum = parseNumber(lifeWarnRaw);
+
+                        // 棰勮瑙勫垯锛氬綋瀵垮懡姣� >= 棰勮鍊兼椂鏍囪 棰勮
+                        let warnStatus = getField(t, 'status', 'STATUS') || '';
+                        if (lifeWarnNum !== null && useCount != null && useLimit != null && !isNaN(useCount) && !isNaN(useLimit) && Number(useLimit) > 0) {
+                            const percentNum = Number(useCount) / Number(useLimit);
+                            warnStatus = (percentNum >= lifeWarnNum) ? '棰勮' : '姝e父';
+                        } else {
+                            warnStatus = warnStatus || '鏈煡';
+                        }
+
+                        return {
+                            id: getField(t, 'id', 'ID') || `${getField(t, 'cutteR_ID') || getField(t, 'CUTTER_ID') || ''}-${upTimeRaw || ''}`,
+                            no: getField(t, 'cutteR_ID', 'CUTTER_ID', 'cutterId', 'no') || '',
+                            name: getField(t, 'cutteR_NAME', 'CUTTER_NAME', 'cutterName', 'name') || '',
+                            upTime: this.formatDateTime(upTimeRaw),
+                            upCount: getField(t, 'uP_COUNT', 'UP_COUNT', 'upCount') ?? '',
+                            downTime: this.formatDateTime(downTimeRaw),
+                            downCount: getField(t, 'dowN_COUNT', 'DOWN_COUNT', 'downCount') ?? '',
+                            useCount: useCount ?? '',
+                            useLimit: useLimit ?? '',
+                            lifePercent: percent,
+                            lifeWarn: formatPercent(lifeWarnNum),
+                            warnStatus
+                        };
+                    });
+
+					this.toolRecords = mapped;
+					const totalFromRes = Number(
+						res.data?.total ?? res.data?.totalCount ?? res.total ?? res.totalCount ?? mapped.length
+					);
+					this.total = Number.isFinite(totalFromRes) ? totalFromRes : mapped.length;
+				} catch (error) {
+					console.error('鑾峰彇琛ㄥ崟鏁版嵁閿欒:', error);
+					this.$showMessage('鑾峰彇鏁版嵁澶辫触锛岃妫�鏌ョ綉缁滆繛鎺�');
+					this.toolRecords = [];
+				} finally {
+					this.loadingForm = false;
+				}
+			},
+			formatDateTime(dateTimeStr) {
+				if (!dateTimeStr) return '';
+				try {
+					const s = String(dateTimeStr).trim();
+					if (/^\d{10}$/.test(s)) {
+						const d = new Date(Number(s) * 1000);
+						return `${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
+					}
+					if (/^\d{13}$/.test(s)) {
+						const d = new Date(Number(s));
+						return `${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
+					}
+					const date = new Date(dateTimeStr);
+					if (!isNaN(date.getTime())) {
+						return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
+					}
+					const match = String(dateTimeStr).match(/(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,2}).*?(\d{1,2}:\d{2})/);
+					if (match) return `${match[1].replace(/-/g, '/').replace(/^\d{4}\//, (m) => m)} ${match[2]}`;
+					return String(dateTimeStr);
+				} catch {
+					return String(dateTimeStr);
+				}
 			}
 		},
 		mounted() {
-			// 椤甸潰鍔犺浇鏃舵媺鍙栧叏閮ㄥ垁鍏�
 			this.fetchTools('');
+			this.machineNo = uni.getStorageSync('machineNo') || '';
+			this.workOrderNo = uni.getStorageSync('daa001') || '';
+
+			console.log('鏈哄彴鍙�:', this.machineNo);
+			console.log('宸ュ崟鍙�:', this.workOrderNo);
+
+			if (this.machineNo && this.workOrderNo) {
+				this.fetchFormData();
+			} else {
+				console.warn('鏈哄彴鍙锋垨宸ュ崟鍙蜂负绌猴紝鏃犳硶鑾峰彇琛ㄥ崟鏁版嵁');
+			}
 		}
 	};
 </script>
@@ -248,27 +564,47 @@
 		z-index: 1000;
 	}
 
-	.dialog {
-		background: #fff;
-		padding: 2vh 2vw;
-		border-radius: 8px;
-		width: 60vw;
-	}
+    .dialog {
+        background: #fff;
+        padding: 3vh 3vw; /* 澧炲ぇ鍐呰竟璺� */
+        border-radius: 12px; /* 绋嶅井鍦嗘鼎涓�鐐� */
+        width: 100vw; /* 鍘�60vw锛屾敼涓�100vw鏇村 */
+        max-width: 1200px; /* 闄愬埗鏈�澶у搴︼紝闃叉瓒呭睆 */
+        min-height: 60vh; /* 澧炲姞鏈�灏忛珮搴� */
+        box-sizing: border-box;
+    }
 
-	.tool-list {
-		display: flex;
-		flex-wrap: wrap;
-		margin: 1vh 0;
-	}
+    .form-group .input {
+        width: 24vw; /* 杈撳叆妗嗘洿瀹� */
+    }
 
-	.tool-btn {
-		margin: 5px 10px 5px 0;
-		padding: 8px 16px;
-		background: #f5f5f5;
-		border: 1px solid #ccc;
-		border-radius: 4px;
-		cursor: pointer;
-	}
+    .tool-list {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 1vh 0;
+        max-height: 40vh;
+        overflow-y: auto;
+    }
+
+    .tool-btn {
+        flex: 0 0 32%;
+        box-sizing: border-box;
+        margin: 5px 1% 5px 0;
+        padding: 8px 16px;
+        background: #e0e0e0;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #333;
+        text-align: left;
+        transition: background 0.15s, color 0.15s;
+    }
+
+        .tool-btn.active {
+            background: #00A2E9;
+            color: #fff;
+            font-weight: bold;
+        }
 
 	.dialog-actions {
 		display: flex;
@@ -281,16 +617,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 {

--
Gitblit v1.9.3