devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 实现项目进度甘特图

作者：Gausst松鼠会 | 2024-04-28 00:21:44

赞

踩

vue 实现项目进度甘特图

 项目需求：

实现以1天、7天、30天为周期（周期根据筛选条件选择），展示每个项目不同里程碑任务进度。

项目在Vue-Gantt-chart: 使用Vue做数据控制的Gantt图表基础上进行了改造。

有需要的小伙伴也可以直接引入插件，自己修改。

 我是直接把甘特图封装成了组件，结构如下图：

 

 首先，安装插件

npm install v-gantt-chart

引入插件（我是全局引入的）

  1. import vGanttChart from 'v-gantt-chart';
  2.  
  3. Vue.use(vGanttChart);

 代码如下：

index.js

  1. <template>
  2.   <div class="container">
  3.     <v-gantt-chart
  4.       :startTime="times[0]"
  5.       :endTime="times[1]"
  6.       :cellWidth="cellWidth"
  7.       :cellHeight="cellHeight"
  8.       :timeLines="timeLines"
  9.       :titleHeight="titleHeight"
  10.       :scale="Number(1440 * scale)"
  11.       :titleWidth="titleWidth"
  12.       showCurrentTime
  13.       :hideHeader="hideHeader"
  14.       :dataKey="dataKey"
  15.       :arrayKeys="arrayKeys"
  16.       :scrollToTime="scrollToTime"
  17.       :scrollToPostion="positionA"
  18.       @scrollLeft="scrollLeftA"
  19.       customGenerateBlocks
  20.       :datas="ganttData"
  21.     >
  22.       <template
  23.         v-slot:block="{
  24.           data,
  25.           getPositonOffset,
  26.           getWidthAbout2Times,
  27.           isInRenderingTimeRange,
  28.           startTimeOfRenderArea,
  29.           endTimeOfRenderArea,
  30.           isAcrossRenderingTimeRange
  31.         }"
  32.       >
  33.         <div
  34.           class="gantt-block-item"
  35.           v-for="(item, index) in data.gtArray"
  36.           v-if="
  37.             isInRenderingTimeRange(item.start) ||
  38.             isInRenderingTimeRange(item.end) ||
  39.             isAcrossRenderingTimeRange(item.start, item.end)
  40.           "
  41.           :key="item.id"
  42.           :style="{
  43.             left: getPositonOffset(item.start) + 'px',
  44.             width: getWidthAbout2Times(item.start, item.end) + 'px',
  45.             height: judgeTime(data.gtArray) ? '50%' : '100%',
  46.             top: !judgeTime(data.gtArray)
  47.               ? ''
  48.               : index % 2 !== 1
  49.               ? '0px'
  50.               : '22px'
  51.           }"
  52.         >
  53.           <Test
  54.             :data="data"
  55.             :updateTimeLines="updateTimeLines"
  56.             :cellHeight="cellHeight"
  57.             :currentTime="currentTime"
  58.             :item="item"
  59.             @nodeEvent="nodeEvent"
  60.           ></Test>
  61.         </div>
  62.       </template>
  63.       <template v-slot:left="{ data }">
  64.         <TestLeft :data="data" @panelDb="panelDb"></TestLeft>
  65.       </template>
  66.       <!-- <template v-slot:timeline="{ day , getTimeScales }">
  67.           <TestTimeline :day="day" :getTimeScales="getTimeScales"></TestTimeline>
  68.         </template> -->
  69.       <template v-slot:title>
  70.         <div class="title">名称</div>
  71.       </template>
  72.     </v-gantt-chart>
  73.   </div>
  74. </template>
  75.  
  76. <script>
  77. import moment from 'moment';
  78. import Test from './components/test.vue';
  79. import TestLeft from './components/test-left.vue';
  80. import TestTimeline from './components/test-timeline.vue';
  81. import TestMarkline from './components/test-markline.vue';
  82.  
  83. import dayjs from 'dayjs';
  84.  
  85. export default {
  86.   name: '',
  87.   components: { Test, TestLeft, TestTimeline, TestMarkline },
  88.   props: {
  89.     ganttData: {
  90.       type: Array,
  91.       default: () => []
  92.     },
  93.     scaleData: {
  94.       type: Number,
  95.       default: 10080
  96.     },
  97.     scrollToTime: {
  98.       type: String,
  99.       default: moment().subtract(4, 'days').format('YYYY-MM-DD')
  100.     }
  101.   },
  102.  
  103.   data() {
  104.     return {
  105.       timeLines: [],
  106.       currentTime: dayjs(),
  107.       cellWidth: 100,
  108.       cellHeight: 50,
  109.       titleHeight: 50,
  110.       titleWidth: 250,
  111.       // scale: 1440 * 30,
  112.       startDate: moment().startOf('year'),
  113.       endDate: moment().endOf('year'),
  114.       times: [
  115.         moment().subtract(1, 'year').format('YYYY-MM-DD hh:mm:ss'),
  116.         moment().add(6, 'months').format('YYYY-MM-DD hh:mm:ss')
  117.       ],
  118.       rowNum: 100,
  119.       colNum: 10,
  120.       datasB: [],
  121.       dataKey: 'projectId',
  122.       // scrollToTime: moment().subtract(14, 'days').format('YYYY-MM-DD'),
  123.       // scrollToTime: moment().subtract(4, 'days').format('YYYY-MM-DD'),
  124.       scrollToPostion: { x: 10000, y: 10000 },
  125.       hideHeader: false,
  126.       hideSecondGantt: false,
  127.       arrayKeys: ['gtArray'],
  128.       scrollToY: 0,
  129.       positionB: {},
  130.       positionA: {}
  131.     };
  132.   },
  133.   watch: {
  134.     scrollToY(val) {
  135.       this.positionA = { x: val };
  136.     },
  137.     ganttData(newVal, oldVal) {
  138.       console.log('newVal===', newVal);
  139.       console.log('oldVal===', oldVal);
  140.     }
  141.   },
  142.   computed: {
  143.     scale() {
  144.       console.log(this.scaleData);
  145.       return this.scaleData / 1440;
  146.     }
  147.   },
  148.   methods: {
  149.     judgeTime(arr) {
  150.       let startTimeArr = [];
  151.       let endTimeArr = [];
  152.       arr.map(function (item) {
  153.         startTimeArr.push(
  154.           item.startDate ? new Date(item.startDate).getTime() : ''
  155.         );
  156.         endTimeArr.push(
  157.           item.delayDate
  158.             ? new Date(item.delayDate).getTime()
  159.             : item.endDate
  160.             ? new Date(item.endDate).getTime()
  161.             : ''
  162.         );
  163.       });
  164.       let allStartTime = startTimeArr.sort(); // 排序
  165.       let allEndTime = endTimeArr.sort();
  166.       let result = 0; // 判断时间是否有重复区间
  167.       for (let k = 0; k < allStartTime.length; k++) {
  168.         if (k > 0) {
  169.           if (allStartTime[k] <= allEndTime[k - 1]) {
  170.             result += 1;
  171.           }
  172.         }
  173.       }
  174.       return result > 0;
  175.     },
  176.     nodeEvent(item) {
  177.       this.$emit('nodeEventClick', item);
  178.     },
  179.     panelDb(item) {
  180.       this.$emit('panelDbClick', item);
  181.     },
  182.     updateTimeLines(timeA, timeB) {
  183.       this.timeLines = [
  184.         {
  185.           time: timeA,
  186.           text: '自定义'
  187.         },
  188.         {
  189.           time: timeB,
  190.           text: '测试',
  191.           color: '#747e80'
  192.         }
  193.       ];
  194.     },
  195.     scrollLeftA(val) {
  196.       this.positionB = { x: val };
  197.     }
  198.   }
  199. };
  200. </script>
  201.  
  202. <style lang="scss" scoped>
  203. .container {
  204.   height: 82vh;
  205.   background-color: #f5faff;
  206. }
  207. .title {
  208.   width: 100%;
  209.   height: 100%;
  210.   color: #96aaca;
  211.   background: #f5faff;
  212. }
  213. :deep(.gantt-leftbar-wrapper) {
  214.   border-right: 1px solid #c6d8ee !important;
  215. }
  216. </style>

