lc_frontend/src/views/screen/components/AlertPanel.vue

<template>
  <div class="alert-panel" style="text-align: right">
    <div class="panel-title">{{ title }}</div>
    <div>
      <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
    </div>
    
    <div class="tip-container">
      <div class="tip-image">
        <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
        <span class="number">{{ alertData?.total || 0 }}</span>
      </div>
      <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
      <div class="tip-content">
        <div class="col-item">
          <img src="@/assets/images/screen/warning_img.png" width="23" />
          <span>告警总数</span>
          <span 
            style="font-size: 1.2rem; margin-left: 2vw; color: title === '高风险告警' ? 'yellow' : 'red'"
          >
            {{ alertData?.total || 0 }}
          </span>
        </div>
        <div v-if="title === '高风险告警'" class="col-item">
          <span>已处理</span>
          <span style="font-size: 1.2rem; margin-left: 2vw; color: greenyellow;">
            {{ alertData?.processed || 0 }}
          </span>
        </div>
        <div v-if="title === '高风险告警'" class="col-item" style="display: flex; margin-left: 2vw; align-items: center;">
          <span>待处理/处理中</span>
          <span style="font-size: 1.2rem; margin-left: 2vw; color: yellow;">
            {{ alertData?.pending || 0 }}
          </span>
        </div>
      </div>
    </div>
    
    <div class="list-content">
      <div class="list-title">
        <span>告警详情</span>
        <img width="50%" src="@/assets/images/line_1.png" />
      </div>
      <div class="list">
        <div class="list-wrapper">
          <div 
            class="list-item" 
            v-for="(item, index) in alertDetails" 
            :key="index + item.text"
          >
            <span 
              class="alert-text" 
              :class="[{ error: item.error }, { warn: item.warn }]"
            >
              <a href="'http://10.0.64.20/pms/workorder-list'">{{ (index + 1) }} {{ item.text }}</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AlertItem } from '../composables/useAlertManager'

interface Props {
  title: string
  alertData?: {
    total: number
    processed?: number
    pending?: number
  }
  alertDetails: AlertItem[]
}

defineProps<Props>()
</script>

<style scoped lang="scss">
.alert-panel {
  display: flex;
  background-image: url('@/assets/images/screen/right_top_img.png'), url('@/assets/images/screen/right_center_img.png'), url('@/assets/images/screen/right_bottom_img.png');
  background-position: top center, right center, bottom center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 90px, cover, 100% 68px;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;

  .panel-title {
    margin: 4px 20px 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
  }

  .tip-container {
    position: relative;
    display: flex;
    width: 70%;
    height: 80px;
    padding-right: 20px;
    align-items: center;
    justify-content: end;

    .tip-image {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%) translateX(-50%);

      .number {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1rem;
        color: #fff;
        transform: translate(-80%, -50%);
      }
    }

    .tip-content {
      position: absolute;
      inset: 0% 0 0 6%;
      display: flex;
      padding-left: 20px;
      align-items: center;

      .col-item {
        display: flex;
        margin-left: 1vw;
        align-items: center;

        span {
          margin-right: 10px;
        }
      }
    }
  }

  .list-content {
    display: flex;
    width: 68%;
    height: calc(100% - 100px);
    margin-top: 20px;
    flex-direction: column;
    align-items: flex-end;

    .list-title {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .list {
      display: flex;
      width: 100%;
      max-height: 22vh;
      flex: 1;
      flex-direction: column;
      align-items: center;

      .list-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        margin-top: 10px;
        overflow: hidden scroll;
        flex-direction: column;
        row-gap: 4px;
      }

      .list-item {
        display: inline-flex;
        padding: 0.5vh 0.4vw;
        font-size: 0.75rem;
        background: rgb(51 65 85 / 30%);
        border: 1px solid #1e40af;
        border-radius: 0.37vh;
        align-items: center;
        justify-content: center;

        .alert-text.error {
          color: #f00;
        }

        .alert-text.warn {
          color: #ff0;
        }
      }
    }
  }
}

@media (width <= 768px) {
  .alert-panel {
    .tip-container {
      width: 80%;
      height: 70px;

      .tip-image img {
        width: 60px;
        height: 60px;
      }

      .tip-content .col-item {
        font-size: 0.65rem;
      }
    }

    .list-content {
      width: 75%;

      .list .list-item {
        padding: 0.4vh 0.3vw;
        font-size: 0.65rem;
      }
    }
  }
}
</style>