merge
This commit is contained in:
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user