taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(securitySurveillance): 添加视频监控、设备状态和视频管理组件

Browse Source 
新增视频监控组件(spjk.vue)支持实时视频展示与布局切换
添加设备状态组件(sbzt.vue)显示设备在线状态和报警信息
实现视频管理组件(spgl.vue)包含存储状态图表和录像设置
引入多个SVG图标资源用于界面交互
优化字体文件格式和样式
This commit is contained in:
tcy
2025-09-20 14:14:38 +08:00
parent eb3e1326ca
commit 938f8ad026
12 changed files with 660 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/securitySurveillance/components/sbzt.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<el-card style="border-radius: 15px;">
<el-row gutter="35">
<el-col :span="8" class="status-card">
<div class="title">设备状态</div>
<!-- gutter设置为20，创建左右间隙 -->
<el-row gutter="20" style="width: 100%;">
<!-- 一行2个，每个占12格（24/2=12） -->
<el-col :span="12">
<div class="item">
<div class="status">在线</div>
<div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<div class="status">离线</div>
<div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<div class="status">网络延迟</div>
<div class="count" style="color: rgba(255, 208, 35, 1);">8</div>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<div class="status">故障</div>
<div class="count" style="color: rgba(227, 39, 39, 1);">1</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="16" class="alarm-card">
<div class="title">最近报警</div>
<el-row class="list">
<el-col>
<div class="item red">
<div class="sub-title">
异常移动检测
</div>
<div class="content">
A区b栋102 | 今天08:23
</div>
</div>
</el-col>
<el-col>
<div class="item yellow">
<div class="sub-title">
设备连接不稳定
</div>
<div class="content">
A区b栋102 | 今天08:23
</div>
</div>
</el-col>
<el-col>
<div class="item red">
<div class="sub-title">
异常移动检测
</div>
<div class="content">
A区b栋102 | 今天08:23
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</template>
<style scoped>
.title {
font-family: "Alibaba-PuHuiTi-Bold";
font-size: 20px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
color: rgb(0, 30, 59);
text-align: left;
vertical-align: top;
margin-bottom: 20px;
}
.status-card {
.item {
background: rgba(245, 245, 245, 0.2);
border: 1px solid rgba(230, 233, 238, 1);
margin-bottom: 20px;
border-radius: 15px;
padding: 15px 30px;
text-align: center;
.status {
color: rgba(175, 175, 175, 1);
font-size: 20px;
margin-bottom: 10px;
font-weight: 500;
}
.count {
font-size: 18px;
font-weight: bold;
}
}
}
.alarm-card {
.item {
border: 1px solid #E6E9EE;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
}
.red {
::v-deep::before {
position: absolute;
content: '';
background-color: rgba(227, 39, 39, 1);
height: 100%;
width: 7px;
border-radius: 7px 0px 0px 7px;
top: 0;
left: 1px;
}
}
.yellow {
::v-deep::before {
position: absolute;
content: '';
background-color: rgba(255, 208, 35, 1);
height: 100%;
width: 7px;
border-radius: 7px 0px 0px 7px;
top: 0;
left: 1px;
}
}
}
</style>
<script setup></script>