test-left.vue

  1. <template>
  2.   <div class="name">
  3.     <div class="carId" @dblclick="onDblclick" >{{ data.projectName }}</div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   name: "TestLeft",
  10.   props: {
  11.     data: Object,
  12.   },
  13.   methods: {
  14.     onDblclick() {
  15.       // this.updateTimeLines(this.item.start, this.item.end);
  16.       this.$emit('panelDb', this.data);
  17.     }
  18.   }
  19. };
  20. </script>
  21.  
  22. <style scoped>
  23. .name {
  24.   color: #000000;
  25.   display: flex;
  26.   box-sizing: border-box;
  27.   overflow: hidden;
  28.   height: 100%;
  29.   width: 100%;
  30.   padding: 10px 0;
  31.   align-items: center;
  32.   text-align: center;
  33.   background: #f5faff;
  34.   box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.1);
  35. }
  36.  
  37. .carId {
  38.   flex: 1;
  39. }
  40.  
  41. .type {
  42.   padding: 0 5px 0 0;
  43.   font-size: 1.2rem;
  44. }
  45. </style>

test-markline.vue

  1. <template>
  2.   <div
  3.     class="markline"
  4.     :style="{  left: getPosition() + 'px' }"
  5.   >
  6.     <div class="markline-label">
  7.       {{timeConfig.text}}{{ dayjs(timeConfig.time).format("HH:mm:ss") }}
  8.     </div>
  9.   </div>
  10. </template>
  11.  
  12. <script>
  13. import dayjs from "dayjs"
  14. export default {
  15.   name: "TestMarkLine",
  16. 	props:['getPosition','timeConfig'],
  17. 	data(){
  18. 		return {
  19. 			dayjs
  20. 		}
  21. 	}
  22. }
  23. </script>
  24.  
  25. <style lang="scss" scoped>
  26.  
  27. .markline {
  28.     position: absolute;
  29.     z-index: 100;
  30.     width: 2px;
  31.     height: 100vh;
  32.     background: #747e80;
  33.  
  34.     &-label {
  35.       padding: 3px;
  36.       width: 6rem;
  37.       margin-left: -3rem;
  38.       margin-top: 5rem;
  39.       color: #fff;
  40.       background: #747e80;
  41.       text-align: center;
  42.       border-radius: 5px;
  43.       font-size: 0.7rem;
  44.     }
  45. }
  46. </style>

