besure_web/src/views/report/dashboardPage/dashboard1/components/PaymentMethod.vue

<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:bell" />
        </span>
        <span>实时报警信息</span>
      </div>
      <span class="tag">滚动展示</span>
    </div>
    <div class="card-body">
      <ul ref="listRef" class="alarm-list">
        <li
          v-for="(a, index) in alarms"
          :key="index"
          class="alarm-item"
          :class="[a.type, { 'animating-out': index === 0 && isAnimating }]"
          :title="a.msg"
        >
          <span class="alarm-time">[{{ a.time }}]</span>
          <span class="alarm-msg">{{ a.msg }}</span>
          <span class="alarm-level">{{ a.level }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { DeviceWarningRecordApi, DeviceWarningRecordVO } from '@/api/iot/deviceWarningRecord'

const route = useRoute()
const orgId = route.query.orgId

const alarms = ref<any[]>([])
const isAnimating = ref(false)
let timer: ReturnType<typeof setInterval> | null = null

const getAlarms = async () => {
  try {
    const data = (await DeviceWarningRecordApi.getList({ orgId })) || []
    alarms.value = data.map((item: DeviceWarningRecordVO) => {
      let timeStr = ''
      if (item.createTime) {
        const d = new Date(item.createTime)
        timeStr = d.toTimeString().slice(0, 8)
      }

      let type = 'safe'
      let levelText = item.alarmLevel

      if (item.alarmLevel === '2') {
        type = 'danger'
        levelText = '严重'
      } else if (item.alarmLevel === '1') {
        type = 'warn'
        levelText = '警告'
      } else if (item.alarmLevel === '0') {
        type = 'safe'
        levelText = '提示'
      } else {
        if (item.alarmLevel === '严重') type = 'danger'
        else if (item.alarmLevel === '警告') type = 'warn'
        else if (item.alarmLevel === '提示') type = 'safe'
      }

      return {
        time: timeStr,
        level: levelText,
        type,
        msg: `${item.deviceName}-${item.ruleName}`
      }
    })

    startAnimation()
  } catch (error) {
    console.error('Failed to fetch alarms:', error)
  }
}

const startAnimation = () => {
  if (timer) clearInterval(timer)
  if (alarms.value.length === 0) return

  timer = setInterval(() => {
    isAnimating.value = true
    setTimeout(() => {
      const first = alarms.value.shift()
      if (first) {
        alarms.value.push(first)
      }
      isAnimating.value = false
    }, 360)
  }, 3000)
}

onMounted(() => {
  getAlarms()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.card {
  position: relative;
  display: flex;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
  border: 1px solid rgb(30 64 175 / 85%);
  border-radius: 8px;
  box-shadow:
    0 18px 45px rgb(15 23 42 / 95%),
    0 0 0 1px rgb(15 23 42 / 100%),
    inset 0 0 0 1px rgb(56 189 248 / 5%);
  flex-direction: column;
}

.card::before,
.card::after {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  border: 1px solid rgb(56 189 248 / 75%);
  border-radius: 2px;
  content: "";
  opacity: 0.6;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-top: none;
  border-left: none;
}

.card-header {
  display: flex;
  padding: 10px 12px 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgb(41 54 95 / 90%);
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  display: flex;
  min-height: 0;
  padding: 10px 12px 12px;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.tag {
  padding: 2px 6px;
  font-size: 10px;
  color: #94a3b8;
  border: 1px solid rgb(148 163 184 / 40%);
  border-radius: 999px;
}

.alarm-list {
  display: flex;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  flex-direction: column;
  gap: 6px;
}

.alarm-item {
  display: flex;
  padding: 7px 8px;
  font-size: 11px;
  color: #e5f0ff;
  background: rgb(15 23 42 / 92%);
  border: 1px solid rgb(30 64 175 / 90%);
  border-radius: 6px;
  transition: background 0.3s, box-shadow 0.3s;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.alarm-item.danger {
  border-left: 3px solid #ef4444;
  box-shadow: 0 0 18px rgb(239 68 68 / 40%);
}

.alarm-item.warn {
  border-left: 3px solid #f59e0b;
  box-shadow: 0 0 14px rgb(245 158 11 / 35%);
}

.alarm-item.safe {
  border-left: 3px solid #22c55e;
  box-shadow: 0 0 12px rgb(34 197 94 / 35%);
}

.alarm-time {
  width: 64px;
  flex: 0 0 auto;
  color: #94a3b8;
}

.alarm-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.alarm-level {
  padding: 2px 6px;
  font-size: 10px;
  border: 1px solid rgb(148 163 184 / 60%);
  border-radius: 999px;
  flex: 0 0 auto;
}

.animating-out {
  opacity: 0;
  transform: translateY(-48px);
  transition: all 0.35s;
}
</style>