nongxiaoyu/pages/dashboard/index.vue

<template>
  <view class="dashboard-container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-info-card">
      <view class="user-info">
        <text class="greeting">您好，{{ userData.nickname }}</text>
        <view class="plot-info">
          <text class="plot-label">当前地块：</text>
          <text class="plot-name">{{ userData.selectedPlot }}</text>
          <view class="switch-plot-btn" @click="handleSwitchPlot">
            <text>切换</text>
          </view>
        </view>
      </view>
      <view class="avatar-container" @click="navigateToProfile">
        <view class="avatar">
          <image :src="userData.avatar" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 顶部统计概览 -->
    <view class="stats-overview">
      <view class="alert-card" v-for="(alert, index) in alertSummaries" :key="index" @click="navigateToAlertDetail(alert.type)">
        <view class="alert-header">
          <view class="alert-icon-container">
            <image class="custom-icon" :src="alert.iconSrc"></image>
          </view>
          <text class="alert-title">{{ alert.title }}</text>
        </view>
        <text class="alert-value">{{ alert.value }}</text>
        <text class="alert-description">{{ alert.description }}</text>
      </view>
    </view>

    <!-- 天气卡片 -->
    <view class="card weather-card">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">天气与预报</text>
        </view>
      </view>
      <view class="weather-content">
        <view class="current-weather">
          <view class="weather-icon-container">
            <view class="weather-icon">
              <text v-if="weatherData.description === '晴朗'">☀️</text>
              <text v-else-if="weatherData.description.includes('雨')">🌧️</text>
              <text v-else-if="weatherData.description.includes('云')">⛅</text>
              <text v-else>🌤️</text>
            </view>
          </view>
          <view class="weather-details">
            <text class="weather-temp">{{ weatherData.temperature }}°C</text>
            <text class="weather-desc">{{ weatherData.description }}</text>
          </view>
        </view>
        <view class="weather-metrics">
          <view class="weather-metric">
            <text class="metric-label">湿度</text>
            <text class="metric-value">{{ weatherData.humidity }}%</text>
          </view>
          <view class="vertical-divider"></view>
          <view class="weather-metric">
            <text class="metric-label">风力</text>
            <text class="metric-value">{{ weatherData.windLevel }} 级</text>
          </view>
          <view class="vertical-divider"></view>
          <view class="weather-metric">
            <text class="metric-label">降水量</text>
            <text class="metric-value">{{ weatherData.rainfall }} mm</text>
          </view>
        </view>
        <view class="weather-advice">
          <view class="advice-header">
            <view class="icon-tile small">
              <u-icon name="info" color="#ffffff" size="14"></u-icon>
            </view>
            <text class="advice-title">今日建议：</text>
          </view>
          <text class="advice-content">{{ weatherData.advice }}</text>
        </view>
      </view>
    </view>

    <!-- 农场绩效卡片 -->
    <view class="card farm-performance">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">产值分析</text>
        </view>
        <view class="period-selector">
          <text class="period" :class="{ active: currentPeriod === 'month' }" @click="changePeriod('month')">月</text>
          <text class="period" :class="{ active: currentPeriod === 'quarter' }" @click="changePeriod('quarter')">季</text>
          <text class="period" :class="{ active: currentPeriod === 'year' }" @click="changePeriod('year')">年</text>
        </view>
      </view>
      <view class="performance-stats">
        <view class="metric-column">
          <text class="metric-value">128<text class="metric-unit">亩</text></text>
          <text class="metric-label">管理面积总计</text>
          <view class="growth positive">
            <u-icon name="arrow-upward" color="#3BB44A" size="12"></u-icon>
            <text>比上月增长12%</text>
          </view>
        </view>
        <view class="metric-divider"></view>
        <view class="metric-column">
          <text class="metric-value">¥36,480</text>
          <text class="metric-label">预计产值</text>
          <view class="growth positive">
            <u-icon name="arrow-upward" color="#3BB44A" size="12"></u-icon>
            <text>比上月增长8.2%</text>
          </view>
        </view>
      </view>
      <view class="chart-container">
        <view class="chart-header">
          <text class="chart-title">产值趋势 (万元)</text>
          <view class="chart-legend">
            <view class="legend-item">
              <view class="legend-color" style="background: #3BB44A;"></view>
              <text>今年</text>
            </view>
            <view class="legend-item">
              <view class="legend-color" style="background: #E0E0E0;"></view>
              <text>去年</text>
            </view>
          </view>
        </view>
        <view class="chart-body">
          <view class="y-axis">
            <text v-for="(value, index) in [4, 3, 2, 1, 0]" :key="index">{{ value }}</text>
          </view>
          <view class="bars-container">
            <view class="month-group" v-for="(month, index) in farmPerformanceData.months" :key="index">
              <view class="bar-wrapper">
                <view class="bar last-year" :style="{ height: (farmPerformanceData.lastYearValues[index] / 4) * 100 + '%' }"></view>
                <view class="bar this-year" :style="{ height: (farmPerformanceData.thisYearValues[index] / 4) * 100 + '%' }"></view>
              </view>
              <text class="month-label">{{ month }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 监控设备概览 -->
    <view class="card device-overview">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">监控设备概览</text>
        </view>
      </view>
      <view class="device-metrics-grid">
        <view class="device-metric-card" v-for="(metric, index) in deviceMetrics" :key="index">
          <view class="device-metric-header">
            <view class="icon-tile" :style="{ background: metric.gradient }">
              <u-icon :name="metric.icon" color="#ffffff" size="18"></u-icon>
            </view>
            <text class="metric-name">{{ metric.name }}</text>
          </view>
          <view class="device-metric-value">{{ metric.value }}</view>
          <view class="device-metric-trend" :class="metric.trend.type">
            <u-icon :name="metric.trend.type === 'up' ? 'arrow-upward' : 'arrow-downward'" :color="metric.trend.type === 'up' ? '#3BB44A' : '#FF5252'" size="14"></u-icon>
            <text>{{ metric.trend.value }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 农业机械活动 -->
    <view class="card machinery-activity">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农机作业概览</text>
        </view>
      </view>
      <view class="machinery-metrics-grid">
        <view class="machinery-metric-card" v-for="(metric, index) in machineryMetrics" :key="index">
          <view class="machinery-metric-header">
            <view class="icon-tile" :style="{ background: metric.gradient }">
              <u-icon :name="metric.icon" color="#ffffff" size="18"></u-icon>
            </view>
            <text class="metric-name">{{ metric.name }}</text>
          </view>
          <view class="machinery-metric-value">{{ metric.value }}</view>
          <view v-if="metric.trend" class="machinery-metric-trend" :class="metric.trend.type">
            <u-icon :name="metric.trend.type === 'up' ? 'arrow-upward' : 'arrow-downward'" :color="metric.trend.type === 'up' ? '#3BB44A' : '#FF5252'" size="14"></u-icon>
            <text>{{ metric.trend.value }}</text>
          </view>
          <view v-else class="machinery-metric-unit">
            <text>{{ metric.unit }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 农场活动卡片 -->
    <view class="card farm-activities">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农事活动</text>
        </view>
        <view class="action-button">
          <text>查看全部</text>
          <u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
        </view>
      </view>
      <view class="activities-list">
        <view class="activity-item" v-for="(activity, index) in farmData.recentActivities" :key="index">
          <view class="activity-dot" :class="activity.status"></view>
          <view class="activity-details">
            <view class="activity-title-row">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-date">{{ activity.date }}</text>
            </view>
            <view class="activity-meta-row">
              <text class="activity-executor">{{ activity.executor }}</text>
              <view class="activity-action" @click.stop="navigateToActivity(activity)">
                <text class="action-text">查看</text>
                <u-icon name="arrow-right" color="#3BB44A" size="14"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
export default {
  data() {
    return {
      // 用户数据
      userData: {
        nickname: '',
        selectedPlot: '',
		avatar:''
      },
      
      // 农场数据
      farmData: {
        plotCount: 5,
        deviceCount: 12,
        deviceOnlineRate: 85,
        taskCompletionRate: 76,
        recentActivities: [
          { title: '稻田水稻施肥', date: '2023-05-15', status: 'pending', id: 1, executor: '李四' },
          { title: '南地块除草', date: '2023-05-12', status: 'completed', id: 2, executor: '王五' },
          { title: '西北区域杀虫', date: '2023-05-08', status: 'completed', id: 3, executor: '张三' }
        ]
      },
      
      // 天气数据
      weatherData: {
        temperature: 28,
        description: '晴朗',
        humidity: 65,
        windLevel: 3,
        rainfall: 0,
        advice: '今日适宜进行春玉米防虫作业，注意水分管理。'
      },
      
      // 作物数据
      crops: [
        { name: '水稻', area: 48, progress: 75, icon: '🌾', bgColor: '#4CAF50' },
        { name: '小麦', area: 36, progress: 60, icon: '🌿', bgColor: '#66BB6A' },
        { name: '玉米', area: 32, progress: 85, icon: '🌽', bgColor: '#43A047' },
        { name: '大豆', area: 12, progress: 40, icon: '🫘', bgColor: '#388E3C' }
      ],
      
      // 监控设备指标
      deviceMetrics: [
        {
          name: '在线设备',
          value: '28',
          icon: 'wifi',
          gradient: 'linear-gradient(135deg, #26A69A, #00796B)',
          trend: {
            type: 'up',
            value: '5.2%'
          }
        },
        {
          name: '告警设备',
          value: '3',
          icon: 'error-circle',
          gradient: 'linear-gradient(135deg, #FF7043, #E64A19)',
          trend: {
            type: 'down',
            value: '2.1%'
          }
        },
        {
          name: '离线设备',
          value: '5',
          icon: 'close-circle',
          gradient: 'linear-gradient(135deg, #78909C, #455A64)',
          trend: {
            type: 'down',
            value: '1.8%'
          }
        },
        {
          name: '数据稳定性',
          value: '96.3%',
          icon: 'checkmark-circle',
          gradient: 'linear-gradient(135deg, #66BB6A, #388E3C)',
          trend: {
            type: 'up',
            value: '0.5%'
          }
        }
      ],
      
      // 农业机械指标
      machineryMetrics: [
        {
          name: '今日运行时长',
          value: '36.5',
          unit: '小时',
          icon: 'clock',
          gradient: 'linear-gradient(135deg, #42A5F5, #1976D2)'
        },
        {
          name: '今日作业地块',
          value: '8',
          unit: '块',
          icon: 'map',
          gradient: 'linear-gradient(135deg, #66BB6A, #388E3C)'
        },
        {
          name: '今日执行任务',
          value: '12',
          unit: '个',
          icon: 'calendar',
          gradient: 'linear-gradient(135deg, #FFA726, #F57C00)'
        },
        {
          name: '使用率',
          value: '78.2%',
          icon: 'star',
          gradient: 'linear-gradient(135deg, #5C6BC0, #3949AB)',
          trend: {
            type: 'up',
            value: '3.7%'
          }
        }
      ],
      
      // 当前选择的周期
      currentPeriod: 'month',
      
      // 警报摘要数据
      alertSummaries: [
        {
          title: '设备离线',
          value: '3 台',
          iconSrc: '/static/icons/offline.png',
          description: '最长离线时长：26 小时',
          type: 'device-offline'
        },
        {
          title: '虫害预警',
          value: '稻飞虱｜小地老虎',
          iconSrc: '/static/icons/Pest_Alert.png',
          description: '预警等级：中',
          type: 'pest-warning'
        },
        {
          title: '气象预警',
          value: '强风（8级）',
          iconSrc: '/static/icons/weather_risk.png',
          description: '预计：未来 12 小时内',
          type: 'weather-risk'
        },
        {
          title: '作业延迟',
          value: '5 项',
          iconSrc: '/static/icons/task_delay.png',
          description: '最长延迟：3 天',
          type: 'task-delay'
        }
      ],
      
      // 农场绩效图表数据 - 月度数据
      monthlyData: {
        months: ['1月', '2月', '3月', '4月', '5月', '6月'],
        thisYearValues: [2.8, 3.4, 2.9, 3.6, 3.8, 3.2],
        lastYearValues: [2.5, 2.8, 2.4, 3.0, 3.2, 2.7]
      },
      
      // 季度数据
      quarterlyData: {
        months: ['Q1', 'Q2', 'Q3', 'Q4'],
        thisYearValues: [3.2, 3.7, 4.0, 3.5],
        lastYearValues: [2.7, 3.3, 3.6, 3.0]
      },
      
      // 年度数据
      yearlyData: {
        months: ['2019', '2020', '2021', '2022', '2023'],
        thisYearValues: [2.2, 2.5, 3.0, 3.5, 3.8],
        lastYearValues: [2.0, 2.3, 2.7, 3.2, 3.4]
      }
    };
  },
  
  computed: {
    // 核心统计数据
    coreStats() {
      return [
        { 
          label: '地块', 
          value: this.farmData.plotCount, 
          icon: 'map',
        },
        { 
          label: '设备', 
          value: this.farmData.deviceCount, 
          icon: 'setting',
        },
        { 
          label: '设备在线', 
          value: this.farmData.deviceOnlineRate + '%', 
          icon: 'wifi',
        },
        { 
          label: '任务完成', 
          value: this.farmData.taskCompletionRate + '%', 
          icon: 'checkmark-circle',
        }
      ];
    },
    
    // 根据当前周期计算要显示的数据
    farmPerformanceData() {
      if (this.currentPeriod === 'month') {
        return this.monthlyData;
      } else if (this.currentPeriod === 'quarter') {
        return this.quarterlyData;
      } else {
        return this.yearlyData;
      }
    }
  },
  
  methods: {
    // 处理切换地块
    handleSwitchPlot() {
      uni.showActionSheet({
        itemList: ['南地块', '西北区域', '稻田', '东区试验田'],
        success: (res) => {
          this.userData.selectedPlot = ['南地块', '西北区域', '稻田', '东区试验田'][res.tapIndex];
        }
      });
    },

    // 导航到个人资料
    navigateToProfile() {
      uni.navigateTo({
        url: '/pages/profile/index'
      });
    },
    
    // 导航到活动详情
    navigateToActivity(activity) {
      uni.navigateTo({
        url: `/pages/activity/detail?id=${activity.id}`
      });
    },
    
    // 导航到警报详情
    navigateToAlertDetail(type) {
      // 实现导航到警报详情页的逻辑
      console.log(`Navigating to alert detail for type: ${type}`);
    },
    
    // 切换周期
    changePeriod(period) {
      this.currentPeriod = period;
    }
  },
  onShow(){
	const userInfo = storage.getUserInfo()
	console.log("userInfo",userInfo);  
	this.userData = {
		nickname:userInfo.nickName,
		selectedPlot:"南地块",
		avatar:userInfo.avatar || '/static/icons/user_icon.png'
	}
  },
  
  mounted() {
    // 页面加载完成后的处理
    // 这里可以添加数据加载、初始化等逻辑
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 24rpx;
  background-color: #F6FDF9;
  min-height: 100vh;
}

// 顶部用户信息卡片
.user-info-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .user-info {
    flex: 1;
    
    .greeting {
      font-size: 32rpx;
      font-weight: 600;
      color: #2C3E50;
      margin-bottom: 8rpx;
    }
    
    .plot-info {
      display: flex;
      align-items: center;
      
      .plot-label {
        font-size: 24rpx;
        color: #8C9396;
      }
      
      .plot-name {
        font-size: 24rpx;
        color: #2C3E50;
        margin: 0 8rpx;
      }
      
      .switch-plot-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #3BB44A, #66CC6A);
        border-radius: 16rpx;
        padding: 4rpx 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(59, 180, 74, 0.25);
        
        text {
          font-size: 22rpx;
          color: white;
        }
      }
    }
  }
  
  .avatar-container {
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: rgba(59, 180, 74, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

// Top Stats Overview
.stats-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin-bottom: 24rpx;
  
  .alert-card {
    background: white;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    }
    
    &::after {
      content: "";
      position: absolute;
      right: 12rpx;
      bottom: 12rpx;
      width: 16rpx;
      height: 16rpx;
      border-top: 2rpx solid #E0E0E0;
      border-right: 2rpx solid #E0E0E0;
      transform: rotate(45deg);
      opacity: 0.5;
    }
    
    .alert-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      
      .alert-icon-container {
        margin-right: 12rpx;
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .custom-icon {
          width: 40rpx;
          height: 40rpx;
          object-fit: contain;
        }
      }
      
      .alert-title {
        font-size: 26rpx;
        color: #333333;
        font-weight: 600;
      }
    }
    
    .alert-value {
      font-size: 30rpx;
      font-weight: 700;
      color: #3BB44A;
      margin-bottom: 6rpx;
      line-height: 1.2;
      padding-left: 52rpx;
    }
    
    .alert-description {
      font-size: 22rpx;
      color: #757575;
      padding-left: 52rpx;
    }
  }
}

// Card Base Styles
.card {
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04), 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
  margin-bottom: 24rpx;
  overflow: hidden;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 28rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    
    .title-section {
      display: flex;
      align-items: center;
      
      .title-line {
        width: 4rpx;
        height: 28rpx;
        border-radius: 0;
        background: linear-gradient(180deg, #3BB44A, #66CC6A);
        margin-right: 16rpx;
      }
      
      .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }
    
    .period-selector {
      display: flex;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 20rpx;
      padding: 2rpx;
      
      .period {
        font-size: 22rpx;
        color: #8C9396;
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        
        &.active {
          background: white;
          color: #3BB44A;
          font-weight: 500;
          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
        }
      }
    }
    
    .action-button {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #3BB44A, #66CC6A);
      border-radius: 24rpx;
      padding: 8rpx 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(59, 180, 74, 0.25);
      
      text {
        font-size: 22rpx;
        color: white;
        margin-right: 6rpx;
      }
    }
  }
}

// Farm Performance Card
.farm-performance {
  .performance-stats {
    display: flex;
    padding: 24rpx 28rpx;
    
    .metric-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .metric-value {
        font-size: 48rpx;
        font-weight: 700;
        color: #2C3E50;
        margin-bottom: 6rpx;
        line-height: 1.1;
        
        .metric-unit {
          font-size: 24rpx;
          font-weight: 500;
          color: #8C9396;
          margin-left: 4rpx;
        }
      }
      
      .metric-label {
        font-size: 24rpx;
        color: #8C9396;
        margin-bottom: 12rpx;
      }
      
      .growth {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        
        &.positive {
          color: #3BB44A;
        }
        
        &.negative {
          color: #FF5252;
        }
      }
    }
    
    .metric-divider {
      width: 1px;
      background: rgba(0, 0, 0, 0.04);
      margin: 0 28rpx;
    }
  }
  
  .chart-container {
    padding: 24rpx 28rpx;
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .chart-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
      }
      
      .chart-legend {
        display: flex;
        align-items: center;
        
        .legend-item {
          display: flex;
          align-items: center;
          margin-left: 16rpx;
          
          .legend-color {
            width: 16rpx;
            height: 16rpx;
            border-radius: 4rpx;
            margin-right: 8rpx;
          }
          
          text {
            font-size: 22rpx;
            color: #8C9396;
          }
        }
      }
    }
    
    .chart-body {
      display: flex;
      height: 240rpx;
      position: relative;
      margin-top: 12rpx;
      
      .y-axis {
        width: 40rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        padding-right: 16rpx;
        margin-bottom: 30rpx;
        
        text {
          font-size: 22rpx;
          color: #8C9396;
        }
      }
      
      .bars-container {
        flex: 1;
        display: flex;
        justify-content: space-around;
        height: 200rpx;
        position: relative;
        
        &::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #E0E0E0;
        }
        
        .month-group {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 14%;
          
          .bar-wrapper {
            height: 200rpx;
            width: 70%;
            display: flex;
            justify-content: center;
            position: relative;
            
            .bar {
              position: absolute;
              bottom: 0;
              width: 45%;
              border-radius: 4rpx 4rpx 0 0;
              transition: height 0.3s ease;
            }
            
            .last-year {
              left: 0;
              background: #E0E0E0;
            }
            
            .this-year {
              right: 0;
              background: #3BB44A;
            }
          }
          
          .month-label {
            font-size: 22rpx;
            color: #8C9396;
            margin-top: 8rpx;
          }
        }
      }
    }
  }
}

