甘特图显示

src/api/mes/pro/protask.js

@@ -9,6 +9,16 @@ export function listProtask(query) {
   })
 }
 
+// 查询生产任务列表
+export function listGanttTaskList(query) {
+  return request({
+    url: '/mes/pro/protask/listGanttTaskList',
+    method: 'get',
+    params: query
+  })
+}
+
+
 // 查询生产任务详细
 export function getProtask(taskId) {
   return request({

src/views/mes/pro/schedule/ganttx.vue

@@ -26,7 +26,9 @@ export default {
   mounted: function () {
     // 初始化甘特图配置
     this.initConfig();
-
+    gantt.plugins({
+      marker: true
+    });
     // 甘特图初始化和导入数据
     gantt.init(this.$refs.gantt);
     gantt.parse(this.tasks);
@@ -36,6 +38,23 @@ export default {
     // 初始化甘特图数据
     initData() {
 
+    },
+    reload() {
+      gantt.clearAll();
+      this.addTodayLine();
+      gantt.parse(this.$props.tasks);
+      gantt.render();
+    },
+    addTodayLine() {
+      // 时间线
+      var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
+      var today = new Date();
+      gantt.addMarker({
+        start_date: today,
+        css: "today",
+        text: "今天",
+        title: "今天: " + date_to_str(today)
+      });
     },
     // 初始化甘特图配置
     initConfig() {
@@ -43,38 +62,84 @@ export default {
       // 1.1 甘特图是否只读
       gantt.config.readonly = true;
       // 1.2 表格列设置
+      gantt.config.duration_unit="hour";
+      gantt.config.duration_step=8;
+      gantt.config.grid_width=520;
       gantt.config.columns = [
-        {name:"text", label:"任务名", tree:true, width:'100' },
+        {name:"text", label:"任务名", tree:true, width:'200' },
         {name:"workstation",label:"工作站",align:"center",width:'*'},
+        {name:"process",label:"工序",align:"center",width:'*'},        
         {name:"start_date", label:"开始时间", align:"center", width:'*' },
         {name:"end_date", label:"结束时间", align:"center" , width:'*'},
-        // {name:"duration",   label:"Duration",   align: "center" },
       ];
       // 1.3 设置中文
       gantt.i18n.setLocale("cn");
       // 1.4 鼠标悬浮框
       gantt.plugins({tooltip: true});// 启用tooltip悬浮框
       gantt.templates.tooltip_text = function(start, end, task) {
-        return "<b>任务名称:</b> "+task.text+"<br/><b>时长:</b> " + task.duration+"天<br/><b>说明:</b>" +task.toolTipsTxt;
+        if(task.type=='project'){
+          return "<b style='text-align:left;'>生产工单:</b> " + task.text +"    <span style='text-align:left;'>" +" 完成比例："+ Math.round(task.progress * 100) + "% </span>";
+        }else{
+          return "<b style='text-align:left;'>生产任务:</b> "+task.process+" "+ task.text +"    <span style='text-align:left;'>" +" 完成比例："+ Math.round(task.progress * 100) + "% </span>";
         }
+      };
+
+
       // 1.5 初始化的时候就展开树结构
       gantt.config.open_tree_initially = true;
       // 1.6 显示到任务上的文本
       gantt.templates.task_text = function (start, end, task) {
-        return "<b style='text-align:left;'>计划名称:</b> " + task.text +"    <span style='text-align:left;'>" +" 完成计划："+ Math.round(task.progress * 100) + "% </span>";
+        if(task.type=='project'){
+          return "<b style='text-align:left;'>生产工单:</b> " + task.text +"    <span style='text-align:left;'>" +" 完成比例："+ Math.round(task.progress * 100) + "% </span>";
+        }else{
+          return "<b style='text-align:left;'>生产任务:</b> "+task.process+" "+ task.text +"    <span style='text-align:left;'>" +" 完成比例："+ Math.round(task.progress * 100) + "% </span>";
+        }
+        
       };
       // 1.7 显示单元格
       gantt.config.show_task_cells = true;
 
       // 2 时间配置
       // 2.1 时间坐标轴单位 minute/hour/day/week/quarter/month/year
-      gantt.config.scale_unit = "day";
+     // gantt.config.scale_unit = "hour";
       // 2.2 日期格式
-      gantt.config.date_scale = "%d";
+     // gantt.config.date_scale = "%H";
       // 2.3 时间坐标为月份的时候  先显示年份再月份
-      gantt.config.subscales = [{unit: "month", step: 1, date: "%Y,%F"}];
+     // gantt.config.subscales = [{unit: "month", step: 1, date: "%Y,%F"}];
+      
+      var weekScaleTemplate = function (date) {
+        var dateToStr = gantt.date.date_to_str("%M %d");
+        var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
+        return dateToStr(date) + " - " + dateToStr(endDate);
+      };
+
+      var dayTemplate = function(date){
+        var dateToStr = gantt.date.date_to_str("%M %d");
+        var weekDay = gantt.date.date_to_str("%D");
+        return dateToStr(date); + "(" + weekDay(date) + ")";
+      };
+
+      var daysStyle = function(date){
+          // you can use gantt.isWorkTime(date)
+          // when gantt.config.work_time config is enabled
+          // In this sample it's not so we just check week days
+
+          if(date.getDay() === 0 || date.getDay() === 6){
+            return "weekend";
+          }
+          return "";
+        };
+
+      gantt.config.scales =[
+        {unit:"week", step:1,format: weekScaleTemplate},
+        {unit:"day", step:1,format: dayTemplate,css: daysStyle},
+        {unit:"hour", step:8,format: "%H:%i"}, //这里的step要根据当前的班次设置来。如果是三班倒则是8，如果是两班倒则是12。
+      ]
+      
+      gantt.config.scale_height = 50;
+
       // 2.4 定义从后端获取或发送到后端的日期数据解析格式
-      gantt.config.xml_date = "%Y-%m-%d";
+      gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
 
       // 3 拖动配置
       // 3.1 自动调整类型,当存在子节点时自动升级为project
@@ -82,7 +147,7 @@ export default {
       // 3.2 设置不可以拖动进度
       gantt.config.drag_progress = true;
       // 3.3 设置Task不可以拖动
-      gantt.config.drag_move = false;
+      gantt.config.drag_move = true;
       // 3.4 设置不可以拖动关系
       gantt.config.drag_links = true;
       // 3.5 设置不可拖动Task 大小
@@ -189,4 +254,13 @@ export default {
     width: calc(100% - 199px) !important;
     left: 199px;
   }
+
+  .scaleStyle{
+    height: 20px;
+  }
+  /* 周末背景颜色 */
+  .weekend{
+    background: rgb(189, 185, 186) !important;
+    width: 30s
+  }  
 </style>

src/views/mes/pro/schedule/index.vue

@@ -268,6 +268,7 @@
 
 <script>
 import { listWorkorder, getWorkorder, delWorkorder, addWorkorder, updateWorkorder } from "@/api/mes/pro/workorder";
+import {listGanttTaskList} from "@/api/mes/pro/protask";
 import { listProductprocess } from "@/api/mes/pro/routeprocess";
 import ProTask from "./proTask.vue";
 import GanttChar from "./ganttx.vue";
@@ -330,14 +331,8 @@ export default {
         status: null,
       },
       tasks:{
-        data: [
+        data: [],
-          {id: "MO202205150001", text: '移液盒【黑色】10000个', start_date: '2020-01-17', duration: 23, progress: 0.6,type: 1},
+        links: []
-          {id: 2, text: 'Task #1', start_date: '2020-01-20', duration: 30, progress: 0.4, parent:"MO202205150001", type: 2},          
-          {id: 3, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4, parent: "MO202205150001", type: 2},
-          {id: "MO202205150002", text: '96孔孔板 10000个', start_date: '2020-01-17', duration: 23, progress: 0.6, parent:"MO202205150001", type: 1},
-          {id: 4, text: 'Task #3', start_date: '2020-01-20', duration: 30, progress: 0.4, parent:"MO202205150002", type: 2},          
-          {id: 5, text: 'Task #4', start_date: '2020-01-20', duration: 3, progress: 0.4, parent: "MO202205150002", type: 2},
-        ],
       },
       // 表单参数
       form: {},
@@ -345,6 +340,7 @@ export default {
   },
   created() {
     this.getList();
+    this.getGanttTasks();
   },
   methods: {
     /** 查询生产工单列表 */
@@ -355,6 +351,16 @@ export default {
         this.loading = false;
       });
     },
+
+    getGanttTasks(){
+      listGanttTaskList(this.queryParams).then(response =>{
+        debugger;
+        this.tasks.data = response.data.data;
+        this.tasks.links = response.data.links;
+        this.$refs.ganttChar.reload();
+      });
+    },
+
     getProcess(){
         listProductprocess(this.form.productId).then(response =>{
             this.processOptions = response.data;

src/views/mes/pro/schedule/proTask.vue

@@ -272,7 +272,7 @@ export default {
                   + '00';
           this.form.startTime = startDate;
           startDate = Date.parse(new Date(startDate))/1000; 
-          startDate += (3600) * this.form.duration; 
+          startDate += (3600)* 8 * this.form.duration; //这里以8小时为一个单位
           let endDate = new Date(parseInt(startDate) * 1000); 
           this.form.endTime =endDate.getFullYear() + '-' 
                         + (endDate.getMonth()+1) + '-'