This commit is contained in:
2026-03-18 17:58:13 +08:00

View File

@@ -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:${
colorList[tasks?.length >= 5 ? 5 : tasks?.length]
};cursor:${tasks?.length > 0 ? 'pointer' : 'default'}' userName=${task?.userName} userId=${
const taskCount = tasks?.length || 0;
const colorIndex = getColorIndex(taskCount);
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%;