Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

GP12触摸屏

Browse Source
This commit is contained in:
赵正易
2025-01-03 16:42:34 +08:00
parent 40676be6d0
commit 6dcf20f6ef
3 changed files with 469 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/qualityManagement/gp12/touchScreen/components/scanInput.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div class="scanInput">
<input ref="inputRef" :type="passwordShow ? 'text' : 'password'" autofocus placeholder="请扫码" v-model="input"
@keydown="handleKeyPress" />
<!-- <button @click="togglePasswordVisibility">
<span>{{ passwordIcon }}</span>
</button> -->
<button class="bg-blue-darken-1 ml-2" size="x-large" @click="doInputChange(input)">
扫码
</button>
</div>
</template>
<script>
export default {
data() {
return {
input: '',
passwordShow: false,
timer: null
};
},
computed: {
passwordIcon() {
return this.passwordShow ? '👁️‍🗨️' : '🔑';
}
},
mounted() {
this.autoInputFocus();
this.timer = setInterval(() => {
// datetime.value = this.dayjs().format('YYYY-MM-DD HH:mm:ss')
}, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
autoInputFocus() {
if (this.$refs.inputRef) {
this.$nextTick(() => {
this.$refs.inputRef.focus();
});
}
},
handleKeyPress(event) {
if (event.key === 'Enter') {
this.doInputChange(this.input);
}
},
togglePasswordVisibility() {
this.passwordShow = !this.passwordShow;
},
doInputChange(value) {
const _value = value.trim();
if (_value === '') {
this.autoInputFocus();
return;
}
this.input = '';
this.$emit('scanInput', _value);
}
}
};
</script>
<style scoped>
.scanInput {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
input {
width: 100%;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 60px;
padding: 10px 10px;
border: none;
border-radius: 4px;
color: white;
background-color: #1e88e5;
cursor: pointer;
}
button:hover {
background-color: #1976d2;
}
</style>

372
src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
View File

@@ -4,27 +4,20 @@
<el-col :span="8" v-for="(group, index) in groups" :key="index">
<el-card shadow="hover" class="box-card">
<div class="card-header">
{{ group.title }}
{{ group.groupName }}
</div>
<div>
<el-row :gutter="20">
<el-col :span="3" v-for="(item, index) in 8" :key="index">
<div class="defect-item-box">
</div>
<el-row :gutter="10" v-for="row, rowIndex in rowList" :key="rowIndex">
<el-col :span="3">
<div class="defect-item-left">{{ row }}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" v-for="(item, index) in 8" :key="index">
<div class="defect-item-box">
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" v-for="(item, index) in 8" :key="index">
<div class="defect-item-box">
<el-col v-if="item.type === row" :span="3" v-for="(item, index) in group.children"
:key="index">
<div class="defect-item-box" @mousedown="handleStart($event, item)"
@mouseup="handleEnd(item)" @touchstart="handleStart($event, item)"
@touchend="handleEnd(item)">
<div class="defect-item-name">{{ item.name }}</div>
<div class="defect-item-number">{{ getClickItemNum(item) }}</div>
</div>
</el-col>
</el-row>
@@ -39,28 +32,31 @@
<span>{{ formData.workOrder }}</span>
</div>
<div>
<span class="text-green">正常</span>
<span :class="messageClass">{{ message }}</span>
</div>
</div>
<div class="workorder-card-button-box">
<el-button type="primary">刷新数据</el-button>
<el-button type="primary" @click="doRefresh">刷新数据</el-button>
<el-button type="success">开始工单</el-button>
</div>
<div>
<scanInput @scanInput="handlerScanInput"></scanInput>
</div>
<table class="workorder-card-table">
<tr>
<td>班组</td>
<td>
<el-select v-model="formData.team" placeholder="请选择班组">
<el-option v-for="item in teamOptions" :key="item.value" :label="item.label"
:value="item.value">
<el-option v-for="item in teamOptions" :key="item.code" :label="item.name"
:value="item.code">
</el-option>
</el-select>
</td>
<td>站点</td>
<td>
<el-select v-model="formData.site" placeholder="请选择站点">
<el-option v-for="item in siteOptions" :key="item.value" :label="item.label"
:value="item.value">
<el-option v-for="item in siteOptions" :key="item.code" :label="item.name"
:value="item.code">
</el-option>
</el-select>
</td>
@@ -106,41 +102,274 @@
</el-card>
</el-col>
</el-row>
<!-- 修改缺陷项 -->
<el-dialog class="dialogBox" :visible="updateDialogShow" title="缺陷项修改" width="400px" append-to-body
:close-on-click-modal="false">
<el-form label-width="auto">
<el-form-item label="工单号">
<div class="number-text">{{ formData.workOrder }}</div>
</el-form-item>
<el-form-item label="缺陷项">
<div class="number-text">{{ updateName }}</div>
</el-form-item>
<el-form-item label="缺陷数">
<el-input-number class="number-text" v-model="updateNum"></el-input-number>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="updateDialogShow = false">取消</el-button>
<el-button type="primary" @click="updateDefectNum"> 确认修改 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
import scanInput from '../components/scanInput.vue';
export default {
name: 'WorkOrder',
components: { scanInput },
data() {
return {
groups: [
{ title: '油漆', description: '检查设备A' },
{ title: '设备', description: '检查设备B' },
{ title: '毛坯', description: '检查设备C' },
{ title: '程序', description: '检查设备D' },
{ title: '班组操作', description: '检查设备E' }
{ groupName: '油漆', children: [] },
{ groupName: '设备', children: [] },
{ groupName: '毛坯', children: [] },
{ groupName: '程序', children: [] },
{ groupName: '班组操作', children: [] }
],
teamOptions: [
{ label: 'A组', value: 'A组' },
{ label: 'B组', value: 'B组' },
{ label: 'C组', value: 'C组' },
],
siteOptions: [
{ label: '1站点', value: '1站点' },
{ label: '2站点', value: '2站点' },
{ label: '3站点', value: '3站点' },
rowList: ['抛光', '打磨', '报废'],
// 缺陷数据
defectList: [
{
id: '11',
defectCode: '111',
defectNum: 5
},
{
id: '22',
defectCode: '111',
defectNum: 5
}
],
teamOptions: [],
siteOptions: [],
formData: {
// W20250102001
workOrder: 'W20250102001',
team: '',
site: ''
}
site: '',
specification: '',
color: '',
description: '',
isOnetime: false,
isBack: false,
isPolish: false,
isOut: false,
},
messageClass: 'text-green',
message: '正常',
// 按钮
isLongPress: false,
pressTimer: null,
updateDialogShow: false,
updateName: '',
updateCode: '',
updateNum: 0
};
},
computed: {
// 20250103 TODO 投入数，合格数，合格率，抛光数，打磨数，报废数 计算
},
created() {
this.init();
},
methods: {
init() {
async init() {
// 初始化方法
let team = await QcGp12Api.GetGroupOptions()
let site = await QcGp12Api.GetStieOptions()
let groups = await QcGp12Api.GetDefectInitOptions()
this.teamOptions = team.data
this.siteOptions = site.data
this.groups = groups.data
},
doRefresh() {
this.init()
},
handlerScanInput(value) {
this.handleAnalyzeLabel(value)
},
handleAnalyzeLabel(label = '') {
const params = {
label,
type: 1
}
QcGp12Api.AnalyzeLabel(params).then(res => {
console.log(res);
if (res.code === 200 && res.data.isOk) {
this.message = '正常';
this.messageClass = 'text-green';
} else {
this.$confirm('标签异常', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
}).catch(() => {
});
this.message = '标签异常';
this.messageClass = 'text-red';
}
})
},
handleClick(item) {
console.log('Clicked on:', item);
// 在这里可以添加点击事件的具体逻辑
},
handleStart(event, item) {
// 如果是触摸事件，阻止其默认行为（如滚动）
if (event.type.startsWith('touch')) event.preventDefault();
// 清除之前的定时器
if (this.pressTimer) clearTimeout(this.pressTimer);
// 设置新的定时器，用于判断长按
this.pressTimer = setTimeout(() => {
this.isLongPress = true;
console.log('长按');
// 这里执行长按的逻辑
this.showUpdateDialog(item);
}, 500); // 长按的阈值设为500毫秒
},
handleEnd(item) {
// 清除定时器
if (this.pressTimer) clearTimeout(this.pressTimer);
// 这里执行短按或长按结束的逻辑
this.clickQualityIte(item);
this.isLongPress = false;
},
clickQualityIte(item) {
// 长按则跳过
if (this.isLongPress) {
return;
}
console.log('短按');
const workOrder = this.formData.workOrder;
if (workOrder === null || workOrder === '') {
this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
}).catch(() => {
});
this.message = '未扫描箱标签';
this.messageClass = 'text-red';
return;
}
const newNum = this.getClickItemNum(item) + 1;
// const params = {
// WorkOrder: this.formData.workOrder,
// DefectCode: item.code,
// num: item.num || 0,
// checkName: this.checkName
// };
// FQCApi.AddDefectNum(params).then((res) => {
// if (res.code !== 200) {
// this.$message.error('添加缺陷项异常');
// return;
// }
// });
this.$set(item, 'num', newNum);
},
showUpdateDialog(item) {
const workOrder = this.formData.workOrder;
if (workOrder === null || workOrder === '') {
this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
}).catch(() => {
});
this.message = '未扫描箱标签';
this.messageClass = 'text-red';
return;
}
this.updateName = item.type + '-' + item.name;
this.updateCode = item.code;
this.updateNum = this.getClickItemNum(item);
this.updateDialogShow = true;
},
updateDefectNum() {
const workOrder = this.formData.workOrder;
if (workOrder === null || workOrder === '') {
this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
}).catch(() => {
});
this.message = '未扫描箱标签';
this.messageClass = 'text-red';
return;
}
const params = {
WorkOrder: this.formData.workOrder,
DefectCode: this.updateCode,
num: this.updateNum,
checkName: this.checkName
};
this.setDefectNum(params.DefectCode, params.num);
this.updateDialogShow = false;
// FQCApi.UpdateDefectNum(params).then((res) => {
// if (res.code === 200) {
// this.$confirm('修改成功', '提示', {
// type: 'success',
// center: true
// }).then(() => {
// }).catch(() => {
// });
// this.message = '正常';
// this.messageClass = 'text-green';
// this.setDefectNum(params.DefectCode, params.num);
// this.updateDialogShow = false;
// } else {
// this.$confirm('修改失败', '提示', {
// type: 'error',
// center: true
// }).then(() => {
// }).catch(() => {
// });
// this.message = '修改异常';
// this.messageClass = 'text-red';
// return;
// }
// });
},
getClickItemNum(item) {
if (!item.num) {
return 0;
}
return parseInt(item.num, 0);
},
setDefectNum(defectCode, num) {
// 更新缺陷数量的方法
for (let group of this.groups) {
for (let child of group.children) {
if (child.code === defectCode) {
child.num = num;
break;
}
}
}
}
}
};
@@ -167,11 +396,11 @@ export default {
.card-header {
color: #ecf0f1;
padding-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-size: 28px;
font-weight: 600;
}
@@ -207,11 +436,62 @@ export default {
margin-bottom: 10px;
}
.defect-item-left {
height: 120px;
font-size: 24px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.defect-item-box {
width: 100%;
min-height: 120px;
min-width: 100%;
border-radius: 5%;
margin-top: 10px;
margin-bottom: 10px;
background-color: #016129;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, transform 0.3s ease;
/* 添加过渡效果 */
}
</style>
.defect-item-box:hover {
background-color: #00a876;
/* 悬停时的背景颜色 */
transform: scale(1.05);
/* 悬停时稍微放大 */
cursor: pointer;
/* 改变鼠标指针形状 */
}
.defect-item-name {
width: 100%;
height: 80px;
font-size: 22px;
font-weight: 600;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.defect-item-number {
color: red;
width: 100%;
height: 40px;
font-size: 28px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.number-text {
font-size: 28px;
font-weight: 600;
}
</style>