甘特图框架修改实际时间等

itdmWeb/src/components/module-iTDM/uGantt/index.vue

@@ -165,7 +165,7 @@
         var nowDay = new Date().getDate()
         // 获取当前月有多少天
         var currentMonthNum = new Date(currentYear, currentMonth, 0).getDate()
-        console.log(nowDay, currentMonth, currentMonthNum)
+        // console.log(nowDay, currentMonth, currentMonthNum)
         // 
         // let now = new Date(nowDay)
         // console.log(nowdays, now)
@@ -190,6 +190,7 @@
         setTimeData.sort(function(a, b) {
           return b.start_date < a.start_date ? 1 : -1
         })
+        console.log(this.taskLists)
 
         // 获取实际的最开始和最结束时间
         const start_date = setTimeData[0].start_date
@@ -314,22 +315,49 @@
       setPlanStyle(item){
         var startIndex = this.uGanttColumns.findIndex(res => res.name === item.start_date)
         var endIndex = this.uGanttColumns.findIndex(res => res.name === item.end_date)
-        var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
-        // console.log(trIndex, this.ganttLists)
-        var style = {
-          left: 70 * startIndex + 'px',
-          width: 70 * (endIndex - startIndex + 1) + 'px',
-          top: (this.uStyle.ganttHeight * trIndex + this.uStyle.top) + 'px',
-          height: this.uStyle.planHeight + 'px',
-          lineHeight: this.uStyle.planHeight + 'px',
-          background: this.uStyle.planBg
+        if(endIndex !== -1){
+          var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
+          // console.log(trIndex, this.ganttLists)
+          var style = {
+            left: 70 * startIndex + 'px',
+            width: 70 * (endIndex - startIndex + 1) + 'px',
+            top: (this.uStyle.ganttHeight * trIndex + this.uStyle.top) + 'px',
+            height: this.uStyle.planHeight + 'px',
+            lineHeight: this.uStyle.planHeight + 'px',
+            background: this.uStyle.planBg
+          }
+          return style
         }
-        return style
       },
       // 绘制实际的甘特条
       setRealityStyle(item){
+        // 如果没有实际开始  直接返回
+        if(!item.reality_startDate){
+          return
+        }
+        console.log(item.reality_startDate, item.reality_endDate)
         var startIndex = this.uGanttColumns.findIndex(res => res.name === item.reality_startDate)
-        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.reality_endDate)
+        var endIndex
+        
+        // 如果没有结束时间，则显示到的当天，如果有则显示赋值的
+        if(item.reality_endDate){
+          endIndex = this.uGanttColumns.findIndex(res => res.name === item.reality_endDate)
+        } else {
+          var year = new Date().getFullYear();
+          var month = new Date().getMonth() + 1;
+          var day = new Date().getDate();
+          var mm = "'" + month + "'";
+          var dd = "'" + day + "'";
+          if(mm.length == 3) {
+            month = "0" + month;
+          }
+          if(dd.length == 3) {
+            day = "0" + day;
+          }
+          var time = year + "-" + month + "-" + day
+
+          endIndex = this.uGanttColumns.findIndex(res => res.name === time)
+        }
         var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
         // console.log(trIndex, this.ganttLists)
         var style = {
@@ -715,13 +743,13 @@
       .u-gantt-task-content{
         .u-gantt-plan{
           position: absolute;
-          top: 36px;
-          left: 140px;
-          width: 140px;
-          height: 26px;
-          line-height: 26px;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          line-height: 0;
           background-color: #44c2e5;
-          border-radius: 2px;
+          border-radius: 0;
           .u-gantt-task-drag{
             position: absolute;
             top: 0;
@@ -751,13 +779,13 @@
         }
         .u-gantt-reality{
           position: absolute;
-          top: 36px;
-          left: 140px;
-          width: 140px;
+          top: 0;
+          left: 0;
+          width: 0;
           height: 6px;
           // line-height: 6px;
           background-color: #e5de44;
-          border-radius: 10px;
+          border-radius: 0;
         }
       }
     }