<template>
|
<div style="height:360px">
|
<el-container style="height: 100%;">
|
<gantt ref="gantt" :tasks="tasks" :filterParam="filterParam"></gantt>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import Gantt from './gantt.vue'
|
import { fetchScheduleList } from '@/api/plan/schedule'
|
export default {
|
props: {
|
dataForm: {
|
type: Object,
|
default: {}
|
}
|
},
|
components: {
|
Gantt
|
},
|
data() {
|
return {
|
tasks: {
|
data: [],
|
links: []
|
},
|
selectedTask: null,
|
workCenter: '',
|
showOrder: false,
|
deptId: 0,
|
valState: {},
|
defaultProps: {
|
label: 'name',
|
value: 'id'
|
},
|
filterParam: {},
|
dialogFormVisible: false,
|
form: {
|
id: null,
|
taskName: '',
|
dateTime: [],
|
resourceId: null,
|
state: ''
|
},
|
formLabelWidth: '120px',
|
resources: [],
|
scheduleDate: []
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
// 页面初始化
|
init(row, val) {
|
this.initScheduleDate()
|
this.workCenter = row
|
if (val === 1) {
|
this.valState = {}
|
}
|
this.$nextTick(() => {
|
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
|
}
|
},
|
show(row) {
|
this.valState = row
|
this.initData()
|
},
|
// 初始化数据
|
initData() {
|
if (this.workCenter) {
|
this.workCenterList = Object.assign({
|
viewStart: this.scheduleDate[0],
|
viewEnd: this.scheduleDate[1],
|
workCenter: this.workCenter
|
})
|
} else {
|
this.workCenterList = Object.assign({
|
viewStart: this.scheduleDate[0],
|
viewEnd: this.scheduleDate[1],
|
workCenter: ''
|
})
|
}
|
|
fetchScheduleList(this.workCenterList)
|
.then((response) => {
|
if (response.data.code == 0) {
|
if (response.data.data != null) {
|
const resources = response.data.data.resources
|
const operationTasks = response.data.data.operationTasks
|
operationTasks.push(this.valState)
|
const sceneTasks = response.data.data.sceneTasks
|
if (resources != null && resources.length > 0) {
|
const taskArr = [
|
...this.buildResource(resources),
|
...this.buildTask(operationTasks),
|
...this.buildSceneTask(sceneTasks)
|
]
|
this.tasks.data = taskArr.filter((item) => item)
|
} else {
|
this.tasks.data = []
|
}
|
|
this.$refs.gantt.clearAll()
|
this.$refs.gantt.refreshData()
|
this.$refs.gantt.parseData()
|
if (this.workCenter && this.valState.id == -1) {
|
this.$refs.gantt.selectTaskData(
|
'operationTask-' + this.valState.id
|
)
|
}
|
}
|
}
|
})
|
.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.start_date = ''
|
task.end_date = ''
|
task.type = 'project'
|
task.render = 'split'
|
task.unscheduled = true
|
task.progress = 1
|
task.partName = resources[i].partName ? resources[i].partName : ''
|
task.quantity = resources[i].plannedQuantity
|
? resources[i].plannedQuantity
|
: ''
|
task.partNo = resources[i].partNo ? resources[i].partNo : ''
|
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.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
|
task.partName = operationTasks[j].partName
|
? operationTasks[j].partName
|
: ''
|
task.quantity = operationTasks[j].quantity
|
? operationTasks[j].quantity
|
: ''
|
task.partNo = operationTasks[j].partNo ? operationTasks[j].partNo : ''
|
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
|
}
|
}
|
}
|
</script>
|
<style>
|
.gantt-toolbar {
|
background-color: #fff !important;
|
padding: 10px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
color: #333;
|
}
|
|
.gantt-toolbar .gantt-btn,
|
.gantt-toolbar .status {
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.gantt-toolbar .gantt-btn {
|
margin-left: 10px;
|
}
|
|
.gantt-toolbar .search {
|
width: 60%;
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
|
.gantt-toolbar .el-button {
|
height: 30px;
|
}
|
|
.gantt-toolbar .status 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%;
|
}
|
|
.scene {
|
background-color: #999d9c;
|
border-color: #999d9c;
|
}
|
|
.scene-tabs {
|
width: 160px;
|
height: 35px;
|
border-radius: 5px;
|
background-color: #ecf0f1 !important;
|
display: flex;
|
color: #00a4ff;
|
padding: 3px;
|
}
|
|
.scene-tabs div {
|
font-size: 14px;
|
font-weight: 500;
|
width: 50%;
|
height: 100%;
|
text-align: center;
|
line-height: 29px;
|
cursor: pointer;
|
}
|
|
.scene-tabs .active {
|
border-radius: 5px;
|
background-color: #00a4ff;
|
color: #fff;
|
}
|
</style>
|
