227 lines
7.9 KiB
Vue
227 lines
7.9 KiB
Vue
|
<template>
|
|||
|
|
<el-container style="height: 100%;background-color: rgb(19, 71, 98);">
|
|||
|
|
<el-header style="display:flex;justify-content:center;align-items:center;height: 20%">
|
|||
|
|
<span style="font-size: 40px;color: white">
|
|||
|
|
{{ form.device_name }}
|
|||
|
|
</span>
|
|||
|
|
</el-header>
|
|||
|
|
<el-main style="height: 60%">
|
|||
|
|
<el-row style="height: 23%;border-bottom: solid black 1px">
|
|||
|
|
<el-col :span="12" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
产品：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.material_code }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
批次：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.pcsn }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row style="height: 23%;border-bottom: solid black 1px">
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
当前物料：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: red">
|
|||
|
|
{{ form.now_seq_no }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="16" :offset="8">
|
|||
|
|
<span style="font-size: 30px;color: red">
|
|||
|
|
{{ form.now_material }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="16" :offset="8">
|
|||
|
|
<span style="font-size: 30px;color: red">
|
|||
|
|
{{ form.now_formula_qty }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row style="height: 23%;border-bottom: solid black 1px">
|
|||
|
|
<el-col v-if="form.flag === '0'" :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
当前需出：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.needout_qty }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-if="form.flag === '0'" :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
称重重量：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.putfit_qty }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col v-if="form.flag === '1'" :span="16" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :offset="3">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
错误信息：{{ form.msg }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="7" :offset="1" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="18" :offset="6">
|
|||
|
|
<div v-if="form.flag === '1'" style="width: 50px;height: 50px;background-color: red;border-radius: 50%" />
|
|||
|
|
<div v-if="form.flag === '0'" style="width: 50px;height: 50px;background-color: green;border-radius: 50%" />
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row style="height: 23%;border-bottom: solid black 1px">
|
|||
|
|
<el-col :span="6" style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
物料进度：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="18" style="height: 100%;display: table">
|
|||
|
|
<el-progress
|
|||
|
|
:text-inside="true"
|
|||
|
|
:stroke-width="40"
|
|||
|
|
:percentage="form.rate"
|
|||
|
|
status="exception"
|
|||
|
|
style="display:table-cell; vertical-align:middle;"
|
|||
|
|
/>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-main>
|
|||
|
|
<el-footer style="height: 20%;">
|
|||
|
|
<el-row style="height: 25%;">
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="6" :offset="6">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
下一物料：
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.next_seq_no }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="16" :offset="8">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.next_material }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8" style="height: 100%;">
|
|||
|
|
<el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<el-col :span="16" :offset="8">
|
|||
|
|
<span style="font-size: 30px;color: white">
|
|||
|
|
{{ form.next_formula_qty }}
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-footer>
|
|||
|
|
</el-container>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'Test',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
device_code: '',
|
|||
|
|
device_name: '',
|
|||
|
|
material_code: '',
|
|||
|
|
pcsn: '',
|
|||
|
|
now_seq_no: '',
|
|||
|
|
now_material: '',
|
|||
|
|
now_formula_qty: '',
|
|||
|
|
needout_qty: '',
|
|||
|
|
putfit_qty: '',
|
|||
|
|
flag: '',
|
|||
|
|
rate: '',
|
|||
|
|
msg: '',
|
|||
|
|
next_material: '',
|
|||
|
|
next_seq_no: '',
|
|||
|
|
next_formula_qty: ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
debugger
|
|||
|
|
if (navigator.presentation.receiver) {
|
|||
|
|
navigator.presentation.receiver.connectionList.then(list => {
|
|||
|
|
list.connections.map(connection => this.addConnection(connection))
|
|||
|
|
list.addEventListener('connectionavailable', function(event) {
|
|||
|
|
this.addConnection(event.connection)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
addConnection(connection) {
|
|||
|
|
debugger
|
|||
|
|
console.log(console.log('test---------' + connection.toString()))
|
|||
|
|
const _this = this
|
|||
|
|
connection.addEventListener('message', function(event) {
|
|||
|
|
debugger
|
|||
|
|
const data = JSON.parse(event.data)
|
|||
|
|
_this.form = data.message
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|