<template>
|
<div class="resizeWrap">
|
<div class="top">
|
<span class="time">{{ time }}</span>
|
</div>
|
<div class="content">
|
<div class="l">
|
<div class="listWrap" ref="listWrap">
|
<div
|
v-for="(x, i) in customerOrderList"
|
:class="['listItem', i == currentIndex ? 'active' : '']"
|
:key="i"
|
@click="getCurrent(i)"
|
ref="listItem"
|
>
|
订单号：{{ x.customerOrderNo }}/{{ x.otcLineNo }}
|
</div>
|
</div>
|
<!-- <el-pagination
|
:current-page="pagination.currentPage"
|
@current-change="handlesCurrentChange"
|
layout="prev, pager, next"
|
:total="pagination.total"
|
small
|
/> -->
|
</div>
|
<div class="m" />
|
<div class="r">
|
<div class="head">
|
<div class="cell" style="flex:1.5">
|
<div>客户名称</div>
|
<div>{{ currentOrder.customerName }}</div>
|
</div>
|
<div class="cell" style="flex:1.4">
|
<div>工程名称</div>
|
<div>{{ currentOrder.entityName }}</div>
|
</div>
|
<div class="cell" style="flex:1.1">
|
<div>规格型号</div>
|
<div>{{ currentOrder.customerPartSpec }}</div>
|
</div>
|
<div class="cell" style="flex:0.5">
|
<div>待生产数量</div>
|
<div>{{ currentOrder.otcQuantity }}{{ currentOrder.otcUnit }}</div>
|
</div>
|
<div class="cell" style="flex:0.5">
|
<div>期望交货时间</div>
|
<div>
|
{{
|
currentOrder.wantedDeliveryDate &&
|
dateFormat(
|
new Date(currentOrder.wantedDeliveryDate),
|
'yyyy-MM-dd'
|
)
|
}}
|
</div>
|
</div>
|
<div class="cell" style="flex:0.5">
|
<div>计划交货时间</div>
|
<div>
|
{{
|
currentOrder.plannedDeliveryDate &&
|
dateFormat(
|
new Date(currentOrder.plannedDeliveryDate),
|
'yyyy-MM-dd'
|
)
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="title">
|
工艺路线
|
<div class="r1">计划时间</div>
|
<div class="r2">实际时间</div>
|
</div>
|
<div
|
class="gantt"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.2)"
|
>
|
<gantt ref="gantt" :tasks="tasks" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { dateFormat } from '@/util/date'
|
import { fetchListCustomerOrder } from '@/api/plan/customerorder'
|
import { getGanttByCustomerOrderId } from '@/api/plan/operationtask'
|
import Gantt from './gantt.vue'
|
export default {
|
components: {
|
Gantt
|
},
|
data() {
|
return {
|
dateFormat,
|
time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm'),
|
pagination: {
|
currentPage: 1,
|
size: 9999,
|
total: 0
|
},
|
customerOrderList: [],
|
currentIndex: -1,
|
tasks: {
|
data: []
|
},
|
loading: true
|
}
|
},
|
computed: {
|
currentOrder() {
|
return this.customerOrderList[this.currentIndex] || {}
|
}
|
},
|
created() {
|
setInterval((e) => {
|
this.time = dateFormat(new Date(), 'yyyy-MM-dd hh:mm')
|
}, 10000)
|
setInterval((e) => {
|
let i = this.currentIndex + 1
|
if (i == this.customerOrderList.length) {
|
i = 0
|
}
|
this.getCurrent(i)
|
const st = this.$refs.listWrap.scrollTop
|
const ot = this.$refs.listItem[i].offsetTop - 104
|
let diff
|
if (ot < st) {
|
diff = st - ot
|
this.$refs.listWrap.scrollTo({
|
top: st - diff,
|
behavior: 'smooth'
|
})
|
}
|
if (ot > st + 910) {
|
diff = ot - 910 - st
|
this.$refs.listWrap.scrollTo({
|
top: st + diff + 910,
|
behavior: 'smooth'
|
})
|
}
|
}, 30000)
|
},
|
mounted() {
|
this.handleWindowResize()
|
window.addEventListener('resize', this.handleWindowResize)
|
this.init()
|
},
|
methods: {
|
handleWindowResize() {
|
const $m = $(window)
|
const $e = $('.resizeWrap')
|
var w = $m.width() / $e.width()
|
var h = $m.outerHeight() / $e.height()
|
$e.css({
|
transform: 'scale(' + w + ',' + h + ')',
|
'transform-origin': '0 0'
|
})
|
},
|
init() {
|
this.pagination.currentPage = 1
|
this.getList()
|
},
|
handlesCurrentChange(val) {
|
this.pagination.currentPage = val
|
this.getList()
|
},
|
getList() {
|
fetchListCustomerOrder(
|
{
|
current: this.pagination.currentPage,
|
size: this.pagination.size
|
},
|
1
|
).then((res) => {
|
const d = res.data.data
|
this.pagination.total = d.total
|
d.records.forEach((e) => (e.active = false))
|
this.customerOrderList = d.records
|
this.getCurrent(0)
|
})
|
},
|
getCurrent(index) {
|
if (this.currentIndex === index) {
|
return
|
}
|
this.currentIndex = index
|
this.loading = true
|
getGanttByCustomerOrderId({
|
customerOrderId: this.currentOrder.id
|
})
|
.then((res) => {
|
const list = res.data.data
|
this.tasks.data = []
|
list.forEach((e) => {
|
this.tasks.data.push(
|
Object.assign(JSON.parse(JSON.stringify(e)), {
|
id: 'parent-' + e.id,
|
render: 'split'
|
})
|
)
|
this.tasks.data.push(
|
Object.assign(JSON.parse(JSON.stringify(e)), {
|
id: 'child-planned-' + e.id,
|
parent: 'parent-' + e.id,
|
text: `计划【${e.plannedQuantity}${e.unit}】`,
|
start_date: e.plannedStartDate,
|
end_date: e.plannedFinishDate,
|
color: '#14a9d7'
|
})
|
)
|
let endDate = e.actualFinishDate
|
if (!e.actualFinishDate) {
|
const s = Date.parse(e.actualStartDate)
|
const duration =
|
Date.parse(e.plannedFinishDate) - Date.parse(e.plannedStartDate)
|
endDate = dateFormat(new Date(s + duration))
|
}
|
this.tasks.data.push(
|
Object.assign(JSON.parse(JSON.stringify(e)), {
|
id: 'child-actual-' + e.id,
|
parent: 'parent-' + e.id,
|
text: `${e.ratio}%【${e.completedQuantity}${e.unit}】`,
|
color: '#0B261A',
|
start_date: e.actualStartDate,
|
end_date: endDate,
|
progress: e.ratio / 100
|
})
|
)
|
})
|
this.$refs.gantt.clearAll()
|
this.$refs.gantt.parseData()
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
}
|
},
|
destroyed() {
|
clearInterval()
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.resizeWrap {
|
position: relative;
|
width: 1920px;
|
height: 1080px;
|
background: url('~@/images/ScheduleData/bg.png');
|
background-size: 100% 100%;
|
color: #a5d7fa;
|
}
|
@font-face {
|
font-family: 'DS-Digital';
|
src: url('./DS-DIGI-1.ttf') format('truetype');
|
}
|
.top {
|
width: 1887px;
|
height: 69px;
|
background: url('~@/images/ScheduleData/top.png') 100% 100%;
|
margin: 0 auto;
|
position: relative;
|
.time {
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
color: #d4d6da;
|
font-size: 22px;
|
font-family: DS-Digital;
|
}
|
}
|
.content {
|
display: flex;
|
padding: 30px 20px 30px 40px;
|
height: calc(100% - 69px - 60px);
|
.l {
|
width: 325px;
|
padding-top: 5px;
|
.listWrap {
|
height: 950px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
.listItem {
|
background: url('~@/images/ScheduleData/img_unchoose.png') 100% 100%
|
no-repeat;
|
width: 312px;
|
height: 40px;
|
line-height: 40px;
|
padding-left: 45px;
|
box-sizing: border-box;
|
color: #747781;
|
cursor: pointer;
|
& + .listItem {
|
margin-top: 30px;
|
}
|
&.active,
|
&:hover {
|
background-image: url('~@/images/ScheduleData/img_choose.png');
|
color: #fdfefe;
|
}
|
}
|
}
|
.el-pagination {
|
margin-top: 25px;
|
width: 312px;
|
text-align: center;
|
/deep/ {
|
.btn-prev,
|
li,
|
.btn-next {
|
background: rgba(30, 143, 162, 0.3) !important;
|
color: white;
|
padding: 5px;
|
height: 30px;
|
min-width: 26px;
|
&.active {
|
background: rgba(30, 143, 162, 0.6) !important;
|
}
|
}
|
}
|
}
|
}
|
.m {
|
width: 205px;
|
background: url('~@/images/ScheduleData/img_right.png') no-repeat center;
|
}
|
.r {
|
min-width: 100px;
|
margin-left: -10px;
|
flex: 1;
|
border: 1px solid #173754;
|
background: rgba(30, 143, 162, 0.15);
|
display: flex;
|
flex-direction: column;
|
.head {
|
border-top: 3px solid #2b9fc3;
|
display: flex;
|
padding: 20px 20px 0;
|
height: 75px;
|
font-size: 15px;
|
.cell {
|
flex: 1;
|
min-width: 100px;
|
+ .cell {
|
margin-left: 10px;
|
}
|
div {
|
&:first-child {
|
color: white;
|
}
|
&:last-child {
|
color: #8fcadf;
|
padding-top: 5px;
|
}
|
}
|
}
|
}
|
.title {
|
background: rgba(30, 143, 162, 0.3);
|
color: white;
|
position: relative;
|
height: 45px;
|
line-height: 45px;
|
text-align: center;
|
.r1,
|
.r2 {
|
position: absolute;
|
top: 0px;
|
font-size: 14px;
|
&::after {
|
position: absolute;
|
content: '';
|
left: -32px;
|
width: 25px;
|
height: 8px;
|
border-radius: 5px;
|
top: 19px;
|
}
|
}
|
.r1 {
|
color: #14a9d7;
|
right: 140px;
|
&::after {
|
background: #14a9d7;
|
}
|
}
|
.r2 {
|
color: #03a24d;
|
right: 20px;
|
&::after {
|
background: #03a24d;
|
}
|
}
|
}
|
.gantt {
|
flex: 1;
|
min-height: 100px;
|
}
|
}
|
}
|
</style>
|
