city-life-line/src/views/subSystem/alarm/common/remind.vue

<template>
  <div class="alarm-page">
    <div class="alarm-stats"><div v-for="v in alarmLevels" :key="v.value" class="alarm-stat" :style="{ '--level-color': levelColor(v.value) }"><span>{{ v.label }}</span><strong>{{ count(v.value) }}</strong><span class="muted">当前未恢复报警事件</span></div></div>
    <el-card shadow="never">
      <div class="alarm-toolbar"><div><el-tag :type="refreshError ? 'danger' : 'success'">{{ refreshError ? '刷新失败' : '定时刷新已开启' }}</el-tag><span class="muted"> · 每 30 秒刷新 · {{ refreshedAt || '正在加载' }}</span></div><el-button :icon="manualPause ? VideoPlay : VideoPause" @click="manualPause = !manualPause">{{ manualPause ? '恢复滚动' : '暂停滚动' }}</el-button></div>
      <div class="alarm-toolbar"><el-form inline class="alarm-filters"><el-form-item label="报警等级"><el-select v-model="level" clearable placeholder="全部等级" @change="restart"><el-option v-for="v in alarmLevels" :key="v.value" :label="v.label" :value="Number(v.value)" /></el-select></el-form-item></el-form><span class="muted">{{ pending ? `有 ${pending} 条更新，恢复后显示` : `最近更新的 ${visibleRows.length} 条事件` }}</span></div>
      <el-alert v-if="refreshError" :title="refreshError" show-icon type="error" :closable="false"><el-button link @click="retry">重新加载</el-button></el-alert>
      <div ref="feed" v-loading="loading && !hasLoaded" class="reminder-feed" tabindex="0" @mouseenter="hoverPause = true" @mouseleave="hoverPause = false" @focusin="focusPause = true" @focusout="focusPause = false">
        <article v-for="row in visibleRows" :key="row.id" class="reminder-message" :style="{ borderLeftColor: levelColor(row.alarmLevel) }">
          <div class="alarm-toolbar"><strong>{{ row.deviceCode }} ({{ row.deviceName || row.deviceCode }}) <el-tag :type="levelTone(row.alarmLevel)">{{ alarmLevels.find(item => Number(item.value) === Number(row.alarmLevel))?.label || row.alarmLevelName || '—' }}</el-tag></strong><span class="muted">{{ row.latestOperationTime || row.createTime }}</span></div>
          <div class="muted">报警单号：{{ row.alarmNo || '—' }} · {{ row.equipmentLocation || '暂无安装位置' }}</div>
          <div class="alarm-toolbar"><span class="muted">监测：{{ row.monitorStatusName }} · 核实：{{ alarmAuditText(row) }} · 处置：{{ row.orderStatusName }}</span><el-button link type="primary" @click="detailRef.open(row.id)">事件详情</el-button></div>
          <p>{{ row.latestOperation || row.alarmContent || '—' }}</p>
        </article>
        <el-empty v-if="!visibleRows.length && !loading" :description="error ? '数据加载失败' : '暂无报警提醒'" />
      </div>
      <div class="muted feed-footer">{{ paused ? '视图已暂停，仍持续接收更新' : '自动滚动，悬停或聚焦暂停' }}</div>
    </el-card><AlarmDetail ref="detailRef" @visible-change="detailPause = $event" />
  </div>
