nongxiaoyu/pages/device-list/detail-collector.vue

<template>
  <view class="container">
    <!-- 设备头部信息区域 -->
    <view class="device-header">
      <view class="device-info-row">
        <view class="device-name-container">
          <text class="device-name">{{ deviceInfo.name }}</text>
          <view 
            class="status-tag" 
            :class="deviceInfo.status === 'online' ? 'status-online' : 'status-offline'"
          >
            <view class="status-dot" :class="{'offline-dot': deviceInfo.status === 'offline'}"></view>
            {{ deviceInfo.status === 'online' ? '在线' : '离线' }}
          </view>
        </view>
        
        <view class="refresh-btn" :class="{'refreshing': isRefreshing}" @tap="refreshData">
          <svg width="22" height="22" viewBox="0 0 24 24">
            <path fill="#3BB44A" d="M17.65,6.35C16.2,4.9,14.21,4,12,4c-4.42,0-7.99,3.58-7.99,8s3.57,8,7.99,8c3.73,0,6.84-2.55,7.73-6h-2.08c-0.82,2.33-3.04,4-5.65,4c-3.31,0-6-2.69-6-6s2.69-6,6-6c1.66,0,3.14,0.69,4.22,1.78L13,11h7V4L17.65,6.35z"/>
          </svg>
        </view>
      </view>
      
      <view class="device-meta-row">
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M22,3H2C0.9,3,0,3.9,0,5v14c0,1.1,0.9,2,2,2h20c1.1,0,1.99-0.9,1.99-2L24,5C24,3.9,23.1,3,22,3z M9,17H6.5v-2.5h2.5V17z M9,13H6.5v-2.5h2.5V13z M9,9H6.5V6.5h2.5V9z M13.5,17H11v-2.5h2.5V17z M13.5,13H11v-2.5h2.5V13z M13.5,9H11V6.5h2.5V9z M18,17h-2.5v-2.5H18V17z M18,13h-2.5v-2.5H18V13z M18,9h-2.5V6.5H18V9z"/>
            </svg>
          </view>
          <text class="meta-label">设备编号：</text>
          <text class="meta-value">{{ deviceInfo.deviceId }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2C8.13,2,5,5.13,5,9c0,5.25,7,13,7,13s7-7.75,7-13C19,5.13,15.87,2,12,2z M12,11.5c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5S13.38,11.5,12,11.5z"/>
            </svg>
          </view>
          <text class="meta-label">安装位置：</text>
          <text class="meta-value">{{ deviceInfo.location }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M12,20c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8S16.42,20,12,20z M12.5,7H11v6l5.25,3.15l0.75-1.23l-4.5-2.67V7z"/>
            </svg>
          </view>
          <text class="meta-label">最近更新：</text>
          <text class="meta-value">{{ deviceInfo.lastUpdate }}</text>
        </view>
      </view>
    </view>
    
    <!-- 采集数据展示区域 - 气象站 -->
    <view class="data-section" v-if="deviceInfo.deviceType === 'weather'">
      <view class="section-title">
        <text>气象数据</text>
      </view>
      
      <view class="data-grid">
        <!-- 气温 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.temperature}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M15,13V5c0-1.66-1.34-3-3-3S9,3.34,9,5v8c-1.21,0.91-2,2.37-2,4c0,2.76,2.24,5,5,5s5-2.24,5-5C17,15.37,16.21,13.91,15,13z M11,5c0-0.55,0.45-1,1-1s1,0.45,1,1v3h-2V5z M12,19.5c-1.38,0-2.5-1.12-2.5-2.5c0-0.94,0.53-1.76,1.31-2.17L11.5,14.5v-4h1v4l0.69,0.33c0.78,0.41,1.31,1.23,1.31,2.17C14.5,18.38,13.38,19.5,12,19.5z"/>
            </svg>
          </view>
          <text class="data-label">气温</text>
          <view class="data-value-container">
            <template v-if="weatherData.temperature">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.temperature}">{{ weatherData.temperature }}</text>
              <text class="data-unit">℃</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.temperature">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 湿度 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.humidity}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2c-5.33,4.55-8,8.48-8,11.8c0,4.98,3.8,8.2,8,8.2s8-3.22,8-8.2C20,10.48,17.33,6.55,12,2z M12,20c-3.35,0-6-2.57-6-6.2c0-2.34,1.95-5.44,6-9.14c4.05,3.7,6,6.79,6,9.14C18,17.43,15.35,20,12,20z M7.83,14c0.37,0,0.67,0.26,0.74,0.62c0.41,2.22,2.28,2.98,3.64,2.87c0.43-0.02,0.79,0.32,0.79,0.75c0,0.4-0.32,0.73-0.72,0.75c-2.13,0.13-4.62-1.09-5.19-4.12C7.01,14.42,7.37,14,7.83,14z"/>
            </svg>
          </view>
          <text class="data-label">湿度</text>
          <view class="data-value-container">
            <template v-if="weatherData.humidity">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.humidity}">{{ weatherData.humidity }}</text>
              <text class="data-unit">%</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.humidity">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 降雨量 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.rainfall}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12.01,6c2.61,0,4.89,1.86,5.4,4.43l0.3,1.5l1.52,0.11c1.56,0.11,2.78,1.41,2.78,2.96c0,1.65-1.35,3-3,3h-13c-2.21,0-4-1.79-4-4c0-2.05,1.53-3.76,3.56-3.97l1.07-0.11l0.5-0.95C8.08,7.14,9.95,6,12.01,6 M12,4C9.2,4,6.78,5.64,5.67,8.04C2.68,8.16,0.24,10.7,0.24,13.76c0,3.08,2.49,5.58,5.56,5.58h13.19c2.49,0,4.51-2.03,4.51-4.53c0-2.34-1.77-4.25-4.05-4.5C18.4,6.75,15.49,4,12,4L12,4z M14,11l-2-2l-2,2H8.5l3.5,3.5l3.5-3.5H14z"/>
            </svg>
          </view>
          <text class="data-label">降雨量</text>
          <view class="data-value-container">
            <template v-if="weatherData.rainfall">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.rainfall}">{{ weatherData.rainfall }}</text>
              <text class="data-unit">mm</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.rainfall">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 风向 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.windDirection}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M4,10H3L4,6L5,10H4z M22,10v2h-8v9l-2-1.6V19H9v1.4L7,22v-2.5c0-5.2,0-9.5,0-9.5H6v-2h16z M17,12v-1.5C17,9.7,16.3,9,15.5,9S14,9.7,14,10.5V12H17z M9,7.5C9,9.43,7.43,11,5.5,11S2,9.43,2,7.5S3.57,4,5.5,4S9,5.57,9,7.5z M6.5,7.5C6.5,8.33,6.02,9,5.5,9S4.5,8.33,4.5,7.5S4.98,6,5.5,6S6.5,6.67,6.5,7.5z"/>
            </svg>
          </view>
          <text class="data-label">风向</text>
          <view class="data-value-container">
            <template v-if="weatherData.windDirection">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.windDirection}">{{ weatherData.windDirection }}</text>
              <text class="data-unit"></text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.windDirection">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 风速 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.windSpeed}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M17.66,4.53L18.11,4.5c2.05,0.14,3.74,1.86,3.74,3.93c0,1.66-1.04,3.12-2.6,3.7H14v-2h5.56c0.47,0,0.87-0.39,0.87-0.89c0-0.5-0.4-0.89-0.87-0.89H8.5c-0.64,0-1.22,0.18-1.72,0.49c-0.53-0.34-1.14-0.5-1.66-0.51c-0.35,0-0.69,0.04-1.02,0.13c-0.97,0.37-1.69,1.33-1.69,2.38c0,1.44,1.22,2.61,2.72,2.61H9v2H5.14c-2.36,0-4.26-1.88-4.26-4.24c0-1.75,0.91-3.17,2.62-3.88C3.99,5.01,4.81,4.5,5.78,4.5c1.17,0,2.29,0.58,2.96,1.59c0.51-0.25,1.11-0.41,1.76-0.41h5.77L17.66,4.53z M21.11,14.5H17v-2h4.11c2.01,0,3.89,1.63,3.89,3.83c0,1.56-0.88,2.87-2.27,3.44c-0.38,0.14-0.77,0.23-1.21,0.23c-0.84,0-1.75-0.35-2.43-1.14l1.58-1.23c0.27,0.37,0.66,0.57,1.08,0.57c0.76,0,1.38-0.64,1.38-1.43C23.11,15.33,22.2,14.5,21.11,14.5z M13,18H4.69c-2.06,0-3.69-1.69-3.69-3.72c0-1.17,0.58-2.27,1.5-2.97C3.14,11.37,4,12.23,5,12.72V14h7v2H8v2h5V18z"/>
            </svg>
          </view>
          <text class="data-label">风速</text>
          <view class="data-value-container">
            <template v-if="weatherData.windSpeed">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.windSpeed}">{{ weatherData.windSpeed }}</text>
              <text class="data-unit">m/s</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.windSpeed">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 气压 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.pressure}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z M13,8h-2v2h-2v2h2v2h2v-2h2v-2h-2V8z M14.5,14.5v-1h-1v1H14.5z M9.5,14.5v-1h-1v1H9.5z M14.5,10.5V10h-1v0.5H14.5z M9.5,10.5V10h-1v0.5H9.5z"/>
            </svg>
          </view>
          <text class="data-label">气压</text>
          <view class="data-value-container">
            <template v-if="weatherData.pressure">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.pressure}">{{ weatherData.pressure }}</text>
              <text class="data-unit">hPa</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.pressure">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
        
        <!-- 光照 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !weatherData.illumination}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M6.76,4.84l-1.8-1.79-1.41,1.41l1.79,1.79L6.76,4.84z M4,10.5h-2v2h2V10.5z M13,0.55h-2V3.5h2V0.55z M20.45,4.46l-1.41-1.41-1.79,1.79l1.41,1.41L20.45,4.46z M17.24,18.16l1.79,1.8l1.41-1.41l-1.8-1.79L17.24,18.16z M20,10.5v2h2v-2H20z M12,5.5c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6S15.31,5.5,12,5.5z M11,22.45h2v-2.95h-2V22.45z M3.55,18.54l1.41,1.41l1.79-1.8l-1.41-1.41L3.55,18.54z"/>
            </svg>
          </view>
          <text class="data-label">光照</text>
          <view class="data-value-container">
            <template v-if="weatherData.illumination">
              <text class="data-value" :class="{'updated': updatedFields.weather && updatedFields.weather.illumination}">{{ weatherData.illumination }}</text>
              <text class="data-unit">lux</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="weatherData.illumination">{{ weatherData.updateTime || '2分钟前更新' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 采集数据展示区域 - 土壤墒情 -->
    <view class="data-section" v-if="deviceInfo.deviceType === 'soil'">
      <view class="section-title">
        <text>土壤数据</text>
      </view>
      
      <view class="data-grid">
        <!-- 土壤温度 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.temperature}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M15,13V5c0-1.66-1.34-3-3-3S9,3.34,9,5v8c-1.21,0.91-2,2.37-2,4c0,2.76,2.24,5,5,5s5-2.24,5-5C17,15.37,16.21,13.91,15,13z M12,20c-1.65,0-3-1.35-3-3c0-1.12,0.61-2.1,1.5-2.61V5c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5v9.38c0.9,0.52,1.5,1.49,1.5,2.62C15,18.65,13.65,20,12,20z"/>
            </svg>
          </view>
          <text class="data-label">土壤温度</text>
          <view class="data-value-container">
            <template v-if="soilData.temperature">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.temperature}">{{ soilData.temperature }}</text>
              <text class="data-unit">℃</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.temperature">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- 土壤湿度 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.moisture}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2c-5.33,4.55-8,8.48-8,11.8c0,4.98,3.8,8.2,8,8.2s8-3.22,8-8.2C20,10.48,17.33,6.55,12,2z M12,20c-3.35,0-6-2.57-6-6.2c0-2.34,1.95-5.44,6-9.14c4.05,3.7,6,6.79,6,9.14C18,17.43,15.35,20,12,20z"/>
            </svg>
          </view>
          <text class="data-label">土壤湿度</text>
          <view class="data-value-container">
            <template v-if="soilData.moisture">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.moisture}">{{ soilData.moisture }}</text>
              <text class="data-unit">%</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.moisture">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- 氮含量 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.nitrogen}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2L4.5,20.29l0.71,0.71L12,18l6.79,3l0.71-0.71L12,2z M12,15.3L7.46,16.97L12,6.69l4.54,10.28L12,15.3z"/>
            </svg>
          </view>
          <text class="data-label">氮含量</text>
          <view class="data-value-container">
            <template v-if="soilData.nitrogen">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.nitrogen}">{{ soilData.nitrogen }}</text>
              <text class="data-unit">mg/kg</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.nitrogen">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- 磷含量 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.phosphorus}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M11,15H6.83l3.59-3.59L9,10l-6,6l6,6l1.41-1.41L6.83,17H11c4.42,0,8-3.58,8-8V3h-2v6C17,12.42,14.42,15,11,15z"/>
            </svg>
          </view>
          <text class="data-label">磷含量</text>
          <view class="data-value-container">
            <template v-if="soilData.phosphorus">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.phosphorus}">{{ soilData.phosphorus }}</text>
              <text class="data-unit">mg/kg</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.phosphorus">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- 钾含量 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.potassium}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M13.97,7.17l3.92,7.85C17.96,15.31,18.18,16,18.5,16c0.44,0,0.75-0.53,0.5-1l-4-8h-2l-2,4h-1.5L11,7H8.5L7,11H5.5l1-2l-2-4h10.72C16.42,5,16.97,6.17,13.97,7.17z"/>
            </svg>
          </view>
          <text class="data-label">钾含量</text>
          <view class="data-value-container">
            <template v-if="soilData.potassium">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.potassium}">{{ soilData.potassium }}</text>
              <text class="data-unit">mg/kg</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.potassium">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- 土壤电导率 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.conductivity}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M14.69,6.63L14.69,6.63c-0.35-0.35-0.92-0.35-1.27,0l-6.75,6.73c-0.35,0.35-0.35,0.92,0,1.27l0,0c0.35,0.35,0.92,0.35,1.27,0l6.75-6.73C15.04,7.55,15.04,6.98,14.69,6.63z M16.21,15.83l1.56-1.56c0.2-0.2,0.2-0.51,0-0.71c-0.2-0.2-0.51-0.2-0.71,0l-1.56,1.56c-0.2,0.2-0.2,0.51,0,0.71C15.7,16.02,16.02,16.02,16.21,15.83z M12.41,14.27c-0.2-0.2-0.51-0.2-0.71,0l-1.56,1.56c-0.2,0.2-0.2,0.51,0,0.71c0.2,0.2,0.51,0.2,0.71,0l1.56-1.56C12.61,14.78,12.61,14.47,12.41,14.27z M19,6.5C19,4.01,16.99,2,14.5,2c-1.82,0-3.53,1.15-4.27,2.64c-0.4-0.19-0.86-0.3-1.33-0.3C7.17,4.35,6,5.53,6,7c0,0.6,0.13,1.22,0.38,1.79C4.88,9.15,4,10.67,4,12.43C4,15.52,6.49,18,9.56,18h10.81c0.44,0,0.69-0.54,0.39-0.85l-1.56-1.56c-0.2-0.2-0.51-0.2-0.71,0c-0.2,0.2-0.2,0.51,0,0.71l0.63,0.63H9.56c-2.52,0-4.56-2.05-4.56-4.57c0-1.37,0.61-2.64,1.67-3.51L7.4,8.47c0.33,0.48,0.8,0.8,1.35,0.95C8.24,8.67,8,7.86,8,7c0-0.54,0.42-0.98,0.95-1c0.36-0.01,0.71,0.08,1.03,0.28l0.56,0.29l0.15-0.62C11.13,4.39,12.74,3,14.5,3C16.43,3,18,4.57,18,6.5v0.58c0,0.17,0.13,0.29,0.29,0.29c0.51,0.04,1.1,0.24,1.53,0.55C19.37,7.35,19,6.42,19,6.5z"/>
            </svg>
          </view>
          <text class="data-label">电导率</text>
          <view class="data-value-container">
            <template v-if="soilData.conductivity">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.conductivity}">{{ soilData.conductivity }}</text>
              <text class="data-unit">μS/cm</text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.conductivity">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
        
        <!-- PH值 -->
        <view class="data-item">
          <view class="data-icon" :class="{'no-data': !soilData.ph}">
            <svg width="28" height="28" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2c-5.33,4.55-8,8.48-8,11.8c0,4.98,3.8,8.2,8,8.2s8-3.22,8-8.2C20,10.48,17.33,6.55,12,2z M8.83,16.29c-1.03-1.46-1.74-3.39-1.26-5.37c0.17-0.71,0.49-1.34,0.9-1.92c0.17-0.24,0.35-0.47,0.55-0.67c0.18-0.21,0.38-0.36,0.58-0.54c0.72-0.49,1.45-0.89,2.1-1.39c0.35-0.22,0.7-0.43,1.05-0.61c0.43-0.23,0.93-0.35,1.26-0.68c0.21-0.21,0.35-0.47,0.45-0.77c0.1-0.28,0.17-0.64,0.25-0.91C14.84,3.16,14.99,3,15.16,3c0.55,0,0.59,0.41,0.61,0.44l0.05,0.15c0.04,0.11,0.21,0.71,0.21,1.03c0,0.53-0.23,0.94-0.44,1.31c-0.52,0.88-1.31,1.25-1.92,1.84c-0.36,0.38-0.66,0.85-0.91,1.34c-0.27,0.5-0.47,1.07-0.49,1.66c-0.02,0.42,0.05,0.86,0.27,1.26c0.23,0.43,0.65,0.65,1.06,0.65c0.71,0,1.24-0.46,1.58-0.97c0.46-0.66,0.74-1.48,0.95-2.27c0.11-0.46,0.18-0.93,0.23-1.35c0.14-1.16,0.27-2.25,0.95-2.33c0.17-0.02,0.3,0.01,0.42,0.12c0.32,0.29,0.31,1.11,0.32,1.38c0,0.51-0.01,1.19-0.14,1.83c-0.07,0.32-0.17,0.64-0.28,0.95c-0.19,0.48-0.4,0.95-0.66,1.34C15.85,12.85,15.29,13.16,14.7,13.29z M12,19.8c-3.46,0-6-2.55-6-6c0-0.34,0.03-0.67,0.08-1l0.93,0.7c0.19,0.47,0.55,0.96,1.28,1.23c0.67,0.25,1.37,0.05,1.86-0.33c0.27-0.21,0.48-0.46,0.65-0.71c0.62-0.95,0.89-2.85,0.62-4.04C11.32,9.32,11.17,9.05,11,8.88c0.03-0.06,0.13-0.16,0.3-0.22c0.37-0.14,0.64,0.11,0.82,0.37c0.28,0.42,0.46,0.82,0.55,1.24c0.02,0.08,0.04,0.18,0.05,0.24c0.12,0.52,0.33,1.72-0.25,3.07c-0.52,1.2-1.45,2.25-2.92,2.25c-1.66,0-2.52-1.24-2.67-2.03c-0.19-1.01,0.04-2.33,0.55-3.37c0.44-0.89,1-1.69,1.68-2.35c0.82-0.79,1.73-1.45,2.73-1.99c0.29-0.16,0.6-0.32,0.84-0.44c-0.14,0.45-0.37,0.76-0.87,1.07c-0.54,0.36-1.17,0.67-1.71,1.01c-0.65,0.36-1.26,0.76-1.81,1.18c-0.38,0.28-0.78,0.59-1.15,0.97c-1.1,1.06-1.84,2.23-2.2,3.41c-0.27,0.86-0.37,1.75-0.29,2.6c0.09,0.92,0.38,1.81,0.88,2.58c0.91,1.38,2.45,2.28,4.28,2.28c4.12,0,6-4.27,6-7c0-0.45-0.04-0.85-0.12-1.22c-0.08-0.36-0.21-0.69-0.4-0.97c0,0,0.18-0.07,0.35,0c0.23,0.09,0.39,0.29,0.52,0.67c0.18,0.56,0.25,1.12,0.25,1.68C18,17.41,15.4,19.8,12,19.8z"/>
            </svg>
          </view>
          <text class="data-label">PH值</text>
          <view class="data-value-container">
            <template v-if="soilData.ph">
              <text class="data-value" :class="{'updated': updatedFields.soil && updatedFields.soil.ph}">{{ soilData.ph }}</text>
              <text class="data-unit"></text>
            </template>
            <text v-else class="data-value no-data">暂无数据</text>
          </view>
          <text class="data-time" v-if="soilData.ph">{{ soilData.updateTime || '5分钟前更新' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 告警信息列表 -->
    <view class="alerts-section">
      <view class="section-title">
        <text>告警信息</text>
        <view class="alert-badge" v-if="getUnhandledAlerts.length > 0">{{ getUnhandledAlerts.length }}</view>
      </view>
      
      <view class="alerts-list" v-if="getUnhandledAlerts.length > 0">
        <view 
          v-for="(item, index) in getUnhandledAlerts.slice(0, 3)" 
          :key="index"
          class="alert-item"
          :class="{
            'alert-urgent': item.level === 'high', 
            'alert-warning': item.level === 'medium', 
            'alert-info': item.level === 'low'
          }"
        >
          <view class="alert-item-icon">
            <svg v-if="item.level === 'high'" width="24" height="24" viewBox="0 0 24 24">
              <path fill="#F56C6C" d="M12,2L1,21h22L12,2z M12,6l7.53,13H4.47L12,6z M11,10v4h2v-4H11z M11,16v2h2v-2H11z" />
            </svg>
            <svg v-else-if="item.level === 'medium'" width="24" height="24" viewBox="0 0 24 24">
              <path fill="#E6A23C" d="M11,15h2v2h-2V15z M11,7h2v6h-2V7z M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M12,20c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8S16.42,20,12,20z" />
            </svg>
            <svg v-else width="24" height="24" viewBox="0 0 24 24">
              <path fill="#67C23A" d="M11,7h2v2h-2V7z M11,11h2v6h-2V11z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z" />
            </svg>
          </view>
          
          <view class="alert-item-info">
            <text class="alert-item-type">{{ item.type }}</text>
            <text class="alert-item-level">
              {{ item.level === 'high' ? '紧急' : item.level === 'medium' ? '警告' : '提示' }}
            </text>
          </view>
          
          <view class="alert-item-time">{{ item.time }}</view>
        </view>
      </view>
      
      <view v-else class="empty-alert">
        <text class="empty-text">暂无告警信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: {
        deviceId: 'COL1002',
        name: '采集设备-1',
        status: 'online',
        location: '西区B2地块',
        lastUpdate: '5分钟前',
        deviceType: 'weather' // 'weather' 或 'soil'
      },
      
      // 气象站数据
      weatherData: {
        temperature: '26.5',
        humidity: '68',
        rainfall: '0.0',
        windDirection: '东北',
        windSpeed: '3.2',
        pressure: '1013.5',
        illumination: '45000',
        updateTime: '2分钟前更新'
      },
      
      // 土壤墒情数据
      soilData: {
        temperature: '22.3',
        moisture: '35.8',
        nitrogen: '138.5',
        phosphorus: '42.7',
        potassium: '185.2',
        conductivity: '0.35',
        ph: '6.8',
        updateTime: '5分钟前更新'
      },
      
      // 模拟告警数据
      alertHistory: [
        { id: 1, time: '今天 13:05', type: '数据异常', status: '未处理', level: 'high' },
        { id: 2, time: '今天 09:30', type: '设备离线', status: '未处理', level: 'medium' },
        { id: 3, time: '昨天 15:45', type: '通信错误', status: '已处理', level: 'low' },
        { id: 4, time: '昨天 10:20', type: '电量不足', status: '未处理', level: 'low' }
      ],
      
      // 刷新状态
      isRefreshing: false,
      
      // 数值更新动画
      updatedFields: {
        weather: {},
        soil: {}
      }
    }
  },
  
  computed: {
    // 获取所有未处理的告警
    getUnhandledAlerts() {
      return this.alertHistory.filter(alert => alert.status === '未处理');
    }
  },
  
  onReady() {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: this.deviceInfo.name
    })
  },
  
  onLoad(options) {
    // 如果有传入设备ID，则获取设备信息
    if (options && options.id) {
      let deviceId = options.id;
      let deviceCode = options.code || '';
      
      // 如果有传入设备编码，优先使用编码判断设备类型
      if (deviceCode) {
        this.fetchDeviceInfoWithCode(deviceId, deviceCode);
      } else {
        this.fetchDeviceInfo(deviceId);
      }
    }
  },
  
  methods: {
    // 获取设备信息（带编码）
    fetchDeviceInfoWithCode(deviceId, deviceCode) {
      // 这里应该是API请求，暂时用模拟数据
      console.log('获取设备信息：', deviceId, deviceCode);
      
      // 模拟异步获取数据
      setTimeout(() => {
        // 根据设备编码判断是气象站还是土壤墒情
        if (deviceCode.startsWith('W')) {
          this.deviceInfo.deviceType = 'weather';
          
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.weatherData));
          
          // 模拟更新气象数据
          this.weatherData = {
            temperature: (Math.random() * 10 + 20).toFixed(1),
            humidity: (Math.random() * 30 + 50).toFixed(0),
            rainfall: Math.random() < 0.3 ? (Math.random() * 5).toFixed(1) : '0.0',
            windDirection: ['东北', '东南', '西北', '西南', '东', '南', '西', '北'][Math.floor(Math.random() * 8)],
            windSpeed: (Math.random() * 5 + 1).toFixed(1),
            pressure: (Math.random() * 20 + 1000).toFixed(1),
            illumination: Math.floor(Math.random() * 50000 + 10000).toString(),
            updateTime: '刚刚更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.weather = {};
          Object.keys(this.weatherData).forEach(key => {
            if (key !== 'updateTime' && this.weatherData[key] !== oldData[key]) {
              this.updatedFields.weather[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.weather, key, false);
              }, 1000);
            }
          });
          
        } else if (deviceCode.startsWith('S')) {
          this.deviceInfo.deviceType = 'soil';
          
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.soilData));
          
          // 模拟更新土壤数据
          this.soilData = {
            temperature: (Math.random() * 10 + 18).toFixed(1),
            moisture: (Math.random() * 30 + 20).toFixed(1),
            nitrogen: (Math.random() * 100 + 100).toFixed(1),
            phosphorus: (Math.random() * 50 + 20).toFixed(1),
            potassium: (Math.random() * 100 + 150).toFixed(1),
            conductivity: (Math.random() * 0.5 + 0.2).toFixed(2),
            ph: (Math.random() * 2 + 5.5).toFixed(1),
            updateTime: '刚刚更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.soil = {};
          Object.keys(this.soilData).forEach(key => {
            if (key !== 'updateTime' && this.soilData[key] !== oldData[key]) {
              this.updatedFields.soil[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.soil, key, false);
              }, 1000);
            }
          });
          
        } else {
          // 如果编码无法判断类型，使用原有判断逻辑
          this.fetchDeviceInfo(deviceId);
          return;
        }
        
        // 更新设备基本信息
        this.deviceInfo.deviceId = deviceCode;
        this.deviceInfo.name = `采集设备-${deviceCode.slice(-4)}`;
        this.deviceInfo.lastUpdate = '刚刚';
        
        // 实际应该是API请求结果
      }, 500);
    },
    
    // 获取设备信息
    fetchDeviceInfo(deviceId) {
      // 这里应该是API请求，暂时用模拟数据
      console.log('获取设备信息：', deviceId)
      
      // 模拟异步获取数据
      setTimeout(() => {
        // 根据设备ID判断是气象站还是土壤墒情
        if (deviceId.startsWith('W') || deviceId.includes('weather')) {
          this.deviceInfo.deviceType = 'weather';
          
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.weatherData));
          
          // 模拟更新气象数据
          this.weatherData = {
            temperature: (Math.random() * 10 + 20).toFixed(1),
            humidity: (Math.random() * 30 + 50).toFixed(0),
            rainfall: Math.random() < 0.3 ? (Math.random() * 5).toFixed(1) : '0.0',
            windDirection: ['东北', '东南', '西北', '西南', '东', '南', '西', '北'][Math.floor(Math.random() * 8)],
            windSpeed: (Math.random() * 5 + 1).toFixed(1),
            pressure: (Math.random() * 20 + 1000).toFixed(1),
            illumination: Math.floor(Math.random() * 50000 + 10000).toString(),
            updateTime: Math.floor(Math.random() * 10 + 1) + '分钟前更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.weather = {};
          Object.keys(this.weatherData).forEach(key => {
            if (key !== 'updateTime' && this.weatherData[key] !== oldData[key]) {
              this.updatedFields.weather[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.weather, key, false);
              }, 1000);
            }
          });
          
        } else if (deviceId.startsWith('S') || deviceId.includes('soil')) {
          this.deviceInfo.deviceType = 'soil';
          
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.soilData));
          
          // 模拟更新土壤数据
          this.soilData = {
            temperature: (Math.random() * 10 + 18).toFixed(1),
            moisture: (Math.random() * 30 + 20).toFixed(1),
            nitrogen: (Math.random() * 100 + 100).toFixed(1),
            phosphorus: (Math.random() * 50 + 20).toFixed(1),
            potassium: (Math.random() * 100 + 150).toFixed(1),
            conductivity: (Math.random() * 0.5 + 0.2).toFixed(2),
            ph: (Math.random() * 2 + 5.5).toFixed(1),
            updateTime: Math.floor(Math.random() * 10 + 1) + '分钟前更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.soil = {};
          Object.keys(this.soilData).forEach(key => {
            if (key !== 'updateTime' && this.soilData[key] !== oldData[key]) {
              this.updatedFields.soil[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.soil, key, false);
              }, 1000);
            }
          });
          
        } else {
          // 如果ID无法判断类型，根据偶数/奇数ID模拟不同类型
          const idNum = parseInt(deviceId.replace(/\D/g, ''));
          this.deviceInfo.deviceType = idNum % 2 === 0 ? 'weather' : 'soil';
          
          if (this.deviceInfo.deviceType === 'weather') {
            // 模拟更新气象数据
            this.weatherData = {
              temperature: (Math.random() * 10 + 20).toFixed(1),
              humidity: (Math.random() * 30 + 50).toFixed(0),
              rainfall: Math.random() < 0.3 ? (Math.random() * 5).toFixed(1) : '0.0',
              windDirection: ['东北', '东南', '西北', '西南', '东', '南', '西', '北'][Math.floor(Math.random() * 8)],
              windSpeed: (Math.random() * 5 + 1).toFixed(1),
              pressure: (Math.random() * 20 + 1000).toFixed(1),
              illumination: Math.floor(Math.random() * 50000 + 10000).toString(),
              updateTime: Math.floor(Math.random() * 10 + 1) + '分钟前更新'
            };
          } else {
            // 模拟更新土壤数据
            this.soilData = {
              temperature: (Math.random() * 10 + 18).toFixed(1),
              moisture: (Math.random() * 30 + 20).toFixed(1),
              nitrogen: (Math.random() * 100 + 100).toFixed(1),
              phosphorus: (Math.random() * 50 + 20).toFixed(1),
              potassium: (Math.random() * 100 + 150).toFixed(1),
              conductivity: (Math.random() * 0.5 + 0.2).toFixed(2),
              ph: (Math.random() * 2 + 5.5).toFixed(1),
              updateTime: Math.floor(Math.random() * 10 + 1) + '分钟前更新'
            };
          }
        }
        
        // 更新设备基本信息
        this.deviceInfo.deviceId = deviceId;
        this.deviceInfo.name = `采集设备-${deviceId.slice(-4)}`;
        this.deviceInfo.lastUpdate = (Math.floor(Math.random() * 5) + 1) + '分钟前';
        
        // 实际应该是API请求结果
      }, 500)
    },
    
    // 刷新数据
    refreshData() {
      if (this.isRefreshing) return;
      
      this.isRefreshing = true;
      
      uni.showLoading({
        title: '数据刷新中...'
      });
      
      setTimeout(() => {
        if (this.deviceInfo.deviceType === 'weather') {
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.weatherData));
          
          // 模拟更新气象数据
          this.weatherData = {
            temperature: (Math.random() * 10 + 20).toFixed(1),
            humidity: (Math.random() * 30 + 50).toFixed(0),
            rainfall: Math.random() < 0.3 ? (Math.random() * 5).toFixed(1) : '0.0',
            windDirection: ['东北', '东南', '西北', '西南', '东', '南', '西', '北'][Math.floor(Math.random() * 8)],
            windSpeed: (Math.random() * 5 + 1).toFixed(1),
            pressure: (Math.random() * 20 + 1000).toFixed(1),
            illumination: Math.floor(Math.random() * 50000 + 10000).toString(),
            updateTime: '刚刚更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.weather = {};
          Object.keys(this.weatherData).forEach(key => {
            if (key !== 'updateTime' && this.weatherData[key] !== oldData[key]) {
              this.updatedFields.weather[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.weather, key, false);
              }, 1000);
            }
          });
          
        } else {
          // 保存旧数据用于比较
          const oldData = JSON.parse(JSON.stringify(this.soilData));
          
          // 模拟更新土壤数据
          this.soilData = {
            temperature: (Math.random() * 10 + 18).toFixed(1),
            moisture: (Math.random() * 30 + 20).toFixed(1),
            nitrogen: (Math.random() * 100 + 100).toFixed(1),
            phosphorus: (Math.random() * 50 + 20).toFixed(1),
            potassium: (Math.random() * 100 + 150).toFixed(1),
            conductivity: (Math.random() * 0.5 + 0.2).toFixed(2),
            ph: (Math.random() * 2 + 5.5).toFixed(1),
            updateTime: '刚刚更新'
          };
          
          // 检查哪些字段发生了变化
          this.updatedFields.soil = {};
          Object.keys(this.soilData).forEach(key => {
            if (key !== 'updateTime' && this.soilData[key] !== oldData[key]) {
              this.updatedFields.soil[key] = true;
              
              // 1秒后清除动画标记
              setTimeout(() => {
                this.$set(this.updatedFields.soil, key, false);
              }, 1000);
            }
          });
        }
        
        this.deviceInfo.lastUpdate = '刚刚';
        
        uni.hideLoading();
        uni.showToast({
          title: '数据已更新',
          icon: 'success'
        });
        
        // 停止刷新动画
        setTimeout(() => {
          this.isRefreshing = false;
        }, 500);
      }, 1500);
    }
  }
}
</script>