// Crop Portfolio
.crop-portfolio {
  .crop-grid {
    padding: 16rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
  }
  
  .crop-item {
    padding: 16rpx;
    background: rgba(0, 0, 0, 0.01);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    
    .crop-icon {
      width: 48rpx;
      height: 48rpx;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      
      .crop-icon-text {
        font-size: 24rpx;
      }
    }
    
    .crop-details {
      flex: 1;
      
      .crop-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .crop-name {
          font-size: 26rpx;
          font-weight: 600;
          color: #2C3E50;
        }
        
        .crop-area {
          font-size: 22rpx;
          color: #8C9396;
        }
      }
      
      .crop-stats {
        display: flex;
        align-items: center;
        
        .crop-progress-container {
          flex: 1;
          height: 8rpx;
          background: rgba(0, 0, 0, 0.03);
          border-radius: 4rpx;
          margin-right: 12rpx;
          overflow: hidden;
          
          .crop-progress {
            height: 100%;
            border-radius: 4rpx;
          }
        }
        
        .crop-progress-text {
          font-size: 22rpx;
          color: #8C9396;
          min-width: 36rpx;
          text-align: right;
        }
      }
    }
  }
}

// Resource Efficiency
.resource-efficiency {
  .resource-grid {
    padding: 16rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
  }
  
  .resource-item {
    padding: 16rpx;
    background: rgba(0, 0, 0, 0.01);
    border-radius: 16rpx;
    
    .resource-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      
      .icon-tile {
        width: 28rpx;
        height: 28rpx;
        border-radius: 6rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
        
        &.small {
          width: 28rpx;
          height: 28rpx;
        }
      }
      
      .resource-name {
        font-size: 24rpx;
        color: #8C9396;
      }
    }
    
    .resource-value {
      margin-bottom: 12rpx;
      
      .value {
        font-size: 36rpx;
        font-weight: 700;
        color: #2C3E50;
      }
      
      .unit {
        font-size: 22rpx;
        color: #8C9396;
        margin-left: 4rpx;
      }
    }
    
    .resource-progress-container {
      .resource-progress-bg {
        height: 8rpx;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 4rpx;
        margin-bottom: 8rpx;
        overflow: hidden;
        
        .resource-progress {
          height: 100%;
          border-radius: 4rpx;
        }
      }
      
      .resource-efficiency {
        font-size: 22rpx;
        color: #8C9396;
      }
    }
  }
}

