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

198
src/views/integratedManage/alarmManage/components/fenxiBar.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<div class="chart-container">
<!--组件温度（℃） 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
xAxis: {
type: "category",
data: ["09-04", "09-05", "09-06", "09-07", "09-08", "09-09", "09-10"],
axisTick: {
show: false // 去除刻度线
}
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
legend: {
show: true,
icon: 'square',
left: '2%',
itemWidth: 10,
itemHeight: 10,
itemAlign: 'middle', // 设置图例项垂直居中
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [
{
name: "维护提醒",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
itemStyle: {
color: "rgb(0, 179, 255)",
},
},
{
name: "数据异常",
data: [80, 170, 100, 50, 90, 140, 170],
type: "bar",
itemStyle: {
color: "rgb(22, 93, 255)",
},
},
{
name: "信号减弱",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(255, 153, 0)",
},
},
{
name: "温度过高",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(250, 220, 25)",
},
},
{
name: "通讯中断",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(251, 62, 122)",
}
}
],
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 400px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-content {
width: 100%;
height: calc(100% - 54px);
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

172
src/views/integratedManage/alarmManage/components/levelPie.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<div class="chart-container">
<!--组件温度（℃） 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
tooltip: {
trigger: 'item'
},
grid: {
left: '0%',
right: '20%',
bottom: '0%',
top: '0%',
containLabel: true
},
legend: {
top: 'middle',
orient: 'vertical',
right: '5%', // 调整图例位置，使其更靠近左侧
itemWidth: 15,
itemHeight: 15,
},
series: [
{
type: 'pie',
radius: '80%',
label: {
show: false
},
color: [
'rgb(0, 179, 255)', // 提示信息
'rgb(45, 214, 131)', // 一般告警
'rgb(255, 208, 35)', // 重要告警
'rgb(227, 39, 39)' // 严重告警
],
data: [
{ value: 1048, name: '提示信息' },
{ value: 735, name: '一般告警' },
{ value: 580, name: '重要告警' },
{ value: 484, name: '严重告警' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 150px;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-content {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

382
src/views/integratedManage/alarmManage/components/levelSet.vue Normal file
View File

@ -0,0 +1,382 @@
<template>
<el-table :data="alarmLevels" :border="false" style="width: 100%">
<el-table-column prop="levelName" label="级别名称" align="center">
<template #default="scope">
<span :class="['level-name', `level-${scope.row.level}`]">{{ scope.row.levelName }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="标识含义" align="center"></el-table-column>
<el-table-column prop="priority" label="优先级" width="100">
<template #default="scope">
<el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="responseTime" label="响应时间" align="center">
<template #default="scope">
<span style="color: #186DF5;">{{ scope.row.responseTime }}</span>
</template>
</el-table-column>
<el-table-column prop="processingMethod" label="处理方式" align="center">
<template #default="scope">
<div class="process-methods">
<el-tag size="small" v-for="method in scope.row.processingMethod" :key="method" :type="getMethodType(method)">{{ method }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="enabled" label="是否启用" width="100" align="center">
<template #default="scope">
<el-switch v-model="scope.row.enabled" active-color="#13ce66" inactive-color="#ff4949" @change="handleEnabledChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right" align="center">
<template #default="scope">
<el-button link type="primary" @click="handleConfig(scope.row)">配置</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 配置对话框 -->
<el-dialog v-model="configDialogVisible" title="告警配置" width="600px">
<div v-if="currentConfigData">
<h3 class="config-title">{{ currentConfigData.levelName }} - 详细配置</h3>
<el-form ref="configFormRef" :model="currentConfigData" label-width="120px">
<el-form-item label="告警声音">
<el-select v-model="currentConfigData.alarmSound" placeholder="请选择告警声音">
<el-option label="默认声音" value="default" />
<el-option label="紧急声音" value="urgent" />
<el-option label="普通声音" value="normal" />
</el-select>
</el-form-item>
<el-form-item label="通知方式">
<el-checkbox-group v-model="currentConfigData.notificationMethods">
<el-checkbox label="短信" />
<el-checkbox label="邮件" />
<el-checkbox label="站内信" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="告警持续时间">
<el-input-number v-model="currentConfigData.duration" :min="1" :max="60" label="分钟" />
</el-form-item>
<el-form-item label="自动处理">
<el-switch v-model="currentConfigData.autoProcess" />
</el-form-item>
<el-form-item label="处理说明" v-if="currentConfigData.autoProcess">
<el-input v-model="currentConfigData.processDescription" type="textarea" placeholder="请输入自动处理说明" />
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="configDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfigSave">保存配置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 定义告警等级类型
interface AlarmLevel {
id: number;
levelName: string;
description: string;
priority: string;
responseTime: string;
processingMethod: string[];
enabled: boolean;
level: number; // 用于样式区分
}
// 定义配置数据类型
interface ConfigData extends AlarmLevel {
alarmSound: string;
notificationMethods: string[];
duration: number;
autoProcess: boolean;
processDescription: string;
}
// 模拟数据
const alarmLevels = ref<AlarmLevel[]>([
{
id: 1,
levelName: '严重告警',
description: '系统或应用出现严重故障',
priority: '一级',
responseTime: '15分钟以内',
processingMethod: ['系统锁定', '声光报警', '短信通知'],
enabled: true,
level: 1
},
{
id: 2,
levelName: '重要告警',
description: '系统或应用出现严重故障',
priority: '二级',
responseTime: '30分钟以内',
processingMethod: ['声光报警', '短信通知', '系统记录'],
enabled: true,
level: 2
},
{
id: 3,
levelName: '一般告警',
description: '非关键性故障或潜在风险',
priority: '三级',
responseTime: '120分钟以内',
processingMethod: ['短信通知', '系统记录'],
enabled: true,
level: 3
},
{
id: 4,
levelName: '提示信息',
description: '系统或应用非关键性变化或即将达到阈值的状态',
priority: '四级',
responseTime: '24小时以内',
processingMethod: ['短信通知'],
enabled: false,
level: 4
}
]);
// 对话框相关状态
const configDialogVisible = ref(false);
const configFormRef = ref<any>();
const currentConfigData = ref<ConfigData | null>(null);
// 获取优先级对应的标签类型
const getPriorityType = (priority: string) => {
const priorityMap: Record<string, string> = {
'一级': 'danger',
'二级': 'warning',
'三级': 'success',
'四级': 'primary'
};
return priorityMap[priority] || 'default';
};
// 获取处理方式对应的标签类型
const getMethodType = (method: string) => {
const methodMap: Record<string, string> = {
'系统锁定': 'danger',
'声光报警': 'warning',
'短信通知': 'primary',
'邮件通知': 'info',
'系统记录': 'success'
};
return methodMap[method] || 'info';
};
// 处理启用状态变更
const handleEnabledChange = (row: AlarmLevel) => {
ElMessage.success(`${row.levelName} ${row.enabled ? '已启用' : '已禁用'}`);
// 这里可以添加保存到后端的逻辑
};
// 打开配置对话框
const handleConfig = (row: AlarmLevel) => {
// 构建配置数据
currentConfigData.value = {
...row,
alarmSound: 'default',
notificationMethods: ['短信'],
duration: 30,
autoProcess: false,
processDescription: ''
};
configDialogVisible.value = true;
};
// 保存配置
const handleConfigSave = () => {
if (currentConfigData.value) {
// 找到对应的告警等级并更新
const index = alarmLevels.value.findIndex(item => item.id === currentConfigData.value!.id);
if (index !== -1) {
alarmLevels.value[index] = {
...alarmLevels.value[index],
enabled: currentConfigData.value!.enabled
};
}
ElMessage.success('配置保存成功');
configDialogVisible.value = false;
}
};
// 删除告警等级
const handleDelete = (id: number) => {
ElMessageBox.confirm('确定要删除该告警等级吗？', '确认删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = alarmLevels.value.findIndex(item => item.id === id);
if (index !== -1) {
alarmLevels.value.splice(index, 1);
ElMessage.success('删除成功');
}
}).catch(() => {
// 用户取消删除
});
};
</script>
<style scoped lang="scss">
.level-set-container {
padding: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.level-name {
font-weight: 500;
padding: 2px 6px 2px 18px;
border-radius: 3px;
transition: all 0.3s ease;
position: relative;
}
.level-name::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
.level-1::before {
background-color: #ff4949;
}
.level-2::before {
background-color: #f7ba1e;
}
.level-3::before {
background-color: #13ce66;
}
.level-4::before {
background-color: #1890ff;
}
.level-name:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.level-1 {
color: #ff4949;
}
.level-2 {
color: #f7ba1e;
}
.level-3 {
color: #13ce66;
}
.level-4 {
color: #1890ff;
}
.process-methods {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 4px 0;
}
/* 优化表格样式 */
:deep(.el-table) {
border-radius: 8px;
overflow: hidden;
}
:deep(.el-table th) {
background-color: #fafafa;
font-weight: 600;
color: #303133;
border-bottom: 1px solid #ebeef5;
}
:deep(.el-table tr:hover > td) {
background-color: #f0f9ff !important;
}
:deep(.el-table__row:nth-child(even)) {
background-color: #fafafa;
}
/* 优化按钮和操作列 */
:deep(.el-button--text) {
transition: all 0.3s ease;
padding: 4px 12px;
border-radius: 4px;
}
:deep(.el-button--text:hover) {
background-color: rgba(0, 0, 0, 0.05);
}
/* 优化对话框样式 */
.config-title {
margin-bottom: 20px;
color: #303133;
font-size: 16px;
font-weight: 500;
padding-bottom: 10px;
border-bottom: 1px solid #ebeef5;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* 优化表单样式 */
:deep(.el-form-item) {
margin-bottom: 18px;
}
:deep(.el-form-item__label) {
color: #606266;
font-weight: 500;
}
:deep(.el-select),
:deep(.el-input),
:deep(.el-input-number) {
width: 100%;
}
/* 响应式调整 */
@media (max-width: 768px) {
.level-set-container {
padding: 15px;
}
:deep(.el-table) {
font-size: 12px;
}
}
</style>

321
src/views/integratedManage/alarmManage/components/totalView.vue Normal file
View File

@ -0,0 +1,321 @@
<template>
<div class="total-view-dashboard">
<!-- 今日报警总数 -->
<div class="total-view-card blue-border">
<div class="total-content">
<div class="content-row">
<div class="left-section">
<div class="total-header">
<span class="total-title">今日报警总数</span>
</div>
<div class="total-number">28</div>
</div>
<div class="icon-section">
<el-icon class="total-icon blue">
<img src="@/assets/demo/health.png" alt="">
</el-icon>
</div>
</div>
<div class="total-comparison">
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
</div>
<!-- 未处理报警 -->
<div class="total-view-card purple-border">
<div class="total-content">
<div class="content-row">
<div class="left-section">
<div class="total-header">
<span class="total-title">未处理报警</span>
</div>
<div class="total-number">8</div>
</div>
<div class="icon-section">
<el-icon class="total-icon purple">
<img src="@/assets/demo/sms-tracking.png" alt="">
</el-icon>
</div>
</div>
<div class="total-comparison">
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
</div>
<!-- 已处理报警 -->
<div class="total-view-card green-border">
<div class="total-content">
<div class="content-row">
<div class="left-section">
<div class="total-header">
<span class="total-title">已处理报警</span>
</div>
<div class="total-number">20</div>
</div>
<div class="icon-section">
<el-icon class="total-icon green">
<img src="@/assets/demo/archive.png" alt="">
</el-icon>
</div>
</div>
<div class="total-comparison">
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
</div>
<!-- 严重报警 -->
<div class="total-view-card orange-border">
<div class="total-content">
<div class="content-row">
<div class="left-section">
<div class="total-header">
<span class="total-title">严重报警</span>
</div>
<div class="total-number">3</div>
</div>
<div class="icon-section">
<el-icon class="total-icon orange">
<img src="@/assets/demo/mouse-square.png" alt="">
</el-icon>
</div>
</div>
<div class="total-comparison">
<el-icon class="trend-icon green">
<img src="/src/assets/demo/up.png" alt="上升">
</el-icon>
<span class="comparison-text green">8台</span>
<span class="period-text">较上月同期</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.total-view-dashboard {
display: flex;
gap: 16px;
width: 100%;
flex-wrap: wrap;
}
.total-view-card {
display: flex;
align-items: center;
padding: 20px 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
position: relative;
flex: 1;
min-width: 200px;
height: 150px;
transition: all 0.3s ease;
overflow: hidden;
}
.total-view-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 左侧边框样式 - 使用伪元素创建与指定内容高度一致的边框 */
.total-view-card::before {
content: '';
position: absolute;
left: 0;
top: 42px;
width: 4px;
height: 45px;
border-radius: 0 2px 2px 0;
transition: height 0.3s ease;
}
.total-view-card:hover::before {
height: 80px;
}
.blue-border::before {
background-color: #0080FC;
}
.blue-border {
background-color: #EAF5FF;
}
/* 添加卡片背景渐变效果 */
.total-view-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 100%);
pointer-events: none;
}
.purple-border::before {
background-color: #722ed1;
}
.purple-border {
background-color: #F3EDFF;
}
.green-border::before {
background-color: #009B72;
}
.green-border {
background-color: #E8FFF9;
}
.orange-border::before {
background-color: #fa8c16;
}
.orange-border {
background-color: #FFF6EC;
}
.total-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.content-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.left-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.icon-section {
display: flex;
align-items: center;
justify-content: center;
margin-left: 12px;
}
.total-header {
display: flex;
align-items: center;
}
.total-title {
font-size: 14px;
color: #606266;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.total-icon {
width: 40px;
height: 40px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.total-icon.blue {
background-color: #DBEEFF;
color: #1890ff;
}
.total-icon.purple {
background-color: #E9DEFF;
color: #722ed1;
}
.total-icon.green {
background-color: #CEFFF2;
color: #52c41a;
}
.total-icon.orange {
background-color: #FFEBD3;
color: #fa8c16;
}
.total-number {
font-size: 18px;
font-weight: 600;
color: #303133;
line-height: 1;
}
.total-comparison {
display: flex;
align-items: center;
gap: 8px;
height: 16px;
}
.trend-icon {
width: 16px;
height: 16px;
}
.trend-icon.green {
color: #52c41a;
}
.comparison-text {
font-size: 12px;
}
.comparison-text.green {
color: #52c41a;
}
.period-text {
font-size: 12px;
color: #909399;
}
@media screen and (max-width: 1200px) {
.total-view-dashboard {
flex-wrap: wrap;
}
.total-view-card {
flex: 0 0 calc(50% - 8px);
}
}
@media screen and (max-width: 768px) {
.total-view-card {
flex: 0 0 100%;
}
}
</style>

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>