feat(securitySurveillance): 添加视频监控、设备状态和视频管理组件
新增视频监控组件(spjk.vue)支持实时视频展示与布局切换 添加设备状态组件(sbzt.vue)显示设备在线状态和报警信息 实现视频管理组件(spgl.vue)包含存储状态图表和录像设置 引入多个SVG图标资源用于界面交互 优化字体文件格式和样式
This commit is contained in:
320
src/views/securitySurveillance/components/spgl.vue
Normal file
320
src/views/securitySurveillance/components/spgl.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<el-card style="border-radius: 15px;">
|
||||
<div class="title-box">
|
||||
视频管理
|
||||
</div>
|
||||
<el-row class="cunchu">
|
||||
<el-col>
|
||||
<div class="subtitle">存储状态</div>
|
||||
</el-col>
|
||||
<el-col style="position: relative;">
|
||||
<div ref="chartRef" style="height: 220px;width: 100%;"></div>
|
||||
<div class="text">别担心，还有很多存储空间</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col class="lxcc">
|
||||
<div class="top">
|
||||
<div class="subtitle">录像存储设置</div>
|
||||
<div class="edit">编辑</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
存储模式
|
||||
</div>
|
||||
<div class="text">
|
||||
循环覆盖
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
保留天数
|
||||
</div>
|
||||
<div class="text">
|
||||
30天
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
录像质量
|
||||
</div>
|
||||
<div class="text">
|
||||
高清（1080P）
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
备份记录
|
||||
</div>
|
||||
<div class="text">
|
||||
开启
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
备份时间
|
||||
</div>
|
||||
<div class="text">
|
||||
每日02:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="subtitle">历史视频查询</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-select placeholder="全部摄像头">
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-date-picker v-model="value1" type="daterange" range-separator="至" style="width: 100%;"
|
||||
start-placeholder="开始" end-placeholder="结束" :size="size" />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary">搜索</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-table :data="data" height="200px" max-height="200px">
|
||||
<el-table-column label="摄像头" prop="name" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column label="日期" prop="date" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column label="时长" prop="duration">
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" prop="size">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="100">
|
||||
<template #default="scope">
|
||||
<div class="svg-icon">
|
||||
<img src="/assets/svg/play.svg" alt="">
|
||||
<img src="/assets/svg/download.svg" alt="">
|
||||
<img src="/assets/svg/delete.svg" alt=""></img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination" v-if="activeTab !== 'record'">
|
||||
<el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
|
||||
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
|
||||
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.title-box {
|
||||
font-family: "Alibaba-PuHuiTi-Bold";
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(0, 30, 59, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
color: #001E3B;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
|
||||
::v-deep::before {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
background-color: rgba(24, 109, 245, 1);
|
||||
top: 50%;
|
||||
left: -8px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.cunchu {
|
||||
.text {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
color: rgba(113, 128, 150, 1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lxcc {
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.edit {
|
||||
color: rgba(0, 30, 59, 1);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #F2F8FC;
|
||||
border-radius: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #E3EDFF;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(100);
|
||||
const initChart = () => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
var option = {
|
||||
// 调整图表整体位置，向上移动以减少底部空白
|
||||
// 添加首尾单位标识
|
||||
graphic: [
|
||||
// 起始单位 (0TB)
|
||||
{
|
||||
type: 'text',
|
||||
left: '24%',
|
||||
top: '50%', // 上移文本位置
|
||||
style: {
|
||||
text: '0TB',
|
||||
fontSize: 14,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
// 结束单位 (10TB)
|
||||
{
|
||||
type: 'text',
|
||||
right: '24%',
|
||||
top: '50%', // 上移文本位置
|
||||
style: {
|
||||
text: '10TB',
|
||||
fontSize: 14,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
// 中间显示当前值和百分比（换行显示）
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%', // 调整到48%位置
|
||||
style: {
|
||||
text: '6.68TB\n48%',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20 // 增加行高以确保换行效果
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '85%', // 适当减小半径
|
||||
center: ['50%', '50%'], // 上移图表中心位置
|
||||
startAngle: 170, // 开始角度（左侧）
|
||||
endAngle: 10, // 结束角度（右侧）
|
||||
max: 10, // 最大值设置为10TB
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40, // 保持条的粗细
|
||||
color: [
|
||||
[0.67, '#4863FF'], // 当前值6.7TB对应67%
|
||||
[1, '#E5E7EB'] // 未用部分颜色
|
||||
]
|
||||
}
|
||||
},
|
||||
// 隐藏所有刻度相关元素
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
// 隐藏指针
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
// 隐藏默认详情
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
// 当前值（6.7TB）
|
||||
data: [{ value: 6.7 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
// 监听窗口大小变化，重新绘制图表
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
const data = computed(() => {
|
||||
return Array.from({ length: 10 }, (_, i) => ({
|
||||
name: `摄像头${i + 1}`,
|
||||
date: '25.03.12-10:00',
|
||||
duration: '4小时',
|
||||
size: '2.4GB'
|
||||
}));
|
||||
});
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user