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

大屏

Browse Source
This commit is contained in:
ljx
2025-09-23 15:17:35 +08:00
parent 84b2a05e3c
commit 033c6bcbfa
13 changed files with 37406 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
src/views/largeScreen/components/rightPage.vue Normal file
View File

@ -0,0 +1,442 @@
<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: 'AlimamaShuHeiTi', 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>