<style>
/* 基础样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F8FCF9;
  padding-bottom: 30rpx;
}

/* 设备头部样式 */
.device-header {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 30rpx 30rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(210, 237, 217, 0.5);
}

.device-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.device-name-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.refresh-btn {
  width: 48rpx;
  height: 48rpx;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx;
  transition: transform 0.3s ease;
}

.refresh-btn:active {
  transform: rotate(180deg);
}

.device-name {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.status-tag {
  padding: 6rpx 16rpx 6rpx 28rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.status-online {
  background-color: rgba(76, 175, 80, 0.1);
  color: #3BB44A;
}

.status-offline {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
  padding-left: 28rpx;
}

.status-dot {
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background-color: #3BB44A;
  border-radius: 50%;
  top: 50%;
  left: 12rpx;
  transform: translateY(-50%);
  box-shadow: 0 0 4rpx rgba(76, 175, 80, 0.8);
  animation: blink 1.5s infinite;
  display: inline-block;
}

.status-dot.offline-dot {
  background-color: #F56C6C;
  box-shadow: 0 0 4rpx rgba(245, 108, 108, 0.8);
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.device-meta-row {
  display: flex;
  flex-direction: column;
  background-color: #F9FCFA;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  border: 1rpx solid rgba(210, 237, 217, 0.8);
}

.device-meta-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  margin-top: 18rpx;
}

.device-meta-item:first-child {
  margin-top: 0;
}

.meta-icon {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}

.meta-label {
  color: #777777;
  min-width: 140rpx;
  font-size: 28rpx;
}

.meta-value {
  color: #333333;
  flex: 1;
  font-size: 28rpx;
  font-weight: 500;
}

/* 数据展示区域 */
.data-section {
  margin: 0 30rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(210, 237, 217, 0.5);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 30rpx;
  padding: 0 10rpx 16rpx;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 2rpx solid rgba(59, 180, 74, 0.1);
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background-color: #3BB44A;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.section-title text {
  margin-left: 20rpx;
}

.alert-badge {
  background-color: #F56C6C;
  color: #FFFFFF;
  font-size: 22rpx;
  border-radius: 30rpx;
  padding: 2rpx 12rpx;
  margin-left: 12rpx;
  font-weight: normal;
  min-width: 32rpx;
  text-align: center;
}

.data-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
  width: 100%;
  margin: 0 -10rpx;
}

.data-item {
  width: calc(50% - 20rpx);
  margin: 0 10rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F6FCF7;
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  position: relative;
  border: 1rpx solid rgba(210, 237, 217, 0.6);
  transition: all 0.25s ease;
  overflow: hidden;
}

.data-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6rpx;
  height: 100%;
  background: linear-gradient(to bottom, #4CAF50, #8BC34A);
  opacity: 0.8;
}

.data-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  border-color: rgba(76, 175, 80, 0.8);
}

