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

449
src/views/zhinengxunjian/shiyanguanli.vue
View File

@ -2,7 +2,7 @@
<div>
<div class="operation-inspection">
<!-- 1. 顶部导航选项卡（对应原试验系统的外层导航） -->
<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,7 +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> -->
<!-- 选项卡和按钮组合 -->
<div class="tabs-wrapper">
@ -67,13 +67,7 @@
<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 align="center" prop="status" label="状态" width="100">
<template #default="scope">
<span :class="['status-tag', `status-${scope.row.status}`]">
@ -374,10 +368,10 @@
</el-form-item>
<el-form-item label="实验对象类型" class="form-item">
<el-select v-model="formData.testObject" placeholder="请选择实验对象类型" class="form-input">
<el-option label="1安全试验" value="1" />
<el-option label="2网络实验" value="2" />
<el-option label="3性能试验" value="3" />
<el-option label="4" value="4" />
<el-option label="安全试验" value="1" />
<el-option label="网络实验" value="2" />
<el-option label="性能试验" value="3" />
<el-option label="其他试验" value="4" />
</el-select>
</el-form-item>
</div>
@ -418,36 +412,6 @@
</el-select>
</el-form-item>
<!-- 试验步骤 -->
<el-form-item label="试验步骤" class="form-item" style="width: 100%">
<div class="steps-container">
<div class="step-item" v-for="(step, index) in formData.steps" :key="index">
<div class="step-number">{{ index + 1 }}</div>
<el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
<el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
<el-date-picker
v-model="step.intendedTime"
type="datetime"
placeholder="选择计划时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
style="width: 180px; margin-right: 10px"
/>
<el-button
v-if="formData.steps.length > 1"
type="text"
size="small"
class="delete-step-btn"
@click="deleteStep(index)"
style="color: #f56c6c"
>
删除
</el-button>
</div>
<el-button type="text" size="small" class="add-step-btn" @click="addStep">添加步骤</el-button>
</div>
</el-form-item>
<!-- 所需设备与准备 -->
<el-form-item label="所需资源与设备" class="form-item" style="width: 100%">
<div class="equipment-list">
@ -490,119 +454,113 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
class="custom-experiment-dialog"
center
>
<div class="detail-content">
<!-- 基础信息 -->
<div class="detail-section">
<h3 class="section-title">基础信息</h3>
<div class="detail-grid">
<div class="detail-item">
<label class="detail-label">计划名称:</label>
<span class="detail-value">{{ detailData.planName || '-' }}</span>
<div v-if="detailData" class="task-detail-container">
<!-- 基础信息卡片 -->
<div class="detail-card">
<h3 class="card-title">基础信息</h3>
<div class="card-content">
<div class="info-row">
<div class="info-item">
<label class="info-label">计划名称:</label>
<span class="info-value">{{ detailData.planName || '-' }}</span>
</div>
<div class="info-item">
<label class="info-label">计划编号:</label>
<span class="info-value">{{ detailData.planCode || '-' }}</span>
</div>
</div>
<div class="detail-item">
<label class="detail-label">计划编号:</label>
<span class="detail-value">{{ detailData.planCode || '-' }}</span>
<div class="info-row">
<div class="info-item">
<label class="info-label">实验对象:</label>
<span class="info-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
</div>
<div class="info-item">
<label class="info-label">负责人:</label>
<span class="info-value">{{ detailData.person?.userName || '-' }}</span>
</div>
</div>
<div class="detail-item">
<label class="detail-label">实验对象:</label>
<span class="detail-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
</div>
<div class="detail-item">
<label class="detail-label">负责人:</label>
<span class="detail-value">{{ detailData.person?.userName || '-' }}</span>
</div>
<div class="detail-item">
<label class="detail-label">开始时间:</label>
<span class="detail-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
</div>
<div class="detail-item">
<label class="detail-label">结束时间:</label>
<span class="detail-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
<div class="info-row">
<div class="info-item">
<label class="info-label">开始时间:</label>
<span class="info-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
</div>
<div class="info-item">
<label class="info-label">结束时间:</label>
<span class="info-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
</div>
</div>
</div>
</div>
<!-- 实验设备 -->
<div v-if="detailData.testDevice" class="detail-section">
<h3 class="section-title">实验设备</h3>
<div class="device-list">
<span v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="device-tag">
{{ device.trim() }}
</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)">
{{ getStepStatusText(node.status) }}
</div>
</div>
</div>
</div>
<!-- 兼容旧格式：如果没有nodes数据但有testStep字符串 -->
<div v-else-if="detailData.testStep" class="detail-section">
<h3 class="section-title">执行步骤</h3>
<div class="steps-container">
<div v-for="(step, index) in detailData.testStep.split(',')" :key="index" class="step-item">
<div class="step-number">{{ index + 1 }}</div>
<div class="step-content">{{ step.trim() }}</div>
<div v-if="detailData.testDevice" class="detail-card">
<h3 class="card-title">实验设备</h3>
<div class="card-content">
<div v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="info-item">
<label class="info-label">设备{{ index + 1 }}:</label>
<span class="info-value">{{ device.trim() }}</span>
</div>
</div>
</div>
<!-- 实验信息 -->
<div class="detail-section">
<h3 class="section-title">实验信息</h3>
<div class="detail-textarea">
<label class="detail-label">实验说明:</label>
<div class="detail-text">{{ detailData.testInfo || '-' }}</div>
</div>
<div class="detail-textarea">
<label class="detail-label">实验设置:</label>
<div class="detail-text">{{ detailData.testSetting || '-' }}</div>
</div>
<div class="detail-textarea">
<label class="detail-label">解决方案:</label>
<div class="detail-text">{{ detailData.testSolutions || '-' }}</div>
<div class="detail-card">
<h3 class="card-title">实验信息</h3>
<div class="card-content">
<div class="info-item full-width">
<label class="info-label">实验说明:</label>
<div class="info-value">{{ detailData.testInfo || '-' }}</div>
</div>
<div class="info-item full-width">
<label class="info-label">实验设置:</label>
<div class="info-value">{{ detailData.testSetting || '-' }}</div>
</div>
<div class="info-item full-width">
<label class="info-label">解决方案:</label>
<div class="info-value">{{ detailData.testSolutions || '-' }}</div>
</div>
</div>
</div>
<!-- 参与人员 -->
<div v-if="detailData.persons && detailData.persons.length > 0" class="detail-section">
<h3 class="section-title">参与人员</h3>
<div class="participant-list">
<div v-for="(person, index) in detailData.persons" :key="person.id" class="participant-item">
<span class="participant-name">{{ person.userName }}</span>
<span class="participant-team">{{ person.teamName }}</span>
<div v-if="detailData.persons && detailData.persons.length > 0" class="detail-card">
<h3 class="card-title">参与人员</h3>
<div class="card-content">
<div v-for="(person, index) in detailData.persons" :key="person.id" class="info-row">
<div class="info-item">
<label class="info-label">姓名:</label>
<span class="info-value">{{ person.userName }}</span>
</div>
<div class="info-item">
<label class="info-label">团队:</label>
<span class="info-value">{{ person.teamName }}</span>
</div>
</div>
</div>
</div>
<!-- 巡检项目 -->
<div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-section">
<h3 class="section-title">巡检项目</h3>
<div class="inspection-list">
<div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="inspection-item">
<span class="inspection-name">{{ item.name }}</span>
<span class="inspection-type">{{ item.type }}</span>
<div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-card">
<h3 class="card-title">巡检项目</h3>
<div class="card-content">
<div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="info-row">
<div class="info-item">
<label class="info-label">项目名称:</label>
<span class="info-value">{{ item.name }}</span>
</div>
<div class="info-item">
<label class="info-label">项目类型:</label>
<span class="info-value">{{ item.type }}</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="loading-details">
<el-skeleton :count="6" :columns="2" />
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showDetailDialog = false">关闭</el-button>
@ -618,7 +576,6 @@ import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { shiyanDetail, shiyanlist, addshiyan, updateshiyan } from '@/api/zhinengxunjian/shiyan/index';
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
import { addjiedian, updatejiedian } from '@/api/zhinengxunjian/jiedian/index';
// 1. 选项卡状态管理
const activeTab = ref('plan'); // 默认为"巡检计划"
const timeRange = ref('month'); // 统计时间范围：月/周/日
@ -952,10 +909,6 @@ const handleSave = async () => {
personIds: formData.value.participants.join(','),
inspectionItems: '',
testSolutions: formData.value.riskMitigation,
testStep: formData.value.steps
.filter((step) => step.name.trim() || step.intendedPurpose.trim())
.map((step) => `${step.name || ''}: ${step.intendedPurpose || ''}`)
.join(','),
testDevice: formData.value.equipments
.filter((equip) => equip.selected)
.map((equip) => equip.name)
@ -965,83 +918,15 @@ const handleSave = async () => {
id: editRecordId.value // 若后端用planId等，需改为对应字段名
};
// 4. 处理步骤数据并调用接口
// 调用接口
let response;
// 处理步骤数据格式
const stepsData = formData.value.steps
.filter((step) => step.name.trim() || step.intendedPurpose.trim())
.map((step, index) => ({
createTime: new Date().toISOString(),
updateTime: new Date().toISOString(),
params: {},
module: 3,
code: index + 1,
name: step.name,
intendedPurpose: step.intendedPurpose,
intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
finishTime: '',
remark: '',
status: 2
}));
// 获取nodeIds
let nodeIds = '';
if (editRecordId.value) {
// 编辑模式：获取试验详情，以获取原始步骤的id
const detailResponse = await shiyanDetail(editRecordId.value);
if (detailResponse.code !== 200) {
ElMessage.error('获取试验详情失败');
return;
}
const experimentDetail = detailResponse.data.rows?.[0] || detailResponse.data;
// 兼容两种数据结构：可能在rows数组中，也可能直接在data中
if (experimentDetail.nodes && Array.isArray(experimentDetail.nodes)) {
// 按code排序原始nodes数组
const sortedNodes = [...experimentDetail.nodes].sort((a, b) => (a.code || 0) - (b.code || 0));
// 为新的步骤数据添加id
const updatedSteps = stepsData.map((step, index) => ({
...step,
id: sortedNodes[index]?.id || 0 // 使用原始步骤的id，如果不存在则使用0
}));
// 调用updatejiedian接口更新步骤，直接传递数组
const updateResponse = await updatejiedian(updatedSteps);
if (updateResponse.code !== 200) {
ElMessage.error('更新步骤失败');
return;
}
// 使用原始的nodeIds，避免重新创建步骤
nodeIds = experimentDetail.nodeIds;
}
// 编辑模式：调用更新接口
response = await updateshiyan(requestData);
} else {
// 新增模式：调用addjiedian接口创建步骤
const jiedianResponse = await addjiedian(stepsData);
if (jiedianResponse.code !== 200) {
ElMessage.error('创建步骤失败');
return;
}
// 获取返回的ids，实际返回格式中msg字段包含ids字符串
if (jiedianResponse.code === 200 && jiedianResponse.msg) {
nodeIds = jiedianResponse.msg;
} else {
ElMessage.warning('未获取到有效的步骤ID');
return;
}
// 新增模式：调用添加接口（删除请求参数中的id，避免后端报错）
const { id, ...addData } = requestData;
// 添加nodeIds字段
addData.nodeIds = nodeIds;
response = await addshiyan(addData);
}
@ -1072,11 +957,6 @@ const resetForm = () => {
envRequirements: '', // 环境要求为空
manager: '', // 负责人为空
participants: [], // 参与人员为空数组
steps: [
{ name: '', intendedPurpose: '', intendedTime: '' },
{ name: '', intendedPurpose: '', intendedTime: '' },
{ name: '', intendedPurpose: '', intendedTime: '' }
], // 步骤内容为空
equipments: [
{ name: '服务器(型号:XYZ-9000)', selected: false },
{ name: '网络测试仪(型号:NT-5000)', selected: false },
@ -1152,45 +1032,6 @@ const handleEditRecord = async (row) => {
const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
// 兼容两种数据结构：可能在rows数组中，也可能直接在data中
// 3. 处理步骤数据：优先从nodes数组中提取
const steps = [];
// 如果有nodes数组，优先从nodes中提取步骤数据
if (recordDetail.nodes && Array.isArray(recordDetail.nodes)) {
// 复制nodes数组并按code升序排序
const sortedNodes = [...recordDetail.nodes].sort((a, b) => (a.code || 0) - (b.code || 0));
// 转换为所需的格式
sortedNodes.forEach((node) => {
if ((node.name && node.name.trim()) || (node.intendedPurpose && node.intendedPurpose.trim())) {
steps.push({
name: node.name || '',
intendedPurpose: node.intendedPurpose || '',
intendedTime: node.intendedTime || ''
});
}
});
}
// 如果nodes中没有数据，回退到从testStep字符串解析
else if (recordDetail.testStep) {
// 拆分字符串
const stepItems = recordDetail.testStep.split(',');
stepItems.forEach((stepText) => {
// 移除序号前缀（如"1. "），只保留内容
const content = stepText.replace(/^\d+\.\s*/, '').trim();
if (content) {
// 对于旧格式数据，我们将内容放入intendedPurpose字段
steps.push({
name: `步骤${steps.length + 1}`,
intendedPurpose: content,
intendedTime: ''
});
}
});
}
// 确保至少有3个步骤（如果解析后为空）
while (steps.length < 3) {
steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
}
// 4. 处理testDevice：将逗号分隔的字符串转换为设备数组
const equipments = [];
if (recordDetail.testDevice) {
@ -1236,7 +1077,6 @@ const handleEditRecord = async (row) => {
envRequirements: recordDetail.envRequirements || recordDetail.testSetting || '',
manager: recordDetail.manager || recordDetail.personCharge || '',
participants: participants, // 从personIds解析的数组
steps: steps, // 解析后的步骤数组
equipments: equipments, // 解析并合并后的设备数组
riskMitigation: recordDetail.riskMitigation || recordDetail.testSolutions || ''
};
@ -1375,53 +1215,23 @@ const formatDate = (dateString) => {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 根据步骤状态获取对应的样式类
const getStatusClass = (status) => {
// 处理可能的数字输入
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending',
'2': 'status-running',
'3': 'status-completed',
'4': 'status-delayed',
'5': 'status-failed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
// 格式化日期时间（用于步骤条）
const formatDateTime = (dateTime) => {
if (!dateTime) return '-';
try {
const date = new Date(dateTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
} catch (error) {
return dateTime;
}
};
// 获取步骤状态文本
const getStepStatusText = (status) => {
const statusStr = status?.toString() || '';
const statusMap = {
'1': '待执行',
'2': '执行中',
'3': '已完成',
'4': '已延期',
'5': '失败'
};
return statusMap[statusStr] || '未知状态';
// 日期时间格式化函数
const formatDateTime = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>
<style scoped>
@import url('./css/step-bars.css');
@import url('./css/detail-dialog.css');
.operation-inspection {
padding: 20px;
background-color: #f9fbfd;
@ -2095,53 +1905,6 @@ const getStepStatusText = (status) => {
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}
/* 试验步骤样式 */
.steps-container {
border: 1px solid #e4e7ed;
border-radius: 8px;
padding: 16px;
width: 100%;
}
.step-item {
display: flex;
align-items: center;
margin-bottom: 16px;
width: 100%;
}
.step-item:last-child {
margin-bottom: 0;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #165dff;
color: white;
font-size: 16px;
font-weight: 600;
margin-right: 16px;
flex-shrink: 0;
}
.step-input:focus {
border-color: #165dff;
outline: none;
}
.add-step-btn {
color: #165dff;
margin-top: 12px;
width: 100%;
text-align: center;
font-size: 14px;
}
/* 设备列表样式 */
.equipment-list {
border: 1px solid #e4e7ed;
@ -2200,7 +1963,7 @@ const getStepStatusText = (status) => {
border-color: #0d47a1;
}
/* 响应式设计 */
/* 响应式设计 - 保留必要的覆盖样式 */
@media (max-width: 768px) {
.custom-experiment-dialog {
width: 90% !important;
@ -2220,5 +1983,13 @@ const getStepStatusText = (status) => {
.new-equipment-input {
width: 100%;
}
.info-row {
flex-direction: column;
}
.info-item {
min-width: 100%;
}
}
</style>