<template>
|
<div ref="gantt" style="width:100%; height:100%;"></div>
|
</template>
|
<script>
|
export default {
|
name: 'gantt',
|
props: {
|
tasks: {
|
type: Object,
|
default() {
|
return { data: [], links: [] }
|
}
|
}
|
},
|
data() {
|
return {
|
onTaskSelectedEvents: [],
|
onBeforeLightboxEvents: [],
|
onTaskDbclickEvents: []
|
}
|
},
|
mounted: function() {
|
gantt.config.duration_unit = 'hour'
|
|
gantt.config.row_height = 90
|
// 本地化语言
|
gantt.locale = {
|
date: {
|
month_full: [
|
'一月',
|
'二月',
|
'三月',
|
'四月',
|
'五月',
|
'六月',
|
'七月',
|
'八月',
|
'九月',
|
'十月',
|
'十一月',
|
'十二月'
|
],
|
month_short: [
|
'1月',
|
'2月',
|
'3月',
|
'4月',
|
'5月',
|
'6月',
|
'7月',
|
'8月',
|
'9月',
|
'10月',
|
'11月',
|
'12月'
|
],
|
day_full: [
|
'星期日',
|
'星期一',
|
'星期二',
|
'星期三',
|
'星期四',
|
'星期五',
|
'星期六'
|
],
|
day_short: ['日', '一', '二', '三', '四', '五', '六']
|
},
|
labels: {
|
new_task: '新任務',
|
dhx_cal_today_button: '今天',
|
day_tab: '日',
|
week_tab: '周',
|
month_tab: '月',
|
new_event: '新建日程',
|
icon_save: '保存',
|
icon_cancel: '关闭',
|
icon_details: '详细',
|
icon_edit: '编辑',
|
icon_delete: '删除',
|
confirm_closing: '请确认是否撤销修改!', // Your changes will be lost, are your sure?
|
confirm_deleting: '是否删除日程?',
|
section_description: '描述',
|
section_time: '时间范围',
|
section_type: '类型',
|
|
column_wbs: '工作分解结构',
|
column_text: '任务名',
|
column_start_date: '开始时间',
|
column_duration: '持续时间',
|
column_add: '',
|
|
link: '关联',
|
confirm_link_deleting: '将被删除',
|
link_start: ' (开始)',
|
link_end: ' (结束)',
|
|
type_task: '任务',
|
type_project: '项目',
|
type_milestone: '里程碑',
|
|
minutes: '分钟',
|
hours: '小时',
|
days: '天',
|
weeks: '周',
|
months: '月',
|
years: '年',
|
|
message_ok: 'OK',
|
message_cancel: '关闭',
|
|
section_constraint: 'Constraint',
|
constraint_type: 'Constraint type',
|
constraint_date: 'Constraint date',
|
asap: 'As Soon As Possible',
|
alap: 'As Late As Possible',
|
snet: 'Start No Earlier Than',
|
snlt: 'Start No Later Than',
|
fnet: 'Finish No Earlier Than',
|
fnlt: 'Finish No Later Than',
|
mso: 'Must Start On',
|
mfo: 'Must Finish On',
|
|
resources_filter_placeholder: 'type to filter',
|
resources_filter_label: 'hide empty'
|
}
|
}
|
|
gantt.config.min_duration = 60 * 1000
|
gantt.config.xml_date = '%Y-%m-%d %H:%i:%s'
|
// 设置“开始时间”所在的列的时间格式
|
gantt.config.date_grid = '%d/%m/%Y'
|
gantt.config.date_format = '%Y-%m-%d %H:%i:%s'
|
// 将任务开始时间和结束时间自动“四舍五入”, 从而对齐坐标轴刻度
|
gantt.config.round_dnd_dates = false
|
// 可同一级树节点间拖动任务
|
gantt.config.order_branch = false
|
// 可拖动任务条的位置
|
gantt.config.drag_move = false
|
// 可拖动任务条的进度
|
gantt.config.drag_progress = false
|
// 可拖动任务条的长度
|
gantt.config.drag_resize = false
|
// 可所有树节点间拖动任务
|
gantt.config.order_branch_free = false
|
// 可拖动连接任务
|
gantt.config.drag_links = false
|
// 扩展/折叠拆分合并
|
gantt.config.open_split_tasks = true
|
// 支持显示计划外的任务
|
gantt.config.show_unscheduled = true
|
|
gantt.config.drag_timeline = {
|
ignore: '.gantt_task_line,.gantt_task_link',
|
useKey: false
|
}
|
|
// 任务选中事件，绑定task-selected，传值task
|
this.onTaskSelectedEvents.push(
|
gantt.attachEvent('onTaskSelected', (id) => {
|
const task = gantt.getTask(id)
|
this.$emit('task-selected', task)
|
})
|
)
|
// 屏蔽灯箱
|
this.onBeforeLightboxEvents.push(
|
gantt.attachEvent('onBeforeLightbox', function(id) {
|
return false
|
})
|
)
|
// 双击事件，绑定task-dbclick,传值task
|
this.onTaskDbclickEvents.push(
|
gantt.attachEvent('onTaskDblClick', (id, e) => {
|
return false
|
})
|
)
|
// 定义网格列
|
gantt.config.columns = [
|
{
|
name: 'workCenter',
|
label: "<div class='headCell'>工作中心</div>",
|
width: 100,
|
tree: false
|
},
|
{
|
name: 'workstationName',
|
label: "<div class='headCell'>机台</div>",
|
width: 100,
|
tree: false
|
},
|
{
|
name: 'operationName',
|
label: "<div class='headCell'>工序</div>",
|
width: 120,
|
tree: false
|
}
|
// {
|
// name: 'machineLoadList',
|
// label: "<div class='headCell'>派工米数</div>",
|
// width: 80,
|
// tree: false
|
// }
|
]
|
// 指定表的标题样式
|
gantt.templates.grid_header_class = function(columnName, column) {
|
return 'gridHeader'
|
}
|
// 定义网格行的样式
|
gantt.templates.grid_row_class = function(start, end, task) {
|
return 'gridRowClass'
|
}
|
// 定义时间刻度行样式
|
gantt.templates.scale_row_class = function(task, date) {
|
return 'scaleRowClass'
|
}
|
// 定义时间刻度单元格样式
|
/* gantt.templates.scale_cell_class = function(date){
|
return "scaleCellClass";
|
}; */
|
// 定义任务行的样式
|
gantt.templates.task_row_class = function(start, end, task) {
|
return 'taskRowClass'
|
}
|
// 定义任务单元格样式
|
gantt.templates.timeline_cell_class = function(task, date) {
|
return 'taskCellClass'
|
}
|
// 定义任务颜色、样式
|
gantt.templates.task_class = function(start, end, task) {
|
switch (task.state) {
|
case 'scene':
|
return 'scene taskClass'
|
break
|
case '01pending':
|
return 'pending taskClass'
|
break
|
case '02inProgress':
|
return 'inProgress taskClass'
|
break
|
case '03interrupted':
|
return 'interrupted taskClass'
|
break
|
case '04completed':
|
return 'completed taskClass'
|
break
|
}
|
}
|
// 定义工具提示中显示的开始日期和结束日期的格式
|
gantt.templates.tooltip_date_format = function(date) {
|
var formatFunc = gantt.date.date_to_str('%Y-%m-%d %H:%i')
|
return formatFunc(date)
|
}
|
// 定义工具提示模板
|
gantt.templates.tooltip_text = function(start, end, task) {
|
return (
|
'<b>' +
|
(task.customerOrderNo ? '订单号' : '计划号') +
|
':</b> ' +
|
(task.customerOrderNo || task.mpsNo) +
|
'<br/><b>工单:</b> ' +
|
task.operationName +
|
'<br/><b>开始时间:</b> ' +
|
gantt.templates.tooltip_date_format(start) +
|
'<br/><b>结束时间:</b> ' +
|
gantt.templates.tooltip_date_format(end) +
|
'<br/><b>进度:</b> ' +
|
task.ratio +
|
'%'
|
)
|
}
|
|
// 配置比例，进行缩放
|
var zoomConfig = {
|
levels: [
|
{
|
name: 'day',
|
scale_height: 50,
|
min_column_width: 50,
|
scales: [{ unit: 'day', step: 1, format: '%m-%d' }]
|
}
|
],
|
useKey: 'altKey',
|
trigger: 'wheel',
|
element: function() {
|
return gantt.$root.querySelector('.gantt_task')
|
}
|
}
|
gantt.ext.zoom.init(zoomConfig)
|
gantt.ext.zoom.setLevel('day')
|
|
// 初始化gantt
|
gantt.init(this.$refs.gantt)
|
this.parseData()
|
},
|
methods: {
|
refreshData() {
|
gantt.refreshData()
|
},
|
parseData() {
|
gantt.parse(this.$props.tasks)
|
},
|
clearAll() {
|
gantt.clearAll()
|
},
|
getTask(id) {
|
return gantt.getTask(id)
|
},
|
updateTask(id) {
|
gantt.updateTask(id)
|
},
|
deleteTask(id) {
|
gantt.deleteTask(id)
|
}
|
},
|
destroyed: function() {
|
while (this.onTaskSelectedEvents.length) {
|
gantt.detachEvent(this.onTaskSelectedEvents.pop())
|
}
|
while (this.onBeforeLightboxEvents.length) {
|
gantt.detachEvent(this.onBeforeLightboxEvents.pop())
|
}
|
while (this.onTaskDbclickEvents.length) {
|
gantt.detachEvent(this.onTaskDbclickEvents.pop())
|
}
|
this.onTaskSelectedEvents = []
|
this.onBeforeLightboxEvents = []
|
this.onTaskDbclickEvents = []
|
gantt.clearAll()
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
// 左侧头部
|
/deep/ {
|
.gantt_container,
|
.gantt_grid_scale {
|
background: none;
|
border: none;
|
}
|
.gridHeader {
|
text-align: center !important;
|
padding-left: 0px !important;
|
border-right: 1px solid #42536b !important;
|
border-bottom: 1px solid #42536b !important;
|
.headCell {
|
color: #f8f8f8;
|
font-weight: bold;
|
}
|
}
|
/* 左侧列 */
|
.gridRowClass,
|
.gridRowClass.odd {
|
background: none;
|
border-bottom: 1px solid #42536b;
|
border-right: none;
|
.gantt_cell {
|
border-right: 1px solid #42536b !important;
|
text-align: center;
|
}
|
.gantt_tree_content {
|
color: #f8f8f8;
|
}
|
}
|
/* 右侧 */
|
// 头部
|
.gantt_task_scale {
|
background: none;
|
border-bottom: 1px solid #42536b !important;
|
}
|
// 头部元素
|
.gantt_scale_line .gantt_scale_cell {
|
color: #f8f8f8;
|
border-right: 1px solid #42536b !important;
|
}
|
// 行
|
.taskRowClass {
|
background: none;
|
& + .taskRowClass {
|
border-top: 1px solid #42536b;
|
}
|
&:last-child {
|
border-bottom: 1px solid #42536b !important;
|
}
|
}
|
.gantt_task_line {
|
border-radius: 0;
|
border: none;
|
}
|
.gantt_bars_area {
|
[task_id|='parent'] {
|
display: none;
|
}
|
[task_id|='child-planned'] {
|
margin-top: 20px;
|
}
|
[task_id|='child-actual'] {
|
margin-top: 50px;
|
border: 1px solid #03a24d;
|
border-radius: 10px;
|
.gantt_task_progress {
|
background: #03a24d;
|
opacity: 1;
|
}
|
}
|
}
|
.taskCellClass {
|
border-right: 1px solid #42536b;
|
}
|
// 进度条
|
.taskClass {
|
height: 18px !important;
|
line-height: 17px !important;
|
font-size: 12px;
|
.gantt_task_content {
|
padding: 0 5px;
|
}
|
}
|
// 进度条内部文字
|
.scrollHor_cell {
|
::-webkit-scrollbar-track-piece {
|
background-color: transparent;
|
}
|
::-webkit-scrollbar {
|
width: 12px;
|
height: 12px;
|
background-color: transparent;
|
}
|
::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
background-color: #00e0f3;
|
}
|
}
|
}
|
</style>
|
