<template>
|
<div class="mes-log-statistics">
|
<el-row :gutter="16">
|
<el-col :span="6">
|
<el-card shadow="hover" class="stat-card stat-primary">
|
<div class="stat-content">
|
<div class="stat-label">总调用次数</div>
|
<div class="stat-value">{{ statistics.totalCount }}</div>
|
<div class="stat-unit">次</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card shadow="hover" class="stat-card" :class="statistics.successRate >= 90 ? 'stat-success' : 'stat-warning'">
|
<div class="stat-content">
|
<div class="stat-label">成功率</div>
|
<div class="stat-value">{{ statistics.successRate }}%</div>
|
<div class="stat-sub">
|
成功: {{ statistics.successCount }} / 失败: {{ statistics.failedCount }}
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card shadow="hover" class="stat-card stat-info">
|
<div class="stat-content">
|
<div class="stat-label">平均耗时</div>
|
<div class="stat-value">{{ Math.round(statistics.avgElapsedMs) }}</div>
|
<div class="stat-unit">ms</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card shadow="hover" class="stat-card stat-secondary">
|
<div class="stat-content">
|
<div class="stat-label">今日调用</div>
|
<div class="stat-value">{{ statistics.todayCount }}</div>
|
<div class="stat-unit">次</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { ref, onMounted } from "vue";
|
import http from "@/api/http.js";
|
|
export default {
|
name: "MesLogStatistics",
|
emits: ["refresh"],
|
setup(props, { emit }) {
|
const statistics = ref({
|
totalCount: 0,
|
successCount: 0,
|
failedCount: 0,
|
successRate: 0,
|
avgElapsedMs: 0,
|
todayCount: 0
|
});
|
|
const fetchStatistics = async () => {
|
try {
|
const res = await http.get("/api/MesLog/statistics");
|
if (res.status) {
|
statistics.value = res.data;
|
emit("refresh");
|
}
|
} catch (error) {
|
console.error("获取统计数据失败:", error);
|
}
|
};
|
|
onMounted(() => {
|
fetchStatistics();
|
});
|
|
return {
|
statistics,
|
fetchStatistics
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.mes-log-statistics {
|
margin-bottom: 16px;
|
}
|
|
.stat-card {
|
text-align: center;
|
}
|
|
.stat-content {
|
padding: 8px 0;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #909399;
|
margin-bottom: 8px;
|
}
|
|
.stat-value {
|
font-size: 28px;
|
font-weight: bold;
|
margin-bottom: 4px;
|
}
|
|
.stat-unit {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.stat-sub {
|
font-size: 12px;
|
color: #606266;
|
margin-top: 4px;
|
}
|
|
.stat-primary .stat-value { color: #409EFF; }
|
.stat-success .stat-value { color: #67C23A; }
|
.stat-warning .stat-value { color: #E6A23C; }
|
.stat-info .stat-value { color: #909399; }
|
.stat-secondary .stat-value { color: #909399; }
|
</style>
|
