甘特图vue查看方式

甘特图查看方式：按天查看，按月查看，按年查看，按周查看

< el-select v-model= "value6" size= "mini" placeholder= "请选择" style= "width:110px;" @ change= "chakan">

< el-option value= "按天查看" class= "scale">el-option>

< el-option value= "按周查看" class= "scale">el-option>

< el-option value= "按月查看" class= "scale">el-option>

< el-option value= "按年查看" class= "scale">el-option>

el-select>

data() {

return {

value6: '', //按天查看，按月查看，按年查看

}

},

chakan(){

if( this.value6 == '按天查看'){

gantt.config.scale_unit = "day";

gantt.config.step = 1;

gantt.config.date_scale = "%d"; //设置日期

gantt.config.subscales = [

{unit: "year", step: 1, date: "%Y"},

{unit: "month", step: 1, date: "%M"}

];

gantt.config.scale_height = 70;

gantt.templates.date_scale = null;

} else if( this.value6 == '按周查看'){

var weekScaleTemplate = function ( date) {

var dateToStr = gantt.date. date_to_str( "%M %d");

var endDate = gantt.date. add(gantt.date. add(date, 1, "week"), - 1, "day");

return dateToStr(date) + " - " + dateToStr(endDate);

};

gantt.config.scale_unit = "week";

gantt.templates.date_scale = weekScaleTemplate;

gantt.config.step = 1;

gantt.config.subscales = [

{unit: "day", step: 1, date: "%D"}

];

gantt.config.scale_height = 70;

} else if( this.value6 == '按月查看'){

gantt.config.scale_unit = "month";

gantt.config.date_scale = "%Y, %F";

gantt.config.step = 1;

gantt.config.subscales = [

{unit: "week", step: 1, date: "%W"}

];

gantt.config.scale_height = 70;

gantt.templates.date_scale = null;

} else if( this.value6 == '按年查看'){

gantt.config.scale_unit = "year";

gantt.config.step = 1;

gantt.config.date_scale = "%Y";

gantt.config.min_column_width = 50;

gantt.config.scale_height = 70;

gantt.templates.date_scale = null;

gantt.config.subscales = [

{unit: "month", step: 1, date: "%M"}

];

}

},