</template>
<script setup name="AlarmRemind">
import { computed, ref, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
import { VideoPlay, VideoPause } from '@element-plus/icons-vue'
import { getAlarmReminders, getAlarmOptions, getAlarmStatistics } from '@/api/alarm'
import { levelTone, levelColor } from './js/alarmOperationsModel'
import { useAlarmScope } from './js/useAlarmScope'
import { alarmAuditText } from '@/utils/alarmLabels'
import AlarmDetail from '../AlarmDetail.vue'
import './styles/alarmOperations.scss'
import { useDict } from '@/utils/dict'
const { alarm_level: alarmLevels } = useDict('alarm_level')
const { scope, scopeKey } = useAlarmScope()
const options = ref({}), stats = ref([]), level = ref(), visibleRows = ref([]), received = ref([])
const manualPause = ref(false), hoverPause = ref(false), focusPause = ref(false), feed = ref(), detailRef = ref()
const loading = ref(false), error = ref(''), refreshedAt = ref(''), active = ref(true)
const hasLoaded = ref(false), statisticsError = ref(''), optionsError = ref('')
const refreshError = computed(() => error.value || statisticsError.value || optionsError.value)
const detailPause = ref(false)
const paused = computed(() => manualPause.value || hoverPause.value || focusPause.value || detailPause.value)
const pending = computed(() => received.value.filter(row => !visibleRows.value.some(old => old.id === row.id && old.latestOperationTime === row.latestOperationTime)).length)
const count = value => Number(stats.value.find(row => Number(row.level) === Number(value))?.total || 0)
let generation = 0, poll, scroll
async function load() {
  if (!active.value || loading.value) return
  const token = ++generation; loading.value = true
  const params = { ...scope.value, alarmStatus: 0 }
  // 统计独立刷新，列表不等待统计接口完成。
  loadStatistics(params, token)
  try {
    const page = await getAlarmReminders({ ...params, alarmLevel: level.value, pageNum: 1, pageSize: 100 })
    if (token !== generation) return
    received.value = page.data.records || []; error.value = ''
    // 首次进入、重新筛选或空列表收到数据时，暂停阅读不应阻止显示。
    if (!hasLoaded.value || !visibleRows.value.length || !paused.value) visibleRows.value = received.value
    hasLoaded.value = true
    refreshedAt.value = new Date().toLocaleTimeString()
  } catch (e) { if (token === generation) error.value = e.message || '刷新失败，请重试' }
  finally { if (token === generation) loading.value = false }
}
async function loadStatistics(params, token) {
  try {
    const summary = await getAlarmStatistics(params)
    if (token === generation) { stats.value = summary.data || []; statisticsError.value = '' }
  } catch (e) { if (token === generation) statisticsError.value = e.message || '等级统计刷新失败，请重试' }
}
async function loadOptions() {
  const key = scopeKey.value
  try {
    const result = await getAlarmOptions({ ...scope.value })
    if (key === scopeKey.value) { options.value = result.data || {}; optionsError.value = '' }
  } catch (e) { if (key === scopeKey.value) optionsError.value = e.message || '报警等级加载失败，请重试' }
}
function restart() {
  ++generation; loading.value = false; hasLoaded.value = false
  visibleRows.value = []; received.value = []; refreshedAt.value = ''; error.value = ''; statisticsError.value = ''
  return load()
}
function retry() { load(); if (optionsError.value) loadOptions() }
watch(paused, value => { if (!value && active.value) visibleRows.value = received.value })
watch(scopeKey, () => { stats.value = []; options.value = {}; optionsError.value = ''; restart(); loadOptions() }, { immediate: true })
onMounted(() => {
  poll = setInterval(load, 30000)
  scroll = setInterval(() => { const el = feed.value; if (!active.value || paused.value || !el || el.scrollHeight <= el.clientHeight) return; el.scrollTop = el.scrollTop + el.clientHeight >= el.scrollHeight - 1 ? 0 : el.scrollTop + 1 }, 70)
})
onActivated(() => {
  if (active.value) return
  active.value = true; hasLoaded.value = false; load()
})
onDeactivated(() => {
  active.value = false; ++generation; loading.value = false
  hoverPause.value = false; focusPause.value = false; detailPause.value = false
})
onBeforeUnmount(() => { ++generation; clearInterval(poll); clearInterval(scroll) })
</script>
<style scoped>
.reminder-feed{height:calc(100vh - 390px);min-height:350px;overflow:auto;padding-right:8px}.reminder-message{border:1px solid #ebeef5;border-left:4px solid;border-radius:6px;padding:18px 20px;margin-bottom:12px;background:#fff}.reminder-message .alarm-toolbar:last-child{margin-bottom:0}.reminder-message p{line-height:1.8;overflow-wrap:anywhere}.feed-footer{margin-top:16px}
</style>