<template>
|
<el-container style="height: 100%">
|
<el-header class="look-over-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>
|
<el-checkbox-group
|
class="status-checkbox-group"
|
v-model="checkStatusList"
|
@change="handleStatusChange"
|
>
|
<div class="status">
|
<div class="itemClass">
|
<div class="circle canceled"></div>
|
<label>已取消</label>
|
<el-checkbox label="05canceled"></el-checkbox>
|
</div>
|
<div class="itemClass">
|
<div class="circle pending"></div>
|
<label>等待</label>
|
<el-checkbox label="01pending"></el-checkbox>
|
</div>
|
<div class="itemClass">
|
<div class="circle inProgress"></div>
|
<label>进行中</label>
|
<el-checkbox label="02inProgress"></el-checkbox>
|
</div>
|
<div class="itemClass">
|
<div class="circle interrupted"></div>
|
<label>已暂停</label>
|
<el-checkbox label="03interrupted"></el-checkbox>
|
</div>
|
<div class="itemClass">
|
<div class="circle completed"></div>
|
<label>已完成</label>
|
<el-checkbox label="04completed"></el-checkbox>
|
</div>
|
</div>
|
</el-checkbox-group>
|
</el-header>
|
<el-main>
|
<gantt
|
ref="currGantt"
|
:tasks="tasks"
|
:filterParam="filterParam"
|
@task-selected="selectTask"
|
@task-dbclick="dbclickTask"
|
@resource-header-click="clickResourceHeader"
|
></gantt>
|
</el-main>
|
<workstationMultiDialog
|
:currshowlist.sync="showWorkstationMulti"
|
@listenToWorkStationMultiEvent="selectWorkstationMulti"
|
/>
|
</el-container>
|
</template>
|
|
<script>
|
import Gantt from './ganttview.vue'
|
import workstationMultiDialog from '@/views/common/workstationMulti.vue'
|
import { fetchScheduleLookOverList } from '@/api/plan/schedulelookover'
|
export default {
|
components: {
|
Gantt,
|
workstationMultiDialog
|
},
|
data() {
|
return {
|
tasks: {
|
data: [],
|
links: []
|
},
|
selectedTask: null,
|
deptId: 0,
|
filterParam: {},
|
scheduleDate: [],
|
checkStatusList: [
|
'05canceled',
|
'01pending',
|
'02inProgress',
|
'03interrupted'
|
],
|
workStationList: [],
|
showWorkstationMulti: false
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
// 页面初始化
|
init() {
|
this.initScheduleDate()
|
// this.initData()
|
},
|
// 初始化排产日期
|
initScheduleDate() {
|
var dateTime = new 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) {
|
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(groupId) {
|
fetchScheduleLookOverList(
|
Object.assign({
|
viewStart: this.scheduleDate[0],
|
viewEnd: this.scheduleDate[1],
|
workStationList: this.workStationList,
|
stateList: this.checkStatusList,
|
sceneId: null,
|
})
|
)
|
.then((response) => {
|
if (response.data.code == 0) {
|
if (response.data.data != null) {
|
const resources = response.data.data.resources
|
const operationTasks = response.data.data.operationTasks
|
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.currGantt.clearAll()
|
this.$refs.currGantt.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.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].optaskNo
|
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.optaskNo = operationTasks[j].optaskNo
|
task.partName = operationTasks[j].partName
|
task.quantity = operationTasks[j].quantity
|
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
|
},
|
// 双击工单后，打开工单编辑模态框
|
dbclickTask(task) {},
|
// 根据日期区间，加载出工单信息
|
getScheduleDate() {
|
this.initData(this.deptId)
|
},
|
// 状态选择发生变化时，触发，重新加载排产列表
|
handleStatusChange(val) {
|
if (this.checkStatusList.length <= 0) {
|
this.checkStatusList.push('02inProgress')
|
}
|
this.initData(this.deptId)
|
},
|
// 点击资源列头部时，触发
|
clickResourceHeader() {
|
this.showWorkstationMulti = true
|
},
|
// 选中机台后，触发，重新加载排产列表
|
selectWorkstationMulti(val) {
|
if (val.length > 0) {
|
const workstationIds = []
|
val.forEach((item) => {
|
workstationIds.push(item.id)
|
})
|
this.workStationList = workstationIds
|
} else {
|
this.workStationList = []
|
}
|
this.initData(this.deptId)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.look-over-gantt-toolbar {
|
background-color: #fff !important;
|
padding: 10px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
color: #333;
|
}
|
|
.look-over-gantt-toolbar .status {
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.look-over-gantt-toolbar .search {
|
width: 60%;
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
|
.look-over-gantt-toolbar >>> .search .el-date-editor {
|
background: #f8faff;
|
}
|
|
.look-over-gantt-toolbar >>> .search .el-date-editor .el-range-input {
|
background: #f8faff;
|
}
|
|
.look-over-gantt-toolbar .status label {
|
font-size: 12px;
|
font-weight: 500;
|
padding-top: 4px;
|
color: #333;
|
}
|
|
.status-checkbox-group .el-checkbox {
|
margin-right: 0px;
|
}
|
|
.status-checkbox-group >>> .el-checkbox__label {
|
display: none;
|
}
|
|
.itemClass {
|
width: 45px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.circle {
|
width: 16px;
|
height: 14px;
|
border-radius: 5px;
|
}
|
|
.canceled {
|
background-color: #7f9fc3;
|
border-color: #7f9fc3;
|
}
|
</style>
|
