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

告警列表

This commit is contained in:
龚皓 2024-09-30 15:48:48 +08:00
parent 8acedde40f
commit 677804fbf6
1 changed files with 166 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

367
src/html/AlertManagement.vue
View File

@ -1,28 +1,42 @@
<template>
<div class="home">
<el-row>
<el-col :span="16">
<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>
告警总数:{{ totalItems }}
</span>
</el-row>
<el-row class="table-row">
<el-col :span="24">
<div class="table-container">
<el-table :data="paginatedData">
<el-table-column prop="id" label="告警编号" width="140"></el-table-column>
<el-table-column label="告警类型" width="140">
<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] || codenameTranslate(scope.row.types) }} -->
{{ typeMapping[scope.row.types] }}
</template>
</el-table-column>
<el-table-column prop="camera.name" label="告警位置" width="180"></el-table-column>
<el-table-column label="告警时间" width="180">
<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.started_at) }}
{{ formatDateTime(scope.row.ended_at) }}
</template>
</el-table-column>
<el-table-column prop="status" label="告警状态" width="140">
<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>
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[scope.row.status]
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="140">
<el-table-column label="操作" min-width="100">
<template v-slot="scope">
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
</template>
@ -30,23 +44,11 @@
</el-table>
</div>
<div class="pagination-container">
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-size="pageSize" :current-page.sync="currentPage" @current-change="handlePageChange"
@size-change="handleSizeChange">
<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-col :span="8">
<div class="right-panel">
<div class="panel-section">
<statistics />
</div>
<div class="panel-section">
<alertChart />
</div>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" title="告警详情" width="80%">
<div>
@ -55,7 +57,6 @@
<p>告警编号: {{ selectedRow.id }}</p>
</el-col>
<el-col :span="6">
<!-- <p>告警类型: {{ typeMapping[selectedRow.types] || codenameTranslate(selectedRow.types) }}</p> -->
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
</el-col>
<el-col :span="6">
@ -67,7 +68,8 @@
</el-row>
<el-row>
<el-col :span="6">
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[selectedRow.status]
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
statusMapping[selectedRow.status]
}}</el-tag></p>
</el-col>
<el-col :span="6">
@ -100,222 +102,180 @@
</div>
</template>
<script>
import * as echarts from 'echarts';
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Statistics from '@/components/Statistics.vue';
import AlertChart from '@/components/AlertChart.vue';
import { login, getEvents, initCodeNameMap, codenameTranslate, getAlgorithms } from '@/utils/superbox.js';
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
const username = 'turingvideo';
const password = '1234qwer!';
// 创建 BoxApi 实例
const boxApi = new BoxApi();
export default {
name: 'AlertManagement',
components: {
Statistics,
AlertChart,
},
data() {
return {
tableData: [],
dialogVisible: false,
selectedRow: {},
mediums: {},
duration: '',
typeMapping: {
// 'abnormal:525': '黑屏检测',
// 'car_blocking:512': '车辆拥塞',
// 'car_blocking:514': '违规停车',
// 'escalator_status:518': '扶梯运行状态',
// 'gathering:520': '人员密集',
// 'gathering:521': '保洁点名',
// 'intrude:513': '入侵检测',
// 'long_term_door_status:526': '长期门状态检测',
// 'lying_down:527': '人员倒地',
// 'minizawu:531': '杂物堆积',
// 'minizawu:532': '杂物堆积',
// 'personnel_stay:535': '人员逗留',
// 'vacant:524': '人员离岗',
// 'zawu:516': '饮料垃圾检测',
// 'zawu:517': '垃圾桶满溢',
// 'zawu:519': '违规放置',
// 'zawu:523': '绿化带垃圾检测',
},
statusMapping: {
'pending': '待处理',
'closed': '已处理'
},
currentPage: 1,
pageSize: 20,
// 响应式数据
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 totalItems = ref(0);
const token = ref(null);
}
},
async created() {
try {
const token = await login(username, password);
// await initCodeNameMap(token);
this.tableData = await getEvents(token);
this.typeMapping = await this.fetchTypeMapping(token);
console.log(this.tableData);
} catch (error) {
console.error("Error fetching events:", error);
}
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.tableData.slice(start, end);
}
},
methods: {
async fetchTypeMapping(token) {
let algorithms = await getAlgorithms(token);
const additionalMappings = [
{ code_name: 'minizawu:532', name: '杂物堆积' },
];
algorithms = algorithms.concat(additionalMappings);
let mapping = {};
algorithms.forEach((algorithm) => {
mapping[algorithm.code_name] = algorithm.name;
});
// console.log("mapping: ", mapping);
return mapping;
},
handleView(row) {
this.selectedRow = row;
this.duration = this.calculateDuration(row.started_at, row.ended_at);
row.formatted_started_at = this.formatDateTime(row.started_at);
// console.log("duration: ", row.started_at);
// console.log("duration: ", row.ended_at);
// console.log("duration: ", this.duration);
this.dialogVisible = true;
this.mediums = row.mediums || {};
if (Array.isArray(row.mediums)) {
row.mediums.forEach(medium => {
// console.log("medium: ", medium.file);
// console.log("medium: ", medium.id);
});
} else {
// console.log("No mediums available");
}
},
handlePageChange(page) {
this.currentPage = page;
},
handleSizeChange(size) {
this.pageSize = size;
},
calculateDuration(started_at, ended_at) {
const start = new Date(started_at);
const end = new Date(ended_at);
const duration = end - start;
const minutes = Math.floor(duration / 60000);
const seconds = ((duration % 60000) / 1000).toFixed(0);
return `${minutes}分${(seconds < 10 ? '0' : '')}${seconds}秒`;
},
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}`;
}
// 获取类型映射
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;
} catch (error) {
console.error("Error fetching events data:", error);
}
};
// 查看告警详情
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>
.home {
padding: 40px;
.alert-container {
padding: 0;
margin: 0;
background-color: #f5f7fa;
}
.breadcrumb {
margin-bottom: 30px;
}
.top-scroll {
width: 100%;
overflow-x: auto;
}
.top-scroll-content {
/* 高度滚动条显示出来默认值 */
height: 1px;
}
.table-container {
width: 80%;
max-height: 1000px;
overflow-x: auto;
padding-left: 7%;
}
.right-panel {
.top-pan {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 10px 10px 400px 10px;
background-color: #f5f5f5;
height: 600px;
overflow-y: auto;
gap: 10px;
background-color: #fff;
overflow: auto;
}
.panel-section {
flex: 1;
background-color: #fff;
padding: 20px;
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;
}
/* 弹窗> 显示左右等分*/
.table-container {
width: 100%;
height: 380px;
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;
flex-direction: column;
gap: 10px;
margin-top: 20px; */
display: flex;
justify-content: space-between;
/* 添加这个属性来左右等分 */
flex-wrap: wrap;
}
.media-container {
flex: 0 0 48%;
/* 确保每块区域占据一行的48% */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 使内容在区域内居中 */
margin-bottom: 20px;
/* 添加底部间距，使多个元素之间有间隔 */
box-sizing: border-box;
/* 确保padding和border不会影响大小 */
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,
@ -328,7 +288,12 @@ export default {
.pagination-container {
display: flex;
justify-content: flex-end;
margin-top: 20px;
margin-right: 150px;
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>