94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<template>
|
||
<div class="model">
|
||
<!-- 标题栏 -->
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<TitleComponent title="报警管理" subtitle="配置新能源厂站的报警级别、类型及相关规则" />
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第一行：报警管理和报警级别分布 -->
|
||
<el-row :gutter="20" class="content-row">
|
||
<el-col :span="16">
|
||
<el-card shadow="hover" class="custom-card">
|
||
<TitleComponent title="报警管理" :font-level="2" />
|
||
<totalView />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<!-- 报警级别分布 -->
|
||
<el-card shadow="hover" class="custom-card">
|
||
<TitleComponent title="报警级别分布" :font-level="2" />
|
||
<levelPie />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第二行：报警趋势分析 -->
|
||
<el-row :gutter="20" class="content-row">
|
||
<el-col :span="24">
|
||
<el-card shadow="hover" class="custom-card">
|
||
<TitleComponent title="报警趋势分析" :font-level="2" />
|
||
<fenxiBar />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第三行：报警级别设置 -->
|
||
<el-row :gutter="20" class="content-row">
|
||
<el-col :span="24">
|
||
<el-card shadow="hover" class="custom-card">
|
||
<TitleComponent title="报警级别设置" :font-level="2" />
|
||
<levelSet />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||
import levelPie from '@/views/integratedManage/alarmManage/components/levelPie.vue'
|
||
import fenxiBar from '@/views/integratedManage/alarmManage/components/fenxiBar.vue'
|
||
import totalView from '@/views/integratedManage/alarmManage/components/totalView.vue';
|
||
import levelSet from '@/views/integratedManage/alarmManage/components/levelSet.vue';
|
||
</script>
|
||
|
||
<style scoped>
|
||
.model {
|
||
padding: 20px 15px;
|
||
background-color: rgba(242, 248, 252, 1);
|
||
}
|
||
|
||
.content-row {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.custom-card {
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
}
|
||
|
||
.custom-card:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 响应式布局调整 */
|
||
@media (max-width: 1200px) {
|
||
.content-row {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.model {
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.content-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
</style>
|