甘特图

build/vitePlugins.ts

@@ -34,6 +34,9 @@ export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[]
         {
           'uni-mini-router': ['useRouter', 'useRoute'],
         },
+        {
+          dayjs: [['default', 'dayjs']],
+        },
         {
           'alova/client': ['useRequest'],
         },

package.json

@@ -62,12 +62,13 @@
     "@ontos/material-design-3-theme-builder": "workspace:*",
     "alova": "^3.0.16",
     "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
     "normalize-path": "^3.0.0",
     "pinia": "^2.2.2",
     "pinia-plugin-persistedstate": "^3.2.1",
     "unplugin-vue-components": "^0.27.0",
-    "vue": "^3.5.3"
+    "vue": "^3.5.10"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.27.3",
@@ -98,7 +99,7 @@
     "lint-staged": "^15.2.9",
     "picocolors": "^1.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.78.0",
+    "sass": "^1.79.4",
     "simple-git-hooks": "^2.11.1",
     "tsx": "^4.19.0",
     "typescript": "^5.5.4",

src/components/WeekGantView/GantDate.vue

@@ -0,0 +1,161 @@
+
+
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import weekday from 'dayjs/plugin/weekday';
+import { getWeekDates } from './helper';
+import type { ThingType } from './type';
+
+dayjs.extend(isoWeek);
+dayjs.extend(weekday);
+
+defineComponent({ name: 'GantDate' });
+
+interface Props {
+  groupedEvents?: Map<number, ThingType[]>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groupedEvents: () => new Map()
+});
+
+const value = defineModel('value', {
+  type: Number,
+  default: dayjs().valueOf()
+});
+
+/** ** 正确的格式一定为某一天的起始 *** */
+const selectedDate = computed({
+  get: () => dayjs(value.value).startOf('day').valueOf(),
+  set: val => {
+    value.value = val;
+  }
+});
+
+const weekDates = defineModel('weekDates', {
+  type: Object as () => { date: number; day: string; weekDay: string }[],
+  default: () => []
+});
+
+// 选择日期
+function selectDate(date: number) {
+  selectedDate.value = date;
+}
+
+// 日历选择器事件
+function datePickerChange(time: number) {
+  selectDate(time);
+  weekDates.value = getWeekDates(time);
+}
+
+// 回到今天
+function backToToday() {
+  selectDate(dayjs().startOf('day').valueOf());
+  weekDates.value = getWeekDates(dayjs().startOf('day').valueOf());
+}
+
+// 上一周
+function prevWeek() {
+  const prevWeekDate = dayjs(selectedDate.value).subtract(7, 'day').valueOf();
+  selectDate(prevWeekDate);
+  weekDates.value = getWeekDates(prevWeekDate);
+}
+
+// 下一周
+function nextWeek() {
+  const nextWeekDate = dayjs(selectedDate.value).add(7, 'day').valueOf();
+  selectDate(nextWeekDate);
+  weekDates.value = getWeekDates(nextWeekDate);
+}
+
+const weekDatesForMarks = computed(() => {
+  return weekDates.value.map(item => {
+    return {
+      ...item,
+      isMark: props.groupedEvents.get(item.date)?.length
+    };
+  });
+});
+</script>
+
+<template>
+  <div class="gantDateShadow flex flex-col px-5 pb-2 pt-6">
+    <div class="relative flex flex-1 flex-row items-center justify-center flex-self-stretch px-7.5">
+      <div class="relative flex flex-row items-center gap-2">
+        <!-- <n-date-picker
+          class="absolute left-0 top-0 z-2 wh-full overflow-hidden opacity-0 !cursor-pointer"
+          :value="selectedDate"
+          :default-value="selectedDate"
+          type="date"
+          @update:value="datePickerChange"
+        /> -->
+        <span class="   font-bold">
+          {{ dayjs(selectedDate).format('YYYY年M月') }}
+        </span>
+        <SvgIcon class="rotate-0   font-bold" icon="ic:round-keyboard-arrow-down" />
+      </div>
+      <!-- <n-button
+        size="small"
+        text
+        class="absolute right-0 text-3 !text-subtitle-color"
+        type="tertiary"
+        @click="backToToday"
+      >
+        回到今日
+      </n-button> -->
+    </div>
+
+    <div class="relative mt-3 flex flex-row items-center flex-self-stretch px-5.5">
+      <div class="absolute left-0 h-5 w-5 flex items-center justify-center rounded-full bg-primary" @click="prevWeek">
+        <SvgIcon class="text-5 text-white font-bold" icon="material-symbols:chevron-left-rounded" />
+      </div>
+
+      <!-- 周历表 -->
+      <div class="flex flex-1 flex-row items-center justify-between flex-self-stretch px-10">
+        <div
+          v-for="(item, index) in weekDatesForMarks"
+          :key="index"
+          class="flex flex-col cursor-pointer items-center justify-center"
+          @click="selectDate(item.date)"
+        >
+          <span
+            class="text-subtitle-color"
+            :class="{
+              'text-primary': item.date === selectedDate
+            }"
+          >
+            {{ item.weekDay }}
+          </span>
+
+          <span
+            class="  font-bold"
+            :class="{
+              'text-primary': item.date === selectedDate
+            }"
+          >
+            {{ item.day }}
+          </span>
+
+          <!-- 标记点 -->
+          <div
+            class="mt-0 h-1 w-1 rounded-full"
+            :class="{
+              'bg-primary': item.isMark,
+              '!bg-[#CCCCCC]': item.isMark && item.date < dayjs().startOf('day').valueOf()
+            }"
+          />
+        </div>
+      </div>
+      <div class="absolute right-0 h-5 w-5 flex items-center justify-center rounded-full bg-primary" @click="nextWeek">
+        <SvgIcon class="text-5 text-white font-bold" icon="material-symbols:chevron-right-rounded" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gantDateShadow {
+  box-shadow: 0px 8px 20px 10px rgba(0, 0, 0, 0.02);
+}
+</style>

