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" v-if="isLogin">
						<u-picker :show="show" :columns="columns" :defaultIndex="defaultIndex" @cancel="show = false"
							@confirm="onConfirm"></u-picker>
						<text @click="handleSwitchPlot">切换</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";
	import {
		listFieldName
	} from "@/api/services/field.js"
	export default {
		data() {
			return {
				isLogin:false,
				show: false,
				columns: [
					[]
				],
				defaultIndex: [0],
				// 用户数据
				userData: {
					nickname: '游客',
					selectedPlot: '未选择地块',
					avatar: '/static/images/user-avatar.png',
				},

				// 农场数据
				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: {
			loadPhots(userId) {
				console.log("加载用户字段", userId);

				listFieldName(userId)
					.then(res => {
						const {
							data
						} = res || {};

						if (data?.code !== 200 || !Array.isArray(data.data)) {
							console.warn("接口返回异常或数据格式不正确", res);
							return;
						}

						const fieldList = data.data;

						const fields = [];
						fieldList.forEach(item => {
							const fieldName = item?.fieldName;
							if (fieldName && !fields.includes(fieldName)) {
								fields.push({
									text: fieldName,
									value: item.id
								});
							}
						});

						this.columns = [fields]; // 符合 u-picker 的二维数组格式
						storage.setCurrentUserPlotsList(fields)

						console.log("字段加载完成:", this.columns);
						
						// 字段加载完成后立即设置默认索引
						this.setDefaultSelectedPlot();
					})
					.catch(err => {
						console.error("加载字段失败", err);
					});
			},

			// 初始化地块列表
			initPlotColumns() {
				const cached = storage.getCurrentUserPlotsList();
				if (Array.isArray(cached) && cached.length > 0) {
					this.columns = [cached]; // 结构上是二维数组
					console.log("从缓存加载字段:", this.columns);
				} else {
					this.loadPhots(this.userData.userId); // 异步方法内部要处理赋值 columns
				}
			},

			// 设置默认选中项
			setDefaultSelectedPlot() {
				try {
					const currentPlots = JSON.parse(storage.getPlots() || '{}');
					console.log("设置默认地块", currentPlots);
					
					if (currentPlots?.name) {
						this.userData.selectedPlot = currentPlots.name;

						// 防止 this.columns 未定义或格式不正确
						if (Array.isArray(this.columns) && this.columns.length > 0 && Array.isArray(this.columns[0])) {
							const plots = this.columns[0];
							const index = plots.findIndex(item => item.text === currentPlots.name);

							if (index !== -1) {
								this.defaultIndex = [index];
								console.log("设置默认选中地块索引:", index, "defaultIndex:", this.defaultIndex);
							} else {
								console.warn("未找到匹配的地块:", currentPlots.name);
								this.defaultIndex = [0]; // 默认选中第一项
							}
						} else {
							console.warn("columns数据格式不正确:", this.columns);
							this.defaultIndex = [0]; // 默认选中第一项
						}
					} else {
						console.warn("未设置默认地块或地块名为空");
						this.defaultIndex = [0]; // 默认选中第一项
					}
				} catch (error) {
					console.error("设置默认地块时出错:", error);
					this.defaultIndex = [0]; // 出错时默认选中第一项
				}
			},
			onConfirm(e) {
				console.log('选择了：', e);
				this.userData.selectedPlot = e.value[0].text
				let obj = {id:e.value[0].value,name:e.value[0].text}
				storage.setPlots(JSON.stringify(obj))
				this.show = false;
			},
			// 处理切换地块
			handleSwitchPlot() {
				// 在显示picker前重新设置defaultIndex
				this.setDefaultSelectedPlot();
				this.show = true;
			},

			// 导航到个人资料
			navigateToProfile() {
				uni.navigateTo({
					url: '/pages/user/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 || '未登录'
			this.userData.avatar = userInfo.avatar || '/static/icons/user_icon.png'
			this.userData.userId = userInfo.userId
			
			if(storage.getHasLogin()){
				this.isLogin = true;
				// 加载当前登录用户所属所有地块信息
				const cached = storage.getCurrentUserPlotsList();
				if (Array.isArray(cached) && cached.length > 0) {
					// 如果有缓存，直接用缓存构造 columns
					this.columns = [cached];
					console.log("从缓存加载字段:", this.columns);
					// 有缓存时，在columns设置后立即设置defaultIndex
					this.setDefaultSelectedPlot();
				} else {
					// 无缓存时请求接口，在接口完成后会调用setDefaultSelectedPlot
					this.loadPhots(this.userData.userId);
				}
				console.log("columns", this.columns);
			}

		},

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

	// 添加测试样式
	.test-block {
		background-color: #4CAF50;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.test-text {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}
</style>