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>
|