<template>
|
<el-container style="height: 100%;padding: 10px;">
|
<el-header class="gantt-toolbar">
|
<div class="search">
|
<el-date-picker
|
v-model="scheduleDate"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
@change="getScheduleDate"
|
>
|
</el-date-picker>
|
</div>
|
|
<div class="status">
|
<div class="itemClass">
|
<div class="circle scene"></div>
|
<label>草稿</label>
|
</div>
|
<div class="itemClass">
|
<div class="circle pending"></div>
|
<label>等待</label>
|
</div>
|
<div class="itemClass">
|
<div class="circle inProgress"></div>
|
<label>进行中</label>
|
</div>
|
<div class="itemClass">
|
<div class="circle interrupted"></div>
|
<label>已暂停</label>
|
</div>
|
<div class="itemClass">
|
<div class="circle completed"></div>
|
<label>已完成</label>
|
</div>
|
</div>
|
</el-header>
|
<el-main>
|
<gantt
|
ref="gantt"
|
:tasks="tasks"
|
:filterParam="filterParam"
|
@task-selected="selectTask"
|
/>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
import Gantt from './gantt.vue'
|
import { fetchScheduleList } from '@/api/plan/schedule'
|
export default {
|
components: {
|
Gantt
|
},
|
data() {
|
return {
|
tasks: {
|
data: [],
|
links: []
|
},
|
selectedTask: null,
|
filterParam: {},
|
scheduleDate: []
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
// 页面初始化
|
init() {
|
this.initScheduleDate()
|
this.initData()
|
},
|
// 初始化排产日期
|
initScheduleDate() {
|
var dateTime = new Date()
|
var currDate = this.formatDate(dateTime, 'date')
|
var preDateTime = dateTime.setDate(dateTime.getDate() - 6)
|
preDateTime = new Date(preDateTime)
|
var preDate = this.formatDate(preDateTime, 'date')
|
var newDateTime = new Date()
|
var nextDateTime = newDateTime.setDate(newDateTime.getDate() + 7)
|
nextDateTime = new Date(nextDateTime)
|
var nextDate = this.formatDate(nextDateTime, 'date')
|
this.scheduleDate.push(preDate)
|
this.scheduleDate.push(nextDate)
|
},
|
// 格式化日期时间
|
formatDate(date, type) {
|
var date = new Date(date)
|
var YY = date.getFullYear() + '-'
|
var MM =
|
(date.getMonth() + 1 < 10
|
? '0' + (date.getMonth() + 1)
|
: date.getMonth() + 1) + '-'
|
var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
var hh =
|
(date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
|
var mm =
|
(date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
|
':'
|
var ss =
|
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
if (type == 'date') {
|
return YY + MM + DD
|
} else {
|
return YY + MM + DD + ' ' + hh + mm + ss
|
}
|
},
|
// 初始化数据
|
initData() {
|
fetchScheduleList(
|
Object.assign({
|
viewStart: this.scheduleDate[0],
|
viewEnd: this.scheduleDate[1]
|
})
|
)
|
.then((response) => {
|
if (response.data.code == 0) {
|
const data = response.data.data
|
if (data != null) {
|
if (data.resources != null && data.resources.length > 0) {
|
const taskArr = [
|
...this.buildResource(data.resources),
|
...this.buildTask(data.operationTasks),
|
...this.buildSceneTask(data.sceneTasks)
|
]
|
this.tasks.data = taskArr.filter((item) => item)
|
} else {
|
this.tasks.data = []
|
}
|
this.$refs.gantt.clearAll()
|
this.$refs.gantt.parseData()
|
}
|
}
|
})
|
.catch((error) => {})
|
},
|
|
buildResource(resources) {
|
if (!resources) {
|
return []
|
}
|
const taskArr = []
|
for (let i = 0; i < resources.length; i++) {
|
const task = {}
|
task.id = 'parent-' + resources[i].id
|
task.text = resources[i].resName
|
task.machineLoadList = resources[i].machineLoad
|
task.workCenter = resources[i].workCenter
|
task.start_date = ''
|
task.end_date = ''
|
task.type = 'project'
|
task.render = 'split'
|
task.unscheduled = true
|
task.progress = 1
|
taskArr.push(task)
|
}
|
return taskArr
|
},
|
|
buildTask(operationTasks) {
|
if (!operationTasks) {
|
return []
|
}
|
const taskArr = []
|
for (let j = 0; j < operationTasks.length; j++) {
|
const task = {}
|
task.id = 'operationTask-' + operationTasks[j].id
|
task.text = operationTasks[j].text
|
task.workCenter = operationTasks[j].workCenter
|
task.customerOrderNo = operationTasks[j].customerOrderNo
|
task.mpsNo = operationTasks[j].mpsNo
|
task.start_date = operationTasks[j].start_date
|
task.end_date = operationTasks[j].end_date
|
task.type = 'task'
|
task.progress = 1
|
task.parent = 'parent-' + operationTasks[j].parent
|
task.state = operationTasks[j].state
|
taskArr.push(task)
|
}
|
return taskArr
|
},
|
|
buildSceneTask(sceneTasks) {
|
if (!sceneTasks) {
|
return []
|
}
|
const taskArr = []
|
for (let j = 0; j < sceneTasks.length; j++) {
|
const task = {}
|
task.id = 'sceneTask-' + sceneTasks[j].id
|
task.text = sceneTasks[j].text
|
task.start_date = sceneTasks[j].start_date
|
task.end_date = sceneTasks[j].end_date
|
task.type = 'task'
|
task.progress = 1
|
task.parent = 'parent-' + sceneTasks[j].parent
|
task.state = sceneTasks[j].state
|
taskArr.push(task)
|
}
|
return taskArr
|
},
|
// 选择工单后，触发该方法
|
selectTask(task) {
|
this.selectedTask = task
|
},
|
// 根据日期区间，加载出工单信息
|
getScheduleDate() {
|
this.initData()
|
}
|
}
|
}
|
</script>
|
<style>
|
.scene {
|
background-color: #999d9c;
|
border-color: #999d9c;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.gantt-toolbar {
|
background-color: #fff !important;
|
padding: 10px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
color: #333;
|
.search {
|
width: 60%;
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.status {
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
label {
|
font-size: 12px;
|
font-weight: 500;
|
padding-top: 4px;
|
color: #333;
|
}
|
.itemClass {
|
width: 45px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.circle {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
}
|
}
|
}
|
}
|
</style>
|
