diff --git a/package.json b/package.json
index b7be231..7dac52d 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vue-cli-service serve",
     "local": "vue-cli-service serve --mode local",
+    "server": "vue-cli-service serve --mode server",
     "lint": "eslint --ext .js,.vue src",
     "build:test": "vue-cli-service build --mode test",
     "build:prod": "vue-cli-service build",
@@ -68,6 +69,7 @@
     "@vue/cli-plugin-eslint": "4.4.4",
     "@vue/cli-plugin-unit-jest": "4.4.4",
     "@vue/cli-service": "4.4.4",
+    "@vue/composition-api": "^1.7.2",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "9.5.1",
     "babel-eslint": "10.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 435577f..fcc1b3b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,6 +148,9 @@ devDependencies:
   '@vue/cli-service':
     specifier: 4.4.4
     version: 4.4.4(babel-core@7.0.0-bridge.0)(less-loader@5.0.0)(sass-loader@8.0.2)(vue-template-compiler@2.6.10)
+  '@vue/composition-api':
+    specifier: ^1.7.2
+    version: 1.7.2(vue@2.6.10)
   '@vue/test-utils':
     specifier: 1.0.0-beta.29
     version: 1.0.0-beta.29(vue-template-compiler@2.6.10)(vue@2.6.10)
@@ -2480,6 +2483,14 @@ packages:
       - whiskers
     dev: true
 
+  /@vue/composition-api@1.7.2(vue@2.6.10):
+    resolution: {integrity: sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==}
+    peerDependencies:
+      vue: '>= 2.5 < 2.7'
+    dependencies:
+      vue: 2.6.10
+    dev: true
+
   /@vue/preload-webpack-plugin@1.1.2(html-webpack-plugin@3.2.0)(webpack@4.46.0):
     resolution: {integrity: sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==}
     engines: {node: '>=6.0.0'}
