meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

家里的样式

Browse Source
This commit is contained in:
zhangdingyu
2019-09-18 09:34:02 +08:00
commit 02d1678fff
681 changed files with 133918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
src/views/ManufacturingCenter/ProcessingStatus/index.vue Normal file
View File

@@ -0,0 +1,608 @@
<template>
<div class="app-container">
<el-card>
<el-row>
<span>机床号:</span>
<el-select v-model="Machine" filterable clearable size="small" style="margin-top:10px;width: 220px" placeholder="机床号" @change="getGroup()">
<el-option
v-for="item in Machines"
:key="item.value"
:label="item.label"
:value="item.value">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
</el-option>
</el-select>
<span>组号:</span>
<el-select v-model="Group" size="small" clearable placeholder="组号" style="margin-top:10px;width: 180px;">
<el-option
v-for="item in Groups"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<span>零件图号:</span>
<el-input v-model="number" placeholder="零件号" clearable size="small" style="width: 180px;"/>
<span>进度颜色：</span>
<span style="background-color: red">拖期</span>
<span style="background-color: yellow">即将拖期</span>
<span style="background-color: lawngreen">如期</span>
<span style="background-color: deepskyblue">工序外协</span>
<span style="background-color: grey">报废</span>
</el-row>
<el-row style="margin-top:10px;">
<span class="demonstration">计划下达时间:</span>
<el-date-picker
v-model="startTime"
value-format="yyyy-MM-dd"
size="small"
style="width: 160px"
type="date"
placeholder="选择日期"/>
<span class="demonstration">~</span>
<el-date-picker
v-model="endTime"
value-format="yyyy-MM-dd"
size="small"
style="width: 160px"
type="date"
placeholder="选择日期"/>
<el-button type="success" class="el-icon-search" size="small" style="margin: 10px 0 0 10px" @click="getTableData();pageCurrent=1;pageSize=10;total = 0">查询</el-button>
<el-button type="warning" class="el-icon-download" size="small" style="margin: 10px 0 0 10px" @click="exportExcel">导出</el-button>
</el-row>
</el-card>
<el-card>
<el-table
v-loading="listLoading1"
:data="tableData1"
class="table"
border
height="650">
<el-table-column
label="序号"
align="center"
width="50"
type="index"/>
<el-table-column
align="center"
label="零件图号"
width="200px">
<template slot-scope="scope">{{ 零件图号[scope.$index] }}</template>
</el-table-column>
<el-table-column
align="center"
label="零件名称"
width="120px">
<template slot-scope="scope"> {{ 零件名称[scope.$index] }}</template>
</el-table-column>
<el-table-column
align="center"
prop="address"
label="数量">
<template slot-scope="scope">{{ 投产数量[scope.$index] }}</template>
</el-table-column>
<el-table-column label="零件加工计划进度(工艺名称,计划完成时间,实际完成时间,员工名称)" >
<el-table-column label="[1]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][0]">
<h4>{{ process[scope.$index][0] }}</h4><h4>{{ planDate[scope.$index][0] }} </h4><h4> {{ realDate[scope.$index][0] }}</h4><h4> {{ worker[scope.$index][0] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[2]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][1]">
<h4>{{ process[scope.$index][1] }}</h4><h4>{{ planDate[scope.$index][1] }} </h4><h4> {{ realDate[scope.$index][1] }}</h4><h4> {{ worker[scope.$index][1] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[3]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][2]">
<h4>{{ process[scope.$index][2] }}</h4><h4>{{ planDate[scope.$index][2] }} </h4><h4> {{ realDate[scope.$index][2] }}</h4><h4> {{ worker[scope.$index][2] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[4]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][3]">
<h4>{{ process[scope.$index][3] }}</h4><h4>{{ planDate[scope.$index][3] }} </h4><h4> {{ realDate[scope.$index][3] }}</h4><h4> {{ worker[scope.$index][3] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[5]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][4]">
<h4>{{ process[scope.$index][4] }}</h4><h4>{{ planDate[scope.$index][4] }} </h4><h4> {{ realDate[scope.$index][4] }}</h4><h4> {{ worker[scope.$index][4] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[6]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][5]">
<h4>{{ process[scope.$index][5] }}</h4><h4>{{ planDate[scope.$index][5] }} </h4><h4> {{ realDate[scope.$index][5] }}</h4><h4> {{ worker[scope.$index][5] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[7]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][6]">
<h4>{{ process[scope.$index][6] }}</h4><h4>{{ planDate[scope.$index][6] }} </h4><h4> {{ realDate[scope.$index][6] }}</h4><h4> {{ worker[scope.$index][6] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[8]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][7]">
<h4>{{ process[scope.$index][7] }}</h4><h4>{{ planDate[scope.$index][7] }} </h4><h4> {{ realDate[scope.$index][7] }}</h4><h4> {{ worker[scope.$index][7] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[9]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][8]">
<h4>{{ process[scope.$index][8] }}</h4><h4>{{ planDate[scope.$index][8] }} </h4><h4> {{ realDate[scope.$index][8] }}</h4><h4> {{ worker[scope.$index][8] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[10]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][9]">
<h4>{{ process[scope.$index][9] }}</h4><h4>{{ planDate[scope.$index][9] }} </h4><h4> {{ realDate[scope.$index][9] }}</h4><h4> {{ worker[scope.$index][9] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[11]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][10]">
<h4>{{ process[scope.$index][10] }}</h4><h4>{{ planDate[scope.$index][10] }} </h4><h4> {{ realDate[scope.$index][10] }}</h4><h4> {{ worker[scope.$index][10] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[12]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][11]">
<h4>{{ process[scope.$index][11] }}</h4><h4>{{ planDate[scope.$index][11] }} </h4><h4> {{ realDate[scope.$index][11] }}</h4><h4> {{ worker[scope.$index][11] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[13]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][12]">
<h4>{{ process[scope.$index][12] }}</h4><h4>{{ planDate[scope.$index][12] }} </h4><h4> {{ realDate[scope.$index][12] }}</h4><h4> {{ worker[scope.$index][12] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[14]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][13]">
<h4>{{ process[scope.$index][13] }}</h4><h4>{{ planDate[scope.$index][13] }} </h4><h4> {{ realDate[scope.$index][13] }}</h4><h4> {{ worker[scope.$index][13] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[15]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][14]">
<h4>{{ process[scope.$index][14] }}</h4><h4>{{ planDate[scope.$index][14] }} </h4><h4> {{ realDate[scope.$index][14] }}</h4><h4> {{ worker[scope.$index][14] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[16]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][15]">
<h4>{{ process[scope.$index][15] }}</h4><h4>{{ planDate[scope.$index][15] }} </h4><h4> {{ realDate[scope.$index][15] }}</h4><h4> {{ worker[scope.$index][15] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[17]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][16]">
<h4>{{ process[scope.$index][16] }}</h4><h4>{{ planDate[scope.$index][16] }} </h4><h4> {{ realDate[scope.$index][16] }}</h4><h4> {{ worker[scope.$index][16] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[18]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][17]">
<h4>{{ process[scope.$index][17] }}</h4><h4>{{ planDate[scope.$index][17] }} </h4><h4> {{ realDate[scope.$index][17] }}</h4><h4> {{ worker[scope.$index][17] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[19]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][18]">
<h4>{{ process[scope.$index][18] }}</h4><h4>{{ planDate[scope.$index][18] }} </h4><h4> {{ realDate[scope.$index][18] }}</h4><h4> {{ worker[scope.$index][18] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[20]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][19]">
<h4>{{ process[scope.$index][19] }}</h4><h4>{{ planDate[scope.$index][19] }} </h4><h4> {{ realDate[scope.$index][19] }}</h4><h4> {{ worker[scope.$index][19] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[21]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][20]">
<h4>{{ process[scope.$index][20] }}</h4><h4>{{ planDate[scope.$index][20] }} </h4><h4> {{ realDate[scope.$index][20] }}</h4><h4> {{ worker[scope.$index][20] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[22]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][21]">
<h4>{{ process[scope.$index][21] }}</h4><h4>{{ planDate[scope.$index][21] }} </h4><h4> {{ realDate[scope.$index][21] }}</h4><h4> {{ worker[scope.$index][21] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[23]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][22]">
<h4>{{ process[scope.$index][22] }}</h4><h4>{{ planDate[scope.$index][22] }} </h4><h4> {{ realDate[scope.$index][22] }}</h4><h4> {{ worker[scope.$index][22] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[24]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][23]">
<h4>{{ process[scope.$index][23] }}</h4><h4>{{ planDate[scope.$index][23] }} </h4><h4> {{ realDate[scope.$index][23] }}</h4><h4> {{ worker[scope.$index][23] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[25]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][24]">
<h4>{{ process[scope.$index][24] }}</h4><h4>{{ planDate[scope.$index][24] }} </h4><h4> {{ realDate[scope.$index][24] }}</h4><h4> {{ worker[scope.$index][24] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[26]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][25]">
<h4>{{ process[scope.$index][25] }}</h4><h4>{{ planDate[scope.$index][25] }} </h4><h4> {{ realDate[scope.$index][25] }}</h4><h4> {{ worker[scope.$index][25] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[27]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][26]">
<h4>{{ process[scope.$index][26] }}</h4><h4>{{ planDate[scope.$index][26] }} </h4><h4> {{ realDate[scope.$index][26] }}</h4><h4> {{ worker[scope.$index][26] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[28]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][27]">
<h4>{{ process[scope.$index][27] }}</h4><h4>{{ planDate[scope.$index][27] }} </h4><h4> {{ realDate[scope.$index][27] }}</h4><h4> {{ worker[scope.$index][27] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[29]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][28]">
<h4>{{ process[scope.$index][28] }}</h4><h4>{{ planDate[scope.$index][28] }} </h4><h4> {{ realDate[scope.$index][28] }}</h4><h4> {{ worker[scope.$index][28] }}</h4>
</div>
</template>
</el-table-column>
<el-table-column label="[30]" align="center" width="120px">
<template slot-scope="scope">
<div :class="colorCode[scope.$index][29]">
<h4>{{ process[scope.$index][29] }}</h4><h4>{{ planDate[scope.$index][29] }} </h4><h4> {{ realDate[scope.$index][29] }}</h4><h4> {{ worker[scope.$index][29] }}</h4>
</div>
</template>
</el-table-column>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</el-card>
</div>
</template>
<script>
import { getNames, getMachines, getGroups, getTable, getTable2, getExport } from '@/api/ManufacturingCenter/ProcessingStatus'
export default {
data() {
return {
startTime: '',
endTime: '',
startTime_check: 0,
endTime_check: 0,
liushuihao: '',
// value2: null,
radioList: '0',
length: 0,
listLoading1: false,
tableData1: [],
project: '',
projects: [],
Machine: '',
Machines: [],
Group: '',
Groups: [],
part: '',
parts: [{
value: 0,
label: '全部零件'
}, {
value: 1,
label: '自家生产'
}, {
value: 2,
label: '外协生产'
}],
Speed: '',
Speeds: [{
value: 5,
label: '全部'
}, {
value: 1,
label: '拖期'
}, {
value: 2,
label: '即将拖期'
}, {
value: 3,
label: '如期'
}, {
value: 4,
label: '工序外协'
}],
number: '',
checkbox_project: false,
checkbox_Machine: false,
checkbox_Group: false,
checkbox_part: false,
checkbox_number: false,
零件图号: [],
零件名称: [],
投产数量: [],
result: [],
process: [[]],
planDate: [[]],
worker: [[]],
colorCode: [[]],
realDate: [[]],
// waixie: [[]],
total: 0, // 总条数
pageSize: 10,
pageCurrent: 1
}
},
created() {
this.getMachine()
this.getTableData()
},
methods: {
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
},
exportExcel() {
if (!this.Machine) {
this.$message.warning('请选择机床')
return
}
getExport(this.Machine).then(res => {
console.log(res.data)
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['机床', '组号', '图号及规格', '制品名称', '计划数', '材料', '当前工序名']
const filterVal = ['机床图号', '组号', '零件图号_零件工艺计划', '零件名称', '批次数量', '材料', '工艺名称']
const list = res.data
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '加工进度表',
autoWidth: true,
bookType: 'xlsx'
})
})
})
},
// 查询供应商名称
fetchData() {
this.projects = []
getNames().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.projects.push({
label: response.data[i].项目名称,
value: response.data[i].项目流水号
})
}
})
this.part = 1
},
getMachine() {
this.Machine = ''
this.Machines = []
this.Group = ''
this.Groups = []
getMachines().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Machines.push({
label: response.data[i].机床图号,
value: response.data[i].机床流水号,
value2: response.data[i].项目名称
})
}
})
},
getGroup() {
this.Group = ''
this.Groups = []
getGroups(this.Machine).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Groups.push({
label: response.data[i].组号,
value: response.data[i].组件流水号
})
}
})
},
// 按条件查询
getTableData() {
this.listLoading1 = true
this.checkbox_project = false
if (this.Machine === '') {
this.checkbox_Machine = false
} else {
this.checkbox_Machine = true
}
if (this.Group === '') {
this.checkbox_Group = false
} else {
this.checkbox_Group = true
}
if (this.part === '') {
this.checkbox_part = false
} else {
this.checkbox_part = true
}
if (this.number === '') {
this.checkbox_number = false
} else {
this.checkbox_number = true
}
if (this.startTime === '' || this.startTime === null) {
this.startTime_check = 0
} else {
this.startTime_check = 1
}
if (this.endTime === '' || this.endTime === null) {
this.endTime_check = 0
} else {
this.endTime_check = 1
}
this.num111 = []
this.tableData1 = []
this.零件图号 = []
this.零件名称 = []
this.投产数量 = []
this.result = []
this.process = [[]]
this.planDate = [[]]
this.worker = [[]]
this.colorCode = [[]]
this.realDate = [[]]
this.length = 0
getTable(this.checkbox_project, this.project, this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.checkbox_number, this.number, 1, this.startTime_check, this.startTime, this.endTime_check, this.endTime, this.pageCurrent, this.pageSize).then(response => {
this.length = parseInt(response.data.total)
for (let i = 0; i < response.data.rows.length; i++) { // 声明二维数组
this.num111.push(response.data.rows[i].工艺计划流水号)
this.零件图号.push(response.data.rows[i].零件图号)
this.零件名称.push(response.data.rows[i].零件名称)
this.投产数量.push(response.data.rows[i].投产数量)
this.process[i] = []
this.planDate[i] = []
this.worker[i] = []
this.colorCode[i] = []
this.realDate[i] = []
this.result.push(response.data.rows[i])
}
if (this.零件图号.length !== 0) {
for (let i = 0; i < this.零件图号.length; i++) {
getTable2(this.num111[i]).then(response => {
for (let k = 0; k < response.data.length; k++) {
this.process[i][k] = response.data[k].工艺名称简称
this.planDate[i][k] = response.data[k].计划日期_短
this.realDate[i][k] = response.data[k].完成日期_短
if (response.data[k].工序间是否外协 === 2) {
response.data[k].员工姓名 = '外协'
}
if (response.data[k].员工姓名 === '超级管理员') {
response.data[k].员工姓名 = '无'
}
this.worker[i][k] = response.data[k].员工姓名
if (response.data[k].工序状态 === 5) { // 灰色是已经完成 未入库
this.colorCode[i][k] = 'grey'
} else {
this.colorCode[i][k] = response.data[k].进度颜色
}
if (response.data[k].工序间是否外协 === 2) {
this.colorCode[i][k] = 'lightblue'
}
}
}).then(() => {
this.tableData1.push(this.result[i])
this.listLoading1 = false
this.total = this.length
})
}
} else {
this.tableData1 = []
this.listLoading1 = false
this.total = 0
}
})
},
handleSizeChange(val) {
this.pageSize = val
this.getTableData()
},
handleCurrentChange(val) {
this.pageCurrent = val
this.getTableData()
}
}
}
</script>
<style scoped>
.el-form-item{
margin-bottom: 22px;
}
.el-card{
margin-bottom: 15px;
}
span{
margin: 10px 0 10px 10px;
}
.table h4{
border: 1px solid transparent;
margin: 0;
font-weight: normal;
width: 100px;
height: 24px;
}
.white{
background-color: ghostwhite;
border: 1px solid #1f2d3d;
}
.grey{
background-color: grey;
border: 1px solid #1f2d3d;
}
.red{
background-color: orangered;
border: 1px solid #1f2d3d;
}
.lightblue{
background-color: deepskyblue;
border: 1px solid #1f2d3d;
}
.yellow{
background-color: yellow;
border: 1px solid #1f2d3d;
}
.blank{
background-color: transparent;
border: 0px solid white;
}
.lightgreen{
background-color: lightgreen;
border: 1px solid #1f2d3d;
}
</style>