亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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的實例

    這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下
    2018-09-09
  • vue實現(xiàn)左右點擊滾動效果

    vue實現(xiàn)左右點擊滾動效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)左右點擊滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • Vue.js動態(tài)組件解析

    Vue.js動態(tài)組件解析

    這篇文章主要為大家詳細介紹了Vue.js動態(tài)組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue設置別名聯(lián)想路徑即@/生效的方法

    Vue設置別名聯(lián)想路徑即@/生效的方法

    這篇文章主要給大家介紹了Vue設置別名聯(lián)想路徑即@/生效的方法,文中有詳細的代碼示例和圖文講解,具有一定的參考價值,需要的朋友可以參考下
    2023-11-11
  • 解決vue項目運行npm run serve報錯的問題

    解決vue項目運行npm run serve報錯的問題

    這篇文章主要介紹了解決vue項目運行npm run serve報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vant樣式不生效問題的解決辦法

    vant樣式不生效問題的解決辦法

    這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2023-06-06
  • 如何在Vue中使用debouce防抖函數(shù)

    如何在Vue中使用debouce防抖函數(shù)

    本文主要介紹在Vue中使用debouce防抖函數(shù),設置一個門檻值,表示兩次?Ajax?通信的最小間隔時間。如果在間隔時間內,發(fā)生新的keydown事件,則不觸發(fā)?Ajax?通信,并且重新開始計時。如果過了指定時間,沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去,這便是debouce防抖函數(shù)
    2021-12-12
  • vue組件父子間通信之綜合練習(聊天室)

    vue組件父子間通信之綜合練習(聊天室)

    這篇文章主要為大家詳細介紹了vue組件父子間通信之綜合練習聊天室制作,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 詳解Electron中如何使用SQLite存儲筆記

    詳解Electron中如何使用SQLite存儲筆記

    這篇文章主要為大家介紹了Electron中如何使用SQLite存儲筆記示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能

    Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能

    這篇文章主要為大家詳細介紹了如何溧陽Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2023-02-02

最新評論