gjerp_ui/src/views/zyjhzx/ljian/bgcomps/sljh.js

import Konva from "konva";

export const sljh=function (width,height){

  const layer=new Konva.Layer({
    id:'2',
    x:20,
    y:75,
  })

  const group=new Konva.Group({
    x:0,
    y:0,
    width: width*0.6,
    height: height*0.2-60,
    draggable: true,
    dragBoundFunc:function (pos){
      return {
        x:pos.x,
        y:75
      }
    },
  });

  const bgGroup=new Konva.Group({
    x:34,
    y:0,
  })
  bgGroup.clipFunc(function(ctx) {
    ctx.rect(4, 0, width*0.6, height*0.2-10);
  });

  layer.add(bgGroup)
  bgGroup.zIndex(0)
  bgGroup.add(group)

  const left2ImageObj=new Image()
  left2ImageObj.src = require('@/assets/sliao/left2.png');
  left2ImageObj.onload = function () {
    const shape1 = new Konva.Image({
      x: 0,
      y: 35,
      width: 32,
      height:120,
      image: this,
    });
    layer.add(shape1)
    shape1.zIndex(1)
    shape1.on('click touchstart',function (){
      group.move({
        x:-116
      })
    })
  }

  const right2ImageObj=new Image()
  right2ImageObj.src = require('@/assets/sliao/right2.png');
  right2ImageObj.onload = function () {
    const shape1 = new Konva.Image({
      x: width*0.65,
      y: 35,
      width: 32,
      height:120,
      image: this,
    });
    layer.add(shape1)
    shape1.zIndex(1)
    shape1.on('click touchstart',function (){
      group.move({
        x:116
      })
    })
  }

  const imageObj = new Image();
  imageObj.src = require('@/assets/sliao/sljhbg.png');
  imageObj.onload = function () {
    const shape = new Konva.Image({
      x: 8,
      y: 0,
      width: width*0.66,
      height:181,
      image: this,
    });
    layer.add(shape)
    shape.zIndex(0)
  }

  function drawItem(i,item){
    const itemWith=111;
    const itemHeight=108

    const x=(i+1)*5+i*itemWith;
    const qyGroup=new Konva.Group({
      x:x,
      y:10,
      width:itemWith,
      height:itemHeight,
    })
    qyGroup.setAttr('index',i)
    qyGroup.setAttr('item',item)
    group.add(qyGroup)

    const imageObj = new Image();
    imageObj.src = require('@/assets/sliao/sljhItemBg.png');
    imageObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        width: 111,
        height:163,
        image: this,
      });
      qyGroup.add(shape)
      shape.zIndex(0)
    }

    const tlth=new Konva.Text({
      x: 0,
      y: 0,
      width: 111,
      height:34,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:item.tzbh
    })
    qyGroup.add(tlth)

    const nameGroup=new Konva.Group({
      x: 5,
      y: 43,
      width: 38,
      height:105,
    })

    const nameImageObj1 = new Image();
    nameImageObj1.src = require('@/assets/sliao/nameBg1.png');
    nameImageObj1.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        width: 38,
        height:105,
        image: this,
      });
      nameGroup.add(shape)
      shape.zIndex(0)
    }
    qyGroup.add(nameGroup)

    const name1=new Konva.Text({
      x: 0,
      y: 0,
      width: 38,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:'船号'
    })
    nameGroup.add(name1)

    const name2=new Konva.Text({
      x: 0,
      y: 21,
      width: 38,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:'批量'
    })
    nameGroup.add(name2)

    const name3=new Konva.Text({
      x: 0,
      y: 43,
      width: 38,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:'规格'
    })
    nameGroup.add(name3)

    const name4=new Konva.Text({
      x: 0,
      y: 64.5,
      width: 38,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:'垛位'
    })
    nameGroup.add(name4)

    const name5=new Konva.Text({
      x: 0,
      y: 86.5,
      width: 38,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:'层数'
    })
    nameGroup.add(name5)

    const infoGroup=new Konva.Group({
      x: 43,
      y: 43,
      width: 65,
      height:105,
    })
    qyGroup.add(infoGroup)

    const info1=new Konva.Text({
      x: 0,
      y: 0,
      width: 65,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:item.dcCh
    })
    infoGroup.add(info1)

    const info2=new Konva.Text({
      x: 0,
      y: 21,
      width: 65,
      height:20,
      fontSize:12,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:item.dcPl
    })
    infoGroup.add(info2)

    const info3=new Konva.Text({
      x: 0,
      y: 43,
      width: 65,
      height:20,
      fontSize:9,
      fontStyle:'bold',
      fill:'#fff',
      align:'center',
      verticalAlign:'middle',
      text:item.wpgg
    })
    infoGroup.add(info3)

    return qyGroup
  }

  return {
    layer,group,drawItem
  }
}