<template>
    <div class="container" style="height:650px;">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="getHjlist">
                <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="委托编号">
                    <a-input placeholder="请输入委托编号" v-model="tasks.queryParam.weituoNo"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="getHjlist" icon="search">查询</a-button>
                    <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">提交</a-button> -->
                    </span>
                </a-col>
                </a-row>
            </a-form>
        </div>
        <div ref="gantt" :tasks="tasks" style="height:600px;"></div>
    </div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt';
import { notification } from 'ant-design-vue';
import {getDeviceList, getXmjlList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
import store from '@/store'
export default {
  name: 'gantt',
  data () {
    return {
      tasks: {
        data: [
        ],
        collections: {
          staff:[],
          staff2:[],
          worker:[],
          chuanganqi:[],
          chuanganqi2:[],
          testTypeOptions: [],
        },
        queryParam:{
          weituoNo: undefined
        },
      },
    }
  },
  created() {
    // 清空数据
    gantt.clearAll();
    // 获取当前登录用户的信息
    console.log(store.getters.userInfo)
    this.getDevicelist();
    this.getCgqlist();
    this.getManagerList();
    this.initDictConfig();
    // this.initData()
  },
  beforeDestroy() {
    gantt.clearAll();
  },
  mounted() {
      // 启用动态加载
      gantt.config.branch_loading = true
      //日期格式化
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.config.date_format = "%Y-%m-%d";
      gantt.config.order_branch = true;
      gantt.config.order_branch_free = true;
      //左侧是否自适应
      gantt.config.autofit = true;
      gantt.config.drag_links = false;//连线
      gantt.config.readonly = false;  //只读
      gantt.config.date_scale = "%m月%d日"; //右侧显示列名
      gantt.config.layout = {//拖拽布局
        css: "gantt_container",
        rows: [
          {
            cols: [
              { view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer" },
              { resizer: true, width: 1 },
              { view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
              { view: "scrollbar", scroll: "y", id: "scrollVer" }
            ]
          },
          { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
        ],
      };
      // 重置布局
      gantt.resetLayout();
      gantt.config.start_on_monday = true;
      gantt.config.work_time = false;
      gantt.config.fit_tasks = true;   //自动调整图表坐标轴区间用于适配task的长度
      // 甘特图汉化
      gantt.locale = {
        date: {
          month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          day_short: ["日", "一", "二", "三", "四", "五", "六"]
        },
        labels: {
          dhx_cal_today_button: "今天",
          day_tab: "日",
          week_tab: "周",
          month_tab: "月",
          new_event: "新建日程",
          icon_save: "保存",
          icon_cancel: "关闭",
          icon_details: "详细",
          icon_edit: "编辑",
          icon_delete: "删除",
          confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
          confirm_deleting: "是否删除计划?",
          section_description: "描述:",
          section_time: "时间范围:",
          section_type: "类型:",
          section_text: "计划名称:",
          section_neirong: "内容:",
          section_test: "测试:",
          section_projectClass: "项目类型:",
          taskProjectType_0: "项目任务",
          taskProjectType_1: "普通任务",
          section_head: "项目经理:",
          section_device: "试验设备:",
          section_sensor: "传感器:",
          section_reportNo: "报告编号:",
          section_shiiyanType: "试验类型:",
          section_worker: "试验员:",
          section_yangpinCount: "样品数量:",
          section_priority: '优先级:',
          status: '任务状态',
          status_0: "未确认",
          status_1: "已确认",
          status_2: "完成",
          status_3: "已延期",
          status_4: "搁置中",
          section_template: 'Details',
          /* grid columns */
          column_text: "计划名称",
          column_sampleName: "样品名称",
          column_testItems: "检测项目",
          column_start_date: "开始时间",
          column_duration: "持续时间",
          column_lastTime: "持续时间",
          column_add: "",
          column_priority: "难度",
          /* link confirmation */
          link: "关联",
          confirm_link_deleting: "将被删除",
          link_start: " (开始)",
          link_end: " (结束)",
          type_task: "任务",
          type_project: "项目",
          type_milestone: "里程碑",

          minutes: "分钟",
          hours: "小时",
          days: "天",
          weeks: "周",
          months: "月",
          years: "年"
        }
      };
      // 删除左侧列表表头的add按钮
      gantt.templates.grid_header_class = function(columnName, column){
        if (columnName == 'add') {
          return "noShow";
        }
      };
      // 左侧列表内容
      gantt.config.columns = [
        // { name: "text", min_width:100,max_width:200, label:"任务", align: "left",resize: true, tree: true },
        { name: "testItems", label: "检测项目", width: 130, resize: true, align: "left",resize: true, tree: true },
        { name: "sampleName", label: "样品名称", width: 90, resize: true, align: "center" },
        { name: "start_date", label: "开始时间", width: 90, resize: true, align: "center" },
        { name: "end_date", label: "结束时间", width: 90, resize: true, align: "center" },
        { name: "statusC", label: "状态", width: 60, resize: true, align: "center" },
        { name: "add", label:"", width: 30 }
      ];
      // 更改左侧显示的结束日期时间
      gantt.templates.task_end_date = function(date){
        return gantt.templates.task_date(new Date(date.valueOf() - 1));
      };
      var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
      gantt.templates.grid_date_format = function(date, column){
        if(column === "end_date"){
          return gridDateToStr(new Date(date.valueOf() - 1));
        }else{
          return gridDateToStr(date);
        }
      }
      // 右侧项目展示
      gantt.templates.task_text = function (start, end, task) {
        console.log("右侧展示",task)
        if (task.parent == 0) {
          return task.pm + ", " + task.deviceName;
        } else {
          return task.worker + ", " + task.deviceName;
        }
        // return task.worker + ", " + task.deviceName;
      };
      // 灯箱多选框
      gantt.form_blocks["multiselect"] = {
        render: function (sns) {
          var height = (sns.height || "23") + "px";
          var html = "<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect'"+
            "style='height:"+ height + ";'><select data-placeholder='...'"+
            "class='chosen-select' multiple>";
          if (sns.options) {
            for (var i = 0; i < sns.options.length; i++) {
              if(sns.unassigned_value !== undefined && sns.options[i].key==sns.unassigned_value){
                continue;
              }
              html+="<option value='" +sns.options[i].key+ "'>"+sns.options[i].label+"</option>";
            }}
          html += "</select></div>";
          return html;},
        set_value: function (node, value, ev, sns) {
          node.style.overflow = "visible";
          node.parentNode.style.overflow = "visible";
          node.style.display = "inline-block";
          var select = $(node.firstChild);
          if (value) {
            value = (value + "").split(",");
            select.val(value);
          }
          else {
            select.val([]);
          }
          select.chosen();
          if(sns.onchange){
            select.change(function(){
              sns.onchange.call(this);
            })
          }
          select.trigger('chosen:updated');
          select.trigger("change");},
        get_value: function (node, ev) {
          var value = $(node.firstChild).val();
          //value = value ? value.join(",") : null
          return value;},
        focus: function (node) {
          $(node.firstChild).focus();
        }};
      // 单击获取当前行信息
      // gantt.attachEvent("onTaskRowClick", function (id, e){
      //   let that = this
      //   console.log("单击当前行",id,e)
      //   gantt.getTask(id);
      //     //any custom logic here
      //     return true;
      // });
      // 给灯箱赋默认值(将父任务的参数赋给灯箱)
      gantt.attachEvent("onTaskCreated", function(task){
        console.log("给灯箱赋默认值",task,gantt.getTask(task.parent))
        // 灯箱部分
        task.shebeiId = gantt.getTask(task.parent).shebeiId
        // task.reportNo = gantt.getTask(task.parent).reportNo
        task.chuanganqiArray = gantt.getTask(task.parent).chuanganqiArray
        // 灯箱虽不展示，但也要赋值
        task.deviceName = gantt.getTask(task.parent).deviceName
        task.yangpinId = gantt.getTask(task.parent).yangpinId
        task.sampleName = gantt.getTask(task.parent).sampleName
        task.shijiStartDate = gantt.getTask(task.parent).shijiStartDate
        task.testItems = gantt.getTask(task.parent).testItems
        task.testItemsId = gantt.getTask(task.parent).testItemsId
        task.testPlanId = gantt.getTask(task.parent).testPlanId
        task.weituoId = gantt.getTask(task.parent).weituoId
        task.weituoNo = gantt.getTask(task.parent).weituoNo
        console.log("第二个",task)
        return true;
      });
      //弹出层(灯箱)
      // gantt.config.lightbox.sections = [
      // ];
      // 根据判断不同级别任务弹不同的灯框（并展示不同的按钮）
      var full_lightbox =[
        {
          name: "time", height: 40, map_to: "auto", type: "duration",
          time_format: ["%Y", "%m", "%d"],
        },
        // { name: "reportNo", height: 30, map_to: "reportNo", type: "textarea", },
        { name: "device", height: 30, map_to: "shebeiId", type: "select", options: gantt.serverList('staff2',[]), },
        { name: "sensor", height: 30, map_to: "chuanganqiArray", type: "multiselect", options: gantt.serverList('chuanganqi2',[]), },
        { name: "shiiyanType", height: 30, map_to: "shiiyanTypeArray", type: "multiselect", options: gantt.serverList('testTypeOptions',[]), },
        { name: "worker", height: 30, map_to: "worker", type: "select", options: gantt.serverList('worker',[]), },
        { name: "yangpinCount", height: 30, map_to: "yangpinCount", type: "textarea", width: 60 },
        { name: "neirong", height: 45, map_to: "neirong", type: "textarea", focus: true, width: "*", },
      ];
      var restricted_lightbox = [
        {
          name: "time", height: 40, map_to: "auto", type: "duration",
          time_format: ["%Y", "%m", "%d"],
        },
        { name: "reportNo", height: 30, map_to: "reportNo", type: "textarea" },
        { name: "device", height: 30, map_to: "shebeiId", type: "select", options: gantt.serverList('staff',[]), },
        { name: "sensor", height: 30, map_to: "chuanganqiArray", type: "multiselect", options: gantt.serverList('chuanganqi',[]), },
      ];
      gantt.attachEvent("onBeforeLightbox", function(task_id) {
        gantt.resetLightbox();
        var task = gantt.getTask(task_id);
        // console.log("重置灯箱",task)
        if (task.$level == 0){
          gantt.config.lightbox.sections = restricted_lightbox;
          gantt.config.buttons_left = ["gantt_cancel_btn"];
          gantt.config.buttons_right = [];
        } else {
          gantt.config.lightbox.sections = full_lightbox;
          gantt.config.buttons_left = ["gantt_save_btn", "gantt_cancel_btn"];
          gantt.config.buttons_right = ["gantt_delete_btn"];
        };
        return true;
      });
      // 展示灯箱里的删除按钮
      // gantt.config.buttons_right = ["gantt_delete_btn"];
      // 点击灯箱的保存按钮触发
      let that = this
      gantt.attachEvent("onLightboxSave", function(id, task, is_new){
        console.log(id, task, is_new)
        let y = task.start_date.getFullYear()
        let m = task.start_date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = task.start_date.getDate()
        d = d < 10 ? ('0' + d) : d
        task.jihuaStartDate = y + '-' + m + '-' + d ;
        // task.jihuaStartDate = task.start_date
        task.lastTime = task.duration
        console.log("提交",task)
        saveProjectJl(task).then((res) => {
          console.log("提交返回",task,res)
          gantt.clearAll();
          gantt.init(that.$refs.gantt);
          gantt.parse(that.tasks);
          // that.getHjlist(that.tasks.queryParam)
        })
        return true;
      })
      // 点击灯箱删除按钮触发
      gantt.attachEvent("onLightboxDelete", function(id){
        const task = gantt.getTask(id);
        console.log(task)
        if (task.statusC == "不可修改"){
          // alert("该项已进行，不可修改");
          notification.open({
            message: '注意',
            description: "该项已进行，不可修改",
          });
          gantt.hideLightbox();
          return false;
        }else{
          return true;
        }
      })
      // 在删除任务之前触发
      gantt.attachEvent("onBeforeTaskDelete", function(id,item){
        var select={id:id}
        delProjectJl(select).then((res) => {
          console.log("删除",res)
          if (res.success) {
            return true;
          } else {
            return false;
          }
        })
        //any custom logic here
        // return true;
      });
      // 隐藏某行的添加按钮
      gantt.templates.grid_row_class = function( start, end, task ){
        // console.log("隐藏",task)
        if ( task.$level > 0 ){
          return "nested_task"
        }
        return "";
      };
      // // 自定义弹框
      // let that = this
      // gantt.attachEvent("onTaskDblClick", function (id, e){
      //   console.log(111,id, e);
      //   that.id = id
      //   gantt.getTask(that.id);
      //   console.log("双击获取当前行信息",gantt.getTask(that.id),gantt.getTask(that.id).parent);
      //   if (gantt.getTask(that.id).parent  == 0) {
        // 单击获取当前行信息
        // gantt.attachEvent("onTaskRowClick", function (id, e){
        //   let that = this
        //   console.log("单击当前行",id,e)
        //   gantt.getTask(id);
        //     //any custom logic here
        //     return true;
        // });
        // 给灯箱赋默认值(将父任务的参数赋给灯箱)
        gantt.attachEvent("onTaskCreated", function(task){
          console.log("给灯箱赋默认值",task,gantt.getTask(task.parent))
          if (task.parent == undefined) {
            return false;
          } else {
            // 灯箱部分
          task.shebeiId = gantt.getTask(task.parent).shebeiId
          // task.reportNo = gantt.getTask(task.parent).reportNo
          task.chuanganqiArray = gantt.getTask(task.parent).chuanganqiArray
          // 灯箱虽不展示，但也要赋值
          task.deviceName = gantt.getTask(task.parent).deviceName
          task.yangpinId = gantt.getTask(task.parent).yangpinId
          task.sampleName = gantt.getTask(task.parent).sampleName
          task.shijiStartDate = gantt.getTask(task.parent).shijiStartDate
          task.testItems = gantt.getTask(task.parent).testItems
          task.testItemsId = gantt.getTask(task.parent).testItemsId
          task.testPlanId = gantt.getTask(task.parent).testPlanId
          task.weituoId = gantt.getTask(task.parent).weituoId
          task.weituoNo = gantt.getTask(task.parent).weituoNo
          console.log("第二个",task)
            return true;
          }
        });
        //弹出层(灯箱)
        // gantt.config.lightbox.sections = [
        // ];
        // 根据判断不同级别任务弹不同的灯框（并展示不同的按钮）
        var full_lightbox =[
          {
            name: "time", height: 40, map_to: "auto", type: "duration",
            time_format: ["%Y", "%m", "%d"],
          },
          // { name: "reportNo", height: 30, map_to: "reportNo", type: "textarea", },
          { name: "device", height: 30, map_to: "shebeiId", type: "select", options: gantt.serverList('staff2',[]), },
          { name: "sensor", height: 30, map_to: "chuanganqiArray", type: "multiselect", options: gantt.serverList('chuanganqi2',[]), },
          { name: "shiiyanType", height: 30, map_to: "shiiyanTypeArray", type: "multiselect", options: gantt.serverList('testTypeOptions',[]), },
          { name: "worker", height: 30, map_to: "worker", type: "select", options: gantt.serverList('worker',[]), },
          { name: "yangpinCount", height: 30, map_to: "yangpinCount", type: "textarea", width: 60 },
          { name: "neirong", height: 45, map_to: "neirong", type: "textarea", focus: true, width: "*", },
        ];
        var restricted_lightbox = [
          {
            name: "time", height: 40, map_to: "auto", type: "duration",
            time_format: ["%Y", "%m", "%d"],
          },
          { name: "reportNo", height: 30, map_to: "reportNo", type: "textarea" },
          { name: "device", height: 30, map_to: "shebeiId", type: "select", options: gantt.serverList('staff',[]), },
          { name: "sensor", height: 30, map_to: "chuanganqiArray", type: "multiselect", options: gantt.serverList('chuanganqi',[]), },
        ];
        gantt.attachEvent("onBeforeLightbox", function(task_id) {
            gantt.resetLightbox();
            var task = gantt.getTask(task_id);
            // console.log("重置灯箱",task)
            if (task.$level == 0){
                gantt.config.lightbox.sections = restricted_lightbox;
                gantt.config.buttons_left = ["gantt_cancel_btn"];
                gantt.config.buttons_right = [];
            } else {
                gantt.config.lightbox.sections = full_lightbox;
                gantt.config.buttons_left = ["gantt_save_btn", "gantt_cancel_btn"];
                gantt.config.buttons_right = ["gantt_delete_btn"];
            };
            return true;
        });
        // 展示灯箱里的删除按钮
        // gantt.config.buttons_right = ["gantt_delete_btn"];
        // 点击灯箱的保存按钮触发
        let that = this
        gantt.attachEvent("onLightboxSave", function(id, task, is_new){
            console.log(id, task, is_new)
            let y = task.start_date.getFullYear()
            let m = task.start_date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            let d = task.start_date.getDate()
            d = d < 10 ? ('0' + d) : d
            task.jihuaStartDate = y + '-' + m + '-' + d ;
            // task.jihuaStartDate = task.start_date
            task.lastTime = task.duration
            console.log("提交",task)
            saveProjectJl(task).then((res) => {
              console.log("提交返回",task,res)
              gantt.init(that.$refs.gantt);
              gantt.parse(that.tasks);
              // that.getHjlist(that.tasks.queryParam)
            })
            return true;
        })
        // 点击灯箱删除按钮触发
        gantt.attachEvent("onLightboxDelete", function(id){
            const task = gantt.getTask(id);
            console.log(task)
            if (task.statusC == "不可修改"){
                // alert("该项已进行，不可修改");
                notification.open({
                  message: '注意',
                  description: "该项已进行，不可修改",
                });
                gantt.hideLightbox();
                return false;
            }else{
              return true;
            }
        })
        // 在删除任务之前触发
        gantt.attachEvent("onBeforeTaskDelete", function(id,item){
          var select={id:id}
          delProjectJl(select).then((res) => {
            console.log("删除",res)
            if (res.success) {
              return true;
            } else {
              return false;
            }
          })
          //any custom logic here
          // return true;
        });
        // 隐藏某行的添加按钮
        gantt.templates.grid_row_class = function( start, end, task ){
          // console.log("隐藏",task)
            if ( task.$level > 0 ){
                return "nested_task"
            }
            return "";
        };
        // // 自定义弹框
        // let that = this
        // gantt.attachEvent("onTaskDblClick", function (id, e){
        //   console.log(111,id, e);
        //   that.id = id
        //   gantt.getTask(that.id);
        //   console.log("双击获取当前行信息",gantt.getTask(that.id),gantt.getTask(that.id).parent);
        //   if (gantt.getTask(that.id).parent  == 0) {

      //   } else {

      //   }
      //     return true;
      // });


      gantt.init(this.$refs.gantt);
      // gantt.parse(this.tasks);

  },

  methods: {
    // 获取设备下拉列表
    getDevicelist(){
      getDeviceList().then((res) => {
        this.tasks.collections.staff = res.map(response =>{
          return {
            value: response.id,
            label: response.deviceName
          }
        })
        this.tasks.collections.staff2 = this.tasks.collections.staff
        //this.initData()
      })
    },
    // 获取传感器下拉列表
    getCgqlist(){
      getCgqList().then((res) => {
        this.tasks.collections.chuanganqi = res.map(response =>{
          return {
            key: response.id,
            value: response.id,
            label: response.xuliehao
          }
        })
        this.tasks.collections.chuanganqi2 = this.tasks.collections.chuanganqi
       // this.initData()
      })
    },
    // 获取项目经理下拉列表
    getManagerList(){
      var query ={
        position: "项目经理"
      }
      getManagerList(query).then((res) => {
        this.tasks.collections.worker = res.map(response =>{
          return {
            key: response.name,
            value: response.id,
            label: response.name
          }
        })
       // this.initData()
      })
    },
    // 字典获取试验类型下拉列表
    initDictConfig() {
      //获取字典       你的字典名称 ⬇⬇⬇⬇
      ajaxGetDictItems('shiiyan_type').then((res) => {
        console.log('字典',res)
          this.tasks.collections.testTypeOptions = res.result.map(response =>{
          return {
            key: response.value,
            value: response.value,
            label: response.label
          }
        })
          // this.testTypeOptions = res.result
        //this.initData()
      })
    },
    // 通过委托编号查询检测项目
    getHjlist(){
      let that = this
      var queryParam = that.tasks.queryParam
      console.log(22,queryParam)
      getXmjlList(queryParam).then((res) => {
        console.log(17,res)
        that.tasks.data = []
        gantt.clearAll();
        if (res.result.length > 0 ) {
          that.tasks.data = res.result.map(res => {
            return {
              id: res.id,
              parent: res.parent,

              weituoId: res.weituoId,
              testItemsId: res.testItemsId,
              yangpinId:res.yangpinId,
              shebeiId:res.shebeiId,
              pm: res.pm,
              reportNo: res.reportNo,
              chuanganqiArray:res.chuanganqiArray,
              testPlanId:res.testPlanId,
              status:res.status,
              pm: res.pm,

              weituoNo: res.weituoNo,
              neirong: res.neirong,
              start_date: res.jihuaStartDate,
              // jihuaEndDate: res.jihuaEndDate,
              shiiyanTypeArray: res.shiiyanTypeArray,
              shijiStartDate: res.shijiStartDate,
              worker: res.worker,
              yangpinCount:res.yangpinCount,

              duration: res.lastTime,
              sampleName: res.sampleName,
              testItems: res.testItems,
              deviceName: res.deviceName,
              statusC: res.statusC
            }
          })
          gantt.init(this.$refs.gantt);
          gantt.parse(that.tasks);

          // gantt.init(this.$refs.gantt);
          // // gantt.parse(this.$props.tasks);
          // gantt.parse(this.tasks);
        } else {
          notification.open({
            message: '注意',
            description: '该委托编号不存在',
          });
        }
        // gantt.init(this.$refs.gantt);
        // gantt.parse(this.tasks);
      })
    },
    // // 提交
    // searchReset() {
    //   var json = gantt.serialize();
    //   console.log(json)
    //   var data = json.data.map( res => {
    //     return{
    //       weituoId: res.weituoId,
    //         testItemsId: res.testItemsId,
    //         yangpinId:res.yangpinId,
    //         shebeiId:res.shebeiId,
    //         pm: res.pm,
    //         jihuaStartDate: res.start_date,
    //         lastTime: res.duration,
    //         // jihuaEndDate: res.jihuaEndDate,
    //         reportNo: res.reportNo,
    //         chuanganqiArray:res.chuanganqi,
    //         testPlanId:res.testPlanId,
    //         status:res.status,
    //         testItems: res.testItems,
    //     }
    //   })
    //   console.log(data.length)
    // },

  }
}
</script>

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .gantt_cal_larea{
			overflow:visible;
		}
    .gantt_cal_larea{
      padding-bottom: 10px;
    }
    .gantt_cal_chosen,
		.gantt_cal_chosen select{
			width: 400px;
      margin-bottom: 10px;
		}
    /* ::v-deep .gantt_task_content{
      font-size: 8px !important;
    } */
    .taskProgress{
      margin: 0 auto;
      margin-top: 5px;
      height: 24px;
      width: 65px;
      font-size: 12px;
      line-height: 24px;
      font-weight: bold;
      color: #f7fbfe;
      border-radius: 20px;
    }
    .color_bg_1{
      background-color:#60a3bc ;
    }
    .color_bg_2{
      background-color:#079992 ;
    }
    .color_bg_3{
      background-color:#78e08f ;
    }
    .nested_task .gantt_add{
        display: none !important;
    }
    .noShow{
      display: none !important;
    }
</style>