diff --git a/src/main.js b/src/main.js
index 0d21c8f..7e2803f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,6 +88,10 @@ 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 eb25bd8..860d610 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','/sczyjh','/zyjh'] // 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 a5f2ee2..89ab62c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,6 +43,11 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/zyjh',
+    component: () => import('@/views/jhzxgl/zyjh/index.vue'),
+    hidden: true
+  },
   {
     path: '/hbao',
     component: () => import('@/views/hbao/index'),
diff --git a/src/views/jhzxgl/zyjh/comps/head.vue b/src/views/jhzxgl/zyjh/comps/head.vue
new file mode 100644
index 0000000..7a79217
--- /dev/null
+++ b/src/views/jhzxgl/zyjh/comps/head.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-form ref="requestForm" :model="request" label-width="45px">
+    <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="2">
+        <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="需求日期:" label-width="95px">
+            <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>
+</template>
+
+<script>
+import {getCzplBase} from "@/api/sjzx/jcsj";
+
+export default {
+  name:'ZyjhHead',
+  data(){
+    return {
+      projectData:[],
+      projectData1:[],
+      projectColumns:[],
+      request:{
+        dcCh:'',
+        dcPl:'',
+      },
+    }
+  },
+  created(){
+    // this.initProject()
+  },
+  methods:{
+    loadData(){
+      const data=[
+        {dcCh:'123',dcPl:'123',dcFd:'123',}
+      ]
+      this.$emit("initData",data)
+    },
+    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/jhzxgl/zyjh/index.js b/src/views/jhzxgl/zyjh/index.js
new file mode 100644
index 0000000..a217b4c
--- /dev/null
+++ b/src/views/jhzxgl/zyjh/index.js
@@ -0,0 +1,98 @@
+
+export default function () {
+  const options={
+    height:700,
+    align:'center',
+    border: true,
+    resizable: true,
+    showOverflow: true,
+    data:[]
+  }
+  const columns = [
+    { type: 'seq',title:'序号', width: 60 },
+    {field: 'dcCh', title: '船号', width: 120},
+    {field: 'dcPl', title: '批量', width: 120},
+    {field: 'dcFd', title: '分段', width: 120},
+    {field: 'zl', title: '组立', width: 120},
+    {field: 'kw', title: '跨位', width: 120},
+    {field: 'tzbh', title: '套料图号', width: 120},
+    {field: '', title: '材质', width: 120},
+    {field: '', title: '规格', width: 120},
+    {field: '', title: '炉批号', width: 120},
+    {field: '', title: '小组需求期', width: 120},
+    {field: '', title: '大组需求期', width: 120},
+
+    {field: '', title: '上料计划日期', width: 120},
+    {field: '', title: '预处理垛位', width: 120},
+    {field: '', title: '层数', width: 120},
+    {field: '', title: '派工人', width: 120},
+    {field: '', title: '施工人', width: 120},
+    {field: '', title: '派工时间', width: 120},
+    {field: '', title: '反馈人', width: 120},
+    {field: '', title: '反馈时间', width: 120},
+    {field: '', title: '备注', width: 120},
+
+    {field: '', title: '抛丸计划日期', width: 120},
+    {field: '', title: '取自预处理垛位', width: 120},
+    {field: '', title: '取自层数', width: 120},
+    {field: '', title: '派工人', width: 120},
+    {field: '', title: '施工人', width: 120},
+    {field: '', title: '派工时间', width: 120},
+    {field: '', title: '反馈人', width: 120},
+    {field: '', title: '反馈时间', width: 120},
+    {field: '', title: '备注', width: 120},
+
+    {field: '', title: '划线计划日期', width: 120},
+    {field: '', title: '取自理料垛位', width: 120},
+    {field: '', title: '取自层数', width: 120},
+    {field: '', title: '派工人', width: 120},
+    {field: '', title: '施工人', width: 120},
+    {field: '', title: '派工时间', width: 120},
+    {field: '', title: '划线长度', width: 120},
+    {field: '', title: '反馈人', width: 120},
+    {field: '', title: '反馈时间', width: 120},
+    {field: '', title: '备注', width: 120},
+    {field: '', title: '是否借用', width: 120},
+    {field: '', title: '借用船号', width: 120},
+    {field: '', title: '借用批量', width: 120},
+    {field: '', title: '借用分段', width: 120},
+    {field: '', title: '借用组立', width: 120},
+    {field: '', title: '借用跨位', width: 120},
+    {field: '', title: '借用套料图号', width: 120},
+
+    {field: '', title: '切割计划日期', width: 120},
+    {field: '', title: '取自理料垛位', width: 120},
+    {field: '', title: '取自层数', width: 120},
+    {field: '', title: '派工人', width: 120},
+    {field: '', title: '施工人', width: 120},
+    {field: '', title: '派工时间', width: 120},
+    {field: '', title: '切割长度', width: 120},
+    {field: '', title: '反馈人', width: 120},
+    {field: '', title: '反馈时间', width: 120},
+    {field: '', title: '备注', width: 120},
+    {field: '', title: '是否借用', width: 120},
+    {field: '', title: '借用船号', width: 120},
+    {field: '', title: '借用批量', width: 120},
+    {field: '', title: '借用分段', width: 120},
+    {field: '', title: '借用组立', width: 120},
+    {field: '', title: '借用跨位', width: 120},
+    {field: '', title: '借用套料图号', width: 120},
+
+    {field: '', title: '再处理计划日期', width: 120},
+    {field: '', title: '曲加工标识', width: 120},
+    {field: '', title: '坡口标识', width: 120},
+    {field: '', title: '型材标识', width: 120},
+    {field: '', title: '备注', width: 120},
+
+    {field: '', title: '配盘计划日期', width: 120},
+    {field: '', title: '托盘表号', width: 120},
+    {field: '', title: '预摆放位置', width: 120},
+    {field: '', title: '预摆放层数', width: 120},
+    {field: '', title: '备注', width: 120},
+  ]
+
+  return {
+    options,
+    columns,
+  }
+}
diff --git a/src/views/jhzxgl/zyjh/index.vue b/src/views/jhzxgl/zyjh/index.vue
new file mode 100644
index 0000000..680d8f0
--- /dev/null
+++ b/src/views/jhzxgl/zyjh/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-container>
+    <el-header style="padding: 15px">
+      <ZyjhHead ref="zyjhSearchParams" @initData="initData" />
+    </el-header>
+    <el-main>
+      <VxeGrid v-bind="gridOptions" />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import zyjhConfig from "@/views/jhzxgl/zyjh/index";
+import ZyjhHead from "@/views/jhzxgl/zyjh/comps/head.vue";
+
+export default {
+  name:"Zyjh",
+  components: {ZyjhHead},
+  data(){
+    return {
+      gridOptions:{}
+    }
+  },
+  created(){
+    const {options,columns}=zyjhConfig()
+    this.gridOptions=options
+    this.gridOptions.columns=columns
+    console.log(this.gridOptions)
+  },
+  mounted(){
+
+  },
+  methods:{
+    initData(data){
+      this.gridOptions.data=data;
+    }
+  }
+}
+</script>
diff --git a/src/views/sliao/_index.vue b/src/views/sliao/_index.vue
new file mode 100644
index 0000000..65d2a8c
--- /dev/null
+++ b/src/views/sliao/_index.vue
@@ -0,0 +1,453 @@
+<template>
+  <div id="sliao" class="sliao" ref="sliao" >sliao</div>
+</template>
+
+<script>
+import Konva from "konva";
+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(){
+    const actions = [
+      {
+        message: "fn1", // message消息与func函数执行为映射关系
+        func: (params1, params2) => {
+          console.log("params参数-->", params1, params2);
+          function fib(n) {
+            if ((n == 1) | (n == 2)) {
+              return 1;
+            } else {
+              return fib(n - 1) + fib(n - 2);
+            }
+          }
+          return fib(30);
+        },
+      },
+      {
+        message: "fn2",
+        func: () => {
+          function fib(n) {
+            if ((n == 1) | (n == 2)) {
+              return 1;
+            } else {
+              return fib(n - 1) + fib(n - 2);
+            }
+          }
+          return fib(30);
+        },
+      },
+      {
+        message: "fn3",
+        func: () => {
+          function fib(n) {
+            if ((n == 1) | (n == 2)) {
+              return 1;
+            } else {
+              return fib(n - 1) + fib(n - 2);
+            }
+          }
+          // throw "一个报错挂了,其他的也跟着挂了,走.catch"; // 抛出错误(的确很像Promise.all())
+          return fib(30);
+        },
+      },
+    ];
+    // 2. 根据消息函数数组去create创建一个worker，并存到data变量中去，以便于后续随时使用
+    this.worker = this.$worker.create(actions);
+  },
+  mounted() {
+    console.time("多个线程计算用时1")
+    this.worker
+      .postAll()
+      .then((res) => {
+        console.timeEnd("多个线程计算用时1");
+        console.log("res", res); // 结果是一个数组 [267914296, 433494437, 701408733]
+        this.loadingOne = false;
+      })
+      .catch((err) => {
+        console.timeEnd("多个线程计算用时1");
+        console.log("err", err);
+        this.loadingOne = false;
+      });
+
+    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)
+      }
+    },
+    initKonvaStage(){
+      this.width=this.$refs.sliao.clientWidth
+      this.height=this.$refs.sliao.clientHeight
+
+      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();
+
+      this.drawTitle()
+      //构建布局区域
+      //上料计划显示区
+      this.drawSljh()
+      //区域垛位选择区
+      this.drawQy()
+      //上料功能区
+      this.drawSl();
+      //移垛记录区
+      this.drawYd();
+    },
+    //绘制移垛记录区
+    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,
+      })
+      console.log(111)
+      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',
+      })
+    },
+    drawTitle(){
+      this.drawText({
+        x:15,
+        y:8,
+        width:this.width-30,
+        height:20,
+        lineHeight:1,
+        stroke:'blue',
+        strokeWidth:2,
+        text:this.title,
+        align:'center',
+        fontSize:32,
+      })
+    },
+    drawText(option){
+      const text=new Konva.Text(option)
+      this.layer.add(text)
+      return text
+    },
+    //绘制区域
+    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>
+
+<style>
+#sliao {
+  background: #ddd;
+  overflow: hidden;
+  width: 100%;
+  height:100vh;
+  aspect-ratio: 16/9;
+}
+</style>
diff --git a/src/views/sliao/draw.js b/src/views/sliao/draw.js
new file mode 100644
index 0000000..093027b
--- /dev/null
+++ b/src/views/sliao/draw.js
@@ -0,0 +1,29 @@
+import Konva from "konva";
+
+const sliao=function (options){
+  const width=options.width||window.innerWidth
+  const height=options.width||window.innerHeight
+
+  const slOption={
+    title:'上  料  作  业  区'
+  }
+  function drawTitle(){
+    return new Konva.Text({
+      x:15,
+      y:8,
+      width:width-30,
+      height:20,
+      lineHeight:1,
+      stroke:'blue',
+      strokeWidth:2,
+      text:slOption.title,
+      align:'center',
+      fontSize:32,
+    })
+  }
+  return {
+    drawTitle
+  }
+}
+
+export default sliao
diff --git a/src/views/sliao/index.vue b/src/views/sliao/index.vue
index 65d2a8c..caa0691 100644
--- a/src/views/sliao/index.vue
+++ b/src/views/sliao/index.vue
@@ -1,444 +1,419 @@
 <template>
