|
|
<template>
|
|
|
<div id="sliao" class="sliao" ref="sliao" >sliao</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Konva from "konva";
|
|
|
export default {
|
|
|
name:'SLiao',
|
|
|
data(){
|
|
|
return {
|
|
|
title:'上 料 作 业 区',
|
|
|
stage:null,
|
|
|
layer:null,
|
|
|
width:'',
|
|
|
height:'',
|
|
|
gbImage:require('@/assets/gb.png'),
|
|
|
sljhGroup:null,
|
|
|
sljhList:[],//上料计划
|
|
|
slGroup:'',
|
|
|
slList:'',
|
|
|
dwGroup:'',
|
|
|
qyList:[//区域,每个内部包含垛位信息
|
|
|
{
|
|
|
name:'一区',
|
|
|
dw:[
|
|
|
{
|
|
|
name:'一剁',
|
|
|
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
|
|
},
|
|
|
{
|
|
|
name:'二剁',
|
|
|
//list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
name:'二区',
|
|
|
dw:[
|
|
|
{
|
|
|
name:'一剁',
|
|
|
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
],
|
|
|
msg:'板材1放入一剁三层',
|
|
|
worker:'',
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
const actions = [
|
|
|
{
|
|
|
message: "fn1", // message消息与func函数执行为映射关系
|
|
|
func: (params1, params2) => {
|
|
|
function fib(n) {
|
|
|
if ((n == 1) | (n == 2)) {
|
|
|
return 1;
|
|
|
} else {
|
|
|
return fib(n - 1) + fib(n - 2);
|
|
|
}
|
|
|
}
|
|
|
return fib(30);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
message: "fn2",
|
|
|
func: () => {
|
|
|
function fib(n) {
|
|
|
if ((n == 1) | (n == 2)) {
|
|
|
return 1;
|
|
|
} else {
|
|
|
return fib(n - 1) + fib(n - 2);
|
|
|
}
|
|
|
}
|
|
|
return fib(30);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
message: "fn3",
|
|
|
func: () => {
|
|
|
function fib(n) {
|
|
|
if ((n == 1) | (n == 2)) {
|
|
|
return 1;
|
|
|
} else {
|
|
|
return fib(n - 1) + fib(n - 2);
|
|
|
}
|
|
|
}
|
|
|
// throw "一个报错挂了,其他的也跟着挂了,走.catch"; // 抛出错误(的确很像Promise.all())
|
|
|
return fib(30);
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
// 2. 根据消息函数数组去create创建一个worker，并存到data变量中去，以便于后续随时使用
|
|
|
this.worker = this.$worker.create(actions);
|
|
|
},
|
|
|
mounted() {
|
|
|
this.worker
|
|
|
.postAll()
|
|
|
.then((res) => {
|
|
|
this.loadingOne = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.loadingOne = false;
|
|
|
});
|
|
|
|
|
|
this.initKonvaStage();
|
|
|
//fixme 调试用
|
|
|
this.drawMsg()
|
|
|
this.drawSljhItem([
|
|
|
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
|
|
|
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
|
|
|
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
|
|
|
])
|
|
|
},
|
|
|
methods: {
|
|
|
//料场垛位实际情况
|
|
|
drawSlItem(slList){
|
|
|
for (let i = 1; i <=slList.length; i++) {
|
|
|
const gb=slList[i-1]
|
|
|
const group=new Konva.Group({
|
|
|
x:0,
|
|
|
y:this.height-260-i*40,
|
|
|
})
|
|
|
this.slGroup.add(group)
|
|
|
const indexRect=new Konva.Rect({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width:40,
|
|
|
height:40,
|
|
|
stroke:'white',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
//group.add(indexRect)
|
|
|
const indexText=new Konva.Text({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width:40,
|
|
|
height:40,
|
|
|
fill:'white',
|
|
|
text:i,
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
})
|
|
|
group.add(indexText)
|
|
|
|
|
|
//层 规格,套料图 船号,上料日期,计划切割日期
|
|
|
const imageObj = new Image();
|
|
|
const imgSize=300
|
|
|
imageObj.src = this.gbImage;
|
|
|
imageObj.onload = function () {
|
|
|
const shape = new Konva.Image({
|
|
|
x: 60,
|
|
|
y: 0,
|
|
|
width: imgSize,
|
|
|
height:40,
|
|
|
image: imageObj,
|
|
|
});
|
|
|
group.add(shape)
|
|
|
const gbText=new Konva.Text({
|
|
|
x: 60,
|
|
|
y: 0,
|
|
|
width: imgSize,
|
|
|
height:40,
|
|
|
fill:'white',
|
|
|
text:gb+',12*2830*13090',
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
})
|
|
|
group.add(gbText)
|
|
|
}
|
|
|
|
|
|
const concent=new Konva.Text({
|
|
|
x: imgSize+40,
|
|
|
y: 0,
|
|
|
width: imgSize,
|
|
|
height:40,
|
|
|
fill:'white',
|
|
|
text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
})
|
|
|
group.add(concent)
|
|
|
}
|
|
|
},
|
|
|
//绘制上料计划钢板信息
|
|
|
drawSljhItem(list){
|
|
|
const itemWith=80;
|
|
|
const itemHeight=108
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
const item=list[i];
|
|
|
const qyGroup=new Konva.Group({
|
|
|
x:(i+1)*5+i*itemWith,
|
|
|
y:10,
|
|
|
width:itemWith,
|
|
|
height:itemHeight,
|
|
|
})
|
|
|
const rect=new Konva.Rect({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width:itemWith,
|
|
|
height:itemHeight,
|
|
|
stroke:'white',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
qyGroup.add(rect)
|
|
|
const text=new Konva.Text({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width:itemWith,
|
|
|
height:itemHeight,
|
|
|
lineHeight:1,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:0.1,
|
|
|
text:item.czbh+'\n'+item.pl+'\n'+item.tzbh+'\n建议位置\n'+item.perQy+'\n'+item.perDw+'\n'+item.perCeng,
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
})
|
|
|
qyGroup.add(text)
|
|
|
this.sljhGroup.add(qyGroup)
|
|
|
}
|
|
|
},
|
|
|
initKonvaStage(){
|
|
|
this.width=this.$refs.sliao.clientWidth
|
|
|
this.height=this.$refs.sliao.clientHeight
|
|
|
|
|
|
this.stage = new Konva.Stage({
|
|
|
container: "sliao",
|
|
|
width: this.width,
|
|
|
height: this.height,
|
|
|
});
|
|
|
//this.stage.container().style.cursor = "sw-resize";
|
|
|
|
|
|
this.layer = new Konva.Layer();
|
|
|
this.stage.add(this.layer)
|
|
|
this.layer.draw();
|
|
|
|
|
|
this.drawTitle()
|
|
|
//构建布局区域
|
|
|
//上料计划显示区
|
|
|
this.drawSljh()
|
|
|
//区域垛位选择区
|
|
|
this.drawQy()
|
|
|
//上料功能区
|
|
|
this.drawSl();
|
|
|
//移垛记录区
|
|
|
this.drawYd();
|
|
|
},
|
|
|
//绘制移垛记录区
|
|
|
drawYd(){
|
|
|
this.drawContainer({
|
|
|
x:15+this.width*0.6-15+5,
|
|
|
y:this.height-this.height*0.8+10,
|
|
|
width: this.width*0.4-20,
|
|
|
height: this.height*0.8-20,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
},
|
|
|
//绘制上料功能区
|
|
|
drawSl(){
|
|
|
const {qyGroup}=this.drawContainer({
|
|
|
x:15+this.width*0.2+5,
|
|
|
y:this.height-this.height*0.8+10,
|
|
|
width: this.width*0.4-20,
|
|
|
height: this.height*0.8-20,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
this.slGroup=qyGroup
|
|
|
},
|
|
|
drawDw(qyGroup,qy,size){
|
|
|
if (this.dwGroup){
|
|
|
this.dwGroup.destroyChildren()
|
|
|
}
|
|
|
const _group=this.dwGroup=new Konva.Group({
|
|
|
x:54+size,
|
|
|
y:15,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
})
|
|
|
qyGroup.add(_group)
|
|
|
for (let i = 0; i < qy.dw.length; i++) {
|
|
|
const dw=qy.dw[i]
|
|
|
const group=new Konva.Group({
|
|
|
x:0,
|
|
|
y:i*5+i*size,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
})
|
|
|
const rect=new Konva.Rect({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
stroke:'white',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
group.add(rect)
|
|
|
const text=new Konva.Text({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
fill:'white',
|
|
|
text:qy.name+'\n'+dw.name,
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
fontSize:20
|
|
|
})
|
|
|
group.add(text)
|
|
|
group.on('click touchstart',(evt)=>{
|
|
|
this.slGroup.destroyChildren()
|
|
|
this.drawSlItem(dw.list||[])
|
|
|
})
|
|
|
_group.add(group)
|
|
|
}
|
|
|
},
|
|
|
//绘制垛位选择区
|
|
|
drawQy(){
|
|
|
const {quRet,qyGroup}=this.drawContainer({
|
|
|
x:15,
|
|
|
y:this.height-this.height*0.8+10,
|
|
|
width: this.width*0.2,
|
|
|
height: this.height*0.8-20,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
const size=120;
|
|
|
for (let i = 0; i < this.qyList.length; i++) {
|
|
|
const qy=this.qyList[i]
|
|
|
const group=new Konva.Group({
|
|
|
x:23,
|
|
|
y:15+i*5+i*size,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
})
|
|
|
const rect=new Konva.Rect({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
stroke:'white',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
group.add(rect)
|
|
|
const text=new Konva.Text({
|
|
|
x:0,
|
|
|
y:0,
|
|
|
width: size,
|
|
|
height: size,
|
|
|
fill:'white',
|
|
|
text:qy.name,
|
|
|
align:'center',
|
|
|
verticalAlign:'middle',
|
|
|
fontSize:20
|
|
|
})
|
|
|
group.add(text)
|
|
|
group.on('click touchstart',(evt)=>{
|
|
|
this.drawDw(qyGroup,qy,size)
|
|
|
})
|
|
|
qyGroup.add(group)
|
|
|
}
|
|
|
},
|
|
|
//上料计划选择区
|
|
|
drawSljh(){
|
|
|
const {quRet,qyGroup}=this.drawContainer({
|
|
|
x:15,
|
|
|
y:65,
|
|
|
width: this.width-30,
|
|
|
height: this.height*0.2-60,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:1,
|
|
|
})
|
|
|
qyGroup.on('click touchstart',(evt)=>{
|
|
|
})
|
|
|
this.sljhGroup=qyGroup
|
|
|
},
|
|
|
drawMsg(){
|
|
|
this.drawText({
|
|
|
x:15,
|
|
|
y:50,
|
|
|
width:this.width-30,
|
|
|
height:20,
|
|
|
lineHeight:1,
|
|
|
stroke:'white',
|
|
|
strokeWidth:0.1,
|
|
|
text:this.msg,
|
|
|
align:'center',
|
|
|
})
|
|
|
},
|
|
|
drawTitle(){
|
|
|
this.drawText({
|
|
|
x:15,
|
|
|
y:8,
|
|
|
width:this.width-30,
|
|
|
height:20,
|
|
|
lineHeight:1,
|
|
|
stroke:'blue',
|
|
|
strokeWidth:2,
|
|
|
text:this.title,
|
|
|
align:'center',
|
|
|
fontSize:32,
|
|
|
})
|
|
|
},
|
|
|
drawText(option){
|
|
|
const text=new Konva.Text(option)
|
|
|
this.layer.add(text)
|
|
|
return text
|
|
|
},
|
|
|
//绘制区域
|
|
|
drawContainer(option){
|
|
|
const quRet=this.drawRect(option)
|
|
|
const qyGroup=this.drawGroup(option)
|
|
|
|
|
|
return {
|
|
|
quRet,qyGroup
|
|
|
}
|
|
|
},
|
|
|
drawGroup(option){
|
|
|
const qyGroup=new Konva.Group(option);
|
|
|
this.layer.add(qyGroup)
|
|
|
return qyGroup
|
|
|
},
|
|
|
drawRect(option){
|
|
|
const quRet=new Konva.Rect(option);
|
|
|
this.layer.add(quRet)
|
|
|
return quRet
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
#sliao {
|
|
|
background: #ddd;
|
|
|
overflow: hidden;
|
|
|
width: 100%;
|
|
|
height:100vh;
|
|
|
aspect-ratio: 16/9;
|
|
|
}
|
|
|
</style>
|
