|
|
@@ -1,1414 +1,1575 @@
|
|
|
<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>
|
|
|
+ <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";
|
|
|
-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() {
|
|
|
- // 页面加载完成后的处理
|
|
|
- // 这里可以添加数据加载、初始化等逻辑
|
|
|
- }
|
|
|
-};
|
|
|
+ import storage from "@/utils/storage.js";
|
|
|
+ import {
|
|
|
+ listFieldName
|
|
|
+ } from "@/api/services/field.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLogin:false,
|
|
|
+ show: false,
|
|
|
+ columns: [
|
|
|
+ []
|
|
|
+ ],
|
|
|
+ defaultIndex: [9],
|
|
|
+ // 用户数据
|
|
|
+ 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: {
|
|
|
+ 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/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 || '未登录'
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .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>
|
