parent
a0cd1c9fcd
commit
48a6419155
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div v-if="showStatus" id="tips" class="tips" ref="tips"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TipsComp",
|
||||
props:{
|
||||
msg:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
showStatus:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getShowStatus(){
|
||||
return this.showStatus
|
||||
},
|
||||
hide(){
|
||||
this.showStatus = false;
|
||||
},
|
||||
show(){
|
||||
this.showStatus = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<LjianPgd v-if="show" id="ljianbgd" ref="hxpgd" @initPgd="initPgd" @search="search" :worker="currentWorker" :workers="workers" />
|
||||
<ZyjhSelectComp id="selectComp" ref="selRef" @initWorkers="initWorkers"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container from "./bgcomps/container";
|
||||
import drawTitle from './bgcomps/title'
|
||||
import workers from "./bgcomps/person";
|
||||
import drawPgd from './bgcomps/pgd'
|
||||
import {getBzryList} from "@/api/sjzx/bzzGL";
|
||||
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
|
||||
import LjianPgd from "@/views/zyjhzx/ljian/bgcomps/LjianPgd.vue";
|
||||
import SliaoSearch from "@/views/zyjhzx/components/SliaoSearch.vue";
|
||||
import {getQmPgd} from "@/api/jhzxgl/pgd";
|
||||
import {startLoading} from "@/utils";
|
||||
|
||||
export default {
|
||||
name:'PWanFKui',
|
||||
components: {SliaoSearch, LjianPgd, ZyjhSelectComp},
|
||||
data(){
|
||||
return {
|
||||
title:'零 件 作 业 报 工',
|
||||
width:0,
|
||||
height:0,
|
||||
stage:null,
|
||||
layer:null,
|
||||
pgdGroup:null,
|
||||
drawGd:null,
|
||||
pgd:[],
|
||||
currentWorker:null,
|
||||
setWorkers:null,
|
||||
workers:null,
|
||||
workerGroup:null,
|
||||
person:null,
|
||||
show:false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('page/handler', true)
|
||||
this.initKonvaStage();
|
||||
},
|
||||
created(){
|
||||
window.addEventListener('resize', this.initKonvaStage)
|
||||
},
|
||||
sockets:{},
|
||||
methods:{
|
||||
plGylx(gylx,worker){
|
||||
this.$refs.hxpgd.plGylx(gylx,worker)
|
||||
},
|
||||
paigong(){
|
||||
this.$refs.hxpgd.paigong()
|
||||
},
|
||||
initPgd(pgd={}){
|
||||
const group=this.drawGd(pgd)
|
||||
this.pgdGroup.destroyChildren()
|
||||
this.pgdGroup.add(group)
|
||||
},
|
||||
initWorkers(bzType){
|
||||
if (this.workerGroup){
|
||||
this.workerGroup.destroyChildren()
|
||||
}else{
|
||||
const {container,person,getCurrentWorker}=workers(this.width,this.height)
|
||||
this.person=person
|
||||
this.getCurrentWorker=getCurrentWorker
|
||||
const {bgGroup,group}=container()
|
||||
this.workerGroup=group
|
||||
this.layer.add(bgGroup)
|
||||
|
||||
}
|
||||
getBzryList({zyq:this.$route.query.zyq,zt:bzType}).then(res=>{
|
||||
this.workers=res.data
|
||||
this.show=true
|
||||
this.setWorkers(res.data)
|
||||
const that=this
|
||||
for (let i=0;i<res.data.length;i++){
|
||||
const item=res.data[i]
|
||||
const worker=this.person(i,item)
|
||||
worker.on('click touchstart',function (){
|
||||
that.currentWorker=item
|
||||
that.search(item)
|
||||
})
|
||||
this.workerGroup.add(worker)
|
||||
}
|
||||
})
|
||||
},
|
||||
search(worker=null){
|
||||
|
||||
const searchParam={}
|
||||
if (worker){
|
||||
searchParam.qscry=worker.userCode
|
||||
// searchParam.dmry=worker.userCode
|
||||
// searchParam.pkry=worker.userCode
|
||||
}
|
||||
startLoading()
|
||||
// !!this.currentWorker&&(searchParam.worker=this.currentWorker)
|
||||
getQmPgd(searchParam).then((res) => {
|
||||
this.$refs.hxpgd.initData(res.data)
|
||||
})
|
||||
},
|
||||
initKonvaStage(){
|
||||
this.width=this.$refs.pwpg.clientWidth
|
||||
this.height=this.$refs.pwpg.clientHeight
|
||||
const {stage,layer}=container(this.width,this.height,'pwpg')
|
||||
this.stage=stage
|
||||
this.layer=layer
|
||||
|
||||
const titel=drawTitle(this.width,this.height,this.title)
|
||||
this.layer.add(titel)
|
||||
|
||||
this.initWorkers(this.$refs.selRef.getData().bzType)
|
||||
|
||||
const {container:pgdContainer,drawGd,setWorkers}=drawPgd(this.width,this.height)
|
||||
this.setWorkers=setWorkers
|
||||
this.drawGd=drawGd
|
||||
const {group:pgdGroup,bgGroup}=pgdContainer()
|
||||
this.pgdGroup=pgdGroup
|
||||
this.layer.add(bgGroup)
|
||||
|
||||
// const {group}=initSearch()
|
||||
// this.layer.add(group)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#selectComp {
|
||||
width:50%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top:10px;
|
||||
left:20px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
#ljianbgd {
|
||||
width:59.6%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top:45px;
|
||||
left:165px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#pwpg {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.container{
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<VxeGrid ref="ljpgd" v-bind="gridOptions" @cell-click="cellClick" @current-change="getCurrentData"
|
||||
@checkbox-change="checkboxChange" @checkbox-all="checkboxAll" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
import {ljpg} from "@/api/jhzxgl/pgd";
|
||||
import {endLoading, startLoading} from "@/utils";
|
||||
|
||||
export default {
|
||||
name:'LjianPgd',
|
||||
props:{
|
||||
worker:{
|
||||
type:Object,
|
||||
default: {}
|
||||
},
|
||||
workers:{
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
setExt:null,
|
||||
checkedList:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns,setExt}=paoWanPgdConfig()
|
||||
this.setExt=setExt
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
this.setExt("workers",this.$props.workers)
|
||||
},
|
||||
methods:{
|
||||
paigong(){
|
||||
const data=this.checkedList
|
||||
if (data.length===0){
|
||||
this.$message.warning('请选择需要派工的工单')
|
||||
return;
|
||||
}
|
||||
for (const item of data) {
|
||||
if (item.pkbs&&item.pscry==='Y'){
|
||||
this.$message.warning('坡口施工人员未安排')
|
||||
return
|
||||
}
|
||||
if (item.qbs&&item.qscry==='Y'){
|
||||
this.$message.warning('曲面施工人员未安排')
|
||||
return
|
||||
}
|
||||
if (item.dmbs&&item.dscry==='Y'){
|
||||
this.$message.warning('打磨施工人员未安排')
|
||||
return
|
||||
}
|
||||
}
|
||||
const pgData=data//.filter(item=>this.isAllNotEmpty(item.dmry,item.pkry,item.qjgry,item.pkbs,item.qbs,item.dmbs))
|
||||
.map(item=>{
|
||||
const data={
|
||||
id:item.id,
|
||||
dscry:item.dscry,pscry:item.pscry,qscry:item.qscry,
|
||||
pkbs:item.pkbs,qbs:item.qbs,dmbs:item.dmbs,
|
||||
}
|
||||
item.pkbs==='Y'&&(data.pkZt='02')
|
||||
item.qbs==='Y'&&(data.qjgZt='02')
|
||||
item.dmbs==='Y'&&(data.dmZt='02')
|
||||
return data
|
||||
})
|
||||
startLoading()
|
||||
ljpg(pgData).then(res=>{
|
||||
if (res.success){
|
||||
this.$message.warning('成功')
|
||||
this.$emit('search',this.worker)
|
||||
}
|
||||
})
|
||||
},
|
||||
checkboxAll() {
|
||||
this.checkedList = this.$refs.ljpgd.getCheckboxRecords();
|
||||
this.baogong()
|
||||
},
|
||||
checkboxChange() {
|
||||
this.checkedList = this.$refs.ljpgd.getCheckboxRecords();
|
||||
this.baogong()
|
||||
},
|
||||
initData(data){
|
||||
this.$refs.ljpgd.reloadData(data)
|
||||
setTimeout(()=>{
|
||||
endLoading()
|
||||
},2000)
|
||||
},
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,34 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const container=function (width=0,height=0,container){
|
||||
const stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: width,
|
||||
height: height,
|
||||
});
|
||||
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer)
|
||||
layer.draw();
|
||||
|
||||
const imageObj = new Image();
|
||||
const imgSize=width
|
||||
imageObj.src = require('@/assets/kban/bg.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:this.height,
|
||||
image: imageObj,
|
||||
});
|
||||
layer.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
return {
|
||||
stage,layer
|
||||
}
|
||||
}
|
||||
|
||||
export default container
|
||||
@ -0,0 +1,152 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height){
|
||||
const _width=width*0.075,_height=height*0.9751
|
||||
|
||||
const container=function (){
|
||||
const x=20,y=40
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width,
|
||||
height:_height,
|
||||
draggable:true,
|
||||
dragBoundFunc:function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const bgGroup=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:_width,
|
||||
height:_height,
|
||||
})
|
||||
bgGroup.clipFunc(function(ctx) {
|
||||
ctx.rect(0, 0, _width, _height*0.969);
|
||||
});
|
||||
bgGroup.add(group)
|
||||
|
||||
const imageObj = new Image();
|
||||
imageObj.src = require('@/assets/sliao/personbg.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height*0.975,
|
||||
image: this,
|
||||
});
|
||||
bgGroup.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
return {bgGroup,group}
|
||||
}
|
||||
|
||||
let currentWork=null;
|
||||
let selectedShape=null;
|
||||
|
||||
const getCurrentWorker=function (){
|
||||
return currentWork
|
||||
}
|
||||
|
||||
const person=function (index,persons={}){
|
||||
const alignSize=1
|
||||
const width=(_width-5)/alignSize,height=110
|
||||
const x=index%alignSize*width+index%alignSize+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
|
||||
const group=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:width,
|
||||
height:height
|
||||
})
|
||||
|
||||
const selectObj = new Image();
|
||||
selectObj.src = require('@/assets/sliao/selected.png');
|
||||
let selectShape=null
|
||||
const setSelectShape=function (shape){
|
||||
selectShape=shape
|
||||
}
|
||||
selectObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: width-width*0.3,
|
||||
y: 2,
|
||||
width: width*0.25,
|
||||
height:height*0.25,
|
||||
image: this,
|
||||
visible:false
|
||||
});
|
||||
group.add(shape)
|
||||
shape.zIndex(0)
|
||||
setSelectShape(shape)
|
||||
}
|
||||
|
||||
group.on('click touchstart',function (){
|
||||
currentWork=persons
|
||||
window.localStorage.setItem('worker',JSON.stringify(currentWork))
|
||||
if (selectedShape){
|
||||
selectedShape.hide()
|
||||
if (selectedShape===selectShape){
|
||||
selectedShape=null
|
||||
return
|
||||
}
|
||||
}
|
||||
selectedShape=selectShape
|
||||
selectedShape.show()
|
||||
})
|
||||
|
||||
const bgObj = new Image();
|
||||
bgObj.src = require('@/assets/sliao/personbg1.png');
|
||||
bgObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
offsetX:4,
|
||||
width: width,
|
||||
height:height,
|
||||
image: this,
|
||||
});
|
||||
group.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
const imageObj = new Image();
|
||||
imageObj.src = require('@/assets/sliao/headImage.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
offsetX:-4,
|
||||
offsetY:-10,
|
||||
width: width*0.89,
|
||||
height:height*0.85,
|
||||
image: this,
|
||||
});
|
||||
group.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
const text=new Konva.Text({
|
||||
x:0,
|
||||
y:height,
|
||||
width:width,
|
||||
height:height*0.1,
|
||||
text: persons.userName,
|
||||
align: 'center',
|
||||
verticalAlign:'middle',
|
||||
fontSize:12
|
||||
})
|
||||
group.add(text)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
return{
|
||||
container,person
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,687 @@
|
||||
import Konva from "konva";
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
export default function (width,height){
|
||||
const x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.95
|
||||
|
||||
const container=function (){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const bgGroup=new Konva.Group({
|
||||
x:x,
|
||||
y:y,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const bgObj = new Image();
|
||||
bgObj.src = require('@/assets/pwan/pgdbg.png');
|
||||
bgObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height,
|
||||
image: this,
|
||||
});
|
||||
bgGroup.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
bgGroup.add(group)
|
||||
return {bgGroup,group}
|
||||
}
|
||||
|
||||
let workers=[]
|
||||
const setWorkers=function (persons){
|
||||
workers=persons
|
||||
}
|
||||
|
||||
const formatWorker=function (code){
|
||||
console.log(code)
|
||||
console.log(workers)
|
||||
for (const item of workers) {
|
||||
if(item.userCode===code){
|
||||
return item.userName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const drawGd=function (data){
|
||||
// this.layer.destroyChildren();
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:13,
|
||||
y:12,
|
||||
width:_width,
|
||||
height:_height
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:_width-25,
|
||||
height:_height-20,
|
||||
})
|
||||
group.add(rect)
|
||||
|
||||
const title=new Konva.Text({
|
||||
x:0,
|
||||
y:10,
|
||||
width:_width,
|
||||
height:35,
|
||||
fill:'#fff',
|
||||
text:'大连重工大连钢材加工配送有限公司',
|
||||
align:'center',
|
||||
fontSize:22,
|
||||
})
|
||||
group.add(title)
|
||||
|
||||
const sgdTitle=new Konva.Text({
|
||||
x:0,
|
||||
y:40,
|
||||
width:_width,
|
||||
height:25,
|
||||
lineHeight:1,
|
||||
fill:'#fff',
|
||||
strokeWidth:1,
|
||||
text:'零件计划单',
|
||||
align:'center',
|
||||
fontSize:20,
|
||||
})
|
||||
group.add(sgdTitle)
|
||||
|
||||
const dhTitle=new Konva.Text({
|
||||
x:_width*0.7,
|
||||
y:50,
|
||||
width:_width-48,
|
||||
height:15,
|
||||
fill:'#fff',
|
||||
text:`单号:${data.qgdh?data.qgdh:''}`,
|
||||
align:'left',
|
||||
fontSize:12,
|
||||
})
|
||||
group.add(dhTitle)
|
||||
|
||||
const group0=new Konva.Group({
|
||||
x:15,
|
||||
y:65,
|
||||
width:_width-60,
|
||||
height:_width-100,
|
||||
})
|
||||
group.add(group0)
|
||||
|
||||
const group1=drawCzbh(data)
|
||||
group0.add(group1)
|
||||
const group2=drawPlAndFd(data)
|
||||
group0.add(group2)
|
||||
const group3=drawTzbh(data)
|
||||
group0.add(group3)
|
||||
const group4=drawTlt(data)
|
||||
group0.add(group4)
|
||||
const group5=drawJs(data)
|
||||
group0.add(group5)
|
||||
|
||||
const group51=drawJs1(data)
|
||||
group0.add(group51)
|
||||
const group52=drawJs2(data)
|
||||
group0.add(group52)
|
||||
|
||||
const group6=drawHb(data)
|
||||
group0.add(group6)
|
||||
const group7=drawBz(data)
|
||||
group0.add(group7)
|
||||
const group8=drawQz(data)
|
||||
group0.add(group8)
|
||||
generateQRCode(data.djh,group0)
|
||||
return group
|
||||
}
|
||||
|
||||
const drawQz=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:620,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const jsText=new Konva.Text({
|
||||
x:5,
|
||||
y:1,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:'负责人:',
|
||||
fontSize:18,
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(jsText)
|
||||
return group
|
||||
}
|
||||
const drawBz=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:440,
|
||||
width:(_width-60),
|
||||
height:180,
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:180,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(rect)
|
||||
return group
|
||||
}
|
||||
const drawHb=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:410,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const jsRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(jsRect)
|
||||
|
||||
const jsText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:'报工',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(jsText)
|
||||
|
||||
const plRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const plText=new Konva.Text({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.qjgFkrq,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const fdText=new Konva.Text({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.pwfkrq,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(fdText)
|
||||
|
||||
group.add(plText)
|
||||
|
||||
return group
|
||||
}
|
||||
const drawJs=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:150,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const jsRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(jsRect)
|
||||
|
||||
const jsText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:'坡口施工',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(jsText)
|
||||
|
||||
const plRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const pscry=formatWorker(data.pscry)
|
||||
const qscry=formatWorker(data.qscry)
|
||||
const dscry=formatWorker(data.dscry)
|
||||
|
||||
const plText=new Konva.Text({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:pscry,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const fdText=new Konva.Text({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.pkXfrq||'',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(fdText)
|
||||
|
||||
group.add(plText)
|
||||
|
||||
return group
|
||||
}
|
||||
const drawJs1=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:250,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const jsRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(jsRect)
|
||||
|
||||
const jsText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:'曲面施工',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(jsText)
|
||||
|
||||
const plRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const qscry=formatWorker(data.qscry)
|
||||
|
||||
const plText=new Konva.Text({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:qscry,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const fdText=new Konva.Text({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.qjgXfrq||'',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(fdText)
|
||||
|
||||
group.add(plText)
|
||||
|
||||
return group
|
||||
}
|
||||
const drawJs2=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:350,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const jsRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(jsRect)
|
||||
|
||||
const jsText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:'打磨施工',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(jsText)
|
||||
|
||||
const plRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const dscry=formatWorker(data.dscry)
|
||||
|
||||
const plText=new Konva.Text({
|
||||
x:0,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:dscry,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const fdText=new Konva.Text({
|
||||
x:(_width-60)/2,
|
||||
y:30,
|
||||
width:(_width-60)/2,
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.dmXfrq||'',
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(fdText)
|
||||
|
||||
group.add(plText)
|
||||
|
||||
return group
|
||||
}
|
||||
const drawTlt=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:150,
|
||||
width:(_width-60),
|
||||
height:200,
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:200,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(rect)
|
||||
return group
|
||||
}
|
||||
const drawTzbh=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:120,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
})
|
||||
|
||||
const rect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-60),
|
||||
height:30,
|
||||
fill:'#fff',
|
||||
text:data.tlth,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(text)
|
||||
return group
|
||||
}
|
||||
const drawPlAndFd=function (data){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:60,
|
||||
width:(_width-188),
|
||||
height:60,
|
||||
})
|
||||
|
||||
const plRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-188)/2,
|
||||
height:60,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(plRect)
|
||||
|
||||
const plText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-188)/2,
|
||||
height:60,
|
||||
fill:'#fff',
|
||||
text:'批量:'+data.pl,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(plText)
|
||||
|
||||
const fdRect=new Konva.Rect({
|
||||
x:(_width-188)/2,
|
||||
y:0,
|
||||
width:(_width-188)/2,
|
||||
height:60,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(fdRect)
|
||||
|
||||
const fdText=new Konva.Text({
|
||||
x:(_width-188)/2,
|
||||
y:0,
|
||||
width:(_width-188)/2,
|
||||
height:60,
|
||||
fill:'#fff',
|
||||
text:'分段:'+data.fd,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
group.add(fdText)
|
||||
|
||||
|
||||
return group
|
||||
}
|
||||
const drawCzbh=function (data){
|
||||
const czbhGroup=new Konva.Group({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-188),
|
||||
height:60,
|
||||
})
|
||||
|
||||
const czbhRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-188),
|
||||
height:60,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
czbhGroup.add(czbhRect)
|
||||
|
||||
const czbhText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:(_width-188),
|
||||
height:60,
|
||||
fill:'#fff',
|
||||
text:'船号:'+data.czbh,
|
||||
fontSize:18,
|
||||
align:'center',
|
||||
verticalAlign:'middle'
|
||||
})
|
||||
czbhGroup.add(czbhText)
|
||||
return czbhGroup
|
||||
}
|
||||
const generateQRCode=function (text='',group) {
|
||||
const imgSize=118
|
||||
const rect=new Konva.Rect({
|
||||
x:385,
|
||||
y:0,
|
||||
width:128.7,
|
||||
height:120,
|
||||
stroke:'#4991E5',
|
||||
strokeWidth:1,
|
||||
})
|
||||
group.add(rect)
|
||||
QRCode.toDataURL(text,{width:600,height:600,margin:1})
|
||||
.then(url => {
|
||||
const imageObj = new Image();
|
||||
imageObj.src = url;
|
||||
imageObj.onload = function () {
|
||||
|
||||
const shape = new Konva.Image({
|
||||
x: 390,
|
||||
y: 1,
|
||||
width: imgSize,
|
||||
height: imgSize,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
container,drawGd,setWorkers
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,219 @@
|
||||
|
||||
export default function () {
|
||||
const options={
|
||||
height:866,
|
||||
align:'center',
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource:true,
|
||||
size:'mini',
|
||||
showOverflow: true,
|
||||
scrollY:{enabled:true},
|
||||
highlightCurrentRow:true,
|
||||
data:[],
|
||||
ycldw:null,
|
||||
}
|
||||
const ext={}
|
||||
const setExt=function (key,value){
|
||||
ext[key]=value
|
||||
}
|
||||
|
||||
const nameFormat=function ({cellValue}){
|
||||
const workers=ext.workers
|
||||
for (const item of workers) {
|
||||
if(item.userCode===cellValue){
|
||||
return item.userName
|
||||
}
|
||||
}
|
||||
}
|
||||
const columns = [
|
||||
{ type: 'checkbox', width: 40 },
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'pkbs', title: '坡口标识', width: 90,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pscry', title: '坡口施工', width: 90,formatter:nameFormat,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'qbs', title: '曲面标识', width: 90,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'qscry', title: '曲面施工', width: 90,formatter:nameFormat,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'dmbs', title: '打磨标识', width: 90,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'dscry', title: '打磨施工', width: 90,formatter:nameFormat,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'qjgZt', title: '状态', width: 120,formatter: ['dictFormat','PGZT'],
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'czbh', title: '船号', width: 70,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pl', title: '批量', width: 70,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'fd', title: '分段', width: 70,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'kw', title: '跨位', width: 70,formatter: ['dictFormat', 'QGKW'],
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'zl', title: '组立', width: 70,formatter:['dictFormat','ZLLB'],
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'tlth', title: '套料图号', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'ljbh', title: '零件编号', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'ljmc', title: '零件名称', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'ljgg', title: '零件规格', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'ljcz', title: '零件材质', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'wpfl', title: '物品分类', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'jldw', title: '计量单位', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'sl', title: '数量', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'qfxqrqxz', title: '前方需求小组期', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'qfxqrqdz', title: '前方需求大组期', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'qgdh', title: '曲工单号', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'qjgjhrq', title: '曲加工计划期', width: 120,editRender: { name: 'input' },
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
// { field: 'qsbbh', title: '曲设备编号', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
// { field: 'qjgXfry', title: '曲派工人员', width: 120,editRender: { name: 'input' },
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'qjgXfrq', title: '曲派工日期', width: 120,editRender: { name: 'input' },
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'qjgFkry', title: '曲反馈人', width: 120,editRender: { name: 'input' },
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'qjgFkrq', title: '曲反馈日期', width: 120,editRender: { name: 'input' },
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pgdh', title: '坡口工单号', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'pkjhrq', title: '坡口计划日期', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
// { field: 'pksbbh', title: '坡口设备编号', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'pklx', title: '坡口类型', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pkcd', title: '坡口长度', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'pkXfry', title: '坡口派工人员', width: 120,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'pkXfrq', title: '坡口派工日期', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pkFkrq', title: '坡口反馈日期', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'pkFkry', title: '坡口反馈人', width: 120,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'dgdh', title: '打磨工单号', width: 100,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'dmsbbh', title: '打磨设备编号', width: 100,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'dmcd', title: '打磨打磨长度', width: 100,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
// { field: 'dmXfry', title: '打磨派工人', width: 100,
|
||||
// filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
// filterRender: { name: 'FilterCombination', },
|
||||
// },
|
||||
{ field: 'dmXfrq', title: '打磨派工日期', width: 100,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'dmFkry', title: '打磨反馈人', width: 100,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
{ field: 'dmFkrq', title: '打磨反馈日期', width: 100,
|
||||
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
|
||||
filterRender: { name: 'FilterCombination', },
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
options,
|
||||
columns,
|
||||
setExt
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,280 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export const sljh=function (width,height){
|
||||
|
||||
const layer=new Konva.Layer({
|
||||
id:'2',
|
||||
x:20,
|
||||
y:75,
|
||||
})
|
||||
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:0,
|
||||
width: width*0.6,
|
||||
height: height*0.2-60,
|
||||
draggable: true,
|
||||
dragBoundFunc:function (pos){
|
||||
return {
|
||||
x:pos.x,
|
||||
y:75
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const bgGroup=new Konva.Group({
|
||||
x:34,
|
||||
y:0,
|
||||
})
|
||||
bgGroup.clipFunc(function(ctx) {
|
||||
ctx.rect(4, 0, width*0.6, height*0.2-10);
|
||||
});
|
||||
|
||||
layer.add(bgGroup)
|
||||
bgGroup.zIndex(0)
|
||||
bgGroup.add(group)
|
||||
|
||||
const left2ImageObj=new Image()
|
||||
left2ImageObj.src = require('@/assets/sliao/left2.png');
|
||||
left2ImageObj.onload = function () {
|
||||
const shape1 = new Konva.Image({
|
||||
x: 0,
|
||||
y: 35,
|
||||
width: 32,
|
||||
height:120,
|
||||
image: this,
|
||||
});
|
||||
layer.add(shape1)
|
||||
shape1.zIndex(1)
|
||||
shape1.on('click touchstart',function (){
|
||||
group.move({
|
||||
x:-116
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const right2ImageObj=new Image()
|
||||
right2ImageObj.src = require('@/assets/sliao/right2.png');
|
||||
right2ImageObj.onload = function () {
|
||||
const shape1 = new Konva.Image({
|
||||
x: width*0.65,
|
||||
y: 35,
|
||||
width: 32,
|
||||
height:120,
|
||||
image: this,
|
||||
});
|
||||
layer.add(shape1)
|
||||
shape1.zIndex(1)
|
||||
shape1.on('click touchstart',function (){
|
||||
group.move({
|
||||
x:116
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const imageObj = new Image();
|
||||
imageObj.src = require('@/assets/sliao/sljhbg.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 8,
|
||||
y: 0,
|
||||
width: width*0.66,
|
||||
height:181,
|
||||
image: this,
|
||||
});
|
||||
layer.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
function drawItem(i,item){
|
||||
const itemWith=111;
|
||||
const itemHeight=108
|
||||
|
||||
const x=(i+1)*5+i*itemWith;
|
||||
const qyGroup=new Konva.Group({
|
||||
x:x,
|
||||
y:10,
|
||||
width:itemWith,
|
||||
height:itemHeight,
|
||||
})
|
||||
qyGroup.setAttr('index',i)
|
||||
qyGroup.setAttr('item',item)
|
||||
group.add(qyGroup)
|
||||
|
||||
const imageObj = new Image();
|
||||
imageObj.src = require('@/assets/sliao/sljhItemBg.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 111,
|
||||
height:163,
|
||||
image: this,
|
||||
});
|
||||
qyGroup.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
|
||||
const tlth=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 111,
|
||||
height:34,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:item.tzbh
|
||||
})
|
||||
qyGroup.add(tlth)
|
||||
|
||||
const nameGroup=new Konva.Group({
|
||||
x: 5,
|
||||
y: 43,
|
||||
width: 38,
|
||||
height:105,
|
||||
})
|
||||
|
||||
const nameImageObj1 = new Image();
|
||||
nameImageObj1.src = require('@/assets/sliao/nameBg1.png');
|
||||
nameImageObj1.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 38,
|
||||
height:105,
|
||||
image: this,
|
||||
});
|
||||
nameGroup.add(shape)
|
||||
shape.zIndex(0)
|
||||
}
|
||||
qyGroup.add(nameGroup)
|
||||
|
||||
const name1=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 38,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:'船号'
|
||||
})
|
||||
nameGroup.add(name1)
|
||||
|
||||
const name2=new Konva.Text({
|
||||
x: 0,
|
||||
y: 21,
|
||||
width: 38,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:'批量'
|
||||
})
|
||||
nameGroup.add(name2)
|
||||
|
||||
const name3=new Konva.Text({
|
||||
x: 0,
|
||||
y: 43,
|
||||
width: 38,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:'规格'
|
||||
})
|
||||
nameGroup.add(name3)
|
||||
|
||||
const name4=new Konva.Text({
|
||||
x: 0,
|
||||
y: 64.5,
|
||||
width: 38,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:'垛位'
|
||||
})
|
||||
nameGroup.add(name4)
|
||||
|
||||
const name5=new Konva.Text({
|
||||
x: 0,
|
||||
y: 86.5,
|
||||
width: 38,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:'层数'
|
||||
})
|
||||
nameGroup.add(name5)
|
||||
|
||||
const infoGroup=new Konva.Group({
|
||||
x: 43,
|
||||
y: 43,
|
||||
width: 65,
|
||||
height:105,
|
||||
})
|
||||
qyGroup.add(infoGroup)
|
||||
|
||||
const info1=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 65,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:item.dcCh
|
||||
})
|
||||
infoGroup.add(info1)
|
||||
|
||||
const info2=new Konva.Text({
|
||||
x: 0,
|
||||
y: 21,
|
||||
width: 65,
|
||||
height:20,
|
||||
fontSize:12,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:item.dcPl
|
||||
})
|
||||
infoGroup.add(info2)
|
||||
|
||||
const info3=new Konva.Text({
|
||||
x: 0,
|
||||
y: 43,
|
||||
width: 65,
|
||||
height:20,
|
||||
fontSize:9,
|
||||
fontStyle:'bold',
|
||||
fill:'#fff',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
text:item.wpgg
|
||||
})
|
||||
infoGroup.add(info3)
|
||||
|
||||
return qyGroup
|
||||
}
|
||||
|
||||
return {
|
||||
layer,group,drawItem
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const title=function (width,height,title) {
|
||||
const group=new Konva.Group({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: width,
|
||||
height: 20,
|
||||
})
|
||||
|
||||
const imageObj = new Image();
|
||||
imageObj.src = require('@/assets/kban/logo.png');
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: width*0.86,
|
||||
height:41,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
}
|
||||
|
||||
const text=new Konva.Text({
|
||||
x: 0,
|
||||
y: 8,
|
||||
width: width,
|
||||
height: 20,
|
||||
text: title,
|
||||
align: 'center',
|
||||
fill:'#fff',
|
||||
fontSize: 32,
|
||||
fontStyle:'bold'
|
||||
})
|
||||
group.add(text)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
export default title
|
||||
Loading…
Reference in new issue