parent
48a6419155
commit
3b994f75d6
@ -1,31 +1,103 @@
|
||||
<template>
|
||||
<div v-if="showStatus" id="tips" class="tips" ref="tips"></div>
|
||||
<div v-show="showStatus" id="tips" class="tips" ref="tips"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Tips from './tips'
|
||||
|
||||
export default {
|
||||
name: "TipsComp",
|
||||
props:{
|
||||
msg:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
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:{
|
||||
getShowStatus(){
|
||||
return this.showStatus
|
||||
onMsg(msg){
|
||||
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(){
|
||||
this.showStatus = false;
|
||||
},
|
||||
show(){
|
||||
this.hide()
|
||||
this.showStatus = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</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