parent
48a6419155
commit
3b994f75d6
@ -1,31 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="showStatus" id="tips" class="tips" ref="tips"></div>
|
<div v-show="showStatus" id="tips" class="tips" ref="tips"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as Tips from './tips'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "TipsComp",
|
name: "TipsComp",
|
||||||
props:{
|
|
||||||
msg:{
|
|
||||||
type:Object,
|
|
||||||
default:{}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
showStatus:false,
|
showStatus:false,
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
stage:null,
|
||||||
|
layer:null,
|
||||||
|
deviceId:null,
|
||||||
|
commandEnum:{
|
||||||
|
大船大船:'大船大船',
|
||||||
|
开始派工:'开始派工',
|
||||||
|
开始报工:'开始报工',
|
||||||
|
确认完毕:'确认完毕',
|
||||||
|
执行成功:'执行成功',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.initKonvaStage()
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.deviceId=this.$route.query.deviceId||''
|
||||||
|
console.log(this.deviceId)
|
||||||
|
},
|
||||||
|
sockets:{
|
||||||
|
tip(data){
|
||||||
|
if (data.code===3001&&data.msg.deviceId===this.$props.deviceId){
|
||||||
|
this.onMsg(`语音设备已暂停,请再次说出"${this.commandEnum.大船大船}"激活语音设备`,true)
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.hide()
|
||||||
|
},10000)
|
||||||
|
}
|
||||||
|
if (data.code===3002&&data.msg.deviceId===this.$props.deviceId){
|
||||||
|
this.show()
|
||||||
|
let msg
|
||||||
|
switch (data.msg.actionType){
|
||||||
|
case this.commandEnum.大船大船:
|
||||||
|
msg='设备已激活,请说出"开始派工"/"开始报工"'
|
||||||
|
break;
|
||||||
|
case this.commandEnum.开始派工:
|
||||||
|
msg=`${data.msg.actionType},请说出派工单号后"确认完毕"`
|
||||||
|
break;
|
||||||
|
case this.commandEnum.开始报工:
|
||||||
|
msg=`${data.msg.actionType},请说出派工单号后"确认完毕"`
|
||||||
|
break;
|
||||||
|
case this.commandEnum.确认完毕:
|
||||||
|
msg='正中处理中,请稍后...'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
msg=data.msg.actionType
|
||||||
|
}
|
||||||
|
this.onMsg(msg)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
complete(){
|
||||||
|
if (data.code===3000&&data.msg.deviceId===this.$props.deviceId){
|
||||||
|
this.onMsg("设备激活中,您需要派工/报工?")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
getShowStatus(){
|
onMsg(msg){
|
||||||
return this.showStatus
|
const {onMsg}=Tips.default
|
||||||
|
onMsg(msg)
|
||||||
|
},
|
||||||
|
initKonvaStage(){
|
||||||
|
this.width=this.$refs.tips.clientWidth
|
||||||
|
this.height=this.$refs.tips.clientHeight
|
||||||
|
const {container}=Tips.default
|
||||||
|
const {stage,layer}=container(this.width,this.height,'tips')
|
||||||
|
this.stage=stage
|
||||||
|
this.layer=layer
|
||||||
},
|
},
|
||||||
hide(){
|
hide(){
|
||||||
this.showStatus = false;
|
this.showStatus = false;
|
||||||
},
|
},
|
||||||
show(){
|
show(){
|
||||||
|
this.hide()
|
||||||
this.showStatus = true
|
this.showStatus = true
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#tips{
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
width: 100%;
|
||||||
|
height: 4.5vh;
|
||||||
|
position: fixed;
|
||||||
|
top:5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,79 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
let $layer=null
|
||||||
|
let $width=null
|
||||||
|
let $height=null
|
||||||
|
let $group=null
|
||||||
|
|
||||||
|
const container=function (width=0,height=0,container){
|
||||||
|
$width=width
|
||||||
|
$height=height
|
||||||
|
const stage = new Konva.Stage({
|
||||||
|
container: container,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
});
|
||||||
|
|
||||||
|
const layer = new Konva.Layer();
|
||||||
|
stage.add(layer)
|
||||||
|
layer.draw();
|
||||||
|
$layer=layer
|
||||||
|
|
||||||
|
const imageObj = new Image();
|
||||||
|
imageObj.src = require('@/assets/pwan/gbSelectBg.png');
|
||||||
|
imageObj.onload = function () {
|
||||||
|
const shape = new Konva.Image({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: width,
|
||||||
|
height:height,
|
||||||
|
image: imageObj,
|
||||||
|
});
|
||||||
|
layer.add(shape)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
stage,layer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMsg=function (msg,replay=false){
|
||||||
|
if ($group){
|
||||||
|
$group.remove()
|
||||||
|
}
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:$width-50,
|
||||||
|
y:0,
|
||||||
|
width:$width*0.35,
|
||||||
|
height:$height,
|
||||||
|
})
|
||||||
|
$layer.add(group)
|
||||||
|
$group=group
|
||||||
|
|
||||||
|
const text=new Konva.Text({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width:$width*0.35,
|
||||||
|
height:$height,
|
||||||
|
fill:'yellow',
|
||||||
|
verticalAlign:'middle',
|
||||||
|
fontSize:24,
|
||||||
|
text:msg
|
||||||
|
})
|
||||||
|
group.add(text)
|
||||||
|
|
||||||
|
const play=function (){
|
||||||
|
group.to({
|
||||||
|
x: -$width*0.3,
|
||||||
|
y: 0,
|
||||||
|
duration: 10, //持续时间
|
||||||
|
onFinish() {
|
||||||
|
group.remove()
|
||||||
|
replay&&play()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
play()
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {container,onMsg}
|
||||||
Loading…
Reference in new issue