td_official/src/views/dhr_demo/index.vue

<template>
  <div class="container">
    <!-- 导航栏 -->
    <div class="navigation-tabs">
      <div class="nav-tab active" @click="handleInspection1">待办事项</div>
      <div class="nav-tab" @click="handleInspection2">巡检管理</div>
      <div class="nav-tab">试验管理</div>
      <div class="nav-tab">报修管理</div>
      <div class="nav-tab">抢修管理</div>
      <div class="nav-tab">工单管理</div>
    </div>

    <!-- 标题栏 -->
    <div class="header">
      <TitleComponent title="运维待办事项" subtitle="管理每日、每周等的运维工作任务"></TitleComponent>
    </div>

    <div class="main-content">
      <!-- 左侧日历区域 -->
      <div class="calendar-container">
        <div class="calendar-header">
          <div class="calendar-title">待办月视图</div>
          <div class="calendar-controls">
            <!-- 年份月份选择 -->
            <el-select v-model="selectedYear" placeholder="选择年份" size="small" style="width: 80px; margin-right: 5px">
              <el-option v-for="year in years" :key="year" :label="year.toString()" :value="year"></el-option>
            </el-select>
            <el-select v-model="selectedMonth" placeholder="选择月份" size="small" style="width: 80px; margin-right: 10px">
              <el-option v-for="month in 12" :key="month" :label="month.toString()" :value="month"></el-option>
            </el-select>
            <!-- 月份切换按钮 -->
            <el-button type="text" icon="el-icon-arrow-left" @click="decreaseMonth"></el-button>
            <el-button type="text" icon="el-icon-arrow-right" @click="increaseMonth"></el-button>
            <el-button type="primary" size="small">添加</el-button>
            <el-button type="primary" size="small" @click="goToToday">今日</el-button>
            <el-button type="text" icon="el-icon-plus"></el-button>
          </div>
        </div>
        <!-- 使用 Element Plus 的日历组件 -->
        <el-calendar v-model="currentDate">
          <template #date-cell="{ date, data }">
            <div class="custom-date-cell" :class="getCellClass(data.day)">
              <div class="date-day">{{ data.day.split('-').slice(2).join('-') }}</div>
              <div class="date-events">
                <div v-for="event in getDayEvents(data.day)" :key="event.id" class="event-item" :class="'event-' + event.type">
                  <div class="event-title">{{ event.title }}</div>
                  <div class="event-description">{{ event.description }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-container">
        <div class="form-header">
          <h2>今日待办</h2>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddTaskDialog">添加</el-button>
        </div>

        <!-- 待办事项列表 -->
        <div class="todo-list">
          <!-- 待办项1 - 常规维护 -->
          <div class="todo-item">
            <div class="todo-color-indicator normal"></div>
            <el-checkbox class="todo-checkbox"></el-checkbox>
            <div class="todo-content">
              <div class="todo-main">
                <div class="todo-title">服务器例行检查</div>
                <div class="todo-time">09:00-10:00 AM</div>
              </div>
              <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
            </div>
          </div>

          <!-- 待办项2 - 重要 -->
          <div class="todo-item important">
            <div class="todo-color-indicator important"></div>
            <el-checkbox class="todo-checkbox"></el-checkbox>
            <div class="todo-content">
              <div class="todo-main">
                <div class="todo-title">数据库备份</div>
                <div class="todo-time">14:00-15:00 PM</div>
              </div>
              <div class="todo-description">主要数据库全备份，并验证备份文件完整性</div>
            </div>
            <div class="todo-actions">
              <el-button type="text" icon="el-icon-edit"></el-button>
              <el-button type="text" icon="el-icon-delete"></el-button>
            </div>
          </div>

          <!-- 待办项3 - 紧急 -->
          <div class="todo-item">
            <div class="todo-color-indicator urgent"></div>
            <el-checkbox class="todo-checkbox"></el-checkbox>
            <div class="todo-content">
              <div class="todo-main">
                <div class="todo-title">网络设备固件更新</div>
                <div class="todo-time">18:00-20:00 PM</div>
              </div>
              <div class="todo-description">更新核心交换机和防火墙固件，需安排在业务低峰期</div>
            </div>
          </div>

          <!-- 待办项4 - 常规维护 -->
          <div class="todo-item">
            <div class="todo-color-indicator normal"></div>
            <el-checkbox class="todo-checkbox"></el-checkbox>
            <div class="todo-content">
              <div class="todo-main">
                <div class="todo-title">服务器例行检查</div>
                <div class="todo-time">08:00-09:00 AM</div>
              </div>
              <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
            </div>
          </div>

          <!-- 待办项5 - 常规维护 -->
          <div class="todo-item">
            <div class="todo-color-indicator normal"></div>
            <el-checkbox class="todo-checkbox"></el-checkbox>
            <div class="todo-content">
              <div class="todo-main">
                <div class="todo-title">服务器例行检查</div>
                <div class="todo-time">06:00-07:00 AM</div>
              </div>
              <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
            </div>
          </div>
        </div>

        <!-- 状态图例 - 标签形式 -->
        <div class="status-legend">
          <span class="status-tag normal">常规维护</span>
          <span class="status-tag important">重要</span>
          <span class="status-tag urgent">紧急</span>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="新增任务" width="480px" class="custom-dialog" :before-close="closeDialog">
      <el-form :model="taskForm" label-width="80px" class="task-form">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="taskForm.name" placeholder="输入任务名称" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input v-model="taskForm.description" placeholder="输入任务描述" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="timeRange">
          <el-date-picker
            v-model="taskForm.timeRange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="form-input"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="taskForm.priority" placeholder="选择优先级" class="form-input">
            <el-option label="常规项" value="常规项"></el-option>
            <el-option label="重要" value="重要"></el-option>
            <el-option label="紧急" value="紧急"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型" prop="taskType">
          <el-select v-model="taskForm.taskType" placeholder="选择任务类型" class="form-input">
            <el-option label="常规维护" value="常规维护"></el-option>
            <el-option label="安全巡检" value="安全巡检"></el-option>
            <el-option label="系统升级" value="系统升级"></el-option>
            <el-option label="数据备份" value="数据备份"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveTask">保存任务</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import router from '@/router';
import TitleComponent from '../demo/components/TitleComponent.vue';

// 生成年份选项，生成2020-2029年的年份范围
const targetYear = 2025;
const years = ref(Array.from({ length: 10 }, (_, index) => 2020 + index));
const selectedYear = ref(targetYear);
const selectedMonth = ref(9);

// 默认显示2025年9月
const currentDate = ref(new Date(targetYear, 8, 1));

// 减少月份
const decreaseMonth = () => {
  const date = new Date(currentDate.value);
  date.setMonth(date.getMonth() - 1);
  currentDate.value = date;
  updateYearAndMonth();
};

// 增加月份
const increaseMonth = () => {
  const date = new Date(currentDate.value);
  date.setMonth(date.getMonth() + 1);
  currentDate.value = date;
  updateYearAndMonth();
};

// 回到今天
const goToToday = () => {
  currentDate.value = new Date();
  updateYearAndMonth();
};

// 日历事件数据 - 2025年9月的随机事件
const calendarEvents = ref([
  // 服务维护事件
  { id: 1, date: '2025-09-11', title: '服务维护', description: '维护公司内部服务器', type: 'service' },
  { id: 2, date: '2025-09-28', title: '服务维护', description: '先所有旧服务器部署新内存', type: 'service' },

  // 数据库管理事件
  { id: 3, date: '2025-09-21', title: '数据库管理', description: '定期执行数据库优化', type: 'database' },
  { id: 4, date: '2025-09-30', title: '数据库管理', description: '大型数据库备份策略', type: 'database' },

  // 网络维护事件
  { id: 5, date: '2025-09-05', title: '网络维护', description: '网络设备例行检查', type: 'network' },
  { id: 6, date: '2025-09-15', title: '网络维护', description: '更新网络安全策略', type: 'network' },

  // 系统升级事件
  { id: 7, date: '2025-09-18', title: '系统升级', description: '核心系统版本升级', type: 'upgrade' },
  { id: 8, date: '2025-09-25', title: '系统升级', description: '应用服务升级部署', type: 'upgrade' }
]);

// 获取指定日期的事件
const getDayEvents = (dateStr) => {
  return calendarEvents.value.filter((event) => event.date === dateStr);
};

// 根据事件类型获取单元格样式
const getCellClass = (date) => {
  const events = getDayEvents(date);
  if (events.length > 0) {
    const eventType = events[0].type;
    return `date-cell-${eventType}`;
  }
  return '';
};

// 更新年份和月份选择器的值
const updateYearAndMonth = () => {
  selectedYear.value = currentDate.value.getFullYear();
  selectedMonth.value = currentDate.value.getMonth() + 1;
};

// 监听年份和月份变化，更新日历显示
watch([selectedYear, selectedMonth], ([newYear, newMonth]) => {
  const date = new Date(currentDate.value);
  date.setFullYear(newYear);
  date.setMonth(newMonth - 1);
  currentDate.value = date;
});

// 初始化年份和月份选择器
updateYearAndMonth();

// 弹窗相关状态管理
const dialogVisible = ref(false);
const taskForm = ref({
  name: '',
  description: '',
  timeRange: '',
  priority: '常规项',
  taskType: '常规维护'
});

// 打开添加任务弹窗
const openAddTaskDialog = () => {
  dialogVisible.value = true;
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
};

// 保存任务
const saveTask = () => {
  // 这里可以添加表单验证和保存逻辑
  console.log('保存任务:', taskForm.value);
  // 重置表单
  taskForm.value = {
    name: '',
    description: '',
    timeRange: '',
    priority: '常规项',
    taskType: '常规维护'
  };
  // 关闭弹窗
  closeDialog();
};

const handleInspection1 = () => {
  router.push('/rili/rili');
};
const handleInspection2 = () => {
  router.push('/rili/InspectionManagement');
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 导航栏样式 */
.navigation-tabs {
  display: flex;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 2px;
}

.nav-tab {
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  border-right: 1px solid #f0f0f0;
  flex: 1;
  text-align: center;
}

.nav-tab:last-child {
  border-right: none;
}

.nav-tab:hover {
  color: #409eff;
  background-color: #ecf5ff;
}

.nav-tab.active {
  background-color: #409eff;
  color: #fff;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.nav-tab {
  cursor: pointer;
  user-select: none;
}

.header {
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.header p {
  font-size: 14px;
  color: #606266;
  margin: 5px 0 0 0;
}

.main-content {
  display: flex;
  gap: 20px;
}

/* 日历区域样式 */
.calendar-container {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 自定义弹窗样式 */
.custom-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.custom-dialog .el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 15px 20px;
}

.custom-dialog .el-dialog__title {
  font-size: 16px;
  color: #303133;
}

.custom-dialog .el-dialog__body {
  padding: 20px;
}

/* 确保所有输入框长度相等 */
.task-form .form-input {
  height: 30px;
  width: 100%;
}

/* 时间选择器样式调整 */
.task-form .el-date-editor {
  width: 100%;
  height: 30px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.calendar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-select {
  margin-right: 5px;
}

/* 表单区域样式 */
.form-container {
  width: 400px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.form-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 20px;
  background-color: #fafafa;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

/* 重要任务的背景色 */
.todo-item.important {
  background-color: #e6f7ff;
}

.todo-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
}

.todo-content {
  flex: 1;
}

.todo-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.todo-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.todo-time {
  font-size: 12px;
  color: #909399;
}

.todo-description {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.todo-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 5px;
}

.todo-actions .el-button {
  padding: 4px 8px;
  min-width: auto;
}

/* 状态图例 - 标签形式 */
.status-legend {
  display: flex;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: #fff;
}

.status-tag.normal {
  background-color: #52c41a;
}

.status-tag.important {
  background-color: #faad14;
}

.status-tag.urgent {
  background-color: #ff4d4f;
}

.todo-color-indicator {
  width: 8px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  position: absolute;
  left: 0;
  top: 0;
  flex-shrink: 0;
}

.todo-color-indicator.normal {
  background-color: #52c41a;
}

.todo-color-indicator.important {
  background-color: #faad14;
}

.todo-color-indicator.urgent {
  background-color: #ff4d4f;
}

/* 自定义日历单元格样式 */
.custom-date-cell {
  padding: 5px;
  text-align: center;
}

/* 系统升级事件样式 */
.event-upgrade {
  background-color: #fff1f0;
  color: #f5222d;
}

/* 日期单元格背景色 - 按事件类型 */
.date-cell-service {
  background-color: #e6f7ff;
}

.date-cell-database {
  background-color: #f0f9ff;
}

.date-cell-network {
  background-color: #fffbe6;
}

.date-cell-upgrade {
  background-color: #fff1f0;
}

/* 日历样式优化 */
.el-calendar {
  width: 100%;
}

.el-calendar-table {
  width: 100%;
}

.el-calendar-table td {
  padding: 2px;
  vertical-align: top;
}

.el-calendar-day {
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
}

.date-day {
  font-weight: bold;
  margin-bottom: 5px;
}

.date-events {
  flex: 1;
  overflow: hidden;
}

.event-item {
  padding: 3px;
  margin-bottom: 2px;
  border-radius: 3px;
  font-size: 12px;
}

.event-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-description {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 服务维护事件样式 */
.event-service {
  background-color: #e6f7ff;
  color: #1890ff;
}

/* 数据库管理事件样式 */
.event-database {
  background-color: #f0f9ff;
  color: #36cfc9;
}

/* 网络维护事件样式 */
.event-network {
  background-color: #fffbe6;
  color: #faad14;
}

/* 系统升级事件样式 */
.event-upgrade {
  background-color: #fff1f0;
  color: #f5222d;
}
</style>