Vue front-end implementation of dhtmlxgantt Gantt chart code example (personal requirement)

 = { data:[],type: "tasks"}
//Get Gantt chart datapublic getData(data){
    if(){
        ((val:any,index:any)=>{
          ({
            id: val.OBJ_ID,
            name: ,
            start_date: new Date(()),
            end_date: new Date(()),
            duration: 20,
            open: true, //Open by default,            toolTipsTxt:  ,
            fxdj: ,
            index:index,
            editable:true,
            // progress: 0.6,
            //status: "parent",
          })
        })
      }
    }    
//Judge holidays and set special styles. Here is a special css class name for holidays. The specific styles are added by yourself as required.// -- Use plug-in to determine whether this date is a weekend holiday   
    public daysStyle(date: any){
        if ((date)) return "weekend";
      };

    //Judge the color of the Gantt chart rendering based on the incoming data    public setDataColor = () => {
        ((item: any) => {
          // if () {
            //There is a type field. It indicates the non-first-level menu. The specific type of the phase is determined. Set different colors.            if ( == 1) {
               = "rgba(255, 0, 0,.75)";
               = "Level 1 (+)";
            } else if ( == 2) {
               = "Level 1";
               = "rgb(255, 136, 20,.75)";
            } else if ( == 3) {
               = "Level 2";
               = "rgba(86, 146, 240,.75)";
            } else if ( == 0) {
               = "none";
               = "rgba(0, 176, 80,.75)";
            }
          // }
        });
      };
    // Initialize rendering of Gantt chart    public initData(){
        //The size of the adaptive Gantt chart allows all tasks to be displayed without scroll bars        //  = "xy";
        // .open_tree_initially = true;
        //   .scale_unit = "day";
        .min_column_width = 60;
        .scale_height = 30 * 3;
        .row_height = 30;
        .drag_links = false;
        .drag_move = false;
        .drag_resize = false;
        .drag_progress = false;
        .correct_work_time = false;
         = true; // Allow editing (inline editing)        // Is there any new pop-up window        .details_on_create = false;
        // Click progress        .details_on_dblclick = false;
        .order_branch = false;
        .scroll_size = 15;
        // Editing configurations for different fields        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:"none",value:'0'},
          {label:"Level 1 risk(+)",value:'1'},
          {label:"Level 1 Risk",value:'2'},
          {label:"Second-level risk",value:'3'},
      ]};
        // The content displayed on the left directory menu         = [
          { name: "check", label: "", width: 40,
            template: function(task) {
                // Create a check box and add a unique ID to it for subsequent operations                var checkboxId = "checkbox_" + ;
                return "<input type='checkbox' id='" + checkboxId + "' class='gantt_checkbox' />";
            },
            align: "center" },
          { name: "index", label: "Serial Number", align: "center", width: 40 },
          { name: "name", label: "Power outage equipment", align: "left", width: 230, },
          { name: "start_date", label: "Start Time", align: "center", width: 180 },
          { name: "end_date", label: "End Time", align: "center", width: 180  },
          { name: "fxdjmc", label: "Risk Level", align: "center"  },
          { name: "add",label: "", onrender: (item: any) => {return " ";},},
        ];
        // Point to display details -- Whether the mouse levitation is displayed        ({
          tooltip: true,
        });
        // Mouse suspended content        .tooltip_text = function (start, end, task) {
          return (
            "<b>Device Name:</b> " +
             +
            "<br/><b>Start time:</b> " +
            .tooltip_date_format(start) +
            "<br/><b>End time:</b> " +
            .tooltip_date_format(end)
          );
        };
        .auto_types = true;
        .xml_date = "%Y-%m-%d";
         = 1;
        .start_on_monday = true;
         = false;
        .scroll_on_click = true;
        .calendar_property = "start_date";
        .calendar_property = "end_date";
        // The width of the table on the left         = true;
        .grid_width = 500;
        // The right head         = [
          { unit: "month", step: 1, format: "%F, %Y" },
          { unit: "week", step: 1, template:  },
          { unit: "day", step: 1, format: "%d", css:  },
        ];
  
        // Form judgment on holidays        .timeline_cell_class = (task, date): any =&gt; {
          if ((date)) {
            return "holiday";
          }
        };
        // Set the task bar progress content -- function is not required        // .progress_text = (start, end, task: any) =&gt; {
        //   return (
        //     "&lt;div style='text-align:left;color:#fff;padding-left:20px'&gt;" +
        //     ( * 100) +
        //     "% &lt;/div&gt;"
        //   );
        // };
  
        //Task bar display content        .task_text = function (start, end, task) {
          // return + '(' + + 'day)';          return "";
        };
        gantt.("cn");
        // Set progress color        ();
         // Clear cache         (); 
        // Initialize the Id of gantt_here to dom        ("gantt_here");
        // Data analysis        ();
        // Listen to new events        let _this = this;
        ("onTaskCreated", function (task) {
          //(task, "task");
          _this.flag = true;
          return false;
        });
        // Add event listener for each checkbox        (function(task:any) {
          var checkboxId = "checkbox_" + ;
          var checkbox = (checkboxId);
          if (checkbox) {
              // Add change event listener              ('change', function() {
                  // Some operations can be performed here, such as updating the task status or sending an Ajax request                  ('Task ' +  + ' is ' + (_this.checked ? 'checked' : 'unchecked'));
              });
          }
        });
    }