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>
|