taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0917

Browse Source
This commit is contained in:
dhr
2025-09-17 15:53:38 +08:00
parent 987c578730
commit 91e9b32d34
20 changed files with 16214 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

786
src/views/zhinengxunjian/index.vue Normal file
View File

@ -0,0 +1,786 @@
<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">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-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">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" 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 class="todo-actions">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-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">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-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">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-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">
<el-button type="primary" size="small" icon="el-icon-check">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-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 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: -120px;
top: 0;
bottom: 0;
display: flex;
opacity: 0;
transition: all 0.3s ease;
}
.todo-actions .el-button {
height: 100%;
border-radius: 0;
border-right: 1px solid #fff;
}
.todo-actions .el-button:last-child {
border-right: none;
}
.todo-item:hover .todo-content {
transform: translateX(-120px);
}
.todo-item:hover .todo-actions {
opacity: 1;
right: 0;
}
.todo-actions .el-button {
padding: 4px 8px;
min-width: auto;
font-size: 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>