xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.上料拖拽

Browse Source
master
董哲奇 11 months ago
parent a4e3e68a44
commit 195276b094
6 changed files with 641 additions and 552 deletions
Show Stats Download Patch File Download Diff File

4
src/main.js
Unescape View File

@ -88,10 +88,6 @@ Vue.use(dataV)
import VueWorker from 'vue-worker' // Web worker插件
Vue.use(VueWorker)
//引入composition-api
// import VueCompositionAPI from '@vue/composition-api'
// Vue.use(VueCompositionAPI)
// register global utility filters
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])

2
src/permission.js
Unescape View File

@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/menu','/login', '/auth-redirect','/kban','/hbao','/sliao','/sczyjh',] // no redirect whitelist
const whiteList = ['/menu','/login', '/auth-redirect','/kban','/hbao','/sliao',] // no redirect whitelist
export function flatRoutes(routes) {
let ret = [];
routes.forEach(it => {

5
src/router/index.js
Unescape View File

@ -53,11 +53,6 @@ export const constantRoutes = [
component: () => import('@/views/hbao/index'),
hidden: true
},
{
path: '/sczyjh',
component: () => import('@/views/sczyjh/index'),
hidden: true
},
{
path: '/kban',
component: () => import('@/views/kban/index'),

171
src/views/sczyjh/index.vue
Unescape View File

@ -1,171 +0,0 @@
<template>
<el-container>
<el-header style="padding: 15px">
<el-form ref="requestForm" :model="request" label-width="85px">
<el-row>
<el-col :span="3">
<el-form-item label="船号:">
<vxe-pulldown ref="xDown4" transfer >
<template #default>
<vxe-input
v-model="request.dcCh"
placeholder="船号"
style="height: 28px;
line-height: 28px; width: 150px;"
suffix-icon="vxe-icon--search"
@keyup="keyupEvent4"
@focus="focusEvent4"
/>
</template>
<template #dropdown>
<div class="my-dropdown mytable " style="width: 250px">
<vxe-grid
highlight-hover-row
height="auto"
:data="projectData"
:columns="projectColumns"
@cell-click="cellClickEvent"
show-overflow
>
<template #wgbsEdit="{ row}">
<vxe-checkbox v-model="row.wgbs" checked-value="Y" unchecked-value="N" disabled ></vxe-checkbox>
</template>
</vxe-grid>
</div>
</template>
</vxe-pulldown>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="批量:">
<el-input v-model="request.dcPl" type="search" placeholder="批量" ></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="12">
<el-form-item label="需求日期:">
<el-input v-model="request.form" type="search" placeholder="开始" />
</el-form-item>
</el-col>
<el-col :span="1">
<div style="width:100%;text-align:center;line-height: 28px;font-size: 14px">至</div>
</el-col>
<el-col :span="8">
<el-form-item label-width="0px">
<el-input v-model="request.to" type="search" placeholder="结束" />
</el-form-item>
</el-col>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" @click="loadData">查询</el-button>
</el-col>
</el-row>
</el-form>
</el-header>
<el-main>
<VxeGrid v-bind="gridOptions" />
</el-main>
</el-container>
</template>
<script>
import {getCzplBase} from "@/api/sjzx/jcsj";
export default {
name:'Sczyjh',
data(){
return{
projectData: [],
projectColumns:[],
request:{
dcCh:'',
dcPl:'',
},
gridOptions:{
border: true,
resizable: true,
showOverflow: true,
height: 650,
align:'center',
data:[],
columns:[
{type: "seq", title: "序号", width: "50"},
{field:'dcCh',title:'船号', width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'dcPl',title:'批量',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'dcFd',title:'分段',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'kw',title:'跨位',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'zl',title:'组立',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'xzxqrq',title:'小组需求期',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'tlth',title:'套料图号',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'cz',title:'材质',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'wpgg',title:'规格',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'',title:'重量',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{field:'',title:'划线长度',width: "90",
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
]
}
}
},
created(){
this.initProject()
},
methods:{
loadData(){
},
initProject(){
getCzplBase({}).then(res=>{
this.projectData=res.data.cbbm
this.projectData1=res.data.cbbm
})
},
cellClickEvent({row}){
this.request.dcCh = row.cbbm
this.$refs.xDown4.hidePanel()
},
focusEvent4(){
this.$refs.xDown4.showPanel()
},
keyupEvent4(){
if (this.request.dcCh) {
this.projectData = this.projectData1.filter(row => row.cbbm.indexOf(this.request.dcCh.toUpperCase()) > -1)
} else {
this.projectData = this.projectData1.slice(0)
}
},
}
}
</script>

2
src/views/sliao/draw.js
Unescape View File

@ -9,7 +9,7 @@ const sliao=function (options){
}
function drawTitle(){
return new Konva.Text({
x:15,
x:0,
y:8,
width:width-30,
height:20,

965
src/views/sliao/index.vue
Unescape View File

@ -4,245 +4,563 @@
<script>
import Konva from "konva";
// import sliao from "@/views/sliao/draw";
// 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(){},
// mounted() {
// 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){
// console.log(slList.length)
// 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:'black',
// strokeWidth:1,
// })
// //group.add(indexRect)
// const indexText=new Konva.Text({
// x:0,
// y:0,
// width:40,
// height:40,
// fill:'black',
// 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,
import sliao from "@/views/sliao/draw";
export default {
name:'SLiao',
data(){
return {
title:'上 料 作 业 区',
stage:null,
layer:null,
width:'',
height:'',
gbImage:require('@/assets/gb.png'),
mountGroup:null,
sljhStage:null,
sljhLayer:null,
sljhGroup:null,
sljhList:[],//上料计划
canSl:false,
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',]
}
]
},
],
sljhItemList:[
{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:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX096',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B706N4PX077',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX998',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
{czbh:'G175K-4',pl:'001',tzbh:'B006N4PX099',perQy:'一区',perDw:'一剁',perCeng:'三层'},
],
msg:'板材1放入一剁三层',
worker:null,
startMoveX:0,
startMoveTime:0,
isMoving:false,
currentQyIndex:-1,
currentDwIndex:-1,
removeSljhItemIndex:-1,
}
},
created(){},
mounted() {
this.initKonvaStage();
//fixme 调试用
this.drawMsg()
this.drawSljhItem(this.sljhItemList)
},
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,
draggable:true
})
group.setAttr('index',i)
const that=this
this.slGroup.add(group)
const {x}=group.absolutePosition()
group.dragBoundFunc(function (pos){
return {
x:x,
y:pos.y
}
})
let _index=0
group.on('dragmove',function (){
if(_index===0){
_index=this.getAttr('index')
}
this.zIndex(999)
const {y:thisY}=this.absolutePosition()
const children=that.slGroup.children
for (const child of children) {
if (child===this){
return
}
const {y:thatY}=child.absolutePosition()
const moveUpFlag=child.getAttr('moveUp')||false
if (thisY>=thatY&&thisY<=thatY+40&&!moveUpFlag){
child.setAttr('moveUp',true);
child.setAttr('moveDown',false);
--_index
child.move({
y:-40
})
}
const {y:_thatY}=child.absolutePosition()
const moveDownFlag=child.getAttr('moveDown')||false
if (thisY<=_thatY&&!moveDownFlag){
const moveUpFlag=child.getAttr('moveUp')||false
if (moveUpFlag){
child.setAttr('moveUp',false);
child.setAttr('moveDown',true);
++_index
child.move({
y:40
})
}
}
}
})
group.on('dragend',function (){
const index=this.getAttr('index')
const element = slList.splice(index-1, 1)[0];
slList.splice(_index-1, 0, element);
this.setAttr('index',_index)
_index=0
that.slGroup.destroyChildren()
that.drawSlItem(slList)
})
const indexRect=new Konva.Rect({
x:0,
y:0,
width:40,
height:40,
stroke:'black',
strokeWidth:1,
})
//group.add(indexRect)
const indexText=new Konva.Text({
x:0,
y:0,
width:40,
height:40,
fill:'black',
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:'black',
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:'black',
text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
align:'center',
verticalAlign:'middle',
})
group.add(concent)
}
},
//绘制上料计划钢板信息
drawSljhItem(list){
const itemWith=80;
const itemHeight=108
this.sljhList=[]
for (let i = 0; i < list.length; i++) {
const item=list[i];
const x=(i+1)*5+i*itemWith;
const qyGroup=new Konva.Group({
x:x,
y:10,
width:itemWith,
height:itemHeight,
})
qyGroup.setAttr('index',i)
const _layer=this.layer
const _sljhGroup=this.sljhGroup;
const _dwGroup=this.dwGroup
let touchingFlag=false;
const that=this
qyGroup.on('touchstart',function ({evt}){
if (!that.canSl){
return
}
const {clientX:x,clientY:y}=evt.touches[0]
touchingFlag=true;
const _that=this
setTimeout(()=>{
const movingFlag=_sljhGroup.isDragging()
if (!movingFlag){
if (touchingFlag){
_sljhGroup.draggable(false)
const tmpGroup=_that.clone();
tmpGroup.x(x-10)
tmpGroup.y(y-10)
_layer.add(tmpGroup)
tmpGroup.draggable(true)
tmpGroup.dragBoundFunc(function (pos){
const {x,y}=that.slGroup.absolutePosition()
const maxX=x+that.width*0.4-20
const maxY=y+that.height*0.8-20
if(pos.x>=x&&pos.y>=y&&pos.x<=maxX&&pos.y<=maxY){
}
return{
x:pos.x,
y:pos.y
}
})
tmpGroup.on('dragend',function (){
const {x:thisX,y:thisY}=this.absolutePosition()
const {x,y}=that.slGroup.absolutePosition()
const maxX=x+that.width*0.4-20
const maxY=y+that.height*0.8-20
if(thisX>=x&&thisY>=y&&thisX<=maxX&&thisY<=maxY){
that.qyList[that.currentQyIndex].dw[that.currentDwIndex].list.push('12123')
that.slGroup.destroyChildren()
that.drawSlItem(that.qyList[that.currentQyIndex].dw[that.currentDwIndex].list)
this.remove()
that.sljhItemList.splice(this.getAttr('index'),1)
that.sljhGroup.destroyChildren()
that.drawSljhItem(that.sljhItemList)
_sljhGroup.draggable(true)
}else{
this.remove()
_that.visible(true)
}
})
tmpGroup.startDrag()
_that.visible(false)
}
}
if (movingFlag){
}
},500)
})
qyGroup.on('touchend',function (){
touchingFlag=false;
this.draggable(false)
})
const rect=new Konva.Rect({
x:0,
y:0,
width:itemWith,
height:itemHeight,
stroke:'black',
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.sljhList.push(qyGroup)
this.sljhGroup.add(qyGroup)
// this.mountGroup.add(qyGroup)
}
},
//绘制移垛记录区
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:'black',
strokeWidth:1,
})
group.add(rect)
const text=new Konva.Text({
x:0,
y:0,
width: size,
height: size,
fill:'black',
text:qy.name+'\n'+dw.name,
align:'center',
verticalAlign:'middle',
fontSize:20
})
group.add(text)
group.on('click touchstart',(evt)=>{
this.slGroup.destroyChildren()
this.canSl=true
this.currentDwIndex=i
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:'black',
strokeWidth:1,
})
group.add(rect)
const text=new Konva.Text({
x:0,
y:0,
width: size,
height: size,
fill:'black',
text:qy.name,
align:'center',
verticalAlign:'middle',
fontSize:20
})
group.add(text)
group.on('click touchstart',(evt)=>{
this.currentQyIndex=i
this.drawDw(qyGroup,qy,size)
})
qyGroup.add(group)
}
},
//上料计划选择区
drawSljh(){
// this.sljhStage = new Konva.Stage({
// container: "sliao",
// x:15,
// y:65,
// width: this.width-30,
// height: this.height*0.2-60,
// });
// group.add(shape)
// const gbText=new Konva.Text({
// x: 60,
// y: 0,
// width: imgSize,
// height:40,
// fill:'black',
// text:gb+',12*2830*13090',
// align:'center',
// verticalAlign:'middle',
// this.sljhStage.container().style.cursor = "drag";
this.sljhLayer = new Konva.Layer();
this.stage.add(this.sljhLayer)
this.sljhLayer.draw();
const qyGroup=new Konva.Group({
x:15,
y:65,
width: this.width-30,
height: this.height*0.2-60,
stroke:'blue',
strokeWidth:1,
draggable: true,
dragBoundFunc:function (pos){
return {
x:pos.x,
y:65
}
},
});
qyGroup.on('dragmove',function (){
const itemWidth=80
const itemHeight=108;
// this.getChildren((node)=>{
// const {x,y}=node.absolutePosition();
// if(x+itemWidth<20){
// node.visible(false)
// }else if(x+15<20){
// node.clipFunc((ctx)=>{
// ctx.rect(itemWidth-20, 0, itemWidth, itemHeight)
// })
// group.add(gbText)
// }
//
// const concent=new Konva.Text({
// x: imgSize+40,
// y: 0,
// width: imgSize,
// height:40,
// fill:'black',
// text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
// align:'center',
// verticalAlign:'middle',
// })
// group.add(concent)
// if (x+15>=this.width){
// node.visible(false)
// }
// },
// //绘制上料计划钢板信息
// 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:'black',
// 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',
//
// if (x+15<this.width&&x+15+itemWidth>this.width&&node.visible()){
// node.clipFunc((ctx)=>{
// ctx.rect(0, 0, this.width-30-x, itemHeight)
// })
// qyGroup.add(text)
// this.sljhGroup.add(qyGroup)
// }
// },
//
// //绘制移垛记录区
// 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,
})
this.sljhLayer.add(qyGroup)
// const {quRet,qyGroup}=this.drawContainer({
// x:15,
// y:65,
// width: this.width-30,
// height: this.height*0.2-60,
// stroke:'blue',
// strokeWidth:1,
// draggable: true,
// })
// this.slGroup=qyGroup
// },
// drawDw(qyGroup,qy,size){
// if (this.dwGroup){
// this.dwGroup.destroyChildren()
// quRet.on('touchmove',({evt})=>{
// const speed=0.15
// const time=evt.timeStamp
// const x=evt.targetTouches[0].clientX
// if (this.startMoveTime===0){
// this.startMoveTime=time
// this.startMoveX=x
// }
// 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:'black',
// strokeWidth:1,
// })
// group.add(rect)
// const text=new Konva.Text({
// x:0,
// y:0,
// width: size,
// height: size,
// fill:'black',
// text:qy.name+'\n'+dw.name,
// align:'center',
// verticalAlign:'middle',
// fontSize:20
//
// const _time=time-this.startMoveTime
// const dirX=x-this.startMoveX
//
// if (!this.isMoving){
// this.isMoving=true
// this.sljhList.forEach(item=>{
// item.move({
// x:speed*_time*(dirX>0?1:-1)
// })
// group.add(text)
// group.on('click touchstart',(evt)=>{
// console.log(evt.target)
// this.slGroup.destroyChildren()
// this.drawSlItem(dw.list)
// })
// _group.add(group)
// this.startMoveTime=0
// this.startMoveX=0
// this.isMoving=false
// }else{
// this.startMoveTime=time
// this.startMoveX=x
// this.isMoving=false
// }
// },
// //绘制垛位选择区
// drawQy(){
// const {quRet,qyGroup}=this.drawContainer({
// })
this.sljhGroup=qyGroup
// this.mountGroup=this.drawGroup({
// x:15,
// y:this.height-this.height*0.8+10,
// width: this.width*0.2,
@ -250,130 +568,81 @@ import Konva from "konva";
// 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:'black',
// strokeWidth:1,
// })
// group.add(rect)
// const text=new Konva.Text({
// x:0,
// y:0,
// width: size,
// height: size,
// fill:'black',
// text:qy.name,
// align:'center',
// verticalAlign:'middle',
// fontSize:20
// })
// group.add(text)
// group.on('click touchstart',(evt)=>{
// console.log(evt.target)
// 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)=>{
// console.log(evt)
// })
// this.sljhGroup=qyGroup
// },
// drawMsg(){
// this.drawText({
// x:15,
// y:50,
// width:this.width-30,
// height:20,
// lineHeight:1,
// stroke:'black',
// strokeWidth:0.1,
// text:this.msg,
// align:'center',
// })
// },
//
// drawText(option){
// const text=new Konva.Text(option)
// this.layer.add(text)
// return text
// },
//
// initKonvaStage(){
// this.width=this.$refs.sliao.clientWidth
// this.height=this.$refs.sliao.clientHeight
// const options={
// width:this.width,
// height:this.height
// }
// const {drawTitle}=sliao(options)
//
// 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();
//
// const title=drawTitle(this.width,0,this.title)
// this.layer.add(title)
// //构建布局区域
// //上料计划显示区
// this.drawSljh()
// //区域垛位选择区
// this.drawQy()
// //上料功能区
// this.drawSl();
// //移垛记录区
// this.drawYd();
// },
// //绘制区域
// 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
// }
// }
// }
// this.layer.add(this.mountGroup)
},
drawMsg(){
this.drawText({
x:15,
y:50,
width:this.width-30,
height:20,
lineHeight:1,
stroke:'black',
strokeWidth:0.1,
text:this.msg,
align:'center',
})
},
drawText(option){
const text=new Konva.Text(option)
this.layer.add(text)
return text
},
initKonvaStage(){
this.width=this.$refs.sliao.clientWidth
this.height=this.$refs.sliao.clientHeight
const options={
width:this.width,
height:this.height
}
const {drawTitle}=sliao(options)
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();
const title=drawTitle(this.width,0,this.title)
this.layer.add(title)
//构建布局区域
//上料计划显示区
this.drawSljh()
//区域垛位选择区
this.drawQy()
//上料功能区
this.drawSl();
//移垛记录区
this.drawYd();
},
//绘制区域
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>

Write Preview
Loading…
Cancel
Save