1
This commit is contained in:
xiaozhou
366
src/views/alarm/alarmLevel.vue
Normal file
366
src/views/alarm/alarmLevel.vue
Normal file
@ -0,0 +1,366 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user