<template>
  <div class="alert-dashboard">
    <!-- 顶部统计面板 -->
    <div class="top-panels">
      <!-- 左上角统计 -->
      <div class="panel stats-panel">
        <div class="panel-header">
          <div class="diamond-icon"></div>
          <h3>设备统计</h3>
        </div>
        <!-- <div class="stats-row">
          <div class="stat-box">
            <div class="stat-icon cube-icon"></div>
            <div class="stat-info">
              <div class="stat-value">1236</div>
              <div class="stat-label">智能耳标</div>
            </div>
          </div>
          <div class="stat-box">
            <div class="stat-icon cube-icon green"></div>
            <div class="stat-info">
              <div class="stat-value">859</div>
              <div class="stat-label">智能项圈</div>
            </div>
          </div>
          <div class="stat-box">
            <div class="stat-icon cube-icon yellow"></div>
            <div class="stat-info">
              <div class="stat-value">434</div>
              <div class="stat-label">主机</div>
            </div>
          </div>
        </div> -->
        <div class="chart-container">
          <div ref="deviceChart" class="device-chart"></div>
        </div>
      </div>

      <!-- 右上角牛只体温预警 -->
      <div class="panel temperature-panel">
        <div class="panel-header">
          <h3>牛只体温预警</h3>
        </div>
        <div class="temperature-table" ref="temperatureTableRef">
          <div class="table-header">
            <span>时间</span>
            <span>设备编号</span>
            <span>温度</span>
            <span>异常状况</span>
            <span>养殖场</span>
          </div>
          <div class="table-content">
            <div class="table-row" v-for="alert in temperatureAlerts" :key="alert.id">
              <span>{{ alert.time }}</span>
              <span>{{ alert.deviceId }}</span>
              <span>{{ alert.temperature }}</span>
              <span class="temp-status" :class="alert.status.includes('高温') ? 'high-temp' : 'low-temp'">{{ alert.status }}</span>
              <span>{{ alert.farm }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中央区域 -->
    <div class="center-area">
      <!-- 左侧低电量设备统计 -->
      <div class="panel access-panel">
        <div class="panel-header">
          <h3>低电量设备统计</h3>
        </div>
        <div class="battery-stats">
          <div class="battery-item">
            <div class="battery-circle">
              <div class="circle-progress" :style="{background: `${batteryData.earTag > 50 ? '#FF8247' : 'rgba(255,255,255,0.1)'}`}">
                <div class="circle-inner">
                  <span class="circle-value">{{ batteryData.earTag }}</span>
                  <span class="circle-label">个</span>
                </div>
              </div>
              <div class="battery-label">低电量耳标</div>
            </div>
          </div>
          <div class="battery-item">
            <div class="battery-circle">
              <div class="circle-progress" :style="{background: `${batteryData.collar > 50 ? '#FF8247' : 'rgba(255,255,255,0.1)'}`}">
                <div class="circle-inner">
                  <span class="circle-value">{{ batteryData.collar }}</span>
                  <span class="circle-label">个</span>
                </div>
              </div>
              <div class="battery-label">低电量项圈</div>
            </div>
          </div>
          <!-- <div class="battery-item">
            <div class="battery-circle">
              <div class="circle-progress" :style="{background: `${batteryData.host > 50 ? '#00d4ff' : 'rgba(255,255,255,0.1)'}`}">
                <div class="circle-inner">
                  <span class="circle-value">{{ batteryData.host }}</span>
                  <span class="circle-label">个</span>
                </div>
              </div>
              <div class="battery-label">低电量主机</div>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 中央牛图模块 -->
      <div class="panel globe-panel">
        <div class="cow-container">
          <div class="cow-image"></div>
          <!-- 动态气泡 -->
          <div class="bubble bubble-1">
            <div class="bubble-content">
              <div class="bubble-title">数据更新频次</div>
              <div class="bubble-value">30分钟</div>
            </div>
          </div>
          <div class="bubble bubble-2">
            <div class="bubble-content">
              <div class="bubble-title">高温预警</div>
              <div class="bubble-value">39℃</div>
            </div>
          </div>
          <div class="bubble bubble-3">
            <div class="bubble-content">
              <div class="bubble-title">设备佩戴异常</div>
              <div class="bubble-value">脱环</div>
            </div>
          </div>
          <div class="bubble bubble-4">
            <div class="bubble-content">
              <div class="bubble-title">运动量偏高</div>
              <div class="bubble-value">10340步</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧密文查看统计 -->
      <div class="panel view-panel">
        <div class="panel-header">
          <div class="diamond-icon"></div>
          <h3>养殖场信息统计</h3>
        </div>
        <div class="view-stats" ref="viewStatsRef">
          <div class="stats-header">
            <span>排名</span>
            <span>养殖场名称</span>
            <span>牛只数量</span>
            <span>人员数量</span>
          </div>
          <div class="stats-content">
            <div class="view-item" v-for="item in viewStats" :key="item.rank">
              <div class="rank-badge" :class="`rank-${item.rank}`">{{ item.rank }}</div>
              <div class="view-info">
                <div class="view-name">{{ item.name }}</div>
                <div class="view-count">{{ item.count }}</div>
                <div class="view-users" >{{ item.users }}</div>
                <!-- <div class="view-percentage">{{ item.percentage }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部面板 -->
    <div class="bottom-panels">
      <!-- 运动异常警告 -->
      <div class="panel movement-panel">
        <div class="panel-header">
          <h3>运动异常统计</h3>
        </div>
        <div class="movement-chart-container">
          <div ref="movementChart" class="movement-chart"></div>
        </div>
      </div>

      <!-- 风险与违规告警 -->
      <div class="panel risk-panel">
        <div class="panel-header">
          <h3>设备预警</h3>
        </div>
        <div class="risk-table" ref="riskTableRef">
          <div class="table-header">
            <span>时间</span>
            <span>设备编号</span>
            <span>设备</span>
            <span>预警类型</span>
            <span>养殖场</span>
            <span>等级</span>
          </div>
          <div class="table-content">
            <div class="table-row" v-for="risk in riskData" :key="risk.id">
              <span>{{ risk.time }}</span>
              <span>{{ risk.user }}</span>
              <span>{{ risk.unit }}</span>
              <span>{{ risk.file }}</span>
              <span>{{ risk.doc }}</span>
              <span class="risk-level" :class="risk.level">{{ risk.levelText }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 终端实时应用情况 -->
      <!-- <div class="panel terminal-panel">
        <div class="panel-header">
          <h3>实时应用情况</h3>
        </div>
        <div class="terminal-chart">
          <div class="chart-area">
            <svg class="line-chart" viewBox="0 0 300 150">
              <path d="M 20 130 Q 50 100 80 110 T 140 90 T 200 70 T 260 50" 
                    stroke="#00d4ff" stroke-width="2" fill="none"/>
              <path d="M 20 120 Q 50 90 80 100 T 140 80 T 200 60 T 260 40" 
                    stroke="#ff6b35" stroke-width="2" fill="none"/>
            </svg>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-color blue"></span>
              <span>新增客户端</span>
            </div>
            <div class="legend-item">
              <span class="legend-color orange"></span>
              <span>累计客户端</span>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 出栏入栏警告 -->
      <div class="panel livestock-panel">
        <div class="panel-header">
          <h3>出栏入栏统计</h3>
        </div>
        <div class="livestock-chart-container">
          <div ref="livestockChart" class="livestock-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'Alert',
  props: {
    selectedProvince: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const deviceChart = ref(null)
    
    // 监听省份参数变化
    watch(() => props.selectedProvince, (newProvince) => {
      if (newProvince) {
        console.log(`预警监测页面接收到省份参数: ${newProvince}`)
        // 这里可以根据省份参数加载对应的数据
        loadProvinceData(newProvince)
      }
    }, { immediate: true })
    
    // 根据省份加载数据
    const loadProvinceData = (provinceCode) => {
      // 这里可以实现根据省份代码加载对应的预警数据
      console.log(`加载省份 ${provinceCode} 的预警数据`)
      // 可以调用API或更新本地数据
    }
    
    // 设备统计数据
    const deviceData = ref({
      farms: ['养殖场A', '养殖场B', '养殖场C', '养殖场D', '养殖场E', '养殖场F'],
      smartEarTags: [45, 38, 52, 41, 35, 48],
      smartCollars: [28, 32, 25, 30, 27, 33],
      hosts: [8, 6, 9, 7, 5, 8]
    })
    
    // 设备图表实例
    let deviceChartInstance = null
    let deviceScrollIndex = 0
    
    // 初始化设备统计图表
    const initDeviceChart = () => {
      if (!deviceChart.value) return
      
      deviceChartInstance = echarts.init(deviceChart.value)
      
      // 显示的数据条数
      const displayCount = 4
      
      const updateDeviceChart = () => {
        const totalCount = deviceData.value.farms.length
        const startIndex = deviceScrollIndex % totalCount
        
        // 获取当前显示的数据
        const getCurrentData = (dataArray) => {
          const result = []
          for (let i = 0; i < displayCount; i++) {
            const index = (startIndex + i) % totalCount
            result.push(dataArray[index])
          }
          return result
        }
        
        const currentFarms = getCurrentData(deviceData.value.farms)
        const currentEarTags = getCurrentData(deviceData.value.smartEarTags)
        const currentCollars = getCurrentData(deviceData.value.smartCollars)
        const currentHosts = getCurrentData(deviceData.value.hosts)
        
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: '#00d4ff',
            textStyle: {
              color: '#ffffff'
            }
          },
          legend: {
            data: ['智能耳标', '智能项圈', '主机'],
            textStyle: {
              color: '#ffffff'
            },
            top: 10
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#00d4ff'
              }
            },
            axisLabel: {
              color: '#ffffff'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 212, 255, 0.2)'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: currentFarms,
            axisLine: {
              lineStyle: {
                color: '#00d4ff'
              }
            },
            axisLabel: {
              color: '#ffffff'
            }
          },
          series: [
            {
              name: '智能耳标',
              type: 'bar',
              stack: 'total',
              barWidth: '40%',
              data: currentEarTags,
              itemStyle: {
                color: '#00d4ff'
              }
            },
            {
              name: '智能项圈',
              type: 'bar',
              stack: 'total',
              barWidth: '40%',
              data: currentCollars,
              itemStyle: {
                color: '#0099cc'
              }
            },
            {
              name: '主机',
              type: 'bar',
              stack: 'total',
              barWidth: '40%',
              data: currentHosts,
              itemStyle: {
                color: '#336699'
              }
            }
          ]
        }
        
        deviceChartInstance.setOption(option)
      }
      
      // 初始化显示
      updateDeviceChart()
      
      // 自动滚动
      setInterval(() => {
        deviceScrollIndex += 1
        updateDeviceChart()
      }, 3000) // 每3秒滚动一次
      
      // 响应式调整
      window.addEventListener('resize', () => {
        if (deviceChartInstance) {
          deviceChartInstance.resize()
        }
      })
    }

    // 体温预警数据
    const normalTempCount = ref(156)
    const abnormalTempCount = ref(12)
    
    // 体温预警列表数据
    const temperatureAlerts = ref([
      {
        id: 1,
        time: '2025.01.16 14:30:00',
        deviceId: 'ET001234',
        temperature: '39.5°C',
        status: '高温异常',
        farm: '祥和养殖场'
      },
      {
        id: 2,
        time: '2025.01.16 14:25:00',
        deviceId: 'ET001235',
        temperature: '35.2°C',
        status: '低温异常',
        farm: '绿野养殖场'
      },
      {
        id: 3,
        time: '2025.01.16 14:20:00',
        deviceId: 'ET001236',
        temperature: '40.1°C',
        status: '高温异常',
        farm: '祥和养殖场'
      },
      {
        id: 4,
        time: '2025.01.16 14:15:00',
        deviceId: 'ET001237',
        temperature: '34.8°C',
        status: '低温异常',
        farm: '阳光养殖场'
      },
      {
        id: 5,
        time: '2025.01.16 14:10:00',
        deviceId: 'ET001238',
        temperature: '39.8°C',
        status: '高温异常',
        farm: '绿野养殖场'
      },
      {
        id: 6,
        time: '2025.01.16 14:05:00',
        deviceId: 'ET001239',
        temperature: '35.0°C',
        status: '低温异常',
        farm: '祥和养殖场'
      },
      {
        id: 7,
        time: '2025.01.16 14:00:00',
        deviceId: 'ET001240',
        temperature: '40.3°C',
        status: '高温异常',
        farm: '阳光养殖场'
      }
    ])

    // 低电量设备统计数据
    const batteryData = ref({
      earTag: 15,    // 低电量耳标数量
      collar: 8,     // 低电量项圈数量
      host: 3        // 低电量主机数量
    })

    // 密文查看统计
    const viewStats = ref([
      { rank: 1, name: '东方养殖场', count:"李先生", users: 19800077788, percentage: '90%' },
      { rank: 2, name: '瑞丰养殖场', count: "王先生", users: 19800077788, percentage: '90%' },
      { rank: 3, name: '晟世鸿鑫养殖场', count: "王女士", users: 19800077788, percentage: '90%' },
      { rank: 4, name: '和谐养殖场', count: "杨先生", users: 10000000045, percentage: '90%' },
      { rank: 5, name: '生态养殖场', count: "邓先生", users: 10000040034,rcentage: '90%' },
      { rank: 6, name: '祥和养殖场', count: "许先生", users: 10000004500, percentage: '90%' },
      { rank: 7, name: '福源养殖场', count: "明先生", users: 10000005030, percentage: '90%' },
      { rank: 8, name: '繁荣养殖场', count: "王女士", users: 10011111444, percentage: '90%' },
      { rank: 9, name: '明之润养殖场', count: "王女士", users: 10000000450, percentage: '90%' },
      { rank: 10, name: '钢万联养殖场', count: "李先生", users: 10000007850, percentage: '90%' }
    ])

    // 运动数据 - 24小时内每3小时的步数统计
    const movementData = ref({
      timeLabels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
      stepCounts: [1200, 800, 2500, 4200, 3800, 5600, 4100, 2300]
    })
    
    // 运动图表引用
    const movementChart = ref(null)
    let movementChartInstance = null

    // 风险数据
    const riskData = ref([
      {
        id: 1,
        time: '2025.05.11 12:00:00',
        user: '20655554',
        unit: '智能耳标',
        file: '佩戴异常',
        doc: '东方养殖场',
        level: 'medium',
        levelText: '低级'
      },
      {
        id: 2,
        time: '2025.04.11 16:00:00',
        user: '20655556',
        unit: '智能耳标',
        file: '佩戴异常',
        doc: '祥和养殖场',
        level: 'medium',
        levelText: '中级'
      },
      {
        id: 3,
        time: '2025.05.16 12:00:00',
        user: '20655557',
        unit: '智能项圈',
        file: '低电量',
        doc: '生态养殖场',
        level: 'high',
        levelText: '高级'
      },
      {
        id: 4,
        time: '2025.05.16 12:00:00',
        user: '20655558',
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',
        level: 'low',
        levelText: '低级'
      },
      {
        id: 5,
        time: '2025.05.16 12:00:00',
        user: '20655559',    
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',  
        level: 'low',
        levelText: '低级'
      },
      {
        id: 6,
        time: '2025.05.16 12:00:00',
        user: '20655559',    
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',  
        level: 'low',
        levelText: '低级'
      },
      {
        id: 7,
        time: '2025.05.16 12:00:00',
        user: '20655559',    
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',  
        level: 'low',
        levelText: '低级'
      },
       {
        id: 8,
        time: '2025.05.16 12:00:00',
        user: '20655559',    
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',  
        level: 'low',
        levelText: '低级'
      },
         {
        id: 9,
        time: '2025.05.16 12:00:00',
        user: '20655559',    
        unit: '智能项圈',
        file: '设备离线',
        doc: '祥和养殖场',  
        level: 'low',
        levelText: '低级'
      },
{
        id: 10,
        time: '2025.05.11 12:00:00',
        user: '20655554',
        unit: '智能耳标',
        file: '佩戴异常',
        doc: '东方养殖场',
        level: 'medium',
        levelText: '低级'
      },
      {
        id: 11,
        time: '2025.05.11 12:00:00',
        user: '20655554',
        unit: '智能耳标',
        file: '佩戴异常',
        doc: '东方养殖场',
        level: 'medium',
        levelText: '低级'
      },
    ])

    // 出栏入栏数据
    const livestockData = ref({
      quantities: [50, 80, 120, 95, 110, 75, 140],
      outbound: [45, 72, 72, 72, 72, 80, 80],
      inbound: [45, 71, 72, 70, 72, 80, 80],
      missing: [0, 1, 0, 2, 0, 0, 0]
    })
    
    // 出栏入栏图表引用
    const livestockChart = ref(null)
    let livestockChartInstance = null



    // 初始化运动图表
    const initMovementChart = () => {
      if (!movementChart.value) return
      
      movementChartInstance = echarts.init(movementChart.value)
      
      const option = {
        grid: {
          top: '15%',
          left: '8%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: movementData.value.timeLabels,
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#00d4ff',
            fontSize: 12
          },
          name: '时间',
          nameTextStyle: {
            color: '#00d4ff',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#00d4ff',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          },
          name: '步数',
          nameTextStyle: {
            color: '#00d4ff',
            fontSize: 12
          }
        },
        series: [{
          name: '步数统计',
          data: movementData.value.stepCounts,
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#ffffff',
            width: 3
          },
          itemStyle: {
            color: '#ffffff',
            borderWidth: 2,
            borderColor: '#ffffff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 255, 255, 0.4)'
              }, {
                offset: 1, color: 'rgba(255, 255, 255, 0.05)'
              }]
            }
          },
          emphasis: {
            focus: 'series'
          }
        }],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 20, 40, 0.9)',
          borderColor: '#00ffff',
          textStyle: {
            color: '#ffffff'
          },
          formatter: function(params) {
            const data = params[0]
            return `时间: ${data.name}<br/>步数: ${data.value} 步`
          }
        }
      }
      
      movementChartInstance.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', () => {
        movementChartInstance.resize()
      })
    }

    // 初始化出栏入栏图表
    const initLivestockChart = () => {
      if (!livestockChart.value) return
      
      livestockChartInstance = echarts.init(livestockChart.value)
      
      const option = {
        grid: {
          top: '15%',
          left: '8%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#00d4ff',
            fontSize: 14
          },
          name: '序号',
          nameTextStyle: {
            color: '#00d4ff',
            fontSize: 14
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#00d4ff',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          },
          name: '数量',
          nameTextStyle: {
            color: '#00d4ff',
            fontSize: 12
          }
        },
        legend: {
          data: ['出栏数', '入栏数', '缺失数'],
          textStyle: {
            color: '#ffffff'
          },
          top: '5%'
        },
        series: [
          {
            name: '出栏数',
            data: livestockData.value.outbound,
            type: 'bar',
            itemStyle: {
              color: '#00d4ff'
            }
          },
          {
            name: '入栏数',
            data: livestockData.value.inbound,
            type: 'bar',
            itemStyle: {
              color: '#0099cc'
            }
          },
          {
            name: '缺失数',
            data: livestockData.value.missing,
            type: 'bar',
            itemStyle: {
              color: '#336699'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 20, 40, 0.9)',
          borderColor: '#00ffff',
          textStyle: {
            color: '#ffffff'
          }
        }
      }
      
      livestockChartInstance.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', () => {
        if (livestockChartInstance) {
          livestockChartInstance.resize()
        }
      })
    }

    // 创建ref引用
    const viewStatsRef = ref(null)
    const riskTableRef = ref(null)
    const temperatureTableRef = ref(null)

    // 自动滚动功能
    const startAutoScroll = () => {
      // 养殖场信息统计自动滚动
      const viewStats = viewStatsRef.value?.querySelector('.stats-content') || document.querySelector('.stats-content')
      if (viewStats) {
        let scrollTop = 0
        const viewStatsInterval = setInterval(() => {
          if (viewStats.scrollHeight <= viewStats.clientHeight) {
            return // 如果内容不需要滚动，跳过
          }
          scrollTop += 1
          if (scrollTop >= viewStats.scrollHeight - viewStats.clientHeight) {
            scrollTop = 0
          }
          viewStats.scrollTop = scrollTop
        }, 50)
      }

      // 设备预警表格自动滚动
      const riskTable = riskTableRef.value?.querySelector('.table-content') || document.querySelector('.risk-table .table-content')
      if (riskTable) {
        let scrollTop = 0
        const riskTableInterval = setInterval(() => {
          if (riskTable.scrollHeight <= riskTable.clientHeight) {
            return // 如果内容不需要滚动，跳过
          }
          scrollTop += 1
          if (scrollTop >= riskTable.scrollHeight - riskTable.clientHeight) {
            scrollTop = 0
          }
          riskTable.scrollTop = scrollTop
        }, 60)
      }

      // 体温预警表格自动滚动
      const temperatureTable = temperatureTableRef.value?.querySelector('.table-content') || document.querySelector('.temperature-table .table-content')
      if (temperatureTable) {
        let scrollTop = 0
        const temperatureTableInterval = setInterval(() => {
          if (temperatureTable.scrollHeight <= temperatureTable.clientHeight) {
            return // 如果内容不需要滚动，跳过
          }
          scrollTop += 1
          if (scrollTop >= temperatureTable.scrollHeight - temperatureTable.clientHeight) {
            scrollTop = 0
          }
          temperatureTable.scrollTop = scrollTop
        }, 60)
      }
    }

    // 组件挂载后初始化图表
    onMounted(async () => {
      await nextTick()
      initDeviceChart()
      initMovementChart()
      initLivestockChart()
      // 启动自动滚动
      setTimeout(() => {
        startAutoScroll()
      }, 1000)
    })

    return {
      deviceChart,
      deviceData,
      normalTempCount,
      abnormalTempCount,
      temperatureAlerts,
      batteryData,
      viewStats,
      movementData,
      movementChart,
      riskData,
      livestockData,
      livestockChart,
      viewStatsRef,
      riskTableRef,
      temperatureTableRef
    }
  }
}
</script>

<style scoped>
/* 全局强制隐藏所有滚动条 */
:global(*) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

:global(*::-webkit-scrollbar) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.alert-dashboard {
  width: 100%;
  height: 100vh;
  background: #011819;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  position: relative;
}

/* 隐藏滚动条 */
.alert-dashboard::-webkit-scrollbar {
  display: none;
}

.alert-dashboard {
  -ms-overflow-style: none; /* IE和Edge */
  scrollbar-width: none; /* Firefox */
}

.alert-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    rgba(0, 212, 255, 0.05),
    rgba(0, 212, 255, 0.03),
    rgba(0, 212, 255, 0.02);
  pointer-events: none;
}

/* 顶部面板 */
.top-panels {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  height: 27%;
}

/* 中央区域 */
.center-area {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  height:34%;
} 

/* 底部面板 */
.bottom-panels {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  height: 32%;
}

/* 通用面板样式 */
.panel {
  background: rgba(7, 59, 68, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #00d4ff;
  opacity: 0.6;
}

.panel-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.panel-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.diamond-icon {
  width: 12px;
  height: 12px;
  background: #00d4ff;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 统计面板 */
.stats-panel {
  flex: 1;
}

.stats-row {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
}

.stat-box {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: #00d4ff;
  border-radius: 8px;
  position: relative;
}

.stat-icon.green {
  background: #00d4ff;
}

.stat-icon.yellow {
  background: #00d4ff;
}

.stat-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.stat-label {
  font-size: 14px;
  color: #00d4ff;
}

.chart-container {
  margin-top: 5px;
  height: 200px;
  width: 100%;
  overflow-y: auto;
}

.device-chart {
  width: 100%;
  height: 200px;
  min-height: 250px;
}

/* 体温预警面板 */
.temperature-panel {
  flex: 1;
}

.temperature-table {
  font-size: 14px;
  max-height: 200px;
  overflow: hidden;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
}

.temperature-table .table-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  color: #ffffff;
  font-weight: bold;
  position: sticky;
  top: 0;
  background: rgba(12, 20, 38, 0.9);
  z-index: 10;
  flex-shrink: 0;
}

.temperature-table .table-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.temperature-table .table-content::-webkit-scrollbar {
  display: none;
}

.temperature-table .table-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 1fr 1fr;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #00d4ff;
}

