甘特图框架加上计划与实际

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

@@ -13,6 +13,8 @@
           default-expand-all
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
           @expand-change="expandChange"
+          :row-style="{ height: uStyle.ganttHeight + 'px' }"
+          :header-row-style="{ height: uStyle.ganttHeight + 'px' }"
           >
           <template v-for="(item, index) in configColumns">
             <el-table-column
@@ -46,25 +48,31 @@
       
       <div class="u-gantt" ref="uGantt">
         <div class="u-gantt-title u-flex" >
-          <div v-for="(item, index) in uGanttColumns" :key="index" class="item-title">{{ item.label}}</div>
+          <div v-for="(item, index) in uGanttColumns" :key="index" class="item-title" :style="{'height': uStyle.ganttHeight + 'px', 'lineHeight': uStyle.ganttHeight + 'px'}">{{ item.label}}</div>
         </div>
         <div class="u-gantt-content">
           <div class="u-gantt-bg">
-            <div v-for="(item, tr) in ganttLists" :key="tr" class="item-tr u-flex">
+            <div v-for="(item, tr) in ganttLists" :key="tr" class="item-tr u-flex" :style="{'height': uStyle.ganttHeight + 'px'}">
               <!--  :style="{'display': item.show}" -->
               <div class="item-td" v-for="(item, td) in uGanttColumns" :key="td"></div>
             </div>
           </div>
           <div class="u-gantt-task">
-
-              <div class="u-gantt-task-content uGanttTaskItem" ref="uGanttTaskItem" v-for="(item, index) in ganttLists" :key="index" :style="setStyle(item)">
-                <!-- <span class="resize" ref="`resize${index}}`" @mousedown="dragControllerDiv(index)"></span> -->
+            <div class="u-gantt-task-content" v-for="(item, index) in ganttLists" :key="index">
+              <!-- <span class="resize" ref="`resize${index}}`" @mousedown="dragControllerDiv(index)"></span> -->
+              <!-- 计划 -->
+              <div class="u-gantt-plan" ref="uGanttTaskItem" :style="setPlanStyle(item)">
                 <div class="u-gantt-task-drag" ref="uGanttDrag"></div>
                 <div class="u-gantt-task-resize resize-left" ref="uGanttResizeL"></div>
                 <div class="u-gantt-task-text">{{ item.task_text }}</div>
                 <div class="u-gantt-task-resize resize-right" ref="uGanttResizeR"></div>
               </div>
-            
+              <!-- 实际 -->
+              <!-- <div class="u-gantt-reality" ref="uGanttRealityItem" v-for="(item, index) in ganttLists" :key="index">
+              </div> -->
+              <div class="u-gantt-reality" :style="setRealityStyle(item)"></div>
+
+            </div>
           </div>
         </div>
       </div>
@@ -87,7 +95,17 @@
       taskLists: {
         type: Array,
         default: []
-      }
+      },
+      uStyle: {
+        type: Object,
+        default: () => ({
+          ganttHeight: 40,
+          planHeight: 26,
+          planBg: '#44c2e5',
+          realityHeight: 10,
+          realityBg: '#e5de44',
+        })
+      } 
     },
     data(){
       return {
@@ -289,16 +307,35 @@
           }
         }
       },
-      // 绘制甘特条
-      setStyle(item){
+      // 绘制计划甘特条
+      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)
+        console.log(this.uStyle)
+        var style = {
+          left: 70 * startIndex + 'px',
+          width: 70 * (endIndex - startIndex + 1) + 'px',
+          top: (this.uStyle.ganttHeight * trIndex + 4) + 'px',
+          height: this.uStyle.planHeight,
+          background: this.uStyle.planBg
+        }
+        console.log(style)
+        return style
+      },
+      // 绘制实际的甘特条
+      setRealityStyle(item){
+        var startIndex = this.uGanttColumns.findIndex(res => res.name === item.reality_startDate)
+        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.reality_endDate)
+        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: (34 * trIndex + 2) + 'px'
+          top: (this.uStyle.ganttHeight * (trIndex+1) - 10) + 'px',
+          height: this.uStyle.realityHeight,
+          background: this.uStyle.realityBg
         }
         return style
       },
@@ -332,7 +369,7 @@
             var startX = e.clientX;
             var endX, moveLen
             // 向上取证获取当前是第几行
