From 9a6753cfa15803bbb7c0ac8f600cc818f6c08bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Mon, 30 Sep 2024 15:53:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=8A=A8=E7=94=BB=E5=B0=9D?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/html/DataStatistics.vue | 317 ++++++++++++++++++++++++++++++++++++
 1 file changed, 317 insertions(+)
 create mode 100644 src/html/DataStatistics.vue

diff --git a/src/html/DataStatistics.vue b/src/html/DataStatistics.vue
new file mode 100644
index 0000000..49af6bc
--- /dev/null
+++ b/src/html/DataStatistics.vue
@@ -0,0 +1,317 @@
+<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>
+</template>
+  
+<script setup>
+import { ref, reactive, onMounted } from '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);
+    }
+};
+
+// 获取告警数据
+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();
+});
+</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;
+  } */
+
+.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;
+    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;
+}
+</style>
+  
\ No newline at end of file