366 lines
8.1 KiB
Vue
366 lines
8.1 KiB
Vue
<template>
|
|
<div class="alarm-level-stat-page">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="stat-header">
|
|
<div class="header-inner">
|
|
<h1 class="page-title">实时警报</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 功能按钮区 -->
|
|
<div class="vant-buttons-top">
|
|
<van-button type="primary" @click="handleSourceDistribution" round
|
|
>来源分布</van-button
|
|
>
|
|
<van-button type="success" @click="handleAlarmLevel" round
|
|
>告警级别统计</van-button
|
|
>
|
|
<van-button type="warning" @click="handleAlarmList" round
|
|
>告警列表</van-button
|
|
>
|
|
</div>
|
|
|
|
<!-- 核心内容区 -->
|
|
<div class="content-container">
|
|
<!-- 标签栏 -->
|
|
<van-tabs
|
|
v-model:active="activeTab"
|
|
@change="handleTabChange"
|
|
class="tabs-wrapper"
|
|
color="#1890ff"
|
|
title-active-color="#1890ff"
|
|
title-inactive-color="#666"
|
|
>
|
|
<!-- 告警级别统计标签 -->
|
|
<van-tab title="告警级别统计">
|
|
<div class="tab-panel">
|
|
<!-- 统计图表卡片 -->
|
|
<div class="chart-card">
|
|
<h3 class="card-title">告警级别分布</h3>
|
|
<div class="chart-container" ref="chartRef"></div>
|
|
</div>
|
|
|
|
<!-- 统计表格卡片 -->
|
|
<div class="table-card">
|
|
<h3 class="card-title">告警级别明细</h3>
|
|
<div class="table-container">
|
|
<table class="alarm-table">
|
|
<thead>
|
|
<tr>
|
|
<th>告警级别</th>
|
|
<th>已处理</th>
|
|
<th>未处理</th>
|
|
<th>总数</th>
|
|
<th>处理率</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(item, index) in alarmStats"
|
|
:key="index"
|
|
:class="`level-${item.levelEn}`"
|
|
>
|
|
<td class="level-name">
|
|
<span class="level-dot"></span>
|
|
{{ item.level }}
|
|
</td>
|
|
<td>{{ item.processed }}</td>
|
|
<td>{{ item.unprocessed }}</td>
|
|
<td>{{ item.total }}</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div
|
|
class="progress-fill"
|
|
:style="{ width: item.rate + '%' }"
|
|
></div>
|
|
</div>
|
|
<span class="rate-text">{{ item.rate }}%</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick, onUnmounted } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import * as echarts from "echarts";
|
|
|
|
const router = useRouter();
|
|
const chartRef = ref(null);
|
|
let chartInstance = null;
|
|
|
|
// 告警统计数据
|
|
const alarmStats = ref([
|
|
{
|
|
level: "紧急",
|
|
levelEn: "emergency",
|
|
processed: 4,
|
|
unprocessed: 3,
|
|
total: 7,
|
|
rate: 57,
|
|
},
|
|
{
|
|
level: "重要",
|
|
levelEn: "important",
|
|
processed: 3,
|
|
unprocessed: 2,
|
|
total: 5,
|
|
rate: 60,
|
|
},
|
|
{
|
|
level: "次要",
|
|
levelEn: "secondary",
|
|
processed: 2,
|
|
unprocessed: 3,
|
|
total: 5,
|
|
rate: 40,
|
|
},
|
|
{
|
|
level: "通知",
|
|
levelEn: "notice",
|
|
processed: 0,
|
|
unprocessed: 7,
|
|
total: 7,
|
|
rate: 0,
|
|
},
|
|
]);
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
nextTick(() => {
|
|
if (!chartRef.value) return;
|
|
|
|
chartInstance = echarts.init(chartRef.value);
|
|
const option = {
|
|
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
|
legend: {
|
|
data: ["已处理", "未处理"],
|
|
bottom: 0,
|
|
textStyle: { fontSize: 12 },
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
top: "10%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: alarmStats.value.map((item) => item.level),
|
|
axisLabel: { fontSize: 12 },
|
|
},
|
|
yAxis: { type: "value", axisLabel: { fontSize: 12 } },
|
|
series: [
|
|
{
|
|
name: "已处理",
|
|
type: "bar",
|
|
data: alarmStats.value.map((item) => item.processed),
|
|
itemStyle: { color: "green" },
|
|
barWidth: "30%",
|
|
},
|
|
{
|
|
name: "未处理",
|
|
type: "bar",
|
|
data: alarmStats.value.map((item) => item.unprocessed),
|
|
itemStyle: { color: "red" },
|
|
barWidth: "30%",
|
|
},
|
|
],
|
|
};
|
|
|
|
chartInstance.setOption(option);
|
|
window.addEventListener("resize", () => chartInstance.resize());
|
|
});
|
|
};
|
|
|
|
onMounted(() => initChart());
|
|
onUnmounted(() => {
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
window.removeEventListener("resize", () => chartInstance.resize());
|
|
}
|
|
});
|
|
|
|
const handleSourceDistribution = () => router.push("/alarm");
|
|
const handleAlarmLevel = () => router.push({ name: "AlarmLevel" });
|
|
const handleAlarmList = () => router.push({ name: "AlarmList" });
|
|
|
|
// 标签切换逻辑
|
|
const handleTabChange = (index) => {
|
|
activeTab.value = index;
|
|
console.log("切换到标签：", index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.alarm-level-stat-page {
|
|
min-height: 100vh;
|
|
background-color: #f5f7fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.stat-header {
|
|
background-color: #2f4050;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.page-title {
|
|
font-size: 18px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.vant-buttons-top {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 12px 15px;
|
|
}
|
|
.van-button--round {
|
|
--van-button-border-radius: 20px;
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px 30px;
|
|
}
|
|
|
|
.tabs-wrapper {
|
|
--van-tabs-nav-background: transparent;
|
|
--van-tabs-line-height: 36px;
|
|
--van-tabs-font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.van-tabs-nav {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.chart-card {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.table-card {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
.alarm-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
text-align: center;
|
|
min-width: 500px;
|
|
}
|
|
.alarm-table th {
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
font-weight: 600;
|
|
padding: 12px 8px;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.alarm-table td {
|
|
padding: 16px 8px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
.alarm-table tr:not(:last-child) td {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.level-emergency {
|
|
background-color: #ff4d4f;
|
|
}
|
|
.level-important {
|
|
background-color: #ff9933;
|
|
}
|
|
.level-secondary {
|
|
background-color: #ffd700;
|
|
color: #333;
|
|
}
|
|
.level-notice {
|
|
background-color: #66ccff;
|
|
}
|
|
.level-name {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.level-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
.level-secondary .level-dot {
|
|
background-color: #333;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 80px;
|
|
height: 8px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: #fff;
|
|
transition: width 0.3s;
|
|
}
|
|
.rate-text {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header-inner {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.chart-container {
|
|
height: 220px;
|
|
}
|
|
}
|
|
</style> |