增加模块
This commit is contained in:
liushuai
266
src/views/ManufacturingCenter/ProcessAdjustQuery/index.vue
Normal file
266
src/views/ManufacturingCenter/ProcessAdjustQuery/index.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<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++) {
|
||||
if (this.tableData1[i].工序流水号 === row.工序流水号 && this.tableData1[i].工艺编号 !== null) {
|
||||
if (this.tableData1[i].工艺编号 !== row.工艺编号 || this.tableData1[i].工艺要求 !== row.工艺要求 || this.tableData1[i].工艺难度等级 !== row.工艺难度等级 || this.tableData1[i].工序顺序 !== row.工序顺序) {
|
||||
return 'change'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tableRowClassName1({ row }) {
|
||||
for (let i = 0; i < this.tableData2.length; i++) {
|
||||
if (this.tableData2[i].工序流水号 === row.工序流水号 && this.tableData2[i].工艺编号 !== null) {
|
||||
if (this.tableData2[i].工艺编号 !== row.工艺编号 || this.tableData2[i].工艺要求 !== row.工艺要求 || this.tableData2[i].工艺难度等级 !== row.工艺难度等级 || this.tableData2[i].工序顺序 !== row.工序顺序) {
|
||||
return 'change'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user