maintenance_system/src/views/zhinengxunjian/index.vue

<template>
  <div>
    <div class="box-container">
      <!-- 导航栏 -->
      <div class="navigation-tabs">
        <div class="nav-tab active" @click="handleInspection1">待办事项</div>
        <div class="nav-tab" @click="handleInspection2">巡检管理</div>
        <div class="nav-tab" @click="handleInspection3">试验管理</div>
        <div class="nav-tab" @click="handleInspection4">报修管理</div>
        <div class="nav-tab" @click="handleInspection5">抢修管理</div>
        <div class="nav-tab" @click="handleInspection6">工单管理</div>
        <div class="nav-tab" @click="handleInspection7">运维组织</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-date-picker v-model="currentDate" type="month" placeholder="选择月份" style="width: 120px; margin-right: 15px" />

              <el-button type="primary">添加</el-button>
              <el-button type="primary" @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 class="todo-actions">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </button>
              </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">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </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 class="todo-actions">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </button>
              </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 class="todo-actions">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </button>
              </div>
            </div>
            <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 class="todo-actions">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </button>
              </div>
            </div>
            <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 class="todo-actions">
                <button class="action-btn edit-btn" @click="handleEdit">
                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                </button>
                <button class="action-btn delete-btn" @click="handleDelete">
                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                </button>
              </div>
            </div>
          </div>

          <!-- 状态图例 - 标签形式 -->
          <div class="status-legend">
            <span class="status-tag normal"><span class="color-block"></span>常规维护</span>
            <span class="status-tag important"><span class="color-block"></span>重要</span>
            <span class="status-tag urgent"><span class="color-block"></span>紧急</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>
  </div>
</template>

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

// 默认显示当前月份
const currentDate = ref(new Date());

// 为了保持兼容性，保留这些变量
const targetYear = 2025;
const years = ref([]);
const selectedYear = ref(currentDate.value.getFullYear());
const selectedMonth = ref(currentDate.value.getMonth() + 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(currentDate, (newDate) => {
  selectedYear.value = newDate.getFullYear();
  selectedMonth.value = newDate.getMonth() + 1;
});

// 初始化年份和月份
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 handleEdit = () => {
  console.log('执行编辑操作');
  // 保留原有编辑逻辑
};

const handleDelete = () => {
  console.log('执行删除操作');
  // 保留原有删除逻辑
};

const handleInspection1 = () => {
  router.push('/rili/rili');
};
const handleInspection2 = () => {
  router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
  router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
  router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
  router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
  router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
  router.push('/rili/renyuanzhuangtai');
};
</script>

<style scoped>
.box-container {
  width: 100%;
  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;
  width: 100%;
}

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

/* 自定义弹窗样式 */
.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 {
  flex: 0 0 360px; /* 调整宽度以匹配设计图，更贴合右侧区域宽度 */
  background-color: #fff;
  border-radius: 4px;
  padding: 20px 20px 80px 20px; /* 增加底部内边距，为固定标签留出空间 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative; /* 设置为相对定位，使内部绝对定位元素相对于此容器定位 */
}

.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: 480px;
  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;
  overflow: hidden;
}

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

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

.todo-content {
  flex: 1;
  position: relative;
  transition: all 0.3s ease;
}

.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: -80px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background-color: inherit;
  opacity: 0;
  transition: all 0.3s ease;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.action-btn:hover {
  background-color: #f5f7fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 悬停显示操作按钮 */
.todo-item:hover .todo-actions {
  opacity: 1;
  right: 0;
}

/* 内容区域平移以给按钮留出空间 */
.todo-item:hover .todo-content {
  transform: translateX(-80px);
}

.action-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 调整按钮间距 */
.todo-actions {
  gap: 12px;
}

.status-legend {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #303133;
}

.status-tag .color-block {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.status-tag.normal .color-block {
  background-color: #52c41a;
}
.status-tag.important .color-block {
  background-color: #faad14;
}
.status-tag.urgent .color-block {
  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;
}

::v-deep .custom-date-cell {
  width: 100%;
  height: 100%;
  padding: 5px;
  text-align: center;
  box-sizing: border-box; /* 确保内边距不撑大元素 */
}

/* 系统升级事件样式 */
.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%;
}

/* 穿透作用域，强制设置日历单元格为正方形 */
::v-deep .el-calendar-table td {
  padding: 2px;
  vertical-align: top;
  width: 120px; /* 强制宽度 */
  height: 120px; /* 强制高度（与宽度一致） */
}
::v-deep .el-calendar-day {
  padding: 0; /* 移除默认内边距 */
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.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>