273 lines
8.8 KiB
Vue
273 lines
8.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<span>工艺员:</span>
|
|
<el-select v-model="craftmenValue" placeholder="工艺员" size="small" style="width:100px" @change="searchParts()">
|
|
<el-option
|
|
v-for="item in craftmen"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<span>零件图号:</span>
|
|
<el-select v-model="partNumValue" filterable placeholder="零件图号" style="margin-right: 10px" size="small" clearable @clear="returnDate = ''">
|
|
<el-option
|
|
v-for="item in partNum"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchData()">查询</el-button>
|
|
<span>打回时间:</span>
|
|
<el-date-picker v-model="returnDate" :clearable="false" type="datetime" placeholder="打回时间" size="small" readonly/>
|
|
</el-card>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-card>
|
|
<div style="display: inline-block;margin-bottom: 20px">改前零件工艺</div>
|
|
<el-table id="div1" ref="div1" :data="tableData1" :row-class-name="tableRowClassName1" size="mini" border style="height:350px;overflow-y: auto;" @mouseenter.native="changeScrollBefore">
|
|
<el-table-column align="center" label="工序顺序" width="70px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工序顺序 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="工艺名称" width="120px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="难度等级" width="70px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺难度等级 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column header-align="center" label="工艺要求">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺要求 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card style="margin-left:15px">
|
|
<div style="display: inline-block;margin-bottom: 20px">改后零件工艺</div>
|
|
<el-table id="div2" ref="div2" :data="tableData2" :row-class-name="tableRowClassName2" size="mini" border style="height:350px;overflow-y: scroll;" @mouseenter.native="changeScrollAfter">
|
|
<el-table-column align="center" label="工序顺序" width="70px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工序顺序 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="工艺名称" width="120px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="难度等级" width="70px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺难度等级 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column header-align="center" label="工艺要求">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺要求 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card>
|
|
<div id="myChart" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { initCraftmen, searchPart, searchProcessOld, searchProcessNew, searchChart } from '@/api/ManufacturingCenter/ProcessAdjustQuery'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
returnDate: '',
|
|
craftmenValue: '',
|
|
craftmen: [],
|
|
partNumValue: '', // 工艺计划流水号
|
|
partNum: [],
|
|
partStatus: '',
|
|
tableData1: [],
|
|
tableData2: [],
|
|
dataX: [],
|
|
partsNum: []
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
this.searchChart()
|
|
},
|
|
methods: {
|
|
changeScrollBefore() {
|
|
const div1 = document.getElementById('div1')
|
|
const div2 = document.getElementById('div2')
|
|
div2.removeAttribute('onscroll')
|
|
div1.setAttribute('onscroll', 'document.getElementById(\'div2\').scrollTop = scrollTop')
|
|
},
|
|
changeScrollAfter() {
|
|
const div1 = document.getElementById('div1')
|
|
const div2 = document.getElementById('div2')
|
|
div1.removeAttribute('onscroll')
|
|
div2.setAttribute('onscroll', 'document.getElementById(\'div1\').scrollTop = scrollTop')
|
|
},
|
|
searchChart() {
|
|
searchChart().then(response => {
|
|
console.log(response, 11)
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.dataX.push(response.data[i].姓名)
|
|
this.partsNum.push(response.data[i].零件数量)
|
|
}
|
|
this.drawLine()
|
|
})
|
|
},
|
|
drawLine() {
|
|
const myChart = echarts.init(document.getElementById('myChart'))
|
|
myChart.clear()
|
|
myChart.setOption({
|
|
title: {
|
|
text: '在制零件工艺调整统计',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '工艺员',
|
|
data: this.dataX,
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '工艺被调整零件数',
|
|
min: 0,
|
|
minInterval: 1
|
|
},
|
|
series: [
|
|
{
|
|
name: '工艺调整零件数',
|
|
type: 'bar',
|
|
data: this.partsNum,
|
|
markLine: {
|
|
data: [
|
|
{ type: 'average', name: '平均值' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
})
|
|
},
|
|
fetchData() {
|
|
this.craftmen = []
|
|
initCraftmen().then(response => { // 初始化工艺员
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.craftmen.push({
|
|
label: response.data[i].姓名,
|
|
value: response.data[i].人员编号
|
|
})
|
|
}
|
|
})
|
|
},
|
|
searchParts() {
|
|
this.tableData1 = []
|
|
this.tableData2 = []
|
|
this.partNum = []
|
|
this.partNumValue = ''
|
|
this.returnDate = ''
|
|
searchPart(this.craftmenValue).then(response => {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.partNum.push({
|
|
label: response.data[i].零件图号_零件工艺计划,
|
|
value: response.data[i].工艺计划流水号
|
|
})
|
|
}
|
|
})
|
|
},
|
|
searchData() {
|
|
this.tableData1 = []
|
|
this.tableData2 = []
|
|
if (this.partNumValue !== '' && this.partNumValue !== null) {
|
|
searchProcessOld(this.partNumValue).then(response => {
|
|
this.tableData1 = response.data
|
|
this.returnDate = response.data[0].操作时间
|
|
})
|
|
searchProcessNew(this.partNumValue).then(response => {
|
|
this.tableData2 = response.data
|
|
})
|
|
} else {
|
|
this.$message.error('请先选择零件')
|
|
}
|
|
},
|
|
tableRowClassName2({ row }) {
|
|
for (let i = 0; i < this.tableData1.length; i++) {
|
|
row.工艺编号 === null ? row.工艺编号 = 0 : row.工艺编号
|
|
if (this.tableData1[i].工序流水号 === row.工序流水号 && this.tableData1[i].工艺编号 !== null) {
|
|
if (this.tableData1[i].工艺编号 !== row.工艺编号 || this.tableData1[i].工艺要求 !== row.工艺要求 || this.tableData1[i].工艺难度等级 !== row.工艺难度等级) {
|
|
return 'change'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tableRowClassName1({ row }) {
|
|
for (let i = 0; i < this.tableData2.length; i++) {
|
|
row.工艺编号 === null ? row.工艺编号 = 0 : row.工艺编号
|
|
if (this.tableData2[i].工序流水号 === row.工序流水号 && this.tableData2[i].工艺编号 !== null) {
|
|
if (this.tableData2[i].工艺编号 !== row.工艺编号 || this.tableData2[i].工艺要求 !== row.工艺要求 || this.tableData2[i].工艺难度等级 !== row.工艺难度等级) {
|
|
return 'change'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.el-table .change {
|
|
background: oldlace;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.el-card{
|
|
margin-bottom: 15px;
|
|
}
|
|
.el-date-editor{
|
|
width:200px
|
|
}
|
|
.el-select{
|
|
width:200px
|
|
}
|
|
.el-input{
|
|
width:200px
|
|
}
|
|
span{
|
|
margin: 10px 0 10px 10px;
|
|
}
|
|
.searchForm .el-form-item{
|
|
margin-bottom: 5px;
|
|
}
|
|
</style>
|