<template>
|
<div
|
ref="lookOverGantt"
|
class="granttLookOverDiv"
|
style="width:100%; height:100%;"
|
></div>
|
</template>
|
<style lang="scss" scoped>
|
.granttLookOverDiv >>> .nested_task .gantt_add {
|
display: none !important;
|
}
|
.granttLookOverDiv >>> .gridHeader {
|
padding-left: 0px !important;
|
text-align: center !important;
|
background-color: #f7f9fa;
|
}
|
/*.granttLookOverDiv >>> .gridHeader input {
|
height: 32px;
|
border: 1px solid #ddd;
|
color: #444;
|
border-radius: 4px;
|
padding: 0 15px;
|
background-color: #fff;
|
}
|
.granttLookOverDiv >>> .gridHeader input:focus {
|
border-color: #409eff;
|
}*/
|
.granttLookOverDiv >>> .gridHeader button {
|
height: 32px;
|
border: 1px solid #ddd;
|
color: #444;
|
border-radius: 4px;
|
padding: 0 15px;
|
background-color: #fff;
|
}
|
.granttLookOverDiv >>> .taskRowClass {
|
height: 30px !important;
|
line-height: 30px !important;
|
}
|
.granttLookOverDiv >>> .taskRowClass.gantt_selected {
|
background-color: #ffffff;
|
}
|
.granttLookOverDiv >>> .taskRowClass div:nth-child(odd) {
|
background-color: #f8fbff;
|
}
|
.granttLookOverDiv >>> .taskClass {
|
height: 27px !important;
|
line-height: 25px !important;
|
font-size: 12px;
|
}
|
.granttLookOverDiv >>> .gantt_task_line.canceled {
|
border-radius: 0px 8px 8px 0px;
|
box-shadow: 0px 2px 6px 0px rgba(127, 159, 195, 0.31);
|
}
|
.granttLookOverDiv >>> .gantt_task_line.pending {
|
border-radius: 0px 8px 8px 0px;
|
box-shadow: 0px 2px 6px 0px rgba(232, 126, 32, 0.31);
|
}
|
.granttLookOverDiv >>> .gantt_task_line.inProgress {
|
border-radius: 0px 8px 8px 0px;
|
box-shadow: 0px 2px 6px 0px rgba(32, 232, 183, 0.31);
|
}
|
.granttLookOverDiv >>> .gantt_task_line.interrupted {
|
border-radius: 0px 8px 8px 0px;
|
box-shadow: 0px 2px 6px 0px rgba(232, 32, 98, 0.31);
|
}
|
.granttLookOverDiv >>> .gantt_task_line.completed {
|
border-radius: 0px 8px 8px 0px;
|
box-shadow: 0px 2px 6px 0px rgba(32, 121, 232, 0.31);
|
}
|
.granttLookOverDiv >>> .gridRowClass.odd,
|
.granttLookOverDiv >>> .gridRowClass {
|
height: 30px !important;
|
line-height: 30px !important;
|
background-color: #f8fbff;
|
}
|
.granttLookOverDiv >>> .gridRowClass.gantt_selected {
|
background-color: #47417d;
|
}
|
.granttLookOverDiv >>> .gridRowClass.gantt_selected .gantt_tree_content {
|
color: #ffffff;
|
}
|
.granttLookOverDiv >>> .gridRowClass .gantt_tree_content {
|
font-family: MicrosoftYaHei;
|
font-size: 12px;
|
font-weight: 550;
|
font-stretch: normal;
|
color: #363b4d;
|
}
|
.granttLookOverDiv >>> .gridRowExtClass {
|
border-top: 1px solid #f7f7f7;
|
}
|
.granttLookOverDiv >>> .taskCellClass {
|
border-right: 0px solid #f2f2f2;
|
}
|
|
.granttLookOverDiv >>> .gantt_task_scale .scaleRowClass:nth-child(odd) {
|
background-color: #96a4e2;
|
}
|
.granttLookOverDiv
|
>>> .gantt_task_scale
|
.scaleRowClass:last-child
|
div:nth-child(odd) {
|
background-color: #f8fbff;
|
}
|
.granttLookOverDiv >>> .gantt_scale_line:first-child .gantt_scale_cell {
|
font-family: MicrosoftYaHei;
|
font-size: 12px;
|
font-weight: 550;
|
font-stretch: normal;
|
color: #ffffff;
|
height: 30px !important;
|
}
|
.granttLookOverDiv >>> .gantt_scale_line:last-child .gantt_scale_cell {
|
font-family: MicrosoftYaHei;
|
font-size: 12px;
|
font-weight: normal;
|
font-stretch: normal;
|
color: #313131;
|
height: 30px !important;
|
}
|
.granttLookOverDiv >>> .gantt_grid .gantt_grid_scale,
|
.granttLookOverDiv >>> .gantt_grid .gantt_row {
|
border-right: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_layout_cell_border_top {
|
border-top: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_layout_cell_border_bottom {
|
border-bottom: 1px solid #f2f2f2;
|
}
|
|
.granttLookOverDiv >>> .gantt_layout_cell_border_left {
|
border-left: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_scale_line {
|
border-top: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_scale_cell {
|
border-right: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_data_area .gantt_task_row:last-child {
|
border-bottom: 1px solid #f2f2f2;
|
}
|
.granttLookOverDiv >>> .gantt_data_area .gantt_task_row:last-child,
|
.granttLookOverDiv >>> .gantt_grid_data .gantt_row:last-child {
|
border-bottom: 1px solid #ffffff;
|
}
|
.granttLookOverDiv >>> .taskClass .gantt_task_progress {
|
background: rgba(0, 0, 0, 0);
|
}
|
.granttLookOverDiv >>> .gantt_grid_scale .gantt_grid_head_cell {
|
background: #96a4e2;
|
}
|
/*.granttLookOverDiv >>> .gantt_grid_scale .gantt_grid_head_cell input {
|
font-family: MicrosoftYaHei;
|
font-size: 14px;
|
font-weight: normal;
|
font-stretch: normal;
|
letter-spacing: 0px;
|
color: #737a95;
|
}*/
|
</style>
|
<script>
|
export default {
|
name: 'gantt',
|
props: {
|
tasks: {
|
type: Object,
|
default() {
|
return { data: [], links: [] }
|
}
|
},
|
filterParam: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
onBeforeTaskDisplayEvents: [],
|
onTaskSelectedEvents: [],
|
onBeforeLightboxEvents: [],
|
onGanttRenderEvents: [],
|
onTaskDbclickEvents: [],
|
onTaskRowClickEvents: []
|
}
|
},
|
mounted: function() {
|
// 新建gannt实例
|
// this.gantt = Gantt.getGanttInstance();
|
// var gantt=this.gantt;
|
// 设置时间坐标的单位“minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
|
// gantt.config.scale_unit = "minute";
|
// 设置时间轴的坐标值之间的间隔
|
// gantt.config.step = 30;
|
// 设置x轴的日期格式
|
// gantt.config.date_scale = "%i";
|
/* gantt.config.scales = [
|
//{unit:"week", step:1, template:weekScaleTemplate},
|
{unit:"day", step:1, format:"%Y年%m月%d日 %l" },
|
{unit:"hour", step:1, format:"%G点" }
|
]; */
|
// 设置表头的高度
|
// gantt.config.scale_height = 60;
|
// duration工期计算的基本单位“minute”, “hour”, “day”, “week”, “month”, “year”
|
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 = true
|
// 可拖动任务条的位置
|
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) => {
|
const task = gantt.getTask(id)
|
if (task.parent === 0) {
|
return false
|
}
|
const parentTask = gantt.getTask(task.parent)
|
console.log(parentTask)
|
if (parentTask.$open == true) {
|
// 任务展开的情况下，才能编辑
|
this.$emit('task-dbclick', task)
|
return true
|
} else {
|
// gantt.message({type:"warning", text:"所属资源展开后，才可进行编辑"});
|
this.$message.warning('所属资源展开后，才可进行编辑')
|
return false
|
}
|
})
|
)
|
|
// 点击资源列表行事件回调
|
this.onTaskRowClickEvents.push(
|
gantt.attachEvent('onTaskRowClick', function(id, row) {
|
return false
|
})
|
)
|
|
// 点击资源列头部事件回调
|
const _that = this
|
gantt.$resourceHeaderClick = function() {
|
// 弹出机台选择列表dialog
|
_that.$emit('resource-header-click')
|
}
|
|
var filterValue = ''
|
gantt.$doFilter = function(value) {
|
filterValue = value
|
gantt.refreshData()
|
}
|
// 定义网格列
|
gantt.config.columns = [
|
/* {
|
name: 'text',
|
label:
|
'<div style=\'height: 30px;line-height: 30px;margin-bottom: -17px;color: white;font-weight:bold;\'>资源列表</div><input data-text-filter id=\'search\' type=\'text\' placeholder=\'搜索...\' autocomplete=\'off\' onclick=\'gantt.$resourceHeaderClick()\'>',
|
width: 220,
|
tree: true
|
} */
|
{
|
name: 'text',
|
label:
|
'<div style=\'height: 30px;line-height: 30px;margin-bottom: -17px;color: white;font-weight:bold;\'>资源列表</div><button id=\'search\' type=\'button\' onclick=\'gantt.$resourceHeaderClick()\'><span>选择工作站</span></button>',
|
width: 220,
|
tree: true
|
}
|
]
|
// 指定表的标题样式
|
gantt.templates.grid_header_class = function(columnName, column) {
|
return 'gridHeader'
|
}
|
// 定义网格列父图标
|
/* gantt.templates.grid_folder = function(item) {
|
return "<div class='gantt_tree_icon gantt_blank' 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' style='vertical-align:top;line-height:unset'></div>"
|
} else {
|
return "<div class='gantt_tree_icon gantt_blank' 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) {
|
let task_icon = ''
|
switch (task.state) {
|
case '05canceled':
|
task_icon = 'icon-schedule-pending'
|
break
|
case '01pending':
|
task_icon = 'icon-schedule-pending'
|
break
|
case '02inProgress':
|
task_icon = 'icon-schedule-pending'
|
break
|
case '03interrupted':
|
task_icon = 'icon-schedule-pending'
|
break
|
case '04completed':
|
task_icon = 'icon-schedule-pending'
|
break
|
}
|
return (
|
'<div style="font-size: 12px;"><span>工单：' +
|
task.text +
|
'</span><span style="margin-left:20px;">零件描述：' +
|
task.partName +
|
'</span><span style="margin-left:20px;">数量：' +
|
task.quantity +
|
'</span></div>'
|
)
|
}
|
// 定义时间刻度行样式
|
gantt.templates.scale_row_class = function(task, date) {
|
return 'scaleRowClass'
|
}
|
// 定义时间刻度单元格样式
|
/* gantt.templates.scale_cell_class = function(date){
|
return "scaleCellClass";
|
}; */
|
// 定义任务单元格样式
|
gantt.templates.timeline_cell_class = function(task, date) {
|
return 'taskCellClass'
|
}
|
// 定义任务行的样式
|
gantt.templates.task_row_class = function(start, end, task) {
|
return 'taskRowClass'
|
}
|
// 定义任务颜色、样式
|
gantt.templates.task_class = function(start, end, task) {
|
switch (task.state) {
|
case '05canceled':
|
return 'canceled 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) {
|
let returnHtml = ''
|
if (task.type === 'project') {
|
returnHtml =
|
'<b>资源:</b> ' +
|
task.text +
|
'<br/><b>开始时间:</b> ' +
|
gantt.templates.tooltip_date_format(start) +
|
'<br/><b>结束时间:</b> ' +
|
gantt.templates.tooltip_date_format(end)
|
} else {
|
returnHtml =
|
'<b>工单:</b> ' +
|
task.text +
|
'<br/><b>零件描述:</b> ' +
|
task.partName +
|
'<br/><b>数量:</b> ' +
|
task.quantity +
|
'<br/><b>开始时间:</b> ' +
|
gantt.templates.tooltip_date_format(start) +
|
'<br/><b>结束时间:</b> ' +
|
gantt.templates.tooltip_date_format(end)
|
}
|
return returnHtml
|
}
|
|
var ggg = this.filterParam
|
// 过滤数据
|
this.onBeforeTaskDisplayEvents.push(
|
gantt.attachEvent('onBeforeTaskDisplay', function(id, task) {
|
if (searchByName(id, filterValue)) {
|
return true
|
}
|
return false
|
})
|
)
|
this.onGanttRenderEvents.push(
|
gantt.attachEvent('onGanttRender', function() {
|
// gantt.$root.querySelector('[data-text-filter]').value = filterValue
|
})
|
)
|
function searchByName(parentId, taskName) {
|
if (!filterValue) return true
|
var task = gantt.getTask(parentId)
|
if (task.text.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1)
|
return true
|
|
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: 65,
|
min_column_width: 50,
|
scales: [
|
{ unit: 'day', step: 1, format: '%Y年%m月%d日 %l' },
|
{ unit: 'hour', step: 1, format: '%G点' }
|
]
|
},
|
{
|
name: 'daystephour',
|
scale_height: 65,
|
min_column_width: 100,
|
scales: [
|
{ unit: 'day', step: 1, format: '%Y年%m月%d日 %l' },
|
{ unit: 'hour', step: 2, format: '%G点' }
|
]
|
},
|
{
|
name: 'week',
|
scale_height: 65,
|
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: 65,
|
min_column_width: 40,
|
scales: [
|
{ unit: 'month', step: 1, format: '%Y年%m月' },
|
{ unit: 'day', step: 1, format: '%d日 %l' }
|
]
|
},
|
{
|
name: 'monthstepweek',
|
scale_height: 65,
|
min_column_width: 300,
|
scales: [
|
{ unit: 'month', step: 1, format: '%Y年%m月' },
|
{ unit: 'week', step: 1, format: '第%W周' }
|
]
|
},
|
{
|
name: 'year',
|
scale_height: 65,
|
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.lookOverGantt)
|
gantt.parse(this.$props.tasks)
|
|
/*
|
gantt.createDataProcessor((entity, action, data, id) => {
|
this.$emit(`${entity}-updated`, id, action, data);
|
});
|
*/
|
},
|
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.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())
|
}
|
while (this.onTaskRowClickEvents.length) {
|
gantt.detachEvent(this.onTaskRowClickEvents.pop())
|
}
|
this.onBeforeTaskDisplayEvents = []
|
this.onTaskSelectedEvents = []
|
this.onBeforeLightboxEvents = []
|
this.onGanttRenderEvents = []
|
this.onTaskDbclickEvents = []
|
this.onTaskRowClickEvents = []
|
gantt.clearAll()
|
}
|
}
|
</script>
|
