parent
836fe2d928
commit
98a34bb014
@ -0,0 +1,3 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function openCzplBase(data) {return request({url: '/dmCzplpNew/openCzplBase', method: 'post', data})}
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="月度计划" name="first">
|
||||
<div class="mytable">
|
||||
<el-button type="success" @click="symxhz">汇总</el-button>
|
||||
<Ydjh />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图纸信息" name="second">
|
||||
<div class="mytable">
|
||||
<vxe-grid
|
||||
id="id2"
|
||||
ref="xGrid2"
|
||||
border
|
||||
resizable
|
||||
keep-source
|
||||
:align="'center'"
|
||||
:height="height"
|
||||
:auto-resize="true"
|
||||
:columns="tableColumn2"
|
||||
:data="list2"
|
||||
:custom-config="{ storage: true }"
|
||||
highlight-current-row
|
||||
highlight-hover-row
|
||||
show-overflow
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="到货信息" name="third">
|
||||
<div class="mytable">
|
||||
<vxe-grid
|
||||
id="id3"
|
||||
ref="xGrid3"
|
||||
border
|
||||
resizable
|
||||
keep-source
|
||||
:align="'center'"
|
||||
:height="height"
|
||||
:auto-resize="true"
|
||||
:columns="tableColumn3"
|
||||
highlight-current-row
|
||||
:data="list3"
|
||||
:custom-config="{ storage: true }"
|
||||
highlight-current-row
|
||||
highlight-hover-row
|
||||
show-overflow
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="上料信息" name="fourth">
|
||||
<div class="mytable">
|
||||
<vxe-grid
|
||||
id="id4"
|
||||
ref="xGrid4"
|
||||
border
|
||||
resizable
|
||||
keep-source
|
||||
:align="'center'"
|
||||
:height="height"
|
||||
:auto-resize="true"
|
||||
:columns="tableColumn4"
|
||||
highlight-current-row
|
||||
:data="list4"
|
||||
:custom-config="{ storage: true }"
|
||||
highlight-hover-row
|
||||
show-overflow
|
||||
show-header-overflow
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="抛丸信息" name="fifth">
|
||||
<div class="mytable">
|
||||
<vxe-grid
|
||||
id="id5"
|
||||
ref="xGrid5"
|
||||
border
|
||||
resizable
|
||||
keep-source
|
||||
:align="'center'"
|
||||
:height="height"
|
||||
:auto-resize="true"
|
||||
:columns="tableColumn5"
|
||||
highlight-current-row
|
||||
:data="list5"
|
||||
:custom-config="{ storage: true }"
|
||||
highlight-hover-row
|
||||
show-overflow
|
||||
show-header-overflow
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="切割信息" name="sixth">
|
||||
<div class="mytable">
|
||||
<vxe-grid
|
||||
id="id6"
|
||||
ref="xGrid6"
|
||||
border
|
||||
resizable
|
||||
keep-source
|
||||
:align="'center'"
|
||||
:height="height"
|
||||
:auto-resize="true"
|
||||
:columns="tableColumn7"
|
||||
highlight-current-row
|
||||
:data="list6"
|
||||
:custom-config="{ storage: true }"
|
||||
highlight-hover-row
|
||||
show-overflow
|
||||
show-header-overflow
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
import Ydjh from "@/views/jhzx/components/ydjhzxgl/Ydjh.vue";
|
||||
|
||||
export default {
|
||||
name:'YdjhzxglTabs',
|
||||
components: {Ydjh},
|
||||
data(){
|
||||
return {
|
||||
activeName:'first',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClick(tab, event) {
|
||||
if(this.activeName==='second'){
|
||||
// alert('线表计划')
|
||||
|
||||
}
|
||||
if(this.activeName==='third'){
|
||||
// alert('批量表')
|
||||
|
||||
}
|
||||
if(this.activeName==='fourth'){
|
||||
// alert('图纸')
|
||||
|
||||
}
|
||||
if(this.activeName==='fifth'){
|
||||
// alert('到货')
|
||||
if (this.list.length>0){
|
||||
|
||||
}
|
||||
}
|
||||
if(this.activeName==='sixth'){
|
||||
console.log(this.list5)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div id="menu" ref="selectRef" v-show="selectShow">
|
||||
<template v-for="(item,index) in projectList">
|
||||
<button @click="projectSelect(item.dcch)">{{ item.dcch }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initSearch from "@/views/sliao/comps/search";
|
||||
import {openCzplBase} from "@/api/openapi";
|
||||
|
||||
export default {
|
||||
name:'SelectDemo',
|
||||
data(){
|
||||
return{
|
||||
selectShow:false,
|
||||
selectText:'',
|
||||
projectList:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initBase(){
|
||||
openCzplBase({}).then(res=>{
|
||||
const arr=[]
|
||||
for (const item of res.data.cbbm) {
|
||||
if (item.wgbs==='N'){
|
||||
const data={dcch:item.cbbm}
|
||||
arr.push(data)
|
||||
}
|
||||
}
|
||||
this.projectList=arr
|
||||
})
|
||||
},
|
||||
initSearch(stage){
|
||||
const {group}=initSearch()
|
||||
const selectNode=this.$refs.selectRef
|
||||
group.on('click touchstart',function (){
|
||||
selectNode.style.display = 'initial';
|
||||
const containerRect = stage.container().getBoundingClientRect();
|
||||
selectNode.style.top = containerRect.top + stage.getPointerPosition().y + 4 + 'px';
|
||||
selectNode.style.left = containerRect.left + stage.getPointerPosition().x + 4 + 'px';
|
||||
})
|
||||
},
|
||||
projectSelect(dcch){
|
||||
this.queryParam.dcch=dcch
|
||||
this.selectText.fill("black")
|
||||
this.selectText.text(dcch)
|
||||
const selectNode=this.$refs.selectRef
|
||||
selectNode.style.display = 'none';
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div id="searchPl" ref="searchPl">
|
||||
<ProjectSelect ref="projectSelectRef" :_style="{width:'115px'}"/>
|
||||
<VxeInput v-model="queryParam.dcPl" placeholder="请输入批量"/>
|
||||
<VxeInput v-model="queryParam.dcFd" placeholder="请输入分段"/>
|
||||
<VxeInput type="date" value-format="yyyy/MM/dd" label-format="yyyy/MM/dd" v-model="queryParam.sljhrq" placeholder="请选择上料日期"/>
|
||||
<VxeButton status="primary" content="查询" @click="search" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProjectSelect from "@/components/ProjectSelect/index.vue";
|
||||
|
||||
export default {
|
||||
name:'SliaoSearch',
|
||||
components:{ProjectSelect},
|
||||
data(){
|
||||
return{
|
||||
queryParam:{
|
||||
dcCh:'',
|
||||
dcPl:'',
|
||||
dcFd:'',
|
||||
sljhrq:''
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
search(){
|
||||
this.queryParam.dcCh=this.$refs.projectSelectRef.getDcch()
|
||||
this.$emit('search',this.queryParam)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,180 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const baifang=function (option={}) {
|
||||
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
||||
const _width=width*0.4-50,_height=height*0.81
|
||||
const container=function (){
|
||||
const x=width*0.6+40,y=190
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width,
|
||||
height:_height,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
|
||||
group.add(rect)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
const slGroup=container()
|
||||
|
||||
const thatHeight=height
|
||||
const gangban=function (index,str){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:thatHeight-260-index*40,
|
||||
draggable:true
|
||||
})
|
||||
|
||||
group.setAttr('index',index)
|
||||
|
||||
slGroup.add(group)
|
||||
const {x}=group.absolutePosition()
|
||||
group.dragBoundFunc(function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
})
|
||||
let _index=0
|
||||
|
||||
group.on('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
slGroup.destroyChildren()
|
||||
handler(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:index,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(indexText)
|
||||
|
||||
//层 规格,套料图 船号,上料日期,计划切割日期
|
||||
const imageObj = new Image();
|
||||
const imgSize=200
|
||||
imageObj.src = image;
|
||||
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:str+',12*2830*13090',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(gbText)
|
||||
}
|
||||
|
||||
const concent=new Konva.Text({
|
||||
x: imgSize+60,
|
||||
y: 0,
|
||||
width: imgSize+40,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(concent)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
function handler(slList){
|
||||
for (let i = 1; i <= slList.length; i++) {
|
||||
const item=slList[i-1]
|
||||
const _group=gangban(i,item,item.length)
|
||||
slGroup.add(_group)
|
||||
}
|
||||
}
|
||||
|
||||
handler(slList)
|
||||
|
||||
return {
|
||||
container,slGroup,handler
|
||||
}
|
||||
}
|
||||
|
||||
export default baifang
|
||||
@ -0,0 +1,19 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const container=function (width=0,height=0,container){
|
||||
const stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: width,
|
||||
height: height,
|
||||
});
|
||||
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer)
|
||||
layer.draw();
|
||||
|
||||
return {
|
||||
stage,layer
|
||||
}
|
||||
}
|
||||
|
||||
export default container
|
||||
@ -0,0 +1,82 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const liliao=function (width,height,dw,callback) {
|
||||
|
||||
const _width=width*0.4,_height=height*0.81
|
||||
const container=function (){
|
||||
const x=width*0.2+30,y=190
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width,
|
||||
height:_height,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
|
||||
group.add(rect)
|
||||
|
||||
for (let i = 0; i < dw.length; i++) {
|
||||
const item=dw[i]
|
||||
const _group=duowei(i,item.name)
|
||||
group.add(_group)
|
||||
}
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
const duowei=function (index,str){
|
||||
const alignSize=3
|
||||
const width=((_width-60)/alignSize),height=208
|
||||
const x=index%alignSize*width+index%alignSize*10+20,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:width,
|
||||
height:height
|
||||
})
|
||||
group.on('click touchstart',function (){
|
||||
callback(index,dw[index].list)
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:width,
|
||||
height:height,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
|
||||
group.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width: width,
|
||||
height: height,
|
||||
fill:'black',
|
||||
text:str,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
fontSize:20
|
||||
})
|
||||
group.add(text)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
return {
|
||||
container,duowei
|
||||
}
|
||||
}
|
||||
|
||||
export default liliao
|
||||
@ -0,0 +1,79 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const workers=function (width,height,persons) {
|
||||
|
||||
const _width=width*0.2,_height=height*0.81
|
||||
const container=function (){
|
||||
const x=20,y=190
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width,
|
||||
height:_height,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
|
||||
group.add(rect)
|
||||
|
||||
for (let i = 0; i < persons.length; i++) {
|
||||
const item=persons[i]
|
||||
const _group=person(i,item.name,persons.length)
|
||||
group.add(_group)
|
||||
}
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
const person=function (index,str,img,size){
|
||||
const alignSize=2
|
||||
const width=((_width-30)/alignSize),height=108
|
||||
const x=index%alignSize*width+(index%alignSize+1)*10,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:width,
|
||||
height:height
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:width,
|
||||
height:height,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
|
||||
group.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width: width,
|
||||
height: height,
|
||||
fill:'black',
|
||||
text:str,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
fontSize:20
|
||||
})
|
||||
group.add(text)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
return {
|
||||
container
|
||||
}
|
||||
}
|
||||
|
||||
export default workers
|
||||
@ -0,0 +1,56 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const search=function (){
|
||||
const group=new Konva.Group({
|
||||
x:20,
|
||||
y:50
|
||||
})
|
||||
const selectRect=new Konva.Rect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
fill:'#ffffff',
|
||||
width: 110,
|
||||
height:20,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(selectRect)
|
||||
const plRect=new Konva.Rect({
|
||||
x: 115,
|
||||
y: 0,
|
||||
fill:'#ffffff',
|
||||
width: 110,
|
||||
height:20,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x: 230,
|
||||
y: 0,
|
||||
fill:'#ffffff',
|
||||
width: 110,
|
||||
height:20,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const sljhrqRect=new Konva.Rect({
|
||||
x: 345,
|
||||
y: 0,
|
||||
fill:'#ffffff',
|
||||
width: 115,
|
||||
height:20,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(sljhrqRect)
|
||||
|
||||
return {
|
||||
group
|
||||
}
|
||||
}
|
||||
|
||||
export default search
|
||||
@ -0,0 +1,31 @@
|
||||
import Konva from "konva";
|
||||
|
||||
let _width=0,_height=0
|
||||
export const sljh=function (width,height){
|
||||
|
||||
_width=width
|
||||
_height=height
|
||||
const layer=new Konva.Layer()
|
||||
layer.draw()
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:15,
|
||||
y:65,
|
||||
width: width-30,
|
||||
height: height*0.2-60,
|
||||
stroke:'blue',
|
||||
strokeWidth:1,
|
||||
draggable: true,
|
||||
dragBoundFunc:function (pos){
|
||||
return {
|
||||
x:pos.x,
|
||||
y:65
|
||||
}
|
||||
},
|
||||
});
|
||||
layer.add(group)
|
||||
|
||||
return {
|
||||
layer,group
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const title=function (width,height,title) {
|
||||
return new Konva.Text({
|
||||
x: 0,
|
||||
y: 8,
|
||||
width: width,
|
||||
height: 20,
|
||||
lineHeight: 1,
|
||||
stroke: 'blue',
|
||||
strokeWidth: 2,
|
||||
text: title,
|
||||
align: 'center',
|
||||
fontSize: 32,
|
||||
})
|
||||
}
|
||||
|
||||
export default title
|
||||
@ -0,0 +1,658 @@
|
||||
<template>
|
||||
<div id="sliao" class="sliao" ref="sliao"></div>
|
||||
</template>
|
||||
|
||||
<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'),
|
||||
|
||||
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('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=that.slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
group.on('dragend',function (){
|
||||
console.log(_index)
|
||||
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,
|
||||
// });
|
||||
// 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)
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// if (x+15>=this.width){
|
||||
// node.visible(false)
|
||||
// }
|
||||
//
|
||||
// if (x+15<this.width&&x+15+itemWidth>this.width&&node.visible()){
|
||||
// node.clipFunc((ctx)=>{
|
||||
// ctx.rect(0, 0, this.width-30-x, itemHeight)
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
})
|
||||
|
||||
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,
|
||||
// })
|
||||
// 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 _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)
|
||||
// })
|
||||
// })
|
||||
// this.startMoveTime=0
|
||||
// this.startMoveX=0
|
||||
// this.isMoving=false
|
||||
// }else{
|
||||
// this.startMoveTime=time
|
||||
// this.startMoveX=x
|
||||
// this.isMoving=false
|
||||
// }
|
||||
// })
|
||||
|
||||
this.sljhGroup=qyGroup
|
||||
// this.mountGroup=this.drawGroup({
|
||||
// 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,
|
||||
// })
|
||||
// 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>
|
||||
|
||||
<style>
|
||||
#sliao {
|
||||
background: #ddd;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue