<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">Production Process 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 online"></span>
            <span class="status-text">系统在线</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="dashboard-body">
      <!-- 番茄酱监控卡片区 -->
      <div class="process-section">
        <!-- 前处理设备 -->
        <div class="process-card pretreatment">
          <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="pretreatment.status === 'running' ? 'running' : 'stopped'">
                ● {{ pretreatment.status === 'running' ? '运行中' : '已停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item" :class="{ warning: !isInRange(pretreatment.voltage, 380, 390) }">
              <span class="data-label">电压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.voltage }}</span>
                <span class="unit">V</span>
              </div>
              <span class="range-hint">380-390</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(pretreatment.current, 128, 135) }">
              <span class="data-label">电流</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.current }}</span>
                <span class="unit">A</span>
              </div>
              <span class="range-hint">128-135</span>
            </div>
            <div class="data-item" :class="{ warning: pretreatment.waterPressure !== 1.8 }">
              <span class="data-label">水压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.waterPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">1.8</span>
            </div>
            <div class="data-item" :class="{ warning: pretreatment.airPressure !== 8.0 }">
              <span class="data-label">空压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.airPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">8.0</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(pretreatment.temperature, 42.8, 43.2) }">
              <span class="data-label">温度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.temperature }}</span>
                <span class="unit">°C</span>
              </div>
              <span class="range-hint">42.8-43.2</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(pretreatment.viscosity, 8.1, 9.5) }">
              <span class="data-label">粘度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.viscosity }}</span>
                <span class="unit">mPa·s</span>
              </div>
              <span class="range-hint">8.1-9.5</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(pretreatment.liquidLevel, 40.0, 70.0) }">
              <span class="data-label">液位</span>
              <div class="data-value realtime">
                <span class="number glow">{{ pretreatment.liquidLevel }}</span>
                <span class="unit">%</span>
              </div>
              <span class="range-hint">40.0-70.0</span>
            </div>
          </div>
        </div>

        <!-- 蒸发设备 -->
        <div class="process-card evaporation">
          <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="evaporation.status === 'running' ? 'running' : 'stopped'">
                ● {{ evaporation.status === 'running' ? '运行中' : '已停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item" :class="{ warning: !isInRange(evaporation.voltage, 380, 390) }">
              <span class="data-label">电压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.voltage }}</span>
                <span class="unit">V</span>
              </div>
              <span class="range-hint">380-390</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(evaporation.current, 128, 135) }">
              <span class="data-label">电流</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.current }}</span>
                <span class="unit">A</span>
              </div>
              <span class="range-hint">128-135</span>
            </div>
            <div class="data-item" :class="{ warning: evaporation.waterPressure !== 1.8 }">
              <span class="data-label">水压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.waterPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">1.8</span>
            </div>
            <div class="data-item" :class="{ warning: evaporation.airPressure !== 7.0 }">
              <span class="data-label">空压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.airPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">7.0</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(evaporation.calibrationPressure, 0.55, 0.99) }">
              <span class="data-label">一校气压</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.calibrationPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">0.55-0.99</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(evaporation.temperature, 80.0, 95.0) }">
              <span class="data-label">温度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.temperature }}</span>
                <span class="unit">°C</span>
              </div>
              <span class="range-hint">80.0-95.0</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(evaporation.concentration, 36.0, 39.0) }">
              <span class="data-label">浓度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ evaporation.concentration }}</span>
                <span class="unit">%</span>
              </div>
              <span class="range-hint">36.0-39.0</span>
            </div>
          </div>
        </div>

        <!-- 杀菌设备 -->
        <div class="process-card sterilization">
          <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="sterilization.status === 'running' ? 'running' : 'stopped'">
                ● {{ sterilization.status === 'running' ? '运行中' : '已停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item" :class="{ warning: sterilization.pressure !== 100 }">
              <span class="data-label">压力</span>
              <div class="data-value realtime">
                <span class="number glow">{{ sterilization.pressure }}</span>
                <span class="unit">kPa</span>
              </div>
              <span class="range-hint">100</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(sterilization.speed, 65, 80) }">
              <span class="data-label">转速</span>
              <div class="data-value realtime">
                <span class="number glow">{{ sterilization.speed }}</span>
                <span class="unit">rpm</span>
              </div>
              <span class="range-hint">65-80</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(sterilization.sterilizationTemp, 109, 110) }">
              <span class="data-label">杀菌设备温度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ sterilization.sterilizationTemp }}</span>
                <span class="unit">°C</span>
              </div>
              <span class="range-hint">109-110</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(sterilization.coolingTemp, 35.0, 38.0) }">
              <span class="data-label">杀菌设备冷却温度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ sterilization.coolingTemp }}</span>
                <span class="unit">°C</span>
              </div>
              <span class="range-hint">35.0-38.0</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(sterilization.tankLevel, 70.0, 99.0) }">
              <span class="data-label">储料罐液位</span>
              <div class="data-value realtime">
                <span class="number glow">{{ sterilization.tankLevel }}</span>
                <span class="unit">%</span>
              </div>
              <span class="range-hint">70.0-99.0</span>
            </div>
          </div>
        </div>

        <!-- 灌装设备 -->
        <div class="process-card filling">
          <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="filling.status === 'running' ? 'running' : 'stopped'">
                ● {{ filling.status === 'running' ? '运行中' : '已停止' }}
              </span>
            </div>
          </div>
          <div class="card-body">
            <div class="data-item" :class="{ warning: filling.steamPressure !== 8.0 }">
              <span class="data-label">蒸汽压力</span>
              <div class="data-value realtime">
                <span class="number glow">{{ filling.steamPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">8.0</span>
            </div>
            <div class="data-item" :class="{ warning: filling.airPressure !== 7.0 }">
              <span class="data-label">空气压力</span>
              <div class="data-value realtime">
                <span class="number glow">{{ filling.airPressure }}</span>
                <span class="unit">MPa</span>
              </div>
              <span class="range-hint">7.0</span>
            </div>
            <div class="data-item" :class="{ warning: filling.fillingTemp !== 36 }">
              <span class="data-label">灌装设备温度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ filling.fillingTemp }}</span>
                <span class="unit">°C</span>
              </div>
              <span class="range-hint">36</span>
            </div>
            <div class="data-item" :class="{ warning: !isInRange(filling.fillingSpeed, 8840, 8860) }">
              <span class="data-label">灌装设备速度</span>
              <div class="data-value realtime">
                <span class="number glow">{{ filling.fillingSpeed }}</span>
                <span class="unit">瓶/h</span>
              </div>
              <span class="range-hint">8840-8860</span>
            </div>
          </div>
        </div>
      </div>


      <!-- 参数汇总表格 -->
      <div class="table-section">
        <div class="panel-header">
          <span class="panel-icon">📋</span>
          <h3>番茄酱参数汇总</h3>
        </div>
        <div class="table-wrapper">
          <el-table
            :data="parameterSummary"
            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="process" min-width="100">
              <template #default="{ row }">
                <span class="process-cell">{{ row.process }}</span>
              </template>
            </el-table-column>
            <el-table-column label="参数名称" prop="name" min-width="120">
              <template #default="{ row }">
                <span class="name-cell">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="当前值" prop="value" min-width="100" align="center">
              <template #default="{ row }">
                <span class="data-cell" :class="{ warning: !row.inRange }">{{ row.value }} {{ row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标准范围" prop="range" min-width="120" align="center">
              <template #default="{ row }">
                <span class="range-cell">{{ row.range }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" min-width="80" align="center">
              <template #default="{ row }">
                <span class="status-cell" :class="row.inRange ? 'normal' : 'abnormal'">
                  {{ row.inRange ? '正常' : '异常' }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import * as ProcessApi from '@/api/mes/process'

dayjs.locale('zh-cn')

defineOptions({ name: 'MesProcessIndex' })

// 时间显示
const currentDate = ref('')
const currentTime = ref('')
let clockTimer: ReturnType<typeof setInterval> | null = null
let dataTimer: 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 isInRange = (value: number, min: number, max: number): boolean => {
  return value >= min && value <= max
}

// 前处理设备数据
const pretreatment = ref({
  voltage: 0,
  current: 0,
  waterPressure: 0,
  airPressure: 0,
  temperature: 0,
  viscosity: 0,
  liquidLevel: 0,
  status: 'stopped'
})

// 蒸发设备数据
const evaporation = ref({
  voltage: 0,
  current: 0,
  waterPressure: 0,
  airPressure: 0,
  calibrationPressure: 0,
  temperature: 0,
  concentration: 0,
  status: 'stopped'
})

// 杀菌设备数据
const sterilization = ref({
  pressure: 0,
  speed: 0,
  sterilizationTemp: 0,
  coolingTemp: 0,
  tankLevel: 0,
  status: 'stopped'
})

// 灌装设备数据
const filling = ref({
  steamPressure: 0,
  airPressure: 0,
  fillingTemp: 0,
  fillingSpeed: 0,
  status: 'stopped'
})

// 重置所有数据为默认值
const resetData = () => {
  pretreatment.value = {
    voltage: 0,
    current: 0,
    waterPressure: 0,
    airPressure: 0,
    temperature: 0,
    viscosity: 0,
    liquidLevel: 0,
    status: 'stopped'
  }
  evaporation.value = {
    voltage: 0,
    current: 0,
    waterPressure: 0,
    airPressure: 0,
    calibrationPressure: 0,
    temperature: 0,
    concentration: 0,
    status: 'stopped'
  }
  sterilization.value = {
    pressure: 0,
    speed: 0,
    sterilizationTemp: 0,
    coolingTemp: 0,
    tankLevel: 0,
    status: 'stopped'
  }
  filling.value = {
    steamPressure: 0,
    airPressure: 0,
    fillingTemp: 0,
    fillingSpeed: 0,
    status: 'stopped'
  }
}

// 获取最新数据
const fetchLatestData = async () => {
  try {
    const data = await ProcessApi.getLatestProcessData()
    // 没有数据时重置为默认值0
    if (!data) {
      resetData()
      return
    }
    // 更新前处理设备数据
    pretreatment.value = {
      voltage: data.pretreatmentVoltage ?? 0,
      current: data.pretreatmentCurrent ?? 0,
      waterPressure: data.pretreatmentWaterPressure ?? 0,
      airPressure: data.pretreatmentAirPressure ?? 0,
      temperature: data.pretreatmentTemperature ?? 0,
      viscosity: data.pretreatmentViscosity ?? 0,
      liquidLevel: data.pretreatmentLiquidLevel ?? 0,
      status: data.pretreatmentStatus ?? 'stopped'
    }
    // 更新蒸发设备数据
    evaporation.value = {
      voltage: data.evaporationVoltage ?? 0,
      current: data.evaporationCurrent ?? 0,
      waterPressure: data.evaporationWaterPressure ?? 0,
      airPressure: data.evaporationAirPressure ?? 0,
      calibrationPressure: data.evaporationCalibrationPressure ?? 0,
      temperature: data.evaporationTemperature ?? 0,
      concentration: data.evaporationConcentration ?? 0,
      status: data.evaporationStatus ?? 'stopped'
    }
    // 更新杀菌设备数据
    sterilization.value = {
      pressure: data.sterilizationPressure ?? 0,
      speed: data.sterilizationSpeed ?? 0,
      sterilizationTemp: data.sterilizationTemp ?? 0,
      coolingTemp: data.sterilizationCoolingTemp ?? 0,
      tankLevel: data.sterilizationTankLevel ?? 0,
      status: data.sterilizationStatus ?? 'stopped'
    }
    // 更新灌装设备数据
    filling.value = {
      steamPressure: data.fillingSteamPressure ?? 0,
      airPressure: data.fillingAirPressure ?? 0,
      fillingTemp: data.fillingTemp ?? 0,
      fillingSpeed: data.fillingSpeed ?? 0,
      status: data.fillingStatus ?? 'stopped'
    }
  } catch (error) {
    console.error('获取番茄酱数据失败:', error)
    // 请求失败时也重置为默认值
    resetData()
  }
}

// 参数汇总表格数据
const parameterSummary = computed(() => [
  // 前处理设备
  { process: '前处理设备', name: '电压', value: pretreatment.value.voltage, unit: 'V', range: '380-390', inRange: isInRange(pretreatment.value.voltage, 380, 390) },
  { process: '前处理设备', name: '电流', value: pretreatment.value.current, unit: 'A', range: '128-135', inRange: isInRange(pretreatment.value.current, 128, 135) },
  { process: '前处理设备', name: '水压', value: pretreatment.value.waterPressure, unit: 'MPa', range: '1.8', inRange: pretreatment.value.waterPressure === 1.8 },
  { process: '前处理设备', name: '空压', value: pretreatment.value.airPressure, unit: 'MPa', range: '8.0', inRange: pretreatment.value.airPressure === 8.0 },
  { process: '前处理设备', name: '温度', value: pretreatment.value.temperature, unit: '°C', range: '42.8-43.2', inRange: isInRange(pretreatment.value.temperature, 42.8, 43.2) },
  { process: '前处理设备', name: '粘度', value: pretreatment.value.viscosity, unit: 'mPa·s', range: '8.1-9.5', inRange: isInRange(pretreatment.value.viscosity, 8.1, 9.5) },
  { process: '前处理设备', name: '液位', value: pretreatment.value.liquidLevel, unit: '%', range: '40.0-70.0', inRange: isInRange(pretreatment.value.liquidLevel, 40.0, 70.0) },
  // 蒸发设备
  { process: '蒸发设备', name: '电压', value: evaporation.value.voltage, unit: 'V', range: '380-390', inRange: isInRange(evaporation.value.voltage, 380, 390) },
  { process: '蒸发设备', name: '电流', value: evaporation.value.current, unit: 'A', range: '128-135', inRange: isInRange(evaporation.value.current, 128, 135) },
  { process: '蒸发设备', name: '水压', value: evaporation.value.waterPressure, unit: 'MPa', range: '1.8', inRange: evaporation.value.waterPressure === 1.8 },
  { process: '蒸发设备', name: '空压', value: evaporation.value.airPressure, unit: 'MPa', range: '7.0', inRange: evaporation.value.airPressure === 7.0 },
  { process: '蒸发设备', name: '一校气压', value: evaporation.value.calibrationPressure, unit: 'MPa', range: '0.55-0.99', inRange: isInRange(evaporation.value.calibrationPressure, 0.55, 0.99) },
  { process: '蒸发设备', name: '温度', value: evaporation.value.temperature, unit: '°C', range: '80.0-95.0', inRange: isInRange(evaporation.value.temperature, 80.0, 95.0) },
  { process: '蒸发设备', name: '浓度', value: evaporation.value.concentration, unit: '%', range: '36.0-39.0', inRange: isInRange(evaporation.value.concentration, 36.0, 39.0) },
  // 杀菌设备
  { process: '杀菌设备', name: '压力', value: sterilization.value.pressure, unit: 'kPa', range: '100', inRange: sterilization.value.pressure === 100 },
  { process: '杀菌设备', name: '转速', value: sterilization.value.speed, unit: 'rpm', range: '65-80', inRange: isInRange(sterilization.value.speed, 65, 80) },
  { process: '杀菌设备', name: '杀菌设备温度', value: sterilization.value.sterilizationTemp, unit: '°C', range: '109-110', inRange: isInRange(sterilization.value.sterilizationTemp, 109, 110) },
  { process: '杀菌设备', name: '杀菌设备冷却温度', value: sterilization.value.coolingTemp, unit: '°C', range: '35.0-38.0', inRange: isInRange(sterilization.value.coolingTemp, 35.0, 38.0) },
  { process: '杀菌设备', name: '储料罐液位', value: sterilization.value.tankLevel, unit: '%', range: '70.0-99.0', inRange: isInRange(sterilization.value.tankLevel, 70.0, 99.0) },
  // 灌装设备
  { process: '灌装设备', name: '蒸汽压力', value: filling.value.steamPressure, unit: 'MPa', range: '8.0', inRange: filling.value.steamPressure === 8.0 },
  { process: '灌装设备', name: '空气压力', value: filling.value.airPressure, unit: 'MPa', range: '7.0', inRange: filling.value.airPressure === 7.0 },
  { process: '灌装设备', name: '灌装设备温度', value: filling.value.fillingTemp, unit: '°C', range: '36', inRange: filling.value.fillingTemp === 36 },
  { process: '灌装设备', name: '灌装设备速度', value: filling.value.fillingSpeed, unit: '瓶/h', range: '8840-8860', inRange: isInRange(filling.value.fillingSpeed, 8840, 8860) }
])

// 生命周期
onMounted(() => {
  updateClock()
  clockTimer = setInterval(updateClock, 1000)
  // 获取数据
  fetchLatestData()
  // 每5分钟刷新一次数据
  dataTimer = setInterval(fetchLatestData, 300000)
})

onUnmounted(() => {
  if (clockTimer) {
    clearInterval(clockTimer)
    clockTimer = null
  }
  if (dataTimer) {
    clearInterval(dataTimer)
    dataTimer = 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);
}

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

/* ==================== 番茄酱卡片区 ==================== */
.process-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.process-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: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

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

.process-card.pretreatment::before {
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.process-card.evaporation::before {
  background: linear-gradient(90deg, transparent, #ff9f43, transparent);
}

.process-card.sterilization::before {
  background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
}

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

.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

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

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

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

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

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

.status-tag {
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

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

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

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

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

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

.data-item.warning {
  background: rgba(255, 107, 107, 0.1);
  margin: 0 -20px;
  padding: 10px 20px;
  border-left: 3px solid #ff6b6b;
}

.data-item.warning .number {
  color: #ff6b6b !important;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.8) !important;
}

.data-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 80px;
}

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

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

.data-value .unit {
  font-size: 12px;
  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;
}

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

.range-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 212, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 60px;
  text-align: center;
}

/* ==================== 番茄酱流程图区域 ==================== */
.flow-section {
  margin-bottom: 20px;
}

.flow-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: 12px;
  overflow: hidden;
}

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

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

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

.panel-body {
  padding: 30px;
}

.flow-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 30px;
  background: rgba(0, 40, 80, 0.6);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  transition: all 0.3s;
}

.flow-step.active {
  border-color: #00ff88;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.flow-step .step-icon {
  font-size: 36px;
}

.flow-step .step-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.flow-step .step-status {
  font-size: 12px;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  padding: 4px 12px;
  border-radius: 10px;
}

.flow-arrow {
  font-size: 30px;
  color: #00d4ff;
  animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(5px); }
}

/* ==================== 数据表格区域 ==================== */
.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: 12px;
  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;
}

.process-cell {
  color: #00d4ff;
  font-weight: 600;
}

.name-cell {
  color: rgba(255, 255, 255, 0.8);
}

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

.data-cell.warning {
  color: #ff6b6b;
}

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

.status-cell {
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.status-cell.normal {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.status-cell.abnormal {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1400px) {
  .process-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .process-section {
    grid-template-columns: 1fr;
  }

  .flow-diagram {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }
}

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

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

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

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