gonghao
/
local_alert
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: gonghao:b00dac74debaddfa3a646a94fb352139a42b0481
Branches Tags
gonghao:main
gonghao:master
...
compare: gonghao:8a31a31d93f6f1ada9cb3c0d4514d7cce97df92f
Branches Tags
gonghao:main
gonghao:master

8 Commits
b00dac74de ... 8a31a31d93

Author SHA1 Message Date
龚皓 8a31a31d93 告警路由添加 2024-10-16 14:56:54 +08:00
龚皓 0e79e6f9cd 数据统计页面布局初步排版，展示点位信息和图表 2024-10-16 14:55:39 +08:00
龚皓 689a167f4e 告警管理页面删除仪表盘，添加弹窗布局动态处理，添加弹窗点击事件 2024-10-16 14:53:41 +08:00
龚皓 1b6a66302f 报警分布圆盘标签说明省略，高度降低 2024-10-16 14:52:00 +08:00
龚皓 9b1a251ded 页面拆分3页，头部颜色调整渐变 2024-10-16 14:50:22 +08:00
龚皓 93f9af1c99 告警趋势资源复用加载问题修复，新增30天告警分布 2024-10-16 14:48:22 +08:00
龚皓 8184d3ca94 初版页面备份-列表加图表 2024-10-16 14:45:46 +08:00
龚皓 c8f02faaa7 摄像头组件页面 2024-10-16 14:44:36 +08:00
8 changed files with 1062 additions and 418 deletions
Show Stats Expand all files Collapse all files

376
src/components/AlertChart.vue
View File

