<template>
|
<view class="page">
|
<!-- 刀具选择区 -->
|
<view class="top-section">
|
<view class="form-row">
|
<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>
|
</view>
|
<view class="form-row">
|
<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>
|
</view>
|
<view class="form-row">
|
<label class="form-label">刀具名称：</label>
|
<input class="input" v-model="toolName" placeholder="刀具带出" disabled />
|
<label class="form-label" style="margin-left: 24px;">规格型号：</label>
|
<input class="input" v-model="toolModel" placeholder="刀具带出" disabled />
|
</view>
|
</view>
|
|
<!-- 操作按钮 -->
|
<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>
|
</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>
|
</view>
|
<view class="tool-list">
|
<button v-for="tool in filteredTools" :key="tool.no" class="tool-btn" @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>
|
</view>
|
</view>
|
</view>
|
|
<!-- 刀具使用记录表格 -->
|
<view class="table-section">
|
<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>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="item in toolRecords" :key="item.id">
|
<td>{{ item.no }}</td>
|
<td>{{ item.name }}</td>
|
<td>{{ item.upTime }}</td>
|
<td>{{ 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>
|
</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>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
toolList: [
|
// 示例数据，实际应从后端接口获取
|
{ no: 'T22050338', name: 'm1.5合金长刀', model: 'xxx' },
|
{ no: 'T22050337', name: 'm0.546合金长刀', model: 'yyy' }
|
],
|
selectedToolNo: '',
|
toolName: '',
|
toolModel: '',
|
showToolDialog: false,
|
searchKey: '',
|
filteredTools: [],
|
useLimitInput: '',
|
toolRecords: [
|
// 示例数据，实际应从后端接口获取
|
{ 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: '正常' }
|
]
|
};
|
},
|
methods: {
|
searchTool() {
|
this.filteredTools = this.toolList.filter(t =>
|
t.no.includes(this.searchKey) || t.name.includes(this.searchKey)
|
);
|
},
|
selectTool(tool) {
|
this.selectedToolNo = tool.no;
|
this.toolName = tool.name;
|
this.toolModel = tool.model;
|
},
|
confirmTool() {
|
this.showToolDialog = false;
|
},
|
handleUpTool() {
|
// 上刀提交逻辑，调用后端接口
|
this.$showMessage('上刀提交成功（示例）');
|
},
|
handleDownTool() {
|
// 下刀提交逻辑，调用后端接口
|
this.$showMessage('下刀提交成功（示例）');
|
},
|
cancel() {
|
this.selectedToolNo = '';
|
this.toolName = '';
|
this.toolModel = '';
|
}
|
},
|
mounted() {
|
// 实际应从后端加载刀具目录和使用记录
|
this.filteredTools = this.toolList;
|
}
|
};
|
</script>
|
|
<style scoped>
|
.form-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 1.2vh;
|
}
|
|
.form-label {
|
width: 120px;
|
font-weight: bold;
|
}
|
|
.form-select {
|
width: 220px;
|
padding: 1vh;
|
font-size: 1.1vw;
|
margin-right: 10px;
|
}
|
|
.button-row {
|
display: flex;
|
justify-content: center;
|
gap: 32px;
|
margin: 2vh 0;
|
}
|
|
.page {
|
padding: 2vh;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
|
.top-section {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 2vh;
|
}
|
|
.form-group {
|
display: flex;
|
align-items: center;
|
margin-right: 2vw;
|
margin-bottom: 1.5vh;
|
}
|
|
.input {
|
padding: 1vh;
|
font-size: 1.5vw;
|
border: 1px solid #ccc;
|
width: 16vw;
|
}
|
|
.btn-blue {
|
background-color: #00A2E9;
|
color: white;
|
border: none;
|
padding: 8px 18px;
|
margin-left: 10px;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
|
.btn-disabled {
|
background-color: #ccc;
|
color: white;
|
border: none;
|
padding: 8px 18px;
|
margin-left: 10px;
|
border-radius: 5px;
|
cursor: not-allowed;
|
}
|
|
.dialog-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0,0,0,0.3);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
}
|
|
.dialog {
|
background: #fff;
|
padding: 2vh 2vw;
|
border-radius: 8px;
|
width: 60vw;
|
}
|
|
.tool-list {
|
display: flex;
|
flex-wrap: wrap;
|
margin: 1vh 0;
|
}
|
|
.tool-btn {
|
margin: 5px 10px 5px 0;
|
padding: 8px 16px;
|
background: #f5f5f5;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.dialog-actions {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 2vh;
|
}
|
|
.table-section {
|
margin: 2vh 0;
|
overflow-x: auto;
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
th, td {
|
border: 1px solid #ccc;
|
padding: 8px 4px;
|
text-align: center;
|
font-size: 1vw;
|
}
|
|
.warn {
|
color: red;
|
font-weight: bold;
|
}
|
|
.bottom-section {
|
display: flex;
|
justify-content: space-around;
|
margin-top: 2vh;
|
}
|
|
.save-btn, .cancel-btn {
|
width: 28%;
|
padding: 1.5vh;
|
background-color: #00A2E9;
|
color: white;
|
font-size: 1.2vw;
|
border: none;
|
text-align: center;
|
border-radius: 5px;
|
}
|
|
.cancel-btn {
|
background-color: #ccc;
|
color: #333;
|
}
|
|
.tool-desc {
|
margin-top: 2vh;
|
}
|
</style>
|
