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

格式化日期，格式化类型映射,mitt实例化监听弹窗开关

This commit is contained in:
龚皓 2024-11-22 17:26:47 +08:00
parent eeac7f589c
commit 6c39f1aa5f
1 changed files with 105 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/App.vue
View File

@ -1,95 +1,119 @@
<template>
<div id="app" class="app-container">
<router-view></router-view>
<el-dialog
title="告警详情"
v-model="globalDialogVisible"
width="50%"
@close="handleDialogClose">
<el-row :gutter="30" style="margin-bottom: 2vh;">
<el-col span="8">告警编号：{{ globalDialogContent.id }}</el-col>
<el-col span="8">摄像头名称：{{ globalDialogContent.camera?.name }}</el-col>
<el-col span="8">告警类型：{{ algorithmMap.get(globalDialogContent.types) || '未知类型' }}</el-col>
<el-dialog title="告警提示" v-model="globalDialogVisible" width="50%" @close="handleDialogClose">
<el-row style="margin-bottom: 2vh;">
<el-col :span="17" style="text-align: center;">
<img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl"
style="max-width: 100%;" />
<!-- 可选的视频展示 -->
<!-- <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video> -->
</el-col>
<el-col :span="7" >
<el-row class="dialog-event-col">
<el-col :span="24"><strong >告警编号</strong>：{{ globalDialogContent.id }}</el-col>
<el-col :span="24"><strong >告警点位</strong>：{{ globalDialogContent.camera?.name }}</el-col>
<el-col :span="24"><strong >告警类型</strong>：{{ globalDialogContent.types }}</el-col>
<el-col :span="24"><strong >告警时间</strong>：{{ globalDialogContent.started_at }}</el-col>
</el-row>
</el-col>
</el-row>
<img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl" style="max-width: 100%;" />
<video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video>
</el-dialog>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import eventBus from '@/utils/eventBus';
import { BoxApi } from '@/utils/boxApi';
import dayjs from 'dayjs';
interface GlobalDialogContent {
id: number | null;
camera_id: number | null;
camera: { name: string };
types: string | null;
started_at: string | null; // 支持 null 或字符串类型
snapshotUrl: string;
videoUrl: string;
}
const apiInstance = new BoxApi();
export default {
setup() {
const globalDialogVisible = ref(false);
const globalDialogContent = ref({
id: null,
camera_id: null,
camera: { name: '' },
types: null,
started_at: null,
snapshotUrl: '',
videoUrl: ''
});
const globalDialogVisible = ref(false); // 控制全局对话框的可见性
const globalDialogContent = ref<GlobalDialogContent>({
id: null,
camera_id: null,
camera: { name: '' },
types: null,
started_at: null,
snapshotUrl: '',
videoUrl: ''
});
const algorithmMap = ref(new Map()); // 算法类型映射表
const algorithmMap = ref(new Map());
const loadAlgorithms = async () => {
const token = localStorage.getItem('alertToken');
const algorithms = await apiInstance.getAlgorithms(token);
algorithmMap.value = new Map(algorithms.map((algo: { code_name: string, name: string }) => [algo.code_name, algo.name]));
};
const showDialog = async (data: any) => {
const token = localStorage.getItem('alertToken');
const eventDetails = await apiInstance.getEventById(data.id, token);
const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
const video = eventDetails.mediums.find((item: any) => item.name === 'video');
globalDialogContent.value = {
id: eventDetails.id,
camera_id: eventDetails.camera_id,
camera: eventDetails.camera,
types: eventDetails.types,
started_at: eventDetails.started_at,
snapshotUrl: snapshot?.file || '',
videoUrl: video?.file || ''
};
globalDialogVisible.value = true;
};
const handleDialogClose = () => {
globalDialogVisible.value = false;
globalDialogContent.value = {
id: null,
camera_id: null,
camera: { name: '' },
types: null,
started_at: null,
snapshotUrl: '',
videoUrl: ''
};
};
onMounted(() => {
loadAlgorithms();
eventBus.on('showDialog', showDialog);
});
return {
globalDialogVisible,
globalDialogContent,
handleDialogClose,
algorithmMap
};
// 加载算法映射表
const loadAlgorithms = async () => {
const token = localStorage.getItem('alertToken');
if (token) {
const algorithms = await apiInstance.getAlgorithms(token);
algorithmMap.value = new Map(
algorithms.map((algo: { code_name: string; name: string }) => [algo.code_name, algo.name])
);
} else {
console.error('Token 未找到，请登录');
}
};
// 显示告警详情对话框
const showDialog = async (data: any) => {
const token = localStorage.getItem('alertToken');
if (!token) {
console.error('Token 未找到，请登录');
return;
}
console.log('showDialog>>>>>>>>>>>>>', data);
// 获取告警事件的详细信息
const eventDetails = await apiInstance.getEventById(data.id, token);
const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
const video = eventDetails.mediums.find((item: any) => item.name === 'video');
// 更新对话框内容
globalDialogContent.value = {
id: eventDetails.id,
camera_id: eventDetails.camera_id,
camera: eventDetails.camera,
types: algorithmMap.value.get(eventDetails.types),
started_at: formatDateTime(eventDetails.started_at) ,
snapshotUrl: snapshot?.file || '',
videoUrl: video?.file || ''
};
globalDialogVisible.value = true; // 显示对话框
};
const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
// 关闭对话框并重置内容
const handleDialogClose = () => {
globalDialogVisible.value = false;
globalDialogContent.value = {
id: null,
camera_id: null,
camera: { name: '' },
types: null,
started_at: null,
snapshotUrl: '',
videoUrl: ''
};
};
// 生命周期钩子
onMounted(() => {
loadAlgorithms(); // 加载算法数据
eventBus.on('showDialog', showDialog); // 监听事件总线的 showDialog 事件
});
</script>
<style scoped>
@ -99,4 +123,9 @@ export default {
width: 100%;
height: 100%;
}
.dialog-event-col{
font-size: 14px;
gap: 30px;
padding: 20px;
}
</style>