// Farm Activities
.farm-activities {
  .activities-list {
    padding: 8rpx 0;
  }
  
  .activity-item {
    display: flex;
    align-items: center;
    padding: 20rpx 28rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    
    &:last-child {
      border-bottom: none;
    }
    
    .activity-dot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      flex-shrink: 0;
      
      &.completed {
        background: #4CAF50;
      }
      
      &.pending {
        background: #FFC107;
      }
      
      &.failed {
        background: #FF5252;
      }
    }
    
    .activity-details {
      flex: 1;
      
      .activity-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6rpx;
        
        .activity-title {
          font-size: 26rpx;
          font-weight: 500;
          color: #2C3E50;
        }
        
        .activity-date {
          font-size: 22rpx;
          color: #8C9396;
        }
      }
      
      .activity-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .activity-executor {
          font-size: 22rpx;
          color: #8C9396;
        }
        
        .activity-action {
          display: flex;
          align-items: center;
          
          .action-text {
            font-size: 22rpx;
            color: #3BB44A;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}

// Weather Card
.weather-card {
  .weather-content {
    padding: 20rpx 28rpx;
  }
  
  .current-weather {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    
    .weather-icon-container {
      margin-right: 20rpx;
      
      .weather-icon {
        font-size: 60rpx;
        line-height: 1;
      }
    }
    
    .weather-details {
      .weather-temp {
        font-size: 48rpx;
        font-weight: 700;
        color: #2C3E50;
        line-height: 1.1;
      }
      
      .weather-desc {
        font-size: 26rpx;
        color: #8C9396;
      }
    }
  }
  
  .weather-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    margin-bottom: 24rpx;
    border-radius: 12rpx;
    background-color: rgba(247, 247, 247, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.03);
    
    .weather-metric {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .metric-label {
        font-size: 22rpx;
        color: #8C9396;
        margin-bottom: 6rpx;
      }
      
      .metric-value {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }
    
    .vertical-divider {
      width: 1px;
      height: 36rpx;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }
  
  .weather-advice {
    background: rgba(59, 180, 74, 0.05);
    border-radius: 16rpx;
    padding: 16rpx;
    
    .advice-header {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .icon-tile {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #3BB44A, #66CC6A);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
        box-shadow: 0 2rpx 8rpx rgba(59, 180, 74, 0.25);
        
        &.small {
          width: 24rpx;
          height: 24rpx;
        }
      }
      
      .advice-title {
        font-size: 24rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }
    
    .advice-content {
      font-size: 24rpx;
      color: #2C3E50;
      line-height: 1.4;
    }
  }
}

// For small screens - mobile responsiveness
@media screen and (max-width: 768px) {
  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .crop-grid {
    grid-template-columns: 1fr;
  }
}

// 监控设备概览
.device-overview {
  .device-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
    padding: 16rpx;
  }
  
  .device-metric-card {
    background: white;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    
    .device-metric-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .icon-tile {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      }
      
      .metric-name {
        font-size: 24rpx;
        color: #8C9396;
      }
    }
    
    .device-metric-value {
      font-size: 44rpx;
      font-weight: 700;
      color: #2C3E50;
      margin-bottom: 12rpx;
    }
    
    .device-metric-trend {
      display: flex;
      align-items: center;
      font-size: 22rpx;
      
      &.up {
        color: #3BB44A;
      }
      
      &.down {
        color: #FF5252;
      }
      
      text {
        margin-left: 4rpx;
      }
    }
  }
}

// 农业机械活动
.machinery-activity {
  .machinery-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
    padding: 16rpx;
  }
  
  .machinery-metric-card {
    background: white;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    
    .machinery-metric-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .icon-tile {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      }
      
      .metric-name {
        font-size: 24rpx;
        color: #8C9396;
      }
    }
    
    .machinery-metric-value {
      font-size: 44rpx;
      font-weight: 700;
      color: #2C3E50;
      margin-bottom: 12rpx;
    }
    
    .machinery-metric-trend {
      display: flex;
      align-items: center;
      font-size: 22rpx;
      
      &.up {
        color: #3BB44A;
      }
      
      &.down {
        color: #FF5252;
      }
      
      text {
        margin-left: 4rpx;
      }
    }
    
    .machinery-metric-unit {
      font-size: 22rpx;
      color: #8C9396;
    }
  }
}
</style>