feat：产线运行看板-实时报警信息模块

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

@@ -1,84 +1,113 @@
 <template>
   <div class="card">
-    <div class="panel-title">
-      <span class="title-dot"></span>
-      <span>Payment method</span>
-      <div class="date-filter">
-        <el-date-picker
-          v-model="pickedDate"
-          type="date"
-          format="YYYY MM/DD"
-          value-format="YYYY-MM-DD"
-          :clearable="false"
-          size="small"
-        />
+    <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="panel-body">
-      <div ref="chartRef" class="chart"></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 { onMounted, onUnmounted, ref } from 'vue'
-import * as echarts from 'echarts'
-import { colors, style } from '../utils'
-
-const chartRef = ref<HTMLElement | null>(null)
-let chart: echarts.ECharts | null = null
-const pickedDate = ref('2023-08-31')
-
-const render = () => {
-  if (!chart) return
-  const x = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
-  const y = [60, 120, 165, 140, 185, 150, 190]
-  chart.setOption({
-    backgroundColor: 'transparent',
-    grid: { top: '14%', left: '6%', right: '4%', bottom: '12%', containLabel: true },
-    tooltip: { trigger: 'axis' },
-    xAxis: { type: 'category', data: x, axisLine: style.axisLine, axisLabel: { ...style.axisLabel, fontSize: 10 } },
-    yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { ...style.axisLabel, fontSize: 10 }, splitLine: style.splitLine },
-    series: [
-      {
-        type: 'line',
-        smooth: true,
-        showSymbol: true,
-        symbolSize: 6,
-        lineStyle: { width: 2, color: colors.cyan },
-        itemStyle: { color: colors.cyan },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(34,211,238,0.38)' },
-            { offset: 1, color: 'rgba(34,211,238,0.06)' }
-          ])
-        },
-        data: y
+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 resize = () => {
-  chart?.resize()
+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(() => {
-  if (!chartRef.value) return
-  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
-  render()
-  window.addEventListener('resize', resize)
+  getAlarms()
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', resize)
-  chart?.dispose()
+  if (timer) clearInterval(timer)
 })
 </script>
 
 <style scoped>
 .card {
-  height: 100%;
   background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
   border-radius: 8px;
   border: 1px solid rgba(30,64,175,0.85);
@@ -90,7 +119,6 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
@@ -119,52 +147,110 @@ onUnmounted(() => {
   border-top: none;
 }
 
-.panel-title {
+.card-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding: 10px 12px 4px;
   border-bottom: 1px solid rgba(41, 54, 95, 0.9);
-  font-size: 16px;
-  font-weight: 900;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
   color: #e5f0ff;
 }
 
-.title-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 1px solid rgba(56,189,248,0.95);
-  box-shadow: 0 0 12px rgba(56,189,248,0.45);
+.card-title-icon {
+  color: #22d3ee;
 }
 
-.date-filter {
-  margin-left: auto;
-  display: inline-flex;
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  overflow: hidden;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.alarm-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: 100%;
+  overflow: hidden;
+}
+
+.alarm-item {
+  display: flex;
   align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border-radius: 6px;
+  background: rgba(15,23,42,0.92);
+  border: 1px solid rgba(30,64,175,0.9);
+  font-size: 11px;
+  color: #e5f0ff;
+  transition: background 0.3s, box-shadow 0.3s;
+  flex-shrink: 0;
 }
 
-.date-filter :deep(.el-input__wrapper) {
-  background: rgba(2,6,23,0.35);
-  box-shadow: none;
-  border: 1px solid rgba(148,163,184,0.35);
+.alarm-item.danger {
+  border-left: 3px solid #ef4444;
+  box-shadow: 0 0 18px rgba(239,68,68,0.4);
 }
 
-.date-filter :deep(.el-input__inner) {
-  color: rgba(224,242,254,0.95);
-  font-size: 12px;
-  font-weight: 700;
+.alarm-item.warn {
+  border-left: 3px solid #f59e0b;
+  box-shadow: 0 0 14px rgba(245,158,11,0.35);
+}
+
+.alarm-item.safe {
+  border-left: 3px solid #22c55e;
+  box-shadow: 0 0 12px rgba(34,197,94,0.35);
+}
+
+.alarm-time {
+  width: 64px;
+  flex: 0 0 auto;
+  color: #94a3b8;
 }
 
-.panel-body {
+.alarm-msg {
   flex: 1;
-  min-height: 0;
-  padding: 10px 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.chart {
-  width: 100%;
-  height: 100%;
-  min-height: 160px;
+.alarm-level {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  padding: 2px 6px;
+  border: 1px solid rgba(148,163,184,0.6);
+  font-size: 10px;
+}
+
+.animating-out {
+  transition: all 0.35s;
+  transform: translateY(-48px);
+  opacity: 0;
 }
 </style>