<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <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="control-btn"
            :class="{ collecting: isCollecting }"
            @click="toggleCollection"
          >
            <span class="btn-icon">{{ isCollecting ? '⏹' : '▶' }}</span>
            {{ isCollecting ? '停止采集' : '开始采集' }}
          </el-button>
          <el-button class="fullscreen-btn" @click="openFullscreen">
            <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>
              <el-switch
                v-model="feedPump.isAuto"
                active-text="自动"
                inactive-text="手动"
                @change="updateFeedPumpMode"
                class="mode-switch"
              />
            </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>
              <el-switch
                v-model="steamValve.isAuto"
                active-text="自动"
                inactive-text="手动"
                @change="updateSteamValveMode"
                class="mode-switch"
              />
            </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>
              <el-switch
                v-model="returnValve.isAuto"
                active-text="自动"
                inactive-text="手动"
                @change="updateReturnValveMode"
                class="mode-switch"
              />
            </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>
              <el-switch
                v-model="concentrate.isAuto"
                active-text="自动"
                inactive-text="手动"
                @change="updateConcentrateMode"
                class="mode-switch"
              />
            </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>蒸馏凝结水泵</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="220" :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="220" :options="flowChartOption" />
          </div>
        </div>
      </div>

      <!-- 数据列表区域 -->
      <div class="table-section">
        <div class="panel-header">
          <span class="panel-icon">📋</span>
          <h3>最近采集记录</h3>
          <span class="record-count">共 {{ historyList.length }} 条</span>
        </div>
        <div class="table-wrapper">
          <el-table
            :data="historyList"
            v-loading="tableLoading"
            size="small"
            :header-cell-style="{ background: 'rgba(0, 212, 255, 0.1)', color: '#00d4ff', fontWeight: '600', borderBottom: '1px solid rgba(0, 212, 255, 0.3)' }"
            :row-style="{ background: 'transparent' }"
            :cell-style="{ borderBottom: '1px solid rgba(255, 255, 255, 0.05)' }"
          >
            <el-table-column label="采集时间" prop="createTime" min-width="160">
              <template #default="{ row }">
                <span class="time-cell">{{ formatDateTime(row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="蒸发液位(米)" prop="feedPumpEvaporationLevel" min-width="100" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.feedPumpEvaporationLevel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="酒精浓度(%)" prop="steamValveAlcoholConcentration" min-width="100" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.steamValveAlcoholConcentration }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回料流量(吨)" prop="returnValveActualFlow" min-width="100" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.returnValveActualFlow }}</span>
              </template>
            </el-table-column>
            <el-table-column label="浓液流量(L/min)" prop="concentrateActualFlow" min-width="120" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.concentrateActualFlow }}</span>
              </template>
            </el-table-column>
            <el-table-column label="进水流量(m³/h)" prop="roSystemInletFlow" min-width="120" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.roSystemInletFlow }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水流量(m³/h)" prop="roSystemProductFlow" min-width="120" align="center">
              <template #default="{ row }">
                <span class="data-cell">{{ row.roSystemProductFlow }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回收率(%)" prop="roSystemRecoveryRate" min-width="100" align="center">
              <template #default="{ row }">
                <span class="data-cell highlight">{{ row.roSystemRecoveryRate }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Echart } from '@/components/Echart'
import * as CollectApi from '@/api/mes/collect'
import type { EquipmentDataVO } 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: 'MesCollectIndex' })

// 响应式数据
const isConnected = ref(true)
const isCollecting = ref(false)
const loading = ref(false)
const tableLoading = ref(false)

// 时间显示
const currentDate = ref('')
const currentTime = ref('')
let clockTimer: 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 historyList = ref<EquipmentDataVO[]>([])

// 格式化时间
const formatDateTime = (time: any) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD 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
})

// 定时器
let dataUpdateTimer: ReturnType<typeof setInterval> | null = null

// 图表配置 - 深色主题
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 {
    loading.value = true
    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
      }
      // 更新RO系统数据
      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
  } finally {
    loading.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 }

      // 液位监控图表
      const levelOption = levelChartOption as any
      levelOption.xAxis.data = times
      levelOption.legend.data = ['蒸发液位']
      levelOption.series = [
        { name: '蒸发液位', type: 'line', ...commonStyle, data: toNums(trend.feedPumpEvaporationLevel), itemStyle: { color: '#409EFF' } }
      ]

      // 流量监控图表
      const flowOption = flowChartOption as any
      flowOption.xAxis.data = times
      flowOption.legend.data = ['回料流量', '浓液流量', '进水流量', '产水流量']
      flowOption.series = [
        { name: '回料流量', type: 'line', ...commonStyle, data: toNums(trend.returnValveActualFlow), itemStyle: { color: '#67C23A' } },
        { name: '浓液流量', type: 'line', ...commonStyle, data: toNums(trend.concentrateActualFlow), itemStyle: { color: '#E6A23C' } },
        { name: '进水流量', type: 'line', ...commonStyle, data: toNums(trend.roSystemInletFlow), itemStyle: { color: '#F56C6C' } },
        { name: '产水流量', type: 'line', ...commonStyle, data: toNums(trend.roSystemProductFlow), itemStyle: { color: '#909399' } }
      ]
    }
  } catch (error) {
    console.error('获取趋势数据失败:', error)
  }
}

// 获取历史数据列表（最近10条）
const fetchHistoryData = async () => {
  try {
    tableLoading.value = true
    const res = await CollectApi.getEquipmentDataPage({ pageNo: 1, pageSize: 10 })
    historyList.value = res?.list || []
  } catch (error) {
    console.error('获取历史数据失败:', error)
  } finally {
    tableLoading.value = false
  }
}

// 方法
const toggleCollection = () => {
  isCollecting.value = !isCollecting.value
  if (isCollecting.value) {
    startDataCollection()
    ElMessage.success('开始数据采集')
  } else {
    stopDataCollection()
    ElMessage.info('停止数据采集')
  }
}

const startDataCollection = () => {
  // 立即获取一次数据
  fetchLatestData()
  fetchTrendData()
  fetchHistoryData()
  // 每2秒更新一次数据
  dataUpdateTimer = setInterval(async () => {
    await fetchLatestData()
    await fetchTrendData()
    await fetchHistoryData()
  }, 300000)
}

const stopDataCollection = () => {
  if (dataUpdateTimer) {
    clearInterval(dataUpdateTimer)
    dataUpdateTimer = null
  }
}

const updateFeedPumpMode = async (value: boolean) => {
  try {
    await CollectApi.updateControlMode('feedPump', value)
    ElMessage.success(`进料泵切换到${value ? '自动' : '手动'}模式`)
  } catch (error) {
    ElMessage.error('切换模式失败')
    feedPump.value.isAuto = !value
  }
}

const updateSteamValveMode = async (value: boolean) => {
  try {
    await CollectApi.updateControlMode('steamValve', value)
    ElMessage.success(`酒精泵切换到${value ? '自动' : '手动'}模式`)
  } catch (error) {
    ElMessage.error('切换模式失败')
    steamValve.value.isAuto = !value
  }
}

const updateReturnValveMode = async (value: boolean) => {
  try {
    await CollectApi.updateControlMode('returnValve', value)
    ElMessage.success(`膜分离机组切换到${value ? '自动' : '手动'}模式`)
  } catch (error) {
    ElMessage.error('切换模式失败')
    returnValve.value.isAuto = !value
  }
}

const updateConcentrateMode = async (value: boolean) => {
  try {
    await CollectApi.updateControlMode('concentrate', value)
    ElMessage.success(`膜浓缩机组切换到${value ? '自动' : '手动'}模式`)
  } catch (error) {
    ElMessage.error('切换模式失败')
    concentrate.value.isAuto = !value
  }
}

// 打开全屏大屏展示
const openFullscreen = () => {
  const routePath = '/mes/collect/fullscreen'
  // 获取当前 hash 前的基础路径（兼容 /index# 格式）
  // const baseUrl = window.location.href.split('#')[0]
  // const fullUrl = baseUrl + '#' + routePath
  window.open(routePath, '_blank')
}

// 生命周期
onMounted(() => {
  // 启动时钟
  updateClock()
  clockTimer = setInterval(updateClock, 1000)
  // 自动开始采集
  toggleCollection()
})

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

<style scoped>
/* ==================== 数据大屏主题样式 ==================== */
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
  padding: 0;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* ==================== 顶部标题栏 ==================== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 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;
}

.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: 32px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.title-area h1 {
  margin: 0;
  font-size: 24px;
  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: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.datetime-display .time {
  display: block;
  font-size: 28px;
  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: 10px;
  height: 10px;
  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);
}

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

.control-btn:hover {
  background: linear-gradient(135deg, #00e5ff 0%, #00aadd 100%);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  transform: translateY(-2px);
}

.control-btn.collecting {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
  border-color: rgba(255, 107, 107, 0.5);
}

.control-btn.collecting:hover {
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.fullscreen-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 1px solid rgba(102, 126, 234, 0.5);
  border-radius: 20px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fullscreen-btn:hover {
  background: linear-gradient(135deg, #7c8ff0 0%, #8a5db8 100%);
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

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

/* ==================== 主体内容区 ==================== */
.dashboard-body {
  padding: 20px;
}

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

.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);
}

.equipment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.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: 12px 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: 12px 15px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 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: 10px 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-switch {
  --el-switch-on-color: #00d4ff;
  --el-switch-off-color: #4a5568;
}

/* RO卡片特殊样式 */
.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;
  margin-bottom: 20px;
}

.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;
}

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

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

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

.record-count {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 212, 255, 0.1);
  padding: 2px 10px;
  border-radius: 10px;
}

.panel-body {
  padding: 15px;
}

/* ==================== 数据表格区域 ==================== */
.table-section {
  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;
}

.table-wrapper {
  padding: 15px;
}

/* 表格样式覆盖 */
:deep(.el-table) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-table tr) {
  background: transparent !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background: rgba(0, 212, 255, 0.1) !important;
}

:deep(.el-table th.el-table__cell) {
  background: rgba(0, 212, 255, 0.1) !important;
  color: #00d4ff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
}

:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table::before) {
  background-color: rgba(0, 212, 255, 0.2) !important;
}

.time-cell {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.data-cell {
  color: #00d4ff;
  font-weight: 600;
  font-family: 'Consolas', monospace;
}

.data-cell.highlight {
  color: #00ff88;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1600px) {
  .equipment-section {
    grid-template-columns: repeat(3, 1fr);
  }
  .ro-card {
    grid-column: span 1;
  }
}

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

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }

  .header-center {
    position: static;
    transform: none;
  }

  .equipment-section {
    grid-template-columns: 1fr;
  }

  .title-area h1 {
    font-size: 18px;
  }

  .datetime-display .time {
    font-size: 20px;
  }
}
</style>
