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

<template>
  <div class="right-bottom" style="text-align: right">
    <div class="panel-title">超时工单</div>
    <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />

    <div class="tip-container">
      <div class="tip-image">
        <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
        <span class="number">{{ timeoutWorkOrders?.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; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 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">
              <span class="alert-text" :class="[{ error: item.status == 2 }, { warn: item.status == 1 }]">
              {{ (index + 1) }} {{ item.describe }}
            </span>
          </div>
        </div>
      </div>
    </div> -->
    <AlertList style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
  </div>
</template>

<script setup lang="ts">
import AlertList from './AlertList.vue'
// 类型定义
interface AlertItem {
  description: string
  alarm_level_code: string
  alarm_status: string
  alarm_biz_id: string
}

interface TimeoutWorkOrders {
  total: number
}

// Props定义
interface Props {
  timeoutWorkOrders?: TimeoutWorkOrders
  alertDetails?: AlertItem[]
  sourceIndex?: number
}

// 默认值
const props = withDefaults(defineProps<Props>(), {
  timeoutWorkOrders: () => ({
    total: 0
  }),
  alertDetails: () => [],
  sourceIndex: 1
})
</script>

<style scoped lang="scss">


/* 响应式设计 */
@media (width <= 768px) {
  .right-bottom {
    .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;
      }
    }
  }
}

@media (width <= 480px) {
  .right-bottom {
    .tip-container {
      width: 85%;
      height: 60px;

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

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

    .list-content {
      width: 80%;

      .list .list-item {
        padding: 0.3vh 0.2vw;
        font-size: 0.6rem;
      }
    }
  }
}

.right-bottom {
  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: 3px 15px 0;
    font-size: 0.8rem;
    font-weight: bold;
  }

  .tip-container {
    position: relative;
    display: flex;
    width: 50%;
    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;
        }
      }
    }
  }
}
</style>