vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
更新時(shí)間：2025年03月01日 11:53:57 作者：cat-rongye
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
官網(wǎng)地址： dhtmlx-gantt - npm chinese-days - npm
安裝：npm i dhtmlx-gantt npm i chinese-days
開(kāi)發(fā)過(guò)程中需要判斷節(jié)假日并置灰顯示，使用了插件chinese-days(用于查詢中國(guó)節(jié)假日、調(diào)休日、工作日、24節(jié)氣、以及農(nóng)歷陽(yáng)歷互轉(zhuǎn))實(shí)現(xiàn)
this.task = { data:[],type: "tasks"}
//獲取甘特圖數(shù)據(jù)
public getData(data){
if(data.length){
data.forEach((val:any,index:any)=>{
this.tasks.data.push({
id: val.OBJ_ID,
name: val.TDSB,
start_date: new Date(this.timestampToTime(val.STARTTIME)),
end_date: new Date(this.timestampToTime(val.ENDTIME)),
duration: 20,
open: true, //默認(rèn)打開(kāi)，
toolTipsTxt: val.TDSB,
fxdj: val.FXDJ,
index:index,
editable:true,
// progress: 0.6,
//status: "parent",
})
})
}
}
// 判斷節(jié)假日并設(shè)置特殊樣式，這里是給節(jié)假日設(shè)置了特殊的css類名，具體樣式具需求自行添加
// chineseDays.isHoliday -- 使用插件 判斷這一日期是否為周末節(jié)假日
public daysStyle(date: any){
if (chineseDays.isHoliday(date)) return "weekend";
};
// 根據(jù)傳入數(shù)據(jù)判斷甘特圖渲染的顏色
public setDataColor = () => {
this.tasks.data.forEach((item: any) => {
// if (item.fxdj) {
//存在type字段 說(shuō)明非一級(jí)菜單，判斷階段的具體類型 設(shè)置不同顏色
if (item.fxdj == 1) {
item.color = "rgba(255, 0, 0,.75)";
item.fxdjmc = "一級(jí)（+）";
} else if (item.fxdj == 2) {
item.fxdjmc = "一級(jí)";
item.color = "rgb(255, 136, 20,.75)";
} else if (item.fxdj == 3) {
item.fxdjmc = "二級(jí)";
item.color = "rgba(86, 146, 240,.75)";
} else if (item.fxdj == 0) {
item.fxdjmc = "無(wú)";
item.color = "rgba(0, 176, 80,.75)";
}
// }
});
};
// 初始化渲染甘特圖
public initData(){
//自適應(yīng)甘特圖的尺寸大小, 使得在不出現(xiàn)滾動(dòng)條的情況下, 顯示全部任務(wù)
// gantt.config.autosize = "xy";
// gantt.config.open_tree_initially = true;
// gantt.config.scale_unit = "day";
gantt.config.min_column_width = 60;
gantt.config.scale_height = 30 * 3;
gantt.config.row_height = 30;
gantt.config.drag_links = false;
gantt.config.drag_move = false;
gantt.config.drag_resize = false;
gantt.config.drag_progress = false;
gantt.config.correct_work_time = false;
gantt.config.editable = true; // 允許編輯（內(nèi)聯(lián)編輯）
// 是否有新增彈窗
gantt.config.details_on_create = false;
// 點(diǎn)擊進(jìn)度
gantt.config.details_on_dblclick = false;
gantt.config.order_branch = false;
gantt.config.scroll_size = 15;
// 不同字段對(duì)應(yīng)的編輯配置
var textEditor = {type: "text", map_to: "name"};
var dateEditorS = {type: "date", map_to: "start_date"};
var dateEditorE = {type: "date", map_to: "start_date"};
var durationEditor = {type: "select", map_to: "fxdjmc",options: [
{label:"無(wú)",value:'0'},
{label:"一級(jí)風(fēng)險(xiǎn)(+)",value:'1'},
{label:"一級(jí)風(fēng)險(xiǎn)",value:'2'},
{label:"二級(jí)風(fēng)險(xiǎn)",value:'3'},
]};
// 左側(cè)目錄菜單展示內(nèi)容
gantt.config.columns = [
{ name: "check", label: "", width: 40,
template: function(task) {
// 創(chuàng)建一個(gè)復(fù)選框，并為其添加一個(gè)唯一的ID，以便后續(xù)操作
var checkboxId = "checkbox_" + task.id;
return "<input type='checkbox' id='" + checkboxId + "' class='gantt_checkbox' />";
},
align: "center" },
{ name: "index", label: "序號(hào)", align: "center", width: 40 },
{ name: "name", label: "停電設(shè)備", align: "left", width: 230, },
{ name: "start_date", label: "開(kāi)始時(shí)間", align: "center", width: 180 },
{ name: "end_date", label: "結(jié)束時(shí)間", align: "center", width: 180 },
{ name: "fxdjmc", label: "風(fēng)險(xiǎn)等級(jí)", align: "center" },
{ name: "add",label: "", onrender: (item: any) => {return " ";},},
];
// 指向展示詳情 -- 鼠標(biāo)懸浮是否顯示
gantt.plugins({
tooltip: true,
});
// 鼠標(biāo)懸浮內(nèi)容
gantt.templates.tooltip_text = function (start, end, task) {
return (
"<b>設(shè)備名稱:</b> " +
task.name +
"<br/><b>開(kāi)始時(shí)間:</b> " +
gantt.templates.tooltip_date_format(start) +
"<br/><b>結(jié)束時(shí)間:</b> " +
gantt.templates.tooltip_date_format(end)
);
};
gantt.config.auto_types = true;
gantt.config.xml_date = "%Y-%m-%d";
gantt.config.step = 1;
gantt.config.start_on_monday = true;
gantt.config.autoscroll = false;
gantt.config.scroll_on_click = true;
gantt.config.calendar_property = "start_date";
gantt.config.calendar_property = "end_date";
// 左側(cè)表格寬度
gantt.config.autofit = true;
gantt.config.grid_width = 500;
// 右側(cè)表頭
gantt.config.scales = [
{ unit: "month", step: 1, format: "%F, %Y" },
{ unit: "week", step: 1, template: this.weekScaleTemplate },
{ unit: "day", step: 1, format: "%d", css: this.daysStyle },
];
// 表單判斷假期
gantt.templates.timeline_cell_class = (task, date): any => {
if (chineseDays.isHoliday(date)) {
return "holiday";
}
};
// 設(shè)置任務(wù)條進(jìn)度內(nèi)容 -- 功能不需要
// gantt.templates.progress_text = (start, end, task: any) => {
// return (
// "<div style='text-align:left;color:#fff;padding-left:20px'>" +
// Math.round(task.progress * 100) +
// "% </div>"
// );
// };
//任務(wù)條顯示內(nèi)容
gantt.templates.task_text = function (start, end, task) {
// return task.name + '(' + task.duration + '天)';
return "";
};
gantt.i18n.setLocale("cn");
// 設(shè)置進(jìn)度顏色
this.setDataColor();
// 清除緩存
gantt.clearAll();
// 初始化 gantt_here 為dom的Id
gantt.init("gantt_here");
// 數(shù)據(jù)解析
gantt.parse(this.tasks);
// 監(jiān)聽(tīng)新增事件
let _this = this;
gantt.attachEvent("onTaskCreated", function (task) {
//console.log(task, "task");
_this.flag = true;
return false;
});
// 為每個(gè)復(fù)選框添加事件監(jiān)聽(tīng)器
gantt.eachTask(function(task:any) {
var checkboxId = "checkbox_" + task.id;
var checkbox = document.getElementById(checkboxId);
if (checkbox) {
// 添加change事件監(jiān)聽(tīng)器
checkbox.addEventListener('change', function() {
// 這里可以執(zhí)行一些操作，比如更新任務(wù)狀態(tài)或發(fā)送Ajax請(qǐng)求
console.log('Task ' + task.id + ' is ' + (_this.checked ? 'checked' : 'unchecked'));
});
}
});
}總結(jié)
到此這篇關(guān)于vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖的文章就介紹到這了,更多相關(guān)vue前端dhtmlxgantt甘特圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例
這篇文章主要介紹了vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例,需要的朋友可以參考下2018-09-09
vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js動(dòng)態(tài)組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11
解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要給大家介紹了vant樣式不生效問(wèn)題的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個(gè)門(mén)檻值，表示兩次?Ajax?通信的最小間隔時(shí)間。如果在間隔時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開(kāi)始計(jì)時(shí)。如果過(guò)了指定時(shí)間，沒(méi)有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信之綜合練習(xí)聊天室制作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳解Electron中如何使用SQLite存儲(chǔ)筆記
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲(chǔ)筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽(yáng)Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02