|
|
@@ -1,1637 +1,13 @@
|
|
|
<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>
|
|
|
+ 首页
|
|
|
</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;
|
|
|
- }
|
|
|
+<style lang="less">
|
|
|
|
|
|
- .test-text {
|
|
|
- color: white;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-</style>
|
|
|
+</style>
|
