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

0926

Browse Source
This commit is contained in:
dhr
2025-09-26 20:32:14 +08:00
parent 6b9bfb66b1
commit 3f07f7afe3
18 changed files with 1672 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
src/views/zhinengxunjian/shiyanjilu.vue
View File

@ -2,7 +2,7 @@
<div>
<div class="operation-inspection">
<!-- 顶部导航选项卡 -->
<div class="navigation-tabs">
<!-- <div class="navigation-tabs">
<div class="nav-tab" @click="handleInspection1">待办事项</div>
<div class="nav-tab" @click="handleInspection2">巡检管理</div>
<div class="nav-tab active" @click="handleInspection3">试验管理</div>
@ -10,16 +10,7 @@
<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-container">
<div class="header-actions">
<el-button type="primary" class="export-btn">筛选</el-button>
<el-button type="primary" class="create-btn">导入数据</el-button>
</div>
</div>
</div> -->
<!-- 选项卡和按钮组合 -->
<div class="tabs-wrapper">
<div style="display: flex; align-items: center; gap: 10px">
@ -56,7 +47,7 @@
class="date-picker"
></el-date-picker>
<el-button type="primary" class="search-btn"> 搜索 </el-button>
<el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
</div>
</div>
@ -71,11 +62,20 @@
<div class="stat-grid">
<div class="stat-card">
<p class="stat-label">本月完成试验</p>
<p class="stat-value">{{ statData.completed }}<span class="stat-change up">较上月 ↑2.4%</span></p>
<p class="stat-value">
{{ statData.completed
}}<span class="stat-change" :class="statData.completedGrowth >= 0 ? 'up' : 'down'">
较上月 {{ statData.completedGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.completedGrowth) }}%
</span>
</p>
</div>
<div class="stat-card">
<p class="stat-label">试验通过率</p>
<p class="stat-value">{{ statData.passRate }}%<span class="stat-change up">较上月 ↑5.6%</span></p>
<p class="stat-value">
{{ statData.passRate }}%<span class="stat-change" :class="statData.passRateGrowth >= 0 ? 'up' : 'down'">
较上月 {{ statData.passRateGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.passRateGrowth) }}%
</span>
</p>
</div>
<div class="stat-card">
<p class="stat-label">待分析记录</p>
@ -83,7 +83,12 @@
</div>
<div class="stat-card">
<p class="stat-label">平均试验时长</p>
<p class="stat-value">{{ statData.avgDuration }}<span class="stat-change down">较上月 ↓9.4分钟</span></p>
<p class="stat-value">
{{ statData.avgDuration
}}<span class="stat-change" :class="statData.avgDurationGrowth >= 0 ? 'down' : 'up'">
较上月 {{ statData.avgDurationGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.avgDurationGrowth) }}分钟
</span>
</p>
</div>
</div>
@ -149,7 +154,7 @@
</div>
<div class="record-actions">
<button class="operate-btn view-btn">查看详情</button>
<button class="operate-btn view-btn" @click="handleViewDetail(record)">查看详情</button>
<button class="operate-btn report-btn">生成报告</button>
</div>
</div>
@ -192,7 +197,7 @@
<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>
<button class="operate-btn view-btn" @click="handleViewDetail(scope.row)">查看详情</button>
</div>
</template>
</el-table-column>
@ -220,7 +225,7 @@
<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>
<button class="operate-btn view-btn" @click="handleViewDetail(scope.row)">查看详情</button>
</div>
</template>
</el-table-column>
@ -241,6 +246,106 @@
@size-change="handleSizeChange"
></el-pagination>
</div>
<!-- 详情弹窗 -->
<el-dialog v-model="detailDialogVisible" title="任务详情" width="800px" :close-on-click-modal="false" center>
<div v-if="detailData" class="task-detail-container">
<div class="detail-card">
<h3 class="card-title">基本信息</h3>
<div class="info-row">
<span class="info-label">任务名称</span>
<span class="info-value">{{ detailData.taskName }}</span>
<span class="info-label">任务状态</span>
<span class="info-value" :class="getStatusClass(detailData.status)">
{{ getStatusText(detailData.status) }}
</span>
</div>
<div class="info-row">
<span class="info-label">测试对象</span>
<span class="info-value">{{ detailData.testObject }}</span>
<span class="info-label">完成进度</span>
<span class="info-value">{{ detailData.progress }}%</span>
</div>
<div class="info-row">
<span class="info-label">开始时间</span>
<span class="info-value">{{ detailData.beginTime }}</span>
<span class="info-label">结束时间</span>
<span class="info-value">{{ detailData.endTime }}</span>
</div>
<div class="info-row">
<span class="info-label">时间信息</span>
<span class="info-value">{{ detailData.timeInfo ? detailData.timeInfo.replace(/,/g, '—') : '-' }}</span>
</div>
</div>
<div class="detail-card">
<h3 class="card-title">执行人信息</h3>
<div v-if="detailData.personInfo" class="info-row">
<span class="info-label">执行人姓名</span>
<span class="info-value">{{ detailData.personInfo.userName }}</span>
<span class="info-label">联系电话</span>
<span class="info-value">{{ detailData.personInfo.phonenumber }}</span>
</div>
<div v-if="detailData.personInfo" class="info-row">
<span class="info-label">性别</span>
<span class="info-value">{{ detailData.personInfo.sex === '1' ? '男' : '女' }}</span>
</div>
</div>
<div class="detail-card">
<h3 class="card-title">关联计划</h3>
<div v-if="detailData.testPlan" class="info-row">
<span class="info-label">计划名称</span>
<span class="info-value">{{ detailData.testPlan.planName }}</span>
<span class="info-label">计划编号</span>
<span class="info-value">{{ detailData.testPlan.planCode }}</span>
</div>
<div v-if="detailData.testPlan" class="info-row">
<span class="info-label">计划时间</span>
<span class="info-value">{{ detailData.testPlan.beginTime }} — {{ detailData.testPlan.endTime }}</span>
</div>
<div v-if="detailData.testPlan && detailData.testPlan.testDevice" class="info-row">
<span class="info-label">测试设备</span>
<span class="info-value">{{ detailData.testPlan.testDevice }}</span>
</div>
</div>
<div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
<h3 class="card-title">执行步骤</h3>
<div class="steps-container">
<div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
<div class="step-number">{{ node.code || index + 1 }}</div>
<div class="step-info">
<div class="step-name">{{ node.name || '未命名步骤' }}</div>
<div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
<div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
<div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
</div>
<div v-if="detailData.testFinal || detailData.failReason" class="detail-card">
<h3 class="card-title">执行结果</h3>
<div v-if="detailData.testFinal" class="info-row">
<span class="info-label">测试结果</span>
<span class="info-value">{{ detailData.testFinal }}</span>
</div>
<div v-if="detailData.failReason" class="info-row">
<span class="info-label">失败原因</span>
<span class="info-value fail-reason">{{ detailData.failReason }}</span>
</div>
</div>
</div>
<div v-else class="loading-details">
<p>加载中...</p>
</div>
<template #footer>
<el-button @click="detailDialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</div>
</template>
@ -248,11 +353,11 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/shiyan/renwu';
// 1. 选项卡状态管理
const activeTab = ref('record'); // 默认显示"试验记录"
const showFilter = ref(false);
// 2. 筛选条件
const filterStatus = ref('all');
@ -277,7 +382,11 @@ const statData = ref({
completed: 0,
passRate: 0,
pendingAnalysis: 0,
avgDuration: '0分钟'
avgDuration: '0分钟',
// 新增：增长率相关数据
completedGrowth: 0,
passRateGrowth: 0,
avgDurationGrowth: 0
});
// 6. 分页相关
@ -310,7 +419,8 @@ const getStatisticsData = async () => {
const response = await syrenwujilu({ projectId: 1 });
console.log('syrenwujilu API响应:', response);
if (response && response.data) {
// 确保接口返回成功状态码(code=200)且有数据
if (response && response.code === 200 && response.data) {
// 映射API返回的数据到statData
const apiData = response.data;
@ -319,11 +429,21 @@ const getStatisticsData = async () => {
statData.value.pendingAnalysis = parseInt(apiData.failCount) || 0;
// 格式化平均试验时长
const avgTime = parseInt(apiData.averageTestTime) || 0;
const avgTime = parseFloat(apiData.averageTestTime) || 0;
statData.value.avgDuration = `${avgTime}分钟`;
// 处理增长率数据
statData.value.completedGrowth = parseInt(apiData.finishCountAdd) || 0;
statData.value.passRateGrowth = parseFloat(apiData.passValueAdd) || 0;
statData.value.avgDurationGrowth = parseFloat(apiData.averageTestTimeAdd) || 0;
} else {
console.warn('获取统计数据失败或返回格式不正确:', response);
// 可以在这里添加错误提示或默认值处理
ElMessage.warning('获取统计数据失败，请稍后重试');
}
} catch (error) {
console.error('获取统计数据失败:', error);
console.error('获取统计数据异常:', error);
ElMessage.error('获取统计数据异常，请稍后重试');
}
};
@ -339,15 +459,13 @@ const formatDate = (dateString) => {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
// 11. 辅助方法：格式化时长（假设单位为分钟）
const formatDuration = (minutes) => {
if (minutes < 60) {
return `${minutes}分钟`;
} else {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return `${hours}小时${mins}分钟`;
}
// 11. 辅助方法：格式化日期时间
const formatDateTime = (dateTimeString) => {
if (!dateTimeString) return '未知时间';
const date = new Date(dateTimeString);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(
date.getHours()
).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};
// 12. 辅助方法：获取节点状态类名
@ -392,15 +510,19 @@ const getProgressColor = (status) => {
// 15. 辅助方法：获取状态文本
const getStatusText = (status) => {
const statusMap = {
'1': '进行中',
'completed': '通过',
'1': '待执行',
'4': '执行中',
'2': '已延期',
'5': '已完成',
'3': '失败',
'completed': '已完成',
'failed': '失败',
'paused': '已暂停',
'drafted': '草稿',
'in-progress': '进行中',
'normal': '正常',
'attention': '需关注',
'problem': '有问题'
'paused': '已延期',
'drafted': '待执行',
'in-progress': '执行中',
'normal': '已完成',
'attention': '执行中',
'problem': '失败'
};
return statusMap[status] || '未知状态';
};
@ -408,10 +530,15 @@ const getStatusText = (status) => {
// 16. 辅助方法：获取任务状态文本
const getTaskStatusText = (status) => {
const statusMap = {
'pending': '待接受',
'accepted': '进行中',
'pending': '待执行',
'accepted': '执行中',
'completed': '已完成',
'rejected': '已拒绝'
'rejected': '已拒绝',
'1': '待执行',
'4': '执行中',
'2': '已延期',
'5': '已完成',
'3': '失败'
};
return statusMap[status] || '未知状态';
};
@ -419,18 +546,22 @@ const getTaskStatusText = (status) => {
// 17. 辅助方法：获取状态类名
const getStatusClass = (status) => {
const classMap = {
'1': 'status-in-progress',
'completed': 'status-passed',
'1': 'tag-pending', // 待执行
'4': 'tag-executing', // 执行中
'2': 'tag-delayed', // 已延期
'5': 'tag-completed', // 已完成
'3': 'status-failed', // 失败
'completed': 'tag-completed',
'failed': 'status-failed',
'paused': 'status-paused',
'pending': 'status-pending',
'accepted': 'status-accepted',
'rejected': 'status-rejected',
'normal': 'status-normal',
'attention': 'status-attention',
'problem': 'status-problem'
'paused': 'tag-delayed',
'pending': 'tag-pending',
'accepted': 'tag-pending',
'rejected': 'status-failed',
'normal': 'tag-completed',
'attention': 'tag-executing',
'problem': 'status-failed'
};
return classMap[status] || 'status-pending';
return classMap[status] || 'tag-pending';
};
// 18. 分页事件处理
@ -480,10 +611,46 @@ const handleInspectionManagement3 = () => {
router.push('/rili/shiyanjilu');
};
// 20. 组件挂载时获取数据
onMounted(() => {
getStatisticsData();
getTestRecords();
// 20. 详情弹窗相关
const detailDialogVisible = ref(false);
const detailData = ref(null);
const isDetailLoading = ref(false);
// 22. 处理查看详情
const handleViewDetail = async (row) => {
try {
if (!row || !row.id) {
ElMessage.error('记录ID不存在，无法查看详情');
return;
}
isDetailLoading.value = true;
const response = await syrenwuDetail(row.id);
if (response && response.code === 200) {
detailData.value = response.data;
detailDialogVisible.value = true;
} else {
ElMessage.error(response?.msg || '获取任务详情失败');
}
} catch (error) {
console.error('查看详情失败:', error);
ElMessage.error('获取任务详情失败');
} finally {
isDetailLoading.value = false;
}
};
// 24. 组件挂载时获取数据 - 确保页面进入时立即调用接口
onMounted(async () => {
// 直接并立即调用数据接口，确保页面加载时能获取到最新数据
try {
// 并行调用两个数据接口以提高加载速度
await Promise.all([getStatisticsData(), getTestRecords()]);
} catch (error) {
console.error('数据加载失败:', error);
ElMessage.error('数据加载失败，请刷新页面重试');
}
});
</script>
@ -497,35 +664,40 @@ onMounted(() => {
min-height: 100vh;
}
/* 2. 顶部导航选项卡 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
overflow: hidden;
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.2s;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #6b7280;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
border-right: 1px solid #f0f0f0;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover:not(.active) {
background-color: #f3f4f6;
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #165dff;
background-color: #409eff;
color: #fff;
font-weight: 500;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
/* 3. 选项卡样式 */
@ -570,24 +742,10 @@ onMounted(() => {
align-items: center;
flex-wrap: wrap;
}
.action-buttons {
display: flex;
gap: 12px;
}
.el-select,
.date-picker {
width: 160px;
}
.search-btn,
.export-btn {
background-color: #165dff;
border-color: #165dff;
}
.filter-btn {
background-color: #f3f4f6;
color: #6b7280;
border-color: #e5e7eb;
}
/* 6. 表格容器 */
.table-container {
@ -623,57 +781,58 @@ onMounted(() => {
/* 8. 状态标签样式 */
.status-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
border: 1px solid transparent;
}
.status-drafted {
background-color: #e0efff;
color: #165dff;
/* 与试验任务页面相同的标签样式 */
.tag-pending {
background-color: #e6f7ff;
color: #1677ff;
border-color: #91d5ff;
}
.tag-delayed {
background-color: #fff2f0;
color: #ff4d4f;
border-color: #ffccc7;
}
.tag-executing {
background-color: #fffbe6;
color: #fa8c16;
border-color: #ffe58f;
}
.tag-completed {
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
}
/* 保留原有的部分样式以确保兼容性 */
.status-in-progress {
background-color: #e0f2fe;
color: #0284c7;
background-color: #fffbe6;
color: #fa8c16;
border-color: #ffe58f;
}
.status-completed {
background-color: #e6ffed;
color: #00b42a;
}
.status-paused {
background-color: #f2f3f5;
color: #86909c;
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
}
.status-pending {
background-color: #f9fafb;
color: #6b7280;
}
.status-accepted {
background-color: #eff6ff;
color: #2563eb;
}
.status-rejected {
background-color: #fee2e2;
color: #dc2626;
}
.status-normal {
background-color: #e6ffed;
color: #00b42a;
}
.status-attention {
background-color: #fff7e0;
color: #ff7d00;
}
.status-problem {
background-color: #fff2f0;
color: #f5222d;
}
.status-passed {
background-color: #e6ffed;
color: #00b42a;
background-color: #e6f7ff;
color: #1677ff;
border-color: #91d5ff;
}
.status-failed {
background-color: #fee2e2;
color: #dc2626;
background-color: #fff2f0;
color: #ff4d4f;
border-color: #ffccc7;
}
/* 9. 操作按钮样式 */
@ -691,30 +850,6 @@ onMounted(() => {
background: none;
transition: all 0.2s;
}
.edit-btn {
color: #165dff;
}
.edit-btn:hover {
background-color: #e8f3ff;
}
.execute-btn {
color: #00b42a;
}
.execute-btn:hover {
background-color: #e6ffed;
}
.pause-btn {
color: #ff7d00;
}
.pause-btn:hover {
background-color: #fff7e0;
}
.resume-btn {
color: #722ed1;
}
.resume-btn:hover {
background-color: #f3e8ff;
}
.view-btn {
color: #165dff;
}
@ -911,12 +1046,6 @@ onMounted(() => {
margin-bottom: 8px;
}
.step-name {
font-size: 12px;
color: #6b7280;
text-align: center;
}
.progress-line {
flex: 1;
height: 2px;