test-timeline.vue

  1. <template>
  2.  <div class="test">
  3.   <span v-for="i in getTimeScales(day)"> {{i.format('HH:mm')}}</span>
  4.  </div> 
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   name: "TestLeft",
  10.   props: {
  11.     day: Object,
  12.     getTimeScales:Function,
  13.   }
  14. };
  15. </script>
  16.  
  17. <style lang="scss" scoped>
  18. .test{
  19.   display: flex;
  20.  
  21.   span{
  22.     flex:1
  23.   }
  24. }
  25. </style>

test.vue

  1. <template>
  2.   <el-popover placement="bottom" trigger="hover">
  3.     <div
  4.       slot="reference"
  5.       class="plan"
  6.       :style="{
  7.         'background-color': statusColor,
  8.         'margin-top': 0.1 * cellHeight + 'px'
  9.       }"
  10.       @click="onClick"
  11.     >
  12.       <div class="middle">{{ item.summary }}</div>
  13.     </div>
  14.  
  15.     <div class="detail">{{ item.summary }}</div>
  16.   </el-popover>
  17. </template>
  18.  
  19. <script>
  20. import dayjs from 'dayjs';
  21. export default {
  22.   name: 'Test',
  23.   props: {
  24.     data: Object,
  25.     item: Object,
  26.     currentTime: dayjs,
  27.     updateTimeLines: Function,
  28.     cellHeight: Number,
  29.     startTimeOfRenderArea: Number
  30.   },
  31.   data() {
  32.     return {
  33.       dayjs: dayjs,
  34.       stateObj: {
  35.         DelayStart: '#F56C6C',
  36.         Normal: '#C2F1E2',
  37.         NoStart: '#D9E3ED',
  38.         Delay: '#F56C6C',
  39.         Stop: '#D9E3ED',
  40.         DelayRisk: '#FFD4C7',
  41.         NoControl: '#F56C6C',
  42.         Close: '#D9E3ED'
  43.       }
  44.     };
  45.   },
  46.   computed: {
  47.     statusColor() {
  48.       console.log('data=======', this.data);
  49.       let { item } = this;
  50.  
  51.       return this.stateObj[item.state] || '#D9E3ED';
  52.     },
  53.     startToString() {
  54.       return dayjs(this.item.start).format('HH:mm');
  55.     },
  56.     endToString() {
  57.       return dayjs(this.item.end).format('HH:mm');
  58.     }
  59.   },
  60.   methods: {
  61.     onClick() {
  62.       // this.updateTimeLines(this.item.start, this.item.end);
  63.       this.$emit('nodeEvent', this.item);
  64.     }
  65.   }
  66. };
  67. </script>
  68.  
  69. <style lang="scss" scoped>
  70. .middle {
  71.   flex: 1;
  72.   text-align: center;
  73.   padding-left: 5px;
  74.   text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
  75.   white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
  76.   overflow: hidden; /*超出部分隐藏*/
  77. }
  78. .runTime {
  79.   display: flex;
  80.   flex-direction: column;
  81. }
  82. .plan {
  83.   display: flex;
  84.   align-items: center;
  85.   box-sizing: border-box;
  86.   height: 80%;
  87.   border: 1px solid #f0f0f0;
  88.   border-radius: 5px;
  89.   color: #333333;
  90.   padding-left: 5px;
  91.   font-size: 0.8rem;
  92.   // opacity: 0.8;
  93. }
  94.  
  95. .detail {
  96.   .header {
  97.     text-align: center;
  98.     font-size: 1rem;
  99.   }
  100. }
  101.  
  102. .detail ul {
  103.   list-style: none;
  104.   padding: 0px;
  105.   li {
  106.     span {
  107.       display: inline-block;
  108.       width: 80px;
  109.       color: #777;
  110.       font-size: 0.8rem;
  111.     }
  112.     span:first-child {
  113.       text-align: right;
  114.     }
  115.  
  116.     span:last-child {
  117.     }
  118.   }
  119. }
  120. </style>

页面中使用

  1. <div>
  2.     <ganttChart
  3.       :ganttData="ganttArr"
  4.       :scaleData="scaleData"
  5.       :scrollToTime="scrollToTime"
  6.       @nodeEventClick="nodeEventClick"
  7.       @panelDbClick="panelDbClick"
  8.      ></ganttChart>
  9. </div>
  1. import moment from 'moment';
  2. import ganttChart from './components/ganttChart/index.vue';
  3.  
  4. export default {
  5.     components: { ganttChart },
  6.     data(){
  7.         return{
  8.             ganttArr: [],
  9.             scaleData: 10080,
  10.             scrollToTime: moment().subtract(4, 'days').format('YYYY-MM-DD'),
  11.         }
  12.     },
  13.     methods: {
  14.         // 点击甘特图node节点
  15.         nodeEventClick(item) {
  16.             // 执行自己的逻辑
  17.         },
  18.         // 双击甘特图左侧标题
  19.         panelDbClick(item) {
  20.             //执行自己的逻辑
  21.         }
  22.     }
  23.     
  24. }

以上就是实现甘特图的全部过程，欢迎大佬们指教。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/499463
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号