RIZO/beizeValveMesVue
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
赵正易 2024-12-11 16:47:35 +08:00
parent 757873c9b9
commit c713c05133
4 changed files with 302 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/touchScreen/components/scanInput.vue
View File

@ -1,10 +1,19 @@
<template>
<div class="scanInput">
<el-input ref="inputRef" v-model="input" type="password" placeholder="请扫码" @blur="doInputBlur"
<!-- <el-input ref="inputRef" v-model="input" type="password" placeholder="请扫码" @blur="doInputBlur"
@change="doInputChange">
</el-input>
<div style="width: 10%;"></div>
<el-button icon="FullScreen" type="primary" @click="doInputChange(input)">手动提交</el-button>
</el-input> -->
<v-text-field prepend-inner-icon="mdi-line-scan" type="password" ref="inputRef" autofocus label="请扫码"
v-model="input" variant="solo-inverted" @keydown="handleKeyPress">
<template v-slot:append>
<v-btn class="bg-blue-darken-1" size="x-large" prepend-icon="mdi-line-scan"
@click="doInputChange(input)">
扫码
</v-btn>
</template>
</v-text-field>
<!-- <el-button icon="FullScreen" type="primary" @click="doInputChange(input)">手动提交</el-button> -->
</div>
</template>
@ -21,11 +30,17 @@ function autoInputFocus() {
})
}
}
// 回车确认提交
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
doInputChange(input.value);
}
};
// 失去焦点时，重新聚焦
function doInputBlur() {
setTimeout(() => {
autoInputFocus()
}, 500)
// setTimeout(() => {
// autoInputFocus()
// }, 500)
}
// 输入框变化时，重新聚焦
function doInputChange(value) {
@ -35,9 +50,9 @@ function doInputChange(value) {
return
}
input.value = ''
setTimeout(() => {
autoInputFocus()
}, 500)
// setTimeout(() => {
// autoInputFocus()
// }, 500)
proxy.$emit('scanInput', _value)
}
@ -55,6 +70,7 @@ onUnmounted(() => {
<style scoped>
.scanInput {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;

24
src/views/touchScreen/main/index.vue
View File

@ -30,7 +30,14 @@
<v-fade-transition>
<Report v-if="menuActivated === '报工'"></Report>
</v-fade-transition>
<!-- 底部logo -->
<v-footer class="footer-center" app>
<el-link type="info" style="font-size: larger" href="http://www.doan-tech.com/"
target="_blank">版权所有：苏州道安自动化技术有限公司
</el-link>
</v-footer>
</v-main>
</v-layout>
</template>
@ -45,11 +52,11 @@ const goBack = () => {
}
// 右侧菜单
const listItems = ref([
{ title: '报工', value: '报工', icon: 'mdi-account' },
{ title: '质量', value: '质量', icon: 'mdi-account' },
{ title: '报警', value: '报警', icon: 'mdi-account' },
{ title: '打印', value: '打印', icon: 'mdi-account' },
{ title: '设置', value: '设置', icon: 'mdi-account' },
{ title: '报工', value: '报工', icon: 'mdi-clipboard-file-outline' },
{ title: '质量', value: '质量', icon: 'mdi-application-edit' },
{ title: '报警', value: '报警', icon: 'mdi-bell-alert' },
{ title: '打印', value: '打印', icon: 'mdi-printer' },
{ title: '设置', value: '设置', icon: 'mdi-tools' },
])
const menuActivated = ref('报工')
function selectItem(val) {
@ -96,6 +103,13 @@ onMounted(() => {
height: 100vh;
}
.footer-center {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.header {
background-color: #006B8C;
padding: 20px;

355
src/views/touchScreen/report/index.vue
View File

@ -1,147 +1,280 @@
<template>
<el-row>
<!-- Left Part -->
<el-col :span="18">
<div class="left-content">
<v-card>
<v-container fluid class="bg-indigo-darken-4">
<v-row>
<v-col cols="8">
<v-card color="blue-darken-4" class="left-content">
<v-tabs v-model="tab" bg-color="primary">
<v-tab value="报工">报工</v-tab>
<v-tab value="历史报工记录">历史报工记录</v-tab>
</v-tabs>
<v-card-text>
123
<v-fade-transition>
<v-tabs-window v-model="tab">
<v-tabs-window-item value="报工">
<el-card v-if="formData.workorder" class="mt-4">
<v-text-field type="number" :label="processId === 10 ? '报工数' : '完成数'"
v-model="formData.finishNum"></v-text-field>
<v-text-field type="number" label="不良数"
v-model="formData.badNum"></v-text-field>
<v-text-field v-if="processId === 10" label="炉号"
v-model="formData.stoveCode"></v-text-field>
<v-text-field v-if="processId === 10" label="进料单"
v-model="formData.feedOrder"></v-text-field>
<v-text-field v-if="processId === 90" label="客户定单"
v-model="formData.customerOrder"></v-text-field>
<div class="d-flex justify-end">
<v-btn class="bg-blue-darken-1" @click="submit">{{ getButtonName()
}}</v-btn>
</div>
</el-card>
</v-tabs-window-item>
<v-tabs-window-item value="历史报工记录">
<el-card v-if="formData.workorder" class="mt-4">
<v-list lines="two" class="bg-transparent">
<v-list-item v-for="(item, index) in reportWorkerOrderList" :key="index"
:title="item.processName">
<v-list-item-subtitle class="d-flex justify-space-between">
<span class="text-subtitle-1">
{{
`完成数:${item.finishNum} 不良数:${item.badNum}`
}}
</span>
<span>{{ `作业员:${item.worker} 提交时间:${item.jobDate}` }}</span>
</v-list-item-subtitle>
</v-list-item>
</v-list>
</el-card>
</v-tabs-window-item>
</v-tabs-window>
</v-fade-transition>
</v-card-text>
<v-card-actions>
<v-btn>提交</v-btn>
</v-card-actions>
</v-card>
</div>
</el-col>
<!-- Right Part -->
<el-col :span="6">
<div class="right-content">
<el-form :model="formData" label-width="auto" label-suffix=":">
<el-form-item label="工序选择">
<el-select v-model="processId" class="form-input">
<el-option v-for="item in processOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="标签扫码">
<scanInput @scanInput="handleScanInput"></scanInput>
</el-form-item>
<el-card class="form-input">
<el-form-item label="工单号">
<el-text class="formItem">{{ formData.workorder }}</el-text>
</el-form-item>
<el-form-item label="主体型号">
<el-text class="formItem">{{ formData.productionCode }}</el-text>
</el-form-item>
<el-form-item label="主体品名">
<el-text class="formItem">{{ formData.productionName }}</el-text>
</el-form-item>
<el-form-item label="计划数量">
<el-text class="formItem">{{ formData.planNum }}</el-text>
</el-form-item>
<el-form-item label="主体图号">
<el-text class="formItem">{{ formData.drawingCode }}</el-text>
</el-form-item>
<el-form-item label="版本号">
<el-text class="formItem">{{ formData.version }}</el-text>
</el-form-item>
<el-form-item label="材料编号">
<el-text class="formItem">{{ formData.materialCode }}</el-text>
</el-form-item>
<el-form-item label="材料型号">
<el-text class="formItem">{{ formData.materialName }}</el-text>
</el-form-item>
<el-form-item label="材质">
<el-text class="formItem">{{ formData.materialtextureCode }}</el-text>
</el-form-item>
<el-form-item label="工单日期">
<el-text class="formItem">{{ formData.workorderDate }}</el-text>
</el-form-item>
<el-form-item label="指示日期">
<el-text class="formItem">{{ formData.instructionDate }}</el-text>
</el-form-item>
</el-card>
</el-form>
</div>
</el-col>
</el-row>
</v-col>
<v-col cols="4">
<v-card color="blue-darken-4" class="right-content">
<v-select variant="solo-filled" v-model="processId" label="工序选择" :items="processOptions">
</v-select>
<scanInput @scanInput="handleScanInput"></scanInput>
<v-fade-transition>
<el-card v-if="formData.workorder" class="mt-4">
<el-form :model="formData" label-width="auto" label-suffix=":">
<el-form-item label="工单号">
<el-text class="formItem text-big">{{ formData.workorder }}</el-text>
</el-form-item>
<el-form-item v-if="processId !== 10" label="炉号">
<el-text class="formItem">{{ formData.stoveCode }}</el-text>
</el-form-item>
<el-form-item label="主体型号">
<el-text class="formItem">{{ formData.productionCode }}</el-text>
</el-form-item>
<el-form-item label="主体品名">
<el-text class="formItem">{{ formData.productionName }}</el-text>
</el-form-item>
<el-form-item label="计划数量">
<el-text class="formItem">{{ formData.planNum }}</el-text>
</el-form-item>
<el-form-item label="主体图号">
<el-text class="formItem">{{ formData.drawingCode }}</el-text>
</el-form-item>
<el-form-item label="版本号">
<el-text class="formItem">{{ formData.version }}</el-text>
</el-form-item>
<el-form-item label="材料编号">
<el-text class="formItem">{{ formData.materialCode }}</el-text>
</el-form-item>
<el-form-item label="材料型号">
<el-text class="formItem">{{ formData.materialName }}</el-text>
</el-form-item>
<el-form-item label="材质">
<el-text class="formItem">{{ formData.materialtextureCode }}</el-text>
</el-form-item>
<el-form-item label="工单日期">
<el-text class="formItem">{{ formData.workorderDate }}</el-text>
</el-form-item>
<el-form-item label="指示日期">
<el-text class="formItem">{{ formData.instructionDate }}</el-text>
</el-form-item>
</el-form>
</el-card>
</v-fade-transition>
</v-card>
</v-col>
</v-row>
<!-- 反馈框 -->
<v-dialog v-model="dialog.show" width="auto">
<v-card :class="dialog.class" min-width="400" :prepend-icon="dialog.icon" :text="dialog.text"
:title="dialog.title">
<template v-slot:actions>
<v-btn class="ms-auto" text="确认" @click="dialog.show = false"></v-btn>
</template>
</v-card>
</v-dialog>
</v-container>
</template>
<script setup>
// Importing necessary components from Element Plus
const { proxy } = getCurrentInstance()
import * as ReportApi from '@/api/reportFlow/index'
import scanInput from '../components/scanInput.vue'
const processOptions = [
{
value: 10,
label: '物料领用',
title: '物料领用',
},
{
value: 20,
label: '机械加工',
title: '机械加工',
},
{
value: 30,
label: '中间检查',
title: '中间检查',
},
{
value: 40,
label: '手工研磨',
title: '手工研磨',
},
{
value: 50,
label: '机研磨',
title: '机研磨',
},
{
value: 60,
label: '精研磨',
title: '精研磨',
},
{
value: 70,
label: '入库检查',
title: '入库检查',
},
// {
// value: 80,
// label: '出厂',
// title: '出厂',
// },
{
value: 90,
label: '出货',
title: '出货',
},
]
const tab = ref('报工')
const processId = ref(10)
function getButtonName() {
if (processId.value === 10) {
return '确认领用'
} else if (processId.value === 90) {
return '确认出货'
} else {
return '确认报工'
}
const formData = reactive({
id: null,
workorder: '工单号',
planNum: 0,
finishNum: 0,
productionName: '产品名称',
productionCode: '产品编码',
unit: '单位',
planNum: '计划数量',
sort: '排序',
workorderDate: '工单日期',
priority: '优先级',
beat: '节拍',
status: '状态',
instructionDate: '指导日期',
materialName: '材料名称',
materialtextureCode: '材质编码',
materialCode: '材料编码',
drawingCode: '图纸编码',
version: '版本',
stoveCode: '炉子编码',
workshopCode: '车间编码',
routeCode: '路线编码',
groupCode: '组编码'
}
const dialog = reactive({
show: false,
icon: 'mdi-alert',
class: 'bg-amber',
title: '提示',
text: '这是一段反馈'
})
const formData = ref({
id: null,
workorder: '',
instructionDate: '',
workorderDate: '',
planNum: 0,
finishNum: 0,
// productionName: '产品名称',
// productionCode: '产品编码',
// unit: '单位',
// planNum: '计划数量',
// sort: '排序',
// workorderDate: '工单日期',
// priority: '优先级',
// beat: '节拍',
// status: '状态',
// instructionDate: '指导日期',
// materialName: '材料名称',
// materialtextureCode: '材质编码',
// materialCode: '材料编码',
// drawingCode: '图纸编码',
// version: '版本',
// stoveCode: '炉子编码',
// workshopCode: '车间编码',
// routeCode: '路线编码',
// groupCode: '组编码'
})
const reportWorkerOrderList = ref([])
function handleScanInput(val) {
console.log(val)
getFormData(val)
}
function getFormData(workorder) {
ReportApi.GetWorkOrderDetail({ workorder }).then(res => {
if (res.code == 200) {
if (res.data) {
formData.value = res.data
ReportApi.GetWorkOrderReportWorkList({ workorder, processId: processId.value }).then(res => {
if (res.code == 200) {
reportWorkerOrderList.value = res.data
}
})
} else {
dialog.show = true
dialog.text = '没有找到该工单'
}
}
})
}
function submit() {
proxy.$confirm('确定提交数据吗？').then(() => {
let params = {
workorder: formData.value.workorder,
processId: processId.value,
// 参数填写
bad_num: formData.value.badNum,
finish_num: formData.value.finishNum,
feed_order: formData.value.feedOrder,
stove_code: formData.value.stoveCode,
customer_order: formData.value.customerOrder,
// worker: formData.value.worker
};
// 领料
if (processId.value === 10) {
ReportApi.FeedProcessReportwork(params).then(res => {
if (res.code == 200) {
dialog.show = true
dialog.class = 'bg-green'
dialog.text = '领料成功'
}
})
}
// 出货
else if (processId.value === 90) {
ReportApi.ShipmentProcessReportwork(params).then(res => {
if (res.code == 200) {
dialog.show = true
dialog.class = 'bg-green'
dialog.text = '出货成功'
}
}
)
}
// 报工
else {
ReportApi.ProcessReportWork(params).then(res => {
if (res.code == 200) {
dialog.show = true
dialog.class = 'bg-green'
dialog.text = '报工成功'
}
}
)
}
}).catch(err => {
})
}
</script>
<style scoped>
@ -150,6 +283,19 @@ function handleScanInput(val) {
margin-right: 10px;
}
.text-big {
font-size: 24px;
font-weight: bold;
}
.flex {
display: flex;
}
.justify-end {
justify-content: flex-end;
}
:deep(.el-form-item__label) {
color: #000000;
}
@ -163,15 +309,12 @@ function handleScanInput(val) {
}
.left-content {
min-height: 90vh;
/* Adjust the height as needed */
background-color: #00949D;
min-height: 88vh;
padding: 20px;
}
.right-content {
min-height: 90vh;
background-color: #46547F;
min-height: 88vh;
padding: 20px;
}
</style>

16
src/vuetify-theme.json
View File

@ -2,15 +2,15 @@
"dark": false,
"colors": {
"background": "#3F51B5",
"surface": "#303F9F",
"surface-bright": "#3D5AFE",
"surface-light": "#5C6BC0",
"surface-variant": "#303F9F",
"surface": "#3949AB",
"surface-bright": "#9FA8DA",
"surface-light": "#7986CB",
"surface-variant": "#7986CB",
"on-surface-variant": "#E8EAF6",
"primary": "#3F51B5",
"primary-darken-1": "#303F9F",
"secondary": "#E8EAF6",
"secondary-darken-1": "#B39DDB",
"primary": "#1E88E5",
"primary-darken-1": "#1565C0",
"secondary": "#9FA8DA",
"secondary-darken-1": "#7986CB",
"error": "#D32F2F",
"info": "#2196F3",
"success": "#4CAF50",