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

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

// 跳转至任务详情页
const handleTaskClick = (taskId: number) => {
  router.push(`/schedule/detail/${taskId}`);
};

// 模拟数据
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="hover:border-primary flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <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="hover:border-primary flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <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="hover:border-primary flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <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>