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

告警弹窗

This commit is contained in:
龚皓 2024-11-26 16:24:48 +08:00
parent 9081420148
commit 7551409394
1 changed files with 418 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
src/components/Max/LeftBottom.vue
View File

@ -19,16 +19,14 @@
<div class="table-container"> <div class="table-container">
<el-table :data="tableData" @row-click="handleRowClick" class="table-part"> <el-table :data="tableData" @row-click="handleRowClick" class="table-part">
<el-table-column v-show="false" prop="id" label="告警编号" v-if="false"></el-table-column> <el-table-column v-show="false" prop="id" label="告警编号" v-if="false"></el-table-column>
<el-table-column label="告警类型" :width="adjustedWidths[0]" align="center" <el-table-column label="告警类型" :width="adjustedWidths[0]" align="center" :show-overflow-tooltip="true">
:show-overflow-tooltip="true">
<template v-slot="scope"> <template v-slot="scope">
{{ typeMapping[scope.row.types] }} {{ typeMapping[scope.row.types] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="camera.name" label="告警位置" :width="adjustedWidths[1]" align="center" <el-table-column prop="camera.name" label="告警位置" :width="adjustedWidths[1]" align="center"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="告警时间" :width="adjustedWidths[2]" align="center" <el-table-column label="告警时间" :width="adjustedWidths[2]" align="center" :show-overflow-tooltip="true">
:show-overflow-tooltip="true">
<template v-slot="scope"> <template v-slot="scope">
{{ formatDateTime(scope.row.ended_at) }} {{ formatDateTime(scope.row.ended_at) }}
</template> </template>
@ -62,7 +60,7 @@
<el-col :span="12" class="dialog-left"> <el-col :span="12" class="dialog-left">
<el-row gutter class="dialog-image-container"> <el-row gutter class="dialog-image-container">
<template v-if="hasSnapshot"> <template v-if="hasSnapshot">
<el-image :src="snapshotFile"></el-image> <el-image :src="snapshotFile" @click="handleImageClick(snapshotFile)" style="cursor: pointer;"></el-image>
</template> </template>
<!-- <template v-if="hasVideo"> <!-- <template v-if="hasVideo">
<video :src="videoFile" controls></video> <video :src="videoFile" controls></video>
@ -109,46 +107,58 @@
</el-row> </el-row>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog v-model="previewVisible" width="60%" custom-class="image-preview-dialog" :close-on-click-modal="true">
<img :src="previewImage" alt="预览图片" style="width: 100%; height: auto; display: block; margin: auto;" />
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'; import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { BoxApi } from '@/utils/boxApi.ts'; import { BoxApi } from '@/utils/boxApi.ts';
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
const boxApi = new BoxApi(); const boxApi = new BoxApi();
const tableData = ref([]); const tableData = ref([]);
const dialogVisible = ref(false); const dialogVisible = ref(false);
const remark = ref(""); const remark = ref("");
const selectedRow = ref({}); const selectedRow = ref({});
const typeMapping = reactive({}); const typeMapping = reactive({});
const currentPage = ref(1); const currentPage = ref(1);
const pageSize = ref(20); const pageSize = ref(20);
const totalItems = ref(0); const totalItems = ref(0);
const displayTotalItems = ref(0); const displayTotalItems = ref(0);
const token = ref(null); const token = ref(null);
const apiInstance = new BoxApi(); const apiInstance = new BoxApi();
const statusMapping = { const statusMapping = {
'pending': '待处理', 'pending': '待处理',
'assigned': '处理中', 'assigned': '处理中',
'closed': '已处理' 'closed': '已处理'
}; };
const duration = ref(''); const duration = ref('');
const hasSnapshot = ref(false); const hasSnapshot = ref(false);
const hasVideo = ref(false); const hasVideo = ref(false);
const snapshotFile = ref(""); const snapshotFile = ref("");
const videoFile = ref(""); const videoFile = ref("");
const originalWidths = [97, 150, 160]; // 默认宽度 const originalWidths = [97, 150, 160]; // 默认宽度
const adjustedWidths = ref([...originalWidths]); const adjustedWidths = ref([...originalWidths]);
const baseWidth = 2150; const baseWidth = 2150;
const previewVisible = ref(false); // 控制预览弹窗显示
const previewImage = ref(''); // 预览的图片路径
const formatDateTimeToISO = (datetime) => { const handleImageClick = (imagePath) => {
previewImage.value = imagePath; // 设置预览图片路径
previewVisible.value = true; // 显示预览弹窗
};
const formatDateTimeToISO = (datetime) => {
return new Date(datetime).toISOString().replace('.000', ''); return new Date(datetime).toISOString().replace('.000', '');
}; };
const adjustColumnWidths = () => { const adjustColumnWidths = () => {
const currentWidth = window.innerWidth; const currentWidth = window.innerWidth;
// console.log(">>>>>>>>>>", currentWidth); // console.log(">>>>>>>>>>", currentWidth);
const scale = currentWidth / baseWidth; const scale = currentWidth / baseWidth;
@ -163,17 +173,17 @@
// nextTick(() => { // nextTick(() => {
// }); // });
}; };
// const tableConfig = ref({ // const tableConfig = ref({
// header: ['告警类型', '告警位置', '告警时间'], // header: ['告警类型', '告警位置', '告警时间'],
// data: [], // data: [],
// rowNum: 5, // rowNum: 5,
// columnWidth: [100, 160, 190], // columnWidth: [100, 160, 190],
// carousel: 'single', // carousel: 'single',
// }); // });
const fetchTypeMapping = async (token) => { const fetchTypeMapping = async (token) => {
try { try {
const algorithms = await boxApi.getAlgorithms(token); const algorithms = await boxApi.getAlgorithms(token);
// console.log("Algorithms:", algorithms); // console.log("Algorithms:", algorithms);
@ -183,9 +193,9 @@
} catch (error) { } catch (error) {
console.error("Error fetching algorithms:", error); console.error("Error fetching algorithms:", error);
} }
}; };
const fetchEvents = async () => { const fetchEvents = async () => {
try { try {
const token = localStorage.getItem('alertToken'); const token = localStorage.getItem('alertToken');
const limit = 1000; const limit = 1000;
@ -198,7 +208,7 @@
const timeAfter = formatDateTimeToISO(startOfToday); const timeAfter = formatDateTimeToISO(startOfToday);
// console.log("Start of today:", timeAfter); // console.log("Start of today:", timeAfter);
// const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage); // const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage);
const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage,timeBefore, timeAfter); const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage, timeBefore, timeAfter);
// console.log("Total items:", firstResponse); // console.log("Total items:", firstResponse);
const total = firstResponse.count; const total = firstResponse.count;
@ -221,9 +231,9 @@
} catch (error) { } catch (error) {
console.error("Error fetching events data:", error); console.error("Error fetching events data:", error);
} }
}; };
const getDateParams = () => { const getDateParams = () => {
const today = new Date(); const today = new Date();
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()); const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
@ -232,8 +242,8 @@
startOfToday, startOfToday,
endOfToday, endOfToday,
}; };
}; };
const formatDateTime = (datetime) => { const formatDateTime = (datetime) => {
const date = new Date(datetime); const date = new Date(datetime);
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
@ -242,18 +252,18 @@
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0'); const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}; };
const calculateDuration = (started_at, ended_at) => { const calculateDuration = (started_at, ended_at) => {
const start = new Date(started_at); const start = new Date(started_at);
const end = new Date(ended_at); const end = new Date(ended_at);
const durationMs = end - start; const durationMs = end - start;
const minutes = Math.floor(durationMs / 60000); const minutes = Math.floor(durationMs / 60000);
const seconds = ((durationMs % 60000) / 1000).toFixed(0); const seconds = ((durationMs % 60000) / 1000).toFixed(0);
return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`; return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
}; };
const handleRowClick = (row) => { const handleRowClick = (row) => {
selectedRow.value = row; selectedRow.value = row;
duration.value = calculateDuration(row.started_at, row.ended_at); duration.value = calculateDuration(row.started_at, row.ended_at);
row.formatted_started_at = formatDateTime(row.started_at); row.formatted_started_at = formatDateTime(row.started_at);
@ -275,35 +285,41 @@
} }
}); });
dialogVisible.value = true; dialogVisible.value = true;
}; };
const handlePageChange = (page) => { const handlePageChange = (page) => {
currentPage.value = page; currentPage.value = page;
fetchEvents(); fetchEvents();
}; };
// const calculateColumnWidths = () => { // const calculateColumnWidths = () => {
// const containerWidth = document.querySelector('.table-container').clientWidth; // const containerWidth = document.querySelector('.table-container').clientWidth;
// }; // };
onMounted(async () => { onMounted(async () => {
token.value = localStorage.getItem('alertToken'); token.value = localStorage.getItem('alertToken');
await fetchTypeMapping(token.value); await fetchTypeMapping(token.value);
await fetchEvents(); await fetchEvents();
await adjustColumnWidths(); await adjustColumnWidths();
window.addEventListener('resize', adjustColumnWidths); window.addEventListener('resize', adjustColumnWidths);
}); const globalTimerStore = useGlobalTimerStore();
globalTimerStore.registerCallback(fetchEvents);
globalTimerStore.startTimer();
});
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('resize', adjustColumnWidths); window.removeEventListener('resize', adjustColumnWidths);
}); const globalTimerStore = useGlobalTimerStore();
</script> globalTimerStore.unregisterCallback(fetchEvents);
});
</script>
<style scoped> <style scoped>
.alert-container { .alert-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -312,67 +328,67 @@
margin: 0 0 0 1vw; margin: 0 0 0 1vw;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
} }
.table-continer { .table-continer {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.table-row:hover { .table-row:hover {
cursor: pointer; cursor: pointer;
} }
.title-count { .title-count {
width: 80%; width: 80%;
text-align: center; text-align: center;
/* background-color: transparent; */ /* background-color: transparent; */
} }
/* .total-text{ /* .total-text{
padding-right: 1vw; padding-right: 1vw;
} */ } */
/* title-row内容水平上下居中 */ /* title-row内容水平上下居中 */
.title-row { .title-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* total-row左右等分，分别靠左和靠右 */ /* total-row左右等分，分别靠左和靠右 */
.total-row { .total-row {
display: flex; display: flex;
/* justify-content: space-between; */ /* justify-content: space-between; */
justify-content: right; justify-content: right;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
padding-right: 0vw; padding-right: 0vw;
} }
.dialog-row { .dialog-row {
gap: 30px; gap: 30px;
display: flex; display: flex;
text-align: left; text-align: left;
flex-direction: row; flex-direction: row;
} }
.dialog-image-container { .dialog-image-container {
gap: 20px; gap: 20px;
} }
.el-dialog .el-image, .el-dialog .el-image,
.el-dialog video { .el-dialog video {
width: 100%; width: 100%;
} }
/* 基础表格样式 */ /* 基础表格样式 */
::v-deep .el-table { ::v-deep .el-table {
color: white; color: white;
font-size: 13px; font-size: 13px;
/* font-weight: bold; */ /* font-weight: bold; */
@ -380,11 +396,11 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 14vh; height: 14vh;
} }
/* 表头和单元格基本样式 */ /* 表头和单元格基本样式 */
::v-deep .el-table td { ::v-deep .el-table td {
border: none; border: none;
background-color: #001529; background-color: #001529;
transition: border 0.3s ease, background-color 0.3s ease; transition: border 0.3s ease, background-color 0.3s ease;
@ -394,40 +410,42 @@
/* white-space: nowrap; */ /* white-space: nowrap; */
/* overflow: hidden; */ /* overflow: hidden; */
/* text-overflow: ellipsis; */ /* text-overflow: ellipsis; */
} }
/* 去掉中间数据的分割线 */ /* 去掉中间数据的分割线 */
/* ::v-deep .el-table .el-table__row>td{ /* ::v-deep .el-table .el-table__row>td{
border: none; border: none;
} */ } */
.table-container >>> .el-table__row>td{ .table-container>>>.el-table__row>td {
border: none; border: none;
} }
.table-container >>> .el-table th.is-leaf{
border: none;
}
::v-deep .el-table__inner-wrapper::before{
height: 0;
}
::v-deep .el-table thead th { .table-container>>>.el-table th.is-leaf {
border: none;
}
::v-deep .el-table__inner-wrapper::before {
height: 0;
}
::v-deep .el-table thead th {
color: white; color: white;
font-weight: bold; font-weight: bold;
background-color: #001529; background-color: #001529;
padding: 0; padding: 0;
} }
::v-deep .el-table .el-table__cell:hover { ::v-deep .el-table .el-table__cell:hover {
background-color: transparent; background-color: transparent;
color: rgb(238, 150, 49); color: rgb(238, 150, 49);
/* font-size: 26px; */ /* font-size: 26px; */
/* 保持文本为白色 */ /* 保持文本为白色 */
} }
.el-tooltip__popper { .el-tooltip__popper {
font-size: 26px; font-size: 26px;
max-width:50% max-width: 50%
} }
</style> </style>