update 甘特图暗色主题样式配置
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="gl-page-content">
|
||||
<div class="gl-page-content gantt">
|
||||
<div class="page-filter-box">
|
||||
<el-form :model="filterFprmData" inline>
|
||||
<slot name="filter-form"></slot>
|
||||
@@ -8,7 +8,6 @@
|
||||
v-model="filterFprmData.userGroupId"
|
||||
class="mw200"
|
||||
clearable
|
||||
@clear="filterFprmData.userGroupId = ''"
|
||||
@change="filterWorkLoadFun('group')"
|
||||
>
|
||||
<el-option
|
||||
@@ -71,10 +70,6 @@
|
||||
<el-radio value="day">日</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item class="mr0">
|
||||
<el-button type="primary" @click="filterWorkLoadFun">查询</el-button>
|
||||
<el-button type="" @click="clearParamFun">清空</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
@@ -104,7 +99,6 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||
import { userQueryGroupApi, userQueryGroupDetailApi } from '@/api/system/user';
|
||||
import { getListUserWorkloadsApi } from '@/api/project/task';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { ChineseWorkday } from 'chinese-workday';
|
||||
import DetailDia from '@/views/task/workLoad/detailDia.vue';
|
||||
import { debounce } from 'lodash-es';
|
||||
|
||||
@@ -148,11 +142,9 @@ dayjs.extend(isoWeek);
|
||||
|
||||
let Gantt: any = gantt;
|
||||
const ganttEvents = ref<any>([]);
|
||||
const colorList: string[] = ['#ffffff', '#e9f4ff', '#c6e2ff', '#acd3ff', '#79bbff', '#409eff']; // 格子颜色
|
||||
const colorList: string[] = ['#ffffff', '#d9ecff', '#c6e2ff', '#c6e2ff', '#79bbff', '#409eff']; // 格子颜色
|
||||
const taskOriginData = ref<any>([]); // 所有用户的任务数据
|
||||
const loading = ref<boolean>(false);
|
||||
// const workDaysRange = ref<number>(0);
|
||||
// const ww = ref<ChineseWorkday>();
|
||||
const visible = ref(false);
|
||||
|
||||
const filterFprmData = reactive<any>({
|
||||
@@ -219,10 +211,6 @@ const queryGroupUserListFun = async (id: any) => {
|
||||
}
|
||||
};
|
||||
const getWorkLoadDataFun = async () => {
|
||||
// if (!filterFprmData.userIds.length) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
loading.value = true;
|
||||
Gantt.clearAll();
|
||||
taskOriginData.value = [];
|
||||
@@ -245,7 +233,6 @@ const getWorkLoadDataFun = async () => {
|
||||
Gantt.config.end_date = filterFprmData.endTime;
|
||||
Gantt.ext.zoom.setLevel(filterFprmData.dateType);
|
||||
if (taskOriginData.value.length > 0) {
|
||||
// calculateWorkDay([filterFprmData.beginTime, filterFprmData.endTime]);
|
||||
formatUserTask(taskOriginData.value, [filterFprmData.beginTime, filterFprmData.endTime]);
|
||||
}
|
||||
|
||||
@@ -255,7 +242,6 @@ const getWorkLoadDataFun = async () => {
|
||||
});
|
||||
loading.value = false;
|
||||
} else {
|
||||
// console.error('获取用户工作负载信息失败');
|
||||
// const res1 = {
|
||||
// code: 200,
|
||||
// data: [
|
||||
@@ -398,19 +384,12 @@ const getWorkLoadDataFun = async () => {
|
||||
|
||||
const formatUserTask = (data: any, time: any) => {
|
||||
const ganttData = data.map((item: any, index: any) => {
|
||||
// let jobSaturation = 0;
|
||||
// if (item.taskList?.length > 0) {
|
||||
// item.taskList.forEach((item_1: any) => {
|
||||
// jobSaturation = jobSaturation + workDaysRange.value * item_1.workRate; // 没有workRate
|
||||
// });
|
||||
// }
|
||||
return {
|
||||
id: index + 1,
|
||||
userName: item.userName,
|
||||
userId: item.userId,
|
||||
taskNum: item.taskNum ? item.taskNum : 0,
|
||||
workNum: item.workNum ? item.workNum : 0,
|
||||
// jobSaturation: jobSaturation.toFixed(2),
|
||||
start_date: time[0],
|
||||
duration: dayjs(time[1]).diff(dayjs(time[0]), 'day'),
|
||||
};
|
||||
@@ -458,26 +437,6 @@ const filterWorkLoadFun = async (flag?: any) => {
|
||||
await refreshGanttFun();
|
||||
};
|
||||
|
||||
// const clearParamFun = async () => {
|
||||
// await getUserGroupFun();
|
||||
// filterFprmData.beginTime = dayjs().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss');
|
||||
// filterFprmData.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
// await filterWorkLoadFun();
|
||||
// };
|
||||
|
||||
// 计算时间段中的工作日天数
|
||||
// const calculateWorkDay = ([startDate, endDate]: any) => {
|
||||
// let workdays = 0;
|
||||
// let currentDate: any = dayjs(startDate);
|
||||
// while (currentDate.isBefore(dayjs(endDate)) || currentDate.isSame(dayjs(endDate), 'day')) {
|
||||
// if (ww?.value?.isWorkday(currentDate)) {
|
||||
// workdays++;
|
||||
// }
|
||||
// currentDate = currentDate.add(1, 'day');
|
||||
// }
|
||||
// workDaysRange.value = workdays;
|
||||
// };
|
||||
|
||||
// 生成日期列表的函数
|
||||
const generateDateList = (startDate: any, endDate: any, mode = 'day') => {
|
||||
const result = [];
|
||||
@@ -781,59 +740,45 @@ onBeforeUnmount(() => {
|
||||
.gl-page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.page-filter-box {
|
||||
width: 100%;
|
||||
// height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mw200 {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.group-width {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
// justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mr0 {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
// flex: 1;
|
||||
|
||||
.gant-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.color-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: 12px;
|
||||
|
||||
& > div:first-child {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@@ -843,94 +788,61 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
:deep(.cell-style) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.gantt_links_area) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.gantt_bars_area) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.gantt_tree_icon.gantt_file) {
|
||||
background-image: url('~@/assets/imgs/versionTree/user.svg') !important;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.gantt_grid_data .gantt_row.gantt_selected,
|
||||
.gantt_grid_data .gantt_row.odd.gantt_selected,
|
||||
.gantt_task_row.gantt_selected
|
||||
) {
|
||||
background-color: #96bdff;
|
||||
|
||||
&:hover {
|
||||
background-color: #96bdff !important;
|
||||
<!-- 甘特图相关样式 -->
|
||||
<style lang="scss">
|
||||
.gantt {
|
||||
.gantt_total_row {
|
||||
font-weight: bold;
|
||||
.total-cell {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover) {
|
||||
background-color: #ecf7ff;
|
||||
}
|
||||
|
||||
:deep(.gantt_grid_data .gantt_row:hover) {
|
||||
background-color: #ecf7ff;
|
||||
}
|
||||
|
||||
:deep(.task-table-container) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.gantt_row.gantt_row_task) {
|
||||
position: none;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 600px;
|
||||
|
||||
.filter-box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.gantt_cell {
|
||||
.gantt-cell-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
.gantt_grid_data .gantt_row:hover {
|
||||
background-color: #ecf7ff;
|
||||
}
|
||||
}
|
||||
:deep(.gantt_total_row) {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
.total-cell {
|
||||
.gantt_bars_area {
|
||||
display: none;
|
||||
}
|
||||
.cell-style {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
:deep(.gantt_cell) {
|
||||
.gantt-cell-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
// 深色主题适配
|
||||
.gantt_grid div,
|
||||
.gantt_task .gantt_task_scale .gantt_scale_cell,
|
||||
.gantt_task_cell {
|
||||
background-color: var(--el-bg-color);
|
||||
border-color: var(--el-border-color);
|
||||
}
|
||||
.gantt_grid_data .gantt_cell {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.gantt_data_area {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
.gantt_task_row,
|
||||
.gantt_scale_line {
|
||||
border-color: var(--el-border-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user