Files
JY1.0/src/views/ManufacturingCenter/ProjectPlanningQuery/index.vue
chenjianan c1aa1e758c style
2019-04-11 09:12:36 +08:00

596 lines
26 KiB
Vue

<template>
<div class="app-container bold-font">
<el-card>
<div slot="header">
<h3 style="display: inline-block;margin: 0">项目名称:</h3>
<el-select v-model="projectValue" placeholder="请选择项目名称" filterable size="small" @change="searchMachine">
<el-option
v-for="item in project"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<h3 style="display: inline-block;margin: 0 0 0 20px">机床图号:</h3>
<el-select v-model="machineValue" placeholder="请选择机床图号" filterable size="small">
<el-option
v-for="item in machine"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<!--<span>签订日期:</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="选择日期"/>-->
<!--<span>交货期:</span>-->
<!--<el-date-picker-->
<!--v-model="startTime1"-->
<!--value-format="yyyy-MM-dd"-->
<!--size="small"-->
<!--style="width: 160px"-->
<!--type="date"-->
<!--placeholder="选择日期"/>-->
<!--<span class="demonstration">~</span>-->
<!--<el-date-picker-->
<!--v-model="endTime1"-->
<!--value-format="yyyy-MM-dd"-->
<!--size="small"-->
<!--style="width: 160px"-->
<!--type="date"-->
<!--placeholder="选择日期"/>-->
<span>提前</span>
<el-input-number v-model="warningValue" :min="1" controls-position="right" size="small" style="width: 90px"/>
<span>天预警</span>
<el-button icon="el-icon-search" type="success" size="small" style="margin-left: 20px" @click="searchTable()">查询</el-button>
</div>
<sticky :z-index="10" style="height: 180px">
<div>
<h1 class="word" style="margin: 0">总计划</h1>
<el-table v-loading="loading" :data="tableData" height="120px" border element-loading-text="拼命加载中">
<el-table-column label="项目名称" align="center" min-width="120px">
<template slot-scope="scope">
{{ scope.row.项目名称 }}
</template>
</el-table-column>
<el-table-column label="机床型号" align="center" min-width="120px">
<template slot-scope="scope">
{{ scope.row.机床图号 }}
</template>
</el-table-column>
<el-table-column label="机床名称" align="center" min-width="220px">
<template slot-scope="scope">
{{ scope.row.机床名称 }}
</template>
</el-table-column>
<el-table-column label="客户名称" align="center" min-width="220px">
<template slot-scope="scope">
{{ scope.row.客户名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.合同签订日期)">{{ scope.row.合同签订日期 }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.发货节点)">{{ scope.row.发货节点 }}</span>
</template>
</el-table-column>
<el-table-column label="发图" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.机床设计完成时间)">{{ scope.row.机床设计完成时间.split(' ')[0] }}</span>
</template>
</el-table-column>
<el-table-column label="采购" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.采购完成时间)">{{ scope.row.采购完成时间.split(' ')[0] }}</span>
</template>
</el-table-column>
<el-table-column label="备料" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.备料完成时间)">{{ scope.row.备料完成时间.split(' ')[0] }}</span>
</template>
</el-table-column>
<el-table-column label="制造" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.机床生产完成时间)">{{ scope.row.机床生产完成时间.split(' ')[0] }}</span>
</template>
</el-table-column>
<el-table-column label="装配" align="center" min-width="120px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.机床装配完成时间)">{{ scope.row.机床装配完成时间.split(' ')[0] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</sticky>
<sticky :z-index="10" :sticky-top="180">
<h1 class="word">设计</h1>
</sticky>
<el-table v-loading="loading1" :data="tableData1" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
<el-table-column label="组号" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="任务名称" align="center" min-width="150px">
<template slot-scope="scope">
{{ scope.row.任务名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.任务开始时间 }}
</template>
</el-table-column>
<el-table-column label="计划完成时间" align="center" min-width="100px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
</template>
</el-table-column>
<el-table-column label="实际完成时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.实际完成时间 }}
</template>
</el-table-column>
<el-table-column label="工期" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.货期 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<sticky :z-index="11" :sticky-top="180">
<h1 class="word">采购</h1>
</sticky>
<el-table v-loading="loading1" :data="tableData2" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
<el-table-column label="组号" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="任务名称" align="center" min-width="150px">
<template slot-scope="scope">
{{ scope.row.任务名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.任务开始时间 }}
</template>
</el-table-column>
<el-table-column label="计划完成时间" align="center" min-width="100px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
</template>
</el-table-column>
<el-table-column label="实际完成时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.实际完成时间 }}
</template>
</el-table-column>
<el-table-column label="工期" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.货期 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<sticky :z-index="12" :sticky-top="180">
<h1 class="word">备料</h1>
</sticky>
<el-table v-loading="loading1" :data="tableData3" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
<el-table-column label="组号" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="任务名称" align="center" min-width="150px">
<template slot-scope="scope">
{{ scope.row.任务名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.任务开始时间 }}
</template>
</el-table-column>
<el-table-column label="计划完成时间" align="center" min-width="100px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
</template>
</el-table-column>
<el-table-column label="实际完成时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.实际完成时间 }}
</template>
</el-table-column>
<el-table-column label="工期" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.货期 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<sticky :z-index="13" :sticky-top="180">
<h1 class="word">制造</h1>
</sticky>
<el-table v-loading="loading1" :data="tableData4" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
<el-table-column label="组号" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="任务名称" align="center" min-width="150px">
<template slot-scope="scope">
{{ scope.row.任务名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.任务开始时间 }}
</template>
</el-table-column>
<el-table-column label="计划完成时间" align="center" min-width="100px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
</template>
</el-table-column>
<el-table-column label="实际完成时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.实际完成时间 }}
</template>
</el-table-column>
<el-table-column label="工期" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.货期 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<sticky :z-index="14" :sticky-top="180">
<h1 class="word">装配调试</h1>
</sticky>
<el-table v-loading="loading1" :data="tableData5" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
<el-table-column label="组号" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="任务名称" align="center" min-width="150px">
<template slot-scope="scope">
{{ scope.row.任务名称 }}
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.任务开始时间 }}
</template>
</el-table-column>
<el-table-column label="计划完成时间" align="center" min-width="100px">
<template slot-scope="scope">
<span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
</template>
</el-table-column>
<el-table-column label="实际完成时间" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.实际完成时间 }}
</template>
</el-table-column>
<el-table-column label="工期" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.货期 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100px">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import { initProject, initMachine, searchtable, searchtable2 } from '@/api/ManufacturingCenter/ProjectPlanningQuery'
import Sticky from '@/components/Sticky'
export default {
components: { Sticky },
data() {
return {
projectValue: '',
project: [],
machineValue: '',
machine: [],
loading: false,
loading1: false,
now: '',
arrival: [],
judge: [],
arrival1: [],
judge1: [],
arrival2: [],
judge2: [],
arrival3: [],
judge3: [],
arrival4: [],
judge4: [],
warningValue: '',
tableData: [], // 表格数据
tableData1: [], // 表格数据
tableData2: [], // 表格数据
tableData3: [], // 表格数据
tableData4: [], // 表格数据
tableData5: [] // 表格数据
}
},
created() {
this.fetchData()
},
methods: {
colorJudge(time1) {
console.log(new Date(time1) - this.now)
if ((new Date(time1) - this.now) > 0 && (new Date(time1) - this.now) < (86400000 * this.warningValue)) {
return 'orange'
} else if ((new Date(time1) - this.now) < 0) {
return 'red'
} else {
return 'black'
}
},
fetchData() {
this.getSelect(initProject, ['项目名称', '项目流水号'], 'project')
},
searchMachine() {
this.machineValue = ''
this.machine = []
initMachine(this.projectValue).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.machine.push({
label: response.data[i].机床图号,
value: response.data[i].机床流水号
})
}
})
},
// 查询表格数据
searchTable() {
if (this.projectValue !== '') {
if (this.machineValue !== '') {
this.loading = true
this.tableData = []
this.tableData1 = []
this.tableData2 = []
this.tableData3 = []
this.tableData4 = []
this.tableData5 = []
this.now = new Date()
searchtable(this.projectValue, this.machineValue).then(response => {
for (let i = 0; i < response.data.length; i++) {
if (response.data[i].合同签订日期 !== '' && response.data[i].合同签订日期 !== null) {
response.data[i].合同签订日期 = response.data[i].合同签订日期.split(' ')[0]
}
if (response.data[i].发货节点 !== '' && response.data[i].发货节点 !== null) {
response.data[i].发货节点 = response.data[i].发货节点.split(' ')[0]
}
}
this.loading = false
console.log(response.data)
this.tableData = response.data
}).then(() => {
searchtable2(this.machineValue, 1).then(response => {
for (let i = 0; i < response.data.length; i++) {
// this.arrival.push(new Date(response.data[i].计划完成时间))
// if ((this.arrival[i] - this.now) > 0 && (this.arrival[i] - this.now) < (86400000 * this.warningValue)) {
// this.judge[i] = 1 // 即将拖期
// } else if ((this.arrival[i] - this.now) < 0) {
// this.judge[i] = 2 // 已拖期
// } else if ((this.arrival[i] - this.now) > (86400000 * this.warningValue)) {
// this.judge[i] = 3 // 进度正常
// }
if (response.data[i].任务开始时间 !== '' && response.data[i].任务开始时间 !== null) {
response.data[i].任务开始时间 = response.data[i].任务开始时间.split(' ')[0]
}
if (response.data[i].实际完成时间 !== '' && response.data[i].实际完成时间 !== null) {
response.data[i].实际完成时间 = response.data[i].实际完成时间.split(' ')[0]
}
if (response.data[i].计划完成时间 !== '' && response.data[i].计划完成时间 !== null) {
response.data[i].计划完成时间 = response.data[i].计划完成时间.split(' ')[0]
}
}
this.loading1 = false
console.log(response.data, 2)
this.tableData1 = response.data
})
searchtable2(this.machineValue, 2).then(response => {
for (let i = 0; i < response.data.length; i++) {
// this.arrival1.push(new Date(response.data[i].计划完成时间))
// if ((this.arrival1[i] - this.now) > 0 && (this.arrival1[i] - this.now) < (86400000 * this.warningValue)) {
// this.judge1[i] = 1 // 即将拖期
// } else if ((this.arrival1[i] - this.now) < 0) {
// this.judge1[i] = 2 // 已拖期
// } else if ((this.arrival1[i] - this.now) > (86400000 * this.warningValue)) {
// this.judge1[i] = 3 // 进度正常
// }
if (response.data[i].任务开始时间 !== '' && response.data[i].任务开始时间 !== null) {
response.data[i].任务开始时间 = response.data[i].任务开始时间.split(' ')[0]
}
if (response.data[i].实际完成时间 !== '' && response.data[i].实际完成时间 !== null) {
response.data[i].实际完成时间 = response.data[i].实际完成时间.split(' ')[0]
}
if (response.data[i].计划完成时间 !== '' && response.data[i].计划完成时间 !== null) {
response.data[i].计划完成时间 = response.data[i].计划完成时间.split(' ')[0]
}
}
this.loading1 = false
console.log(response.data, 3)
this.tableData2 = response.data
})
searchtable2(this.machineValue, 3).then(response => {
for (let i = 0; i < response.data.length; i++) {
// this.arrival2.push(new Date(response.data[i].计划完成时间))
// if ((this.arrival2[i] - this.now) > 0 && (this.arrival2[i] - this.now) < (86400000 * this.warningValue)) {
// this.judge2[i] = 1 // 即将拖期
// } else if ((this.arrival2[i] - this.now) < 0) {
// this.judge2[i] = 2 // 已拖期
// } else if ((this.arrival[i] - this.now) > (86400000 * this.warningValue)) {
// this.judge2[i] = 3 // 进度正常
// }
if (response.data[i].任务开始时间 !== '' && response.data[i].任务开始时间 !== null) {
response.data[i].任务开始时间 = response.data[i].任务开始时间.split(' ')[0]
}
if (response.data[i].实际完成时间 !== '' && response.data[i].实际完成时间 !== null) {
response.data[i].实际完成时间 = response.data[i].实际完成时间.split(' ')[0]
}
if (response.data[i].计划完成时间 !== '' && response.data[i].计划完成时间 !== null) {
response.data[i].计划完成时间 = response.data[i].计划完成时间.split(' ')[0]
}
}
this.loading1 = false
console.log(response.data, 4)
this.tableData3 = response.data
})
searchtable2(this.machineValue, 4).then(response => {
for (let i = 0; i < response.data.length; i++) {
// this.arrival3.push(new Date(response.data[i].计划完成时间))
// if ((this.arrival3[i] - this.now) > 0 && (this.arrival3[i] - this.now) < (86400000 * this.warningValue)) {
// this.judge3[i] = 1 // 即将拖期
// } else if ((this.arrival3[i] - this.now) < 0) {
// this.judge3[i] = 2 // 已拖期
// } else if ((this.arrival3[i] - this.now) > (86400000 * this.warningValue)) {
// this.judge3[i] = 3 // 进度正常
// }
if (response.data[i].任务开始时间 !== '' && response.data[i].任务开始时间 !== null) {
response.data[i].任务开始时间 = response.data[i].任务开始时间.split(' ')[0]
}
if (response.data[i].实际完成时间 !== '' && response.data[i].实际完成时间 !== null) {
response.data[i].实际完成时间 = response.data[i].实际完成时间.split(' ')[0]
}
if (response.data[i].计划完成时间 !== '' && response.data[i].计划完成时间 !== null) {
response.data[i].计划完成时间 = response.data[i].计划完成时间.split(' ')[0]
}
}
this.loading1 = false
console.log(response.data, 5)
this.tableData4 = response.data
})
searchtable2(this.machineValue, 5).then(response => {
for (let i = 0; i < response.data.length; i++) {
// this.arrival4.push(new Date(response.data[i].计划完成时间))
// if ((this.arrival4[i] - this.now) > 0 && (this.arrival4[i] - this.now) < (86400000 * this.warningValue)) {
// this.judge4[i] = 1 // 即将拖期
// } else if ((this.arrival3[i] - this.now) < 0) {
// this.judge4[i] = 2 // 已拖期
// } else if ((this.arrival3[i] - this.now) > (86400000 * this.warningValue)) {
// this.judge4[i] = 3 // 进度正常
// }
if (response.data[i].任务开始时间 !== '' && response.data[i].任务开始时间 !== null) {
response.data[i].任务开始时间 = response.data[i].任务开始时间.split(' ')[0]
}
if (response.data[i].实际完成时间 !== '' && response.data[i].实际完成时间 !== null) {
response.data[i].实际完成时间 = response.data[i].实际完成时间.split(' ')[0]
}
if (response.data[i].计划完成时间 !== '' && response.data[i].计划完成时间 !== null) {
response.data[i].计划完成时间 = response.data[i].计划完成时间.split(' ')[0]
}
}
this.loading1 = false
console.log(response.data, 6)
this.tableData5 = response.data
})
})
} else {
this.$message.warning('请选择机床')
}
} else {
this.$message.warning('请选择项目')
}
}
}
}
</script>
<style scoped>
.el-pagination{
background-color: white;
}
.el-card {
border-color: rgb(0, 12, 57);
color: white;
margin-bottom: 5px;
background-color: rgb(0, 12, 57);
}
.word{
border: 1px solid #ebeef5;
margin-top: 0;
line-height: 60px;
/*height: 50px;*/
background-color: rgb(0, 12, 57);
}
span{
margin: 10px 0 10px 10px;
}
.orange{
color: orange;
}
.red{
color: red;
}
.black{
color: white;
}
</style>
<style>
.bold-font .el-table{
font: bold 18px arial!important;
margin: 0 0 10px 0;
color: white;
}
.bold-font .el-table td{
background-color: rgb(0, 12, 57)!important;
}
.bold-font .el-table th{
color: white;
background-color: rgb(0, 12, 57)!important;
}
.bold-font .el-table div{
color: white;
background-color: rgb(0, 12, 57)!important;
}
.bold-font{
color: ghostwhite;
font: bold 22px arial!important;
padding: 5px;
}
</style>