1.完善上料回报

1 year ago · 76d8e11012
parent 98a34bb014
commit 76d8e11012
14 changed files with 514 additions and 2 deletions
--- a/src/views/zyjhzx/sliao/_index.vue
+++ b/src/views/zyjhzx/sliao/_index.vue
--- a/src/views/zyjhzx/sliao/comps/SelectDemo.vue
+++ b/src/views/zyjhzx/sliao/comps/SelectDemo.vue
@ -7,7 +7,7 @@
 </template>

 <script>
-import initSearch from "@/views/sliao/comps/search";
+import initSearch from "@/views/zyjhzx/sliao/comps/search";
 import {openCzplBase} from "@/api/openapi";

 export default {
--- a/src/views/zyjhzx/sliao/comps/SliaoSearch.vue
+++ b/src/views/zyjhzx/sliao/comps/SliaoSearch.vue
--- a/src/views/zyjhzx/sliao/comps/baifang.js
+++ b/src/views/zyjhzx/sliao/comps/baifang.js
@ -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
--- a/src/views/zyjhzx/sliao/comps/container.js
+++ b/src/views/zyjhzx/sliao/comps/container.js
@ -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
--- a/src/views/zyjhzx/sliao/comps/liliao.js
+++ b/src/views/zyjhzx/sliao/comps/liliao.js
--- a/src/views/zyjhzx/sliao/comps/person.js
+++ b/src/views/zyjhzx/sliao/comps/person.js
--- a/src/views/zyjhzx/sliao/comps/search.js
+++ b/src/views/zyjhzx/sliao/comps/search.js
--- a/src/views/zyjhzx/sliao/comps/sljh.js
+++ b/src/views/zyjhzx/sliao/comps/sljh.js
--- a/src/views/zyjhzx/sliao/comps/title.js
+++ b/src/views/zyjhzx/sliao/comps/title.js
@ -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
--- a/src/views/zyjhzx/sliao/draw.js
+++ b/src/views/zyjhzx/sliao/draw.js
--- a/src/views/zyjhzx/sliao/index.vue
+++ b/src/views/zyjhzx/sliao/index.vue
@ -0,0 +1,295 @@
+<template>
+  <div>
+    <div id="sliao" class="sliao" ref="sliao"></div>
+    <SliaoSearch @search="search" />
+  </div>
+</template>
+
+<script>
+import container from "@/views/zyjhzx/sliao/comps/container";
+import drawTitle from "@/views/zyjhzx/sliao/comps/title";
+import initSearch from "@/views/zyjhzx/sliao/comps/search";
+import {sljh} from "@/views/zyjhzx/sliao/comps/sljh";
+import workers from "@/views/zyjhzx/sliao/comps/person";
+import SliaoSearch from "@/views/zyjhzx/sliao/comps/SliaoSearch.vue";
+import liliao from "@/views/zyjhzx/sliao/comps/liliao";
+import baifang from "@/views/zyjhzx/sliao/comps/baifang";
+
+export default {
+  name:'SLiao',
+  components: {SliaoSearch},
+  data(){
+    return {
+      title:'上  料  作  业  区',
+      width:0,
+      height:0,
+      stage:null,
+      layer:null,
+      slGroup:null,
+      sljhGroup:null,
+      drawBaiFang:null,
+      canSl:false,
+      currentDwIndex:-1,
+      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:'三层'},
+      ],
+      dw:[
+        {name:'预处理垛位\n垛位1\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+        {name:'预处理垛位\n垛位2\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+        {name:'预处理垛位\n垛位2\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.initKonvaStage();
+  },
+  methods:{
+    search(queryParam){
+      console.log(queryParam)
+    },
+    initBaiFang(index,list){
+      this.canSl=true
+      this.currentDwIndex=index
+      const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:list})
+      this.slGroup=slGroup
+      this.drawBaiFang=handler
+      this.layer.add(slGroup)
+    },
+    drawSljhItem(list){
+      const itemWith=80;
+      const itemHeight=108
+      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;
+        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){
+                  return{...pos}
+                })
+                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.dw[that.currentDwIndex].list.push('12123')
+                    that.slGroup.destroyChildren()
+                    that.initBaiFang(that.currentDwIndex,that.dw[that.currentDwIndex].list)
+
+                    //that.drawBaiFang(that.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.sljhGroup.add(qyGroup)
+      }
+    },
+    initLiLiao(){
+      new Promise(resolve => {
+        return resolve(this.dw)
+      }).then(res=>{
+        const {container}= liliao(this.width,this.height,res,this.initBaiFang)
+        const group=container()
+        this.layer.add(group)
+      })
+    },
+    initWorkers(){
+      new Promise(resolve => {
+        return resolve([
+          {name:'张三1'},{name:'张三2'},
+          {name:'张三1'},{name:'张三2'},
+        ])
+      }).then(res=>{
+        const {container}=workers(this.width,this.height,res)
+        const group=container()
+        this.layer.add(group)
+      })
+    },
+    initKonvaStage(){
+      this.width=this.$refs.sliao.clientWidth
+      this.height=this.$refs.sliao.clientHeight
+      const {stage,layer}=container(this.width,this.height,'sliao')
+      this.stage=stage
+      this.layer=layer
+
+      const titel=drawTitle(this.width,this.height,this.title)
+      this.layer.add(titel)
+
+      const {group}=initSearch()
+
+      this.layer.add(group)
+
+      const {layer:sljhLayer,group:sljhGroup}=sljh(this.width,this.height)
+      this.sljhGroup=sljhGroup
+      this.drawSljhItem(this.sljhItemList)
+      this.stage.add(sljhLayer)
+
+      this.initWorkers()
+
+      this.initLiLiao()
+
+    },
+
+  }
+}
+
+</script>
+
+<style>
+.vxe-button{
+  top: -2px;
+  width: 80px;
+  height: 27px !important;
+}
+
+.vxe-input{
+  width: 115px;
+}
+
+#searchPl {
+  position: absolute;
+  top:43px;
+  left:15px;
+  border: none;
+  margin: 0;
+}
+
+#searchPl input{
+  border: none;
+  background: none;
+  outline: none;
+}
+
+#menu {
+  display: none;
+  position: absolute;
+  width: 100px;
+  height: 180px;
+  background-color: white;
+  box-shadow: 0 0 5px grey;
+  border-radius: 3px;
+  overflow-y: auto;
+}
+
+#menu button {
+  width: 100%;
+  background-color: white;
+  border: none;
+  margin: 0;
+  font-size: 12px;
+  padding: 10px;
+}
+
+#menu button:hover {
+  background-color: lightgray;
+}
+
+#sliao {
+  background: #ddd;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  aspect-ratio: 16/9;
+}
+</style>
--- a/src/views/zyjhzx/sliao/index_sliao.vue
+++ b/src/views/zyjhzx/sliao/index_sliao.vue
@ -4,7 +4,7 @@

 <script>
 import Konva from "konva";
-import sliao from "@/views/sliao/draw";
+import sliao from "@/views/zyjhzx/sliao/draw";

 export default {
  name:'SLiao',
--- a/src/views/zyjhzx/sliao/sliao.worker.js
+++ b/src/views/zyjhzx/sliao/sliao.worker.js