tcy
938f8ad026
新增视频监控组件(spjk.vue)支持实时视频展示与布局切换 添加设备状态组件(sbzt.vue)显示设备在线状态和报警信息 实现视频管理组件(spgl.vue)包含存储状态图表和录像设置 引入多个SVG图标资源用于界面交互 优化字体文件格式和样式
58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
<template>
|
||
<div class="security-surveillance">
|
||
<el-row style="display: flex;align-items: center;">
|
||
<el-col :span="12">
|
||
<TitleComponent title="安防监控管理" subtitle="实时监控、历史录像查询与视频管理" />
|
||
</el-col>
|
||
<!-- 关键：给内层 el-col 套上 el-row -->
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-row :gutter="16" justify="end"> <!-- gutter 可选，单位px，控制列间距 -->
|
||
<el-col :span="6" :push="3">
|
||
<el-input placeholder="搜索逆变器..." prefix-icon="search" />
|
||
</el-col>
|
||
<el-col :span="6" :push="3">
|
||
<el-select placeholder="请选择逆变器状态">
|
||
<el-option label="所有状态" value="0"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button type="primary">刷新数据<el-icon>
|
||
<Refresh />
|
||
</el-icon>
|
||
</el-button>
|
||
</el-col>
|
||
</el-row> <!-- 闭合内层 el-row -->
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<Top />
|
||
</el-row>
|
||
<el-row style="margin-top: 20px;" :gutter="25">
|
||
<el-col :span="18">
|
||
<Spjk />
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<Spgl />
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="margin-top: 20px;">
|
||
<el-col>
|
||
<Sbzt />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</template>
|
||
<style scoped>
|
||
.security-surveillance {
|
||
padding: 20px;
|
||
background-color: #F2F8FC;
|
||
}
|
||
</style>
|
||
<script setup>
|
||
import TitleComponent from "@/components/TitleComponent";
|
||
import Top from "./components/top"
|
||
import Spjk from "./components/spjk"
|
||
import Spgl from "./components/spgl";
|
||
import Sbzt from "./components/sbzt";
|
||
</script> |