/* 体温预警表格间隔色样式 */
.temperature-table .table-row:nth-child(even) {
  background: rgba(0, 212, 255, 0.05);
}

.temperature-table .table-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.temp-status {
  padding: 2px 6px;
  border-radius: 10px;
  text-align: center;
  font-size: 10px;
}

.temp-status.high-temp {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.temp-status.low-temp {
  background: rgba(0, 255, 255, 0.2);
  color: #00ffff;
}

/* 低电量设备统计面板 */
.access-panel {
  flex: 1;
}

.battery-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  height: 100%;
}

.battery-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.battery-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.circle-progress {
  width: 100px;
  height: 100px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circle-inner {
  width: 60px;
  height: 60px;
  background: #FF8247;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.circle-value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.circle-label {
  font-size: 12px;
  color: #00d4ff;
}

.battery-label {
  font-size: 20px;
  font-weight: bold;
  color: #00d4ff;
  text-align: center;
  margin-top: 5px;
}

/* 地球面板 */
.globe-panel {
  padding: 0px;
  width: 100%;
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cow-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cow-image {
  width: 100%;
  height: 100%;
  background: url('/data/map/牛.png') center/contain no-repeat;
  border-radius: 10px;
  box-shadow: 
    0 0 20px rgba(0, 212, 255, 0.3),
    inset 0 0 20px rgba(0, 100, 200, 0.1);
}

/* 动态气泡样式 */
.bubble {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: float 3s ease-in-out infinite;
}

.bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.bubble-content {
  text-align: center;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
}

.bubble-title {
  font-weight: bold;
  margin-bottom: 2px;
  opacity: 0.9;
}

.bubble-value {
  font-size: 20px;
  font-weight: bold;
  color: #00d4ff;
}

/* 气泡1 - 数据更新频次 (左上) */
.bubble-1 {
  width: 100px;
  height: 100px;
  top: 10%;
  left: 10%;
  background: rgba(0, 212, 255, 0.6);
  animation-delay: 0s;
}

/* 气泡2 - 高温预警 (右上) */
.bubble-2 {
  width: 90px;
  height: 90px;
  top: 15%;
  right: 10%;
  background: rgba(0, 212, 255, 0.5);
  animation-delay: 1s;
}

/* 气泡3 - 设备佩戴异常 (左下) */
.bubble-3 {
  width: 85px;
  height: 85px;
  bottom: 20%;
  left: 15%;
  background: rgba(0, 212, 255, 0.4);
  animation-delay: 2s;
}

/* 气泡4 - 运动量偏高 (右下) */
.bubble-4 {
  width: 85px;
  height: 85px;
  bottom: 15%;
  right: 15%;
  background: rgba(0, 212, 255, 0.3);
  animation-delay: 0.5s;
}

/* 浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(1deg);
  }
  50% {
    transform: translateY(-5px) rotate(-1deg);
  }
  75% {
    transform: translateY(-10px) rotate(0.5deg);
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .bubble {
    font-size: 9px;
  }
  
  .bubble-1, .bubble-2, .bubble-3, .bubble-4 {
    width: 70px;
    height: 70px;
  }
  
  .bubble-value {
    font-size: 10px;
  }
}

/* 查看统计面板 */
.view-panel {
  flex: 1;
}

.view-stats {
  max-height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view-stats::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

.view-stats {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.stats-header {
  display: grid;
  grid-template-columns: 50px 1fr 80px 80px;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  position: sticky;
  top: 0;
  background: rgba(12, 20, 38, 0.9);
  z-index: 10;
  flex-shrink: 0;
  text-align: center;
}

.stats-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.stats-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

.view-item {
  display: grid;
  grid-template-columns: 50px 1fr 80px 80px;
  gap: 15px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
}

/* 养殖场信息统计间隔色样式 */
.view-item:nth-child(even) {
  background: rgba(0, 212, 255, 0.05);
}

.view-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.rank-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.rank-1, .rank-2, .rank-3 {
  background: #00d4ff;
  color: #ffffff;
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
  background: rgba(255, 255, 255, 0.1);
  color: #00d4ff;
}

.view-info {
  display: contents;
}

.view-name {
  color: #00d4ff;
  text-align: left;
}

.view-count, .view-users {
  color: #ffffff;
  text-align: center;
}

.view-percentage {
  color: #00d4ff;
  font-weight: bold;
}

/* 运动异常警告面板 */
.movement-panel {
  flex: 1;
}

.movement-chart-container {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.movement-chart {
  flex: 1;
  min-height: 200px;
  width: 100%;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

/* 风险面板 */
.risk-panel {
  flex: 2;
}

.risk-table {
  font-size: 14px;
  max-height: 300px;
  overflow: hidden;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
}

.risk-table .table-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.risk-table .table-content::-webkit-scrollbar {
  display: none;
}

.table-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr 1.2fr 0.8fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  color: #ffffff;
  font-weight: bold;
  position: sticky;
  top: 0;
  background: rgba(12, 20, 38, 0.9);
  z-index: 10;
  flex-shrink: 0;
}

.table-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr 1.2fr 0.8fr;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #00d4ff;
}

/* 间隔色样式 - 奇偶行背景色 */
.table-row:nth-child(even) {
  background: rgba(0, 212, 255, 0.05);
}

.table-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.risk-level {
  padding: 2px 6px;
  border-radius: 10px;
  text-align: center;
  font-size: 10px;
}

.risk-level.high {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.risk-level.medium {
  background: rgba(0, 255, 255, 0.2);
  color: #00ffff;
}

.risk-level.low {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

/* 终端面板 */
.terminal-panel {
  flex: 1;
}

.terminal-chart {
  height: 120px;
}

.chart-area {
  height: 150px;
  margin-bottom: 10px;
}

.line-chart {
  width: 100%;
  height: 100%;
}

.chart-legend {
  display: flex;
  gap: 20px;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-color {
  width: 12px;
  height: 2px;
  border-radius: 1px;
}

.legend-color.blue {
  background: #00d4ff;
}

.legend-color.orange {
  background: #00ffff;
}

/* 出栏入栏面板 */
.livestock-panel {
  flex: 1;
}

.livestock-chart-container {
  margin-top: 10px;
  height: 250px;
  width: 100%;
}

.livestock-chart {
  width: 100%;
  height: 100%;
}

.bar-fill {
  height: 100%;
  background: #00d4ff;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 滚动条样式 - 全局隐藏所有滚动条 */
* {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE和Edge */
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 确保所有可能的滚动容器都隐藏滚动条 */
.temperature-table .table-content::-webkit-scrollbar,
.stats-content::-webkit-scrollbar,
.risk-table .table-content::-webkit-scrollbar,
.view-stats::-webkit-scrollbar,
.chart-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}
</style>