feat: ✨add date line in column

demo/demo.vue

@@ -56,28 +56,28 @@ let id = 0;
 
 const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 50; i++) {
+for (let i = 0; i < 100; i++) {
   onAdd();
 }
 
 ganttData[0].children = [
   {
     id: ++id,
     name: 'sub-t' + id,
-    startDate: new Date(2020, 0, 1),
-    endDate: new Date(2020, 0, 5)
+    startDate: new Date(2023, 3, 1),
+    endDate: new Date(2023, 3, 5)
   },
   {
     id: ++id,
     name: 'sub-t' + id,
-    startDate: new Date(2020, 0, 1),
-    endDate: new Date(2020, 0, 5),
+    startDate: new Date(2023, 3, 1),
+    endDate: new Date(2023, 3, 5),
     children: [
       {
         id: ++id,
         name: 'sub-sub-t' + id,
-        startDate: new Date(2020, 0, 1),
-        endDate: new Date(2020, 0, 5)
+        startDate: new Date(2023, 3, 1),
+        endDate: new Date(2023, 3, 5)
       }
     ]
   }
@@ -87,8 +87,8 @@ function onAdd() {
   ganttData.push({
     id: ++id,
     name: 't' + id,
-    startDate: new Date(2020, 0, id),
-    endDate: new Date(2020, 0, id + 5)
+    startDate: new Date(2023, 3, id),
+    endDate: new Date(2023, 3, id + 5)
   });
 }
 

src/components/common/GanttBody.vue

@@ -9,7 +9,26 @@
       </RowVue>
     </template>
 
-    <div class="xg-gantt-body-date-line"></div>
+    <div
+      v-for="(l, i) in [5, 6, 10, 11]"
+      :key="i"
+      class="xg-gantt-body-date-line weekend"
+      :style="{
+        width: `${ganttColumnWidth}px`,
+        left: `${ganttColumnWidth * l}px`,
+        backgroundColor: '#ccc'
+      }"
+    ></div>
+
+    <div
+      v-if="showToday"
+      class="xg-gantt-body-date-line today"
+      :style="{
+        width: `${ganttColumnWidth}px`,
+        left: `${todayLeft}px`,
+        backgroundColor: '#87CEFA'
+      }"
+    ></div>
 
     <div class="xg-gantt-body-line-wrap"></div>
   </div>
@@ -20,22 +39,25 @@ import useGanttWidth from '@/composables/useGanttWidth';
 import useInView from '@/composables/useInView';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useStyle from '@/composables/useStyle';
+import useToday from '@/composables/useToday';
 import RowVue from './Row.vue';
 
 const { $slotsBox } = useSlotsBox();
 const { bodyHeight } = useStyle();
-const { ganttWidth } = useGanttWidth();
+const { ganttWidth, ganttColumnWidth } = useGanttWidth();
 const { inView } = useInView();
+const { todayLeft, showToday } = useToday();
 </script>
 
 <style lang="scss" scoped>
 .xg-gantt-body {
   position: relative;
+  // background-color: darkkhaki;
+  z-index: 9;
 
   .xg-gantt-row {
     z-index: 99;
     // width: 100%;
-    // background-color: darkkhaki;
     // position: absolute;
     // overflow: hidden;
     // border-bottom: 1px solid;
@@ -45,11 +67,8 @@ const { inView } = useInView();
   .xg-gantt-body-date-line {
     z-index: 9;
     height: 100%;
-    width: 20px;
     position: absolute;
     top: 0;
-    left: 40px;
-    background-color: aqua;
     opacity: 0.6;
   }
 

src/components/slider/index.vue

@@ -29,11 +29,7 @@ const props = defineProps(sliderProps);
 const slots = useSlots();
 const { $data } = useData();
 const { ganttHeader } = useGanttHeader();
-const { ganttColumnWidth } = useGanttWidth();
-
-const currentMillisecond = computed(
-  () => Variables.time.millisecondOf[ganttHeader.unit]
-);
+const { ganttColumnWidth, currentMillisecond } = useGanttWidth();
 
 const sliderLeft = computed(
   () =>

src/composables/useGanttWidth.ts

@@ -1,3 +1,4 @@
+import Variables from '@/constants/vars';
 import { useStore } from '@/store';
 import { computed } from 'vue';
 
@@ -25,5 +26,9 @@ export default () => {
     return store.ganttHeader.headers[1].length * ganttColumnWidth.value;
   });
 
-  return { ganttWidth, ganttColumnWidth };
+  const currentMillisecond = computed(
+    () => Variables.time.millisecondOf[store.ganttHeader.unit]
+  );
+
+  return { ganttWidth, ganttColumnWidth, currentMillisecond };
 };

src/composables/useToday.ts

@@ -0,0 +1,40 @@
+import { XDate } from '@/models/param/date';
+import { computed } from 'vue';
+import useData from './useData';
+import useGanttHeader from './useGanttHeader';
+import useGanttWidth from './useGanttWidth';
+
+export default () => {
+  const { ganttHeader } = useGanttHeader();
+  const { $data } = useData();
+  const { ganttColumnWidth, currentMillisecond } = useGanttWidth();
+
+  const today = new XDate();
+  today.date.setHours(0);
+  today.date.setMinutes(0);
+  today.date.setSeconds(0);
+
+  const todayLeft = computed(
+    () =>
+      (today.intervalTo($data.start) / currentMillisecond.value) *
+      ganttColumnWidth.value
+  );
+
+  const showToday = computed(() => {
+    function isInArea(date: XDate) {
+      if (ganttHeader.dates.length === 0) return false;
+
+      const sd = ganttHeader.start;
+      const ed = ganttHeader.end;
+
+      return sd?.compareTo(date) === 'l' && ed?.compareTo(date) === 'r';
+    }
+
+    return isInArea(today);
+  });
+
+  return {
+    todayLeft,
+    showToday
+  };
+};