maintenance_system/src/views/largeScreen/components/rightPage.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>