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

1.作业计划

Browse Source
master
董哲奇 11 months 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