tcy
938f8ad026
新增视频监控组件(spjk.vue)支持实时视频展示与布局切换 添加设备状态组件(sbzt.vue)显示设备在线状态和报警信息 实现视频管理组件(spgl.vue)包含存储状态图表和录像设置 引入多个SVG图标资源用于界面交互 优化字体文件格式和样式
321 lines
9.7 KiB
Vue
321 lines
9.7 KiB
Vue
<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>
|