From 0e79e6f9cd41c462d6eaf07504985f80fc29b9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Wed, 16 Oct 2024 14:55:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=88=9D=E6=AD=A5=E6=8E=92=E7=89=88?=
 =?UTF-8?q?=EF=BC=8C=E5=B1=95=E7=A4=BA=E7=82=B9=E4=BD=8D=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/html/DataStatistics.vue | 349 +++++++-----------------------------
 1 file changed, 62 insertions(+), 287 deletions(-)

diff --git a/src/html/DataStatistics.vue b/src/html/DataStatistics.vue
index 49af6bc..7dd23ee 100644
--- a/src/html/DataStatistics.vue
+++ b/src/html/DataStatistics.vue
@@ -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>
-  
\ No newline at end of file