From a81eea91ca770a86da95f132f8c6e8a5db3dc5a8 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 24 Nov 2023 11:38:23 +0800
Subject: [PATCH] =?UTF-8?q?gantt=E5=9B=BE=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GanttComponent.vue | 30 +++++++++++++++---
 src/views/pm/mtask2.vue           | 51 ++++++++++++-------------------
 2 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/components/GanttComponent.vue b/src/components/GanttComponent.vue
index 8162fb21..0d26a515 100644
--- a/src/components/GanttComponent.vue
+++ b/src/components/GanttComponent.vue
@@ -28,25 +28,43 @@
             },
         },
         mounted: function () {
-            gantt.i18n.setLocale('cn');
+            gantt.clearAll();// 清空之前的配置
+            gantt.i18n.setLocale('cn'); // 设置中文
             gantt.config.date_format = "%Y-%m-%d";
             gantt.config.date_grid = "%Y/%m/%d";
-            gantt.config.readonly = true;
-            gantt.config.autosize = true;
+            gantt.config.readonly = true; // 设置中文
+            gantt.config.autosize = true;//自适应尺寸
             gantt.plugins({tooltip: true});
+            gantt.config.bar_height = 20; //task高度
             // gantt.config.start_date = new Date(2023, 9, 1);
             // gantt.config.end_date = new Date(2023, 9, 10);
+            //更改父项图标
+            // gantt.templates.grid_folder = (item) => {
+            //     return ""
+            // }
+            //更改子项图标
+            // gantt.templates.grid_file = (item) => {
+            //     return ""
+            // }
             gantt.config.columns = [
                 {name: 'number',label: '任务编号',tree: true,width: '*',align: 'left'},
                 {name: 'cate',label: '规格型号', width: '70',align: 'center'},
                 {name: 'count',label: '完成量',width: '50', align: 'center'}
             ];
             gantt.attachEvent('onGanttReady', function () {
-                // var tooltips = gantt.ext.tooltips;
                 gantt.templates.tooltip_text = function (start, end, task) {
-                    return task.number + '<br/>计划产量：' + task.count + '<br/>当日产量：' + task.count + '<br/>完成产量：' + task.count + '<br/>开工时间：' + gantt.templates.tooltip_date_format(start) + '<br/>完工时间：' + gantt.templates.tooltip_date_format(end);
+                    return task.number + 
+                    '<br/>计划产量：' + task.count + 
+                    '<br/>当日产量：' + task.count_real + 
+                    '<br/>完成产量：' + task.count_ok + 
+                    '<br/>开工时间：' + gantt.templates.tooltip_date_format(start) + 
+                    '<br/>完工时间：' + gantt.templates.tooltip_date_format(start);
                 };
             });
+            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
+            // gantt.config.autosize = true;
+            // gantt.config.open_split_tasks = true;
+
             // gantt.config.scale_unit = "day";
             // gantt.config.step = 1;
             // gantt.config.date_scale = " %Y/%m/%d";
@@ -61,6 +79,8 @@
                 { unit: 'year', step: 1, format: " %Y年", css: yearScaleCss },
                 { unit: 'day', step: 1, format: " %m月%d日", css: monthScaleCss }
             ];
+            gantt.config.duration_step = 1;
+             // 初始化甘特图
             gantt.init(this.$refs.ganttContainer);
             gantt.parse(this.$props.tasks);
         }
diff --git a/src/views/pm/mtask2.vue b/src/views/pm/mtask2.vue
index c423b0f4..b47b8ce0 100644
--- a/src/views/pm/mtask2.vue
+++ b/src/views/pm/mtask2.vue
@@ -25,7 +25,7 @@
             </el-table-column>
             <el-table-column label="任务状态" prop="state">
               <template #default="scope">
-                  <el-tag v-if="scope.row.state!==40" type="primary">
+                  <el-tag v-if="scope.row.state!==40">
                     {{ state_[scope.row.state] }}
                   </el-tag>
                   <el-tag v-else type="success">
@@ -70,7 +70,7 @@
       </div>
       <el-tabs v-model="activeNameSub" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="生产进度" name="rate">
-          <GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
+          <GanttComponent class="left-container" :tasks="tasks" :start_date="start_date" :end_date="end_date"></GanttComponent>
         </el-tab-pane>
       </el-tabs>
     </el-main>
@@ -155,7 +155,7 @@
               </el-table-column>
               <el-table-column label="状态" prop="state" show-overflow-tooltip>
                 <template #default="scope">
-                  <el-tag v-if="scope.row.state!==40" type="primary">
+                  <el-tag v-if="scope.row.state!==40">
                     {{ state_[scope.row.state] }}
                   </el-tag>
                   <el-tag v-else type="success">
@@ -190,7 +190,6 @@ export default {
       ganttLoading: false,
       projectId: '',
       orderitems: [],
-      
       form:{
         orderitems:[],
         start_date:'',
@@ -226,23 +225,11 @@ export default {
       selectedIds:[],
       utaskDetail:[],
       tasks: {
-        data: [
-          // {
-          //   id:'2023101800',
-          //   number:'GZ20231012',
-          //   model:'GB2',
-          //   cate:'100*50*2',
-          //   count:300,
-          //   text: "一天任务",
-          //   start_date: "2023-11-2",
-          //   duration: 2,
-          //   progress: 1
-          // },
-          // {number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-11-3",id:'2023101801',duration: 1,progress: 1},
-          // {number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-11-4",id:'2023101802',duration: 1,progress: 0.8},
-        ]
+        data: []
       },
       loading:false,
+      end_date:'',
+      start_date:'',
     };
   },
   created() {
@@ -326,6 +313,8 @@ export default {
       //获取 mtask
       let that = this;
       that.tasks.data = [];
+      that.start_date = row.start_date;
+      that.end_date = row.end_date;
       let objItem = {};
       objItem.id=row.id;
       objItem.type='utask';
@@ -333,8 +322,6 @@ export default {
       objItem.count=row.count;
       objItem.text =row.number,
       objItem.cate='',
-      
-      objItem.duration = 10;
       objItem.progress = 1;
       objItem.count_ok=row.count_ok;
       objItem.count_real=row.count_real;
@@ -344,22 +331,24 @@ export default {
       objItem.mgroup_name = '';
       objItem.material_name = '';
       objItem.specification = '';
+      objItem.open=true;
       that.tasks.data.push(objItem)
-      this.$API.pm.mtask.list.req({utask:row.id}).then(res=>{
-        // console.log(res.results)//获取甘特图数据
-        let data = res.results;
-        data.forEach(item=>{
+      this.$API.pm.mtask.list.req({utask:row.id,page:0,ordering:'start_date,mgroup__process__sort'}).then(res=>{
+        console.log('获取甘特图数据',res)//获取甘特图数据
+        res.forEach(item=>{
           let obj = {};
           obj.id=item.id;
-          obj.type='mtask';
+          obj.type='task';
           obj.parent=row.id;
           obj.number=item.number;
-          obj.count=item.count;
-          obj.text = "一天任务",
+          obj.text =item.mgroup_name,
           obj.cate='100*50*2',
+          obj.state =item.state;
+          obj.start = item.start_date;
           obj.start_date = item.start_date;
           obj.duration = 1;
-          obj.progress = 1;
+          obj.progress = item.count_real/item.count;
+          obj.count=item.count;
           obj.count_ok=item.count_ok;
           obj.count_real=item.count_real;
           obj.count_notok=item.count_notok;
@@ -371,8 +360,8 @@ export default {
           console.log(obj)
           that.tasks.data.push(obj)
         })
-        console.log(that.tasks.data)
-        console.log('tasks:',that.tasks)
+        // console.log(that.tasks.data)
+        // console.log('tasks:',that.tasks)
         // 数据解析:将数据解析到gantt列数据中
         gantt.parse(that.tasks);
         // 刷新数据