0925
This commit is contained in:
@ -312,43 +312,101 @@
|
||||
v-model="detailDialogVisible"
|
||||
title="巡检计划详情"
|
||||
width="800px"
|
||||
class="detail-dialog"
|
||||
center
|
||||
:show-close="true"
|
||||
custom-class="beautified-detail-dialog"
|
||||
:before-close="handleCloseDetailDialog"
|
||||
class="custom-experiment-dialog"
|
||||
>
|
||||
<div class="detail-content">
|
||||
<div class="detail-header">
|
||||
<h3 class="detail-title">{{ detailData.planName || '巡检计划' }}</h3>
|
||||
<el-tag :type="detailData.status === '1' ? 'success' : 'info'" class="detail-status-tag">
|
||||
{{ detailData.status === '1' ? '启用' : detailData.status === '2' ? '停用' : '-' }}
|
||||
</el-tag>
|
||||
<div 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">
|
||||
<span class="info-label">计划名称：</span>
|
||||
<span class="info-value">{{ detailData.planName || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">状态：</span>
|
||||
<span class="info-value task-status">
|
||||
<el-tag :type="detailData.status === '1' ? 'success' : 'info'">
|
||||
{{ detailData.status === '1' ? '启用' : detailData.status === '2' ? '停用' : '-' }}
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">计划类型：</span>
|
||||
<span class="info-value">{{ getPlanTypeText(detailData.planType) || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">巡检对象：</span>
|
||||
<span class="info-value">{{ getObjectTypeText(detailData.objectType) || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">巡检频率：</span>
|
||||
<span class="info-value">{{ detailData.inspectionFrequency || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">负责人：</span>
|
||||
<span class="info-value">{{ detailData.nickName || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">开始日期：</span>
|
||||
<span class="info-value">{{ formatDate(detailData.beginTime) || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">结束日期：</span>
|
||||
<span class="info-value">{{ formatDate(detailData.endTime) || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">计划开始时间：</span>
|
||||
<span class="info-value">{{ detailData.planBeginTime || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">持续时间：</span>
|
||||
<span class="info-value">{{ detailData.duration || '-' }}分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">巡检项：</span>
|
||||
<div class="info-value">
|
||||
<span v-for="(item, index) in detailData.itemVoList" :key="item.id" class="inspection-item-tag">
|
||||
{{ item.name }}
|
||||
<span v-if="index < detailData.itemVoList.length - 1" class="item-separator">、</span>
|
||||
</span>
|
||||
<span v-if="!detailData.itemVoList || detailData.itemVoList.length === 0">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">电站ID：</span>
|
||||
<span class="info-value">{{ detailData.projectId || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-main">
|
||||
<el-descriptions :column="{ xs: 1, sm: 1, md: 2, lg: 2 }" class="detail-descriptions" border>
|
||||
<el-descriptions-item label="计划类型" class="detail-item">{{ getPlanTypeText(detailData.planType) || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="巡检对象" class="detail-item">{{ getObjectTypeText(detailData.objectType) || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="巡检频率" class="detail-item">{{ detailData.inspectionFrequency || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="负责人" class="detail-item">{{ detailData.nickName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开始日期" class="detail-item">{{ formatDate(detailData.beginTime) || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束日期" class="detail-item">{{ formatDate(detailData.endTime) || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="计划开始时间" class="detail-item">{{ detailData.planBeginTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="持续时间" class="detail-item">{{ detailData.duration || '-' }}分钟</el-descriptions-item>
|
||||
<el-descriptions-item label="巡检项ID" class="detail-item">{{ detailData.inspectionItemId || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电站ID" class="detail-item">{{ detailData.projectId || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div v-if="detailData.remark" class="detail-remark">
|
||||
<h4 class="remark-title">备注信息</h4>
|
||||
<p class="remark-content">{{ detailData.remark }}</p>
|
||||
<!-- 备注信息 -->
|
||||
<div v-if="detailData.remark" class="detail-card">
|
||||
<h3 class="card-title">备注信息</h3>
|
||||
<div class="card-content">
|
||||
<div class="description-content">
|
||||
{{ detailData.remark }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closeDetailDialog" class="close-btn">关闭</el-button>
|
||||
<el-button @click="closeDetailDialog">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -980,6 +1038,8 @@ const handleInspectionManagement3 = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('./css/detail-dialog.css');
|
||||
@import url('./css/step-bars.css');
|
||||
.operation-inspection {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
@ -1123,47 +1183,127 @@ const handleInspectionManagement3 = () => {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.detail-dialog .el-dialog__body {
|
||||
/* 弹窗样式 */
|
||||
.create-plan-dialog .el-dialog__body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 详情弹窗样式 - 与工单列表页面保持一致 */
|
||||
.custom-experiment-dialog .el-dialog__body {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.task-detail-container {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 详情卡片样式 */
|
||||
.detail-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
}
|
||||
|
||||
.detail-status-tag {
|
||||
padding: 4px 12px;
|
||||
.card-content {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* 信息行和信息项样式 */
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 50%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 500;
|
||||
color: #86909c;
|
||||
margin-right: 8px;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #4e5969;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-descriptions {
|
||||
margin-bottom: 20px;
|
||||
/* 骨架屏样式 */
|
||||
.skeleton-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-item .el-descriptions__label {
|
||||
.skeleton-card {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.skeleton-header {
|
||||
height: 20px;
|
||||
width: 30%;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 优先级标签样式 */
|
||||
.task-status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.remark-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
.description-content {
|
||||
padding: 12px;
|
||||
background-color: #f5f7fa;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
line-height: 1.6;
|
||||
color: #4e5969;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user