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="handleCancel"
							@confirm="onConfirm"
							keyName="text"
						></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 setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import storage from "@/utils/storage.js"
import { listFieldName } from "@/api/services/field.js"

// 响应式数�?
const isLogin = ref(false)
const show = ref(false)
const columns = ref([[]])
const defaultIndex = ref([0])

// 用户数据
const userData = reactive({
nickname: '游客',
selectedPlot: '未选择地块',
avatar: '/static/images/user-avatar.png',
userId: null
})

// 农场数据
const farmData = reactive({
	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: '张三'
		}
	]
})

// 天气数据
const weatherData = reactive({
	temperature: 28,
	description: '晴朗',
	humidity: 65,
	windLevel: 3,
	rainfall: 0,
	advice: '今日适宜进行春玉米防虫作业，注意水分管理。'
})

// 作物数据
const crops = ref([
	{
		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'
	}
])

// 监控设备指标
const deviceMetrics = ref([
	{
		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%'
		}
	}
])

// 农业机械指标
const machineryMetrics = ref([
	{
		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%'
		}
	}
])

// 当前选择的周�?
const currentPeriod = ref('month')

// 警报摘要数据
const alertSummaries = ref([
	{
		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'
	}
])

// 农场绩效图表数据 - 月度数据
const monthlyData = reactive({
	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]
})

// 季度数据
const quarterlyData = reactive({
	months: ['Q1', 'Q2', 'Q3', 'Q4'],
	thisYearValues: [3.2, 3.7, 4.0, 3.5],
	lastYearValues: [2.7, 3.3, 3.6, 3.0]
})

// 年度数据
const yearlyData = reactive({
	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]
})

// 计算属�?- 核心统计数据
const coreStats = computed(() => {
	return [
		{
			label: '地块',
			value: farmData.plotCount,
			icon: 'map',
		},
		{
			label: '设备',
			value: farmData.deviceCount,
			icon: 'setting',
		},
		{
			label: '设备在线',
			value: farmData.deviceOnlineRate + '%',
			icon: 'wifi',
		},
		{
			label: '任务完成',
			value: farmData.taskCompletionRate + '%',
			icon: 'checkmark-circle',
		}
	]
})

// 计算属�?- 根据当前周期计算要显示的数据
const farmPerformanceData = computed(() => {
	if (currentPeriod.value === 'month') {
		return monthlyData
	} else if (currentPeriod.value === 'quarter') {
		return quarterlyData
	} else {
		return yearlyData
	}
})

// 方法定义
const 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
			console.log("fieldList:", fieldList)
			const fields = []
			fieldList.forEach(item => {
				const fieldName = item?.fieldName
				if (fieldName && !fields.includes(fieldName)) {
					fields.push({
						text: fieldName,
						value: item.id,
						growCrops: item.growCrops,
						managerName: item.managerName,
						size: item.size,
						farmId: item.farmId
					})
				}
			})

			columns.value = [fields] // 符合 u-picker 的二维数组格�?
			storage.setCurrentUserPlotsList(fields)

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

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

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

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

				if (index !== -1) {
					defaultIndex.value = [index]
					console.log("设置默认选中地块索引:", index, "defaultIndex:", defaultIndex.value)
				} else {
					console.warn("未找到匹配的地块:", currentPlots.name)
					defaultIndex.value = [0] // 默认选中第一�?
				}
			} else {
				console.warn("columns数据格式不正�?", columns.value)
				defaultIndex.value = [0] // 默认选中第一�?
			}
		} else {
			console.warn("未设置默认地块或地块名为空");
			this.defaultIndex = [0]; // 默认选中第一项
		}
	} catch (error) {
		console.error("设置默认地块时出�?", error)
		defaultIndex.value = [0] // 出错时默认选中第一�?
	}
}

const onConfirm = (e) => {
	console.log('选择了：', e)
	userData.selectedPlot = e.value[0].text
	let obj = {
		id: e.value[0].value,
		name: e.value[0].text,
		growCrops: e.value[0].growCrops,
		managerName: e.value[0].managerName,
		size: e.value[0].size,
		farmId: e.value[0].farmId
	}
	storage.setPlots(JSON.stringify(obj))
	show.value = false
}

// 处理取消
const handleCancel = () => {
	console.log('取消选择')
	show.value = false
}

// 处理切换地块
const handleSwitchPlot = () => {
	// 在显示picker前重新设置defaultIndex
	setDefaultSelectedPlot()
	show.value = true
}

// 导航到个人资�?
const navigateToProfile = () => {
	uni.navigateTo({
		url: '/pages/user/index'
	})
}

// 导航到活动详�?
const navigateToActivity = (activity) => {
	uni.navigateTo({
		url: `/pages/activity/detail?id=${activity.id}`
	})
}

// 导航到警报详�?
const navigateToAlertDetail = (type) => {
	// 实现导航到警报详情页的逻辑
	console.log(`Navigating to alert detail for type: ${type}`)
}

// 切换周期
const changePeriod = (period) => {
	currentPeriod.value = period
}

// uni-app 生命周期 - onShow
onShow(() => {
	const userInfo = storage.getUserInfo()
	console.log("userInfo", userInfo)
	userData.nickname = userInfo.username || '未登录'
	userData.avatar = userInfo.avatar || '/static/icons/user_icon.png'
	userData.userId = userInfo.userid
	
	if (storage.getHasLogin()) {
		isLogin.value = true
		// 加载当前登录用户所属所有地块信�?
		const cached = storage.getCurrentUserPlotsList()
		if (Array.isArray(cached) && cached.length > 0) {
			// 如果有缓存，直接用缓存构�?columns
			columns.value = [cached]
			console.log("从缓存加载字段:", columns.value)
			// 有缓存时，在columns设置后立即设置defaultIndex
			setDefaultSelectedPlot()
		} else {
			// 无缓存时请求接口，在接口完成后会调用setDefaultSelectedPlot
			loadPhots(userData.userId)
		}
		console.log("columns", columns.value)
	}
})

// onMounted 也保留，用于首次加载
onMounted(() => {
	const userInfo = storage.getUserInfo()
	console.log("userInfo", userInfo)
	userData.nickname = userInfo.username || '未登录'
	userData.avatar = userInfo.avatar || '/static/icons/user_icon.png'
	userData.userId = userInfo.userid
	
	if (storage.getHasLogin()) {
		isLogin.value = true
		// 加载当前登录用户所属所有地块信�?
		const cached = storage.getCurrentUserPlotsList()
		if (Array.isArray(cached) && cached.length > 0) {
			// 如果有缓存，直接用缓存构�?columns
			columns.value = [cached]
			console.log("从缓存加载字�?", columns.value)
			// 有缓存时，在columns设置后立即设置defaultIndex
			setDefaultSelectedPlot()
		} else {
			// 无缓存时请求接口，在接口完成后会调用setDefaultSelectedPlot
			loadPhots(userData.userId)
		}
		console.log("columns", columns.value)
	}
})
</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>