443 lines
11 KiB
Vue
443 lines
11 KiB
Vue
<template>
|
||
<div class="rightPage">
|
||
<div class="alarm-container">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="header">
|
||
<img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
|
||
<span class="title">告警信息中心</span>
|
||
<!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
|
||
<span class="jgao">{{ alarmData.length }}条信息未处理</span>
|
||
</div>
|
||
<!-- 告警卡片列表（可循环渲染，这里演示单条） -->
|
||
<div class="alarm_list">
|
||
<el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
|
||
<div class="card-header">
|
||
<img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
|
||
<span class="card-title">{{ item.alarmMsg }}</span>
|
||
<span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
|
||
</div>
|
||
<div class="card-content">
|
||
{{ item.advice }}
|
||
</div>
|
||
<div class="card-footer">
|
||
<el-tag type="danger" size="small">紧急</el-tag>
|
||
<el-tag type="danger" size="small">处理</el-tag>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overview">
|
||
<div class="left_title">
|
||
<div style="display: flex; align-items: center">
|
||
<div class="left_title_img">
|
||
<img src="@/assets/large/right4.png" alt="" />
|
||
</div>
|
||
<div class="left_title_text">项目概述</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview_content">
|
||
<div>项目名称：田东光伏智慧生态工地开发项目</div>
|
||
<div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
|
||
<div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
|
||
<div>占地面积：约10000亩</div>
|
||
<div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
|
||
<div>建设单位：这里是建设单位的名称</div>
|
||
<div>项目类型：集中式光伏电站</div>
|
||
<div>总装机容量：200MW</div>
|
||
</div>
|
||
</div>
|
||
<div class="monitor">
|
||
<div class="left_title">
|
||
<div style="display: flex; align-items: center">
|
||
<div class="left_title_img">
|
||
<img src="@/assets/large/right3.png" alt="" />
|
||
</div>
|
||
<div class="left_title_text">设备状态监控</div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-container">
|
||
<div class="container_item" v-for="(item, index) in deviceStats" :key="index">
|
||
<div class="container_item_one">
|
||
<div class="container_item_one_box">
|
||
<div class="box_img">
|
||
<img src="@/assets/large/right6.png" style="width: 20px; height: 20px" />
|
||
</div>
|
||
<div class="box_text">
|
||
<div>{{ item.name }}</div>
|
||
<div style="font-size: 12px">{{ item.total }}块</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-right">
|
||
<div class="progress-top">
|
||
<span
|
||
class="progress-percent"
|
||
:class="{
|
||
green1: item.rate >= 99, // 可根据需求调整颜色规则
|
||
orange1: item.rate < 99 && item.rate >= 90
|
||
}"
|
||
>{{ item.rate }}%</span
|
||
>
|
||
</div>
|
||
<div class="progress-bg">
|
||
<div
|
||
class="progress-fg"
|
||
:style="{ width: item.rate + '%' }"
|
||
:class="{
|
||
green: item.rate >= 99, // 可根据需求调整颜色规则
|
||
orange: item.rate < 99 && item.rate >= 90
|
||
}"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container_item_two">
|
||
<div>正常{{ item.normal }}台</div>
|
||
|
||
<div>异常{{ item.abnormal }}台</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { getAlarmListOverview } from '@/api/large';
|
||
import { formatDate } from '@/utils/index';
|
||
|
||
const alarmData: any = ref({});
|
||
const deviceStats = ref([
|
||
{
|
||
name: '光伏组件',
|
||
icon: '../../../assets/large/right5.png', // 示例图标
|
||
total: '25,680',
|
||
unit: '块',
|
||
rate: 99.2,
|
||
normal: '25,472',
|
||
abnormal: 208
|
||
},
|
||
{
|
||
name: '逆变器',
|
||
icon: '@/assets/large/right6.png',
|
||
total: '1,246',
|
||
unit: '台',
|
||
rate: 98.6,
|
||
normal: '1,230',
|
||
abnormal: 16
|
||
},
|
||
{
|
||
name: '汇流箱',
|
||
icon: '@/assets/large/right7.png',
|
||
total: '128',
|
||
unit: '台',
|
||
rate: 100,
|
||
normal: '128',
|
||
abnormal: 0
|
||
},
|
||
{
|
||
name: '变压器',
|
||
icon: '@/assets/large/right8.png',
|
||
total: '32',
|
||
unit: '台',
|
||
rate: 96.8,
|
||
normal: '31',
|
||
abnormal: 1
|
||
},
|
||
{
|
||
name: '通信设备',
|
||
icon: '@/assets/large/right9.png',
|
||
total: '246',
|
||
unit: '台',
|
||
rate: 95.2,
|
||
normal: '234',
|
||
abnormal: 12
|
||
}
|
||
]);
|
||
const getAlarm = () => {
|
||
getAlarmListOverview().then((res) => {
|
||
console.log(res);
|
||
alarmData.value = res.data;
|
||
});
|
||
};
|
||
getAlarm();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.rightPage {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.alarm-container {
|
||
border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
|
||
border-radius: 8px;
|
||
color: #fff;
|
||
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
padding: 10px;
|
||
}
|
||
|
||
/* 顶部标题栏 */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
margin-left: 8px;
|
||
}
|
||
.unhandled-badge {
|
||
margin-left: auto; /* 右对齐 */
|
||
}
|
||
.jgao {
|
||
font-size: 12px;
|
||
color: #f56c6c;
|
||
background: rgba(255, 77, 79, 0.2);
|
||
padding: 5px 6px;
|
||
border-radius: 10px;
|
||
margin-left: auto; /* 右对齐 */
|
||
}
|
||
.alarm_list {
|
||
width: 100%;
|
||
padding: 5px 0;
|
||
height: 14vh;
|
||
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||
}
|
||
// 滚动条优化
|
||
.alarm_list::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
.alarm_list::-webkit-scrollbar-thumb {
|
||
background-color: #0ff !important;
|
||
border-radius: 5px;
|
||
}
|
||
.alarm_list::-webkit-scrollbar-track {
|
||
background-color: rgba(0, 255, 255, 0.2);
|
||
}
|
||
/* 告警卡片 */
|
||
.alarm-card {
|
||
background: rgba(12, 30, 53, 0.3);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8px;
|
||
border: 1px solid #f56c6c;
|
||
margin-top: 10px;
|
||
}
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #f56c6c;
|
||
margin-left: 10px;
|
||
}
|
||
.time {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-left: auto; /* 右对齐 */
|
||
}
|
||
.card-content {
|
||
font-size: 13px;
|
||
color: #dcdfe6;
|
||
margin-bottom: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.card-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.left_title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
.left_title_img {
|
||
height: 20px;
|
||
width: 20px;
|
||
}
|
||
.left_title_text {
|
||
font-size: 20px;
|
||
font-family: 'Rang_men_zheng_title', sans-serif;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-left: 15px;
|
||
padding-top: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
.left_title_text1 {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-left: 15px;
|
||
padding-top: 2px;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.overview {
|
||
width: 100%;
|
||
height: 28vh;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
border: 1px solid #1e2b3d;
|
||
margin-top: 20px;
|
||
|
||
.overview_content {
|
||
height: 80%;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||
}
|
||
// 滚动条优化
|
||
.overview_content::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
.overview_content::-webkit-scrollbar-thumb {
|
||
background-color: #0ff !important;
|
||
border-radius: 5px;
|
||
}
|
||
.overview_content::-webkit-scrollbar-track {
|
||
background-color: rgba(0, 255, 255, 0.2);
|
||
}
|
||
}
|
||
.monitor {
|
||
width: 100%;
|
||
height: 39vh;
|
||
border: 1px solid #1e2b3d;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
|
||
.stats-container {
|
||
width: 100%; /* 可根据实际场景调整宽度 */
|
||
height: 87%;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||
.container_item {
|
||
width: 100%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.container_item_one {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.container_item_one_box {
|
||
width: 50%;
|
||
display: flex;
|
||
.box_img {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: rgba(12, 30, 53, 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.box_text {
|
||
color: rgba(156, 163, 175, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding-left: 10px;
|
||
// align-items: center;
|
||
}
|
||
}
|
||
/* 右侧区域：进度条 + 数据 */
|
||
.card-right {
|
||
display: flex;
|
||
|
||
margin-left: 10px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.progress-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-right: 6px;
|
||
font-size: 14px;
|
||
}
|
||
.progress-percent {
|
||
font-weight: bold;
|
||
}
|
||
.abnormal {
|
||
color: #ff9900; /* 异常数据颜色 */
|
||
}
|
||
.progress-bg {
|
||
height: 6px;
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
margin-bottom: 4px;
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
.progress-fg {
|
||
height: 100%;
|
||
width: 100px;
|
||
transition: width 0.3s;
|
||
}
|
||
/* 进度条颜色区分（可扩展更多规则） */
|
||
.green {
|
||
background-color: #28a745;
|
||
}
|
||
.orange {
|
||
background-color: #ffc107;
|
||
}
|
||
.green1 {
|
||
color: #28a745;
|
||
}
|
||
.orange1 {
|
||
color: #ffc107;
|
||
}
|
||
}
|
||
}
|
||
.container_item_two {
|
||
width: 90%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
margin-left: auto;
|
||
color: rgba(156, 163, 175, 1);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
// 滚动条优化
|
||
.stats-container::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
|
||
.stats-container::-webkit-scrollbar-thumb {
|
||
background-color: #0ff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.stats-container::-webkit-scrollbar-track {
|
||
background-color: rgba(0, 255, 255, 0.2);
|
||
}
|
||
}
|
||
</style>
|