-  <div id="sliao" class="sliao" ref="sliao" >sliao</div>
+  <div id="sliao" class="sliao" ref="sliao"></div>
 </template>
 
 <script>
 import Konva from "konva";
-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(){
-    const actions = [
-      {
-        message: "fn1", // message消息与func函数执行为映射关系
-        func: (params1, params2) => {
-          console.log("params参数-->", params1, params2);
-          function fib(n) {
-            if ((n == 1) | (n == 2)) {
-              return 1;
-            } else {
-              return fib(n - 1) + fib(n - 2);
-            }
-          }
-          return fib(30);
-        },
-      },
-      {
-        message: "fn2",
-        func: () => {
-          function fib(n) {
-            if ((n == 1) | (n == 2)) {
-              return 1;
-            } else {
-              return fib(n - 1) + fib(n - 2);
-            }
-          }
-          return fib(30);
-        },
-      },
-      {
-        message: "fn3",
-        func: () => {
-          function fib(n) {
-            if ((n == 1) | (n == 2)) {
-              return 1;
-            } else {
-              return fib(n - 1) + fib(n - 2);
-            }
-          }
-          // throw "一个报错挂了,其他的也跟着挂了,走.catch"; // 抛出错误(的确很像Promise.all())
-          return fib(30);
-        },
-      },
-    ];
-    // 2. 根据消息函数数组去create创建一个worker，并存到data变量中去，以便于后续随时使用
-    this.worker = this.$worker.create(actions);
-  },
-  mounted() {
-    console.time("多个线程计算用时1")
-    this.worker
-      .postAll()
-      .then((res) => {
-        console.timeEnd("多个线程计算用时1");
-        console.log("res", res); // 结果是一个数组 [267914296, 433494437, 701408733]
-        this.loadingOne = false;
-      })
-      .catch((err) => {
-        console.timeEnd("多个线程计算用时1");
-        console.log("err", err);
-        this.loadingOne = false;
-      });
+// import sliao from "@/views/sliao/draw";
+import {defineComponent,ref, reactive, onMounted,computed } from '@vue/composition-api'
 
-    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)
+export default defineComponent({
+  setup() {
+    const sliao=ref()
 
-        //层  规格,套料图 船号,上料日期,计划切割日期
-        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 state = reactive({
+      message: 'Hello, world!'
+    })
 
-        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)
-      }
-    },
-    initKonvaStage(){
-      this.width=this.$refs.sliao.clientWidth
-      this.height=this.$refs.sliao.clientHeight
+    const width=ref(0)
+    const height=ref(0)
 
-      this.stage = new Konva.Stage({
-        container: "sliao",
-        width: this.width,
-        height: this.height,
-      });
-      //this.stage.container().style.cursor = "sw-resize";
+    onMounted(() => {
+      console.log(sliao)
+      console.log(sliao.clientWidth)
+      width.value=sliao.clientWidth
+      height.value=sliao.clientHeight
+      console.log(width.value)
+      console.log('Component mounted')
+    })
 
-      this.layer = new Konva.Layer();
-      this.stage.add(this.layer)
-      this.layer.draw();
+    const count = ref(0);
 
-      this.drawTitle()
-      //构建布局区域
-      //上料计划显示区
-      this.drawSljh()
-      //区域垛位选择区
-      this.drawQy()
-      //上料功能区
-      this.drawSl();
-      //移垛记录区
-      this.drawYd();
-    },
-    //绘制移垛记录区
-    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,
-      })
-      console.log(111)
-      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',
-      })
-    },
-    drawTitle(){
-      this.drawText({
-        x:15,
-        y:8,
-        width:this.width-30,
-        height:20,
-        lineHeight:1,
-        stroke:'blue',
-        strokeWidth:2,
-        text:this.title,
-        align:'center',
-        fontSize:32,
-      })
-    },
-    drawText(option){
-      const text=new Konva.Text(option)
-      this.layer.add(text)
-      return text
-    },
-    //绘制区域
-    drawContainer(option){
-      const quRet=this.drawRect(option)
-      const qyGroup=this.drawGroup(option)
+    // Computed state
+    const message = computed(() => `Hello Vue ${count.value}`);
 
-      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
+    // Methods
+    function increment() {
+      count.value++;
+    }
+
+    return {
+      ...state,
+      width,height,
+      sliao,
+      count
     }
   }
-}
+})
+
+// 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
+//     }
+//   }
+// }
 
 </script>
 
@@ -447,7 +422,7 @@ export default {
   background: #ddd;
   overflow: hidden;
   width: 100%;
-  height:100vh;
+  height: 100vh;
   aspect-ratio: 16/9;
 }
 </style>
diff --git a/src/views/sliao/sliao.worker.js b/src/views/sliao/sliao.worker.js
index 9771e1c..c7a65fe 100644
--- a/src/views/sliao/sliao.worker.js
+++ b/src/views/sliao/sliao.worker.js
@@ -22,6 +22,7 @@
 
 //*.work.js
 onmessage = (e)=>{
+  console.log(1234)
   const {data}=e
   console.log(data)
   postMessage(data)