taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.新增报警管理部分图表

Browse Source 
2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图
This commit is contained in:
re-JZzzz
2025-09-17 20:02:08 +08:00
parent f28a617bb3
commit 63167f66e7
23 changed files with 2184 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/integratedManage/alarmManage/index.vue Normal file
View File

@ -0,0 +1,93 @@
<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>