feat(日程视图): 新增日、周、月视图组件及主页面

实现日程视图功能，包含日视图、周视图和月视图三种展示方式
日视图展示当天、明日及逾期待处理任务卡片
周视图按天分栏展示一周任务及状态标识
月视图使用日历形式展示当月任务及状态标识

apps/web-ele/src/views/schedule/view/components/day/index.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+// 模拟数据
+const emergencyTasks = [
+  {
+    id: 1,
+    title: '应急演练',
+    icon: 'warning',
+    color: '#FFB020',
+    deadline: '12-31 23:59',
+    days: 61,
+  },
+  {
+    id: 2,
+    title: '纳税人普查',
+    icon: 'document',
+    color: '#409EFF',
+    deadline: '12-31 23:59',
+    days: 61,
+  },
+];
+
+const todayTasks = [
+  {
+    id: 1,
+    title: '监控录像抽检',
+    icon: 'monitor',
+    color: '#F56C6C',
+    deadline: '12-07 23:59',
+  },
+  {
+    id: 2,
+    title: '爆缸试水1',
+    icon: 'water',
+    color: '#409EFF',
+    deadline: '12-14 23:00',
+  },
+  {
+    id: 3,
+    title: '应急消防用品月检',
+    icon: 'fire',
+    color: '#67C23A',
+    deadline: '12-31 13:59',
+  },
+  {
+    id: 4,
+    title: '核对销售（油品）调查1',
+    icon: 'check',
+    color: '#E6A23C',
+    deadline: '12-15 23:59',
+  },
+  {
+    id: 5,
+    title: '便利店盘点',
+    icon: 'shopping',
+    color: '#E6A23C',
+    deadline: '12-31 23:59',
+  },
+  {
+    id: 6,
+    title: '新员工三级教育',
+    icon: 'user',
+    color: '#409EFF',
+    deadline: '12-06 23:00',
+  },
+  {
+    id: 7,
+    title: '厨房宿舍月检',
+    icon: 'home',
+    color: '#909399',
+    deadline: '12-31 23:59',
+  },
+  {
+    id: 8,
+    title: '收油流程巡检',
+    icon: 'oil',
+    color: '#409EFF',
+    deadline: '12-07 23:59',
+  },
+  {
+    id: 9,
+    title: '第一次例会',
+    icon: 'meeting',
+    color: '#409EFF',
+    deadline: '12-15 23:00',
+  },
+  {
+    id: 10,
+    title: '建军计划',
+    icon: 'plan',
+    color: '#67C23A',
+    deadline: '12-03 23:00',
+  },
+  {
+    id: 11,
+    title: '员工培训',
+    icon: 'training',
+    color: '#409EFF',
+    deadline: '12-31 23:59',
+  },
+];
+
+const tomorrowTasks = [
+  {
+    id: 1,
+    title: '巡检日检',
+    icon: 'check',
+    color: '#67C23A',
+    deadline: '12-31 13:59',
+  },
+  {
+    id: 2,
+    title: '爆缸试水1',
+    icon: 'water',
+    color: '#409EFF',
+    deadline: '12-14 23:00',
+  },
+  {
+    id: 3,
+    title: '应急消防用品月检',
+    icon: 'fire',
+    color: '#67C23A',
+    deadline: '12-31 13:59',
+  },
+  {
+    id: 4,
+    title: '核对销售（油品）调查1',
+    icon: 'check',
+    color: '#E6A23C',
+    deadline: '12-15 23:59',
+  },
+  {
+    id: 5,
+    title: '便利店盘点',
+    icon: 'shopping',
+    color: '#E6A23C',
+    deadline: '12-31 23:59',
+  },
+  {
+    id: 6,
+    title: '新员工三级教育',
+    icon: 'user',
+    color: '#409EFF',
+    deadline: '12-06 23:00',
+  },
+  {
+    id: 7,
+    title: '巡检日检',
+    icon: 'check',
+    color: '#67C23A',
+    deadline: '12-31 13:59',
+  },
+];
+
+// 模拟图标映射
+const getIconEmoji = (icon: string) => {
+  const iconMap: Record<string, string> = {
+    warning: '⚠️',
+    document: '📄',
+    monitor: '📺',
+    water: '💧',
+    fire: '🔥',
+    check: '✅',
+    shopping: '🛒',
+    home: '🏠',
+    oil: '⛽',
+    meeting: '📋',
+    plan: '📝',
+    training: '🎓',
+    user: '👤',
+  };
+  return iconMap[icon] || '📌';
+};
+</script>
+
+<template>
+  <!-- 逾期待处理 -->
+  <div class="mb-6">
+    <h3 class="mb-3 text-lg font-semibold">逾期待处理</h3>
+    <div
+      class="grid grid-cols-4 gap-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    >
+      <div
+        v-for="task in emergencyTasks"
+        :key="task.id"
+        class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+      >
+        <div
+          class="mr-4 flex h-10 w-10 items-center justify-center rounded-full"
+          :style="{ backgroundColor: `${task.color}20`, color: task.color }"
+        >
+          <span class="text-xl">{{ getIconEmoji(task.icon) }}</span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="overflow-hidden text-ellipsis whitespace-nowrap font-medium"
+          >
+            {{ task.title }}
+          </div>
+          <div class="text-sm text-gray-500">{{ task.deadline }}</div>
+        </div>
+        <div class="ml-4 whitespace-nowrap font-medium text-red-500">
+          {{ task.days }}天
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 当日任务 -->
+  <div class="mb-6">
+    <h3 class="mb-3 text-lg font-semibold">当日</h3>
+    <div
+      class="grid grid-cols-4 gap-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    >
+      <div
+        v-for="task in todayTasks"
+        :key="task.id"
+        class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+      >
+        <div
+          class="mr-4 flex h-10 w-10 items-center justify-center rounded-full"
+          :style="{ backgroundColor: `${task.color}20`, color: task.color }"
+        >
+          <span class="text-xl">{{ getIconEmoji(task.icon) }}</span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="overflow-hidden text-ellipsis whitespace-nowrap font-medium"
+          >
+            {{ task.title }}
+          </div>
+          <div class="text-sm text-gray-500">{{ task.deadline }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 明日任务 -->
+  <div>
+    <h3 class="mb-3 text-lg font-semibold">明日</h3>
+    <div
+      class="grid grid-cols-4 gap-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    >
+      <div
+        v-for="task in tomorrowTasks"
+        :key="task.id"
+        class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+      >
+        <div
+          class="mr-4 flex h-10 w-10 items-center justify-center rounded-full"
+          :style="{ backgroundColor: `${task.color}20`, color: task.color }"
+        >
+          <span class="text-xl">{{ getIconEmoji(task.icon) }}</span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="overflow-hidden text-ellipsis whitespace-nowrap font-medium"
+          >
+            {{ task.title }}
+          </div>
+          <div class="text-sm text-gray-500">{{ task.deadline }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/schedule/view/components/month/index.vue

@@ -0,0 +1,431 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { ElCalendar } from 'element-plus';
+
+// Props from parent component
+const props = defineProps({
+  month: {
+    type: Number,
+    required: true,
+    default: ''
+  },
+});
+
+// 模拟任务数据
+const tasks = ref([
+  {
+    id: 1,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-15',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 2,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-15',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 3,
+    name: '中州大道监控设备维护',
+    date: '2025-12-15',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 4,
+    name: '农业路交通流量分析',
+    date: '2025-12-15',
+    status: 'cancelled',
+    department: '数据分析部',
+  },
+  {
+    id: 5,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-16',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 6,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-16',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 7,
+    name: '文化路监控系统升级',
+    date: '2025-12-16',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 8,
+    name: '纬五路设备巡检',
+    date: '2025-12-16',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 9,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-17',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 10,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-17',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 11,
+    name: '经三路摄像头调试',
+    date: '2025-12-17',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 12,
+    name: '东风路设备更新计划',
+    date: '2025-12-17',
+    status: 'cancelled',
+    department: '采购部',
+  },
+  {
+    id: 13,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-18',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 14,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-18',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 15,
+    name: '花园路监控中心改造',
+    date: '2025-12-18',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 16,
+    name: '桐柏路设备维护',
+    date: '2025-12-18',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 17,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-19',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 18,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-19',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 19,
+    name: '大学路监控设备安装',
+    date: '2025-12-19',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 20,
+    name: '汝河路系统测试',
+    date: '2025-12-19',
+    status: 'cancelled',
+    department: '质量部',
+  },
+  {
+    id: 21,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-20',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 22,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-20',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 23,
+    name: '航海路监控数据分析',
+    date: '2025-12-20',
+    status: 'completed',
+    department: '数据分析部',
+  },
+  {
+    id: 24,
+    name: '长江路设备巡检',
+    date: '2025-12-20',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 25,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-21',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 26,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-21',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 27,
+    name: '嵩山路监控系统优化',
+    date: '2025-12-21',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 28,
+    name: '紫荆山路设备调试',
+    date: '2025-12-21',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 29,
+    name: '商城路设备维护计划',
+    date: '2025-12-21',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 30,
+    name: '金水路交通管理培训',
+    date: '2025-12-21',
+    status: 'cancelled',
+    department: '人力资源部',
+  },
+]);
+
+// Get task status class based on task properties
+const getTaskStatusClass = (task) => {
+  switch (task.status) {
+    case 'cancelled':
+    case 'not-started': {
+      return 'not-started';
+    }
+    case 'completed': {
+      return 'completed';
+    }
+    case 'overdue': {
+      return 'overdue';
+    }
+    case 'processable': {
+      return 'processable';
+    }
+    default: {
+      return 'not-started';
+    }
+  }
+};
+
+// Get tasks for a specific date
+const getTasksForDate = (date) => {
+  const dateStr = date.toISOString().split('T')[0];
+  return tasks.value.filter(task => {
+    if (typeof task.date === 'string') {
+      return task.date === dateStr;
+    }
+    return false;
+  });
+};
+
+// Set initial calendar value based on props
+const initialCalendarValue = computed(() => {
+  if (props.month) {
+    // If month prop is provided, use it to set the calendar month
+    return new Date(`2025-${props.month.toString().padStart(2, '0')}-01`);
+  }
+  // Default to December 2025 where there are tasks
+  return new Date('2025-12-01');
+});
+</script>
+
+<template>
+  <div class="month-schedule">
+    <div class="status-legend">
+      <div class="legend-item">
+        <span class="status-indicator not-started"></span>
+        <span>灰色任务名：任务未开始/任务取消</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator processable"></span>
+        <span>黑色任务名：任务可处理</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator overdue"></span>
+        <span>红色任务名：任务过期未完成</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator completed"></span>
+        <span>黑色任务名：任务已完成</span>
+      </div>
+    </div>
+    
+    <ElCalendar :value="initialCalendarValue">
+      <template #header="{ date }">
+        <span></span>
+      </template>
+      <template #date-cell="{ data }">
+        <div class="calendar-cell">
+          <div class="tasks-container">
+            <div 
+              v-for="task in getTasksForDate(data.date)" 
+              :key="task.id" 
+              class="task-item"
+              :class="getTaskStatusClass(task)"
+            >
+              <div class="task-name">{{ task.name }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ElCalendar>
+  </div>
+</template>
+
+<style scoped>
+.month-schedule {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.status-legend {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.status-indicator.not-started {
+  background-color: #ccc;
+}
+
+.status-indicator.processable {
+  background-color: #000;
+}
+
+.status-indicator.overdue {
+  background-color: #ff0000;
+}
+
+.status-indicator.completed {
+  background-color: #000;
+  position: relative;
+}
+
+.status-indicator.completed::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -2px;
+  right: -2px;
+  height: 1px;
+  background-color: #fff;
+  transform: rotate(45deg);
+}
+
+/* .calendar-cell {
+  height: 150px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+} */
+
+::v-deep .el-calendar-table__row .current {
+  height: 150px;
+}
+
+::v-deep .el-calendar-table__row .el-calendar-day {
+  height: 150px;
+}
+
+.date-text {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.tasks-container {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.task-item {
+  margin-bottom: 4px;
+  padding: 2px;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.task-item.not-started {
+  cursor: default;
+}
+
+.task-name {
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+}
+
+/* Task status styles */
+.task-item.not-started {
+  color: #999;
+  pointer-events: none;
+}
+
+.task-item.processable {
+  color: #000;
+}
+
+.task-item.overdue {
+  color: #ff0000;
+}
+
+.task-item.completed {
+  color: #000;
+  text-decoration: line-through;
+}
+</style>

apps/web-ele/src/views/schedule/view/components/week/index.vue

@@ -0,0 +1,483 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+// Props from parent component
+const props = defineProps({
+  year: {
+    type: Number,
+    required: true,
+  },
+  weekNumber: {
+    type: Number,
+    required: true,
+    alias: 'week-number',
+  },
+});
+
+// 模拟任务数据
+const tasks = ref([
+  {
+    id: 1,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-15',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 2,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-15',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 3,
+    name: '中州大道监控设备维护',
+    date: '2025-12-15',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 4,
+    name: '农业路交通流量分析',
+    date: '2025-12-15',
+    status: 'cancelled',
+    department: '数据分析部',
+  },
+  {
+    id: 5,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-16',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 6,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-16',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 7,
+    name: '文化路监控系统升级',
+    date: '2025-12-16',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 8,
+    name: '纬五路设备巡检',
+    date: '2025-12-16',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 9,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-17',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 10,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-17',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 11,
+    name: '经三路摄像头调试',
+    date: '2025-12-17',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 12,
+    name: '东风路设备更新计划',
+    date: '2025-12-17',
+    status: 'cancelled',
+    department: '采购部',
+  },
+  {
+    id: 13,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-18',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 14,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-18',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 15,
+    name: '花园路监控中心改造',
+    date: '2025-12-18',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 16,
+    name: '桐柏路设备维护',
+    date: '2025-12-18',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 17,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-19',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 18,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-19',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 19,
+    name: '大学路监控设备安装',
+    date: '2025-12-19',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 20,
+    name: '汝河路系统测试',
+    date: '2025-12-19',
+    status: 'cancelled',
+    department: '质量部',
+  },
+  {
+    id: 21,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-20',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 22,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-20',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 23,
+    name: '航海路监控数据分析',
+    date: '2025-12-20',
+    status: 'completed',
+    department: '数据分析部',
+  },
+  {
+    id: 24,
+    name: '长江路设备巡检',
+    date: '2025-12-20',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 25,
+    name: '未来路摄像头抓图AI检查',
+    date: '2025-12-21',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 26,
+    name: '龙飞街摄像头抓图AI检查',
+    date: '2025-12-21',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 27,
+    name: '嵩山路监控系统优化',
+    date: '2025-12-21',
+    status: 'not-started',
+    department: '技术部',
+  },
+  {
+    id: 28,
+    name: '紫荆山路设备调试',
+    date: '2025-12-21',
+    status: 'completed',
+    department: '技术部',
+  },
+  {
+    id: 29,
+    name: '商城路设备维护计划',
+    date: '2025-12-21',
+    status: 'overdue',
+    department: '运维部',
+  },
+  {
+    id: 30,
+    name: '金水路交通管理培训',
+    date: '2025-12-21',
+    status: 'cancelled',
+    department: '人力资源部',
+  },
+]);
+
+// Calculate the 7 days of the specified week
+const weekDays = computed(() => {
+  const days = [];
+  const firstDayOfWeek = new Date(props.year, 0, 1);
+  const diff = firstDayOfWeek.getDay() === 0 ? 6 : firstDayOfWeek.getDay() - 1;
+
+  firstDayOfWeek.setDate(
+    firstDayOfWeek.getDate() - diff + (props.weekNumber - 1) * 7,
+  );
+
+  for (let i = 0; i < 7; i++) {
+    const currentDate = new Date(firstDayOfWeek);
+    currentDate.setDate(currentDate.getDate() + i);
+
+    const dateStr = currentDate.getDate().toString();
+    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+    const weekday = weekdays[currentDate.getDay()];
+
+    days.push({
+      date: dateStr,
+      weekday,
+      fullDate: currentDate.toISOString().split('T')[0],
+    });
+  }
+
+  return days;
+});
+
+// Get tasks for a specific day
+const getTasksForDay = (date) => {
+  return tasks.value.filter((task) => {
+    if (typeof task.date === 'string') {
+      const taskDate = new Date(task.date);
+      const dayDate = new Date(props.year, 0, 1);
+      const diff = dayDate.getDay() === 0 ? 6 : dayDate.getDay() - 1;
+      dayDate.setDate(
+        dayDate.getDate() -
+          diff +
+          (props.weekNumber - 1) * 7 +
+          Number.parseInt(date) -
+          1,
+      );
+
+      return taskDate.toDateString() === dayDate.toDateString();
+    }
+    return false;
+  });
+};
+
+// Get task status class based on task properties
+const getTaskStatusClass = (task) => {
+  switch (task.status) {
+    case 'cancelled':
+    case 'not-started': {
+      return 'not-started';
+    }
+    case 'completed': {
+      return 'completed';
+    }
+    case 'overdue': {
+      return 'overdue';
+    }
+    case 'processable': {
+      return 'processable';
+    }
+    default: {
+      return 'not-started';
+    }
+  }
+};
+</script>
+<template>
+<div class="week-schedule">
+    <div class="status-legend">
+      <div class="legend-item">
+        <span class="status-indicator not-started"></span>
+        <span>灰色任务名：任务未开始/任务取消</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator processable"></span>
+        <span>黑色任务名：任务可处理</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator overdue"></span>
+        <span>红色任务名：任务过期未完成</span>
+      </div>
+      <div class="legend-item">
+        <span class="status-indicator completed"></span>
+        <span>黑色任务名：任务已完成</span>
+      </div>
+    </div>
+    
+    <div class="week-container">
+      <div 
+        v-for="day in weekDays" 
+        :key="day.date" 
+        class="day-column"
+      >
+        <div class="day-header">
+          <div class="date-weekday">{{ day.date }} {{ day.weekday }}</div>
+        </div>
+        <div class="tasks-container">
+          <div 
+            v-for="task in tasks" 
+            :key="task.id" 
+            class="task-item"
+            :class="getTaskStatusClass(task)"
+          >
+            <div class="task-name">{{ task.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.week-schedule {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.status-legend {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.status-indicator.not-started {
+  background-color: #ccc;
+}
+
+.status-indicator.processable {
+  background-color: #000;
+}
+
+.status-indicator.overdue {
+  background-color: #ff0000;
+}
+
+.status-indicator.completed {
+  background-color: #000;
+  position: relative;
+}
+
+.status-indicator.completed::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -2px;
+  right: -2px;
+  height: 1px;
+  background-color: #fff;
+  transform: rotate(45deg);
+}
+
+.week-container {
+  display: flex;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.day-column {
+  flex: 1;
+  border-right: 1px solid #e0e0e0;
+  min-width: 120px;
+}
+
+.day-column:last-child {
+  border-right: none;
+}
+
+.day-header {
+  background-color: #fafafa;
+  padding: 8px;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+  font-weight: bold;
+}
+
+.date-weekday {
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.tasks-container {
+  padding: 8px;
+  min-height: 300px;
+}
+
+.task-item {
+  margin-bottom: 6px;
+  padding: 4px;
+  transition: all 0.2s;
+}
+
+.task-item:hover {
+  cursor: pointer;
+}
+
+.task-item.not-started:hover {
+  cursor: default;
+}
+
+.task-name {
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.task-assignee {
+  font-size: 11px;
+  color: #888;
+  line-height: 1.3;
+}
+
+/* Task status styles */
+.task-item.not-started {
+  color: #999;
+  pointer-events: none;
+}
+
+.task-item.processable {
+  color: #000;
+}
+
+.task-item.overdue {
+  color: #ff0000;
+}
+
+.task-item.completed {
+  color: #000;
+  text-decoration: line-through;
+}
+</style>

apps/web-ele/src/views/schedule/view/index.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import dayjs from 'dayjs';
+import { ElRadioButton, ElRadioGroup } from 'element-plus';
+
+import Day from './components/day/index.vue';
+import Month from './components/month/index.vue';
+import Week from './components/week/index.vue';
+
+// 根据timeType计算默认日期
+const getDefaultDate = (type: string) => {
+  switch (type) {
+    case 'month': {
+      return dayjs().format('YYYY-MM');
+    }
+    case 'week': {
+      return dayjs().format('YYYY-MM-DD');
+    }
+    default: {
+      return dayjs().format('YYYY-MM-DD');
+    }
+  }
+};
+
+const searchParams = ref({
+  timeType: 'day',
+  station: '',
+  date: getDefaultDate('day'),
+});
+
+// 监听timeType变化，更新默认日期
+watch(
+  () => searchParams.value.timeType,
+  (newType) => {
+    searchParams.value.date = getDefaultDate(newType);
+  },
+);
+
+// 计算年份和周数
+const year = computed(() => {
+  return dayjs(searchParams.value.date).year();
+});
+
+const weekNumber = computed(() => {
+  return dayjs(searchParams.value.date).week();
+});
+</script>
+
+<template>
+  <Page title="日程视图">
+    <template #description>
+      <!--筛选区域-->
+      <div class="flex items-center justify-between space-x-4">
+        <div class="flex items-center space-x-4">
+          <ElSelect
+            v-model="searchParams.station"
+            placeholder="请选择油站"
+            class="w-48 min-w-48 max-w-48"
+            style="width: 12rem"
+          >
+            <ElOption label="第一站-龙-龙血站" value="1" />
+          </ElSelect>
+
+          <ElRadioGroup v-model="searchParams.timeType">
+            <ElRadioButton label="day">日</ElRadioButton>
+            <ElRadioButton label="week">周</ElRadioButton>
+            <ElRadioButton label="month">月</ElRadioButton>
+          </ElRadioGroup>
+          <ElDatePicker
+            v-model="searchParams.date"
+            :type="
+              searchParams.timeType === 'month'
+                ? 'month'
+                : searchParams.timeType === 'week'
+                  ? 'week'
+                  : 'date'
+            "
+            :placeholder="
+              searchParams.timeType === 'month'
+                ? '选择月份'
+                : searchParams.timeType === 'week'
+                  ? '选择周'
+                  : '选择日期'
+            "
+            :format="
+              searchParams.timeType === 'month'
+                ? 'YYYY-MM'
+                : searchParams.timeType === 'week'
+                  ? 'YYYY [年] ww [周]'
+                  : 'YYYY-MM-DD'
+            "
+            :value-format="
+              searchParams.timeType === 'month'
+                ? 'YYYY-MM'
+                : searchParams.timeType === 'week'
+                  ? 'YYYY-MM-DD'
+                  : 'YYYY-MM-DD'
+            "
+            class="w-48 min-w-48 max-w-48"
+            style="width: 12rem"
+          />
+        </div>
+
+        <div class="flex items-center space-x-4">
+          <ElButton type="primary"> 油站新增任务 </ElButton>
+          <ElButton type="primary"> 访客新增任务 </ElButton>
+          <ElButton type="primary"> 任务转接 </ElButton>
+        </div>
+      </div>
+    </template>
+    <ElCard class="mb-5 w-full">
+      <Day v-if="searchParams.timeType === 'day'" />
+      <Week
+        v-if="searchParams.timeType === 'week'"
+        :year="year"
+        :week-number="weekNumber"
+      />
+      <Month v-if="searchParams.timeType === 'month'" :year="year" />
+    </ElCard>
+  </Page>
+</template>