This commit is contained in:
dhr
2025-09-18 19:56:24 +08:00
parent 834b0ab161
commit 93d9d71c25
18 changed files with 154 additions and 123 deletions

View File

@ -69,13 +69,12 @@
<el-table-column align="center" prop="responsible" label="负责人" style="width: 14.2%"></el-table-column>
<el-table-column align="center" label="操作" style="width: 14.2%" fixed="right">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)" size="small" class="action-btn">编辑</el-button>
<el-button type="text" @click="handleDetail(scope.row)" size="small" class="action-btn">详情</el-button>
<el-button type="text" @click="handleEdit(scope.row)" class="action-btn">编辑</el-button>
<el-button type="text" @click="handleDetail(scope.row)" class="action-btn">详情</el-button>
<el-button
type="text"
:disabled="scope.row.status === 'disabled'"
@click="handleEnable(scope.row)"
size="small"
class="action-btn"
:class="{ 'text-success': scope.row.status === 'disabled' }"
>

View File

@ -72,7 +72,7 @@
<p class="stat-trend up">较上月 +4.2%</p>
</div>
<div class="stat-icon">
<i class="el-icon-file-text"></i>
<img src="@/assets/images/baoxiu.png" alt="本月报修数" class="stat-image" />
</div>
</div>
@ -83,7 +83,7 @@
<p class="stat-trend down">较上月 -0.6小时</p>
</div>
<div class="stat-icon">
<i class="el-icon-clock"></i>
<img src="@/assets/images/baoxiushijian.png" alt="平均处理时长" class="stat-image" />
</div>
</div>
@ -94,7 +94,7 @@
<p class="stat-trend warning">需及时处理</p>
</div>
<div class="stat-icon warning">
<i class="el-icon-alarm-clock"></i>
<img src="@/assets/images/weibaoxiu.png" alt="待处理报修" class="stat-image" />
</div>
</div>
@ -105,7 +105,7 @@
<p class="stat-trend up">较上月 +2.1%</p>
</div>
<div class="stat-icon success">
<i class="el-icon-check-circle"></i>
<img src="@/assets/images/baoxiuwancheng.png" alt="完成率" class="stat-image" />
</div>
</div>
</div>
@ -113,22 +113,22 @@
<!-- 报修记录表格 -->
<div class="table-container">
<el-table :data="filteredRecords" border style="width: 100%" class="record-table">
<el-table-column prop="reportNo" label="报修单号" width="140"></el-table-column>
<el-table-column prop="content" label="报修内容"></el-table-column>
<el-table-column prop="reporter" label="报修人" width="100"></el-table-column>
<el-table-column prop="reportTime" label="报修时间" width="160"></el-table-column>
<el-table-column prop="handler" label="处理人员" width="100"></el-table-column>
<el-table-column prop="status" label="处理状态" width="100">
<el-table-column align="center" prop="reportNo" label="报修单号" min-width="120"></el-table-column>
<el-table-column align="center" prop="content" label="报修内容" min-width="200"></el-table-column>
<el-table-column align="center" prop="reporter" label="报修人" min-width="90"></el-table-column>
<el-table-column align="center" prop="reportTime" label="报修时间" min-width="150"></el-table-column>
<el-table-column align="center" prop="handler" label="处理人员" min-width="90"></el-table-column>
<el-table-column align="center" prop="status" label="处理状态" min-width="90">
<template #default="scope">
<span :class="`status-tag ${scope.row.statusClass}`">{{ scope.row.status }}</span>
</template>
</el-table-column>
<el-table-column prop="handleTime" label="处理时间" width="160"></el-table-column>
<el-table-column prop="result" label="维修结果"></el-table-column>
<el-table-column label="操作" width="160">
<el-table-column align="center" prop="handleTime" label="处理时间" min-width="150"></el-table-column>
<el-table-column align="center" prop="result" label="维修结果" min-width="180"></el-table-column>
<el-table-column align="center" label="操作" min-width="140">
<template #default="scope">
<el-button type="text" size="small" class="detail-btn" @click="handleDetail(scope.row)"> 详情 </el-button>
<el-button type="text" size="small" :class="scope.row.actionClass" @click="handleAction(scope.row)">
<el-button type="text" class="detail-btn" @click="handleDetail(scope.row)"> 详情 </el-button>
<el-button type="text" :class="scope.row.actionClass" @click="handleAction(scope.row)">
{{ scope.row.actionText }}
</el-button>
</template>
@ -539,25 +539,19 @@ const handleInspection7 = () => {
}
.stat-icon {
width: 48px;
height: 48px;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: #e8f3ff;
display: flex;
align-items: center;
justify-content: center;
color: #165dff;
font-size: 24px;
}
.stat-icon.warning {
background-color: #fff7e6;
color: #fa8c16;
}
.stat-icon.success {
background-color: #f6ffed;
color: #52c41a;
.stat-image {
width: 45px;
height: 45px;
object-fit: contain;
}
/* 表格样式 */

View File

@ -92,8 +92,8 @@
</el-table-column>
<el-table-column align="center" label="操作" min-width="180" fixed="right">
<template #default="scope">
<el-button type="text" @click="handleViewDetail(scope.row)" size="small" class="action-btn">查看详情</el-button>
<el-button type="text" @click="handleEvaluate(scope.row)" size="small" class="action-btn">评价</el-button>
<el-button type="text" @click="handleViewDetail(scope.row)" class="action-btn">查看详情</el-button>
<el-button type="text" @click="handleEvaluate(scope.row)" class="action-btn">评价</el-button>
<el-button
type="text"
@click="handleCancel(scope.row)"
@ -103,12 +103,8 @@
>
取消
</el-button>
<el-button type="text" @click="handleCommunicate(scope.row)" size="small" class="action-btn" v-if="scope.row.status === '执行中'">
沟通
</el-button>
<el-button type="text" @click="handleArchive(scope.row)" size="small" class="action-btn" v-if="scope.row.status === '已完成'">
归档
</el-button>
<el-button type="text" @click="handleCommunicate(scope.row)" class="action-btn" v-if="scope.row.status === '执行中'"> 沟通 </el-button>
<el-button type="text" @click="handleArchive(scope.row)" class="action-btn" v-if="scope.row.status === '已完成'"> 归档 </el-button>
</template>
</el-table-column>
</el-table>
@ -203,7 +199,7 @@
<el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
</el-form-item>
<el-form-item label="需要执行人*" prop="needAssignee">
<el-form-item label="是否需要执行人" prop="needAssignee">
<el-radio-group v-model="createForm.needAssignee">
<el-radio label="true">指定执行人</el-radio>
<el-radio label="false">由系统分配</el-radio>

View File

@ -68,8 +68,12 @@
<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>
<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>
@ -85,8 +89,12 @@
<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>
<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>
@ -102,8 +110,12 @@
<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>
<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>
@ -119,8 +131,12 @@
<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>
<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">
@ -134,8 +150,12 @@
<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>
<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">
@ -149,13 +169,16 @@
<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>
<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>
@ -328,6 +351,17 @@ const saveTask = () => {
closeDialog();
};
// 编辑和删除处理函数
const handleEdit = () => {
console.log('执行编辑操作');
// 保留原有编辑逻辑
};
const handleDelete = () => {
console.log('执行删除操作');
// 保留原有删除逻辑
};
const handleInspection1 = () => {
router.push('/rili/rili');
};
@ -578,37 +612,59 @@ const handleInspection7 = () => {
.todo-actions {
position: absolute;
right: -120px;
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;
}
.todo-actions .el-button {
height: 100%;
border-radius: 0;
border-right: 1px solid #fff;
.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;
}
.todo-actions .el-button:last-child {
border-right: none;
}
.todo-item:hover .todo-content {
transform: translateX(-120px);
.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-actions .el-button {
padding: 4px 8px;
min-width: auto;
font-size: 12px;
/* 内容区域平移以给按钮留出空间 */
.todo-item:hover .todo-content {
transform: translateX(-80px);
}
.action-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
/* 调整按钮间距 */
.todo-actions {
gap: 12px;
}
.status-legend {

View File

@ -115,11 +115,10 @@
</el-table-column>
<el-table-column align="center" label="操作" min-width="180" fixed="right">
<template #default="scope">
<el-button type="text" @click="handleViewDetails(scope.row)" size="small" class="action-btn">详情</el-button>
<el-button type="text" @click="handleViewDetails(scope.row)" class="action-btn">详情</el-button>
<el-button
type="text"
@click="handleViewReport(scope.row)"
size="small"
class="action-btn report-btn"
v-if="scope.row.completionStatus === '已完成'"
>
@ -128,13 +127,12 @@
<el-button
type="text"
@click="handleViewProgress(scope.row)"
size="small"
class="action-btn progress-btn"
v-else-if="scope.row.completionStatus === '进行中'"
>
查看进度
</el-button>
<el-button type="text" @click="handleTrack(scope.row)" size="small" class="action-btn track-btn" v-else> 跟踪 </el-button>
<el-button type="text" @click="handleTrack(scope.row)" class="action-btn track-btn" v-else> 跟踪 </el-button>
</template>
</el-table-column>
</el-table>

View File

@ -79,7 +79,7 @@
<p class="stat-trend up">较上月 +8.7%</p>
</div>
<div class="stat-icon">
<i class="el-icon-warning-outline"></i>
<img src="@/assets/images/qiangxiu.png" alt="本月抢修总数" class="stat-image" />
</div>
</div>
@ -90,7 +90,7 @@
<p class="stat-trend down">较上月 -2.5分钟</p>
</div>
<div class="stat-icon">
<i class="el-icon-clock"></i>
<img src="@/assets/images/qiangxiushijian.png" alt="平均抢修时长" class="stat-image" />
</div>
</div>
@ -101,7 +101,7 @@
<p class="stat-trend warning">需要尽快处理</p>
</div>
<div class="stat-icon warning">
<i class="el-icon-alarm"></i>
<img src="@/assets/images/weiqiangxiu.png" alt="待处理抢修" class="stat-image" />
</div>
</div>
@ -112,7 +112,7 @@
<p class="stat-trend up">较上月 +2.4%</p>
</div>
<div class="stat-icon success">
<i class="el-icon-check-circle"></i>
<img src="@/assets/images/qiangxiuwancheng.png" alt="按时完成率" class="stat-image" />
</div>
</div>
</div>
@ -120,26 +120,26 @@
<!-- 抢修记录表格 -->
<div class="table-container">
<el-table :data="repairRecords" border style="width: 100%" class="record-table">
<el-table-column prop="reportNo" label="抢修单号" width="140"></el-table-column>
<el-table-column prop="content" label="抢修内容"></el-table-column>
<el-table-column prop="reporter" label="报修人" width="100"></el-table-column>
<el-table-column prop="reportTime" label="报修时间" width="160"></el-table-column>
<el-table-column prop="handler" label="抢修人员" width="100"></el-table-column>
<el-table-column prop="priority" label="紧急程度" width="100">
<el-table-column align="center" prop="reportNo" label="抢修单号" min-width="120"></el-table-column>
<el-table-column align="center" prop="content" label="抢修内容" min-width="200"></el-table-column>
<el-table-column align="center" prop="reporter" label="报修人" min-width="80"></el-table-column>
<el-table-column align="center" prop="reportTime" label="报修时间" min-width="140"></el-table-column>
<el-table-column align="center" prop="handler" label="抢修人员" min-width="80"></el-table-column>
<el-table-column align="center" prop="priority" label="紧急程度" min-width="80">
<template #default="scope">
<span :class="`priority-tag ${scope.row.priorityClass}`">{{ scope.row.priority }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="处理状态" width="100">
<el-table-column align="center" prop="status" label="处理状态" min-width="80">
<template #default="scope">
<span :class="`status-tag ${scope.row.statusClass}`">{{ scope.row.status }}</span>
</template>
</el-table-column>
<el-table-column prop="duration" label="处理时长" width="100"></el-table-column>
<el-table-column label="操作" width="140">
<el-table-column align="center" prop="duration" label="处理时长" min-width="80"></el-table-column>
<el-table-column align="center" label="操作" min-width="120">
<template #default="scope">
<el-button type="text" size="small" class="detail-btn" @click="handleDetail(scope.row)"> 详情 </el-button>
<el-button type="text" size="small" :class="scope.row.actionClass" @click="handleAction(scope.row)">
<el-button type="text" class="detail-btn" @click="handleDetail(scope.row)"> 详情 </el-button>
<el-button type="text" :class="scope.row.actionClass" @click="handleAction(scope.row)">
{{ scope.row.actionText }}
</el-button>
</template>
@ -535,28 +535,20 @@ const handleInspectionManagement2 = () => {
}
.stat-icon {
width: 48px;
height: 48px;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: #ffebe6;
display: flex;
align-items: center;
justify-content: center;
color: #ff4d4f;
font-size: 24px;
}
.stat-icon.warning {
background-color: #fff7e6;
color: #fa8c16;
.stat-image {
width: 45px;
height: 45px;
object-fit: contain;
}
.stat-icon.success {
background-color: #f6ffed;
color: #52c41a;
}
/* 表格样式 */
.table-container {
background-color: #fff;
border-radius: 8px;

View File

@ -62,37 +62,37 @@
<!-- 5.1 巡检计划表格与试验系统表格结构一致 -->
<div v-if="activeTab === 'plan'" class="table-container">
<el-table :data="planTableData" border>
<el-table-column prop="name" label="计划名称" width="220">
<el-table-column align="center" prop="name" label="计划名称" width="220">
<template #default="scope">
<div class="plan-name">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="type" label="巡检类型" width="120"></el-table-column>
<el-table-column prop="cycle" label="巡检周期" width="120"></el-table-column>
<el-table-column prop="dateRange" label="执行时间范围"></el-table-column>
<el-table-column prop="progress" label="完成进度" width="120">
<el-table-column align="center" prop="type" label="巡检类型" width="120"></el-table-column>
<el-table-column align="center" prop="cycle" label="巡检周期" width="120"></el-table-column>
<el-table-column align="center" prop="dateRange" label="执行时间范围"></el-table-column>
<el-table-column align="center" prop="progress" label="完成进度" width="120">
<template #default="scope">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: scope.row.progress + '%', backgroundColor: getProgressColor(scope.row.status) }"></div>
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<el-table-column align="center" prop="status" label="状态" width="100">
<template #default="scope">
<span :class="['status-tag', `status-${scope.row.status}`]">
{{ getStatusText(scope.row.status) }}
</span>
</template>
</el-table-column>
<el-table-column prop="responsible" label="负责人" width="120"></el-table-column>
<el-table-column label="操作" width="220">
<el-table-column align="center" prop="responsible" label="负责人" width="120"></el-table-column>
<el-table-column align="center" label="操作" width="220">
<template #default="scope">
<div class="operation-buttons">
<button class="operate-btn edit-btn" v-if="['drafted', 'paused'].includes(scope.row.status)">编辑</button>
<button class="operate-btn execute-btn" v-if="scope.row.status === 'drafted'">执行</button>
<button class="operate-btn pause-btn" v-if="scope.row.status === 'in-progress'">暂停</button>
<button class="operate-btn resume-btn" v-if="scope.row.status === 'paused'">恢复</button>
<button class="operate-btn view-btn">查看详情</button>
<el-button type="text" class="operate-btn edit-btn" v-if="['drafted', 'paused'].includes(scope.row.status)">编辑</el-button>
<el-button type="text" class="operate-btn execute-btn" v-if="scope.row.status === 'drafted'">执行</el-button>
<el-button type="text" class="operate-btn pause-btn" v-if="scope.row.status === 'in-progress'">暂停</el-button>
<el-button type="text" class="operate-btn resume-btn" v-if="scope.row.status === 'paused'">恢复</el-button>
<el-button type="text" class="operate-btn view-btn">查看详情</el-button>
</div>
</template>
</el-table-column>
@ -118,9 +118,9 @@
<el-table-column label="操作" width="180">
<template #default="scope">
<div class="operation-buttons">
<button class="operate-btn accept-btn" v-if="scope.row.status === 'pending'">接受</button>
<button class="operate-btn complete-btn" v-if="scope.row.status === 'accepted'">完成</button>
<button class="operate-btn view-btn">查看详情</button>
<el-button type="text" class="operate-btn accept-btn" v-if="scope.row.status === 'pending'">接受</el-button>
<el-button type="text" class="operate-btn complete-btn" v-if="scope.row.status === 'accepted'">完成</el-button>
<el-button type="text" class="operate-btn view-btn">查看详情</el-button>
</div>
</template>
</el-table-column>
@ -990,6 +990,7 @@ const addEquipment = () => {
/* 9. 操作按钮样式(扩展试验系统) */
.operation-buttons {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}

View File

@ -180,7 +180,6 @@
<el-button
type="text"
@click="handleViewReport(scope.row)"
size="small"
class="action-btn"
:class="{
'report-btn': scope.row.inspectionResult !== '需整改',
@ -682,12 +681,8 @@ const handleInspectionManagement3 = () => {
.el-step__icon.is-process {
background: linear-gradient(135deg, #165dff, #409eff);
border: 3px solid rgba(255, 255, 255, 0.9);
box-shadow:
0 0 16px rgba(22, 93, 255, 0.4),
0 4px 12px rgba(22, 93, 255, 0.2);
animation:
pulse 2s infinite,
float 6s ease-in-out infinite;
box-shadow: 0 0 16px rgba(22, 93, 255, 0.4), 0 4px 12px rgba(22, 93, 255, 0.2);
animation: pulse 2s infinite, float 6s ease-in-out infinite;
transform: scale(1.05);
}