src/components/WeekGantView/GantView.vue

@@ -0,0 +1,187 @@
+
+
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import type { ThingType } from './type';
+
+defineComponent({ name: 'GantView' });
+
+interface Props {
+  value?: number; // 选中的日期 时间戳
+  yStep?: number;
+  minuteStep?: number;
+  weekDates?: { date: number; day: string; weekDay: string }[];
+  groupedEvents?: Map<number, ThingType[]>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  yStep: 80,
+  minuteStep: 80 / 60,
+  value: dayjs().valueOf(),
+  weekDates: () => [],
+  groupedEvents: () => new Map()
+});
+
+const emit = defineEmits<Emits>();
+
+interface Emits {
+  (e: 'clickThing', value: ThingType): void;
+}
+
+// Y 轴为 00:00 - 24:00 的时间轴 , 时间步进为 1H , 用dayjs 转换为 00:00 格式
+const Y_AXIS = Array.from({ length: 24 }, (_, i) => {
+  return {
+    label: dayjs().startOf('day').add(i, 'hour').format('HH:00'),
+    top: i * props.yStep
+  };
+});
+
+/** ** 正确的格式一定为某一天的起始 *** */
+const selectedDate = computed(() => {
+  return dayjs(props.value).startOf('day').valueOf();
+});
+
+watch(selectedDate, () => {
+  scrollToThing();
+});
+
+onMounted(() => {
+  nextTick(() => {
+    scrollToThing();
+  });
+});
+
+const scrollbarRef = ref<any | null>(null);
+
+function scrollToThing() {
+  const _thing = props.groupedEvents.get(selectedDate.value);
+
+  const currentTime = dayjs().startOf('minute');
+
+  if (!_thing) {
+    scrollbarRef.value?.scrollTo({
+      top: currentTime.diff(currentTime.startOf('day'), 'minute') * props.minuteStep - props.yStep,
+      behavior: 'smooth'
+    });
+    return;
+  }
+
+  let closestEvent: ThingType | null = null;
+
+  // 查找与当前时刻最接近的事件
+  for (const event of _thing) {
+    const eventTime = dayjs(event.startTime);
+    if (
+      !closestEvent ||
+      Math.abs(eventTime.diff(currentTime)) < Math.abs(dayjs(closestEvent.startTime).diff(currentTime))
+    ) {
+      closestEvent = event;
+    }
+  }
+
+  // 如果没有找到与当前时刻最接近的事件，则查找当前时刻未来的第一个事件
+  if (!closestEvent) {
+    closestEvent = _thing.find(event => dayjs(event.startTime).isAfter(currentTime)) || null;
+  }
+
+  // 如果还没有找到，则查找列表中与当前时刻最相近的事件
+  if (!closestEvent) {
+    closestEvent = _thing.reduce((prev, curr) => {
+      const prevDiff = Math.abs(dayjs(prev.startTime).diff(currentTime));
+      const currDiff = Math.abs(dayjs(curr.startTime).diff(currentTime));
+      return currDiff < prevDiff ? curr : prev;
+    });
+  }
+
+  // 如果还没有找到，则使用列表中的第一个事件
+  if (!closestEvent && _thing[0]) {
+    closestEvent = _thing[0];
+  }
+
+  // 滚动到找到的事件位置
+  if (closestEvent && closestEvent.toTop) {
+    scrollbarRef.value?.scrollTo({
+      top: closestEvent!.toTop - props.yStep,
+      behavior: 'smooth'
+    });
+  }
+}
+</script>
+
+<template>
+  <div class="relative flex-1 border border-red border-solid">
+    <div ref="scrollbarRef" class="absolute left-0 top-0 w-full h-full">
+      <div class="flex flex-row">
+        <!-- time line -->
+        <div class="flex flex-col pl-2 pr-1">
+          <div
+            v-for="(item, inex) in Y_AXIS"
+            :key="inex"
+            :style="{
+              height: `${props.yStep}rpx`
+            }"
+          >
+            <span
+              class="relative block translate-y-[-50%] text-[#999999FF] line-height-none"
+              :class="{
+                'translate-y-0': inex === 0
+              }"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </div>
+
+        <div class="relative flex flex-1 flex-col">
+          <!-- 网格 -->
+          <div
+            class="absolute left-0 top-0 z-1 w-full h-full"
+            :style="{
+              'background-image': `linear-gradient(to right, #f7f7f7 1rpx, transparent 1rpx, transparent calc(100% / 7.5)),linear-gradient(to bottom, #f7f7f7 1rpx, transparent 1rpx, transparent ${props.yStep}rpx)`,
+              'background-size': `calc(100%/7.5) ${props.yStep}rpx`
+            }"
+          />
+          <!-- 事件组 分为 7day -->
+          <div class="z-2 w-[calc((100%/7.5)*7)] flex flex-1 flex-row">
+            <!--
+               :style="{
+                  'background-color': item.date === selectedDate ? `rgb(var(--primary-100-color) / 0.2)` : 'transparent'
+                }"
+            -->
+            <div
+              v-for="(item, index) in props.weekDates"
+              :key="index"
+              class="relative flex flex-1 transition-background-color will-change-background-color"
+            >
+
+              <!-- 'background-color': addColorAlpha(itm.color, 0.06) -->
+              <div
+                v-for="itm in props.groupedEvents.get(item.date)"
+                :key="itm.id"
+                class="absolute w-full flex-shrink-0 cursor-pointer flex-self-stretch py-1"
+                :style="{
+                  top: `${itm.toTop}rpx`,
+                  height: `${itm.height}rpx`,
+                  background: itm.color,
+                  borderTop: `2rpx solid ${itm.color}`,
+                }"
+                @click="emit('clickThing', itm)"
+              >
+                <span
+                  class="text-3"
+                  :style="{
+                    color: itm.color
+                  }"
+                >
+                  {{ itm.name }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/components/WeekGantView/helper.ts

@@ -0,0 +1,58 @@
+
+
+import dayjs from 'dayjs';
+import type { ThingType } from './type';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import weekday from 'dayjs/plugin/weekday';
+
+
+
+export function getWeekDates(date: string | number | Date | dayjs.Dayjs | null | undefined) {
+
+  
+  dayjs.extend(isoWeek);
+  dayjs.extend(weekday);
+
+  const startOfWeek = dayjs(date).weekday(0);
+  const _weekDates: { date: number; day: string; weekDay: string }[] = [];
+  for (let i = 0; i < 7; i += 1) {
+    _weekDates.push({
+      date: startOfWeek.add(i, 'day').startOf('day').valueOf(),
+      day: startOfWeek.add(i, 'day').format('D'),
+      weekDay: startOfWeek.add(i, 'day').format('周dd')
+    });
+  }
+  return _weekDates;
+}
+
+export function groupEventsByDay({
+  events,
+  minuteStep
+}: {
+  events: ThingType[];
+  minuteStep: number;
+}): Map<number, ThingType[]> {
+  const _groupedEvents = new Map();
+
+  events.forEach(event => {
+    const { startTime, endTime } = event;
+
+    const startOfDay = dayjs(startTime).startOf('day').valueOf();
+    const startDayTime = dayjs(startTime);
+
+    const toTop = startDayTime.diff(startDayTime.startOf('day'), 'minute');
+    const duration = dayjs(endTime).diff(startTime, 'minute');
+
+    if (!_groupedEvents.has(startOfDay)) {
+      _groupedEvents.set(startOfDay, []);
+    }
+
+    _groupedEvents.get(startOfDay).push({
+      ...event,
+      toTop: toTop * minuteStep,
+      height: duration * minuteStep
+    });
+  });
+
+  return _groupedEvents;
+}

src/components/WeekGantView/index.vue

@@ -0,0 +1,85 @@
+
+
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import type { ThingType } from './type';
+import { getWeekDates, groupEventsByDay } from './helper';
+import GantDate from './GantDate.vue';
+import GantView from './GantView.vue';
+
+defineComponent({ name: 'WeekGantView' });
+
+const emit = defineEmits<Emits>();
+
+interface Emits {
+  (
+    e: 'update:value',
+    value: number,
+    params: {
+      isSameWeek: boolean;
+    }
+  ): void;
+  (e: 'clickThing', value: ThingType): void;
+}
+
+// Y 轴高度步进 单位 px , 1H = 80px
+const Y_STEP = 80;
+
+// 每分钟的高度
+const MINUTE_STEP = Y_STEP / 60;
+
+const value = defineModel('value', {
+  type: Number,
+  default: dayjs().valueOf()
+});
+
+const selectedDate = ref(value.value);
+
+const loading = defineModel('loading', {
+  type: Boolean,
+  default: false
+});
+
+const things = defineModel('things', {
+  type: Object as () => ThingType[],
+  default: () => []
+});
+
+const weekDates = ref(getWeekDates(selectedDate.value));
+
+const groupedEvents = computed(() =>
+  groupEventsByDay({
+    events: things.value,
+    minuteStep: MINUTE_STEP
+  })
+);
+
+watch(selectedDate, (n_val, o_val) => {
+  // 查询 o_val 与 selectedDate.value 是否同在一周内
+  const isSameWeek = dayjs(o_val).isSame(dayjs(n_val), 'week');
+  emit('update:value', selectedDate.value, { isSameWeek });
+});
+</script>
+
+<template>
+  <div :delay="1000" content-class="flex flex-1 flex-col" class="flex flex-1 flex-col">
+    <gant-date v-model:value="selectedDate" v-model:weekDates="weekDates" :grouped-events="groupedEvents" />
+    <gant-view
+      v-if="things.length"
+      :grouped-events="groupedEvents"
+      :week-dates="weekDates"
+      :y-step="Y_STEP"
+      :minute-step="MINUTE_STEP"
+      :value="selectedDate"
+      @click-thing="
+        e => {
+          emit('clickThing', e);
+        }
+      "
+    />
+
+    <div v-else class="flex flex-1 items-center justify-center">
+      暂无记录~
+    </div>
+  </div>
+</template>

src/components/WeekGantView/type.ts

@@ -0,0 +1,12 @@
+
+
+export interface ThingType {
+  id: string | number;
+  name: string;
+  dec: string;
+  startTime: number;
+  endTime: number;
+  color: string;
+  toTop?: number;
+  height?: number;
+}

src/manifest.json

@@ -98,7 +98,7 @@
       "base": "./"
     },
     "devServer": {
-      "https": true
+      "https": false
     },
     "title": "demo",
     "unipush": {

src/pages/numerology/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { elementsGroups } from './options';
 
-console.log('elementsGroups ===>>>', elementsGroups);
 </script>
 
 <template>

src/pages/splashScreen/index.vue

@@ -9,7 +9,7 @@
 
   ## Last Modified: 2024-06-24 11:30:88
 
-  Modified By: kurosago
+  Modified By: Administrator
 
   ## Copyright (c) 2024 self.
 
@@ -63,21 +63,41 @@ function toNumerology() {
     name: 'Numerology',
   });
 }
