<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: [],
|
onBeforeTaskDisplayEvents: [],
|
onGanttRenderEvents: []
|
}
|
},
|
mounted: function() {
|
gantt.config.duration_unit = 'hour'
|
// 本地化语言
|
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
|
})
|
)
|
|
var filterValue = {
|
workCenter: '',
|
text: ''
|
}
|
gantt.$doFilter = function(value, type) {
|
filterValue[type] = value
|
gantt.refreshData()
|
}
|
// 定义网格列
|
gantt.config.columns = [
|
{
|
name: 'workCenter',
|
label:
|
"<div class='headCell in'>工作中心</div><input data-workCenter-filter id='search' type='text' placeholder='搜索...' autocomplete='off' oninput='gantt.$doFilter(this.value,\"workCenter\")'>",
|
width: 110,
|
tree: false
|
},
|
{
|
name: 'text',
|
label:
|
"<div class='headCell in'>资源列表</div><input data-text-filter id='search' type='text' placeholder='搜索...' autocomplete='off' oninput='gantt.$doFilter(this.value,\"text\")'>",
|
width: 160,
|
tree: true
|
},
|
{
|
name: 'machineLoadList',
|
label: "<div class='headCell'>负载</div>",
|
width: 70,
|
tree: false
|
}
|
]
|
// 指定表的标题样式
|
gantt.templates.grid_header_class = function(columnName, column) {
|
return 'gridHeader'
|
}
|
// 定义网格列父图标
|
gantt.templates.grid_folder = function(item) {
|
return "<div class='gantt_tree_icon gantt_blank fa fa-diamond' style='line-height:unset'></div>"
|
}
|
gantt.templates.grid_file = function(item) {
|
if (
|
typeof item.parent !== 'undefined' &&
|
item.parent != null &&
|
item.parent != 0
|
) {
|
return "<div class='gantt_tree_icon gantt_blank el-icon-document' style='vertical-align:top;line-height:unset'></div>"
|
} else {
|
return "<div class='gantt_tree_icon gantt_blank fa fa-diamond' style='line-height:unset'></div>"
|
}
|
}
|
// 定义网格行的样式
|
gantt.templates.grid_row_class = function(start, end, task) {
|
if (
|
typeof task.parent !== 'undefined' &&
|
task.parent != null &&
|
task.parent != 0
|
) {
|
return 'gridRowClass'
|
} else {
|
return 'gridRowClass gridRowExtClass'
|
}
|
}
|
// 定义任务显示内容
|
gantt.templates.task_text = function(start, end, task) {
|
return `<b style='font-size: 12px'>
|
${task.customerOrderNo || task.mpsNo}
|
/
|
${task.text}</b>
|
`
|
}
|
// 定义时间刻度行样式
|
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.text +
|
'<br/><b>开始时间:</b> ' +
|
gantt.templates.tooltip_date_format(start) +
|
'<br/><b>结束时间:</b> ' +
|
gantt.templates.tooltip_date_format(end)
|
)
|
}
|
// 过滤数据
|
this.onBeforeTaskDisplayEvents.push(
|
gantt.attachEvent('onBeforeTaskDisplay', function(id, task) {
|
return searchByName(id)
|
})
|
)
|
this.onGanttRenderEvents.push(
|
gantt.attachEvent('onGanttRender', function() {
|
Object.keys(filterValue).forEach((key) => {
|
gantt.$root.querySelector('[data-' + key + '-filter]').value =
|
filterValue[key]
|
})
|
})
|
)
|
function searchByName(parentId) {
|
var task = gantt.getTask(parentId)
|
let filterPass = true
|
Object.keys(filterValue).forEach((key) => {
|
const t = task[key]
|
const f = filterValue[key].toLowerCase()
|
if (f) {
|
if (!t) {
|
filterPass = false
|
} else {
|
if (t.toLowerCase().indexOf(f) < 0) {
|
filterPass = false
|
}
|
}
|
}
|
})
|
if (filterPass) {
|
return true
|
} else {
|
var child = gantt.getChildren(parentId)
|
for (var i = 0; i < child.length; i++) {
|
if (searchByName(child[i])) return true
|
}
|
return false
|
}
|
}
|
|
// 配置比例，进行缩放
|
var zoomConfig = {
|
levels: [
|
{
|
name: 'day',
|
scale_height: 60,
|
min_column_width: 50,
|
scales: [
|
{ unit: 'day', step: 1, format: '%Y年%m月%d日 %l' },
|
{ unit: 'hour', step: 1, format: '%G点' }
|
]
|
},
|
{
|
name: 'daystephour',
|
scale_height: 60,
|
min_column_width: 70,
|
scales: [
|
{ unit: 'day', step: 1, format: '%Y年%m月%d日 %l' },
|
{ unit: 'hour', step: 2, format: '%G点' }
|
]
|
},
|
{
|
name: 'week',
|
scale_height: 60,
|
min_column_width: 200,
|
scales: [
|
{
|
unit: 'week',
|
step: 1,
|
format: function(date) {
|
/* var dateToStr = gantt.date.date_to_str("%m月%d日");
|
var endDate = gantt.date.add(date, -6, "day");
|
var weekNum = gantt.date.date_to_str("%W")(date);
|
return "第" + weekNum + "周， " + dateToStr(date) + " - " + dateToStr(endDate); */
|
var weekNum = gantt.date.date_to_str('%W')(date)
|
return '第' + weekNum + '周'
|
}
|
},
|
{ unit: 'day', step: 1, format: '%m月%d日 %l' }
|
]
|
},
|
{
|
name: 'month',
|
scale_height: 60,
|
min_column_width: 40,
|
scales: [
|
{ unit: 'month', step: 1, format: '%Y年%m月' },
|
{ unit: 'day', step: 1, format: '%d日 %l' }
|
]
|
},
|
{
|
name: 'monthstepweek',
|
scale_height: 60,
|
min_column_width: 300,
|
scales: [
|
{ unit: 'month', step: 1, format: '%Y年%m月' },
|
{ unit: 'week', step: 1, format: '第%W周' }
|
]
|
},
|
{
|
name: 'year',
|
scale_height: 60,
|
min_column_width: 100,
|
scales: [
|
{ unit: 'year', step: 1, format: '%Y年' },
|
{ unit: 'month', step: 1, format: '%m月' }
|
]
|
}
|
],
|
useKey: 'altKey',
|
trigger: 'wheel',
|
element: function() {
|
return gantt.$root.querySelector('.gantt_task')
|
}
|
}
|
gantt.ext.zoom.init(zoomConfig)
|
gantt.ext.zoom.setLevel('daystephour')
|
|
// 初始化gantt
|
gantt.init(this.$refs.gantt)
|
gantt.parse(this.$props.tasks)
|
|
/*
|
gantt.createDataProcessor((entity, action, data, id) => {
|
this.$emit(`${entity}-updated`, id, action, data);
|
});
|
*/
|
},
|
methods: {
|
refreshData() {
|
gantt.refreshData()
|
},
|
parseData() {
|
console.log(this.$props.tasks)
|
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.onBeforeTaskDisplayEvents.length) {
|
gantt.detachEvent(this.onBeforeTaskDisplayEvents.pop())
|
}
|
while (this.onGanttRenderEvents.length) {
|
gantt.detachEvent(this.onGanttRenderEvents.pop())
|
}
|
while (this.onTaskDbclickEvents.length) {
|
gantt.detachEvent(this.onTaskDbclickEvents.pop())
|
}
|
this.onBeforeTaskDisplayEvents = []
|
this.onTaskSelectedEvents = []
|
this.onBeforeLightboxEvents = []
|
this.onGanttRenderEvents = []
|
this.onTaskDbclickEvents = []
|
gantt.clearAll()
|
}
|
}
|
</script>
|
<style lang="scss">
|
// 左侧头部
|
.gridHeader {
|
padding-left: 0px !important;
|
text-align: center !important;
|
border-right: 1px solid #ebebeb !important;
|
background-color: #f7f9fa;
|
.headCell {
|
height: 60px;
|
line-height: 60px;
|
margin-bottom: -17px;
|
color: black;
|
font-weight: bold;
|
&.in {
|
height: 30px;
|
line-height: 30px;
|
}
|
}
|
input {
|
width: 90%;
|
box-sizing: border-box;
|
height: 26px;
|
line-height: 26px;
|
border: 1px solid #ddd;
|
color: #444;
|
border-radius: 4px;
|
padding: 0 15px;
|
background-color: #fff;
|
&:focus {
|
border-color: #409eff;
|
}
|
}
|
}
|
/* 左侧列 */
|
.gridRowClass,
|
.gridRowClass.odd {
|
height: 30px !important;
|
line-height: 30px !important;
|
background-color: #f7f9fa;
|
.gantt_cell {
|
border-right: 1px solid #ebebeb !important;
|
}
|
.gantt_tree_content {
|
font-size: 12px;
|
}
|
// 没有父元素的
|
&.gridRowExtClass {
|
border-top: 1px solid #ebebeb;
|
}
|
}
|
/* 右侧 */
|
// 头部
|
.scaleRowClass {
|
background-color: #f7f9fa;
|
}
|
// 头部元素
|
.gantt_scale_line .gantt_scale_cell {
|
font-size: 12px;
|
}
|
// 行
|
.taskRowClass {
|
height: 30px !important;
|
line-height: 30px !important;
|
& + .taskRowClass {
|
border-top: 1px solid #ebebeb;
|
}
|
}
|
// 进度条
|
.taskClass {
|
height: 18px !important;
|
line-height: 16px !important;
|
margin-top: 3px;
|
font-size: 12px;
|
}
|
.gantt_task_line {
|
border-radius: 0;
|
}
|
// 进度条内部文字
|
.taskCellClass {
|
border-right: 1px solid #ebebeb;
|
}
|
</style>
|
