From c8f02faaa707e8916a6bf8df1b1817ece0d1c72b 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:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cameras.vue | 238 +++++++++++++++++++++++++++++++++++++
 1 file changed, 238 insertions(+)
 create mode 100644 src/components/Cameras.vue

diff --git a/src/components/Cameras.vue b/src/components/Cameras.vue
new file mode 100644
index 0000000..f7af23f
--- /dev/null
+++ b/src/components/Cameras.vue
@@ -0,0 +1,238 @@
+<template>
+    <div>
+        <el-card class="camera-card">
+            <el-row :gutter="20" class="camera-row">
+                <!-- 左侧块：通道列表 -->
+                <el-col :span="8">
+                    <el-card class="channel-card" shadow="hover">
+                        <div class="section-title">通道</div>
+                        <div class="scroll-container">
+                            <el-table :data="cameras" style="width: 100%;" height="250">
+                                <el-table-column prop="id" label="ID" width="100"></el-table-column>
+                                <el-table-column prop="name" label="名称"></el-table-column>
+                            </el-table>
+                        </div>
+                    </el-card>
+                </el-col>
+
+                <!-- 中间块：摄像头总数量 -->
+                <el-col :span="8">
+                    <el-card class="count-card" shadow="hover">
+                        <div class="section-title">摄像数量</div>
+                        <div class="camera-count-chart"></div>
+                    </el-card>
+                </el-col>
+
+                <!-- 右侧块：在线/离线/异常状态 -->
+                <el-col :span="8">
+                    <el-card class="online-card" shadow="hover">
+                        <div class="section-title">在线情况</div>
+                        <div class="status-summary-chart"></div>
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-card>
+    </div>
+</template>
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { BoxApi } from '@/utils/boxApi.ts';
+
+const cameras = ref([]);
+const cameraCount = ref(0);
+const onlineCount = ref(0);
+const offlineCount = ref(0);
+const exceptionCount = ref(0);
+
+const apiInstance = new BoxApi();
+
+// 分页获取摄像头数据，直到获取所有摄像头数据
+const fetchCameras = async () => {
+    try {
+        const token = localStorage.getItem('alertToken');
+        const limit = 20; // 每次请求 20 条数据
+        let offset = 0; // 从 0 开始
+        let allCameras = [];
+
+        // 第一次请求，用于获取总数
+        const firstResponse = await apiInstance.getCameras(limit, offset, token);
+        cameraCount.value = firstResponse.count;
+        allCameras = firstResponse.results;
+
+        // 根据总数继续请求剩余的数据
+        const total = cameraCount.value;
+        while (offset + limit < total) {
+            offset += limit;
+            const response = await apiInstance.getCameras(limit, offset, token);
+            allCameras = allCameras.concat(response.results);
+        }
+
+        cameras.value = allCameras;
+
+        // 统计在线、离线和异常的摄像头数量
+        allCameras.forEach(camera => {
+            if (camera.status === 'online') {
+                onlineCount.value++;
+            } else if (camera.status === 'offline') {
+                offlineCount.value++;
+            } else {
+                exceptionCount.value++;
+            }
+        });
+
+        // 初始化中间的摄像头总数圆环图
+        initCountChart(cameraCount.value);
+
+        // 初始化右侧的在线/离线/异常圆环图
+        initStatusSummaryChart(onlineCount.value, offlineCount.value, exceptionCount.value);
+    } catch (error) {
+        console.error('Error fetching cameras:', error);
+    }
+};
+
+// 初始化摄像头总数圆环图
+const initCountChart = (count) => {
+    const chartDom = document.querySelector('.camera-count-chart');
+    const myChart = echarts.init(chartDom);
+
+    const option = {
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '60%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'center',
+                    formatter: '{c}',
+                    fontSize: 24,
+                },
+                data: [
+                    { value: count, name: '总数' }
+                ],
+                itemStyle: {
+                    color: 'rgba(80,160,225, 1)'
+                }
+
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+};
+
+// 初始化在线/离线/异常状态圆环图
+const initStatusSummaryChart = (online, offline, exception) => {
+    const chartDom = document.querySelector('.status-summary-chart');
+    const myChart = echarts.init(chartDom);
+
+    const option = {
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '60%'],
+                label: {
+                    show: true,
+                    formatter: '{b}: {c} ({d}%)'
+                },
+                data: [
+                    { value: online, name: '在线' },
+                    { value: offline, name: '离线' },
+                    { value: exception, name: '异常' }
+                ],
+                itemStyle: {
+                    color: 'rgba(5,192,145, 1)'
+                    // color: 'rgba(255,151,75, 1)'
+                }
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+};
+
+onMounted(() => {
+    fetchCameras();
+});
+</script>
+  
+<style scoped>
+.camera-card {
+    /* background-color: #abcef1; */
+    /* background-color: linear-gradient(to top, rgba(150, 206, 243, 0.2), rgba(214, 240, 250, 0.3)); */
+    color: #fff;
+    /* border-radius: 8px; */
+    margin: 0;
+    padding: 0;
+}
+
+.channel-card {
+    background: linear-gradient(to top, rgba(150, 206, 243, 1), rgba(125, 29, 235, 0.3));
+    border-radius: 12px;
+}
+
+.count-card {
+    background: linear-gradient(to bottom, rgba(246, 130, 85, 1), rgba(252, 186, 38, 0.3));
+    border-radius: 12px;
+}
+
+.online-card {
+    background: linear-gradient(to top, rgba(112, 158, 228, 1), rgba(87, 204, 243, 0.3));
+    border-radius: 12px;
+}
+
+.camera-header {
+    font-size: 18px;
+    font-weight: bold;
+    border-bottom: 1px solid #3a4b5c;
+}
+
+.camera-row {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.section-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.el-card {
+    padding: 0;
+    text-align: center;
+    background-color: azure
+}
+
+.scroll-container {
+    height: 180px;
+    /* overflow-y: scroll; */
+    scrollbar-width: none;
+}
+
+/* .scroll-container::-webkit-scrollbar {
+    display: none; 
+  } */
+
+.status-summary-chart,
+.camera-count-chart {
+    width: 100%;
+    height: 180px;
+}
+
+.el-table {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.el-table th {
+  background-color: #f5f7fa; /* 表头背景色 */
+  color: #333; /* 表头字体颜色 */
+  font-weight: bold;
+  text-align: center; /* 居中对齐 */
+}
+</style>
+  
\ No newline at end of file