Skip to content

Commit

Permalink
Coding gantt layout functions.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gudaoxuri
gudaoxuri committed Jun 14, 2024
1 parent 1d2a992 commit 0cda067
Show file tree
Hide file tree
Showing 12 changed files with 217 additions and 105 deletions.
24 changes: 13 additions & 11 deletions docs/TableDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const NAME_DICT = [{ title: '星航', value: 'xh', avatar: 'https://pic1.zhimg.c
const STATS_DICT = [{ title: '初始化', value: 'init', color: '#43ad7f7f' }, { title: '进行中', value: 'progress' }, { title: '有风险', value: 'risk', color: '#be14807f' }, { title: '已完成', value: 'finish' }, { title: '已关闭', value: 'close' }]
const DATA: { [key: string]: any }[] = [
{ no: 1, pno: null, name: 'v1.0优化任务集合', creator: 'xh', stats: ['init'], planStartTime: Date.now(), planEndTime: '2024-01-24' },
{ no: 2, pno: null, name: '测试报告导出', creator: 'xh', stats: ['init'], planStartTime: '2023-09-14', planEndTime: '2024-01-30', realStartTime: '2023-09-15', realEndTime: '2023-09-24' },
{ no: 1, pno: null, name: 'v1.0优化任务集合', creator: 'xh', stats: ['init'], planStartTime: '2023-09-10' },
{ no: 2, pno: null, name: '测试报告导出', creator: 'xh', stats: ['init'], planStartTime: '2023-09-14', planEndTime: '2024-01-30', actualStartTime: '2023-09-15', actualEndTime: '2023-09-24' },
{ no: 3, pno: 1, name: '平台支持修改工程下默认分支', creator: 'xh', stats: ['progress', 'risk'], planStartTime: '2023-10-25', planEndTime: '2024-01-29' },
{ no: 4, pno: 1, name: '工作项优化', creator: 'xh', stats: ['init'], planStartTime: '2023-10-26', planEndTime: '2023-11-25' },
{ no: 5, pno: 1, name: '作业执行日志实时获取并增加搜索和支持定位', creator: 'xh', stats: ['init'], planStartTime: '2023-10-27', planEndTime: '2023-11-30' },
Expand Down Expand Up @@ -58,8 +58,8 @@ const columns = [
{ name: 'stats', title: '状态', useDict: true, dictEditable: true, multiValue: true, sortable: true, groupable: true },
{ name: 'planStartTime', title: '计划开始时间', dataKind: DataKind.DATETIME, sortable: true },
{ name: 'planEndTime', title: '计划结束时间', dataKind: DataKind.DATETIME, sortable: true },
{ name: 'realStartTime', title: '实际开始时间', dataKind: DataKind.DATETIME, sortable: true },
{ name: 'realEndTime', title: '实际结束时间', dataKind: DataKind.DATETIME, sortable: true },
{ name: 'actualStartTime', title: '实际开始时间', dataKind: DataKind.DATETIME, sortable: true },
{ name: 'actualEndTime', title: '实际结束时间', dataKind: DataKind.DATETIME, sortable: true },
]
const layouts = [{
Expand All @@ -77,9 +77,9 @@ const layouts = [{
}, {
name: 'planEndTime',
}, {
name: 'realStartTime',
name: 'actualStartTime',
}, {
name: 'realEndTime',
name: 'actualEndTime',
}],
}, {
id: 'hi2',
Expand All @@ -98,9 +98,9 @@ const layouts = [{
}, {
name: 'planEndTime',
}, {
name: 'realStartTime',
name: 'actualStartTime',
}, {
name: 'realEndTime',
name: 'actualEndTime',
}],
aggs: { name: AggregateKind.MIN },
}, {
Expand All @@ -122,9 +122,9 @@ const layouts = [{
name: 'planEndTime',
categoryTitle: 'Time',
}, {
name: 'realStartTime',
name: 'actualStartTime',
}, {
name: 'realEndTime',
name: 'actualEndTime',
}],
aggs: { name: AggregateKind.MIN },
}]
Expand Down Expand Up @@ -617,9 +617,11 @@ const tableProps: Ref<TableProps> = ref({
},
defaultActionColumnWidth: 100,
defaultShowAggs: true,
defaultGanttTimelineWidth: 300,
defaultGanttTimelineWidth: 500,
defaultGanttPlanStartTimeColumnName: 'planStartTime',
defaultGanttPlanEndTimeColumnName: 'planEndTime',
defaultGanttActualStartTimeColumnName: 'actualStartTime',
defaultGanttActualEndTimeColumnName: 'actualEndTime',
})
onMounted(() => {
Expand Down
3 changes: 3 additions & 0 deletions src/assets/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,10 @@
"MONTH": "Month",
"YEAR": "Year"
},
"planTimeTitle": "Planned time",
"actualTimeTitle": "Actual time",
"error": {
"startDateGreaterThanEndDate": "The start date [{startDate}] is greater than the end date [{endDate}] ",
"timeColumnNotExist": "Not found the field corresponding to the planned or actual time"
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/assets/locales/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,10 @@
"MONTH": "月",
"YEAR": "年"
},
"planTimeTitle": "计划时间",
"actualTimeTitle": "实际时间",
"error": {
"startDateGreaterThanEndDate": "存在开始时间 [{startDate}] 大于结束时间 [{endDate}]的错误数据",
"timeColumnNotExist": "找不到计划或实际时间对应的字段"
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/components/conf.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export interface TableBasicConf {
defaultGanttTimelineWidth: number
defaultGanttPlanStartTimeColumnName?: string
defaultGanttPlanEndTimeColumnName?: string
defaultGanttRealStartTimeColumnName?: string
defaultGanttRealEndTimeColumnName?: string
defaultGanttActualStartTimeColumnName?: string
defaultGanttActualEndTimeColumnName?: string
}

export interface TableCommonColumnConf {
Expand Down Expand Up @@ -107,8 +107,8 @@ export interface TableLayoutKernelConf {
ganttTimelineWidth: number
ganttPlanStartTimeColumnName?: string
ganttPlanEndTimeColumnName?: string
ganttRealStartTimeColumnName?: string
ganttRealEndTimeColumnName?: string
ganttActualStartTimeColumnName?: string
ganttActualEndTimeColumnName?: string

data?: TableDataResp | TableDataGroupResp[]
selectedDataPks: any[]
Expand All @@ -135,8 +135,8 @@ export function convertTableLayoutKernelPropsToTableLayoutKernelConf(props: Tabl
ganttTimelineWidth: props.ganttTimelineWidth ?? basicConf.defaultGanttTimelineWidth,
ganttPlanStartTimeColumnName: props.ganttPlanStartTimeColumnName ?? basicConf.defaultGanttPlanStartTimeColumnName,
ganttPlanEndTimeColumnName: props.ganttPlanEndTimeColumnName ?? basicConf.defaultGanttPlanEndTimeColumnName,
ganttRealStartTimeColumnName: props.ganttRealStartTimeColumnName ?? basicConf.defaultGanttRealStartTimeColumnName,
ganttRealEndTimeColumnName: props.ganttRealEndTimeColumnName ?? basicConf.defaultGanttRealEndTimeColumnName,
ganttActualStartTimeColumnName: props.ganttActualStartTimeColumnName ?? basicConf.defaultGanttActualStartTimeColumnName,
ganttActualEndTimeColumnName: props.ganttActualEndTimeColumnName ?? basicConf.defaultGanttActualEndTimeColumnName,
selectedDataPks: [],
}
}
Expand Down Expand Up @@ -376,8 +376,8 @@ export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]]
defaultGanttTimelineWidth: props.defaultGanttTimelineWidth ?? 400,
defaultGanttPlanStartTimeColumnName: props.defaultGanttPlanStartTimeColumnName,
defaultGanttPlanEndTimeColumnName: props.defaultGanttPlanEndTimeColumnName,
defaultGanttRealStartTimeColumnName: props.defaultGanttRealStartTimeColumnName,
defaultGanttRealEndTimeColumnName: props.defaultGanttRealEndTimeColumnName,
defaultGanttActualStartTimeColumnName: props.defaultGanttActualStartTimeColumnName,
defaultGanttActualEndTimeColumnName: props.defaultGanttActualEndTimeColumnName,
}
const layoutsConf: TableLayoutConf[] = []
props.layouts.forEach((layout) => {
Expand Down
10 changes: 5 additions & 5 deletions src/components/eventbus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,8 +305,8 @@ export async function newLayout(newLayoutProps: TableLayoutKernelProps): Promise
ganttTimelineWidth: newLayoutProps.ganttTimelineWidth,
ganttPlanStartTimeColumnName: newLayoutProps.ganttPlanStartTimeColumnName,
ganttPlanEndTimeColumnName: newLayoutProps.ganttPlanEndTimeColumnName,
ganttRealStartTimeColumnName: newLayoutProps.ganttRealStartTimeColumnName,
ganttRealEndTimeColumnName: newLayoutProps.ganttRealEndTimeColumnName,
ganttActualStartTimeColumnName: newLayoutProps.ganttActualStartTimeColumnName,
ganttActualEndTimeColumnName: newLayoutProps.ganttActualEndTimeColumnName,
}

const layout = tableLayoutsConf.find(layout => layout.id === currentLayoutId.value)!
Expand Down Expand Up @@ -335,8 +335,8 @@ export async function newLayout(newLayoutProps: TableLayoutKernelProps): Promise
ganttTimelineWidth: newLayoutProps.ganttTimelineWidth,
ganttPlanStartTimeColumnName: newLayoutProps.ganttPlanStartTimeColumnName,
ganttPlanEndTimeColumnName: newLayoutProps.ganttPlanEndTimeColumnName,
ganttRealStartTimeColumnName: newLayoutProps.ganttRealStartTimeColumnName,
ganttRealEndTimeColumnName: newLayoutProps.ganttRealEndTimeColumnName,
ganttActualStartTimeColumnName: newLayoutProps.ganttActualStartTimeColumnName,
ganttActualEndTimeColumnName: newLayoutProps.ganttActualEndTimeColumnName,
})
tableLayoutsConf.push({
id: layoutId,
Expand Down Expand Up @@ -417,7 +417,7 @@ export async function modifyLayout(changedLayoutProps: TableLayoutModifyProps, b
if (changedLayoutProps.quickSearchContent || changedLayoutProps.filters || changedLayoutProps.sorts
|| changedLayoutProps.group || changedLayoutProps.removeGroup || changedLayoutProps.aggs
|| changedLayoutProps.defaultSlice || changedLayoutProps.groupSlices || changedLayoutProps.subDataShowKind
|| changedLayoutProps.newColumn || changedLayoutProps.changedColumn || changedLayoutProps.deletedColumnName
|| changedLayoutProps.newColumn || changedLayoutProps.deletedColumnName
) {
if (Object.entries(changedLayoutProps).length === 1 && changedLayoutProps.aggs) {
await loadData(byGroupValue, true)
Expand Down
4 changes: 2 additions & 2 deletions src/components/function/FilterSetting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,15 +222,15 @@ async function saveFilterGroup() {
items: selectedFilterGroup.value?.filter(item =>
item.operator === OperatorKind.IS_EMPTY || item.operator === OperatorKind.NOT_EMPTY || item.values.length > 0,
).map((item) => {
const realValue = item.operator === OperatorKind.IS_EMPTY || item.operator === OperatorKind.NOT_EMPTY
const actualValue = item.operator === OperatorKind.IS_EMPTY || item.operator === OperatorKind.NOT_EMPTY
? undefined
: item.operator === OperatorKind.IN || item.operator === OperatorKind.NOT_IN
? item.values
: item.values[0]
return {
columnName: item.columnName,
operator: item.operator,
value: realValue,
value: actualValue,
}
}) ?? [],
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/function/Pagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ const props = defineProps<{
}>()
const fetchNumberSelectCompRef = ref<InstanceType<typeof MenuComp>>()
function getRealSlice(): TableDataSliceProps {
function getActualSlice(): TableDataSliceProps {
return props.groupValue && props.groupSlices && props.groupSlices[props.groupValue]
? props.groupSlices[props.groupValue]
: props.defaultSlice
}
function getTotalPage() {
return Math.ceil(props.totalNumber / getRealSlice().fetchNumber)
return Math.ceil(props.totalNumber / getActualSlice().fetchNumber)
}
function getCurrentPage() {
return Math.ceil(getRealSlice().offsetNumber / getRealSlice().fetchNumber) + 1
return Math.ceil(getActualSlice().offsetNumber / getActualSlice().fetchNumber) + 1
}
function getShowPages(): number[] {
Expand Down Expand Up @@ -122,11 +122,11 @@ async function setSlice(newPage?: number, newFetchNumber?: number) {
<i :class="iconSvg.LAST" />
</button>
<button class="iw-btn ml-1 mr-1 iw-btn-xs" @click="(e) => { fetchNumberSelectCompRef?.show(e.target as HTMLElement, MenuOffsetKind.MEDIUM_BOTTOM, MenuSizeKind.MINI) }">
{{ getRealSlice().fetchNumber }}
{{ getActualSlice().fetchNumber }}
</button>
<MenuComp ref="fetchNumberSelectCompRef">
<div
v-for="number in getRealSlice().fetchNumbers" :key="number"
v-for="number in getActualSlice().fetchNumbers" :key="number"
class="p-2 hover:cursor-pointer text-xs"
@click="setFetchNumber(number)"
>
Expand Down
56 changes: 35 additions & 21 deletions src/components/layout/gantt/Gantt.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { AlertKind, showAlert } from '../../common/Alert'
import type { TableBasicConf, TableLayoutConf } from '../../conf'
import * as eb from '../../eventbus'
import ColumnResizeComp from '../../function/ColumnResize.vue'
import PaginationComp from '../../function/Pagination.vue'
import ListComp from '../list/List.vue'
import { type GanttInfo, TIMELINE_COLUMN_WIDTH, generateTimeline, getStartAndEndDay } from './gantt'
import GanttTimelineHeaderComp from './GanttTimelineHeader.vue'
Expand All @@ -29,31 +28,48 @@ const ganttInfo: Ref<GanttInfo | null> = ref(null)
async function generateGanttInfo(data: TableDataResp | TableDataGroupResp[]) {
if ((props.layout.ganttPlanStartTimeColumnName === undefined || props.layout.ganttPlanEndTimeColumnName === undefined)
&& (props.layout.ganttRealStartTimeColumnName === undefined || props.layout.ganttRealEndTimeColumnName === undefined)) {
&& (props.layout.ganttActualStartTimeColumnName === undefined || props.layout.ganttActualEndTimeColumnName === undefined)) {
showAlert(t('gantt.error.timeColumnNotExist'), 2, AlertKind.WARNING, getParentWithClass(ganttRef.value, 'iw-tt')!)
return
}
let timelineStartDate: Date | null = null
let timelineEndDate: Date | null = null
let hasError = false
// Determine the start and end time of the timeline based on the returned data
if (Array.isArray(data)) {
data.forEach((groupData) => {
groupData.records.forEach((d) => {
const { startDate, endDate } = getStartAndEndDay(d.records, props.layout.ganttPlanStartTimeColumnName, props.layout.ganttPlanEndTimeColumnName, props.layout.ganttRealStartTimeColumnName, props.layout.ganttRealEndTimeColumnName)
if (timelineStartDate === null || startDate < timelineStartDate) {
timelineStartDate = startDate
try {
const { startDate, endDate } = getStartAndEndDay(d.records, props.layout.ganttPlanStartTimeColumnName, props.layout.ganttPlanEndTimeColumnName, props.layout.ganttActualStartTimeColumnName, props.layout.ganttActualEndTimeColumnName)
if (timelineStartDate === null || startDate < timelineStartDate) {
timelineStartDate = startDate
}
if (timelineEndDate === null || endDate > timelineEndDate) {
timelineEndDate = endDate
}
}
if (timelineEndDate === null || endDate > timelineEndDate) {
timelineEndDate = endDate
catch (e: any) {
showAlert(e.message, 2, AlertKind.WARNING, getParentWithClass(ganttRef.value, 'iw-tt')!)
hasError = true
}
})
})
}
else {
const { startDate, endDate } = getStartAndEndDay(data.records, props.layout.ganttPlanStartTimeColumnName, props.layout.ganttPlanEndTimeColumnName, props.layout.ganttRealStartTimeColumnName, props.layout.ganttRealEndTimeColumnName)
timelineStartDate = startDate
timelineEndDate = endDate
try {
const { startDate, endDate } = getStartAndEndDay(data.records, props.layout.ganttPlanStartTimeColumnName, props.layout.ganttPlanEndTimeColumnName, props.layout.ganttActualStartTimeColumnName, props.layout.ganttActualEndTimeColumnName)
timelineStartDate = startDate
timelineEndDate = endDate
}
catch (e: any) {
showAlert(e.message, 2, AlertKind.WARNING, getParentWithClass(ganttRef.value, 'iw-tt')!)
hasError = true
return
}
}
if (hasError) {
return
}
// Package timeline information
const holidays = await eb.loadHolidays(timelineStartDate as Date, timelineEndDate as Date)
Expand All @@ -64,18 +80,18 @@ async function generateGanttInfo(data: TableDataResp | TableDataGroupResp[]) {
}
}
function getTimelineRealWidth() {
function getTimelineActualWidth() {
const styles: any = {}
styles.width = `${ganttInfo.value!.timeline.length * TIMELINE_COLUMN_WIDTH}px`
return styles
}
onMounted(() => {
// Remove aggregation & action bar functions in this layout
props.layout.aggs = undefined
props.layout.actionColumnRender = undefined
props.layout.columns.map((col) => {
col.categoryTitle = ''
col.wrap = false
return col
})
ganttWith.value = ganttRef.value!.offsetWidth
Expand Down Expand Up @@ -105,13 +121,13 @@ async function setNewWidth(newWidth: number, _itemId?: string) {
<ListComp :layout="props.layout" :basic="props.basic" />
</div>
<div
class="iw-gantt-timeline-container overflow-auto border-l border-l-base-300 border-l-2"
class="iw-gantt-timeline-container overflow-auto border-l-2 border-l-base-300"
:style="`width: ${props.layout.ganttTimelineWidth}px`"
>
<div
v-if="ganttInfo"
:class="`iw-gantt-timeline relative iw-gantt-timeline--size${props.basic.styles.size}`"
:style="getTimelineRealWidth()"
:style="getTimelineActualWidth()"
>
<GanttTimelineHeaderComp :gantt-info="ganttInfo" :layout-id="props.layout.id" :style-conf="props.basic.styles" />
<template v-if="props.layout.data && !Array.isArray(props.layout.data)">
Expand All @@ -120,27 +136,25 @@ async function setNewWidth(newWidth: number, _itemId?: string) {
:pk-column-name="props.basic.pkColumnName"
:parent-pk-column-name="props.basic.parentPkColumnName"
:sub-data-show-kind="props.layout.subDataShowKind"
:layout-id="props.layout.id"
:layout="props.layout"
:style-conf="props.basic.styles"
:gantt-info="ganttInfo"
/>
</template>
<template v-else-if="props.layout.data && Array.isArray(props.layout.data)">
<template v-for="groupData in props.layout.data" :key="`${props.layout.id}-${groupData.groupValue}`">
<div
:class="`${props.basic.styles.rowClass} iw-gantt-timeline-row flex bg-base-100 border-b border-b-base-300 border-r border-r-base-300`"
>&nbsp;</div>
<GanttTimelineRowComp
:records="groupData.records"
:pk-column-name="props.basic.pkColumnName"
:parent-pk-column-name="props.basic.parentPkColumnName"
:sub-data-show-kind="props.layout.subDataShowKind"
:layout-id="props.layout.id"
:layout="props.layout"
:style-conf="props.basic.styles"
:gantt-info="ganttInfo"
/>
<div
class="flex justify-end p-2 min-h-0"
>
<PaginationComp :default-slice="layout.defaultSlice" :group-slices="layout.groupSlices" :group-value="groupData.groupValue" :total-number="groupData.totalNumber" />
</div>
</template>
</template>
</div>
Expand Down
Loading

0 comments on commit 0cda067

Please sign in to comment.