xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.作业计划

Browse Source
master
董哲奇 1 year ago
parent e9976e90f8
commit e18ac963c8
12 changed files with 1158 additions and 429 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -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",

11
pnpm-lock.yaml
Unescape View File

@ -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'}

4
src/main.js
Unescape View File

@ -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])

2
src/permission.js
Unescape View File

@ -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 => {

5
src/router/index.js
Unescape View File

@ -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'),

112
src/views/jhzxgl/zyjh/comps/head.vue
Unescape View File

@ -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>

98
src/views/jhzxgl/zyjh/index.js
Unescape View File

@ -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,
}
}

39
src/views/jhzxgl/zyjh/index.vue
Unescape View File

@ -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>

453
src/views/sliao/_index.vue
Unescape View File

@ -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>

29
src/views/sliao/draw.js
Unescape View File

@ -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

831
src/views/sliao/index.vue
Unescape View File

@ -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>

1
src/views/sliao/sliao.worker.js
Unescape View File

@ -22,6 +22,7 @@
//*.work.js
onmessage = (e)=>{
console.log(1234)
const {data}=e
console.log(data)
postMessage(data)

Write Preview
Loading…
Cancel
Save