阅读量:3
前言
本文是根据项目实际开发中一个需求开发的demo，仅用了elementUI，可当作独立组件使用，C V即用。 当然没考虑其他的扩展性和一些数据的校验，主要是提供一个处理思路，有需要的小伙伴可以直接复制； 本demo的思路是根据开始时间和结束时间动态生成工程时间表，再根据工程的计划开始和结束日期、 实际开始和结束日期再对应单元格生成进度条，最后根据完成进度百分比计算红色进度条。 一、demo成品图
表格使用的是elementUI，表头是动态的，根据开始日期的年月和结束时间的年月计算获取；
单元格第一行绿色进度条是计划工程进度，第二行绿色是实际功能进度条，红色是实际进度的百分比
二、代码
<template> <div class="app-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column label="名称" prop="name" width="200"></el-table-column> <el-table-column align="center" v-for="(months, year) in dateList" :key="year" :label="`${year}年`"> <el-table-column v-for="month in months" align="center" width="100" :key="month" :label="`${month}月`"> <template slot-scope="scope"> <div class="process-box" v-if="scope.row.plan_process[year] && scope.row.plan_process[year].includes(month) || scope.row.actual_process[year] && scope.row.actual_process[year].includes(month)"> <div class="plan-process" v-if="scope.row.plan_process[year] && scope.row.plan_process[year].includes(month)"> <div class="item" v-if="scope.row.planSameYearMonth" :style="scope.row.planProcessStyle"></div> <div v-else> <div class="item start" v-if="scope.row.plan_start.Y == year && scope.row.plan_start.M == month" :style="scope.row.plan_start.itemStyle"></div> <div class="item end" v-if="scope.row.plan_end.Y == year && scope.row.plan_end.M == month" :style="scope.row.plan_end.itemStyle"></div> <div class="item" v-if="!(scope.row.plan_start.Y == year && scope.row.plan_start.M == month || scope.row.plan_end.Y == year && scope.row.plan_end.M == month)"></div> </div> </div> <div class="actual-process" v-if="scope.row.actual_process[year] && scope.row.actual_process[year].includes(month)"> <div class="item" v-if="scope.row.actualSameYearMonth" :style="scope.row.actualProcessStyle"> <div class="percent_item start" v-if="scope.row.percentSameYearMonth" :style="scope.row.percentProcessStyle"></div> </div> <div class="item-box" v-else> <div class="item start" v-if="scope.row.actual_start.Y == year && scope.row.actual_start.M == month" :style="scope.row.actual_start.itemStyle"> <div class="percent_item start" v-if="scope.row.percent_process[year] && scope.row.percent_process[year].includes(month) && scope.row.percent_start.Y == year && scope.row.percent_start.M == month" :style="scope.row.percent_start.itemStyle"></div> </div> <div class="item end" v-if="scope.row.actual_end.Y == year && scope.row.actual_end.M == month" :style="scope.row.actual_end.itemStyle"> <div class="percent_item end" v-if="scope.row.percent_process[year] && scope.row.percent_process[year].includes(month) && scope.row.percent_end.Y == year && scope.row.percent_end.M == month" :style="scope.row.percent_end.itemStyle"></div> </div> <div class="item" v-if="!(scope.row.actual_start.Y == year && scope.row.actual_start.M == month || scope.row.actual_end.Y == year && scope.row.actual_end.M == month)"> <div class="percent_item" v-if="scope.row.percent_process[year] && scope.row.percent_process[year].includes(month) && scope.row.percent_end.Y == year && scope.row.percent_end.M == month" :style="scope.row.percent_end.itemStyle"></div> <div class="percent_item" v-if="scope.row.percent_process[year] && scope.row.percent_process[year].includes(month) && !(scope.row.percent_end.Y == year && scope.row.percent_end.M == month)"></div> </div> </div> </div> </div> </template> </el-table-column> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: "单位A施工期间", plan_start_time: "2023-02-1", plan_end_time: "2023-2-28", actual_start_time: "2023-2-7", actual_end_time: "2023-6-22", percent: 85, }, { name: "单位B施工期间", plan_start_time: "2023-07-12", plan_end_time: "2024-01-12", actual_start_time: "2023-11-10", actual_end_time: "2024-01-10", percent: 76, } ], dateList: {}, } }, mounted(){ this.initTableData("2023-01-12", "2025-01-30") }, methods: { handleDate(date) { let monthHasDay = 30; let currentDate = new Date(date) let day = currentDate.getDate() let month = currentDate.getMonth() + 1; let year = currentDate.getFullYear(); if ([1, 3, 5, 7, 8, 10, 12].includes(month)) { monthHasDay = 31 } else { if (month === 2) { if ((year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) { monthHasDay = 29; } else { monthHasDay = 28; } } else { monthHasDay = 30; } } return {d: day, M: month, Y: year, monthHasDay: monthHasDay} }, getDataBetweenDates(startTime, endTime){ let start = this.handleDate(startTime); let end = this.handleDate(endTime); let data = {} data[start.Y] = []; data[end.Y] = []; let year = end.Y - start.Y if (year === 0) { for(let m = start.M; m <= end.M; m++) { data[start.Y].push(m) } } else if (year === 1) { for(let m = start.M; m <= 12; m++) { data[start.Y].push(m) } for(let n = 1; n <= end.M; n++) { data[end.Y].push(n) } } else { for(let m = start.M; m <= 12; m++) { data[start.Y].push(m) } for(let mid = 1; mid < year; mid++) { data[start.Y + mid] = [1,2,3,4,5,6,7,8,9,10,11,12]; } for(let n = 1; n <= end.M; n++) { data[end.Y].push(n) } } return data; }, getDaysBetweenDates(startTime, endTime) { let d1 = new Date(startTime); let d2 = new Date(endTime); let timeDiff = Math.abs(d2.getTime() - d1.getTime()); let days = Math.ceil(timeDiff / (1000 * 3600 * 24)); return days; }, handleDateStyle(startDate, endDate){ let start = this.handleDate(startDate) let end = this.handleDate(endDate); let sameYearMonth = false; let processStyle = null; if (end.Y === start.Y && end.M === start.M) { processStyle = { "left": ((start.d - 1) * 100 / start.monthHasDay) + "%", "right": ((start.monthHasDay - end.d) * 100 / start.monthHasDay) + "%", "border-radius": '4px' } if (end.d > start.monthHasDay) processStyle.right = 0 sameYearMonth = true } else { start.itemStyle = { "left": ((start.d + 1) * 100 / start.monthHasDay) + "%", "right": 0 } end.itemStyle = { "left": 0, "right": ((start.monthHasDay - (end.d + 1)) * 100 / start.monthHasDay) + "%" } } return { start: start, end: end, sameYearMonth: sameYearMonth, processStyle: processStyle } }, handlePercentDateStyle(actualStartTime, actualEndTime, percent){ let start = this.handleDate(actualStartTime) let end = this.handleDate(actualEndTime); let days = this.getDaysBetweenDates(actualStartTime, actualEndTime) let percentTime = new Date(actualStartTime).getTime() + days * percent * 24 * 36000 let percentProcess = this.getDataBetweenDates(actualStartTime, percentTime) let startBorderRadius = '4px 0 0 4px' let endBorderRadius = '0 4px 4px 0' let percentDate = this.handleDate(percentTime) let sameYearMonth = false; let processStyle = null; if (end.Y === start.Y) { if (end.M === start.M) { processStyle = { "left": 0, "right": ((end.d - (percentDate.d)) * 100 / end.d) + "%", "border-radius": '4px' } sameYearMonth = true } else { if(percentDate.M === start.M) { start.itemStyle = { "left": 0, "right": ((start.monthHasDay - percentDate.d) * 100 / (start.monthHasDay - start.d)) + "%", "border-radius": '4px' } percentDate.itemStyle = { "left": 0, "right": ((start.monthHasDay - percentDate.d) * 100 / start.monthHasDay) + "%", "border-radius": '4px' } } else if (percentDate.M > start.M && percentDate.M < end.M) { start.itemStyle = { "left": 0, "right": 0, "border-radius": startBorderRadius } percentDate.itemStyle = { "left": 0, "right": ((percentDate.monthHasDay - percentDate.d) * 100 / percentDate.monthHasDay) + "%", "border-radius": endBorderRadius } } else if (percentDate.M === end.M) { start.itemStyle = { "left": 0, "right": 0, "border-radius": startBorderRadius } percentDate.itemStyle = { "left": 0, "right": ((end.d - percentDate.d) * 100 / end.d) + "%", "border-radius": endBorderRadius } } } } else { if (percentDate.M === start.M) { start.itemStyle = { "left": 0, "right": ((start.monthHasDay - percentDate.d) * 100 / (start.monthHasDay - start.d)) + "%", "border-radius": '4px' } } else if (percentDate.M === end.M && percentDate.Y === end.Y) { start.itemStyle = { "left": 0, "right": 0, "border-radius": startBorderRadius } percentDate.itemStyle = { "left": 0, "right": ((end.d - percentDate.d) * 100 / end.d) + "%", "border-radius": endBorderRadius } } else { start.itemStyle = { "left": 0, "right": 0, "border-radius": startBorderRadius } percentDate.itemStyle = { "left": 0, "right": ((percentDate.monthHasDay - percentDate.d) * 100 / percentDate.monthHasDay) + "%", "border-radius": endBorderRadius } } } return { start: start, end: percentDate, sameYearMonth: sameYearMonth, processStyle: processStyle, percentProcess: percentProcess } }, initTableData(startTime, endTime){ this.dateList = this.getDataBetweenDates(startTime, endTime); this.tableData.map(item => { item.plan_process = this.getDataBetweenDates(item.plan_start_time, item.plan_end_time); item.actual_process = this.getDataBetweenDates(item.actual_start_time, item.actual_end_time); let dateStyle = this.handleDateStyle(item.plan_start_time,item.plan_end_time) ; item.planSameYearMonth = dateStyle.sameYearMonth; item.planProcessStyle = dateStyle.processStyle ? dateStyle.processStyle : ''; item.plan_start = dateStyle.start; item.plan_end = dateStyle.end; let actualDateStyle = this.handleDateStyle(item.actual_start_time,item.actual_end_time); item.actualSameYearMonth = actualDateStyle.sameYearMonth; item.actualProcessStyle = actualDateStyle.processStyle ? actualDateStyle.processStyle : ''; item.actual_start = actualDateStyle.start; item.actual_end = actualDateStyle.end; let percentDateStyle = this.handlePercentDateStyle(item.actual_start_time, item.actual_end_time, item.percent); item.percent_start = percentDateStyle.start; item.percent_end = percentDateStyle.end; item.percentProcessStyle = percentDateStyle.processStyle ? percentDateStyle.processStyle : ''; item.percentSameYearMonth = percentDateStyle.sameYearMonth; item.percent_process = percentDateStyle.percentProcess console.log(item) }) }, }, } </script> <style lang="scss" scoped> ::v-deep .el-table td.el-table__cell div{ padding: 0; } .process-box{ width: 100px; height: 40px; position: relative; .plan-process{ position: absolute; top: 0; left: 0; right: 0; height: 15px; } .actual-process{ position: absolute; top: 25px; left: 0; right: 0; height: 15px; } .percent_item{ position: absolute; height: 15px; left: 0; right: 0; background-color: red; } } .item { position: absolute; left: 0; right: 0; background: greenyellow; height: 15px; &.start{ border-radius: 4px 0 0 4px; } &.end{ border-radius: 0 4px 4px 0 ; } } </style> 