.data-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  background-color: rgba(76, 175, 80, 0.08);
  border-radius: 50%;
  padding: 20rpx;
  transition: transform 0.3s ease;
}

.data-icon:active {
  transform: scale(1.1);
}

.data-icon.no-data {
  opacity: 0.5;
}

.data-label {
  font-size: 26rpx;
  color: #555555;
  margin-bottom: 12rpx;
  font-weight: 500;
  text-align: center;
}

.data-value-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 10rpx;
}

.data-value {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
}

.data-value.no-data {
  font-size: 26rpx;
  color: #999999;
  font-weight: normal;
}

.data-unit {
  font-size: 22rpx;
  color: #888888;
  margin-left: 4rpx;
  padding-bottom: 6rpx;
}

.data-time {
  font-size: 20rpx;
  color: #AAAAAA;
  margin-top: 8rpx;
  text-align: right;
  width: 100%;
}

/* 告警信息列表 */
.alerts-section {
  margin: 0 30rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(210, 237, 217, 0.5);
}

.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  border: 1rpx solid transparent;
  transition: transform 0.2s ease;
}

.alert-item:active {
  transform: scale(0.98);
}

.alert-urgent {
  background-color: #FEF3F3;
  border-left: 4rpx solid #F56C6C;
  border-color: rgba(245, 108, 108, 0.2);
}

.alert-warning {
  background-color: #FFF8E6;
  border-left: 4rpx solid #E6A23C;
  border-color: rgba(230, 162, 60, 0.2);
}

.alert-info {
  background-color: #F2FAF5;
  border-left: 4rpx solid #67C23A;
  border-color: rgba(103, 194, 58, 0.2);
}

.alert-item-icon {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.alert-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.alert-item-type {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.alert-item-level {
  font-size: 24rpx;
  color: #999999;
}

.alert-item-time {
  font-size: 24rpx;
  color: #999999;
  margin-left: 16rpx;
  min-width: 100rpx;
  text-align: right;
}

.empty-alert {
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

/* 数据更新动画 */
@keyframes fadeNumberChange {
  0% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.data-value.updated {
  animation: fadeNumberChange 0.8s ease;
}

/* 刷新按钮旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.refresh-btn.refreshing {
  animation: spin 1.2s linear infinite;
}
</style>