gjerp_ui/src/views/zyjhzx/sliao/comps/person.js

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)
      group.add(_group)
    }

    return group
  }

  let currentWork=null;

  const getCurrentWorker=function (){
    return currentWork
  }
  const person=function (index,item){
    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
    })

    group.on('click touchstart',function (){
      currentWork=item
    })

    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:item.userName,
      align:'center',
      verticalAlign:'middle',
      fontSize:20
    })
    group.add(text)

    return group
  }

  return {
    container,getCurrentWorker
  }
}

export default workers