Coding gantt layout functions.

Author: gudaoxuri

docs/TableDemo.vue

@@ -12,9 +12,9 @@ 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: '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: 1, pno: null, name: 'v1.0优化任务集合', creator: 'xh', stats: ['init'], planStartTime: '2023-10-22', planEndTime: '2023-12-01' },
+  { no: 2, pno: null, name: '测试报告导出', creator: 'xh', stats: ['init'], planStartTime: '2023-10-14', planEndTime: '2024-01-01', actualStartTime: '2023-10-15', actualEndTime: '2023-11-24' },
+  { no: 3, pno: 1, name: '平台支持修改工程下默认分支', creator: 'xh', stats: ['progress', 'risk'], planStartTime: '2023-10-25', planEndTime: '2023-11-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' },
   { no: 6, pno: null, name: '制品文件支持下载和删除', creator: 'xh', stats: ['init'], planStartTime: '2023-10-28', planEndTime: '2023-11-28' },

src/components/common/Menu.vue

@@ -9,7 +9,7 @@ const is_init = ref<boolean>(false)
 const DIFF_OFFSET = 10
 
 const contextmenuMathRandom = computed(() =>
-  Math.floor(Math.random() * 1000000),
+  IwUtils.getRandomString(12),
 )
 
 async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: MenuOffsetKind = MenuOffsetKind.MEDIUM_TOP, size: MenuSizeKind | MenuCustomSize = MenuSizeKind.MEDIUM, force: boolean = false, boundaryEle?: HTMLElement,

src/components/conf.ts

@@ -1,6 +1,7 @@
 import * as iconSvg from '../assets/icon'
 import type { AggregateKind, TableColumnProps, TableCommonColumnProps, TableDataFilterProps, TableDataGroupProps, TableDataGroupResp, TableDataResp, TableDataSliceProps, TableDataSortProps, TableLayoutColumnProps, TableLayoutKernelProps, TableProps, TableStyleProps } from '../props'
 import { DataKind, GanttShowKind, LayoutKind, OperatorKind, SizeKind, SubDataShowKind } from '../props'
