<template>
  <n-card :bordered="false" class="online-monitor-card">
    <div class="card-header">
      <h2 class="card-title">在线监测实时数据</h2>
    </div>
    <n-table
      :columns="columns"
      :data="tableData"
      size="small"
      :pagination="false"
      class="monitor-table"
    />
  </n-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const columns = ref([
  { title: '设备名称', key: 'name', align: 'left' },
  { title: '监测值', key: 'value', align: 'center' },
  { title: '监测时间', key: 'time', align: 'center' },
]);

const tableData = ref([
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }
]);
</script>

<style scoped lang="scss">
.online-monitor-card {
  padding: 0.15rem;
  background: var(--n-bg-color-secondary);

  .card-header {
    margin-bottom: 0.15rem;
    .card-title {
      font-size: 0.18rem;
      font-weight: 600;
      color: var(--n-text-color-primary);
    }
  }

  .monitor-table {
    max-height: 1.5rem;
    overflow-y: auto;
    --n-table-row-hover-bg-color: rgba(10, 25, 71, 0.4);

    .normal { color: #6dd230; }
    .warning { color: #facc15; }
  }
}
</style>