摄像头组件页面
This commit is contained in:
龚皓
parent
b00dac74de
commit
c8f02faaa7
|
|
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue