<!--场站可燃气体浓度报警-->
<template>
  <div class="methane-alert-center">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-icon><Warning /></el-icon>
        <span class="title">可燃气体中心</span>
        <div class="stats-badge">
          <span class="stat-item critical"><i class="dot"></i>实时报警 {{ realtimeAlerts.length }}</span>
          <span class="stat-item warning"><i class="dot"></i>历史报警 {{ historyAlerts.length }}</span>
          <span class="stat-item"><i class="dot"></i>接入场站 {{ totalStations }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 260px"
            size="default"
        />
        <el-select v-model="companyFilter" placeholder="燃气公司" clearable style="width: 140px" size="default">
          <el-option label="沅陵燃气" value="yuanling" />
        </el-select>
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button :icon="Download" @click="exportReport">导出报表</el-button>
      </div>
    </div>

    <!-- KPI指标卡片 -->
    <div class="kpi-cards">
      <div class="kpi-card critical">
        <div class="kpi-value">{{ realtimeAlerts.length }}</div>
        <div class="kpi-label">实时报警</div>
        <div class="kpi-trend">较昨日 ↑{{ realtimeTrend }}</div>
      </div>
      <div class="kpi-card warning">
        <div class="kpi-value">{{ todayHistoryCount }}</div>
        <div class="kpi-label">今日历史报警</div>
        <div class="kpi-trend">待处理 {{ pendingCount }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ maxConcentration }}<span class="unit">ppm</span></div>
        <div class="kpi-label">最高浓度</div>
        <div class="kpi-trend">点位: {{ maxConcentrationPoint }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ avgResponseTime }}</div>
        <div class="kpi-label">平均响应时间(分钟)</div>
      </div>
    </div>

    <!-- 主内容区：左侧实时报警 + 右侧历史报警 -->
    <div class="main-layout">
      <!-- 左侧实时报警列表 -->
      <div class="alert-panel">
        <div class="panel-header">
          <span><el-icon><BellFilled /></el-icon> 实时报警</span>
          <el-tag type="danger" effect="dark">{{ realtimeAlerts.length }} 个报警</el-tag>
        </div>
        <div class="alert-list realtime">
          <div
              v-for="alert in paginatedRealtime"
              :key="alert.id"
              class="alert-item"
              :class="{ critical: alert.level === 'critical', warning: alert.level === 'warning' }"
              @click="viewAlertDetail(alert)"
          >
            <div class="alert-level">
              <el-tag :type="alert.level === 'critical' ? 'danger' : 'warning'" size="small">
                {{ alert.level === 'critical' ? '严重' : '预警' }}
              </el-tag>
            </div>
            <div class="alert-content">
              <div class="alert-title">{{ alert.stationName }}</div>
              <div class="alert-company">
                <el-icon><OfficeBuilding /></el-icon> {{ alert.companyName }}
              </div>
              <div class="alert-location">
                <el-icon><Location /></el-icon> {{ alert.address }}
              </div>
              <div class="alert-data">
                <span class="data-item">甲烷浓度: <strong :class="{ 'critical-value': alert.concentration > 30 }">{{ alert.concentration }} ppm</strong></span>
                <span class="data-item">报警阈值: {{ alert.threshold }} ppm</span>
              </div>
              <div class="alert-time">{{ alert.alertTime }}</div>
            </div>
            <div class="alert-action">
              <el-button size="small" type="primary" @click.stop="handleAlert(alert)">处理</el-button>
            </div>
          </div>
          <div v-if="realtimeAlerts.length === 0" class="empty-state">
            <el-empty description="暂无实时报警" :image-size="80" />
          </div>
        </div>
        <div class="pagination-area" v-if="realtimeAlerts.length > pageSize">
          <el-pagination small layout="prev, pager, next" :total="realtimeAlerts.length" :page-size="pageSize" v-model:current-page="realtimePage" />
        </div>
      </div>

      <!-- 右侧历史报警列表 -->
      <div class="history-panel">
        <div class="panel-header">
          <span><el-icon><Document /></el-icon> 历史报警</span>
          <el-input
              v-model="historySearch"
              placeholder="搜索场站/地址"
              clearable
              :prefix-icon="Search"
              style="width: 180px"
              size="small"
          />
        </div>
        <div class="alert-list history">
          <el-table :data="paginatedHistory" stripe border style="width: 100%" @row-click="viewAlertDetail">
            <el-table-column prop="stationName" label="场站名称" min-width="140" show-overflow-tooltip />
            <el-table-column prop="companyName" label="燃气公司" width="100" />
            <el-table-column prop="address" label="位置" min-width="150" show-overflow-tooltip />
            <el-table-column prop="concentration" label="甲烷浓度(ppm)" width="120" sortable>
              <template #default="{ row }">
                <span :class="{ 'critical-value': row.concentration > 30 }">{{ row.concentration }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="threshold" label="阈值(ppm)" width="90" />
            <el-table-column prop="level" label="级别" width="80" align="center">
              <template #default="{ row }">
                <el-tag :type="row.level === 'critical' ? 'danger' : 'warning'" size="small">
                  {{ row.level === 'critical' ? '严重' : '预警' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="alertTime" label="报警时间" width="150" sortable />
            <el-table-column prop="status" label="状态" width="80" align="center">
              <template #default="{ row }">
                <el-tag :type="row.status === 'resolved' ? 'success' : 'warning'" size="small">
                  {{ row.status === 'resolved' ? '已处理' : '待处理' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right" align="center">
              <template #default="{ row }">
                <el-button link type="primary" size="small" @click.stop="viewAlertDetail(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-area">
          <el-pagination
              small
              layout="total, prev, pager, next"
              :total="filteredHistory.length"
              :page-size="historyPageSize"
              v-model:current-page="historyPage"
          />
        </div>
      </div>
    </div>

    <!-- 报警详情抽屉 -->
    <el-drawer v-model="detailDrawerVisible" :title="`报警详情 - ${currentAlert?.stationName}`" size="480px" direction="rtl" @opened="onDrawerOpened">
      <div v-if="currentAlert" class="alert-detail">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="场站名称">{{ currentAlert.stationName }}</el-descriptions-item>
          <el-descriptions-item label="场站编号">{{ currentAlert.stationCode }}</el-descriptions-item>
          <el-descriptions-item label="燃气公司">{{ currentAlert.companyName }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ currentAlert.address }}</el-descriptions-item>
          <el-descriptions-item label="报警级别">
            <el-tag :type="currentAlert.level === 'critical' ? 'danger' : 'warning'">
              {{ currentAlert.level === 'critical' ? '严重报警' : '预警' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="甲烷浓度">
            <span :class="{ 'critical-value': currentAlert.concentration > 30 }">{{ currentAlert.concentration }} ppm</span>
          </el-descriptions-item>
          <el-descriptions-item label="报警阈值">{{ currentAlert.threshold }} ppm</el-descriptions-item>
          <el-descriptions-item label="报警时间">{{ currentAlert.alertTime }}</el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag :type="currentAlert.status === 'resolved' ? 'success' : 'danger'">
              {{ currentAlert.status === 'resolved' ? '已处理' : '待处理' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="currentAlert.resolveTime" label="处理时间">{{ currentAlert.resolveTime }}</el-descriptions-item>
          <el-descriptions-item label="处理人">{{ currentAlert.handler || '—' }}</el-descriptions-item>
          <el-descriptions-item label="处理说明">{{ currentAlert.remark || '—' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 浓度趋势图 -->
        <div class="trend-section">
          <div class="section-title">甲烷浓度趋势（最近1小时）</div>
          <div ref="chartRef" class="trend-chart"></div>
        </div>

        <!-- 处理操作 -->
        <div class="action-section" v-if="currentAlert.status !== 'resolved'">
          <el-button type="primary" @click="resolveAlert">标记已处理</el-button>
          <el-button type="warning" @click="dispatchWorkOrder">派发现场工单</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
import { Warning, Refresh, Download, BellFilled, Document, Location, Search, OfficeBuilding } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

// 沅陵县场站可燃气体实时报警数据
const realtimeAlerts = ref([
  { id: 1, stationCode: 'YL-LNG-01', stationName: '太常LNG储配站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区辰州东路末段LNG储配站', concentration: 48, threshold: 20, level: 'critical',
    alertTime: '2026-06-13 15:23:45', status: 'pending',
    trendData: [12, 15, 18, 22, 28, 32, 38, 42, 45, 48, 48, 47, 45, 42, 38, 35, 32, 28, 25, 22, 20, 18, 16, 14] },
  { id: 2, stationCode: 'YL-TY-01', stationName: '太常调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区古城中路与天宁路交叉口东侧', concentration: 28, threshold: 20, level: 'warning',
    alertTime: '2026-06-13 14:58:12', status: 'pending',
    trendData: [15, 17, 19, 22, 24, 26, 28, 28, 27, 26, 25, 24, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11] },
  { id: 3, stationCode: 'YL-GY-01', stationName: '工业园计量站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区建设东路工业园入口东侧', concentration: 35, threshold: 20, level: 'critical',
    alertTime: '2026-06-13 14:32:05', status: 'pending',
    trendData: [18, 20, 22, 25, 28, 30, 32, 35, 35, 34, 33, 32, 30, 28, 26, 24, 22, 20, 19, 18, 17, 16, 15, 14] }
])

// 沅陵县场站可燃气体历史报警数据
const historyAlerts = ref([
  { id: 101, stationCode: 'YL-MZ-01', stationName: '太常天然气门站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区辰州北路末段天然气门站', concentration: 42, threshold: 20, level: 'critical',
    alertTime: '2026-06-13 08:30:00', status: 'resolved', resolveTime: '2026-06-13 09:45:00', handler: '张建国', remark: '法兰连接处微漏，紧固后恢复正常',
    trendData: [10, 12, 14, 18, 22, 28, 32, 36, 40, 42, 42, 41, 38, 34, 28, 22, 16, 12, 10, 9, 8, 8, 7, 7] },
  { id: 102, stationCode: 'YL-CBTY-01', stationName: '城北调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区天宁西路与古城北路交叉口', concentration: 25, threshold: 20, level: 'warning',
    alertTime: '2026-06-13 07:15:00', status: 'resolved', resolveTime: '2026-06-13 08:20:00', handler: '李志强', remark: '通风后浓度下降至正常范围',
    trendData: [12, 13, 15, 17, 19, 21, 23, 25, 25, 24, 23, 21, 18, 15, 13, 11, 10, 9, 8, 8, 7, 7, 6, 6] },
  { id: 103, stationCode: 'YL-CNTY-01', stationName: '城南调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区建设路与古城南路交叉口南侧', concentration: 52, threshold: 20, level: 'critical',
    alertTime: '2026-06-12 22:45:00', status: 'pending', resolveTime: null, handler: null, remark: null,
    trendData: [18, 20, 22, 26, 30, 34, 38, 42, 46, 50, 52, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40] },
  { id: 104, stationCode: 'YL-TY-01', stationName: '太常调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区古城中路与天宁路交叉口东侧', concentration: 22, threshold: 20, level: 'warning',
    alertTime: '2026-06-12 14:20:00', status: 'resolved', resolveTime: '2026-06-12 15:10:00', handler: '王大明', remark: '巡检期间短暂波动，已自动恢复',
    trendData: [10, 11, 13, 15, 18, 20, 22, 22, 21, 20, 18, 16, 14, 12, 10, 9, 8, 8, 7, 7, 6, 6, 5, 5] },
  { id: 105, stationCode: 'YL-LNG-01', stationName: '太常LNG储配站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区辰州东路末段LNG储配站', concentration: 38, threshold: 20, level: 'critical',
    alertTime: '2026-06-11 10:00:00', status: 'resolved', resolveTime: '2026-06-11 11:30:00', handler: '赵志远', remark: '储罐区检测器校准后读数正常',
    trendData: [8, 10, 14, 18, 24, 30, 35, 38, 38, 37, 35, 30, 24, 18, 14, 10, 8, 7, 6, 6, 5, 5, 4, 4] },
  { id: 106, stationCode: 'YL-GY-01', stationName: '工业园计量站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区建设东路工业园入口东侧', concentration: 26, threshold: 20, level: 'warning',
    alertTime: '2026-06-11 16:10:00', status: 'pending', resolveTime: null, handler: null, remark: null,
    trendData: [14, 15, 16, 18, 20, 22, 24, 26, 26, 27, 28, 28, 27, 27, 26, 26, 25, 25, 24, 24, 23, 23, 22, 22] },
  { id: 107, stationCode: 'YL-CBTY-01', stationName: '城北调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区天宁西路与古城北路交叉口', concentration: 24, threshold: 20, level: 'warning',
    alertTime: '2026-06-10 09:30:00', status: 'resolved', resolveTime: '2026-06-10 10:15:00', handler: '陈文斌', remark: '调压器维护后短暂波动，已稳定',
    trendData: [11, 13, 15, 18, 21, 23, 24, 24, 23, 21, 18, 15, 12, 10, 9, 8, 7, 7, 6, 6, 5, 5, 5, 4] },
  { id: 108, stationCode: 'YL-CNTY-01', stationName: '城南调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区建设路与古城南路交叉口南侧', concentration: 31, threshold: 20, level: 'critical',
    alertTime: '2026-06-12 09:50:00', status: 'resolved', resolveTime: '2026-06-12 11:15:00', handler: '李志强', remark: '阀门密封圈老化，更换后恢复正常',
    trendData: [12, 14, 16, 19, 22, 26, 29, 31, 31, 30, 28, 25, 21, 16, 12, 9, 7, 6, 5, 5, 4, 4, 3, 3] },
  { id: 109, stationCode: 'YL-MZ-01', stationName: '太常天然气门站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区辰州北路末段天然气门站', concentration: 23, threshold: 20, level: 'warning',
    alertTime: '2026-06-11 18:30:00', status: 'resolved', resolveTime: '2026-06-11 19:10:00', handler: '张建国', remark: '交接班巡检发现，通风处置后恢复',
    trendData: [13, 14, 16, 18, 20, 22, 23, 23, 22, 20, 17, 14, 12, 10, 9, 8, 7, 7, 6, 6, 5, 5, 5, 4] },
  { id: 110, stationCode: 'YL-TY-01', stationName: '太常调压站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区古城中路与天宁路交叉口东侧', concentration: 33, threshold: 20, level: 'critical',
    alertTime: '2026-06-10 15:40:00', status: 'pending', resolveTime: null, handler: null, remark: null,
    trendData: [15, 17, 19, 22, 25, 28, 30, 32, 33, 33, 33, 32, 32, 31, 31, 30, 30, 29, 29, 28, 28, 27, 27, 26] },
  { id: 111, stationCode: 'YL-LNG-01', stationName: '太常LNG储配站', companyName: '沅陵燃气', companyId: 'yuanling',
    address: '沅陵县太常片区辰州东路末段LNG储配站', concentration: 21, threshold: 20, level: 'warning',
    alertTime: '2026-06-10 11:20:00', status: 'resolved', resolveTime: '2026-06-10 12:05:00', handler: '赵志远', remark: '槽车卸液作业期间瞬时波动',
    trendData: [8, 9, 11, 14, 17, 19, 21, 21, 20, 18, 15, 12, 10, 8, 7, 6, 5, 5, 4, 4, 3, 3, 3, 2] }
])

// 统计数据
const totalStations = computed(() => {
  const all = [...realtimeAlerts.value, ...historyAlerts.value]
  return new Set(all.map(a => a.stationCode)).size
})
const realtimeTrend = 1
const todayHistoryCount = computed(() => historyAlerts.value.filter(a => a.alertTime.startsWith('2026-06-13')).length)
const pendingCount = computed(() => historyAlerts.value.filter(a => a.status === 'pending').length)
const maxConcentration = computed(() => {
  const all = [...realtimeAlerts.value, ...historyAlerts.value]
  return Math.max(...all.map(a => a.concentration))
})
const maxConcentrationPoint = computed(() => {
  const all = [...realtimeAlerts.value, ...historyAlerts.value]
  const max = Math.max(...all.map(a => a.concentration))
  return all.find(a => a.concentration === max)?.stationName || '—'
})
const avgResponseTime = computed(() => {
  const resolved = historyAlerts.value.filter(a => a.status === 'resolved' && a.resolveTime)
  if (!resolved.length) return '--'
  const times = resolved.map(a => {
    const start = new Date(a.alertTime)
    const end = new Date(a.resolveTime)
    return (end - start) / 60000
  })
  return Math.round(times.reduce((a, b) => a + b, 0) / times.length)
})

// 筛选
const dateRange = ref([])
const companyFilter = ref('')
const historySearch = ref('')
const realtimePage = ref(1)
const historyPage = ref(1)
const pageSize = 5
const historyPageSize = 8

const filteredHistory = computed(() => {
  let list = historyAlerts.value
  if (dateRange.value && dateRange.value.length === 2) {
    const start = new Date(dateRange.value[0])
    const end = new Date(dateRange.value[1])
    list = list.filter(a => {
      const alertDate = new Date(a.alertTime)
      return alertDate >= start && alertDate <= end
    })
  }
  if (companyFilter.value) {
    list = list.filter(a => a.companyId === companyFilter.value)
  }
  if (historySearch.value) {
    const kw = historySearch.value.toLowerCase()
    list = list.filter(a => a.stationName.toLowerCase().includes(kw) || a.address.toLowerCase().includes(kw))
  }
  return list
})

const filteredRealtime = computed(() => {
  let list = realtimeAlerts.value
  if (companyFilter.value) {
    list = list.filter(a => a.companyId === companyFilter.value)
  }
  return list
})

const paginatedRealtime = computed(() => {
  const start = (realtimePage.value - 1) * pageSize
  return filteredRealtime.value.slice(start, start + pageSize)
})

const paginatedHistory = computed(() => {
  const start = (historyPage.value - 1) * historyPageSize
  return filteredHistory.value.slice(start, start + historyPageSize)
})

// 当前选中报警
const currentAlert = ref(null)
const detailDrawerVisible = ref(false)
const chartRef = ref(null)
let chartInstance = null

function renderChart() {
  if (!chartRef.value || !currentAlert.value?.trendData) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  const times = Array.from({ length: 24 }, (_, i) => `${i}:00`)
  const threshold = currentAlert.value.threshold
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: times, axisLabel: { rotate: 45, interval: 4 } },
    yAxis: { type: 'value', name: '甲烷浓度 (ppm)' },
    series: [
      { name: '甲烷浓度', type: 'line', data: currentAlert.value.trendData, smooth: true, lineStyle: { color: '#f56c6c', width: 2 }, areaStyle: { opacity: 0.1 } },
      { name: '报警阈值', type: 'line', data: Array(24).fill(threshold), lineStyle: { color: '#e6a23c', width: 2, type: 'dashed' }, symbol: 'none' }
    ]
  })
}

function onDrawerOpened() {
  nextTick(() => renderChart())
}

// 方法
const viewAlertDetail = (alert) => {
  currentAlert.value = alert
  detailDrawerVisible.value = true
}

const handleAlert = (alert) => {
  currentAlert.value = alert
  detailDrawerVisible.value = true
}

const resolveAlert = () => {
  if (currentAlert.value.status === 'pending') {
    // 从实时报警移到历史报警
    const index = realtimeAlerts.value.findIndex(a => a.id === currentAlert.value.id)
    if (index !== -1) {
      const resolved = { ...currentAlert.value, status: 'resolved', resolveTime: new Date().toLocaleString(), handler: '当前用户' }
      realtimeAlerts.value.splice(index, 1)
      historyAlerts.value.unshift(resolved)
    } else {
      // 如果是历史报警中的待处理
      const histIndex = historyAlerts.value.findIndex(a => a.id === currentAlert.value.id)
      if (histIndex !== -1) {
        historyAlerts.value[histIndex].status = 'resolved'
        historyAlerts.value[histIndex].resolveTime = new Date().toLocaleString()
        historyAlerts.value[histIndex].handler = '当前用户'
      }
    }
    currentAlert.value.status = 'resolved'
    ElMessage.success('已标记为已处理')
    detailDrawerVisible.value = false
  }
}

const dispatchWorkOrder = () => {
  ElMessage.success('已派发现场处置工单')
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
}

const exportReport = () => {
  ElMessage.success('导出报表（演示）')
}

// 监听筛选变化重置页码
watch([dateRange, companyFilter, historySearch], () => { historyPage.value = 1 })
watch(companyFilter, () => { realtimePage.value = 1 })

onBeforeUnmount(() => {
  try { chartInstance?.dispose() } catch {}
  chartInstance = null
})
</script>

<style scoped>
.methane-alert-center {
  background: #f0f2f6;
  min-height: 100vh;
  padding: 20px;
}
.page-header {
  background: white;
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-left .title { font-size: 1.3rem; font-weight: 600; }
.stats-badge { display: flex; gap: 20px; }
.stat-item { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat-item.critical { color: #f56c6c; }
.stat-item.warning { color: #e6a23c; }
.stat-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; }
.stat-item.critical .dot { background: #f56c6c; }
.stat-item.warning .dot { background: #e6a23c; }
.header-right { display: flex; gap: 12px; flex-wrap: wrap; }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.kpi-card.critical .kpi-value { color: #f56c6c; }
.kpi-card.warning .kpi-value { color: #e6a23c; }
.kpi-value { font-size: 32px; font-weight: bold; }
.kpi-value .unit { font-size: 14px; font-weight: normal; }
.kpi-label { font-size: 13px; color: #909399; margin-top: 4px; }
.kpi-trend { font-size: 11px; color: #67c23a; margin-top: 4px; }

.main-layout {
  display: flex;
  gap: 20px;
}
.alert-panel {
  width: 420px;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.history-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.alert-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.alert-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.alert-item.critical { background: #fff8f8; border: 1px solid #ffd4d4; }
.alert-item.warning { background: #fffef5; border: 1px solid #ffe4b5; }
.alert-item:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.alert-level { flex-shrink: 0; }
.alert-content { flex: 1; }
.alert-title { font-weight: 600; margin-bottom: 6px; }
.alert-company { font-size: 12px; color: #409eff; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.alert-location { font-size: 12px; color: #6c757d; display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.alert-data { display: flex; gap: 16px; font-size: 12px; margin-bottom: 6px; }
.alert-data .data-item { background: #f5f5f5; padding: 2px 8px; border-radius: 12px; }
.critical-value { color: #f56c6c; font-weight: bold; }
.alert-time { font-size: 11px; color: #aaa; }
.alert-action { display: flex; align-items: center; }
.empty-state { padding: 40px 0; text-align: center; }
.pagination-area { padding: 12px; text-align: center; border-top: 1px solid #eee; }

.alert-detail { padding: 8px; }
.section-title { font-weight: 600; margin: 16px 0 12px 0; }
.trend-chart { height: 200px; }
.action-section { margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end; }
</style>