merge

src/views/task/workLoad/index.vue

@@ -46,7 +46,7 @@
             :clearable="false"
             placeholder="请选择开始时间"
             value-format="YYYY-MM-DD HH:mm:ss"
-            format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm"
             @change="filterWorkLoadFun"
           />
         </el-form-item>
@@ -57,7 +57,7 @@
             :clearable="false"
             placeholder="请选择结束时间"
             value-format="YYYY-MM-DD HH:mm:ss"
-            format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm"
             @change="filterWorkLoadFun"
           />
         </el-form-item>
@@ -79,9 +79,10 @@
     </div>
     <div class="page-footer">
       <template v-for="(item, index) in colorList" :key="index">
-        <div class="color-item" v-if="index > 0">
+        <div class="color-item">
           <div :style="{ background: item }"></div>
-          <div>{{ index >= 5 ? '大于或等于5个任务' : index + '个任务' }}</div>
+          <div v-if="dimension === 'person'">{{ workLevalList[index] + '个任务' }}</div>
+          <div v-else>{{ personLevelList[index] + '个任务' }}</div>
         </div>
       </template>
     </div>
@@ -144,7 +145,16 @@ dayjs.extend(isoWeek);
 
 const Gantt: any = gantt;
 const ganttEvents = ref<any>([]);
-const colorList: string[] = ['#ffffff', '#d9ecff', '#c6e2ff', '#a1cefc', '#79bbff', '#409eff']; // 格子颜色
+// const colorList: string[] = ['#ffffff', '#d9ecff', '#c6e2ff', '#a1cefc', '#79bbff', '#409eff']; // 格子颜色
+const colorList: string[] = [
+  'rgb(179, 225, 157)',
+  'rgb(160, 207, 255)',
+  'rgb(248, 227, 197)',
+  'rgb(250, 182, 182)',
+]; // 格子颜色
+const workLevalList: string[] = ['1~2', '3', '4', '≥5'];
+const personLevelList: string[] = ['1~4', '5~9', '10~14', '≥15'];
+
 const taskOriginData = ref<any>([]); // 所有用户的任务数据
 const loading = ref<boolean>(false);
 const visible = ref(false);
@@ -494,12 +504,15 @@ const initGantt = () => {
         tasks = currentNameMap.get(dateFormat);
       }
     }
-    return `<div class='${tasks?.length > 0 ? 'cell-style' : ''}' style='background:${
+    const taskCount = tasks?.length || 0;
-      colorList[tasks?.length >= 5 ? 5 : tasks?.length]
+    const colorIndex = getColorIndex(taskCount);
-    };cursor:${tasks?.length > 0 ? 'pointer' : 'default'}' userName=${task?.userName} userId=${
+    const backgroundColor = colorIndex >= 0 ? colorList[colorIndex] : '';
+
+    return `<div class='${taskCount > 0 ? 'cell-style' : ''}' style='background:${backgroundColor};cursor:${taskCount > 0 ? 'pointer' : 'default'}' userName=${task?.userName} userId=${
       task?.userId
     }  tasks=${JSON.stringify(tasks)} date=${dayjs(date).format('YYYY-MM-DD')}></div>`;
   };
+
   Gantt.templates.grid_row_class = function (start: any, end: any, task: any) {
     console.warn(start, end);
     if (task.type === 'total') {
@@ -538,6 +551,26 @@ const initGantt = () => {
     data: [],
   });
 };
+// 根据任务数量获取颜色索引
+const getColorIndex = (taskCount: number) => {
+  if (props.dimension === 'person') {
+    // 工作负载
+    if (taskCount === 0) return -1; // 无任务，不设置颜色
+    if (taskCount >= 1 && taskCount <= 2) return 0; // 1~2个任务
+    if (taskCount === 3) return 1; // 3个任务
+    if (taskCount === 4) return 2; // 4个任务
+    if (taskCount >= 5) return 3; // ≥5个任务
+    return -1;
+  } else {
+    // 人力负载
+    if (taskCount === 0) return -1; // 无任务，不设置颜色
+    if (taskCount >= 1 && taskCount <= 4) return 0; // 1~4个任务
+    if (taskCount >= 5 && taskCount <= 9) return 1; // 5~9个任务
+    if (taskCount >= 10 && taskCount <= 14) return 2; // 10~14个任务
+    if (taskCount >= 15) return 3; // ≥15个任务
+    return -1;
+  }
+};
 
 const tableData = ref<any>([]);
 
@@ -653,6 +686,8 @@ onBeforeUnmount(() => {
 .gl-page-content {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   .page-filter-box {
     width: 100%;
     display: flex;
@@ -674,7 +709,8 @@ onBeforeUnmount(() => {
   }
   .page-content {
     width: 100%;
-    height: calc(100% - 80px);
+    // height: calc(100% - 80px);
+    flex: 1;
     .gant-page {
       width: 100%;
       height: 100%;