甘特图修改

ruoyi-demo/src/main/java/com/ruoyi/mts/domain/vo/MesPlanDetailVo.java

@@ -1,12 +1,15 @@
 package com.ruoyi.mts.domain.vo;
 
 import java.util.Date;
+
+import cn.hutool.core.date.DatePattern;
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
 import com.alibaba.excel.annotation.ExcelProperty;
 import com.ruoyi.common.annotation.ExcelDictFormat;
 import com.ruoyi.common.convert.ExcelDictConvert;
 import lombok.Data;
+
 import java.util.Date;
 
 import java.io.Serializable;
@@ -50,21 +53,25 @@ public class MesPlanDetailVo implements Serializable {
     /**
      * 计划开始时间
      */
+    @JsonFormat(pattern = DatePattern.NORM_DATE_PATTERN)
     private Date planStartDate;
 
     /**
      * 计划结束时间
      */
+    @JsonFormat(pattern = DatePattern.NORM_DATE_PATTERN)
     private Date planEndDate;
 
     /**
      * 实际开始时间
      */
+    @JsonFormat(pattern = DatePattern.NORM_DATE_PATTERN)
     private Date actualStartDate;
 
     /**
      * 实际结束时间
      */
+    @JsonFormat(pattern = DatePattern.NORM_DATE_PATTERN)
     private Date actualEndDate;
 
     /**

ruoyi-ui-vue3/src/views/mts/planDetail/index.vue

@@ -30,10 +30,10 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="planDetailList" row-key="id"
+    <el-table v-if="refreshTable" v-loading="loading" :data="planDetailList" row-key="id" height="800"
       :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       :cell-style="handleChangeCellStyle">
-      <el-table-column label="名称" align="left" prop="name" width="180">
+      <el-table-column fixed="left" label="名称" align="left" prop="name" width="180">
         <template #default="scope">
           <router-link :to="'/mts/detail-bom/index/' + scope.row.id" class="link-type">
             <span>{{ scope.row.name }}</span>
@@ -165,17 +165,19 @@ const { queryParams, form, rules } = toRefs(data);
 
 
 const dateColumns = ref([])
+const allDates = [];
 onMounted(() => {
   // 定义起始和结束日期
   const startDate = dayjs('2024-02-01');
   const endDate = dayjs('2024-02-25');
   // 获取并打印两个日期之间的所有日期
-  const allDates = [];
+
-  for (const date of datesBetween(startDate, endDate)) {
+
-    allDates.push(date.format('YYYY-MM-DD'));
+  for (const date of getDays('2024-02-01', '2024-02-25')) {
+    allDates.push(date);
     dateColumns.value.push({
-      label: date.format('YYYY-MM-DD'),
+      label: date,
-      prop: date.format('YYYY-MM-DD')
+      prop: date
     })
   }
 })
@@ -189,17 +191,42 @@ function* datesBetween(start, end) {
   }
 }
 
+// 获取日期间隔之间的天数
+function getDays(start, end) {
+  const startDate = dayjs(start);
+  const endDate = dayjs(end);
+  let allDates = [];
+  for (let date = startDate.clone(); date.isBefore(endDate); date = date.add(1, 'day')) {
+    allDates.push(date.format('YYYY-MM-DD'));
+  }
+  allDates.push(endDate.format('YYYY-MM-DD'))
+  return allDates
+}
+
 /**
   * 改变表格单元格颜色
   */
 
 function handleChangeCellStyle({ row, column, rowIndex, columnIndex }) {
-  let cellStyle = {}
+  // 获取两个日期之间的所有日期
-  if (column.label == dayjs(row.planStartDate).format('YYYY-MM-DD')) {
+  const planDates = getDays(row.planStartDate, row.planEndDate)
+  let arr = planDates.filter(v => allDates.indexOf(v) > -1)
+
+  let cellStyle = {} //column.label == dayjs(row.planStartDate).format('YYYY-MM-DD')
+  if (arr.includes(column.label)) {
+    if (row.ganttColor) {
+      cellStyle.backgroundColor = row.ganttColor
+    } else {
       cellStyle.backgroundColor = '#FFC000'
+    }
+
     if (rowIndex % 2 == 0) {
+      if (row.ganttColor) {
+        cellStyle.backgroundColor = row.ganttColor
+      } else {
         cellStyle.backgroundColor = '#00B050'
       }
+    }
   } else {
     cellStyle.backgroundColor = 'white'
   }