From 195276b09438a89e4d0e27cb6bba5ca2052162a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=93=B2=E5=A5=87?= <13840175730@139.com>
Date: Mon, 5 Aug 2024 17:21:51 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=B8=8A=E6=96=99=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                |    4 -
 src/permission.js          |    2 +-
 src/router/index.js        |    5 -
 src/views/sczyjh/index.vue |  171 ------
 src/views/sliao/draw.js    |    2 +-
 src/views/sliao/index.vue  | 1009 +++++++++++++++++++++++-------------
 6 files changed, 641 insertions(+), 552 deletions(-)
 delete mode 100644 src/views/sczyjh/index.vue

diff --git a/src/main.js b/src/main.js
index 164239a..0d21c8f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,10 +88,6 @@ Vue.use(dataV)
 import VueWorker from 'vue-worker' // Web worker插件
 Vue.use(VueWorker)
 
-//引入composition-api
-// import VueCompositionAPI from '@vue/composition-api'
-// Vue.use(VueCompositionAPI)
-
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
diff --git a/src/permission.js b/src/permission.js
index cd162c1..0f51278 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/menu','/login', '/auth-redirect','/kban','/hbao','/sliao','/sczyjh',] // no redirect whitelist
+const whiteList = ['/menu','/login', '/auth-redirect','/kban','/hbao','/sliao',] // no redirect whitelist
 export function flatRoutes(routes) {
   let ret = [];
   routes.forEach(it => {
diff --git a/src/router/index.js b/src/router/index.js
index 214a5fe..7aedaef 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -53,11 +53,6 @@ export const constantRoutes = [
     component: () => import('@/views/hbao/index'),
     hidden: true
   },
-  {
-    path: '/sczyjh',
-    component: () => import('@/views/sczyjh/index'),
-    hidden: true
-  },
   {
     path: '/kban',
     component: () => import('@/views/kban/index'),
diff --git a/src/views/sczyjh/index.vue b/src/views/sczyjh/index.vue
deleted file mode 100644
index 3c59d01..0000000
--- a/src/views/sczyjh/index.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <el-container>
-    <el-header style="padding: 15px">
-      <el-form ref="requestForm" :model="request" label-width="85px">
-        <el-row>
-          <el-col :span="3">
-            <el-form-item label="船号:">
-              <vxe-pulldown ref="xDown4" transfer >
-                <template #default>
-                  <vxe-input
-                    v-model="request.dcCh"
-                    placeholder="船号"
-                    style="height: 28px;
-                      line-height: 28px; width: 150px;"
-                    suffix-icon="vxe-icon--search"
-                    @keyup="keyupEvent4"
-                    @focus="focusEvent4"
-                  />
-                </template>
-                <template #dropdown>
-                  <div class="my-dropdown  mytable " style="width: 250px">
-                    <vxe-grid
-                      highlight-hover-row
-                      height="auto"
-                      :data="projectData"
-                      :columns="projectColumns"
-                      @cell-click="cellClickEvent"
-                      show-overflow
-                    >
-                      <template #wgbsEdit="{ row}">
-                        <vxe-checkbox v-model="row.wgbs"  checked-value="Y" unchecked-value="N"   disabled ></vxe-checkbox>
-                      </template>
-                    </vxe-grid>
-                  </div>
-                </template>
-              </vxe-pulldown>
-            </el-form-item>
-          </el-col>
-          <el-col :span="3">
-            <el-form-item label="批量:">
-              <el-input v-model="request.dcPl" type="search" placeholder="批量" ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-col :span="12">
-              <el-form-item label="需求日期:">
-                <el-input v-model="request.form" type="search" placeholder="开始" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <div style="width:100%;text-align:center;line-height: 28px;font-size: 14px">至</div>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label-width="0px">
-                <el-input v-model="request.to" type="search" placeholder="结束" />
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="12" style="text-align: right">
-            <el-button type="primary" @click="loadData">查询</el-button>
-          </el-col>
-        </el-row>
-      </el-form>
-    </el-header>
-    <el-main>
-      <VxeGrid v-bind="gridOptions" />
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import {getCzplBase} from "@/api/sjzx/jcsj";
-
-export default {
-  name:'Sczyjh',
-  data(){
-    return{
-      projectData: [],
-      projectColumns:[],
-      request:{
-        dcCh:'',
-        dcPl:'',
-      },
-      gridOptions:{
-        border: true,
-        resizable: true,
-        showOverflow: true,
-        height: 650,
-        align:'center',
-        data:[],
-        columns:[
-          {type: "seq", title: "序号", width: "50"},
-          {field:'dcCh',title:'船号', width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'dcPl',title:'批量',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'dcFd',title:'分段',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'kw',title:'跨位',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'zl',title:'组立',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'xzxqrq',title:'小组需求期',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'tlth',title:'套料图号',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'cz',title:'材质',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'wpgg',title:'规格',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'',title:'重量',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-          {field:'',title:'划线长度',width: "90",
-            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
-            filterRender: { name: 'FilterCombination', },
-          },
-        ]
-      }
-    }
-  },
-  created(){
-    this.initProject()
-  },
-  methods:{
-    loadData(){
-
-    },
-    initProject(){
-      getCzplBase({}).then(res=>{
-        this.projectData=res.data.cbbm
-        this.projectData1=res.data.cbbm
-      })
-    },
-    cellClickEvent({row}){
-      this.request.dcCh = row.cbbm
-      this.$refs.xDown4.hidePanel()
-    },
-    focusEvent4(){
-      this.$refs.xDown4.showPanel()
-    },
-    keyupEvent4(){
-      if (this.request.dcCh) {
-        this.projectData = this.projectData1.filter(row => row.cbbm.indexOf(this.request.dcCh.toUpperCase()) > -1)
-      } else {
-        this.projectData = this.projectData1.slice(0)
-      }
-    },
-  }
-}
-
-</script>
diff --git a/src/views/sliao/draw.js b/src/views/sliao/draw.js
index 093027b..0cbd812 100644
--- a/src/views/sliao/draw.js
+++ b/src/views/sliao/draw.js
@@ -9,7 +9,7 @@ const sliao=function (options){
   }
   function drawTitle(){
     return new Konva.Text({
-      x:15,
+      x:0,
       y:8,
       width:width-30,
       height:20,
diff --git a/src/views/sliao/index.vue b/src/views/sliao/index.vue
index bad23d9..be0f787 100644
--- a/src/views/sliao/index.vue
+++ b/src/views/sliao/index.vue
@@ -4,376 +4,645 @@
 
 <script>
 import Konva from "konva";
-// import sliao from "@/views/sliao/draw";
-
-// export default {
-//   name:'SLiao',
-//   data(){
-//     return {
-//       title:'上  料  作  业  区',
-//       stage:null,
-//       layer:null,
-//       width:'',
-//       height:'',
-//       gbImage:require('@/assets/gb.png'),
-//       sljhGroup:null,
-//       sljhList:[],//上料计划
-//       slGroup:'',
-//       slList:'',
-//       dwGroup:'',
-//       qyList:[//区域,每个内部包含垛位信息
-//         {
-//           name:'一区',
-//           dw:[
-//             {
-//               name:'一剁',
-//               list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-//             },
-//             {
-//               name:'二剁',
-//               list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-//             }
-//           ]
-//         },
-//         {
-//           name:'二区',
-//           dw:[
-//             {
-//               name:'一剁',
-//               list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-//             }
-//           ]
-//         },
-//       ],
-//       msg:'板材1放入一剁三层',
-//       worker:'',
-//     }
-//   },
-//   created(){},
-//   mounted() {
-//     this.initKonvaStage();
-//     //fixme 调试用
-//     this.drawMsg()
-//     this.drawSljhItem([
-//       {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:'三层'},
-//     ])
-//   },
-//   methods: {
-//     //料场垛位实际情况
-//     drawSlItem(slList){
-//       console.log(slList.length)
-//       for (let i = 1; i <=slList.length; i++) {
-//         const gb=slList[i-1]
-//         const group=new Konva.Group({
-//           x:0,
-//           y:this.height-260-i*40,
-//         })
-//         this.slGroup.add(group)
-//         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:i,
-//           align:'center',
-//           verticalAlign:'middle',
-//         })
-//         group.add(indexText)
-//
-//         //层  规格,套料图 船号,上料日期,计划切割日期
-//         const imageObj = new Image();
-//         const imgSize=300
-//         imageObj.src = this.gbImage;
-//         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:gb+',12*2830*13090',
-//             align:'center',
-//             verticalAlign:'middle',
-//           })
-//           group.add(gbText)
-//         }
-//
-//         const concent=new Konva.Text({
-//           x: imgSize+40,
-//           y: 0,
-//           width: imgSize,
-//           height:40,
-//           fill:'black',
-//           text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
-//           align:'center',
-//           verticalAlign:'middle',
-//         })
-//         group.add(concent)
-//       }
-//     },
-//     //绘制上料计划钢板信息
-//     drawSljhItem(list){
-//       const itemWith=80;
-//       const itemHeight=108
-//       for (let i = 0; i < list.length; i++) {
-//         const item=list[i];
-//         const qyGroup=new Konva.Group({
-//           x:(i+1)*5+i*itemWith,
-//           y:10,
-//           width:itemWith,
-//           height:itemHeight,
-//         })
-//         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)
-//       }
-//     },
-//
-//     //绘制移垛记录区
-//     drawYd(){
-//       this.drawContainer({
-//         x:15+this.width*0.6-15+5,
-//         y:this.height-this.height*0.8+10,
-//         width: this.width*0.4-20,
-//         height: this.height*0.8-20,
-//         stroke:'blue',
-//         strokeWidth:1,
-//       })
-//     },
-//     //绘制上料功能区
-//     drawSl(){
-//       const {qyGroup}=this.drawContainer({
-//         x:15+this.width*0.2+5,
-//         y:this.height-this.height*0.8+10,
-//         width: this.width*0.4-20,
-//         height: this.height*0.8-20,
-//         stroke:'blue',
-//         strokeWidth:1,
-//       })
-//       this.slGroup=qyGroup
-//     },
-//     drawDw(qyGroup,qy,size){
-//       if (this.dwGroup){
-//         this.dwGroup.destroyChildren()
-//       }
-//       const _group=this.dwGroup=new Konva.Group({
-//         x:54+size,
-//         y:15,
-//         width: size,
-//         height: size,
-//       })
-//       qyGroup.add(_group)
-//       for (let i = 0; i < qy.dw.length; i++) {
-//         const dw=qy.dw[i]
-//         const group=new Konva.Group({
-//           x:0,
-//           y:i*5+i*size,
-//           width: size,
-//           height: size,
-//         })
-//         const rect=new Konva.Rect({
-//           x:0,
-//           y:0,
-//           width: size,
-//           height: size,
-//           stroke:'black',
-//           strokeWidth:1,
-//         })
-//         group.add(rect)
-//         const text=new Konva.Text({
-//           x:0,
-//           y:0,
-//           width: size,
-//           height: size,
-//           fill:'black',
-//           text:qy.name+'\n'+dw.name,
-//           align:'center',
-//           verticalAlign:'middle',
-//           fontSize:20
-//         })
-//         group.add(text)
-//         group.on('click touchstart',(evt)=>{
-//           console.log(evt.target)
-//           this.slGroup.destroyChildren()
-//           this.drawSlItem(dw.list)
-//         })
-//         _group.add(group)
-//       }
-//     },
-//     //绘制垛位选择区
-//     drawQy(){
-//       const {quRet,qyGroup}=this.drawContainer({
-//         x:15,
-//         y:this.height-this.height*0.8+10,
-//         width: this.width*0.2,
-//         height: this.height*0.8-20,
-//         stroke:'blue',
-//         strokeWidth:1,
-//       })
-//       const size=120;
-//       for (let i = 0; i < this.qyList.length; i++) {
-//         const qy=this.qyList[i]
-//         const group=new Konva.Group({
-//           x:23,
-//           y:15+i*5+i*size,
-//           width: size,
-//           height: size,
-//         })
-//         const rect=new Konva.Rect({
-//           x:0,
-//           y:0,
-//           width: size,
-//           height: size,
-//           stroke:'black',
-//           strokeWidth:1,
-//         })
-//         group.add(rect)
-//         const text=new Konva.Text({
-//           x:0,
-//           y:0,
-//           width: size,
-//           height: size,
-//           fill:'black',
-//           text:qy.name,
-//           align:'center',
-//           verticalAlign:'middle',
-//           fontSize:20
-//         })
-//         group.add(text)
-//         group.on('click touchstart',(evt)=>{
-//           console.log(evt.target)
-//           this.drawDw(qyGroup,qy,size)
-//         })
-//         qyGroup.add(group)
-//       }
-//     },
-//     //上料计划选择区
-//     drawSljh(){
-//       const {quRet,qyGroup}=this.drawContainer({
-//         x:15,
-//         y:65,
-//         width: this.width-30,
-//         height: this.height*0.2-60,
-//         stroke:'blue',
-//         strokeWidth:1,
-//       })
-//       qyGroup.on('click touchstart',(evt)=>{
-//         console.log(evt)
-//       })
-//       this.sljhGroup=qyGroup
-//     },
-//     drawMsg(){
-//       this.drawText({
-//         x:15,
-//         y:50,
-//         width:this.width-30,
-//         height:20,
-//         lineHeight:1,
-//         stroke:'black',
-//         strokeWidth:0.1,
-//         text:this.msg,
-//         align:'center',
-//       })
-//     },
-//
-//     drawText(option){
-//       const text=new Konva.Text(option)
-//       this.layer.add(text)
-//       return text
-//     },
-//
-//     initKonvaStage(){
-//       this.width=this.$refs.sliao.clientWidth
-//       this.height=this.$refs.sliao.clientHeight
-//       const options={
-//         width:this.width,
-//         height:this.height
-//       }
-//       const {drawTitle}=sliao(options)
-//
-//       this.stage = new Konva.Stage({
-//         container: "sliao",
-//         width: this.width,
-//         height: this.height,
-//       });
-//       //this.stage.container().style.cursor = "sw-resize";
-//
-//       this.layer = new Konva.Layer();
-//       this.stage.add(this.layer)
-//       this.layer.draw();
-//
-//       const title=drawTitle(this.width,0,this.title)
-//       this.layer.add(title)
-//       //构建布局区域
-//       //上料计划显示区
-//       this.drawSljh()
-//       //区域垛位选择区
-//       this.drawQy()
-//       //上料功能区
-//       this.drawSl();
-//       //移垛记录区
-//       this.drawYd();
-//     },
-//     //绘制区域
-//     drawContainer(option){
-//       const quRet=this.drawRect(option)
-//       const qyGroup=this.drawGroup(option)
-//       return {
-//         quRet,qyGroup
-//       }
-//     },
-//     drawGroup(option){
-//       const qyGroup=new Konva.Group(option);
-//       this.layer.add(qyGroup)
-//       return qyGroup
-//     },
-//     drawRect(option){
-//       const quRet=new Konva.Rect(option);
-//       this.layer.add(quRet)
-//       return quRet
-//     }
-//   }
-// }
+import sliao from "@/views/sliao/draw";
+
+export default {
+  name:'SLiao',
+  data(){
+    return {
+      title:'上  料  作  业  区',
+      stage:null,
+
+      layer:null,
+      width:'',
+      height:'',
+      gbImage:require('@/assets/gb.png'),
+
+      mountGroup:null,
+      sljhStage:null,
+      sljhLayer:null,
+      sljhGroup:null,
+      sljhList:[],//上料计划
+
+      canSl:false,
+
+      slGroup:'',
+      slList:'',
+      dwGroup:'',
+      qyList:[//区域,每个内部包含垛位信息
+        {
+          name:'一区',
+          dw:[
+            {
+              name:'一剁',
+              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+            },
+            {
+              name:'二剁',
+              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+            }
+          ]
+        },
+        {
+          name:'二区',
+          dw:[
+            {
+              name:'一剁',
+              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+            }
+          ]
+        },
+      ],
+      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:'三层'},
+      ],
+      msg:'板材1放入一剁三层',
+      worker:null,
+      startMoveX:0,
+      startMoveTime:0,
+      isMoving:false,
+      currentQyIndex:-1,
+      currentDwIndex:-1,
+      removeSljhItemIndex:-1,
+    }
+  },
+  created(){},
+  mounted() {
+    this.initKonvaStage();
+    //fixme 调试用
+    this.drawMsg()
+    this.drawSljhItem(this.sljhItemList)
+  },
+  methods: {
+    //料场垛位实际情况
+    drawSlItem(slList={}){
+      for (let i = 1; i <=slList.length; i++) {
+        const gb=slList[i-1]
+        const group=new Konva.Group({
+          x:0,
+          y:this.height-260-i*40,
+          draggable:true
+        })
+
+        group.setAttr('index',i)
+
+        const that=this
+        this.slGroup.add(group)
+        const {x}=group.absolutePosition()
+        group.dragBoundFunc(function (pos){
+          return {
+            x:x,
+            y:pos.y
+          }
+        })
+        let _index=0
+        group.on('dragmove',function (){
+          if(_index===0){
+            _index=this.getAttr('index')
+          }
+          this.zIndex(999)
+          const {y:thisY}=this.absolutePosition()
+          const children=that.slGroup.children
+
+          for (const child of children) {
+            if (child===this){
+              return
+            }
+
+            const {y:thatY}=child.absolutePosition()
+
+            const moveUpFlag=child.getAttr('moveUp')||false
+            if (thisY>=thatY&&thisY<=thatY+40&&!moveUpFlag){
+              child.setAttr('moveUp',true);
+              child.setAttr('moveDown',false);
+              --_index
+              child.move({
+                y:-40
+              })
+            }
+
+            const {y:_thatY}=child.absolutePosition()
+            const moveDownFlag=child.getAttr('moveDown')||false
+            if (thisY<=_thatY&&!moveDownFlag){
+              const moveUpFlag=child.getAttr('moveUp')||false
+              if (moveUpFlag){
+                child.setAttr('moveUp',false);
+                child.setAttr('moveDown',true);
+                ++_index
+                child.move({
+                  y:40
+                })
+              }
+            }
+          }
+        })
+
+        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
+          that.slGroup.destroyChildren()
+          that.drawSlItem(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:i,
+          align:'center',
+          verticalAlign:'middle',
+        })
+        group.add(indexText)
+
+        //层  规格,套料图 船号,上料日期,计划切割日期
+        const imageObj = new Image();
+        const imgSize=300
+        imageObj.src = this.gbImage;
+        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:gb+',12*2830*13090',
+            align:'center',
+            verticalAlign:'middle',
+          })
+          group.add(gbText)
+        }
+
+        const concent=new Konva.Text({
+          x: imgSize+40,
+          y: 0,
+          width: imgSize,
+          height:40,
+          fill:'black',
+          text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
+          align:'center',
+          verticalAlign:'middle',
+        })
+        group.add(concent)
+      }
+    },
+    //绘制上料计划钢板信息
+    drawSljhItem(list){
+      const itemWith=80;
+      const itemHeight=108
+      this.sljhList=[]
+      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;
+        const _dwGroup=this.dwGroup
+        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){
+                  const {x,y}=that.slGroup.absolutePosition()
+                  const maxX=x+that.width*0.4-20
+                  const maxY=y+that.height*0.8-20
+                  if(pos.x>=x&&pos.y>=y&&pos.x<=maxX&&pos.y<=maxY){
+
+                  }
+                  return{
+                    x:pos.x,
+                    y:pos.y
+                  }
+                })
+                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.qyList[that.currentQyIndex].dw[that.currentDwIndex].list.push('12123')
+                    that.slGroup.destroyChildren()
+                    that.drawSlItem(that.qyList[that.currentQyIndex].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.sljhList.push(qyGroup)
+        this.sljhGroup.add(qyGroup)
+        // this.mountGroup.add(qyGroup)
+      }
+    },
+
+    //绘制移垛记录区
+    drawYd(){
+      this.drawContainer({
+        x:15+this.width*0.6-15+5,
+        y:this.height-this.height*0.8+10,
+        width: this.width*0.4-20,
+        height: this.height*0.8-20,
+        stroke:'blue',
+        strokeWidth:1,
+      })
+    },
+    //绘制上料功能区
+    drawSl(){
+      const {qyGroup}=this.drawContainer({
+        x:15+this.width*0.2+5,
+        y:this.height-this.height*0.8+10,
+        width: this.width*0.4-20,
+        height: this.height*0.8-20,
+        stroke:'blue',
+        strokeWidth:1,
+      })
+      this.slGroup=qyGroup
+    },
+    drawDw(qyGroup,qy,size){
+      if (this.dwGroup){
+        this.dwGroup.destroyChildren()
+      }
+      const _group=this.dwGroup=new Konva.Group({
+        x:54+size,
+        y:15,
+        width: size,
+        height: size,
+      })
+      qyGroup.add(_group)
+      for (let i = 0; i < qy.dw.length; i++) {
+        const dw=qy.dw[i]
+        const group=new Konva.Group({
+          x:0,
+          y:i*5+i*size,
+          width: size,
+          height: size,
+        })
+        const rect=new Konva.Rect({
+          x:0,
+          y:0,
+          width: size,
+          height: size,
+          stroke:'black',
+          strokeWidth:1,
+        })
+        group.add(rect)
+        const text=new Konva.Text({
+          x:0,
+          y:0,
+          width: size,
+          height: size,
+          fill:'black',
+          text:qy.name+'\n'+dw.name,
+          align:'center',
+          verticalAlign:'middle',
+          fontSize:20
+        })
+        group.add(text)
+        group.on('click touchstart',(evt)=>{
+          this.slGroup.destroyChildren()
+          this.canSl=true
+          this.currentDwIndex=i
+          this.drawSlItem(dw.list)
+        })
+        _group.add(group)
+      }
+    },
+    //绘制垛位选择区
+    drawQy(){
+      const {quRet,qyGroup}=this.drawContainer({
+        x:15,
+        y:this.height-this.height*0.8+10,
+        width: this.width*0.2,
+        height: this.height*0.8-20,
+        stroke:'blue',
+        strokeWidth:1,
+      })
+      const size=120;
+      for (let i = 0; i < this.qyList.length; i++) {
+        const qy=this.qyList[i]
+        const group=new Konva.Group({
+          x:23,
+          y:15+i*5+i*size,
+          width: size,
+          height: size,
+        })
+        const rect=new Konva.Rect({
+          x:0,
+          y:0,
+          width: size,
+          height: size,
+          stroke:'black',
+          strokeWidth:1,
+        })
+        group.add(rect)
+        const text=new Konva.Text({
+          x:0,
+          y:0,
+          width: size,
+          height: size,
+          fill:'black',
+          text:qy.name,
+          align:'center',
+          verticalAlign:'middle',
+          fontSize:20
+        })
+        group.add(text)
+        group.on('click touchstart',(evt)=>{
+          this.currentQyIndex=i
+          this.drawDw(qyGroup,qy,size)
+        })
+        qyGroup.add(group)
+      }
+    },
+    //上料计划选择区
+    drawSljh(){
+      // this.sljhStage = new Konva.Stage({
+      //   container: "sliao",
+      //   x:15,
+      //   y:65,
+      //   width: this.width-30,
+      //   height: this.height*0.2-60,
+      // });
+      // this.sljhStage.container().style.cursor = "drag";
+
+      this.sljhLayer = new Konva.Layer();
+      this.stage.add(this.sljhLayer)
+      this.sljhLayer.draw();
+
+      const qyGroup=new Konva.Group({
+        x:15,
+        y:65,
+        width: this.width-30,
+        height: this.height*0.2-60,
+        stroke:'blue',
+        strokeWidth:1,
+        draggable: true,
+        dragBoundFunc:function (pos){
+          return {
+            x:pos.x,
+            y:65
+          }
+        },
+      });
+
+      qyGroup.on('dragmove',function (){
+        const itemWidth=80
+        const itemHeight=108;
+        // this.getChildren((node)=>{
+        //   const {x,y}=node.absolutePosition();
+        //   if(x+itemWidth<20){
+        //     node.visible(false)
+        //   }else if(x+15<20){
+        //     node.clipFunc((ctx)=>{
+        //       ctx.rect(itemWidth-20, 0, itemWidth, itemHeight)
+        //     })
+        //   }
+        //
+        //   if (x+15>=this.width){
+        //     node.visible(false)
+        //   }
+        //
+        //   if (x+15<this.width&&x+15+itemWidth>this.width&&node.visible()){
+        //     node.clipFunc((ctx)=>{
+        //       ctx.rect(0, 0, this.width-30-x, itemHeight)
+        //     })
+        //   }
+        // })
+      })
+
+      this.sljhLayer.add(qyGroup)
+
+      // const {quRet,qyGroup}=this.drawContainer({
+      //   x:15,
+      //   y:65,
+      //   width: this.width-30,
+      //   height: this.height*0.2-60,
+      //   stroke:'blue',
+      //   strokeWidth:1,
+      //   draggable: true,
+      // })
+      // quRet.on('touchmove',({evt})=>{
+      //   const speed=0.15
+      //   const time=evt.timeStamp
+      //   const x=evt.targetTouches[0].clientX
+      //   if (this.startMoveTime===0){
+      //     this.startMoveTime=time
+      //     this.startMoveX=x
+      //   }
+      //
+      //   const _time=time-this.startMoveTime
+      //   const dirX=x-this.startMoveX
+      //
+      //   if (!this.isMoving){
+      //     this.isMoving=true
+      //     this.sljhList.forEach(item=>{
+      //       item.move({
+      //         x:speed*_time*(dirX>0?1:-1)
+      //       })
+      //     })
+      //     this.startMoveTime=0
+      //     this.startMoveX=0
+      //     this.isMoving=false
+      //   }else{
+      //     this.startMoveTime=time
+      //     this.startMoveX=x
+      //     this.isMoving=false
+      //   }
+      // })
+
+      this.sljhGroup=qyGroup
+      // this.mountGroup=this.drawGroup({
+      //   x:15,
+      //   y:this.height-this.height*0.8+10,
+      //   width: this.width*0.2,
+      //   height: this.height*0.8-20,
+      //   stroke:'blue',
+      //   strokeWidth:1,
+      // })
+      // this.layer.add(this.mountGroup)
+    },
+    drawMsg(){
+      this.drawText({
+        x:15,
+        y:50,
+        width:this.width-30,
+        height:20,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.1,
+        text:this.msg,
+        align:'center',
+      })
+    },
+
+    drawText(option){
+      const text=new Konva.Text(option)
+      this.layer.add(text)
+      return text
+    },
+
+    initKonvaStage(){
+      this.width=this.$refs.sliao.clientWidth
+      this.height=this.$refs.sliao.clientHeight
+      const options={
+        width:this.width,
+        height:this.height
+      }
+      const {drawTitle}=sliao(options)
+
+      this.stage = new Konva.Stage({
+        container: "sliao",
+        width: this.width,
+        height: this.height,
+      });
+      //this.stage.container().style.cursor = "sw-resize";
+
+      this.layer = new Konva.Layer();
+      this.stage.add(this.layer)
+      this.layer.draw();
+
+      const title=drawTitle(this.width,0,this.title)
+      this.layer.add(title)
+
+      //构建布局区域
+      //上料计划显示区
+      this.drawSljh()
+      //区域垛位选择区
+      this.drawQy()
+      //上料功能区
+      this.drawSl();
+      //移垛记录区
+      this.drawYd();
+    },
+    //绘制区域
+    drawContainer(option){
+      const quRet=this.drawRect(option)
+      const qyGroup=this.drawGroup(option)
+      return {
+        quRet,qyGroup
+      }
+    },
+    drawGroup(option){
+      const qyGroup=new Konva.Group(option);
+      this.layer.add(qyGroup)
+      return qyGroup
+    },
+    drawRect(option){
+      const quRet=new Konva.Rect(option);
+      this.layer.add(quRet)
+      return quRet
+    }
+  }
+}
 
 </script>