|
|
|
|
@ -5,9 +5,8 @@ import { VXETable } from 'vxe-table'
|
|
|
|
|
const baifang=function (option={}) {
|
|
|
|
|
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
|
|
|
|
const _width=width*0.32,_height=height*0.713
|
|
|
|
|
const container=function (){
|
|
|
|
|
const x=width*0.16+25,y=260
|
|
|
|
|
|
|
|
|
|
const x=width*0.16+25,y=260
|
|
|
|
|
const bg=function (){
|
|
|
|
|
const group=new Konva.Group({
|
|
|
|
|
x:x,
|
|
|
|
|
y:y,
|
|
|
|
|
@ -25,36 +24,34 @@ const baifang=function (option={}) {
|
|
|
|
|
height:_height,
|
|
|
|
|
image: this,
|
|
|
|
|
});
|
|
|
|
|
group.add(shape)
|
|
|
|
|
shape.zIndex(0)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const selectObj = new Image();
|
|
|
|
|
selectObj.src = require('@/assets/pwan/gbSelectBg.png');
|
|
|
|
|
selectObj.onload = function () {
|
|
|
|
|
const shape = new Konva.Image({
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
width: _width,
|
|
|
|
|
height:_height,
|
|
|
|
|
image: this,
|
|
|
|
|
visible:false
|
|
|
|
|
});
|
|
|
|
|
group.add(shape)
|
|
|
|
|
bgGroup.add(shape)
|
|
|
|
|
shape.zIndex(0)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return group
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const container=function (){
|
|
|
|
|
return new Konva.Group({
|
|
|
|
|
x:0,
|
|
|
|
|
y:0,
|
|
|
|
|
width:_width,
|
|
|
|
|
height:_height
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const bgGroup=bg();
|
|
|
|
|
const slGroup=container()
|
|
|
|
|
bgGroup.add(slGroup)
|
|
|
|
|
slGroup.zIndex(1)
|
|
|
|
|
|
|
|
|
|
let currSlist=null
|
|
|
|
|
|
|
|
|
|
const thatHeight=height
|
|
|
|
|
const gangban=function (index,item){
|
|
|
|
|
const group=new Konva.Group({
|
|
|
|
|
x:0,
|
|
|
|
|
y:thatHeight-310-index*40,
|
|
|
|
|
draggable:true
|
|
|
|
|
// draggable:true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
group.setAttr('index',index)
|
|
|
|
|
@ -71,7 +68,7 @@ const baifang=function (option={}) {
|
|
|
|
|
let _index=0
|
|
|
|
|
let touchingFlag=false;
|
|
|
|
|
group.on('mousedown touchstart',function (evt){
|
|
|
|
|
const layer=evt.currentTarget.parent.parent
|
|
|
|
|
const layer=this.parent.parent.parent
|
|
|
|
|
touchingFlag=true
|
|
|
|
|
const {x,y}=evt.evt
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
@ -81,7 +78,7 @@ const baifang=function (option={}) {
|
|
|
|
|
this.draggable(false)
|
|
|
|
|
|
|
|
|
|
const tmpGroup=this.clone()
|
|
|
|
|
tmpGroup.x(x-10)
|
|
|
|
|
tmpGroup.x(x-50)
|
|
|
|
|
tmpGroup.y(y-10)
|
|
|
|
|
layer.add(tmpGroup)
|
|
|
|
|
tmpGroup.draggable(true)
|
|
|
|
|
@ -94,7 +91,7 @@ const baifang=function (option={}) {
|
|
|
|
|
tmpGroup.on('dragend',function (){
|
|
|
|
|
const {x:thisX,y:thisY}=this.absolutePosition()
|
|
|
|
|
for (const item of layer.children) {
|
|
|
|
|
if(item.attrs.id==='csd'){
|
|
|
|
|
if(item.attrs.id==='sb'){
|
|
|
|
|
const {x,y}=item.absolutePosition()
|
|
|
|
|
const worker=JSON.parse(window.localStorage.getItem('worker'))
|
|
|
|
|
if ((thisX>=x&&thisY>=y&&thisX<=(x+item.attrs.width)&&thisY<=(y+item.attrs.height))&&!!worker){
|
|
|
|
|
@ -184,24 +181,14 @@ const baifang=function (option={}) {
|
|
|
|
|
|
|
|
|
|
group.on('dragend',function (){
|
|
|
|
|
const index=this.getAttr('index')
|
|
|
|
|
const element = slList.splice(index-1, 1)[0];
|
|
|
|
|
slList.splice(_index-1, 0, element);
|
|
|
|
|
const element = currSlist.splice(index-1, 1)[0];
|
|
|
|
|
currSlist.splice(_index-1, 0, element);
|
|
|
|
|
this.setAttr('index',_index)
|
|
|
|
|
_index=0
|
|
|
|
|
slGroup.destroyChildren()
|
|
|
|
|
handler(slList)
|
|
|
|
|
handler(currSlist)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
@ -256,7 +243,7 @@ const baifang=function (option={}) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handler(slList){
|
|
|
|
|
console.log(slList)
|
|
|
|
|
currSlist=slList;
|
|
|
|
|
for (let i = 1; i <= slList.length; i++) {
|
|
|
|
|
const item=slList[i-1]
|
|
|
|
|
const _group=gangban(i,item,item.length)
|
|
|
|
|
@ -264,10 +251,8 @@ const baifang=function (option={}) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handler(slList)
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
container,slGroup,handler
|
|
|
|
|
container,slGroup,handler,bgGroup
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