+import { IwUtils } from '../utils'
 
 export interface TableBasicConf {
   id: string
@@ -357,7 +358,7 @@ export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]]
     return convertTableColumnPropsToTableColumnConf(column)
   })
   const basicConf: TableBasicConf = {
-    id: props.id ?? `iw-table${Math.floor(Math.random() * 1000000)}`,
+    id: props.id ?? `iw-table${IwUtils.getRandomString(8)}`,
     pkColumnName: props.pkColumnName,
     parentPkColumnName: props.parentPkColumnName,
     columns,

src/components/eventbus.ts

@@ -4,6 +4,7 @@ import locales from '../locales'
 import type { TableCellDictItemsResp, TableDataGroupResp, TableDataQuerySliceProps, TableDataResp, TableEventProps, TableLayoutKernelProps, TableLayoutModifyProps } from '../props'
 import { SubDataShowKind } from '../props'
 
+import { IwUtils } from '../utils'
 import { getParentWithClass } from '../utils/basic'
 import { AlertKind, showAlert } from './common/Alert'
 import { type TableBasicConf, type TableLayoutConf, type TableStyleConf, convertTableLayoutColumnPropsToTableLayoutColumnConf, convertTableLayoutKernelPropsToTableLayoutKernelConf } from './conf'
@@ -31,13 +32,27 @@ export async function watch() {
 }
 
 const EVENT_EXECUTE_HANDLER: {
-  loadDataAfter: ((data: TableDataResp | TableDataGroupResp[], layoutId: string) => Promise<void>)[]
+  loadDataAfter: {
+    id: string
+    event: (data: TableDataResp | TableDataGroupResp[], layoutId: string) => Promise<void>
+  }[]
 } = {
   loadDataAfter: [],
 }
 
-export function registerLoadDataAfterEvent(event: (data: TableDataResp | TableDataGroupResp[], layoutId: string) => Promise<void>) {
-  EVENT_EXECUTE_HANDLER.loadDataAfter.push(event)
+export function registerLoadDataAfterEvent(event: (data: TableDataResp | TableDataGroupResp[], layoutId: string) => Promise<void>): string {
+  const id = `iw-table-load-data-after-${IwUtils.getRandomString(12)}`
+  EVENT_EXECUTE_HANDLER.loadDataAfter.push({
+    id,
+    event,
+  })
+  return id
+}
+
+export function unregisterLoadDataAfterEvent(id: string) {
+  const index = EVENT_EXECUTE_HANDLER.loadDataAfter.findIndex(item => item.id === id)
+  if (index !== -1)
+    EVENT_EXECUTE_HANDLER.loadDataAfter.splice(index, 1)
 }
 
 // -------------------
@@ -134,8 +149,8 @@ export async function loadData(moreForGroupedValue?: any, returnOnlyAggs?: boole
     showAlert(t('_.event.loadDataInvalidScene'), 2, AlertKind.ERROR, getParentWithClass(document.getElementById(`iw-tt-layout-${layout.id}`), 'iw-tt')!)
     throw new Error('[events.loadData]  Invalid scene')
   }
-  EVENT_EXECUTE_HANDLER.loadDataAfter.forEach(async (event) => {
-    await event(layout.data!, layout.id)
+  EVENT_EXECUTE_HANDLER.loadDataAfter.forEach(async (item) => {
+    await item.event(layout.data!, layout.id)
   })
 }
 

src/components/function/RowTree.ts

@@ -4,6 +4,26 @@ import { getParentWithClass } from '../../utils/basic'
 
 export const NODE_DEPTH_FLAG = '__node_depth'
 
+const EVENT_EXECUTE_HANDLER: {
+  id: string
+  event: (dataPk: any, hide: boolean) => Promise<void>
+}[] = []
+
+export function registerRowTreeTriggerEvent(event: (dataPk: any, hide: boolean) => Promise<void>): string {
+  const id = `iw-row-tree-event-${IwUtils.getRandomString(12)}`
+  EVENT_EXECUTE_HANDLER.push({
+    id,
+    event,
+  })
+  return id
+}
+
+export function unregisterRowTreeTriggerEvent(id: string) {
+  const index = EVENT_EXECUTE_HANDLER.findIndex(item => item.id === id)
+  if (index !== -1)
+    EVENT_EXECUTE_HANDLER.splice(index, 1)
+}
+
 export function sortByTree(data: any[], pkColumnName: string, parentPkColumnName?: string) {
   if (parentPkColumnName === undefined)
     return data
@@ -44,12 +64,13 @@ export function renderTreeToggleHandler(hasSubData: boolean): string {
   return `${hasSubData ? `<i class="${iconSvg.SHRINK} cursor-pointer" />` : ``}`
 }
 
-export function registerTreeRowToggleListener(rowsEle: HTMLDivElement) {
+export function registerTreeRowToggleListener(rowsEle: HTMLElement) {
   IwUtils.delegateEvent(rowsEle, 'click', `.${iconSvg.EXPAND}`, (e) => {
     const ele = e.target as HTMLElement
     const currPk = getParentWithClass(ele, 'iw-data-row')!.dataset.pk!
     rowsEle.querySelectorAll(`.iw-data-row[data-parent-pk="${currPk}"]`).forEach((node) => {
       (node as HTMLElement).style.display = 'flex'
+      EVENT_EXECUTE_HANDLER.forEach(item => item.event((node as HTMLElement).dataset.pk, false))
     })
     ele.classList.remove(iconSvg.EXPAND)
     ele.classList.add(iconSvg.SHRINK)
@@ -61,6 +82,7 @@ export function registerTreeRowToggleListener(rowsEle: HTMLDivElement) {
     recursionShrinkRows(rowsEle, currPk)
     ele.classList.remove(iconSvg.SHRINK)
     ele.classList.add(iconSvg.EXPAND)
+    EVENT_EXECUTE_HANDLER.forEach(item => item.event(currPk, false))
     e.stopImmediatePropagation()
   })
 
@@ -72,6 +94,7 @@ export function registerTreeRowToggleListener(rowsEle: HTMLDivElement) {
         shrinkEle.classList.add(iconSvg.EXPAND)
       }
       (node as HTMLElement).style.display = 'none'
+      EVENT_EXECUTE_HANDLER.forEach(item => item.event((node as HTMLElement).dataset.pk, true))
       recursionShrinkRows(rowsEle, (node as HTMLElement).dataset.pk)
     })
   }

src/components/layout/gantt/Gantt.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import * as iconSvg from '../../../assets/icon'
 import locales from '../../../locales'
-import type { TableDataGroupResp, TableDataResp, TableLayoutModifyProps } from '../../../props'
+import { GanttShowKind, type TableDataGroupResp, type TableDataResp, type TableLayoutModifyProps, translateGanttShowKind } from '../../../props'
 import { getParentWithClass } from '../../../utils/basic'
 import { AlertKind, showAlert } from '../../common/Alert'
+import MenuComp, { MenuOffsetKind, MenuSizeKind } from '../../common/Menu.vue'
 import type { TableBasicConf, TableLayoutConf } from '../../conf'
 import * as eb from '../../eventbus'
 import ColumnResizeComp from '../../function/ColumnResize.vue'
@@ -28,6 +30,8 @@ const ganttTimelineRef: Ref<HTMLElement | null> = ref(null)
 const ganttWith: Ref<number> = ref(0)
 const ganttInfo: Ref<GanttInfo | null> = ref(null)
 
+const showKindCompRef = ref<InstanceType<typeof MenuComp>>()
+
 async function generateGanttInfo(data: TableDataResp | TableDataGroupResp[]) {
   if ((props.layout.ganttPlanStartTimeColumnName === undefined || props.layout.ganttPlanEndTimeColumnName === undefined)
     && (props.layout.ganttActualStartTimeColumnName === undefined || props.layout.ganttActualEndTimeColumnName === undefined)) {
@@ -103,7 +107,7 @@ onMounted(() => {
   })
 })
 
-eb.registerLoadDataAfterEvent(async (data: TableDataResp | TableDataGroupResp[], layoutId: string) => {
+const loadDataEventId = eb.registerLoadDataAfterEvent(async (data: TableDataResp | TableDataGroupResp[], layoutId: string) => {
   if (props.layout.id !== layoutId) {
     return
   }
@@ -116,12 +120,23 @@ async function setNewWidth(newWidth: number, _itemId?: string) {
   }
   await eb.modifyLayout(changedLayoutReq)
 }
+
+async function changeShowKind(showKind: GanttShowKind) {
+  const changedLayoutReq: TableLayoutModifyProps = {
+    ganttShowKind: showKind,
+  }
+  await eb.modifyLayout(changedLayoutReq)
+}
+
+onUnmounted(() => {
+  eb.unregisterLoadDataAfterEvent(loadDataEventId)
+})
 </script>
 
 <template>
   <div
     ref="ganttRef"
-    class="iw-gantt flex h-full"
+    class="iw-gantt flex h-full relative"
   >
     <div ref="ganttListRef" class="overflow-y-hidden overflow-x-auto" :style="`width: ${ganttWith - props.layout.ganttTimelineWidth}px`">
       <ListComp :layout="props.layout" :basic="props.basic" />
@@ -180,6 +195,39 @@ async function setNewWidth(newWidth: number, _itemId?: string) {
       </div>
       <ColumnResizeComp resize-item-class="iw-gantt-timeline-container" handle-left :set-size="setNewWidth" />
     </div>
+    <button
+      class="iw-btn iw-btn-outline iw-btn-xs absolute right-1 top-1 z-[1600]"
+      @click="(e) => { showKindCompRef?.show(e.target as HTMLElement, MenuOffsetKind.RIGHT_TOP, MenuSizeKind.MINI) }"
+    >
+      <span class="mr-0.5">{{ translateGanttShowKind(props.layout.ganttShowKind) }}</span>
+      <i :class="`${iconSvg.CHEVRON_DOWN} ml-0.5`" />
+      <MenuComp ref="showKindCompRef">
+        <div
+          class="p-2 hover:cursor-pointer text-xs"
+          @click="changeShowKind(GanttShowKind.DAY)"
+        >
+          {{ translateGanttShowKind(GanttShowKind.DAY) }}
+        </div>
+        <div
+          class="p-2 hover:cursor-pointer text-xs"
+          @click="changeShowKind(GanttShowKind.WEEK)"
+        >
+          {{ translateGanttShowKind(GanttShowKind.WEEK) }}
+        </div>
+        <div
+          class="p-2 hover:cursor-pointer text-xs"
+          @click="changeShowKind(GanttShowKind.MONTH)"
+        >
+          {{ translateGanttShowKind(GanttShowKind.MONTH) }}
+        </div>
+        <div
+          class="p-2 hover:cursor-pointer text-xs"
+          @click="changeShowKind(GanttShowKind.YEAR)"
+        >
+          {{ translateGanttShowKind(GanttShowKind.YEAR) }}
+        </div>
+      </MenuComp>
+    </button>
   </div>
 </template>
 

src/components/layout/gantt/GanttTimelineHeader.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+
 import { GanttShowKind } from '../../../props'
 import { IwUtils } from '../../../utils'
+
 import type { TableStyleConf } from '../../conf'
 import type { GanttInfo, TimelineInfo } from './gantt'
 import { TIMELINE_COLUMN_WIDTH } from './gantt'

src/components/layout/gantt/GanttTimelineRows.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { GanttShowKind, SubDataShowKind } from '../../../props'
 
 import type { TableLayoutConf, TableStyleConf } from '../../conf'
+import { registerRowTreeTriggerEvent, unregisterRowTreeTriggerEvent } from '../../function/RowTree'
 import type { GanttInfo } from './gantt'
 import { TIMELINE_COLUMN_WIDTH } from './gantt'
 
@@ -52,6 +53,44 @@ function setTimelineBar(barEle: HTMLElement, timelineRowEle: HTMLElement, plan:
   barEle.style.display = `block`
 }
 
+function drawDataRelLine(globalOffsetTop: number, currTimelineEle: HTMLElement, parentTimelineEle: HTMLElement) {
+  function doDrawDataRelLine(x1: number, y1: number, x2: number, y2: number) {
+    const svgEle = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svgEle.style.position = 'absolute'
+    svgEle.style.top = `${0}px`
+    svgEle.style.left = `${0}px`
+    svgEle.style.width = '100%'
+    svgEle.style.height = '100%'
+    svgEle.style.pointerEvents = 'none'
+    ganttTimelineRef.value!.appendChild(svgEle)
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    const curve = `M ${x1},${y1} C ${(x1 + x2) / 2},${y1} ${(x1 + x2) / 2},${y2} ${x2},${y2}`
+    path.setAttribute('d', curve)
+    path.setAttribute('stroke', 'black')
+    path.setAttribute('fill', 'transparent')
+    svgEle.appendChild(path)
+  }
+  const hasStartTime = currTimelineEle.dataset.startTime && parentTimelineEle.dataset.startTime
+  const hasEndTime = currTimelineEle.dataset.endTime && parentTimelineEle.dataset.endTime
+  const offsetHeight = globalOffsetTop - (currTimelineEle.getBoundingClientRect().top - parentTimelineEle.getBoundingClientRect().top) + currTimelineEle.offsetHeight
+  if (hasStartTime) {
+    const x1 = currTimelineEle.offsetLeft
+    const y1 = globalOffsetTop + currTimelineEle.offsetTop + currTimelineEle.offsetHeight / 2
+    const x2 = parentTimelineEle.offsetLeft + 2
+    const y2 = offsetHeight + currTimelineEle.offsetHeight / 2
+
+    doDrawDataRelLine(x1, y1, x2, y2)
+  }
+  if (hasEndTime) {
+    const x1 = currTimelineEle.offsetLeft + currTimelineEle.offsetWidth
+    const y1 = globalOffsetTop + currTimelineEle.offsetTop + currTimelineEle.offsetHeight / 2
+    const x2 = parentTimelineEle.offsetLeft + parentTimelineEle.offsetWidth - 2
+    const y2 = offsetHeight + currTimelineEle.offsetHeight / 2
+    doDrawDataRelLine(x1, y1, x2, y2)
+  }
+}
+
 function generateTimelineBar() {
   ganttTimelineRef.value?.querySelectorAll('.iw-gantt-timeline-plan-bar').forEach((ele) => {
     const barEle = ele as HTMLElement
@@ -69,25 +108,58 @@ function generateTimelineBar() {
   })
 }
 
+function generateDataRelLine() {
+  ganttTimelineRef.value!.querySelectorAll('svg').forEach((ele) => {
+    ele.remove()
+  })
+  if (props.subDataShowKind === SubDataShowKind.FOLD_SUB_DATA) {
+    ganttTimelineRef.value?.querySelectorAll('.iw-gantt-timeline-row[data-parent-pk]').forEach((ele) => {
+      const currRowEle = ele as HTMLElement
+      if (currRowEle.style.display === 'none') {
+        return
+      }
+      const parentRowEle = ganttTimelineRef.value?.querySelector(`.iw-gantt-timeline-row[data-pk="${currRowEle.dataset.parentPk!}"]`)
+      if (parentRowEle) {
+        drawDataRelLine(currRowEle.offsetTop, currRowEle.querySelector('.iw-gantt-timeline-plan-bar')!, parentRowEle.querySelector('.iw-gantt-timeline-plan-bar')!)
+      }
+    })
+  }
+}
+
 watch(() => props.ganttInfo, () => {
   nextTick(() => {
     generateTimelineBar()
+    generateDataRelLine()
   })
 })
 
+let rowTreeEventId: string | null = null
 onMounted(() => {
   generateTimelineBar()
+  generateDataRelLine()
+
+  rowTreeEventId = registerRowTreeTriggerEvent(async (dataPk, hide) => {
+    if (ganttTimelineRef.value) {
+      const rowEle = ganttTimelineRef.value?.querySelector(`.iw-gantt-timeline-row[data-pk="${dataPk}"]`) as HTMLElement
+      rowEle.style.display = hide ? 'none' : 'flex'
+      generateDataRelLine()
+    }
+  })
+})
+
+onUnmounted(() => {
+  unregisterRowTreeTriggerEvent(rowTreeEventId!)
 })
 </script>
 
 <template>
-  <div ref="ganttTimelineRef">
+  <div ref="ganttTimelineRef" class="relative">
     <div
       v-for="row in props.records"
-      :key="`${layout.id}-${row[props.pkColumnName]}-${props.subDataShowKind}`"
-      :data-pk="row[props.pkColumnName] "
+      :key="`${layout.id}-${row[props.pkColumnName]}`"
+      :data-pk="row[props.pkColumnName]"
       :data-parent-pk="props.parentPkColumnName ? row[props.parentPkColumnName] : undefined"
-      :class="`${props.styleConf.rowClass} iw-gantt-timeline-row ${props.subDataShowKind === SubDataShowKind.FOLD_SUB_DATA ? 'iw-data-fold' : ''} flex bg-base-100 border-b border-b-base-300 border-r border-r-base-300`"
+      :class="`${props.styleConf.rowClass} relative iw-gantt-timeline-row flex bg-base-100 border-b border-b-base-300 border-r border-r-base-300`"
     >
       <div
         v-for="(timeline, idx) in ganttInfo.timeline" :key="`${layout.id}-${idx}`"