0928
This commit is contained in:
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user