161 lines
9.5 KiB
Vue
161 lines
9.5 KiB
Vue
<template>
|
||
<div class="model">
|
||
<!-- 标题栏 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<TitleComponent title="报警分析与管理" subtitle="实时监控光伏报警信息，高效处理运维任务" />
|
||
</el-col>
|
||
<!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
|
||
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
|
||
<el-col :span="7">
|
||
<el-input placeholder="搜索报警信息">
|
||
<template #prefix>
|
||
<el-icon>
|
||
<Search />
|
||
</el-icon>
|
||
</template>
|
||
</el-input>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button type="primary">
|
||
导出数据
|
||
<el-icon class="el-icon--right">
|
||
<UploadFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
</el-col>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 数据展示-->
|
||
<el-row :gutter="24">
|
||
<el-col :span="16">
|
||
<el-card style="height: 100%;">
|
||
<div style="height: 100%;">
|
||
<Data :dashboardData="dashboardData" :chartData="chartData" />
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card style="height: 100%;">
|
||
<div style="height: 100%;">
|
||
<Pie :alarmTypeData="alarmTypeData" />
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 状态表 -->
|
||
<el-row style="margin-top: 20px;">
|
||
<el-col :span="24">
|
||
<el-card>
|
||
<TitleComponent title="报警记录" :fontLevel="2" />
|
||
<status style="width: 100%;" :alarmRecords="alarmRecords" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||
import Status from '@/views/pvSystem/alarmAnalysis/components/status.vue'
|
||
import Pie from '@/views/pvSystem/alarmAnalysis/components/pie.vue';
|
||
import Data from '@/views/pvSystem/alarmAnalysis/components/data.vue';
|
||
|
||
// Mock数据
|
||
const dashboardData = ref({
|
||
todayAlarmTotal: 25,
|
||
unhandledAlarms: 8,
|
||
handledAlarms: 16,
|
||
avgProcessTime: '42分钟',
|
||
updates: {
|
||
todayAlarmTotal: { value: '4.2%', type: 'up' },
|
||
unhandledAlarms: { value: '5%', type: 'down' },
|
||
handledAlarms: { value: '8%', type: 'up' },
|
||
avgProcessTime: { value: '10%', type: 'down' }
|
||
}
|
||
});
|
||
|
||
const chartData = ref({
|
||
alarmCount: [150, 230, 224, 218, 135, 147, 260],
|
||
processEfficiency: [85, 88, 90, 87, 89, 91, 89],
|
||
dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
|
||
totals: {
|
||
alarmCount: 56,
|
||
processEfficiency: '89%'
|
||
},
|
||
dailyChanges: {
|
||
alarmCount: { value: '0.9%', type: 'up' },
|
||
processEfficiency: { value: '0.9%', type: 'down' }
|
||
}
|
||
});
|
||
|
||
const alarmTypeData = ref([
|
||
{ value: 25, name: '逆变器故障', itemStyle: { color: '#F94144' } },
|
||
{ value: 20, name: '组串异常', itemStyle: { color: '#F3722C' } },
|
||
{ value: 15, name: '通讯中断', itemStyle: { color: '#00BAAD' } },
|
||
{ value: 15, name: '汇流箱报警', itemStyle: { color: '#186DF5' } }
|
||
]);
|
||
|
||
const alarmRecords = ref([
|
||
{ time: "2025-10-15 08:30:22", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 1, manager: "张工程师" },
|
||
{ time: "2025-10-15 09:15:45", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 1, manager: "李工程师" },
|
||
{ time: "2025-10-15 10:42:18", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 3, status: 2, manager: "王工程师" },
|
||
{ time: "2025-10-15 11:20:33", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 2, manager: "赵工程师" },
|
||
{ time: "2025-10-15 13:55:09", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 3, manager: "孙工程师" },
|
||
{ time: "2025-10-15 14:30:56", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "周工程师" },
|
||
{ time: "2025-10-15 15:20:12", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "吴工程师" },
|
||
{ time: "2025-10-15 16:05:47", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "郑工程师" },
|
||
{ time: "2025-10-15 17:30:29", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "钱工程师" },
|
||
{ time: "2025-10-15 18:15:54", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "冯工程师" },
|
||
{ time: "2025-10-16 08:30:22", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 1, manager: "陈工程师" },
|
||
{ time: "2025-10-16 09:15:45", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 1, manager: "卫工程师" },
|
||
{ time: "2025-10-16 10:42:18", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 3, status: 2, manager: "蒋工程师" },
|
||
{ time: "2025-10-16 11:20:33", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 2, manager: "沈工程师" },
|
||
{ time: "2025-10-16 13:55:09", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 3, manager: "韩工程师" },
|
||
{ time: "2025-10-16 14:30:56", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "杨工程师" },
|
||
{ time: "2025-10-16 15:20:12", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "朱工程师" },
|
||
{ time: "2025-10-16 16:05:47", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "秦工程师" },
|
||
{ time: "2025-10-16 17:30:29", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "尤工程师" },
|
||
{ time: "2025-10-16 18:15:54", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "许工程师" },
|
||
{ time: "2025-10-17 08:30:22", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 1, manager: "何工程师" },
|
||
{ time: "2025-10-17 09:15:45", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 1, manager: "吕工程师" },
|
||
{ time: "2025-10-17 10:42:18", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 3, status: 2, manager: "施工程师" },
|
||
{ time: "2025-10-17 11:20:33", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 2, manager: "张工程师" },
|
||
{ time: "2025-10-17 13:55:09", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 3, manager: "孔工程师" },
|
||
{ time: "2025-10-17 14:30:56", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "曹工程师" },
|
||
{ time: "2025-10-17 15:20:12", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "严工程师" },
|
||
{ time: "2025-10-17 16:05:47", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "华工程师" },
|
||
{ time: "2025-10-17 17:30:29", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "金工程师" },
|
||
{ time: "2025-10-17 18:15:54", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "魏工程师" },
|
||
{ time: "2025-10-18 08:30:22", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 1, manager: "陶工程师" },
|
||
{ time: "2025-10-18 09:15:45", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 1, manager: "姜工程师" },
|
||
{ time: "2025-10-18 10:42:18", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 3, status: 2, manager: "戚工程师" },
|
||
{ time: "2025-10-18 11:20:33", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 2, manager: "谢工程师" },
|
||
{ time: "2025-10-18 13:55:09", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 3, manager: "邹工程师" },
|
||
{ time: "2025-10-18 14:30:56", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "喻工程师" },
|
||
{ time: "2025-10-18 15:20:12", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 2, status: 3, manager: "柏工程师" },
|
||
{ time: "2025-10-18 16:05:47", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "水工程师" }
|
||
]);
|
||
|
||
// 模拟接口调用
|
||
const fetchAlarmData = async () => {
|
||
try {
|
||
// 模拟网络请求延迟
|
||
await new Promise(resolve => setTimeout(resolve, 800));
|
||
// 这里可以添加数据处理逻辑
|
||
console.log('模拟API调用成功，数据已加载');
|
||
} catch (error) {
|
||
console.error('模拟API调用失败:', error);
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
fetchAlarmData();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.model {
|
||
padding: 20px 15px;
|
||
background-color: rgba(242, 248, 252, 1);
|
||
}
|
||
</style> |