<template>
  <div class="fullscreen-container" ref="containerRef">
    <!-- 顶部标题栏 -->
    <div class="dashboard-header">
      <div class="header-left">
        <div class="logo-area">
          <span class="logo-icon">📊</span>
        </div>
        <div class="title-area">
          <h1>甜菊糖采集监控系统</h1>
          <p class="subtitle">Real-time Data Acquisition Monitoring System</p>
        </div>
      </div>
      <div class="header-center">
        <div class="datetime-display">
          <span class="date">{{ currentDate }}</span>
          <span class="time">{{ currentTime }}</span>
        </div>
      </div>
      <div class="header-right">
        <div class="status-panel">
          <div class="status-item">
            <span class="status-dot" :class="{ online: isConnected }"></span>
            <span class="status-text">{{ isConnected ? '系统在线' : '连接断开' }}</span>
          </div>
          <el-button class="exit-btn" @click="exitFullscreen">
            <span class="btn-icon">✕</span>
            退出大屏
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="dashboard-body">
      <!-- 设备监控卡片区 -->
      <div class="equipment-section">
        <!-- 进料泵 -->
        <div class="equipment-card" :class="{ active: feedPump.status === 'running' }">
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-icon">🔄</div>
            <div class="card-title">
              <h3>进料泵</h3>
              <span class="status-tag" :class="feedPump.status">
                {{ feedPump.status === 'running' ? '● 运行中' : '○ 停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item">
              <span class="data-label">设定液位</span>
              <div class="data-value">
                <span class="number">{{ feedPump.setLevel }}</span>
                <span class="unit">米</span>
              </div>
            </div>
            <div class="data-item">
              <span class="data-label">控制模式</span>
              <span class="mode-text" :class="{ auto: feedPump.isAuto }">
                {{ feedPump.isAuto ? '自动' : '手动' }}
              </span>
            </div>
            <div class="data-item">
              <span class="data-label">频率设置</span>
              <div class="data-value">
                <span class="number">{{ feedPump.frequency }}</span>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">蒸发液位</span>
              <div class="data-value realtime">
                <span class="number glow">{{ feedPump.evaporationLevel }}</span>
                <span class="unit">米</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 蒸汽阀 -->
        <div class="equipment-card" :class="{ active: steamValve.status === 'running' }">
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-icon">🌡️</div>
            <div class="card-title">
              <h3>蒸汽阀</h3>
              <span class="status-tag" :class="steamValve.status">
                {{ steamValve.status === 'running' ? '● 运行中' : '○ 停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item">
              <span class="data-label">设定温度</span>
              <div class="data-value">
                <span class="number">{{ steamValve.setTemperature }}</span>
                <span class="unit">°C</span>
              </div>
            </div>
            <div class="data-item">
              <span class="data-label">控制模式</span>
              <span class="mode-text" :class="{ auto: steamValve.isAuto }">
                {{ steamValve.isAuto ? '自动' : '手动' }}
              </span>
            </div>
            <div class="data-item">
              <span class="data-label">开度设置</span>
              <div class="data-value">
                <span class="number">{{ steamValve.opening }}</span>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">酒精浓度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ steamValve.alcoholConcentration }}</span>
                <span class="unit">%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 回料阀 -->
        <div class="equipment-card" :class="{ active: returnValve.status === 'running' }">
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-icon">🔁</div>
            <div class="card-title">
              <h3>回料阀</h3>
              <span class="status-tag" :class="returnValve.status">
                {{ returnValve.status === 'running' ? '● 运行中' : '○ 停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item">
              <span class="data-label">设定流量</span>
              <div class="data-value">
                <span class="number">{{ returnValve.setFlow }}</span>
                <span class="unit">吨</span>
              </div>
            </div>
            <div class="data-item">
              <span class="data-label">控制模式</span>
              <span class="mode-text" :class="{ auto: returnValve.isAuto }">
                {{ returnValve.isAuto ? '自动' : '手动' }}
              </span>
            </div>
            <div class="data-item">
              <span class="data-label">开度设置</span>
              <div class="data-value">
                <span class="number">{{ returnValve.opening }}</span>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">回料流量</span>
              <div class="data-value realtime">
                <span class="number glow">{{ returnValve.actualFlow }}</span>
                <span class="unit">吨</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 浓液 -->
        <div class="equipment-card" :class="{ active: concentrate.status === 'running' }">
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-icon">💧</div>
            <div class="card-title">
              <h3>浓液系统</h3>
              <span class="status-tag" :class="concentrate.status">
                {{ concentrate.status === 'running' ? '● 运行中' : '○ 停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item">
              <span class="data-label">设定流量</span>
              <div class="data-value">
                <span class="number">{{ concentrate.setFlow }}</span>
                <span class="unit">吨</span>
              </div>
            </div>
            <div class="data-item">
              <span class="data-label">控制模式</span>
              <span class="mode-text" :class="{ auto: concentrate.isAuto }">
                {{ concentrate.isAuto ? '自动' : '手动' }}
              </span>
            </div>
            <div class="data-item">
              <span class="data-label">开度设置</span>
              <div class="data-value">
                <span class="number">{{ concentrate.opening }}</span>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">浓液流量</span>
              <div class="data-value realtime">
                <span class="number glow">{{ concentrate.actualFlow }}</span>
                <span class="unit">L/min</span>
              </div>
            </div>
          </div>
        </div>

        <!-- RO系统 -->
        <div class="equipment-card ro-card" :class="{ active: roSystem.status === 'running' }">
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-icon">⚙️</div>
            <div class="card-title">
              <h3>RO智能控制系统</h3>
              <span class="status-tag" :class="roSystem.status">
                {{ roSystem.status === 'running' ? '● 运行中' : '○ 停止' }}
              </span>
            </div>
          </div>
          <div class="card-body ro-body">
            <div class="data-item highlight">
              <span class="data-label">进水流量</span>
              <div class="data-value realtime">
                <span class="number glow">{{ roSystem.inletFlow }}</span>
                <span class="unit">m³/h</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">产水流量</span>
              <div class="data-value realtime">
                <span class="number glow">{{ roSystem.productFlow }}</span>
                <span class="unit">m³/h</span>
              </div>
            </div>
            <div class="data-item highlight">
              <span class="data-label">回收率</span>
              <div class="data-value realtime">
                <span class="number glow accent">{{ roSystem.recoveryRate }}</span>
                <span class="unit">%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-icon">📈</span>
            <h3>液位监控趋势</h3>
          </div>
          <div class="panel-body">
            <Echart :height="280" :options="levelChartOption" />
          </div>
        </div>
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-icon">📊</span>
            <h3>流量监控趋势</h3>
          </div>
          <div class="panel-body">
            <Echart :height="280" :options="flowChartOption" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { Echart } from '@/components/Echart'
import * as CollectApi from '@/api/mes/collect'
import type { EChartsOption, SeriesOption } from 'echarts'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')

defineOptions({ name: 'MesCollectFullscreen' })

const containerRef = ref<HTMLElement>()

// 响应式数据
const isConnected = ref(true)

// 时间显示
const currentDate = ref('')
const currentTime = ref('')
let clockTimer: ReturnType<typeof setInterval> | null = null
let dataUpdateTimer: ReturnType<typeof setInterval> | null = null

// 更新时间
const updateClock = () => {
  const now = dayjs()
  currentDate.value = now.format('YYYY年MM月DD日 dddd')
  currentTime.value = now.format('HH:mm:ss')
}

// 设备数据
const feedPump = ref({
  status: 'stopped',
  setLevel: 0,
  isAuto: false,
  frequency: 0,
  evaporationLevel: 0
})

const steamValve = ref({
  status: 'stopped',
  setTemperature: 0,
  isAuto: false,
  opening: 0,
  alcoholConcentration: 0
})

const returnValve = ref({
  status: 'stopped',
  setFlow: 0,
  isAuto: false,
  opening: 0,
  actualFlow: 0
})

const concentrate = ref({
  status: 'stopped',
  setFlow: 0,
  isAuto: false,
  opening: 0,
  actualFlow: 0
})

const roSystem = ref({
  status: 'stopped',
  inletFlow: 0,
  productFlow: 0,
  recoveryRate: 0
})

// 图表配置 - 深色主题
const baseChartOption = (): EChartsOption => ({
  backgroundColor: 'transparent',
  grid: { left: 50, right: 20, bottom: 30, top: 50, containLabel: true },
  tooltip: { 
    trigger: 'axis', 
    axisPointer: { type: 'cross', lineStyle: { color: 'rgba(0, 212, 255, 0.5)' } },
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(0, 212, 255, 0.3)',
    textStyle: { color: '#fff' }
  },
  legend: { 
    top: 10, 
    data: [] as string[],
    textStyle: { color: 'rgba(255, 255, 255, 0.8)' }
  },
  xAxis: { 
    type: 'category', 
    boundaryGap: false, 
    data: [] as string[],
    axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.3)' } },
    axisLabel: { color: 'rgba(255, 255, 255, 0.6)', fontSize: 10 },
    splitLine: { show: false }
  },
  yAxis: { 
    type: 'value',
    axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.3)' } },
    axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
    splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } }
  },
  series: [] as SeriesOption[]
})

const levelChartOption = reactive(baseChartOption()) as EChartsOption
const flowChartOption = reactive(baseChartOption()) as EChartsOption

// 获取最新设备数据
const fetchLatestData = async () => {
  try {
    const data = await CollectApi.getLatestEquipmentData()
    if (data) {
      feedPump.value = {
        status: data.feedPumpStatus || 'stopped',
        setLevel: data.feedPumpSetLevel ?? 0,
        isAuto: data.feedPumpIsAuto ?? false,
        frequency: data.feedPumpFrequency ?? 0,
        evaporationLevel: data.feedPumpEvaporationLevel ?? 0
      }
      steamValve.value = {
        status: data.steamValveStatus || 'stopped',
        setTemperature: data.steamValveSetTemperature ?? 0,
        isAuto: data.steamValveIsAuto ?? false,
        opening: data.steamValveOpening ?? 0,
        alcoholConcentration: data.steamValveAlcoholConcentration ?? 0
      }
      returnValve.value = {
        status: data.returnValveStatus || 'stopped',
        setFlow: data.returnValveSetFlow ?? 0,
        isAuto: data.returnValveIsAuto ?? false,
        opening: data.returnValveOpening ?? 0,
        actualFlow: data.returnValveActualFlow ?? 0
      }
      concentrate.value = {
        status: data.concentrateStatus || 'stopped',
        setFlow: data.concentrateSetFlow ?? 0,
        isAuto: data.concentrateIsAuto ?? false,
        opening: data.concentrateOpening ?? 0,
        actualFlow: data.concentrateActualFlow ?? 0
      }
      roSystem.value = {
        status: data.roSystemStatus || 'stopped',
        inletFlow: data.roSystemInletFlow ?? 0,
        productFlow: data.roSystemProductFlow ?? 0,
        recoveryRate: data.roSystemRecoveryRate ?? 0
      }
      isConnected.value = true
    }
  } catch (error) {
    console.error('获取设备数据失败:', error)
    isConnected.value = false
  }
}

// 获取趋势数据
const fetchTrendData = async () => {
  try {
    const params = {
      beginTime: dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    const trend = await CollectApi.getTrendData(params)
    if (trend) {
      const times = trend.times || []
      const toNums = (arr: any[]) => (arr || []).map((v) => (v === null || v === undefined ? null : Number(v)))
      const commonStyle = { smooth: true, connectNulls: true, showSymbol: false, areaStyle: { opacity: 0.1 } }

      const levelOption = levelChartOption as any
      levelOption.xAxis.data = times
      levelOption.legend.data = ['蒸发液位']
      levelOption.series = [
        { name: '蒸发液位', type: 'line', ...commonStyle, data: toNums(trend.feedPumpEvaporationLevel), itemStyle: { color: '#00d4ff' }, areaStyle: { color: 'rgba(0, 212, 255, 0.2)' } }
      ]

      const flowOption = flowChartOption as any
      flowOption.xAxis.data = times
      flowOption.legend.data = ['回料流量', '浓液流量', '进水流量', '产水流量']
      flowOption.series = [
        { name: '回料流量', type: 'line', ...commonStyle, data: toNums(trend.returnValveActualFlow), itemStyle: { color: '#00ff88' } },
        { name: '浓液流量', type: 'line', ...commonStyle, data: toNums(trend.concentrateActualFlow), itemStyle: { color: '#ffaa00' } },
        { name: '进水流量', type: 'line', ...commonStyle, data: toNums(trend.roSystemInletFlow), itemStyle: { color: '#ff6b6b' } },
        { name: '产水流量', type: 'line', ...commonStyle, data: toNums(trend.roSystemProductFlow), itemStyle: { color: '#a855f7' } }
      ]
    }
  } catch (error) {
    console.error('获取趋势数据失败:', error)
  }
}

// 退出全屏
const exitFullscreen = () => {
  window.close()
}

// 进入浏览器全屏
const enterBrowserFullscreen = () => {
  const el = containerRef.value
  if (el) {
    if (el.requestFullscreen) {
      el.requestFullscreen()
    }
  }
}

// 生命周期
onMounted(() => {
  // 启动时钟
  updateClock()
  clockTimer = setInterval(updateClock, 1000)
  
  // 获取数据
  fetchLatestData()
  fetchTrendData()
  
  // 定时刷新数据
  dataUpdateTimer = setInterval(() => {
    fetchLatestData()
    fetchTrendData()
  }, 300000)
  
  // 自动进入全屏
  setTimeout(enterBrowserFullscreen, 500)
})

onUnmounted(() => {
  if (clockTimer) {
    clearInterval(clockTimer)
    clockTimer = null
  }
  if (dataUpdateTimer) {
    clearInterval(dataUpdateTimer)
    dataUpdateTimer = null
  }
})
</script>

<style scoped>
/* ==================== 全屏大屏样式 ==================== */
.fullscreen-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==================== 顶部标题栏 ==================== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  background: linear-gradient(90deg, rgba(0, 50, 100, 0.8) 0%, rgba(0, 100, 150, 0.6) 50%, rgba(0, 50, 100, 0.8) 100%);
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, transparent, #00d4ff, transparent) 1;
  position: relative;
  flex-shrink: 0;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
  filter: blur(2px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.title-area h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, #fff, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.datetime-display {
  text-align: center;
}

.datetime-display .date {
  display: block;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.datetime-display .time {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: #00d4ff;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  font-family: 'Consolas', monospace;
}

.header-right {
  display: flex;
  align-items: center;
}

.status-panel {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
  animation: statusBlink 2s infinite;
}

.status-dot.online {
  background: #00ff88;
  box-shadow: 0 0 10px #00ff88;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.exit-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 20px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exit-btn:hover {
  background: linear-gradient(135deg, #ff8080 0%, #ff6b6b 100%);
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.btn-icon {
  font-size: 12px;
}

/* ==================== 主体内容区 ==================== */
.dashboard-body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

/* ==================== 设备卡片区 ==================== */
.equipment-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  flex-shrink: 0;
}

.equipment-card {
  position: relative;
  background: linear-gradient(180deg, rgba(0, 40, 80, 0.8) 0%, rgba(0, 20, 50, 0.9) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s;
}

.equipment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
}

.equipment-card.active {
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.equipment-card.active::before {
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.equipment-card:hover .card-glow {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: rgba(0, 212, 255, 0.1);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.card-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
}

.card-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.status-tag {
  font-size: 11px;
  margin-top: 2px;
  display: block;
}

.status-tag.running {
  color: #00ff88;
}

.status-tag.stopped {
  color: #ff6b6b;
}

.card-body {
  padding: 10px 15px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-item:last-child {
  border-bottom: none;
}

.data-item.highlight {
  background: rgba(0, 212, 255, 0.05);
  margin: 0 -15px;
  padding: 8px 15px;
  border-radius: 5px;
}

.data-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.data-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.data-value .number {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-family: 'Consolas', monospace;
}

.data-value .unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.data-value.realtime .number {
  color: #00d4ff;
}

.data-value.realtime .number.glow {
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  animation: dataGlow 2s infinite;
}

.data-value.realtime .number.accent {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

@keyframes dataGlow {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); }
  50% { opacity: 0.8; text-shadow: 0 0 20px rgba(0, 212, 255, 1); }
}

.mode-text {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.mode-text.auto {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.ro-card {
  grid-column: span 1;
}

.ro-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ==================== 图表区域 ==================== */
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  flex: 1;
  min-height: 0;
}

.chart-panel {
  background: linear-gradient(180deg, rgba(0, 40, 80, 0.8) 0%, rgba(0, 20, 50, 0.9) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(0, 212, 255, 0.1);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  flex-shrink: 0;
}

.panel-icon {
  font-size: 18px;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #00d4ff;
}

.panel-body {
  flex: 1;
  padding: 10px;
  min-height: 0;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1600px) {
  .equipment-section {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1200px) {
  .equipment-section {
    grid-template-columns: repeat(3, 1fr);
  }
  .charts-section {
    grid-template-columns: 1fr;
  }
}
</style>
