vue前端實現(xiàn)dhtmlxgantt甘特圖代碼示例(個人需求)
更新時間:2025年03月01日 11:53:57 作者:cat-rongye
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項目中實現(xiàn)節(jié)假日置灰顯示的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
官網(wǎng)地址: dhtmlx-gantt - npm chinese-days - npm
安裝:npm i dhtmlx-gantt npm i chinese-days
開發(fā)過程中需要判斷節(jié)假日并置灰顯示,使用了插件chinese-days(用于查詢中國節(jié)假日、調休日、工作日、24節(jié)氣、以及農歷陽歷互轉)實現(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, //默認打開, toolTipsTxt: val.TDSB, fxdj: val.FXDJ, index:index, editable:true, // progress: 0.6, //status: "parent", }) }) } } // 判斷節(jié)假日并設置特殊樣式,這里是給節(jié)假日設置了特殊的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字段 說明非一級菜單,判斷階段的具體類型 設置不同顏色 if (item.fxdj == 1) { item.color = "rgba(255, 0, 0,.75)"; item.fxdjmc = "一級(+)"; } else if (item.fxdj == 2) { item.fxdjmc = "一級"; item.color = "rgb(255, 136, 20,.75)"; } else if (item.fxdj == 3) { item.fxdjmc = "二級"; item.color = "rgba(86, 146, 240,.75)"; } else if (item.fxdj == 0) { item.fxdjmc = "無"; item.color = "rgba(0, 176, 80,.75)"; } // } }); }; // 初始化渲染甘特圖 public initData(){ //自適應甘特圖的尺寸大小, 使得在不出現(xiàn)滾動條的情況下, 顯示全部任務 // 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; // 允許編輯(內聯(lián)編輯) // 是否有新增彈窗 gantt.config.details_on_create = false; // 點擊進度 gantt.config.details_on_dblclick = false; gantt.config.order_branch = false; gantt.config.scroll_size = 15; // 不同字段對應的編輯配置 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:"無",value:'0'}, {label:"一級風險(+)",value:'1'}, {label:"一級風險",value:'2'}, {label:"二級風險",value:'3'}, ]}; // 左側目錄菜單展示內容 gantt.config.columns = [ { name: "check", label: "", width: 40, template: function(task) { // 創(chuàng)建一個復選框,并為其添加一個唯一的ID,以便后續(xù)操作 var checkboxId = "checkbox_" + task.id; return "<input type='checkbox' id='" + checkboxId + "' class='gantt_checkbox' />"; }, align: "center" }, { name: "index", label: "序號", align: "center", width: 40 }, { name: "name", label: "停電設備", align: "left", width: 230, }, { name: "start_date", label: "開始時間", align: "center", width: 180 }, { name: "end_date", label: "結束時間", align: "center", width: 180 }, { name: "fxdjmc", label: "風險等級", align: "center" }, { name: "add",label: "", onrender: (item: any) => {return " ";},}, ]; // 指向展示詳情 -- 鼠標懸浮是否顯示 gantt.plugins({ tooltip: true, }); // 鼠標懸浮內容 gantt.templates.tooltip_text = function (start, end, task) { return ( "<b>設備名稱:</b> " + task.name + "<br/><b>開始時間:</b> " + gantt.templates.tooltip_date_format(start) + "<br/><b>結束時間:</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"; // 左側表格寬度 gantt.config.autofit = true; gantt.config.grid_width = 500; // 右側表頭 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"; } }; // 設置任務條進度內容 -- 功能不需要 // 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>" // ); // }; //任務條顯示內容 gantt.templates.task_text = function (start, end, task) { // return task.name + '(' + task.duration + '天)'; return ""; }; gantt.i18n.setLocale("cn"); // 設置進度顏色 this.setDataColor(); // 清除緩存 gantt.clearAll(); // 初始化 gantt_here 為dom的Id gantt.init("gantt_here"); // 數(shù)據(jù)解析 gantt.parse(this.tasks); // 監(jiān)聽新增事件 let _this = this; gantt.attachEvent("onTaskCreated", function (task) { //console.log(task, "task"); _this.flag = true; return false; }); // 為每個復選框添加事件監(jiān)聽器 gantt.eachTask(function(task:any) { var checkboxId = "checkbox_" + task.id; var checkbox = document.getElementById(checkboxId); if (checkbox) { // 添加change事件監(jiān)聽器 checkbox.addEventListener('change', function() { // 這里可以執(zhí)行一些操作,比如更新任務狀態(tài)或發(fā)送Ajax請求 console.log('Task ' + task.id + ' is ' + (_this.checked ? 'checked' : 'unchecked')); }); } }); }
總結
到此這篇關于vue前端實現(xiàn)dhtmlxgantt甘特圖的文章就介紹到這了,更多相關vue前端dhtmlxgantt甘特圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+axios實現(xiàn)文件下載及vue中使用axios的實例
這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下2018-09-09Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能
這篇文章主要為大家詳細介紹了如何溧陽Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-02-02