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 20:03:00 +08:00
parent 31a2b405db
commit 834b0ab161
10 changed files with 642 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/views/zhinengxunjian/qiangxiuguanli.vue
View File

@ -58,7 +58,7 @@
<!-- 任务卡片列表 -->
<div class="task-cards">
<div class="task-card" v-for="(task, index) in pagedTasks" :key="index" :class="task.statusClass">
<div class="task-card" v-for="(task, index) in pagedTasks" :key="index" :class="task.leftLineClass">
<!-- 顶部信息区域 -->
<div class="task-header">
<div class="task-title">
@ -69,7 +69,7 @@
</div>
</div>
<!-- 新增滚动内容容器 -->
<!-- 滚动内容容器 -->
<div class="task-content-scroll">
<div class="task-details">
<div class="detail-item">
@ -99,7 +99,7 @@
<span class="detail-value">{{ task.completeTime }}</span>
</div>
<!-- 增加一些示例数据来演示滚动效果 -->
<!-- 执行中状态的额外信息 -->
<div v-if="task.status === 'executing'" class="detail-item">
<span class="detail-label">开始时间</span>
<span class="detail-value">{{ task.startTime || '30分钟前' }}</span>
@ -187,7 +187,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>
@ -240,18 +240,13 @@ const activeTab = ref('task');
// 根据故障类型获取对应的CSS类
const getFaultTypeClass = (faultType) => {
const typeMap = {
// 电力，设备故障为红色
'电力故障': 'electric',
'设备故障': 'equipment',
// 供水，设备损坏为黄色
'供水问题': 'water',
'设备损坏': 'damage',
// 其余默认使用基本样式（绿色）
'网络中断': '',
'制冷系统故障': '',
'安全问题': ''
'网络中断': 'network',
'制冷系统故障': 'cooling',
'安全问题': 'safety'
};
return typeMap[faultType] || '';
};
@ -263,13 +258,13 @@ const emergencyLevel = ref('all');
const planType = ref('all');
const executor = ref('all');
// 任务数据 - 添加了更多字段以展示滚动效果
// 任务数据 - 使用leftLineClass控制左侧状态线，统一按钮样式
const tasks = ref([
{
title: '主配电室短路故障',
status: 'executing',
statusText: '抢修中',
statusClass: 'status-high',
leftLineClass: 'left-line-high', // 致命级-红色左侧线
priority: '致命',
reportTime: '10分钟前',
reporter: '李阳',
@ -284,10 +279,10 @@ const tasks = ref([
actionClass: 'follow-btn'
},
{
title: '主配电室短路故障',
title: '三楼卫生间漏水',
status: 'executing',
statusText: '抢修中',
statusClass: 'status-medium',
leftLineClass: 'left-line-medium', // 紧急级-黄色左侧线
priority: '紧急',
reportTime: '45分钟前',
reporter: '李阳',
@ -305,7 +300,7 @@ const tasks = ref([
title: '网络主干交换机故障',
status: 'completed',
statusText: '已完成',
statusClass: 'status-completed',
leftLineClass: 'left-line-completed', // 已完成-绿色左侧线
priority: '较危险',
reportTime: '1小时前',
reporter: '李阳',
@ -316,13 +311,13 @@ const tasks = ref([
completeTime: '2小时前',
remarks: '交换机电源模块故障，已更换备用模块',
actionText: '查看报告',
actionClass: 'view-btn'
actionClass: 'evaluate-btn'
},
{
title: '安全出口指示牌损坏',
status: 'pending',
statusText: '待处理',
statusClass: 'status-medium',
leftLineClass: 'left-line-medium', // 较危险级-黄色左侧线
priority: '较危险',
reportTime: '3小时前',
reporter: '李阳',
@ -338,13 +333,13 @@ const tasks = ref([
title: '制冷系统主压缩机故障',
status: 'executing',
statusText: '抢修中',
statusClass: 'status-high',
leftLineClass: 'left-line-high', // 致命级-红色左侧线
priority: '致命',
reportTime: '1小时前',
reporter: '李阳',
maintainer: '张明',
expectedCompleteTime: '45分钟内',
faultType: '设备故障',
faultType: '制冷系统故障',
faultLocation: '楼顶制冷机房',
startTime: '50分钟前',
progress: '30%',
@ -353,10 +348,10 @@ const tasks = ref([
actionClass: 'follow-btn'
},
{
title: '主配电室短路故障',
title: '地下室水泵压力不足',
status: 'executing',
statusText: '抢修中',
statusClass: 'status-medium',
leftLineClass: 'left-line-medium', // 紧急级-黄色左侧线
priority: '紧急',
reportTime: '45分钟前',
reporter: '李阳',
@ -374,8 +369,8 @@ const tasks = ref([
// 分页相关
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(6);
const pageSize = ref(8);
const total = ref(tasks.value.length);
// 状态排序映射
const statusOrder = {
@ -524,11 +519,10 @@ const handleInspection7 = () => {
min-height: 100vh;
}
/* 任务卡片样式修改 - 增加滚动功能 */
.task-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
@ -540,76 +534,61 @@ const handleInspection7 = () => {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
/* 固定卡片高度 */
min-height: 280px;
display: flex;
flex-direction: column;
min-height: 300px;
}
/* 顶部装饰条样式 */
.task-card.status-high::before {
/* 左侧状态线样式 - 与报修管理页面保持一致 */
.task-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
top: 0;
bottom: 0;
width: 4px;
}
.task-card.status-medium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
.left-line-high::before {
background-color: #ff4d4f;
}
.task-card.status-low::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
.left-line-medium::before {
background-color: #fa8c16;
}
.task-card.status-completed::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
.left-line-low::before {
background-color: #1677ff;
}
/* 添加滚动内容容器 */
.left-line-completed::before {
background-color: #52c41a;
}
/* 滚动内容容器 */
.task-content-scroll {
flex: 1;
overflow-y: auto;
padding-right: 8px; /* 为滚动条预留空间 */
margin-bottom: 10px;
/* 限制最大高度，超出则显示滚动条 */
max-height: 180px;
}
/* 滚动条样式保持不变 */
.task-content-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.task-content-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
background: #f5f7fa;
border-radius: 3px;
}
.task-content-scroll::-webkit-scrollbar-thumb {
background: #c1c1c1;
background: #c0c4cc;
border-radius: 3px;
}
.task-content-scroll::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
background: #909399;
}
.task-header {
@ -638,16 +617,21 @@ const handleInspection7 = () => {
border: 1px solid transparent;
}
/* 不同故障类型的颜色 */
/* 电力，设备故障为红色 */
/* 故障类型标签样式 */
.task-type-tag {
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
}
.task-type-tag.electric,
.task-type-tag.equipment {
.task-type-tag.equipment,
.task-type-tag.cooling {
background-color: #fff2f0;
color: #ff4d4f;
border-color: #ffccc7;
}
/* 供水，设备损坏为黄色 */
.task-type-tag.water,
.task-type-tag.damage {
background-color: #fffbe6;
@ -655,13 +639,6 @@ const handleInspection7 = () => {
border-color: #ffe58f;
}
/* 其余为绿色 */
.task-type-tag {
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
}
.task-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
@ -712,14 +689,11 @@ const handleInspection7 = () => {
z-index: 10;
}
.task-actions .el-button {
border-radius: 16px;
padding: 6px 16px;
}
/* 统一按钮样式 - 与报修管理页面保持一致 */
.action-btn {
font-size: 12px;
padding: 4px 12px;
font-size: 13px;
padding: 4px 10px;
border-radius: 16px;
}
.view-btn {
@ -734,6 +708,8 @@ const handleInspection7 = () => {
.follow-btn {
background-color: #165dff;
border-color: #165dff;
border-radius: 16px;
padding: 6px 16px;
}
.follow-btn:hover {
@ -744,6 +720,8 @@ const handleInspection7 = () => {
.assign-btn {
background-color: #ff7d00;
border-color: #ff7d00;
border-radius: 16px;
padding: 6px 16px;
}
.assign-btn:hover {
@ -751,6 +729,18 @@ const handleInspection7 = () => {
border-color: #e86a00;
}
.evaluate-btn {
background-color: #00b42a;
border-color: #00b42a;
border-radius: 16px;
padding: 6px 16px;
}
.evaluate-btn:hover {
background-color: #008718;
border-color: #008718;
}
/* 其他样式保持不变 */
.tabs-wrapper {
background-color: #fff;
@ -764,7 +754,7 @@ const handleInspection7 = () => {
background-color: #fff;
border-radius: 8px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
padding: 16px 24px;
}
@ -796,11 +786,25 @@ const handleInspection7 = () => {
background-color: #f2f3f5;
color: #303133;
border-color: #f2f3f5;
transition: all 0.2s ease;
border-radius: 4px;
}
.search-btn:hover {
background-color: #e5e6eb;
border-color: #e5e6eb;
}
.create-btn {
background-color: #165dff;
border-color: #165dff;
transition: all 0.2s ease;
border-radius: 4px;
}
.create-btn:hover {
background-color: #0e42d2;
border-color: #0e42d2;
}
.pagination-section {
@ -877,7 +881,7 @@ const handleInspection7 = () => {
color: #909399;
}
/* 弹窗和表单样式保持不变 */
/* 弹窗和表单样式 */
.beautiful-dialog {
border-radius: 12px;
overflow: hidden;
@ -889,6 +893,16 @@ const handleInspection7 = () => {
margin-bottom: 24px;
}
/* 弹窗按钮样式保持一致 */
.dialog-footer .el-button {
min-width: 80px;
height: 36px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0 8px;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.task-cards {