gjerp_ui/src/views/zyjhzx/lliaofkui/comps/dw.js

import Konva from "konva";

export default function (width,height,callback){
  const _width=width*0.16,_height=height*0.73

  const container=function (){
    const x=width*0.134+30,y=260

    const group=new Konva.Group({
      x:0,
      y:0,
      width:_width,
      height:_height,
      draggable:true,
      dragBoundFunc:function (pos){
        return {
          x:x,
          y:pos.y
        }
      },
    })

    const bgGroup=new Konva.Group({
      x:x,
      y:y,
      width:_width,
      height:_height
    })
    bgGroup.add(group)
    bgGroup.clipFunc(function(ctx) {
      ctx.rect(0, 6, _width, _height*0.965);
    });

    const imageObj = new Image();
    imageObj.src = require('@/assets/sliao/personbg.png');
    imageObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        width: _width,
        height:_height*0.975,
        image: this,
      });
      bgGroup.add(shape)
      shape.zIndex(0)
    }

    return {bgGroup,group}
  }

  let selectedShape=null;
  const dw=function (index,item=[]){

    const alignSize=2
    const width=((_width-20)/alignSize),height=150
    const x=index%alignSize*width+index%alignSize*10+5,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 (){
      if (selectedShape){
        selectedShape.hide()
        if (selectedShape===selectShape){
          selectedShape=null
          return
        }
      }
      selectedShape=selectShape
      selectedShape.show()
      callback(index,item)
    })

    const bgObj = new Image();
    bgObj.src = require('@/assets/sliao/personbg1.png');
    bgObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        offsetX:4,
        width: width,
        height:height,
        image: this,
      });
      group.add(shape)
      shape.zIndex(0)
    }

    const selectObj = new Image();
    selectObj.src = require('@/assets/sliao/selected.png');
    let selectShape=null
    const setSelectShape=function (shape){
      selectShape=shape
    }
    selectObj.onload = function () {
      const shape = new Konva.Image({
        x: width-width*0.31,
        y: 4,
        width: width*0.25,
        height:width*0.25,
        image: this,
        visible:false
      });
      group.add(shape)
      shape.zIndex(0)
      setSelectShape(shape)
    }

    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
    const formatName=()=>{
      for (const it of qgkw) {
        if (it.bm===item.tzbh){
          return it.bmsm
        }
      }
    }

    const text=new Konva.Text({
      x:0,
      y:0,
      width: width,
      height: height,
      fill:'black',
      text:`${formatName()}\n${item.list.length}张`,
      align:'center',
      verticalAlign:'middle',
      fontSize:14
    })
    group.add(text)

    return group
  }

  return {
    container,dw
  }

}