| | |
| | | <!-- 刀具选择区 --> |
| | | <view class="top-section-grid"> |
| | | <view class="form-cell"> |
| | | <label class="form-label">选择刀具编号:</label> |
| | | <select v-model="selectedToolNo" class="form-select" :disabled="loadingTools"> |
| | | <option value="" disabled>请选择</option> |
| | | <option v-for="tool in toolList" :key="tool.no" :value="tool.no">{{ tool.no }} | {{ tool.name }}</option> |
| | | </select> |
| | | <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 || loadingForm" /> |
| | | <button class="btn-blue" @click="setUseLimit" :disabled="!selectedToolNo || !useLimitInput || loadingForm">保存上限</button> |
| | | </view> |
| | | <view class="form-cell"> |
| | | <label class="form-label">刀具名称:</label> |
| | |
| | | <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="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> |
| | |
| | | return { |
| | | machineNo: '',//机台编码 |
| | | workOrderNo: '',//工单号 |
| | | activeToolNo: '', // 当前选中的刀具编号 |
| | | pageIndex: 1, |
| | | pageSize: 18, |
| | | total: 0, |
| | |
| | | loadingTools: false, |
| | | loadingForm: false, |
| | | submitting: false, |
| | | _searchTimer: null |
| | | _searchTimer: null, |
| | | workOrderCurrentCjNum: null // 工单当前数采 |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | this.filteredTools = mapped; |
| | | this.toolList = mapped.slice(); |
| | | |
| | | // 更新 total 并修正 pageIndex 越界问题 |
| | | const totalFromRes = Number(res.totalCount ?? res.data?.total ?? res.data?.totalCount ?? mapped.length); |
| | | 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; |
| | |
| | | this.loadingTools = false; |
| | | } |
| | | }, |
| | | //翻页 |
| | | async prevPage() { |
| | | if (this.pageIndex > 1) { |
| | | this.pageIndex--; |
| | |
| | | } |
| | | }, |
| | | onSearchKeyInput() { |
| | | // 防抖:输入时自动搜索(节省点击) |
| | | clearTimeout(this._searchTimer); |
| | | this._searchTimer = setTimeout(() => { |
| | | this.searchTool(); |
| | | }, 300); |
| | | }, |
| | | async searchTool() { |
| | | this.pageIndex = 1; // 搜索时重置到第一页 |
| | | 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; |
| | |
| | | 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('使用上限已设置(仅前端显示)'); |
| | | }, |
| | | // 上刀时传递 sdjs = 工单 currentCjNum |
| | | async handleUpTool() { |
| | | if (!this.workOrderNo) { this.$showMessage('工单号不能为空'); return; } |
| | | if (!this.machineNo) { this.$showMessage('机台号不能为空'); return; } |
| | |
| | | const useLimit = Number(this.useLimitInput); |
| | | if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('请输入有效的使用上限'); return; } |
| | | |
| | | // sdjs 使用工单 currentCjNum |
| | | const sdjs = this.workOrderCurrentCjNum != null ? Number(this.workOrderCurrentCjNum) : null; |
| | | |
| | | const payload = { |
| | | workOrderNo: this.workOrderNo, |
| | | machineNo: this.machineNo, |
| | | toolNo: this.selectedToolNo, |
| | | type: '上刀', |
| | | useLimit |
| | | useLimit, |
| | | sdjs // 上刀计数(工单当前数采) |
| | | }; |
| | | try { |
| | | this.submitting = true; |
| | |
| | | this.submitting = false; |
| | | } |
| | | }, |
| | | // 下刀时传递 xdjs = 工单 currentCjNum |
| | | async handleDownTool() { |
| | | if (!this.workOrderNo) { this.$showMessage('工单号不能为空'); return; } |
| | | if (!this.machineNo) { this.$showMessage('机台号不能为空'); return; } |
| | |
| | | const useLimit = Number(this.useLimitInput); |
| | | if (isNaN(useLimit) || useLimit <= 0) { this.$showMessage('请输入有效的使用上限'); return; } |
| | | |
| | | // 下刀计数同样取工单最新采集数 |
| | | const xdjs = this.workOrderCurrentCjNum != null ? Number(this.workOrderCurrentCjNum) : null; |
| | | |
| | | const payload = { |
| | | workOrderNo: this.workOrderNo, |
| | | machineNo: this.machineNo, |
| | | toolNo: this.selectedToolNo, |
| | | type: '下刀', |
| | | useLimit |
| | | useLimit, |
| | | xdjs // 下刀计数 |
| | | }; |
| | | try { |
| | | this.submitting = true; |
| | |
| | | return Number.isFinite(n) ? n : null; |
| | | }; |
| | | |
| | | const formatPercent = n => (n === null || n === undefined || isNaN(n)) ? '' : `${Number(n).toFixed(2)}%`; |
| | | 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'); |
| | | const lifePercentRaw = getField(t, 'lifE_PERCENT', 'LIFE_PERCENT', 'lifePercent', 'LIFEPERCENT'); |
| | | const lifeWarnRaw = getField(t, 'lifE_WARN', 'LIFE_WARN', 'lifeWarn', 'LIFEWARN'); |
| | | const currentCjNum = getField(t, 'currentCjNum', 'CURRENTCJNUM', 'CurrentCjNum'); |
| | | |
| | | const lifePercentNum = parseNumber(lifePercentRaw); |
| | | 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); |
| | | |
| | | // 预警规则:当寿命比 >= 预警值时标记 预警(与后端 V_WOMDAA_BY_CUTTER 保持一致) |
| | | let warnStatus = getField(t, 'status', 'STATUS') || ''; |
| | | if (lifeWarnNum !== null && lifePercentNum !== null) { |
| | | warnStatus = (lifePercentNum >= lifeWarnNum) ? '预警' : '正常'; |
| | | if (lifeWarnNum !== null && useCount != null && useLimit != null && !isNaN(useCount) && !isNaN(useLimit) && Number(useLimit) > 0) { |
| | | const percentNum = Number(useCount) / Number(useLimit); |
| | | warnStatus = (percentNum >= lifeWarnNum) ? '预警' : '正常'; |
| | | } else { |
| | | warnStatus = warnStatus || '未知'; |
| | | } |
| | |
| | | upCount: getField(t, 'uP_COUNT', 'UP_COUNT', 'upCount') ?? '', |
| | | downTime: this.formatDateTime(downTimeRaw), |
| | | downCount: getField(t, 'dowN_COUNT', 'DOWN_COUNT', 'downCount') ?? '', |
| | | useCount: getField(t, 'usE_COUNT', 'USE_COUNT', 'useCount') ?? '', |
| | | useLimit: getField(t, 'usE_LIMIT', 'USE_LIMIT', 'useLimit') ?? '', |
| | | lifePercent: formatPercent(lifePercentNum), |
| | | lifeWarn: lifeWarnNum !== null ? `${Number(lifeWarnNum).toFixed(0)}%` : (lifeWarnRaw ? String(lifeWarnRaw) : ''), |
| | | warnStatus |
| | | useCount: useCount ?? '', |
| | | useLimit: useLimit ?? '', |
| | | lifePercent: percent, |
| | | lifeWarn: formatPercent(lifeWarnNum), |
| | | warnStatus, |
| | | currentCjNum |
| | | }; |
| | | }); |
| | | |
| | | this.toolRecords = mapped; |
| | | const totalFromRes = Number(res.totalCount ?? res.data?.total ?? res.data?.totalCount ?? this.toolRecords.length); |
| | | this.total = Number.isFinite(totalFromRes) ? totalFromRes : this.toolRecords.length; |
| | | 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; |
| | | } |
| | | }, |
| | | // 自动带出工单刀具信息,并获取工单最新采集数 |
| | | async fetchDefaultToolFromWorkOrder() { |
| | | if (!this.machineNo) return; |
| | | try { |
| | | const res = await this.$post({ |
| | | url: '/Womdaa/GetWomdaasByShow', |
| | | data: JSON.stringify({ machineNo: this.machineNo }), |
| | | headers: { 'Content-Type': 'application/json' } |
| | | }); |
| | | if (res.status === 0 && Array.isArray(res.data?.tbBillList) && res.data.tbBillList.length > 0) { |
| | | const order = res.data.tbBillList[0]; |
| | | this.selectedToolNo = order.cutterId || order.cutteR_ID || ''; |
| | | this.toolName = order.cutterName || order.cutteR_NAME || ''; |
| | | this.toolModel = order.cutterModel || order.cutteR_MODEL || ''; |
| | | // 关键:获取工单最新采集数 |
| | | this.workOrderCurrentCjNum = order.CurrentCjNum ?? order.currentCjNum ?? null; |
| | | } else { |
| | | this.workOrderCurrentCjNum = null; |
| | | } |
| | | } catch (e) { |
| | | console.warn('自动带出工单刀具失败', e); |
| | | this.workOrderCurrentCjNum = null; |
| | | } |
| | | }, |
| | | formatDateTime(dateTimeStr) { |
| | |
| | | |
| | | if (this.machineNo && this.workOrderNo) { |
| | | this.fetchFormData(); |
| | | this.fetchDefaultToolFromWorkOrder(); |
| | | } else { |
| | | console.warn('机台号或工单号为空,无法获取表单数据'); |
| | | } |
| | |
| | | |
| | | .dialog { |
| | | background: #fff; |
| | | padding: 2vh 2vw; |
| | | border-radius: 8px; |
| | | width: 60vw; |
| | | padding: 3vh 3vw; /* 增大内边距 */ |
| | | border-radius: 12px; /* 稍微圆润一点 */ |
| | | width: 100vw; /* 原60vw,改为100vw更宽 */ |
| | | max-width: 1200px; /* 限制最大宽度,防止超屏 */ |
| | | min-height: 60vh; /* 增加最小高度 */ |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .form-group .input { |
| | | width: 24vw; /* 输入框更宽 */ |
| | | } |
| | | |
| | | .tool-list { |
| | |
| | | } |
| | | |
| | | .tool-btn { |
| | | margin: 5px 10px 5px 0; |
| | | flex: 0 0 32%; |
| | | box-sizing: border-box; |
| | | margin: 5px 1% 5px 0; |
| | | padding: 8px 16px; |
| | | background: #f5f5f5; |
| | | background: #e0e0e0; |
| | | border: 1px solid #ccc; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | background: #e0e0e0; |
| | | color: #888; |
| | | 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; |
| | |
| | | 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 { |