iTDM-web/itdmWeb/src/components/Gantt.vue

{{ src/components/Gantt.vue }}
<template>
  <div ref="gantt"></div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt';
import {getDeviceList, getJhList, getManagerList, getCgqList, saveProject} from '@/api/api'
export default {
  name: 'gantt',
  // props: {
  //   tasks: {
  //     type: Object,
  //     default () {
  //       return {data: [], links: [], collections:{}}
  //     }
  //   }
  // },
  data () {
    return {
      tasks: {
        data: [
        ],
        collections: {
          staff:[],
          manager:[],
          chuanganqi:[],
        },
        queryParam:{
          weituoNo: undefined
        }
      },
    }
  },
  created() {
    // 清空数据
    gantt.clearAll(); 
    this.getDevicelist();
    this.getCgqlist();
    this.getManagerList();
    console.log(1112,this.tasks)
  },
  methods: {
    // 获取设备下拉列表
    getDevicelist(){
      getDeviceList().then((res) => {
        this.tasks.collections.staff = res.map(response =>{
          return {
            value: response.id,
            label: response.deviceName
          }
        })
        this.initData()
      })
    },
    // 获取项目经理下拉列表
    getManagerList(){
      var query ={
        position: "项目经理"
      }
      getManagerList(query).then((res) => {
        console.log(17,res)
        this.tasks.collections.manager = res.map(response =>{
          return {
            value: response.id,
            label: response.name
          }
        })
        this.initData()
      })
    },
    // 获取传感器下拉列表
    getCgqlist(){
      getCgqList().then((res) => {
        this.tasks.collections.chuanganqi = res.map(response =>{
          return {
            value: response.id,
            label: response.xuliehao
          }
        })
        this.initData()
      })
    },
    // 通过委托编号查询检测项目
    getinit(queryParam){
      console.log(22,queryParam)
      getJhList(queryParam).then((res) => {
        console.log(res.result)
        this.tasks.data = []
        gantt.clearAll(); 
        this.tasks.data = res.result.map(res => {
          return {
            id: res.testItemsId,
            // text:res.reportNo,
            start_date: res.jihuaStartDate,
            // end_date: res.jihuaEndDate,
            duration: res.lastTime,
            sampleName: res.sampleName,
            testItems: res.testItems,
            taskProgress: res.status
          }
        })
        console.log(33,this.tasks)

        gantt.init(this.$refs.gantt);
        // gantt.parse(this.$props.tasks);
        gantt.parse(this.tasks);
      })
    },
    // 提交
    searchReset() {
      var json = gantt.serialize();
      console.log(json)
      saveProject(json.data).then((res) => {
        console.log(res)
      })
    },
    // // 今日线
    // createTodayLine() {
    //       var dateToStr = gantt.date.date_to_str("%Y年%M%d日");
    //       var markerId = gantt.addMarker({
    //         id: 'markerLine',
    //         start_date: new Date(),
    //         css: "today",
    //         text: "今日",
    //         title: dateToStr(new Date()) 
    //       });
    //       gantt.updateMarker(markerId);
    //     },
    // //定位到今日线
    // changeToday() {
    //       this.$nextTick(() => {
    //         let ganTT = document.getElementsByClassName('gantt_marker today')
    //         gantt.scrollTo(ganTT[0].offsetLeft-300, null);
    //       })
    // },
    initData(){
        // 启用动态加载
        gantt.config.branch_loading = true
        //日期格式化
        gantt.config.xml_date = "%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 }
          ],
          // rows: [
          //   {
          //     cols: [
          //       {
          //         width:400,
          //         min_width: 300,
          //         rows:[
          //           {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
          //           {view: "scrollbar", id: "gridScroll", group:"horizontal"}            ]
          //       },
          //       {resizer: true, width: 1},
          //       {
          //         rows:[
          //           {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
          //           {view: "scrollbar", id: "scrollHor", group:"horizontal"}            ]
          //       },
          //       {view: "scrollbar", id: "scrollVer"}
          //     ]
          //   },
          // ],
          // cols: [
          //   {
          //     width:400,
          //     min_width: 300,
          //     rows:[
          //       {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
          //       {view: "scrollbar", id: "gridScroll", group:"horizontal"}            ]
          //   },
          //   {resizer: true, width: 1},
          //   {
          //     rows:[
          //       {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
          //       {view: "scrollbar", id: "scrollHor", group:"horizontal"}            ]
          //   },
          //   {view: "scrollbar", id: "scrollVer"}
          // ]
        };
        // 重置布局
        gantt.resetLayout();
        // var state = gantt.getState();
 
        // console.log(55,state.min_date);
        
        // console.log(66,state.max_date);
        gantt.config.start_on_monday = true;
        gantt.config.work_time = true;
        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_test: "测试:",
            section_projectClass: "项目类型:",
            taskProjectType_0: "项目任务",
            taskProjectType_1: "普通任务",
            section_head: "项目经理:",
            section_device: "试验设备:",
            section_sensor: "传感器:",
            section_priority: '优先级:',
            taskProgress: '任务状态',
            taskProgress_0: "未确认",
            taskProgress_1: "已确认",
            taskProgress_2: "完成",
            taskProgress_3: "已延期",
            taskProgress_4: "搁置中",
            section_template: 'Details',
            /* grid columns */
            column_text: "计划名称",
            column_sampleName: "样品名称",
            column_testItems: "检测项目",
            column_start_date: "开始时间",
            column_duration: "持续时间",
            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: "年"
          }
        };

        //定义各种编辑器及类型(可直接双击左侧进行编辑，不需要弹窗)
        // var textEditor = {type: "text", map_to: "text"};
        // var startDateEditor = {type: "date", map_to: "start_date"};
        // var endDateEditor = {type: "date", map_to: "end_date"};
        //设置甘特图中各个列相关配置
        // gantt.config.columns = [
        //   {
        //     name: 'text',
        //     label: '项目名称',
        //     editor: textEditor,
        //     resize: true,
        //     tree: true,
        //     width: '100',
        //   },
        //   {
        //     name: 'start_date',
        //     label: '项目开始时间',
        //     align: "center",
        //     editor: startDateEditor,
        //     resize:true,
        //     tree: false,
        //     width: '130',
        //   },
        //   {
        //     name: 'end_date',
        //     label: '项目结束时间',
        //     width: '130',
        //     align: 'center',
        //     editor: endDateEditor,
        //     resize: true,
        //   },
        // ];
        // 左侧列表内容
        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: 100, resize: true, align: "center" },
          { name: "end_date", label: "结束时间", width: 100, resize: true, align: "center" },
          // { name: "taskProgress", label: "状态", width: 130, resize: true, align: "center", options: [
          //     { key: "0", label: gantt.locale.labels.taskProgress_0 },
          //     { key: "1", label: gantt.locale.labels.taskProgress_1 },
          //     { key: "2", label: gantt.locale.labels.taskProgress_2 },
          //   ],
          //   template:function(obj){
          //     console.log(obj)
          //   let re = '';
          //   switch (obj.taskProgress) {
          //     case "0":
          //       re = `<div class='taskProgress color_bg_1' >未开始</div>`
          //       break;
          //     case "1":
          //       re = `<div class='taskProgress color_bg_2' >进行中</div>`
          //       break;
          //     case "2":
          //       re = `<div class='taskProgress color_bg_3'  >已完成</div>`
          //       break;
          //   }
          //   return re
          //   }
          // },
          { name: "add", label:"", width: 30 }
        ];
        //弹出层(灯箱)
        gantt.config.lightbox.sections = [
          // { name: "text", height: 30, map_to: "text", type: "textarea", focus: true, width: "*" },
          {
            name: "time", height: 40, map_to: "auto", type: "duration",
            time_format: ["%Y", "%m", "%d"],
            
          },
          { name: "head", height: 30, map_to: "head_id", type: "select", options:gantt.serverList("manager") },
          {
            name: "device", height: 30, map_to: "device_id", type: "select", options: gantt.serverList('staff',[]),
          },
          {
            name: "sensor", height: 30, map_to: "sensor_id", type: "select", options: gantt.serverList('chuanganqi',[]),
          },
          // { name: "description", height: 70, map_to: "description", type: "textarea" },
          // {
          //   name: "priority", height: 40, map_to: "priority", type: "radio", options: gantt.serverList("priority")
          // },

        ];
        // 删除灯箱中的删除按钮
        gantt.config.buttons_right = [];
        


        gantt.init(this.$refs.gantt);
        // gantt.parse(this.$props.tasks);
        gantt.parse(this.tasks);
    }
  }
}
</script>

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .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 ;
    }
</style>