|
|
@@ -1,174 +1,211 @@
|
|
|
-// page-mine.component.ts
|
|
|
+import { CommonModule } from '@angular/common';
|
|
|
import { Component, OnInit } from '@angular/core';
|
|
|
|
|
|
+interface CalendarDay {
|
|
|
+ date: number;
|
|
|
+ isCurrentMonth: boolean;
|
|
|
+ isToday: boolean;
|
|
|
+ events: any[];
|
|
|
+}
|
|
|
+
|
|
|
+interface Event {
|
|
|
+ id: number;
|
|
|
+ date: Date;
|
|
|
+ title: string;
|
|
|
+ type: string;
|
|
|
+ time: string;
|
|
|
+ venue: string;
|
|
|
+}
|
|
|
+
|
|
|
@Component({
|
|
|
selector: 'app-page-mine',
|
|
|
templateUrl: './page-mine.html',
|
|
|
- styleUrls: ['./page-mine.scss']
|
|
|
+ styleUrls: ['./page-mine.scss'],
|
|
|
+ standalone:true,
|
|
|
+ imports:[
|
|
|
+ CommonModule
|
|
|
+ ]
|
|
|
})
|
|
|
-export class PageMineComponent implements OnInit {
|
|
|
- weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
|
|
- currentYear: number;
|
|
|
- currentMonth: number;
|
|
|
- calendarDays: any[] = [];
|
|
|
+export class PageMine implements OnInit {
|
|
|
+ weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
|
|
+ hours = Array.from({length: 24}, (_, i) => i); // 0-23小时
|
|
|
+ currentDate: Date = new Date(); // 初始化当前日期
|
|
|
+ currentMonth: number = this.currentDate.getMonth(); // 初始化当前月份
|
|
|
+ currentYear: number = this.currentDate.getFullYear(); // 初始化当前年份
|
|
|
+ viewMode: 'month' | 'week' = 'month';
|
|
|
+ activeFilter: string = 'all';
|
|
|
|
|
|
- venues = [
|
|
|
- { name: '九州厅', status: 'booked', date: '7月5日' },
|
|
|
- { name: '奥斯卡厅', status: 'available' },
|
|
|
- { name: '星空之镜', status: 'available' },
|
|
|
- { name: '塞纳花园', status: 'available' },
|
|
|
- { name: '海洋之心', status: 'hold' },
|
|
|
- { name: '冰雪奇缘', status: 'booked', date: '7月12日' },
|
|
|
- { name: '暮光之城', status: 'booked', date: '7月19日' },
|
|
|
- { name: '月光礼堂', status: 'booked', date: '7月26日' }
|
|
|
- ];
|
|
|
+ monthDays: CalendarDay[] = [];
|
|
|
+ events: Event[] = [];
|
|
|
|
|
|
- eventVenues = ['九州厅', '奥斯卡厅', '星空之镜', '塞纳花园', '海洋之心', '冰雪奇缘', '暮光之城', '月光礼堂'];
|
|
|
- eventNames = ['张先生婚礼', '李小姐婚礼', '王先生婚礼', '赵小姐婚礼', '陈先生婚礼', '刘小姐婚礼'];
|
|
|
-
|
|
|
- constructor() {
|
|
|
- const today = new Date();
|
|
|
- this.currentYear = today.getFullYear();
|
|
|
- this.currentMonth = today.getMonth();
|
|
|
- }
|
|
|
+ stats = {
|
|
|
+ totalEvents: 0,
|
|
|
+ weddings: 0,
|
|
|
+ banquets: 0,
|
|
|
+ meetings: 0
|
|
|
+ };
|
|
|
|
|
|
- ngOnInit(): void {
|
|
|
+ ngOnInit() {
|
|
|
+ // 不需要再次初始化，因为已经在声明时初始化
|
|
|
+ this.initializeEvents();
|
|
|
this.generateCalendar();
|
|
|
+ this.calculateStats();
|
|
|
}
|
|
|
|
|
|
- generateCalendar(): void {
|
|
|
- this.calendarDays = [];
|
|
|
+ initializeEvents() {
|
|
|
+ this.events = [
|
|
|
+ { id: 1, date: new Date(this.currentYear, this.currentMonth, 5), title: '张先生 & 李女士婚礼', type: 'wedding', time: '10:00-14:00', venue: '玫瑰厅' },
|
|
|
+ { id: 2, date: new Date(this.currentYear, this.currentMonth, 8), title: '公司年度晚宴', type: 'banquet', time: '18:00-21:00', venue: '宴会A厅' },
|
|
|
+ { id: 3, date: new Date(this.currentYear, this.currentMonth, 12), title: '王先生 & 赵女士婚礼', type: 'wedding', time: '11:00-15:00', venue: '百合厅' },
|
|
|
+ { id: 4, date: new Date(this.currentYear, this.currentMonth, 15), title: '产品发布会', type: 'meeting', time: '14:00-16:00', venue: '会议中心' },
|
|
|
+ { id: 5, date: new Date(this.currentYear, this.currentMonth, 18), title: '陈先生 & 刘女士婚礼', type: 'wedding', time: '09:30-13:30', venue: '牡丹厅' },
|
|
|
+ { id: 6, date: new Date(this.currentYear, this.currentMonth, 20), title: '生日宴会', type: 'banquet', time: '19:00-22:00', venue: '宴会B厅' },
|
|
|
+ { id: 7, date: new Date(this.currentYear, this.currentMonth, 25), title: '婚庆行业交流会', type: 'meeting', time: '10:00-12:00', venue: '会议中心' },
|
|
|
+ { id: 8, date: new Date(this.currentYear, this.currentMonth, 28), title: '周先生 & 吴女士婚礼', type: 'wedding', time: '10:30-14:30', venue: '玫瑰厅' },
|
|
|
+ { id: 9, date: new Date(this.currentYear, this.currentMonth, 30), title: '公司团建活动', type: 'other', time: '全天', venue: '户外场地' }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+
|
|
|
+ generateCalendar() {
|
|
|
+ this.monthDays = [];
|
|
|
|
|
|
- // 获取当月第一天和最后一天
|
|
|
+ // 获取当月第一天
|
|
|
const firstDay = new Date(this.currentYear, this.currentMonth, 1);
|
|
|
+ // 获取当月最后一天
|
|
|
const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
|
|
|
+ // 获取当月第一天是星期几（0为周日，6为周六）
|
|
|
+ const firstDayIndex = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
|
|
|
+ // 获取当月最后一天是星期几
|
|
|
+ const lastDayIndex = lastDay.getDay();
|
|
|
|
|
|
- // 获取第一天是星期几（0=周日，1=周一...）
|
|
|
- const firstDayIndex = firstDay.getDay();
|
|
|
-
|
|
|
- // 获取当月天数
|
|
|
- const daysInMonth = lastDay.getDate();
|
|
|
-
|
|
|
- // 获取今天日期
|
|
|
+ // 上个月最后一天
|
|
|
+ const prevLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate();
|
|
|
const today = new Date();
|
|
|
- const isCurrentMonth = today.getMonth() === this.currentMonth && today.getFullYear() === this.currentYear;
|
|
|
|
|
|
- // 生成空白日期（上个月）
|
|
|
- for (let i = 0; i < firstDayIndex; i++) {
|
|
|
- this.calendarDays.push({ isEmpty: true });
|
|
|
+ // 添加上个月日期
|
|
|
+ for (let i = firstDayIndex; i > 0; i--) {
|
|
|
+ const day = prevLastDay - i + 1;
|
|
|
+ this.monthDays.push({
|
|
|
+ date: day,
|
|
|
+ isCurrentMonth: false,
|
|
|
+ isToday: false,
|
|
|
+ events: []
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- // 生成当月日期
|
|
|
- for (let day = 1; day <= daysInMonth; day++) {
|
|
|
- const dateObj = new Date(this.currentYear, this.currentMonth, day);
|
|
|
- const weekday = this.weekdays[dateObj.getDay()];
|
|
|
+ // 添加当月日期
|
|
|
+ for (let i = 1; i <= lastDay.getDate(); i++) {
|
|
|
+ const dayDate = new Date(this.currentYear, this.currentMonth, i);
|
|
|
+ const isToday = dayDate.toDateString() === today.toDateString();
|
|
|
|
|
|
- // 简化版农历日期
|
|
|
- const lunarDate = this.getLunarDate(day);
|
|
|
+ // 获取当天的活动（根据筛选条件）
|
|
|
+ const dayEvents = this.events.filter(event =>
|
|
|
+ event.date.getDate() === i &&
|
|
|
+ event.date.getMonth() === this.currentMonth &&
|
|
|
+ event.date.getFullYear() === this.currentYear &&
|
|
|
+ (this.activeFilter === 'all' || event.type === this.activeFilter)
|
|
|
+ );
|
|
|
|
|
|
- // 判断是否是今天
|
|
|
- const isToday = isCurrentMonth && day === today.getDate();
|
|
|
-
|
|
|
- // 生成随机事件
|
|
|
- const events = this.generateRandomEvents(day);
|
|
|
-
|
|
|
- this.calendarDays.push({
|
|
|
- date: day,
|
|
|
- lunarDate: lunarDate,
|
|
|
- weekday: weekday,
|
|
|
+ this.monthDays.push({
|
|
|
+ date: i,
|
|
|
+ isCurrentMonth: true,
|
|
|
isToday: isToday,
|
|
|
- events: events,
|
|
|
- isEmpty: false
|
|
|
+ events: dayEvents
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- getLunarDate(day: number): string {
|
|
|
- // 简化版农历日期
|
|
|
- const lunarMonths = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
|
|
|
- const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
|
|
|
- '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
|
|
|
- '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
|
|
|
-
|
|
|
- // 随机生成农历月份（模拟）
|
|
|
- const monthIndex = Math.floor(Math.random() * lunarMonths.length);
|
|
|
- const dayIndex = Math.min(day - 1, lunarDays.length - 1);
|
|
|
|
|
|
- return `${lunarMonths[monthIndex]}月${lunarDays[dayIndex]}`;
|
|
|
+ // 添加下个月日期
|
|
|
+ const daysNeeded = 42 - (firstDayIndex + lastDay.getDate()); // 42是6行7列的格子总数
|
|
|
+ for (let i = 1; i <= daysNeeded; i++) {
|
|
|
+ this.monthDays.push({
|
|
|
+ date: i,
|
|
|
+ isCurrentMonth: false,
|
|
|
+ isToday: false,
|
|
|
+ events: []
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- generateRandomEvents(day: number): any[] {
|
|
|
- const events = [];
|
|
|
- const today = new Date();
|
|
|
-
|
|
|
- // 如果是周末，增加事件数量
|
|
|
- const dateObj = new Date(this.currentYear, this.currentMonth, day);
|
|
|
- const isWeekend = dateObj.getDay() === 0 || dateObj.getDay() === 6;
|
|
|
+
|
|
|
+ getEventsForDayAndHour(dayIndex: number, hour: number): Event[] {
|
|
|
+ const dayOfWeek = dayIndex; // 0-6对应周一到周日
|
|
|
+ const currentDate = new Date(this.currentYear, this.currentMonth, 1);
|
|
|
|
|
|
- // 如果是过去的日期，只显示已预订事件
|
|
|
- const isPast = dateObj < today;
|
|
|
+ // 计算当前月份第一天是星期几
|
|
|
+ const firstDayOfWeek = currentDate.getDay() === 0 ? 7 : currentDate.getDay();
|
|
|
|
|
|
- // 随机决定事件数量 (0-3)
|
|
|
- let eventCount = Math.floor(Math.random() * (isWeekend ? 4 : 3));
|
|
|
- if (isPast) eventCount = Math.min(eventCount, 2);
|
|
|
+ // 计算目标日期
|
|
|
+ const targetDate = new Date(
|
|
|
+ this.currentYear,
|
|
|
+ this.currentMonth,
|
|
|
+ 1 + (dayOfWeek - firstDayOfWeek + 7) % 7
|
|
|
+ );
|
|
|
|
|
|
- for (let i = 0; i < eventCount; i++) {
|
|
|
- const venue = this.eventVenues[Math.floor(Math.random() * this.eventVenues.length)];
|
|
|
+ // 过滤事件
|
|
|
+ return this.events.filter(event => {
|
|
|
+ const eventDate = event.date;
|
|
|
|
|
|
- // 事件类型：30%空闲，30%咨询，40%已预订
|
|
|
- const eventType = Math.random() < 0.3 ? 'available' :
|
|
|
- Math.random() < 0.3 ? 'consult' : 'booked';
|
|
|
+ // 检查日期是否匹配
|
|
|
+ const sameDate =
|
|
|
+ eventDate.getDate() === targetDate.getDate() &&
|
|
|
+ eventDate.getMonth() === targetDate.getMonth() &&
|
|
|
+ eventDate.getFullYear() === targetDate.getFullYear();
|
|
|
|
|
|
- let title = '';
|
|
|
- switch (eventType) {
|
|
|
- case 'available':
|
|
|
- title = '空闲';
|
|
|
- break;
|
|
|
- case 'consult':
|
|
|
- title = '咨询';
|
|
|
- break;
|
|
|
- case 'booked':
|
|
|
- title = this.eventNames[Math.floor(Math.random() * this.eventNames.length)];
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (!sameDate) return false;
|
|
|
|
|
|
- events.push({
|
|
|
- venue: venue,
|
|
|
- type: eventType,
|
|
|
- title: title
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- return events;
|
|
|
+ // 检查时间是否匹配
|
|
|
+ if (event.time === '全天') return true;
|
|
|
+
|
|
|
+ const [startTime] = event.time.split('-');
|
|
|
+ const eventHour = parseInt(startTime.split(':')[0]);
|
|
|
+
|
|
|
+ return eventHour === hour;
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
- changeMonth(offset: number): void {
|
|
|
- // 更改月份
|
|
|
+
|
|
|
+ changeMonth(offset: number) {
|
|
|
this.currentMonth += offset;
|
|
|
|
|
|
- // 处理年份变化
|
|
|
- if (this.currentMonth > 11) {
|
|
|
- this.currentMonth = 0;
|
|
|
- this.currentYear++;
|
|
|
- } else if (this.currentMonth < 0) {
|
|
|
+ if (this.currentMonth < 0) {
|
|
|
this.currentMonth = 11;
|
|
|
this.currentYear--;
|
|
|
+ } else if (this.currentMonth > 11) {
|
|
|
+ this.currentMonth = 0;
|
|
|
+ this.currentYear++;
|
|
|
}
|
|
|
|
|
|
- // 重新生成日历
|
|
|
+ this.initializeEvents();
|
|
|
this.generateCalendar();
|
|
|
+ this.calculateStats();
|
|
|
}
|
|
|
-
|
|
|
- getStatusText(status: string, date?: string): string {
|
|
|
- switch (status) {
|
|
|
- case 'available':
|
|
|
- return '空闲';
|
|
|
- case 'booked':
|
|
|
- return `已预订 (${date})`;
|
|
|
- case 'hold':
|
|
|
- return '意向沟通中';
|
|
|
- default:
|
|
|
- return '';
|
|
|
- }
|
|
|
+
|
|
|
+ goToToday() {
|
|
|
+ const today = new Date();
|
|
|
+ this.currentDate = today;
|
|
|
+ this.currentMonth = today.getMonth();
|
|
|
+ this.currentYear = today.getFullYear();
|
|
|
+
|
|
|
+ this.initializeEvents();
|
|
|
+ this.generateCalendar();
|
|
|
+ this.calculateStats();
|
|
|
+ }
|
|
|
+
|
|
|
+ setFilter(filter: string) {
|
|
|
+ this.activeFilter = filter;
|
|
|
+ this.generateCalendar();
|
|
|
+ this.calculateStats();
|
|
|
+ }
|
|
|
+
|
|
|
+ calculateStats() {
|
|
|
+ const currentMonthEvents = this.events.filter(event =>
|
|
|
+ event.date.getMonth() === this.currentMonth &&
|
|
|
+ event.date.getFullYear() === this.currentYear
|
|
|
+ );
|
|
|
+
|
|
|
+ this.stats = {
|
|
|
+ totalEvents: currentMonthEvents.length,
|
|
|
+ weddings: currentMonthEvents.filter(e => e.type === 'wedding').length,
|
|
|
+ banquets: currentMonthEvents.filter(e => e.type === 'banquet').length,
|
|
|
+ meetings: currentMonthEvents.filter(e => e.type === 'meeting').length
|
|
|
+ };
|
|
|
}
|
|
|
}
|
0235889