534 lines
20 KiB
Vue
534 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<el-card>
|
||
<!--<el-radio-group v-model="radio" @change="changeType">-->
|
||
<!--<el-radio :label="1">自制件</el-radio>-->
|
||
<!--<el-radio :label="2">采购部采购</el-radio>-->
|
||
<!--<el-radio :label="3">制造部采购</el-radio>-->
|
||
<!--</el-radio-group>-->
|
||
<span style="display:inline-block;margin-left: 10px">零件图号：</span>
|
||
<el-autocomplete
|
||
v-model="searchPick"
|
||
:fetch-suggestions="querySearch"
|
||
clearable
|
||
style="width: 200px;margin-left: 10px;"
|
||
size="small"
|
||
class="inline-input"
|
||
placeholder="请输入零件图号"
|
||
@select="handleSelect"
|
||
@clear="clearSelect"
|
||
/>
|
||
<!--<el-button type="text" @click="show1 = !show1" style="margin-left: 10px">高级查询</el-button>-->
|
||
<!--<div v-show="show1" style="margin-top: 20px" class="transition-box">-->
|
||
<!--<span style="display:inline-block;margin-left: 10px">项目名称：</span>-->
|
||
<!--<el-autocomplete-->
|
||
<!--v-model="searchCriteria"-->
|
||
<!--:fetch-suggestions="querySearch"-->
|
||
<!--clearable-->
|
||
<!--style="width: 200px;margin-left: 10px;"-->
|
||
<!--size="small"-->
|
||
<!--class="inline-input"-->
|
||
<!--placeholder="请输入零件或物料"-->
|
||
<!--@clear="clearSelect"-->
|
||
<!--@select="handleSelect"-->
|
||
<!--/>-->
|
||
<!--<span style="display:inline-block;margin-left: 10px">机床图号：</span>-->
|
||
<!--<el-input-->
|
||
<!--v-model="input_Mobile"-->
|
||
<!--:trigger-on-focus="false"-->
|
||
<!--clearable-->
|
||
<!--size="small"-->
|
||
<!--style="width: 200px;margin-right: 10px"-->
|
||
<!--placeholder="请输入内容"/>-->
|
||
<!--<span style="display:inline-block;margin-left: 10px">组号：</span>-->
|
||
<!--<el-input-->
|
||
<!--v-model="input_Mobile"-->
|
||
<!--:trigger-on-focus="false"-->
|
||
<!--clearable-->
|
||
<!--size="small"-->
|
||
<!--style="width: 200px;margin-right: 10px"-->
|
||
<!--placeholder="请输入内容"/>-->
|
||
<!--<span style="display:inline-block;margin-left: 10px">零件图号：</span>-->
|
||
<!--<el-input-->
|
||
<!--v-model="input_Mobile"-->
|
||
<!--:trigger-on-focus="false"-->
|
||
<!--clearable-->
|
||
<!--size="small"-->
|
||
<!--style="width: 200px;margin-right: 10px"-->
|
||
<!--placeholder="请输入内容"/>-->
|
||
<!--</div>-->
|
||
<div>
|
||
<el-divider content-position="right">零件档案</el-divider>
|
||
<div class="text">
|
||
<span style="display:inline-block;margin-left: 10px">零件图号：<el-tag size="small">{{ form.零件图号 }}</el-tag></span>
|
||
<el-divider direction="vertical"/>
|
||
<span style="display:inline-block;margin-left: 10px">零件名称：<el-tag size="small">{{ form.零件名称 }}</el-tag></span>
|
||
<el-divider direction="vertical"/>
|
||
<span style="display:inline-block;margin-left: 10px">投产数量：<el-tag size="small">{{ form.投产数量 }}</el-tag></span>
|
||
<el-divider direction="vertical"/>
|
||
<span style="display:inline-block;margin-left: 10px">所属机床：<el-tag size="small">{{ form.所属机床 }}</el-tag></span>
|
||
<el-divider direction="vertical"/>
|
||
<span style="display:inline-block;margin-left: 10px">所属组件：<el-tag size="small">{{ form.所属组件 }}</el-tag></span>
|
||
</div>
|
||
<el-divider content-position="right">生命周期</el-divider>
|
||
<div class="text item">
|
||
<el-row>
|
||
<el-col :span="3">
|
||
<el-timeline style="margin-top: 40px">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:icon="activity.icon"
|
||
:type="activity.type"
|
||
:color="activity.color"
|
||
:size="activity.size"
|
||
:timestamp="activity.timestamp">
|
||
{{ activity.content }}
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-col>
|
||
<el-col :span="1">
|
||
<div style="width:1px;border:0.1px solid #DCDFE6;float:left;height:450px;"/>
|
||
</el-col>
|
||
<el-col :span="20" style="margin-top: 30px">
|
||
<div class="main">
|
||
<div v-show="show" style="line-height: 130px;text-align: center">
|
||
<div>
|
||
—请查询—
|
||
</div>
|
||
</div>
|
||
<div class="sudoku_row" >
|
||
<div v-for="(sudoku,index) in sudokus" :class="curSelect==sudoku.id?'opacity':''" :key="index" class="sudoku_item " @touchstart="touchstart(index)" @touchend="touchend">
|
||
<div class="text">
|
||
第{{ sudoku.id }}序
|
||
</div>
|
||
<div :style="{width: '100px',height: '100px',border: '1px solid grey','text-align': 'center', 'background-color': sudoku.color}" class="text">
|
||
<el-row style="margin-top: 10px">
|
||
<div style="height: 20px">
|
||
{{ sudoku.procedure }}
|
||
</div>
|
||
</el-row>
|
||
<el-row style="margin-top: 2px">
|
||
<div style="height: 20px">
|
||
{{ sudoku.planningTime }}
|
||
</div>
|
||
</el-row>
|
||
<el-row style="margin-top: 2px">
|
||
<div style="height: 20px">
|
||
{{ sudoku.actualTime }}
|
||
</div>
|
||
</el-row>
|
||
<el-row style="margin-top: 2px">
|
||
<div style="height: 20px">
|
||
{{ sudoku.name }}
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-row :gutter="20" style="margin-top: 50px">
|
||
<el-col :span="11">
|
||
<div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
|
||
<el-row style="margin-top: 15px;margin-right: 15px">
|
||
<span style="float: right">—备料信息—</span>
|
||
</el-row>
|
||
<el-row style="margin-top: 30px;margin-left: 10px">
|
||
<span style="width:80px;margin-left: 10px">备料单：<el-tag size="small" type="success">{{ isMaterials }}</el-tag></span>
|
||
<span style="width:80px;margin-left: 20px">备料类型：<el-tag size="small" type="success">{{ materialsType }}</el-tag></span>
|
||
<span style="width:80px;margin-left: 20px">下料员：<el-tag size="small" type="success">{{ Cutter }}</el-tag></span>
|
||
<span style="width:80px;margin-left: 20px">确认日期：<el-tag size="small" type="success">{{ confirmationTime }}</el-tag></span>
|
||
</el-row>
|
||
<el-row style="margin-top: 30px;margin-left: 30px">
|
||
<el-steps :space="200" :active="active" finish-status="success">
|
||
<el-step title="创建备料"/>
|
||
<el-step title="备料确认"/>
|
||
</el-steps>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
|
||
<el-row style="margin-top: 15px;margin-right: 15px">
|
||
<span style="float: right">—外协信息—</span>
|
||
</el-row>
|
||
<el-row style="margin-top: 30px;margin-left: 10px">
|
||
<span style="width:80px;margin-left: 10px">是否序间外协：<el-tag size="small" type="success">{{ isOut }}</el-tag></span>
|
||
<span style="width:80px;margin-left: 20px">外协工序：<el-tag size="small" type="success">{{ outName }}</el-tag></span>
|
||
<span style="width:80px;margin-left: 20px">检验日期：<el-tag size="small" type="success">{{ outTime }}</el-tag></span>
|
||
</el-row>
|
||
<el-row style="margin-top: 30px;margin-left: 30px;margin-right: 30px">
|
||
<el-steps :active="active1" finish-status="success">
|
||
<el-step title="序间外协"/>
|
||
<el-step title="价格预算"/>
|
||
<el-step title="任务执行"/>
|
||
<el-step title="到货质检"/>
|
||
</el-steps>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider content-position="right">跳转链接</el-divider>
|
||
<el-row style="margin-left: 20px">
|
||
<router-link to="/StatusQuery/index" style="color:dodgerblue">零件状态查询</router-link>
|
||
<el-divider direction="vertical"/>
|
||
<router-link to="/StatusQuery/index" style="color:dodgerblue">加工进度查询</router-link>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { SelectPart, SelectProcessingProgress, SelectPreparation, SelectOut } from '@/api/ManufacturingCenter/TraceabilityOfParts'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isOut: '请查询',
|
||
outName: '请查询',
|
||
outTime: '请查询',
|
||
active: '',
|
||
active1: '',
|
||
confirmationTime: '请查询',
|
||
Cutter: '请查询',
|
||
isMaterials: '请查询',
|
||
searchPick: '',
|
||
materialsType: '请查询',
|
||
restaurantsPick: [],
|
||
show: true,
|
||
show1: false,
|
||
// typeA: true,
|
||
// typeB: false,
|
||
// typeC: false,
|
||
radio: 1,
|
||
form: {
|
||
零件图号: '请查询',
|
||
投产数量: '请查询',
|
||
所属机床: '请查询',
|
||
所属组件: '请查询',
|
||
零件名称: '请查询'
|
||
},
|
||
activities: [{
|
||
id: 3,
|
||
content: '生产计划下达',
|
||
timestamp: '制造部：计划员',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 4,
|
||
content: '工艺制定',
|
||
timestamp: '工艺部：工艺员',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 5,
|
||
content: '定额制定',
|
||
timestamp: '工艺部：工艺员',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 6,
|
||
content: '生产能力平衡',
|
||
timestamp: '制造部：计划员',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 7,
|
||
content: '加工',
|
||
timestamp: '金工车间：操作工',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 8,
|
||
content: '入库',
|
||
timestamp: '金工车间：库管员',
|
||
type: '',
|
||
size: 'large'
|
||
}, {
|
||
id: 9,
|
||
content: '出库',
|
||
timestamp: '金工车间：库管员',
|
||
type: '',
|
||
size: 'large'
|
||
}],
|
||
sudokus: [],
|
||
curSelect: null
|
||
}
|
||
},
|
||
methods: {
|
||
// changeType() {
|
||
// if(this.radio === 1) {
|
||
// this.typeA = true
|
||
// this.typeB = false
|
||
// this.typeC = false
|
||
// } else if(this.radio === 2) {
|
||
// this.typeA = false
|
||
// this.typeB = true
|
||
// this.typeC = false
|
||
// } else if(this.radio === 3) {
|
||
// this.typeA = false
|
||
// this.typeB = false
|
||
// this.typeC = true
|
||
// }
|
||
// },
|
||
touchstart: function(e) {
|
||
var that = this
|
||
var list = that.sudokus
|
||
for (var i = 0, len = list.length; i < len; ++i) {
|
||
if (list[i].id === e) {
|
||
that.curSelect = i
|
||
}
|
||
}
|
||
}, touchend: function() {
|
||
var that = this
|
||
that.curSelect = null
|
||
},
|
||
querySearch(queryString, cb) {
|
||
this.restaurantsPick = []
|
||
if (this.searchPick !== '' && this.searchPick !== null) {
|
||
SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
|
||
const res = response.data
|
||
res.forEach(item => {
|
||
this.restaurantsPick.push({
|
||
value: item.零件图号,
|
||
name: item.工艺计划流水号
|
||
})
|
||
})
|
||
return this.restaurantsPick
|
||
}).then(data => {
|
||
var restaurants = data
|
||
var results = queryString ? restaurants.filter(this.createFilterPick(queryString)) : restaurants
|
||
return results
|
||
}).then(data => {
|
||
cb(data)
|
||
})
|
||
}
|
||
},
|
||
createFilterPick(queryString) {
|
||
return (restaurant) => {
|
||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
|
||
}
|
||
},
|
||
clearSelect() {
|
||
this.active = ''
|
||
this.active1 = ''
|
||
this.sudokus = []
|
||
this.isOut = '请查询'
|
||
this.outName = '请查询'
|
||
this.outTime = '请查询'
|
||
this.confirmationTime = '请查询'
|
||
this.Cutter = '请查询'
|
||
this.isMaterials = '请查询'
|
||
this.materialsType = '请查询'
|
||
this.form.零件图号 = '请查询'
|
||
this.form.投产数量 = '请查询'
|
||
this.form.所属机床 = '请查询'
|
||
this.form.所属组件 = '请查询'
|
||
this.form.零件名称 = '请查询'
|
||
for (let i = 0; i < this.activities.length; i++) {
|
||
this.activities[i].type = ''
|
||
}
|
||
this.show = true
|
||
},
|
||
handleSelect(item) {
|
||
this.sudokus = []
|
||
this.show = false
|
||
this.active = ''
|
||
this.active1 = ''
|
||
this.confirmationTime = '请查询'
|
||
this.Cutter = '请查询'
|
||
this.isMaterials = '请查询'
|
||
this.materialsType = '请查询'
|
||
this.isOut = '请查询'
|
||
this.outName = '请查询'
|
||
this.outTime = '请查询'
|
||
for (let i = 0; i < this.activities.length; i++) {
|
||
this.activities[i].type = ''
|
||
}
|
||
SelectPart(0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', '', '', item.name).then(response => {
|
||
this.form.零件图号 = response.data[0].零件图号
|
||
this.form.投产数量 = response.data[0].批次数量
|
||
this.form.所属机床 = response.data[0].机床图号
|
||
this.form.所属组件 = response.data[0].组号
|
||
this.form.零件名称 = response.data[0].零件名称
|
||
})
|
||
SelectProcessingProgress(item.name).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.sudokus.push({
|
||
id: response.data[i].工序顺序,
|
||
procedure: response.data[i].工艺名称,
|
||
planningTime: response.data[i].计划日期_短,
|
||
actualTime: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].完成日期_短,
|
||
name: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].员工姓名,
|
||
color: response.data[i].进度颜色
|
||
})
|
||
}
|
||
})
|
||
SelectPreparation(item.name).then(response => {
|
||
if (response.data.length !== 0) {
|
||
if (response.data[0].类型.toString() === '0') {
|
||
this.isMaterials = '未创建'
|
||
this.materialsType = '未创建'
|
||
this.Cutter = '未创建'
|
||
this.confirmationTime = '未创建'
|
||
this.active = '0'
|
||
} else if (response.data[0].类型.toString() === '1') {
|
||
this.isMaterials = '已创建'
|
||
this.materialsType = '自家备料'
|
||
this.Cutter = '未确认'
|
||
this.confirmationTime = '未确认'
|
||
this.active = '1'
|
||
} else if (response.data[0].类型.toString() === '2') {
|
||
this.isMaterials = '已创建'
|
||
this.materialsType = '外购备料'
|
||
this.Cutter = '未确认'
|
||
this.confirmationTime = '未确认'
|
||
this.active = '1'
|
||
} else if (response.data[0].类型.toString() === '3') {
|
||
this.isMaterials = '已创建'
|
||
this.materialsType = '自家备料'
|
||
this.active = '2'
|
||
response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
|
||
response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
|
||
} else if (response.data[0].类型.toString() === '4') {
|
||
this.isMaterials = '已创建'
|
||
this.materialsType = '外购备料'
|
||
this.active = '2'
|
||
response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
|
||
response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
|
||
}
|
||
}
|
||
})
|
||
SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
|
||
console.log(response, 8)
|
||
for (let i = 0; i < this.activities.length; i++) {
|
||
if (response.data[0].考核状态.toString() === this.activities[i].id.toString()) {
|
||
for (let j = 0; j <= i; j++) {
|
||
this.activities[j].type = 'success'
|
||
}
|
||
this.activities[i + 1].type = 'warning'
|
||
}
|
||
}
|
||
})
|
||
SelectOut(item.name).then(response => {
|
||
console.log(response, 87633)
|
||
if (response.data[0].状态编号.toString() === '1') {
|
||
this.isOut = '是'
|
||
this.active1 = '1'
|
||
this.outName = ''
|
||
this.outTime = '未到货检验'
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
if (i === 0) {
|
||
this.outName = response.data[i].外协工序
|
||
} else {
|
||
this.outName = this.outName + '、' + response.data[i].外协工序
|
||
}
|
||
}
|
||
} else if (response.data[0].状态编号.toString() === '2') {
|
||
this.isOut = '是'
|
||
this.active1 = '2'
|
||
this.outName = ''
|
||
this.outTime = '未到货检验'
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
if (i === 0) {
|
||
this.outName = response.data[i].外协工序
|
||
} else {
|
||
this.outName = this.outName + '、' + response.data[i].外协工序
|
||
}
|
||
}
|
||
} else if (response.data[0].状态编号.toString() === '3') {
|
||
this.isOut = '是'
|
||
this.active1 = '3'
|
||
this.outName = ''
|
||
this.outTime = '未到货检验'
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
if (i === 0) {
|
||
this.outName = response.data[i].外协工序
|
||
} else {
|
||
this.outName = this.outName + '、' + response.data[i].外协工序
|
||
}
|
||
}
|
||
} else if (response.data[0].状态编号.toString() === '4') {
|
||
this.isOut = '是'
|
||
this.active1 = '4'
|
||
this.outName = ''
|
||
this.outTime = response.data[0].检验日期
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
if (i === 0) {
|
||
this.outName = response.data[i].外协工序
|
||
} else {
|
||
this.outName = this.outName + '、' + response.data[i].外协工序
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-textarea__inner, .el-radio__inner, .el-input__inner{
|
||
border: 1px solid #C0C4CC !important
|
||
}
|
||
.text{
|
||
font-size: 14px;
|
||
}
|
||
.sudoku_row{
|
||
height: 120px;
|
||
padding: 5px;
|
||
/*overflow-x: scroll;*/
|
||
display: flex;
|
||
align-items: center;
|
||
/*flex-wrap: wrap;*/
|
||
}
|
||
.sudoku_item{
|
||
margin-right: 10px;
|
||
display: flex;
|
||
height: 110px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
/*padding-top: 10px;*/
|
||
/*padding-bottom: 10px;*/
|
||
}
|
||
.opacity{
|
||
opacity: 0.4;
|
||
background: #e5e5e5;
|
||
}
|
||
.sudoku_item img{
|
||
margin-bottom: 3px;
|
||
display: block;
|
||
}
|
||
.main{
|
||
border: 1px solid #DCDFE6;
|
||
width:91.5%;
|
||
overflow-y: hidden;
|
||
overflow-x: auto;
|
||
color: #000;
|
||
font-size: 16px;
|
||
height: 130px;
|
||
}
|
||
.main p{height:300px;}
|
||
/*-------滚动条整体样式----*/
|
||
.main::-webkit-scrollbar {
|
||
width:8px;
|
||
height:8px;
|
||
}
|
||
/*滚动条里面小方块样式*/
|
||
.main::-webkit-scrollbar-thumb {
|
||
border-radius:100px;
|
||
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
|
||
background:#DCDFE6;
|
||
}
|
||
/*滚动条里面轨道样式*/
|
||
.main::-webkit-scrollbar-track {
|
||
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
|
||
border-radius:0;
|
||
background:white;
|
||
}
|
||
</style>
|