493 lines
17 KiB
Vue
493 lines
17 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import type { EChartsOption } from "echarts";
|
|
import Chart from "@/components/chart/index.vue";
|
|
|
|
type AlarmStatus = "待研判" | "待处理" | "处置完成" | "误判";
|
|
type ProjectName = "西江隧道" | "青云隧道" | "南山隧道";
|
|
type DistributionRange = "近一周" | "近一个月" | "近三个月";
|
|
|
|
interface AlarmReportRecord {
|
|
id: string;
|
|
type: string;
|
|
robot: string;
|
|
project: ProjectName;
|
|
status: AlarmStatus;
|
|
time: string;
|
|
}
|
|
|
|
interface TrendRecord {
|
|
date: string;
|
|
project: ProjectName;
|
|
total: number;
|
|
closed: number;
|
|
}
|
|
|
|
const distributionRange = ref<DistributionRange>("近一周");
|
|
|
|
const reportData: AlarmReportRecord[] = [
|
|
{ id: "AL-001", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待研判", time: "2026-06-23 10:24:18" },
|
|
{ id: "AL-002", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-23 10:18:42" },
|
|
{ id: "AL-003", type: "墙体渗漏", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-23 09:56:11" },
|
|
{ id: "AL-004", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-23 09:20:36" },
|
|
{ id: "AL-005", type: "应急门开启异常", robot: "巡检机器人 N1", project: "南山隧道", status: "待处理", time: "2026-06-23 08:42:57" },
|
|
{ id: "AL-006", type: "局部高温", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-22 19:12:06" },
|
|
{ id: "AL-007", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "处置完成", time: "2026-06-22 17:46:28" },
|
|
{ id: "AL-008", type: "墙体渗漏", robot: "巡检机器人 Q2", project: "青云隧道", status: "待研判", time: "2026-06-22 16:08:40" },
|
|
{ id: "AL-009", type: "水渍渗漏", robot: "巡检机器人 R4", project: "西江隧道", status: "待处理", time: "2026-06-22 14:21:19" },
|
|
{ id: "AL-010", type: "局部高温", robot: "巡检机器人 N1", project: "南山隧道", status: "误判", time: "2026-06-22 11:03:50" },
|
|
{ id: "AL-011", type: "线缆破损", robot: "巡检机器人 R3", project: "西江隧道", status: "处置完成", time: "2026-06-16 13:14:09" },
|
|
{ id: "AL-012", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-15 16:42:33" },
|
|
{ id: "AL-013", type: "墙体渗漏", robot: "巡检机器人 N2", project: "南山隧道", status: "处置完成", time: "2026-06-12 09:25:50" },
|
|
{ id: "AL-014", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-08 20:14:27" },
|
|
{ id: "AL-015", type: "应急门开启异常", robot: "巡检机器人 Q3", project: "青云隧道", status: "待研判", time: "2026-05-28 11:38:44" },
|
|
{ id: "AL-016", type: "局部高温", robot: "巡检机器人 N4", project: "南山隧道", status: "处置完成", time: "2026-05-19 15:07:18" },
|
|
{ id: "AL-017", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待处理", time: "2026-05-06 08:11:52" },
|
|
{ id: "AL-018", type: "墙体渗漏", robot: "巡检机器人 Q2", project: "青云隧道", status: "误判", time: "2026-04-23 14:54:06" },
|
|
{ id: "AL-019", type: "水渍渗漏", robot: "巡检机器人 N1", project: "南山隧道", status: "处置完成", time: "2026-04-12 10:03:16" },
|
|
];
|
|
|
|
const trendData: TrendRecord[] = [
|
|
{ date: "06-09", project: "西江隧道", total: 1, closed: 1 },
|
|
{ date: "06-09", project: "青云隧道", total: 1, closed: 0 },
|
|
{ date: "06-09", project: "南山隧道", total: 1, closed: 1 },
|
|
{ date: "06-10", project: "西江隧道", total: 2, closed: 1 },
|
|
{ date: "06-10", project: "青云隧道", total: 1, closed: 0 },
|
|
{ date: "06-10", project: "南山隧道", total: 1, closed: 1 },
|
|
{ date: "06-11", project: "西江隧道", total: 2, closed: 1 },
|
|
{ date: "06-11", project: "青云隧道", total: 1, closed: 1 },
|
|
{ date: "06-11", project: "南山隧道", total: 2, closed: 1 },
|
|
{ date: "06-12", project: "西江隧道", total: 1, closed: 1 },
|
|
{ date: "06-12", project: "青云隧道", total: 1, closed: 1 },
|
|
{ date: "06-12", project: "南山隧道", total: 2, closed: 1 },
|
|
{ date: "06-13", project: "西江隧道", total: 2, closed: 1 },
|
|
{ date: "06-13", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-13", project: "南山隧道", total: 2, closed: 2 },
|
|
{ date: "06-14", project: "西江隧道", total: 2, closed: 1 },
|
|
{ date: "06-14", project: "青云隧道", total: 1, closed: 1 },
|
|
{ date: "06-14", project: "南山隧道", total: 2, closed: 2 },
|
|
{ date: "06-15", project: "西江隧道", total: 3, closed: 2 },
|
|
{ date: "06-15", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-15", project: "南山隧道", total: 2, closed: 2 },
|
|
{ date: "06-16", project: "西江隧道", total: 2, closed: 1 },
|
|
{ date: "06-16", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-16", project: "南山隧道", total: 2, closed: 2 },
|
|
{ date: "06-17", project: "西江隧道", total: 3, closed: 2 },
|
|
{ date: "06-17", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-17", project: "南山隧道", total: 3, closed: 3 },
|
|
{ date: "06-18", project: "西江隧道", total: 2, closed: 2 },
|
|
{ date: "06-18", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-18", project: "南山隧道", total: 3, closed: 2 },
|
|
{ date: "06-19", project: "西江隧道", total: 3, closed: 2 },
|
|
{ date: "06-19", project: "青云隧道", total: 2, closed: 2 },
|
|
{ date: "06-19", project: "南山隧道", total: 4, closed: 3 },
|
|
{ date: "06-20", project: "西江隧道", total: 3, closed: 2 },
|
|
{ date: "06-20", project: "青云隧道", total: 2, closed: 2 },
|
|
{ date: "06-20", project: "南山隧道", total: 3, closed: 2 },
|
|
{ date: "06-21", project: "西江隧道", total: 2, closed: 2 },
|
|
{ date: "06-21", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-21", project: "南山隧道", total: 3, closed: 2 },
|
|
{ date: "06-22", project: "西江隧道", total: 4, closed: 3 },
|
|
{ date: "06-22", project: "青云隧道", total: 2, closed: 1 },
|
|
{ date: "06-22", project: "南山隧道", total: 4, closed: 3 },
|
|
{ date: "06-23", project: "西江隧道", total: 4, closed: 3 },
|
|
{ date: "06-23", project: "青云隧道", total: 3, closed: 2 },
|
|
{ date: "06-23", project: "南山隧道", total: 4, closed: 3 },
|
|
];
|
|
|
|
const trendSeries = computed(() => {
|
|
const grouped = trendData.reduce<Record<string, { total: number; closed: number }>>(
|
|
(accumulator, item) => {
|
|
if (!accumulator[item.date]) {
|
|
accumulator[item.date] = { total: 0, closed: 0 };
|
|
}
|
|
|
|
accumulator[item.date].total += item.total;
|
|
accumulator[item.date].closed += item.closed;
|
|
return accumulator;
|
|
},
|
|
{},
|
|
);
|
|
|
|
return Object.entries(grouped).map(([date, value]) => ({
|
|
date,
|
|
total: value.total,
|
|
closed: value.closed,
|
|
}));
|
|
});
|
|
|
|
const trendOption = computed<EChartsOption>(() => {
|
|
const dates = trendSeries.value.map((item) => item.date);
|
|
const totalValues = trendSeries.value.map((item) => item.total);
|
|
const closedValues = trendSeries.value.map((item) => item.closed);
|
|
|
|
return {
|
|
grid: {
|
|
left: 24,
|
|
right: 16,
|
|
top: 24,
|
|
bottom: 28,
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(6, 20, 42, 0.92)",
|
|
borderColor: "rgba(96, 208, 255, 0.24)",
|
|
textStyle: {
|
|
color: "#eefcff",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: dates,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(96, 188, 242, 0.2)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(181, 230, 249, 0.74)",
|
|
fontSize: 11,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitNumber: 5,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(181, 230, 249, 0.62)",
|
|
fontSize: 11,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(97, 189, 242, 0.12)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "新增告警",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
symbolSize: 7,
|
|
data: totalValues,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: "#74ecff",
|
|
},
|
|
itemStyle: {
|
|
color: "#74ecff",
|
|
borderColor: "#081f3e",
|
|
borderWidth: 2,
|
|
},
|
|
areaStyle: {
|
|
color: "rgba(116, 236, 255, 0.12)",
|
|
},
|
|
},
|
|
{
|
|
name: "闭环告警",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
symbolSize: 7,
|
|
data: closedValues,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: "#62e0a8",
|
|
},
|
|
itemStyle: {
|
|
color: "#62e0a8",
|
|
borderColor: "#081f3e",
|
|
borderWidth: 2,
|
|
},
|
|
areaStyle: {
|
|
color: "rgba(98, 224, 168, 0.08)",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
});
|
|
|
|
const typeStats = computed(() => {
|
|
const statsMap = new Map<string, number>();
|
|
reportData.forEach((item) => {
|
|
statsMap.set(item.type, (statsMap.get(item.type) ?? 0) + 1);
|
|
});
|
|
|
|
return Array.from(statsMap.entries()).map(([label, value]) => ({
|
|
label,
|
|
value,
|
|
}));
|
|
});
|
|
|
|
const typeRadarOption = computed<EChartsOption>(() => {
|
|
const maxValue = Math.max(...typeStats.value.map((item) => item.value), 1);
|
|
const indicators = typeStats.value.map((item) => ({
|
|
name: item.label,
|
|
max: maxValue,
|
|
}));
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: "item",
|
|
backgroundColor: "rgba(6, 20, 42, 0.92)",
|
|
borderColor: "rgba(96, 208, 255, 0.24)",
|
|
textStyle: {
|
|
color: "#eefcff",
|
|
},
|
|
},
|
|
radar: {
|
|
radius: "68%",
|
|
center: ["50%", "54%"],
|
|
indicator: indicators,
|
|
splitNumber: 4,
|
|
axisName: {
|
|
color: "#dff7ff",
|
|
fontSize: 12,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(97, 189, 242, 0.22)",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(97, 189, 242, 0.16)",
|
|
},
|
|
},
|
|
splitArea: {
|
|
areaStyle: {
|
|
color: ["rgba(16, 52, 94, 0.10)", "rgba(16, 52, 94, 0.05)"],
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "radar",
|
|
data: [
|
|
{
|
|
value: typeStats.value.map((item) => item.value),
|
|
name: "告警类型分布",
|
|
areaStyle: {
|
|
color: "rgba(73, 207, 255, 0.20)",
|
|
},
|
|
lineStyle: {
|
|
color: "#61dcff",
|
|
width: 2.5,
|
|
},
|
|
itemStyle: {
|
|
color: "#8ff3ff",
|
|
borderColor: "#07203e",
|
|
borderWidth: 2,
|
|
},
|
|
symbolSize: 8,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
});
|
|
|
|
const statusStats = computed(() => {
|
|
const order: AlarmStatus[] = ["待研判", "待处理", "处置完成", "误判"];
|
|
const total = reportData.length || 1;
|
|
|
|
return order.map((status) => {
|
|
const value = reportData.filter((item) => item.status === status).length;
|
|
return {
|
|
label: status,
|
|
value,
|
|
percent: `${Math.round((value / total) * 100)}%`,
|
|
};
|
|
});
|
|
});
|
|
|
|
const statusPieOption = computed<EChartsOption>(() => ({
|
|
tooltip: {
|
|
trigger: "item",
|
|
backgroundColor: "rgba(6, 20, 42, 0.92)",
|
|
borderColor: "rgba(96, 208, 255, 0.24)",
|
|
textStyle: {
|
|
color: "#eefcff",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["46%", "72%"],
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderColor: "#081f3e",
|
|
borderWidth: 3,
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: "#dff7ff",
|
|
formatter: "{b}\n{d}%",
|
|
fontSize: 12,
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
color: "rgba(181, 230, 249, 0.52)",
|
|
},
|
|
},
|
|
data: statusStats.value.map((item) => ({
|
|
name: item.label,
|
|
value: item.value,
|
|
itemStyle: {
|
|
color:
|
|
item.label === "待研判"
|
|
? "#ffd66e"
|
|
: item.label === "待处理"
|
|
? "#ff8b78"
|
|
: item.label === "处置完成"
|
|
? "#62e0a8"
|
|
: "#8ea7ff",
|
|
},
|
|
})),
|
|
},
|
|
],
|
|
}));
|
|
|
|
const projectDistribution = computed(() => {
|
|
const now = new Date("2026-06-23T23:59:59");
|
|
const rangeDaysMap: Record<DistributionRange, number> = {
|
|
近一周: 7,
|
|
近一个月: 30,
|
|
近三个月: 90,
|
|
};
|
|
const threshold = new Date(
|
|
now.getTime() - rangeDaysMap[distributionRange.value] * 24 * 60 * 60 * 1000,
|
|
);
|
|
const data = reportData.filter((item) => new Date(item.time.replace(" ", "T")) >= threshold);
|
|
const statsMap = new Map<string, number>();
|
|
|
|
data.forEach((item) => {
|
|
statsMap.set(item.project, (statsMap.get(item.project) ?? 0) + 1);
|
|
});
|
|
|
|
const maxValue = Math.max(...statsMap.values(), 1);
|
|
|
|
return Array.from(statsMap.entries())
|
|
.map(([label, value]) => ({
|
|
label,
|
|
value,
|
|
width: `${(value / maxValue) * 100}%`,
|
|
}))
|
|
.sort((a, b) => b.value - a.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-shell report-page report-dashboard-page">
|
|
<div class="report-dashboard">
|
|
<section class="report-main-grid">
|
|
<div class="page-card report-panel trend-panel">
|
|
<div class="report-panel-header">
|
|
<div class="page-card-title">告警趋势分析</div>
|
|
</div>
|
|
<div class="trend-chart">
|
|
<Chart :option="trendOption" />
|
|
</div>
|
|
<div class="trend-legend">
|
|
<span><i class="legend-dot total"></i>新增告警</span>
|
|
<span><i class="legend-dot closed"></i>闭环告警</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-card report-panel type-panel">
|
|
<div class="report-panel-header">
|
|
<div class="page-card-title">告警类型分布</div>
|
|
</div>
|
|
<div class="type-radar-layout">
|
|
<div class="type-radar-chart">
|
|
<Chart :option="typeRadarOption" />
|
|
</div>
|
|
<div class="type-radar-legend">
|
|
<div v-for="item in typeStats" :key="item.label" class="type-legend-item">
|
|
<span class="type-legend-name">{{ item.label }}</span>
|
|
<span class="type-legend-value">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-card report-panel status-panel">
|
|
<div class="report-panel-header">
|
|
<div class="page-card-title">案件状态分布</div>
|
|
</div>
|
|
<div class="status-pie-layout">
|
|
<div class="status-pie-chart">
|
|
<Chart :option="statusPieOption" />
|
|
</div>
|
|
<div class="status-pie-legend">
|
|
<div v-for="item in statusStats" :key="item.label" class="status-legend-item">
|
|
<span
|
|
:class="[
|
|
'status-legend-dot',
|
|
item.label === '待研判'
|
|
? 'pending'
|
|
: item.label === '待处理'
|
|
? 'handling'
|
|
: item.label === '处置完成'
|
|
? 'finished'
|
|
: 'false',
|
|
]"
|
|
></span>
|
|
<span class="status-legend-name">{{ item.label }}</span>
|
|
<span class="status-legend-value">{{ item.value }}</span>
|
|
<span class="status-legend-percent">{{ item.percent }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-card report-panel ranking-panel">
|
|
<div class="report-panel-header">
|
|
<div class="page-card-title">项目告警分布</div>
|
|
<div class="report-filter-tabs">
|
|
<button
|
|
v-for="range in ['近一周', '近一个月', '近三个月']"
|
|
:key="range"
|
|
:class="['report-filter-tab', { active: distributionRange === range }]"
|
|
type="button"
|
|
@click="distributionRange = range as DistributionRange"
|
|
>
|
|
{{ range }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="report-bar-list">
|
|
<div v-for="item in projectDistribution" :key="item.label" class="report-bar-row">
|
|
<div class="bar-row-head">
|
|
<span>{{ item.label }}</span>
|
|
<span>{{ item.value }} 次</span>
|
|
</div>
|
|
<div class="report-bar-track">
|
|
<span class="report-bar-fill blue" :style="{ width: item.width }"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|