This commit is contained in:
dhr
2025-09-28 17:23:00 +08:00
parent 3f07f7afe3
commit 4a31c7d028
2 changed files with 382 additions and 88 deletions

View File

@ -64,16 +64,40 @@
<p class="stat-label">本月完成试验</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
class="stat-change"
:class="{
'green': statData.completedGrowth > 0,
'gray': Math.abs(statData.completedGrowth - 100) < 0.01,
'red': statData.completedGrowth < 0
}"
>
较上月
{{
Math.abs(statData.completedGrowth - 100) < 0.01
? '无增长'
: (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" :class="statData.passRateGrowth >= 0 ? 'up' : 'down'">
较上月 {{ statData.passRateGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.passRateGrowth) }}%
{{ statData.passRate }}%<span
class="stat-change"
:class="{
'green': statData.passRateGrowth > 0,
'gray': Math.abs(statData.passRateGrowth - 100) < 0.01,
'red': statData.passRateGrowth < 0
}"
>
较上月
{{
Math.abs(statData.passRateGrowth - 100) < 0.01
? '无增长'
: (statData.passRateGrowth >= 0 ? '↑' : '↓') + Math.abs(statData.passRateGrowth) + '%'
}}
</span>
</p>
</div>
@ -85,8 +109,20 @@
<p class="stat-label">平均试验时长</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
class="stat-change"
:class="{
'green': statData.avgDurationGrowth > 100, // 数据大于100上升时显示绿色
'gray': Math.abs(statData.avgDurationGrowth - 100) < 0.01,
'red': statData.avgDurationGrowth < 100 // 数据小于100下降时显示红色
}"
>
较上月
{{
Math.abs(statData.avgDurationGrowth - 100) < 0.01
? '无增长'
: (statData.avgDurationGrowth <= 0 ? '↓' : '↑') + Math.abs(statData.avgDurationGrowth) + '%'
}}
</span>
</p>
</div>
@ -134,11 +170,11 @@
<!-- 试验结果 -->
<div class="test-result" :class="{ 'failure-analysis': record.status === 'failed' }">
<h4 class="result-title">
{{ record.status === 'failed' ? '失败原因分析' : '试验结果' }}
{{ record.status === '3' ? '失败原因分析' : '试验结果' }}
</h4>
<p class="result-content">
{{ record.status === 'failed' ? record.failReason || '未提供失败原因' : record.testFinal || '试验完成,未提供详细结果' }}
{{ record.status === '3' ? record.failReason || '未提供失败原因' : record.testFinal || '试验完成,未提供详细结果' }}
</p>
<p class="result-details" v-if="record.status !== 'failed'">
@ -435,6 +471,9 @@ const getStatisticsData = async () => {
// 处理增长率数据
statData.value.completedGrowth = parseInt(apiData.finishCountAdd) || 0;
statData.value.passRateGrowth = parseFloat(apiData.passValueAdd) || 0;
// 对于平均试验时长,时长减少是好的,所以我们需要反转逻辑
// 这里直接使用从API获取的增长率值但在显示时根据正负来判断样式
statData.value.avgDurationGrowth = parseFloat(apiData.averageTestTimeAdd) || 0;
} else {
console.warn('获取统计数据失败或返回格式不正确:', response);
@ -470,8 +509,14 @@ const formatDateTime = (dateTimeString) => {
// 12. 辅助方法:获取节点状态类名
const getNodeStatusClass = (nodeStatus, recordStatus) => {
// 节点状态: 2-未完成, 其他假设为已完成
// 节点状态: 2-未完成, 3-失败, 其他假设为已完成
// 记录状态: 'failed'-失败, 'completed'-完成, 其他为进行中
// 如果节点本身状态为3失败直接返回failed类名
if (nodeStatus === '3') {
return 'failed';
}
if (recordStatus === 'failed') {
// 如果记录失败,找到失败阶段的节点
return nodeStatus === '2' ? 'failed' : 'active';
@ -486,6 +531,12 @@ const getNodeStatusClass = (nodeStatus, recordStatus) => {
// 13. 辅助方法:获取进度线状态类名
const getLineStatusClass = (index, nodes, recordStatus) => {
// 如果记录失败找到第一个未完成的节点前的线为active
// 检查当前节点状态是否为3失败
if (nodes[index].status === '3') {
return 'failed';
}
if (recordStatus === 'failed') {
return nodes[index].status !== '2' ? 'active' : 'failed';
} else if (recordStatus === 'completed') {
@ -962,6 +1013,21 @@ onMounted(async () => {
color: #ff7d00;
}
.stat-change.green {
background-color: #e6ffed;
color: #00b42a;
}
.stat-change.red {
background-color: #fff1f0;
color: #f5222d;
}
.stat-change.gray {
background-color: #f5f5f5;
color: #999;
}
/* 13. 试验记录样式 */
.test-records {
display: flex;
@ -1053,17 +1119,17 @@ onMounted(async () => {
}
.progress-step.active .step-number {
background-color: #165dff;
background-color: #00b42a;
color: white;
}
.progress-step.active .step-name {
color: #165dff;
color: #00b42a;
font-weight: 500;
}
.progress-line.active {
background-color: #165dff;
background-color: #00b42a;
}
.progress-step.failed .step-number {