0917
This commit is contained in:
@ -14,7 +14,6 @@
|
||||
<TitleComponent title="报修管理模块" subtitle="创建报修任务，跟进报修记录，管理维修进度"></TitleComponent>
|
||||
|
||||
<!-- 选项卡 -->
|
||||
<!-- 选项卡和按钮组合 -->
|
||||
<div class="tabs-wrapper">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<el-button type="primary" @click="handleInspectionManagement1">报修任务</el-button>
|
||||
@ -59,12 +58,13 @@
|
||||
|
||||
<!-- 任务卡片列表 -->
|
||||
<div class="task-cards">
|
||||
<div class="task-card" v-for="(task, index) in pagedTasks" :key="index">
|
||||
<div class="task-card" v-for="(task, index) in pagedTasks" :key="index" :class="task.leftLineClass">
|
||||
<div class="task-header">
|
||||
<div class="task-title">
|
||||
{{ task.title }}
|
||||
</div>
|
||||
<div class="task-status" :class="task.statusClass">
|
||||
<!-- 恢复优先级标签背景色样式 -->
|
||||
<div class="task-status" :class="task.priorityClass">
|
||||
{{ task.priority }}
|
||||
</div>
|
||||
</div>
|
||||
@ -82,6 +82,11 @@
|
||||
<span class="detail-label">维修人</span>
|
||||
<span class="detail-value">{{ task.maintainer }}</span>
|
||||
</div>
|
||||
<!-- 恢复预计完成时间字段 -->
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">预计完成</span>
|
||||
<span class="detail-value">{{ task.expectedCompleteTime }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">状态</span>
|
||||
<span class="detail-value">{{ task.statusText }}</span>
|
||||
@ -164,7 +169,7 @@
|
||||
<el-input v-model="createTaskForm.faultLocation" placeholder="例如：A区102" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上传图片(可选)*">
|
||||
<el-form-item label="上传图片(可选)">
|
||||
<div class="upload-container">
|
||||
<div class="upload-box">
|
||||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||||
@ -212,17 +217,19 @@ const taskStatus = ref('');
|
||||
const planType = ref('');
|
||||
const executor = ref('');
|
||||
|
||||
// 任务数据
|
||||
// 任务数据 - 恢复优先级标签样式和预计完成时间
|
||||
const tasks = ref([
|
||||
{
|
||||
title: '服务器A1电源故障',
|
||||
status: 'executing',
|
||||
statusText: '处理中',
|
||||
statusClass: 'status-high',
|
||||
leftLineClass: 'left-line-high',
|
||||
priorityClass: 'priority-high', // 恢复优先级标签样式类
|
||||
priority: '高优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '张明',
|
||||
expectedCompleteTime: '2025-06-16 12:00', // 恢复预计完成时间
|
||||
actionText: '跟进',
|
||||
actionClass: 'follow-btn'
|
||||
},
|
||||
@ -230,11 +237,13 @@ const tasks = ref([
|
||||
title: '机房环境检查',
|
||||
status: 'pending',
|
||||
statusText: '待处理',
|
||||
statusClass: 'status-medium',
|
||||
leftLineClass: 'left-line-medium',
|
||||
priorityClass: 'priority-medium', // 恢复优先级标签样式类
|
||||
priority: '中优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '张伟',
|
||||
maintainer: '未分配',
|
||||
expectedCompleteTime: '2025-06-16 18:00', // 恢复预计完成时间
|
||||
actionText: '分配',
|
||||
actionClass: 'assign-btn'
|
||||
},
|
||||
@ -242,11 +251,13 @@ const tasks = ref([
|
||||
title: '测试软件授权过期',
|
||||
status: 'executing',
|
||||
statusText: '处理中',
|
||||
statusClass: 'status-low',
|
||||
leftLineClass: 'left-line-low',
|
||||
priorityClass: 'priority-low', // 恢复优先级标签样式类
|
||||
priority: '低优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '李阳',
|
||||
expectedCompleteTime: '2025-06-17 09:00', // 恢复预计完成时间
|
||||
actionText: '跟进',
|
||||
actionClass: 'follow-btn'
|
||||
},
|
||||
@ -254,11 +265,13 @@ const tasks = ref([
|
||||
title: '打印机卡纸故障',
|
||||
status: 'completed',
|
||||
statusText: '已完成',
|
||||
statusClass: 'status-low',
|
||||
leftLineClass: 'left-line-completed',
|
||||
priorityClass: 'priority-low', // 恢复优先级标签样式类
|
||||
priority: '低优先级',
|
||||
reportTime: '2025-06-17 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '张明',
|
||||
expectedCompleteTime: '2025-06-17 10:00', // 恢复预计完成时间
|
||||
completeTime: '2025-06-17 09:15',
|
||||
actionText: '评价',
|
||||
actionClass: 'evaluate-btn'
|
||||
@ -267,11 +280,13 @@ const tasks = ref([
|
||||
title: '服务器A1电源故障',
|
||||
status: 'executing',
|
||||
statusText: '处理中',
|
||||
statusClass: 'status-high',
|
||||
leftLineClass: 'left-line-high',
|
||||
priorityClass: 'priority-high',
|
||||
priority: '高优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '张明',
|
||||
expectedCompleteTime: '2025-06-16 12:00',
|
||||
actionText: '跟进',
|
||||
actionClass: 'follow-btn'
|
||||
},
|
||||
@ -279,11 +294,13 @@ const tasks = ref([
|
||||
title: '机房环境检查',
|
||||
status: 'pending',
|
||||
statusText: '待处理',
|
||||
statusClass: 'status-medium',
|
||||
leftLineClass: 'left-line-medium',
|
||||
priorityClass: 'priority-medium',
|
||||
priority: '中优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '张伟',
|
||||
maintainer: '未分配',
|
||||
expectedCompleteTime: '2025-06-16 18:00',
|
||||
actionText: '分配',
|
||||
actionClass: 'assign-btn'
|
||||
},
|
||||
@ -291,11 +308,13 @@ const tasks = ref([
|
||||
title: '测试软件授权过期',
|
||||
status: 'executing',
|
||||
statusText: '处理中',
|
||||
statusClass: 'status-low',
|
||||
leftLineClass: 'left-line-low',
|
||||
priorityClass: 'priority-low',
|
||||
priority: '低优先级',
|
||||
reportTime: '2025-06-16 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '李阳',
|
||||
expectedCompleteTime: '2025-06-17 09:00',
|
||||
actionText: '跟进',
|
||||
actionClass: 'follow-btn'
|
||||
},
|
||||
@ -303,11 +322,13 @@ const tasks = ref([
|
||||
title: '打印机卡纸故障',
|
||||
status: 'completed',
|
||||
statusText: '已完成',
|
||||
statusClass: 'status-low',
|
||||
leftLineClass: 'left-line-completed',
|
||||
priorityClass: 'priority-low',
|
||||
priority: '低优先级',
|
||||
reportTime: '2025-06-17 08:30',
|
||||
reporter: '李明',
|
||||
maintainer: '张明',
|
||||
expectedCompleteTime: '2025-06-17 10:00',
|
||||
completeTime: '2025-06-17 09:15',
|
||||
actionText: '评价',
|
||||
actionClass: 'evaluate-btn'
|
||||
@ -360,7 +381,6 @@ const createTaskForm = ref({
|
||||
|
||||
const createTaskRules = {
|
||||
repairName: [{ required: true, message: '请输入报修名称', trigger: 'blur' }],
|
||||
briefDescription: [{ required: true, message: '请输入简要描述', trigger: 'blur' }],
|
||||
repairType: [{ required: true, message: '请选择报修类型', trigger: 'change' }],
|
||||
priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
|
||||
detailedDescription: [{ required: true, message: '请输入详细描述', trigger: 'blur' }],
|
||||
@ -828,7 +848,7 @@ const handleInspection7 = () => {
|
||||
border-color: #0e42d2;
|
||||
}
|
||||
|
||||
/* 任务卡片样式 */
|
||||
/* 任务卡片样式 - 恢复优先级标签背景色 */
|
||||
.task-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
||||
@ -844,7 +864,7 @@ const handleInspection7 = () => {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 240px;
|
||||
min-height: 260px; /* 增加高度以适应新增的预计完成时间 */
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
@ -867,6 +887,7 @@ const handleInspection7 = () => {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
/* 左侧状态线样式 */
|
||||
.task-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -876,19 +897,19 @@ const handleInspection7 = () => {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.task-card.status-high::before {
|
||||
.left-line-high::before {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.task-card.status-medium::before {
|
||||
.left-line-medium::before {
|
||||
background-color: #fa8c16;
|
||||
}
|
||||
|
||||
.task-card.status-low::before {
|
||||
.left-line-low::before {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.task-card.status-completed::before {
|
||||
.left-line-completed::before {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
@ -913,6 +934,7 @@ const handleInspection7 = () => {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 恢复优先级标签背景色样式 */
|
||||
.task-status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
@ -921,34 +943,24 @@ const handleInspection7 = () => {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* 高优先级状态 - 红色 */
|
||||
.status-high {
|
||||
.priority-high {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
|
||||
/* 中优先级状态 - 橙色 */
|
||||
.status-medium {
|
||||
.priority-medium {
|
||||
background-color: #fffbe6;
|
||||
color: #fa8c16;
|
||||
border-color: #ffe58f;
|
||||
}
|
||||
|
||||
/* 低优先级状态 - 蓝色 */
|
||||
.status-low {
|
||||
.priority-low {
|
||||
background-color: #e6f7ff;
|
||||
color: #1677ff;
|
||||
color: #1890ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
|
||||
/* 已完成状态 - 绿色 */
|
||||
.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -970,39 +982,6 @@ const handleInspection7 = () => {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.delay-reason {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
font-size: 13px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #f0f2f5;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 0;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #f0f2f5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
padding-left: 80px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.task-result {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
@ -1011,14 +990,6 @@ const handleInspection7 = () => {
|
||||
border-top: 1px dashed #f0f2f5;
|
||||
}
|
||||
|
||||
.result-normal {
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.result-abnormal {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Reference in New Issue
Block a user