@ -9,27 +9,42 @@
<el-tab-pane label="本周" name="second">
<div ref="weekLineChartDom" class="chart-container"></div> <!-- 本周图表 -->
</el-tab-pane>
<el-tab-pane label="最近30天" name="third"> <!-- 新增最近30天选项卡 -->
<div ref="monthLineChartDom" class="chart-container"></div> <!-- 最近30天图表 -->
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import { BoxApi } from '@/utils/boxApi.ts';
import dayjs from 'dayjs';
import { BoxApi } from '@/utils/boxApi.ts'; // 使用 BoxApi
import { debounce } from 'lodash';
const activeName = ref('first');
const hourlyCounts = ref(Array(24).fill(0)); // 初始化24小时的计数器
const dailyCounts = ref(Array(7).fill(0)); // 初始化7天的计数器
const weekDates = ref([]); // 存储前7天的日期
const hourlyCounts = ref(Array(24).fill(0)); // 初始化24小时的计数器
const chartInstanceToday = ref(null);
const chartInstanceWeek = ref(null);
const todayLineChartDom = ref(null);
const dailyCounts = ref(Array(7).fill(0)); // 初始化7天的计数器
const weekDates = ref([]); // 存储前7天的日期
const chartInstanceWeek = ref(null);
const weekLineChartDom = ref(null);
const apiInstance = new BoxApi(); // 创建 BoxApi 实例
const monthlyCounts = ref(Array(30).fill(0)); // 初始化30天的计数器
const monthDates = ref([]); // 存储前30天的日期
const chartInstanceMonth = ref(null); // 30天的图表实例
const monthLineChartDom = ref(null);
const apiInstance = new BoxApi();
const allEvents = ref([]); // 使用响应式 allEvents
let isTodayChartInitialized = false;
let isWeekChartInitialized = false;
let isMonthChartInitialized = false; // 30天图表是否初始化
// 计算前7天的日期
const calculateWeekDates = () => {
@ -37,6 +52,84 @@ const calculateWeekDates = () => {
weekDates.value = Array.from({ length: 7 }, (_, i) => today.subtract(i, 'day').format('YYYY-MM-DD')).reverse();
};
// 计算前30天的日期
const calculateMonthDates = () => {
const today = dayjs();
monthDates.value = Array.from({ length: 30 }, (_, i) => today.subtract(i, 'day').format('YYYY-MM-DD')).reverse();
};
// 初始化今日图表
const initTodayChart = () => {
if (todayLineChartDom.value) {
chartInstanceToday.value = echarts.init(todayLineChartDom.value);
const option = {
title: {
text: '今日告警数量趋势',
top: '3%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
formatter: function (params) {
const { value, name } = params[0];
return `${name}<br/>告警数量: ${value}`;
},
textStyle: {
color: '#fff',
fontSize: 12,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Array.from({ length: 24 }, (_, i) => `${i.toString().padStart(2, '0')}:00`),
axisLabel: {
rotate: 0,
color: '#fff',
},
},
yAxis: {
type: 'value',
min: 0,
minInterval: 1,
axisLabel: {
color: '#fff',
},
},
series: [
{
name: '告警数量',
type: 'line',
data: hourlyCounts.value.length > 0 ? hourlyCounts.value : Array(24).fill(0),
smooth: true,
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
},
},
lineStyle: {
color: 'rgb(60,178,239)', // 曲线颜色
width: 2,
},
areaStyle: {
color: 'rgba(74, 172, 178, 0.3)', // 覆盖面积颜色
},
},
],
};
chartInstanceToday.value.setOption(option);
}
};
// 初始化本周图表
const initWeekChart = () => {
if (weekLineChartDom.value) {
@ -49,13 +142,13 @@ const initWeekChart = () => {
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold'
}
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
type: 'cross',
},
formatter: function (params) {
const { value } = params[0];
@ -63,19 +156,19 @@ const initWeekChart = () => {
},
textStyle: {
color: '#fff',
fontSize: 12
}
fontSize: 12,
},
},
xAxis: {
type: 'category',
boundaryGap: true,
data: weekDates.value.length > 0 ? weekDates.value : Array.from({ length: 7 }, (_, i) => `日期 ${i+1}`),
data: weekDates.value.length > 0 ? weekDates.value : Array.from({ length: 7 }, (_, i) => `日期 ${i + 1}`),
axisLabel: {
rotate: 0,
interval: 0,
color: '#fff',
fontSize: 12
}
fontSize: 12,
},
},
yAxis: {
type: 'value',
@ -83,8 +176,8 @@ const initWeekChart = () => {
minInterval: 1,
axisLabel: {
color: '#fff',
fontSize: 12
}
fontSize: 12,
},
},
series: [
{
@ -97,35 +190,42 @@ const initWeekChart = () => {
position: 'top',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
fontSize: 12,
},
},
lineStyle: {
color: 'rgb(60,178,239)', // 曲线颜色
width: 2,
},
areaStyle: {
color: 'rgba(74, 172, 178, 0.3)', // 覆盖面积颜色
},
},
],
};
chartInstanceWeek.value.setOption(option);
}
};
// 初始化今日图表
const initTodayChart = () => {
if (todayLineChartDom.value) {
chartInstanceToday.value = echarts.init(todayLineChartDom.value);
// 初始化最近30天图表
const initMonthChart = () => {
if (monthLineChartDom.value) {
chartInstanceMonth.value = echarts.init(monthLineChartDom.value);
const option = {
title: {
text: '今日告警数量趋势',
text: '最近30天告警数量趋势',
top: '3%',
textStyle: {
color: '#fff',
fontWeight: 'bold'
}
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
type: 'cross',
},
formatter: function (params) {
const { value, name } = params[0];
@ -133,17 +233,17 @@ const initTodayChart = () => {
},
textStyle: {
color: '#fff',
fontSize: 12
}
fontSize: 12,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Array.from({ length: 24 }, (_, i) => `${i.toString().padStart(2, '0')}:00`),
data: monthDates.value,
axisLabel: {
rotate: 0,
color: '#fff',
}
},
},
yAxis: {
type: 'value',
@ -151,38 +251,44 @@ const initTodayChart = () => {
minInterval: 1,
axisLabel: {
color: '#fff',
}
},
},
series: [
{
name: '告警数量',
type: 'line',
data: hourlyCounts.value.length > 0 ? hourlyCounts.value : Array(24).fill(0),
data: monthlyCounts.value.length > 0 ? monthlyCounts.value : Array(30).fill(0),
smooth: true,
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
}
}
]
},
},
lineStyle: {
color: 'rgb(60,178,239)', // 曲线颜色
width: 2,
},
areaStyle: {
color: 'rgba(74, 172, 178, 0.3)', // 覆盖面积颜色
},
},
],
};
chartInstanceToday.value.setOption(option);
chartInstanceMonth.value.setOption(option);
}
};
// 分批获取并处理告警数据
// 获取并处理告警数据
const fetchAndProcessEvents = async (token) => {
try {
let currentPage = 1;
const pageSize = 2000; // 每次加载100条数据
let allEvents = [];
const pageSize = 1000;
// 第一次请求，获取告警总数
const { tableData: firstBatch, totalItems } = await apiInstance.getEvents(token, pageSize, currentPage);
allEvents = [...firstBatch];
allEvents.value = [...firstBatch]; // 使用 allEvents.value
// 根据告警总数逐页加载所有数据
const totalPages = Math.ceil(totalItems / pageSize);
@ -191,42 +297,46 @@ const fetchAndProcessEvents = async (token) => {
while (currentPage < totalPages) {
currentPage++;
const { tableData: nextBatch } = await apiInstance.getEvents(token, pageSize, currentPage);
allEvents = [...allEvents, ...nextBatch];
// 每次加载数据后逐步更新图表
processEventData(allEvents);
allEvents.value = [...allEvents.value, ...nextBatch]; // 使用 allEvents.value
}
// 最终处理全部数据
processEventData(allEvents);
// 处理数据
processEventData(allEvents.value); // 今日告警数据
processWeekData(); // 本周告警数据
processMonthData(); // 最近30天告警数据
} catch (error) {
console.error("Error fetching events:", error);
}
};
// 处理告警数据并更新图表
// 处理今日告警数据并更新图表
const processEventData = (events) => {
// 重置计数器
hourlyCounts.value = Array(24).fill(0);
dailyCounts.value = Array(7).fill(0);
const today = new Date();
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
// 统计数据
events.forEach(event => {
events.forEach((event) => {
const endedAt = event.ended_at;
if (endedAt) {
const endedDate = new Date(endedAt);
// 统计今日每小时的告警数量
if (endedDate >= startOfToday && endedDate < endOfToday) {
const hour = endedDate.getHours();
hourlyCounts.value[hour] += 1;
}
}
});
// 统计最近7天的告警数量
updateCharts();
};
// 处理本周告警数据
const processWeekData = () => {
dailyCounts.value = Array(7).fill(0);
allEvents.value.forEach((event) => {
const endedAt = event.ended_at;
if (endedAt) {
const endedDay = dayjs(endedAt).format('YYYY-MM-DD');
weekDates.value.forEach((date, index) => {
if (endedDay === date) {
@ -236,72 +346,145 @@ const processEventData = (events) => {
}
});
// 更新图表
updateCharts();
updateWeekChart();
};
// 更新图表
// 处理最近30天告警数据
const processMonthData = () => {
monthlyCounts.value = Array(30).fill(0);
allEvents.value.forEach((event) => {
const endedAt = event.ended_at;
if (endedAt) {
const endedDay = dayjs(endedAt).format('YYYY-MM-DD');
monthDates.value.forEach((date, index) => {
if (endedDay === date) {
monthlyCounts.value[index] += 1;
}
});
}
});
updateMonthChart();
};
// 更新今日图表
const updateCharts = () => {
if (chartInstanceToday.value) {
chartInstanceToday.value.setOption({
series: [{ data: hourlyCounts.value }]
});
}
if (chartInstanceWeek.value) {
chartInstanceWeek.value.setOption({
series: [{ data: dailyCounts.value }]
series: [{ data: hourlyCounts.value }],
});
}
};
// 更新本周图表
const updateWeekChart = () => {
if (chartInstanceWeek.value) {
chartInstanceWeek.value.setOption({
series: [{ data: dailyCounts.value }],
});
}
};
// 更新最近30天图表
const updateMonthChart = () => {
if (chartInstanceMonth.value) {
chartInstanceMonth.value.setOption({
series: [{ data: monthlyCounts.value }],
});
}
};
// 处理选项卡切换
const handleClick = async (tab) => {
if (tab.props.name === 'first') {
if (!isTodayChartInitialized) {
await nextTick();
initTodayChart();
isTodayChartInitialized = true;
}
delayInstanceToday();
} else if (tab.props.name === 'second') {
await processWeekData();
if (!isWeekChartInitialized) {
await nextTick();
initWeekChart();
isWeekChartInitialized = true;
}
delayInstanceWeek();
} else if (tab.props.name === 'third') {
await processMonthData();
if (!isMonthChartInitialized) {
await nextTick();
initMonthChart();
isMonthChartInitialized = true;
}
delayInstanceMonth();
}
};
// 窗口调整时重新渲染图表
const delayInstanceToday = debounce(() => {
if (chartInstanceToday.value) {
chartInstanceToday.value.resize();
updateCharts();
}
}, 300);
const delayInstanceWeek = debounce(() => {
if (chartInstanceWeek.value) {
chartInstanceWeek.value.resize();
updateWeekChart();
}
}, 300);
const delayInstanceMonth = debounce(() => {
if (chartInstanceMonth.value) {
chartInstanceMonth.value.resize();
updateMonthChart();
}
}, 300);
// 组件挂载时调用
onMounted(async () => {
calculateWeekDates(); // 计算前7天日期
calculateMonthDates(); // 计算前30天日期
const token = localStorage.getItem('alertToken');
await fetchAndProcessEvents(token);
await fetchAndProcessEvents(token); // 加载数据
// 初始化图表
initTodayChart();
initWeekChart();
});
// 监听hourlyCounts，当其变化时更新今日图表
// 监听数据变化，更新对应的图表
watch(hourlyCounts, () => {
if (chartInstanceToday.value) {
chartInstanceToday.value.setOption({
series: [{
data: hourlyCounts.value
}]
series: [{ data: hourlyCounts.value }],
});
}
});
// 监听dailyCounts，当其变化时更新本周图表
watch(dailyCounts, () => {
if (chartInstanceWeek.value) {
chartInstanceWeek.value.setOption({
series: [{
data: dailyCounts.value
}]
series: [{ data: dailyCounts.value }],
});
}
});
// tab点击处理函数
const handleClick = (tab) => {
if (tab.name === 'first') {
initTodayChart(); // 切换到今日，重新加载今日图表
} else if (tab.name === 'second') {
initWeekChart(); // 切换到本周，重新加载本周图表
watch(monthlyCounts, () => {
if (chartInstanceMonth.value) {
chartInstanceMonth.value.setOption({
series: [{ data: monthlyCounts.value }],
});
}
};
});
</script>
<style scoped>
.alert-card {
background-color: #2a3f54;
background-color: #304555;
color: #fff;
border-radius: 8px;
padding: 0;
@ -314,20 +497,15 @@ const handleClick = (tab) => {
border-bottom: 1px solid #3a4b5c;
}
.alert-tabs {
margin-bottom: 0;
.chart-container {
height: 350px;
}
::v-deep .el-tabs__item {
color: #fff;
}
.chart-container {
width: 780px;
height: 420px;
}
.el-tabs__active-bar {
background-color: #409EFF;
::v-deep .el-tabs__item.is-active {
color: #2ea0ec;
}
</style>

238
src/components/Cameras.vue Normal file
View File

@ -0,0 +1,238 @@
<template>
<div>
<el-card class="camera-card">
<el-row :gutter="20" class="camera-row">
<!-- 左侧块：通道列表 -->
<el-col :span="8">
<el-card class="channel-card" shadow="hover">
<div class="section-title">通道</div>
<div class="scroll-container">
<el-table :data="cameras" style="width: 100%;" height="250">
<el-table-column prop="id" label="ID" width="100"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<!-- 中间块：摄像头总数量 -->
<el-col :span="8">
<el-card class="count-card" shadow="hover">
<div class="section-title">摄像数量</div>
<div class="camera-count-chart"></div>
</el-card>
</el-col>
<!-- 右侧块：在线/离线/异常状态 -->
<el-col :span="8">
<el-card class="online-card" shadow="hover">
<div class="section-title">在线情况</div>
<div class="status-summary-chart"></div>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { BoxApi } from '@/utils/boxApi.ts';
const cameras = ref([]);
const cameraCount = ref(0);
const onlineCount = ref(0);
const offlineCount = ref(0);
const exceptionCount = ref(0);
const apiInstance = new BoxApi();
// 分页获取摄像头数据，直到获取所有摄像头数据
const fetchCameras = async () => {
try {
const token = localStorage.getItem('alertToken');
const limit = 20; // 每次请求 20 条数据
let offset = 0; // 从 0 开始
let allCameras = [];
// 第一次请求，用于获取总数
const firstResponse = await apiInstance.getCameras(limit, offset, token);
cameraCount.value = firstResponse.count;
allCameras = firstResponse.results;
// 根据总数继续请求剩余的数据
const total = cameraCount.value;
while (offset + limit < total) {
offset += limit;
const response = await apiInstance.getCameras(limit, offset, token);
allCameras = allCameras.concat(response.results);
}
cameras.value = allCameras;
// 统计在线、离线和异常的摄像头数量
allCameras.forEach(camera => {
if (camera.status === 'online') {
onlineCount.value++;
} else if (camera.status === 'offline') {
offlineCount.value++;
} else {
exceptionCount.value++;
}
});
// 初始化中间的摄像头总数圆环图
initCountChart(cameraCount.value);
// 初始化右侧的在线/离线/异常圆环图
initStatusSummaryChart(onlineCount.value, offlineCount.value, exceptionCount.value);
} catch (error) {
console.error('Error fetching cameras:', error);
}
};
// 初始化摄像头总数圆环图
const initCountChart = (count) => {
const chartDom = document.querySelector('.camera-count-chart');
const myChart = echarts.init(chartDom);
const option = {
series: [
{
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
formatter: '{c}',
fontSize: 24,
},
data: [
{ value: count, name: '总数' }
],
itemStyle: {
color: 'rgba(80,160,225, 1)'
}
}
]
};
myChart.setOption(option);
};
// 初始化在线/离线/异常状态圆环图
const initStatusSummaryChart = (online, offline, exception) => {
const chartDom = document.querySelector('.status-summary-chart');
const myChart = echarts.init(chartDom);
const option = {
series: [
{
type: 'pie',
radius: ['40%', '60%'],
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
},
data: [
{ value: online, name: '在线' },
{ value: offline, name: '离线' },
{ value: exception, name: '异常' }
],
itemStyle: {
color: 'rgba(5,192,145, 1)'
// color: 'rgba(255,151,75, 1)'
}
}
]
};
myChart.setOption(option);
};
onMounted(() => {
fetchCameras();
});
</script>
<style scoped>
.camera-card {
/* background-color: #abcef1; */
/* background-color: linear-gradient(to top, rgba(150, 206, 243, 0.2), rgba(214, 240, 250, 0.3)); */
color: #fff;
/* border-radius: 8px; */
margin: 0;
padding: 0;
}
.channel-card {
background: linear-gradient(to top, rgba(150, 206, 243, 1), rgba(125, 29, 235, 0.3));
border-radius: 12px;
}
.count-card {
background: linear-gradient(to bottom, rgba(246, 130, 85, 1), rgba(252, 186, 38, 0.3));
border-radius: 12px;
}
.online-card {
background: linear-gradient(to top, rgba(112, 158, 228, 1), rgba(87, 204, 243, 0.3));
border-radius: 12px;
}
.camera-header {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #3a4b5c;
}
.camera-row {
margin-top: 0px;
margin-bottom: 0px;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.el-card {
padding: 0;
text-align: center;
background-color: azure
}
.scroll-container {
height: 180px;
/* overflow-y: scroll; */
scrollbar-width: none;
}
/* .scroll-container::-webkit-scrollbar {
display: none;
} */
.status-summary-chart,
.camera-count-chart {
width: 100%;
height: 180px;
}
.el-table {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.el-table th {
background-color: #f5f7fa; /* 表头背景色 */
color: #333; /* 表头字体颜色 */
font-weight: bold;
text-align: center; /* 居中对齐 */
}
</style>

30
src/components/Layout.vue
View File

@ -22,11 +22,15 @@
<template #title><span>告警列表</span></template>
</el-menu-item>
<el-menu-item index="/dataStatistics">
<el-icon><TrendCharts /></el-icon>
<el-icon>
<TrendCharts />
</el-icon>
<template #title><span>数据统计</span></template>
</el-menu-item>
<el-menu-item index="/userList">
<el-icon><Avatar /></el-icon>
<el-icon>
<Avatar />
</el-icon>
<template #title><span>用户管理</span></template>
</el-menu-item>
<el-sub-menu index="1">
@ -36,6 +40,12 @@
</el-icon>
<span>面板测试</span>
</template>
<el-menu-item index="/test">
<el-icon>
<WarningFilled />
</el-icon>
<template #title><span>布局备份</span></template>
</el-menu-item>
<el-menu-item index="/alertChart">
<el-icon>
<WarningFilled />
@ -48,6 +58,12 @@
</el-icon>
<template #title><span>功能点2测试</span></template>
</el-menu-item>
<el-menu-item index="/cameras">
<el-icon>
<document />
</el-icon>
<template #title><span>功能点3测试</span></template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
@ -238,7 +254,8 @@ const onLogout = async () => {
/* 头部样式 */
.nav-header {
background-color: #001529;
/* background-color: #001529; */
background: linear-gradient(to right, rgba(0, 21, 41, 1), rgb(2, 16, 99,0.9));
padding: 10px;
font-size: 18px;
font-weight: bold;
@ -268,6 +285,8 @@ const onLogout = async () => {
background-color: #f5f8fc;
flex-grow: 1;
min-height: 80%;
margin: 0;
padding: 0;
}
/* 页脚样式 */
@ -280,5 +299,8 @@ const onLogout = async () => {
display: flex;
justify-content: center;
text-align: center;
margin: 0;
padding: 0;
/* flex-shrink: 0; */
}</style>
}
</style>

16
src/components/Statistics.vue
View File

@ -44,7 +44,7 @@ const fetchTypeMapping = async (token) => {
const fetchAndProcessEvents = async (token) => {
try {
let currentPage = 1;
const pageSize = 2000; // 每次加载 2000 条
const pageSize = 1000; // 每次加载 2000 条
let allEvents = [];
// 第一次请求，获取告警总数和首批数据
@ -110,6 +110,7 @@ const initChart = () => {
},
itemGap: 20,
data: seriesData.value.map(item => item.name),
show : true
},
series: [
{
@ -118,6 +119,7 @@ const initChart = () => {
radius: '50%',
center: ['50%', '150px'],
data: seriesData.value,
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
@ -126,7 +128,7 @@ const initChart = () => {
}
},
label: {
show: true,
show: false,
},
stillShowZeroSum: false,
}
@ -171,15 +173,20 @@ onMounted(async () => {
<style scoped>
.stats-card {
background-color: #2a3f54;
background-color: #304555;
/* background: linear-gradient(to top, rgba(16, 84, 194, 0.6), rgba(31, 48, 207, 0.7)); */
color: #fff;
border-radius: 8px;
margin: 0;
padding: 0;
/* height: 100vh; */
}
.stats-header {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #3a4b5c;
padding-bottom: 10px;
}
.stats-row {
@ -189,6 +196,7 @@ onMounted(async () => {
.chart {
width: 100%;
height: 445px;
height: 380px;
/* height: 445px; */
}
</style>

101
src/html/AlertManagement.vue
View File

@ -1,23 +1,22 @@
<template>
<div class="alert-container">
<el-row class="top-pan">
<!-- <el-row class="top-pan">
<el-col :sm="24" :md="12" class="panel-section">
<statistics />
</el-col>
<el-col :sm="24" :md="12" class="panel-section">
<alertChart />
</el-col>
</el-row>
</el-row> -->
<el-row class="middle-row">
<span>
告警总数:{{ totalItems }}
告警总数:{{ displayTotalItems }}
</span>
</el-row>
<el-row class="table-row">
<el-col :span="24">
<div class="table-container">
<el-table :data="tableData" style="width:100%; height: 100%;" header-row-class-name="table-header"
:fit="true">
<el-table :data="tableData" style="width:100%; height: 100%;" header-row-class-name="table-header" :fit="true">
<el-table-column prop="id" label="告警编号" min-width="100"></el-table-column>
<el-table-column label="告警类型" min-width="150">
<template v-slot="scope">
@ -82,7 +81,7 @@
<p>备注: {{ selectedRow.note }}</p>
</el-col>
</el-row>
<div class="event-media">
<!-- <div class="event-media">
<div v-for="medium in selectedRow.mediums" :key="medium.id" class="media-container">
<div v-if="medium.name === 'video'" class="media-item video-item">
<p>告警关联视频</p>
@ -93,19 +92,40 @@
<el-image :src="medium.file" fit="contain"></el-image>
</div>
</div>
</div> -->
<div class="event-media" :class="{ 'center-media' :mediums.length === 1 }">
<!-- 告警关联视频 -->
<div v-if="hasVideo" class="media-container video-item">
<p>告警关联视频</p>
<video :src="videoFile" controls @click="openMediaDialog('video', videoFile)"></video>
</div>
<!-- 告警关联图片 -->
<div v-if="hasSnapshot" class="media-container image-item">
<p>告警关联图片</p>
<el-image :src="snapshotFile" fit="contain" @click="openMediaDialog('image', snapshotFile)"></el-image>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div class=""></div>
</span>
</el-dialog>
<el-dialog v-model="mediaDialogVisible" width="70%">
<div v-if="mediaType === 'image'">
<el-image :src="mediaSrc" fit="contain" style="width: 100%;"></el-image>
</div>
<div v-if="mediaType === 'video'">
<video :src="mediaSrc" controls style="width: 100%;"></video>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Statistics from '@/components/Statistics.vue';
import AlertChart from '@/components/AlertChart.vue';
import { ref, reactive, onMounted, computed } from 'vue';
// import Statistics from '@/components/Statistics.vue';
// import AlertChart from '@/components/AlertChart.vue';
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
// 创建 BoxApi 实例
@ -114,6 +134,10 @@ const boxApi = new BoxApi();
// 响应式数据
const tableData = ref([]);
const dialogVisible = ref(false);
const mediaDialogVisible = ref(false);
const mediaType = ref('');
const mediaSrc = ref('');
const selectedRow = ref({});
const mediums = ref([]);
const duration = ref('');
@ -124,8 +148,31 @@ const statusMapping = {
};
const currentPage = ref(1);
const pageSize = ref(20);
const totalItems = ref(0);
const token = ref(null);
const totalItems = ref(0);
const displayTotalItems = ref(0); // 用于展示的数字
const openMediaDialog = (type, src) => {
mediaType.value = type; // 设置媒体类型
mediaSrc.value = src; // 设置媒体源文件
mediaDialogVisible.value = true; // 打开弹窗
};
// 计算属性：根据 mediums 动态判断是否存在视频和图片
const hasVideo = computed(() => mediums.value.some(medium => medium.name === 'video'));
const hasSnapshot = computed(() => mediums.value.some(medium => medium.name === 'snapshot'));
// 获取视频和图片的文件
const videoFile = computed(() => {
const video = mediums.value.find(medium => medium.name === 'video');
return video ? video.file : '';
});
const snapshotFile = computed(() => {
const snapshot = mediums.value.find(medium => medium.name === 'snapshot');
return snapshot ? snapshot.file : '';
});
// 获取类型映射
const fetchTypeMapping = async (token) => {
@ -146,11 +193,32 @@ const fetchEvents = async () => {
const { tableData: data, totalItems: total } = await boxApi.getEvents(token.value, pageSize.value, currentPage.value); // 使用 BoxApi 的 getEvents 方法
tableData.value = data;
totalItems.value = total;
animateNumberChange(total);
} catch (error) {
console.error("Error fetching events data:", error);
}
};
const animateNumberChange = (newTotal) => {
const stepTime = 50; // 每次递增的时间间隔
// const stepCount = Math.abs(newTotal - displayTotalItems.value);
const stepCount = Math.abs(newTotal - displayTotalItems.value) / 20;
const incrementStep = Math.ceil((newTotal - displayTotalItems.value) / stepCount); // 每次递增的值
const step = () => {
if (displayTotalItems.value < newTotal) {
displayTotalItems.value = Math.min(displayTotalItems.value + incrementStep, newTotal);
requestAnimationFrame(step);
} else if (displayTotalItems.value > newTotal) {
displayTotalItems.value = Math.max(displayTotalItems.value - incrementStep, newTotal);
requestAnimationFrame(step);
}
};
step();
};
// 查看告警详情
const handleView = (row) => {
selectedRow.value = row;
@ -209,7 +277,7 @@ onMounted(async () => {
background-color: #f5f7fa;
}
.top-pan {
/* .top-pan {
padding: 0px;
margin: 0px;
display: flex;
@ -223,7 +291,7 @@ onMounted(async () => {
background-color: #fff;
box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
border-radius: 15px;
}
} */
.middle-row {
min-height: 5vw;
@ -233,12 +301,12 @@ onMounted(async () => {
font-size: 30px;
font-weight: bold;
background: linear-gradient(to bottom left, rgb(150, 151, 243), rgb(215, 214, 250));
border-radius: 8px;
/* border-radius: 8px; */
}
.table-container {
width: 100%;
height: 380px;
height: 620px;
min-height: 60%;
overflow-x: auto;
}
@ -257,6 +325,11 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.center-media {
justify-content: center;
}
.media-container {

349
src/html/DataStatistics.vue
View File

@ -1,317 +1,92 @@
<template>
<div class="alert-container">
<el-row class="top-pan">
</el-row>
<el-row class="middle-row">
<span>
告警总数:{{ displayTotalItems }}
</span>
</el-row>
<el-row class="table-row">
<el-col :span="24">
<div class="table-container">
<el-table :data="tableData" style="width:100%; height: 100%;" header-row-class-name="table-header"
:fit="true">
<el-table-column prop="id" label="告警编号" min-width="100"></el-table-column>
<el-table-column label="告警类型" min-width="150">
<template v-slot="scope">
{{ typeMapping[scope.row.types] }}
</template>
</el-table-column>
<el-table-column prop="camera.name" label="告警位置" min-width="150"></el-table-column>
<el-table-column label="告警时间" min-width="200">
<template v-slot="scope">
{{ formatDateTime(scope.row.ended_at) }}
</template>
</el-table-column>
<el-table-column prop="status" label="告警状态" min-width="100">
<template v-slot="scope">
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{
statusMapping[scope.row.status]
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100">
<template v-slot="scope">
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
:current-page="currentPage" :page-size="pageSize" :total="totalItems"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" title="告警详情" width="80%">
<div>
<el-row>
<el-col :span="6">
<p>告警编号: {{ selectedRow.id }}</p>
</el-col>
<el-col :span="6">
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
</el-col>
<el-col :span="6">
<p>告警位置: {{ selectedRow.camera.name }}</p>
</el-col>
<el-col :span="6">
<p>告警时间: {{ selectedRow.formatted_started_at }}</p>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
statusMapping[selectedRow.status]
}}</el-tag></p>
</el-col>
<el-col :span="6">
<p>摄像头编号: {{ selectedRow.camera_id }}</p>
</el-col>
<el-col :span="6">
<p>持续时间: {{ duration }}</p>
</el-col>
<el-col :span="6">
<p>备注: {{ selectedRow.note }}</p>
</el-col>
</el-row>
<div class="event-media">
<div v-for="medium in selectedRow.mediums" :key="medium.id" class="media-container">
<div v-if="medium.name === 'video'" class="media-item video-item">
<p>告警关联视频</p>
<video :src="medium.file" controls></video>
</div>
<div v-if="medium.name === 'snapshot'" class="media-item image-item">
<p>告警关联图片</p>
<el-image :src="medium.file" fit="contain"></el-image>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div class=""></div>
</span>
</el-dialog>
</div>
<div class="alert-container">
<el-row class="bottom-pan">
<el-col :span="24" class="panel-bottom">
<Cameras/>
</el-col>
</el-row>
<el-row class="top-pan">
<el-col :sm="24" :md="12" class="panel-top-left">
<statistics />
<!-- <div class="placeholder">预留块区域</div> -->
</el-col>
<el-col :sm="24" :md="12" class="panel-top-right">
<alertChart />
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Statistics from '@/components/Statistics.vue';
import AlertChart from '@/components/AlertChart.vue';
import Cameras from '@/components/Cameras.vue';
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
// 创建 BoxApi 实例
const boxApi = new BoxApi();
// 响应式数据
const tableData = ref([]);
const dialogVisible = ref(false);
const selectedRow = ref({});
const mediums = ref([]);
const duration = ref('');
const typeMapping = reactive({});
const statusMapping = {
'pending': '待处理',
'closed': '已处理'
};
const currentPage = ref(1);
const pageSize = ref(20);
const token = ref(null);
const totalItems = ref(0);
const displayTotalItems = ref(0); // 用于展示的数字
// 获取类型映射
const fetchTypeMapping = async (token) => {
try {
const algorithms = await boxApi.getAlgorithms(token); // 使用 BoxApi 的 getAlgorithms 方法
const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
algorithms.forEach((algorithm) => {
typeMapping[algorithm.code_name] = algorithm.name;
});
} catch (error) {
console.error("Error fetching algorithms:", error);
}
try {
const algorithms = await boxApi.getAlgorithms(token); // 使用 BoxApi 的 getAlgorithms 方法
const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
algorithms.forEach((algorithm) => {
typeMapping[algorithm.code_name] = algorithm.name;
});
} catch (error) {
console.error("Error fetching algorithms:", error);
}
};
// 获取告警数据
const fetchEvents = async () => {
try {
const { tableData: data, totalItems: total } = await boxApi.getEvents(token.value, pageSize.value, currentPage.value);
tableData.value = data;
totalItems.value = total;
animateNumberChange(total);
} catch (error) {
console.error("Error fetching events data:", error);
}
};
const animateNumberChange = (newTotal) => {
const stepTime = 50; // 每次递增的时间间隔
// const stepCount = Math.abs(newTotal - displayTotalItems.value);
const stepCount = Math.abs(newTotal - displayTotalItems.value)/20;
const incrementStep = Math.ceil((newTotal - displayTotalItems.value) / stepCount); // 每次递增的值
const step = () => {
if (displayTotalItems.value < newTotal) {
displayTotalItems.value = Math.min(displayTotalItems.value + incrementStep, newTotal);
requestAnimationFrame(step);
} else if (displayTotalItems.value > newTotal) {
displayTotalItems.value = Math.max(displayTotalItems.value - incrementStep, newTotal);
requestAnimationFrame(step);
}
};
step();
};
// 查看告警详情
const handleView = (row) => {
selectedRow.value = row;
duration.value = calculateDuration(row.started_at, row.ended_at);
row.formatted_started_at = formatDateTime(row.started_at);
dialogVisible.value = true;
mediums.value = row.mediums || [];
};
// 分页处理
const handlePageChange = (page) => {
currentPage.value = page;
fetchEvents();
};
// 页大小处理
const handleSizeChange = (size) => {
pageSize.value = size;
fetchEvents();
};
// 计算持续时间
const calculateDuration = (started_at, ended_at) => {
const start = new Date(started_at);
const end = new Date(ended_at);
const durationMs = end - start;
const minutes = Math.floor(durationMs / 60000);
const seconds = ((durationMs % 60000) / 1000).toFixed(0);
return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
};
// 格式化日期时间
const formatDateTime = (datetime) => {
const date = new Date(datetime);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 页面加载后执行
onMounted(async () => {
token.value = localStorage.getItem('alertToken');
await fetchTypeMapping(token.value);
await fetchEvents();
token.value = localStorage.getItem('alertToken');
await fetchTypeMapping(token.value);
});
</script>
<style scoped>
.alert-container {
padding: 0;
margin: 0;
background-color: #f5f7fa;
padding: 0;
margin: 0;
background-color: #f5f7fa;
}
/* .top-pan {
padding: 0px;
margin: 0px;
display: flex;
gap: 10px;
background-color: #fff;
overflow: auto;
} */
/* .panel-section {
flex: 1;
background-color: #fff;
box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
border-radius: 15px;
} */
.middle-row {
min-height: 5vw;
display: flex;
justify-content: center;
align-content: center;
font-size: 30px;
font-weight: bold;
background: linear-gradient(to bottom left, rgb(150, 151, 243), rgb(215, 214, 250));
border-radius: 8px;
.top-pan {
/* padding: 10px; */
/* margin-bottom: 10px; */
display: flex;
gap: 10px;
background-color: #fff;
overflow: hidden;
height: 55vh;
}
.bottom-pan{
margin: 0;
padding: 0;
}
.table-container {
width: 100%;
height: 380px;
min-height: 60%;
overflow-x: auto;
.panel-top-left {
flex: 1;
display: flex;
flex-direction: column;
}
.table-header {
background-color: #f7f8fa;
font-weight: bold;
.panel-top-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
::v-deep .el-table th.el-table__cell {
background-color: #000;
color: #fff;
}
.event-media {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.media-container {
flex: 0 0 48%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-sizing: border-box;
padding: 10px;
}
.video-item video,
.image-item img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-item p,
.image-item p {
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}
.pagination-container {
display: flex;
justify-content: flex-end;
background-color: #e8e9e4;
}
::v-deep .pagination-container .el-pagination__total,
::v-deep .pagination-container .el-pagination__goto,
::v-deep .pagination-container .el-pagination__classifier {
color: #000;
.panel-bottom{
margin: 0;
padding: 0;
}
</style>

363
src/html/Test.vue
View File

@ -1,12 +1,355 @@
<template>
<div>
nihao
<div class="alert-container">
<el-row class="top-pan">
<el-col :sm="24" :md="12" class="panel-section">
<statistics />
</el-col>
<el-col :sm="24" :md="12" class="panel-section">
<alertChart />
</el-col>
</el-row>
<el-row class="middle-row">
<span>
告警总数:{{ displayTotalItems }}
</span>
</el-row>
<el-row class="table-row">
<el-col :span="24">
<div class="table-container">
<el-table :data="tableData" style="width:100%; height: 100%;" header-row-class-name="table-header" :fit="true">
<el-table-column prop="id" label="告警编号" min-width="100"></el-table-column>
<el-table-column label="告警类型" min-width="150">
<template v-slot="scope">
{{ typeMapping[scope.row.types] }}
</template>
</el-table-column>
<el-table-column prop="camera.name" label="告警位置" min-width="150"></el-table-column>
<el-table-column label="告警时间" min-width="200">
<template v-slot="scope">
{{ formatDateTime(scope.row.ended_at) }}
</template>
</el-table-column>
<el-table-column prop="status" label="告警状态" min-width="100">
<template v-slot="scope">
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[scope.row.status]
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100">
<template v-slot="scope">
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currentPage"
:page-size="pageSize" :total="totalItems" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" title="告警详情" width="80%">
<div>
<el-row>
<el-col :span="6">
<p>告警编号: {{ selectedRow.id }}</p>
</el-col>
<el-col :span="6">
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
</el-col>
<el-col :span="6">
<p>告警位置: {{ selectedRow.camera.name }}</p>
</el-col>
<el-col :span="6">
<p>告警时间: {{ selectedRow.formatted_started_at }}</p>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
statusMapping[selectedRow.status]
}}</el-tag></p>
</el-col>
<el-col :span="6">
<p>摄像头编号: {{ selectedRow.camera_id }}</p>
</el-col>
<el-col :span="6">
<p>持续时间: {{ duration }}</p>
</el-col>
<el-col :span="6">
<p>备注: {{ selectedRow.note }}</p>
</el-col>
</el-row>
<!-- <div class="event-media">
<div v-for="medium in selectedRow.mediums" :key="medium.id" class="media-container">
<div v-if="medium.name === 'video'" class="media-item video-item">
<p>告警关联视频</p>
<video :src="medium.file" controls></video>
</div>
<div v-if="medium.name === 'snapshot'" class="media-item image-item">
<p>告警关联图片</p>
<el-image :src="medium.file" fit="contain"></el-image>
</div>
</div>
</div> -->
<div class="event-media" :class="{ 'center-media': mediums.length === 1 }">
<!-- 告警关联视频 -->
<div v-if="hasVideo" class="media-container">
<p>告警关联视频</p>
<video :src="videoFile" controls></video>
</div>
<!-- 告警关联图片 -->
<div v-if="hasSnapshot" class="media-container">
<p>告警关联图片</p>
<el-image :src="snapshotFile" fit="contain"></el-image>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div class=""></div>
</span>
</el-dialog>
</div>
</template>
<script lang="ts">
</script>
<style scoped>
</style>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import Statistics from '@/components/Statistics.vue';
import AlertChart from '@/components/AlertChart.vue';
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
// 创建 BoxApi 实例
const boxApi = new BoxApi();
// 响应式数据
const tableData = ref([]);
const dialogVisible = ref(false);
const selectedRow = ref({});
const mediums = ref([]);
const duration = ref('');
const typeMapping = reactive({});
const statusMapping = {
'pending': '待处理',
'closed': '已处理'
};
const currentPage = ref(1);
const pageSize = ref(20);
const token = ref(null);
const totalItems = ref(0);
const displayTotalItems = ref(0); // 用于展示的数字
// 计算属性：根据 mediums 动态判断是否存在视频和图片
const hasVideo = computed(() => mediums.value.some(medium => medium.name === 'video'));
const hasSnapshot = computed(() => mediums.value.some(medium => medium.name === 'snapshot'));
// 获取视频和图片的文件
const videoFile = computed(() => {
const video = mediums.value.find(medium => medium.name === 'video');
return video ? video.file : '';
});
const snapshotFile = computed(() => {
const snapshot = mediums.value.find(medium => medium.name === 'snapshot');
return snapshot ? snapshot.file : '';
});
// 获取类型映射
const fetchTypeMapping = async (token) => {
try {
const algorithms = await boxApi.getAlgorithms(token); // 使用 BoxApi 的 getAlgorithms 方法
const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
algorithms.forEach((algorithm) => {
typeMapping[algorithm.code_name] = algorithm.name;
});
} catch (error) {
console.error("Error fetching algorithms:", error);
}
};
// 获取告警数据
const fetchEvents = async () => {
try {
const { tableData: data, totalItems: total } = await boxApi.getEvents(token.value, pageSize.value, currentPage.value); // 使用 BoxApi 的 getEvents 方法
tableData.value = data;
totalItems.value = total;
animateNumberChange(total);
} catch (error) {
console.error("Error fetching events data:", error);
}
};
const animateNumberChange = (newTotal) => {
const stepTime = 50; // 每次递增的时间间隔
// const stepCount = Math.abs(newTotal - displayTotalItems.value);
const stepCount = Math.abs(newTotal - displayTotalItems.value) / 20;
const incrementStep = Math.ceil((newTotal - displayTotalItems.value) / stepCount); // 每次递增的值
const step = () => {
if (displayTotalItems.value < newTotal) {
displayTotalItems.value = Math.min(displayTotalItems.value + incrementStep, newTotal);
requestAnimationFrame(step);
} else if (displayTotalItems.value > newTotal) {
displayTotalItems.value = Math.max(displayTotalItems.value - incrementStep, newTotal);
requestAnimationFrame(step);
}
};
step();
};
// 查看告警详情
const handleView = (row) => {
selectedRow.value = row;
duration.value = calculateDuration(row.started_at, row.ended_at);
row.formatted_started_at = formatDateTime(row.started_at);
dialogVisible.value = true;
mediums.value = row.mediums || [];
};
// 分页处理
const handlePageChange = (page) => {
currentPage.value = page;
fetchEvents();
};
// 页大小处理
const handleSizeChange = (size) => {
pageSize.value = size;
fetchEvents();
};
// 计算持续时间
const calculateDuration = (started_at, ended_at) => {
const start = new Date(started_at);
const end = new Date(ended_at);
const durationMs = end - start;
const minutes = Math.floor(durationMs / 60000);
const seconds = ((durationMs % 60000) / 1000).toFixed(0);
return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
};
// 格式化日期时间
const formatDateTime = (datetime) => {
const date = new Date(datetime);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 页面加载后执行
onMounted(async () => {
token.value = localStorage.getItem('alertToken');
await fetchTypeMapping(token.value);
await fetchEvents();
});
</script>
<style scoped>
.alert-container {
padding: 0;
margin: 0;
background-color: #f5f7fa;
}
.top-pan {
padding: 0px;
margin: 0px;
display: flex;
gap: 10px;
background-color: #fff;
overflow: auto;
}
.panel-section {
flex: 1;
background-color: #fff;
box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transform: scale(0.8);
transform-origin: center center;
}
.middle-row {
min-height: 5vw;
display: flex;
justify-content: center;
align-content: center;
font-size: 30px;
font-weight: bold;
background: linear-gradient(to bottom left, rgb(150, 151, 243), rgb(215, 214, 250));
border-radius: 8px;
}
.table-container {
width: 100%;
height: 650px;
min-height: 60%;
overflow-x: auto;
}
.table-header {
background-color: #f7f8fa;
font-weight: bold;
}
::v-deep .el-table th.el-table__cell {
background-color: #000;
color: #fff;
}
.event-media {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.center-media {
justify-content: center;
}
.media-container {
flex: 0 0 48%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-sizing: border-box;
padding: 10px;
}
.video-item video,
.image-item img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-item p,
.image-item p {
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}
.pagination-container {
display: flex;
justify-content: flex-end;
background-color: #e8e9e4;
}
::v-deep .pagination-container .el-pagination__total,
::v-deep .pagination-container .el-pagination__goto,
::v-deep .pagination-container .el-pagination__classifier {
color: #000;
}
</style>

7
src/router/index.ts
View File

@ -9,6 +9,7 @@ import Login from '@/html/LoginView.vue';
import UserList from '@/html/UserList.vue';
import Home from '@/html/Home.vue';
import DataStatistics from '@/html/DataStatistics.vue';
import Cameras from '@/components/Cameras.vue';
const routes = [
{
@ -58,6 +59,12 @@ const routes = [
name: 'DataStatistics',
component: DataStatistics,
meta: { requiresAuth: true }
},
{
path:'/cameras',
name: 'Cameras',
component: Cameras,
meta: { requiresAuth: true }
}
]
},