+
+const D = dayjs();
+
+const things = ref([
+  {
+    id: 1,
+    name: '测试1',
+    startTime: D.startOf('day').valueOf(),
+    endTime: D.endOf('day').valueOf(),
+    dec: '测试1',
+    color: 'rgba(255, 0, 0, 0.5)',
+  },
+]);
+
+const value = ref(D.valueOf());
 </script>
 
 <template>
-  <view class=" bg-primary flex-1">
-    <span @click="changeTheme">
-      changeTheme
-    </span>
+  <view class="bg-primary-90 flex-1">
+    <div class="h-600rpx flex flex-col border border-red border-solid" >
+      <week-gant-view  v-model:value="value" v-model:things="things"/>
+    </div>
 
-    <button @click="toColorCard">
+
+    <!-- <span @click="changeTheme">
+      changeTheme
+    </span> -->
+
+    <!-- <button @click="toColorCard">
       色卡
     </button>
 
     <button @click="toNumerology">
       算命
-    </button>
+    </button> -->
   </view>
 </template>
 

src/types/import-components.d.ts

@@ -9,6 +9,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
     BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
+    CourseDetailGant: typeof import('./../components/CourseDetailGant/index.vue')['default']
+    Gant: typeof import('./../components/Gant/index.vue')['default']
+    GantDate: typeof import('./../components/WeekGantView/GantDate.vue')['default']
+    GantView: typeof import('./../components/WeekGantView/GantView.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
+    WeekGantView: typeof import('./../components/WeekGantView/index.vue')['default']
   }
 }

vite.config.ts

@@ -44,6 +44,7 @@ export default defineConfig(async ({ mode }) => {
     server: {
       // host: true,
       open: true,
+      https: true,
       port: Number.parseInt(VITE_PORT!, 10),
       proxy: resolveProxy([[VITE_PROXY_PREFIX! as string, VITE_BASE_URL! as string], [VITE_UPLOAD_PROXY_PREFIX! as string, VITE_UPLOAD_URL! as string]]),
     },