-            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop/34)
+            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop / _this.uStyle.ganttHeight)
             // console.log(uGantt.scrollLeft)
             // console.log(startX)
             // 移动事件
@@ -428,7 +465,7 @@
         for (let i = 0; i < resize.length; i++) {
           resize[i].onmousedown = function (e) {
             var startX = e.clientX;
-            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop/34)
+            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop / _this.uStyle.ganttHeight)
             const offsetLeft = uGanttTaskItem[i].offsetLeft;
             const offsetWidth = uGanttTaskItem[i].offsetWidth
             var moveLen
@@ -487,7 +524,7 @@
             var scrollWidth = uGantt.scrollWidth
             const uGanttWidth = uGantt.offsetWidth
             // 2.获取当前点击的甘特条是第几行的，也就是对应左侧项目组中的index
-            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop/34)
+            var ganttIndex = Math.trunc(uGanttTaskItem[i].offsetTop / _this.uStyle.ganttHeight)
             // 3.获取按下位置距离
             var startX = e.clientX;
             // 4.获取当前右侧拖拽区域距离父元素左侧距离(也就是右侧拖拽区域距离甘特图左边的距离：注意父子关系)
@@ -607,8 +644,8 @@
     // width: auto;
     .u-table-cell{
       padding: 0 !important;
-      height: 34px !important;
-      line-height: 34px !important;
+      height: 40px !important;
+      line-height: 40px !important;
       box-sizing: border-box !important;
     }
     .el-table--enable-row-transition .el-table__body td.el-table__cell{
@@ -639,8 +676,8 @@
   .u-gantt-title{
     .item-title{
       width: 70px;
-      height: 34px;
-      line-height: 34px;
+      // height: 40px;
+      // line-height: 40px;
       text-align: center;
       border-right: 1px solid #ebebeb;
       border-bottom: 1px solid #ebebeb;
@@ -655,11 +692,11 @@
     .u-gantt-bg{
       // position: absolute;
       .item-tr{
-        height: 34px;
+        // height: 40px;
       }
       .item-td{
         width: 70px;
-        height: 34px;
+        // height: 40px;
         border-right: 1px solid #ebebeb;
         border-bottom: 1px solid #ebebeb;
         flex-shrink: 0; // 设置宽度不够时，元素不压缩而是超出滚动
@@ -674,39 +711,51 @@
       // bottom: 0;
       // background-color: #b72222;
       .u-gantt-task-content{
-        position: absolute;
-        top: 36px;
-        left: 140px;
-        width: 140px;
-        height: 30px;
-        line-height: 30px;
-        background-color: #44c2e5;
-        border-radius: 2px;
-        .u-gantt-task-drag{
+        .u-gantt-plan{
           position: absolute;
-          top: 0;
-          left: 1px;
-          right: 1px;
-          bottom: 0;
-          cursor: pointer;
+          top: 36px;
+          left: 140px;
+          width: 140px;
+          height: 26px;
+          line-height: 26px;
+          background-color: #44c2e5;
+          border-radius: 2px;
+          .u-gantt-task-drag{
+            position: absolute;
+            top: 0;
+            left: 1px;
+            right: 1px;
+            bottom: 0;
+            cursor: pointer;
+          }
+          .u-gantt-task-resize{
+            position: absolute;
+            width: 8px;
+            height: 26px;
+            top: 0;
+            cursor: w-resize;
+          }
+          .resize-left{
+            left: -7px;
+          }
+          .u-gantt-task-text{
+            color: #fff;
+            text-align: center;
+            
+          }
+          .resize-right{
+            right: -7px;
+          }
         }
-        .u-gantt-task-resize{
+        .u-gantt-reality{
           position: absolute;
-          width: 8px;
-          height: 30px;
-          top: 0;
-          cursor: w-resize;
-        }
-        .resize-left{
-          left: -7px;
-        }
-        .u-gantt-task-text{
-          color: #fff;
-          text-align: center;
-          
-        }
-        .resize-right{
-          right: -7px;
+          top: 36px;
+          left: 140px;
+          width: 140px;
+          height: 6px;
+          // line-height: 6px;
+          background-color: #e5de44;
+          border-radius: 10px;
         }
       }
     }