Merge branch 'demo' of http://121.4.16.100:3001/gebadi/nongxiaoyu into demo

pages.json

@@ -92,6 +92,12 @@
       "style": {
         "navigationBarTitleText": "隐私政策"
       }
+    },
+    {
+      "path": "pages/plots/list",
+      "style": {
+        "navigationBarTitleText": "选择地块"
+      }
     }
   ],
   "tabBar": {

pages/device/index.vue

@@ -1,15 +1,544 @@
 <template>
   <view class="container">
-    设备监测页面（待开发）
+    <!-- 地块信息 -->
+    <view class="plot-section">
+      <text class="plot-text">当前查看地块：</text>
+      <text class="plot-name">{{ currentPlot }}</text>
+    </view>
+    
+    <!-- 顶部区域：概览统计 -->
+    <view class="overview-section">
+      <view class="stat-item">
+        <text class="stat-label">总数：</text>
+        <text class="stat-value">{{ totalDevices }}</text>
+      </view>
+      <view class="stat-item">
+        <text class="stat-label online-icon">●</text>
+        <text class="stat-label">在线：</text>
+        <text class="stat-value online">{{ onlineDevices }}</text>
+      </view>
+      <view class="stat-item">
+        <text class="stat-label offline-icon">●</text>
+        <text class="stat-label">离线：</text>
+        <text class="stat-value offline">{{ offlineDevices }}</text>
+      </view>
+      <view class="stat-item">
+        <image src="/static/icons/alert.png" class="alert-icon" mode="aspectFit"></image>
+        <text class="stat-label">告警：</text>
+        <text class="stat-value alert">{{ alertDevices }}</text>
+      </view>
+    </view>
+    
+    <!-- 设备网格布局 -->
+    <view class="device-grid">
+      <view 
+        class="device-card" 
+        v-for="(item, index) in deviceList" 
+        :key="index" 
+        @click="navigateToDeviceList(item.type)"
+        :class="{'has-alert': item.alerts > 0}"
+      >
+        <!-- 卡片内容区 -->
+        <view class="card-content-area">
+          <!-- 图标和环形进度 -->
+          <view class="icon-progress-wrapper">
+            <view class="icon-container">
+              <image :src="item.icon" mode="aspectFit" class="icon-image"></image>
+            </view>
+            <view class="progress-ring-container">
+              <svg class="progress-ring" viewBox="0 0 36 36">
+                <defs>
+                  <linearGradient id="greenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="#7FD982" />
+                    <stop offset="100%" stop-color="#3BB44A" />
+                  </linearGradient>
+                </defs>
+                <circle class="progress-ring-circle" cx="18" cy="18" r="16" />
+                <circle 
+                  class="progress-ring-value" 
+                  cx="18" 
+                  cy="18" 
+                  r="16" 
+                  :stroke-dasharray="100.53" 
+                  :stroke-dashoffset="100.53 - (100.53 * item.onlineRate / 100)"
+                  transform="rotate(-90, 18, 18)"
+                />
+              </svg>
+              <view class="progress-center">
+                <text class="progress-text">{{ item.onlineRate }}%</text>
+              </view>
+            </view>
+          </view>
+          
+          <!-- 设备信息 -->
+          <view class="device-info">
+            <view class="card-title">{{ item.name }}</view>
+            <view class="status-row">
+              <view class="status-item">
+                <view class="status-dot online-dot"></view>
+                <text>在线: </text>
+                <text class="status-num online-num">{{ item.online }}</text>
+              </view>
+              <view class="status-item">
+                <view class="status-dot offline-dot"></view>
+                <text>离线: </text>
+                <text class="status-num offline-num">{{ item.offline }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 告警信息条 -->
+        <view v-if="item.alerts > 0" class="alert-bar">
+          <view class="alert-icon">⚠️</view>
+          <text class="alert-text">{{ item.alerts }} 条告警</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
-<script setup>
+<script>
+export default {
+  data() {
+    return {
+      deviceList: [
+        { 
+          name: '监控设备', 
+          online: 8, 
+          offline: 2, 
+          type: 'monitor',
+          icon: '/static/icons/camera.png',
+          alerts: 1,
+          onlineRate: 80
+        },
+        { 
+          name: '采集设备', 
+          online: 14, 
+          offline: 1, 
+          type: 'sensor',
+          icon: '/static/icons/sensor.png',
+          alerts: 2,
+          onlineRate: 93
+        },
+        { 
+          name: '控制设备', 
+          online: 10, 
+          offline: 1, 
+          type: 'control',
+          icon: '/static/icons/control.png',
+          alerts: 0,
+          onlineRate: 91
+        },
+        { 
+          name: '灌溉设备', 
+          online: 6, 
+          offline: 0, 
+          type: 'irrigation',
+          icon: '/static/icons/water.png',
+          alerts: 0,
+          onlineRate: 100
+        },
+        { 
+          name: '农机设备', 
+          online: 3, 
+          offline: 1, 
+          type: 'tractor',
+          icon: '/static/icons/tractor.png',
+          alerts: 0,
+          onlineRate: 75
+        }
+      ],
+      currentPlot: '东区智慧农场'
+    }
+  },
+  
+  computed: {
+    totalDevices() {
+      return this.deviceList.reduce((sum, device) => sum + device.online + device.offline, 0)
+    },
+    
+    onlineDevices() {
+      return this.deviceList.reduce((sum, device) => sum + device.online, 0)
+    },
+    
+    offlineDevices() {
+      return this.deviceList.reduce((sum, device) => sum + device.offline, 0)
+    },
+    
+    alertDevices() {
+      return this.deviceList.reduce((sum, device) => sum + device.alerts, 0)
+    }
+  },
+  
+  onLoad() {
+    // 页面加载时获取设备数据
+    this.fetchDeviceData()
+  },
+  
+  methods: {
+    // 获取设备数据
+    fetchDeviceData() {
+      // 实际开发中替换为API请求
+      // 模拟异步请求
+      setTimeout(() => {
+        // 这里只是示例，实际开发中应从API获取数据
+        console.log('设备数据加载完成')
+        this.calculateOnlineRates()
+      }, 500)
+    },
+    
+    // 计算在线率
+    calculateOnlineRates() {
+      this.deviceList.forEach(item => {
+        const total = item.online + item.offline
+        if (total > 0) {
+          item.onlineRate = Math.round((item.online / total) * 100)
+        } else {
+          item.onlineRate = 0
+        }
+      })
+    },
+    
+    // 跳转到对应设备列表页面
+    navigateToDeviceList(type) {
+      uni.navigateTo({
+        url: `/pages/device-list?type=${type}`
+      })
+    },
+    
+    // 切换地块
+    changePlot() {
+      // 暂时仅展示UI，后续实现地块切换逻辑
+      uni.showToast({
+        title: '地块切换功能开发中',
+        icon: 'none'
+      })
+    }
+  },
+
+  // 页面导航配置
+  onShow() {
+    uni.setNavigationBarTitle({
+      title: '设备中心'
+    })
+  }
+}
 </script>
 
 <style scoped>
 .container {
-  padding: 40rpx;
-  font-size: 32rpx;
+  padding: 24rpx;
+  background-color: #F9FCFA;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+/* 地块选择区域 */
+.plot-section {
+  background-color: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 24rpx 30rpx;
+  margin-bottom: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.06);
+}
+
+.plot-text {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.plot-name {
+  font-size: 30rpx;
+  color: #333333;
+  font-weight: 600;
+  margin: 0 12rpx;
+}
+
+/* 顶部概览统计区域 */
+.overview-section {
+  background-color: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 28rpx 30rpx;
+  margin-bottom: 24rpx;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.06);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.stat-item::after {
+  content: '';
+  position: absolute;
+  right: -20rpx;
+  top: 10rpx;
+  height: 40rpx;
+  width: 1px;
+  background-color: #EBEEF5;
+  display: block;
+}
+
+.stat-item:last-child::after {
+  display: none;
+}
+
+.stat-label {
+  font-size: 26rpx;
+  color: #666666;
+  margin-right: 8rpx;
+}
+
+.online-icon {
+  color: #66CC6A;
+  font-size: 16rpx;
+  margin-right: 8rpx;
+  transform: translateY(-2rpx);
+}
+
+.offline-icon {
+  color: #F56C6C;
+  font-size: 16rpx;
+  margin-right: 8rpx;
+  transform: translateY(-2rpx);
+}
+
+.alert-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+}
+
+.stat-value {
+  font-size: 30rpx;
+  color: #333333;
+  font-weight: 600;
+}
+
+.stat-value.online {
+  color: #3BB44A;
+}
+
+.stat-value.offline {
+  color: #F56C6C;
+}
+
+.stat-value.alert {
+  color: #F56C6C;
+}
+
+/* 设备网格区域 */
+.device-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.device-card {
+  width: 48%;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  background-color: #FFFFFF;
+  box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.05);
+  overflow: hidden;
+  position: relative;
+  border: 1rpx solid rgba(59, 180, 74, 0.1);
+}
+
+.device-card.has-alert .card-content-area {
+  padding-bottom: 60rpx;
+}
+
+/* 卡片内容区 */
+.card-content-area {
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24rpx;
+}
+
+/* 图标和环形进度 */
+.icon-progress-wrapper {
+  position: relative;
+  width: 100%;
+  height: 130rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.icon-container {
+  width: 76rpx;
+  height: 76rpx;
+  background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.2);
+}
+
+.icon-image {
+  width: 42rpx;
+  height: 42rpx;
+  filter: brightness(0) invert(1);
+}
+
+/* 恢复采集设备和灌溉设备的特殊图标尺寸 */
+.device-card:nth-child(2) .icon-image,  /* 采集设备 */
+.device-card:nth-child(4) .icon-image {  /* 灌溉设备 */
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.progress-ring-container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 130rpx;
+  height: 130rpx;
+  z-index: 1;
+}
+
+.progress-ring {
+  transform: rotate(0deg);
+  width: 130rpx;
+  height: 130rpx;
+}
+
+.progress-ring-circle {
+  stroke: rgba(59, 180, 74, 0.1);
+  fill: transparent;
+  stroke-width: 3;
+}
+
+.progress-ring-value {
+  stroke: url(#greenGradient);
+  fill: transparent;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.3s;
+}
+
+.progress-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 76rpx;
+  height: 76rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: 50%;
+}
+
+.progress-text {
+  position: absolute;
+  bottom: 10rpx;
+  right: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #3BB44A;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 2rpx 8rpx;
+  border-radius: 10rpx;
+}
+
+/* 设备信息 */
+.device-info {
+  text-align: center;
+}
+
+.card-title {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 600;
+  margin-bottom: 12rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 8rpx;
+  margin: 0 -8rpx;
+}
+
+.status-item {
+  display: flex;
+  align-items: baseline;
+}
+
+.status-dot {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  margin-right: 6rpx;
+  display: inline-block;
+}
+
+.online-dot {
+  background-color: #3BB44A;
+}
+
+.offline-dot {
+  background-color: #F56C6C;
+}
+
+.status-item text {
+  font-size: 24rpx;
+  color: #666666;
+}
+
+.status-num {
+  font-weight: 500;
+}
+
+.online-num {
+  color: #3BB44A;
+}
+
+.offline-num {
+  color: #F56C6C;
+}
+
+/* 告警信息条 */
+.alert-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14rpx 0;
+  background-color: rgba(245, 108, 108, 0.1);
+  font-size: 22rpx;
+  border-top: 1px solid #FFD5D5;
+  box-shadow: 0 -2rpx 4rpx rgba(245, 108, 108, 0.1);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.alert-icon {
+  margin-right: 6rpx;
+  font-size: 22rpx;
+}
+
+.alert-text {
+  color: #F56C6C;
+  font-weight: 500;
 }
 </style>

pages/plots/list.vue

@@ -0,0 +1,869 @@
+<template>
+  <view class="container">
+    <!-- 头部区域 -->
+    <view class="header">
+      <view class="back-button" @click="goBack">
+        <text class="iconfont icon-back">&#xe60e;</text>
+      </view>
+      <text class="page-title">选择地块</text>
+    </view>
+    
+    <!-- 搜索栏 -->
+    <view class="search-box">
+      <view class="search-input">
+        <text class="iconfont icon-search">&#xe62a;</text>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          placeholder="搜索地块名称/编号/负责人/农场" 
+          confirm-type="search"
+          @input="handleSearch"
+        />
+        <text v-if="searchKeyword" class="clear-icon" @click="clearSearch">×</text>
+      </view>
+    </view>
+    
+    <!-- 当前选中地块 -->
+    <view class="current-block">
+      <view class="block-header">
+        <view class="left">
+          <text class="icon-tag">当前</text>
+          <text class="title">当前地块</text>
+        </view>
+      </view>
+      <view class="current-block-card">
+        <view class="current-tag">当前</view>
+        
+        <view class="block-content">
+          <view class="block-icon">
+            <image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
+          </view>
+          
+          <view class="block-info">
+            <!-- 标题区域：显示地块名称 + 所属农场名称 -->
+            <view class="block-name">{{ currentBlock.name }}</view>
+            <view class="block-farm">{{ currentBlock.farmName }}</view>
+            
+            <!-- 次级信息区域：显示地块编号、负责人 -->
+            <view class="block-meta">
+              <text>编号：{{ currentBlock.code }}</text>
+              <text class="separator">|</text>
+              <text>负责人：{{ currentBlock.manager }}</text>
+            </view>
+            
+            <!-- 已有信息：面积、类型、作物 -->
+            <view class="block-details">
+              <text>{{ currentBlock.area }}亩</text>
+              <text class="separator">|</text>
+              <text>{{ currentBlock.type }}</text>
+              <text v-if="currentBlock.crop" class="separator">|</text>
+              <text v-if="currentBlock.crop">{{ currentBlock.crop }}</text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="block-stats">
+          <view class="stat-item">
+            <image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
+            <text>设备：{{ currentBlock.deviceCount }}</text>
+          </view>
+          <view class="stat-item">
+            <image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit"></image>
+            <text>在线：{{ currentBlock.onlineDevices }}</text>
+          </view>
+          <view class="stat-item" v-if="currentBlock.alerts > 0">
+            <image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit"></image>
+            <text class="alert-text">告警：{{ currentBlock.alerts }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 地块列表 -->
+    <view class="block-list">
+      <view class="block-header">
+        <view class="left">
+          <text class="icon-tag">列表</text>
+          <text class="title">可选地块列表</text>
+        </view>
+        <text class="count">共{{ filteredBlocks.length }}个地块</text>
+      </view>
+      
+      <!-- 加载骨架屏 -->
+      <template v-if="isLoading">
+        <view class="skeleton-container">
+          <view class="skeleton-box" v-for="i in 3" :key="i">
+            <view class="skeleton-header">
+              <view class="skeleton-icon"></view>
+              <view class="skeleton-info">
+                <view class="skeleton-title"></view>
+                <view class="skeleton-detail"></view>
+              </view>
+            </view>
+            <view class="skeleton-stats"></view>
+          </view>
+        </view>
+      </template>
+      
+      <!-- 空状态 -->
+      <template v-else-if="filteredBlocks.length === 0">
+        <view class="empty-state">
+          <image src="/static/icons/empty-plots.svg" mode="aspectFit" class="empty-image"></image>
+          <text class="empty-text">暂无可选地块</text>
+          <text class="empty-subtext">请添加或关联地块后再试</text>
+        </view>
+      </template>
+      
+      <!-- 地块列表 -->
+      <template v-else>
+        <view class="block-cards">
+          <view 
+            class="block-card" 
+            v-for="block in filteredBlocks" 
+            :key="block.id"
+            :class="{'active-block': currentBlock.id === block.id, 'clickable': currentBlock.id !== block.id}"
+            @click="handleBlockClick(block)"
+          >
+            <view v-if="block.status === 'active'" class="status-badge status-active-badge">使用中</view>
+            <view v-if="block.status === 'idle'" class="status-badge status-idle-badge">闲置</view>
+            <view v-if="block.status === 'maintenance'" class="status-badge status-maintenance-badge">维护中</view>
+            
+            <view class="block-content">
+              <view class="block-icon">
+                <image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
+              </view>
+              
+              <view class="block-info">
+                <!-- 标题区域：显示地块名称 + 所属农场名称 -->
+                <view class="block-name">{{ block.name }}</view>
+                <view class="block-farm">{{ block.farmName }}</view>
+                
+                <!-- 次级信息区域：显示地块编号、负责人 -->
+                <view class="block-meta">
+                  <text>编号：{{ block.code }}</text>
+                  <text class="separator">|</text>
+                  <text>负责人：{{ block.manager }}</text>
+                </view>
+                
+                <!-- 已有信息：面积、类型、作物 -->
+                <view class="block-details">
+                  <text>{{ block.area }}亩</text>
+                  <text class="separator">|</text>
+                  <text>{{ block.type }}</text>
+                  <text v-if="block.crop" class="separator">|</text>
+                  <text v-if="block.crop">{{ block.crop }}</text>
+                </view>
+              </view>
+            </view>
+            
+            <view class="block-stats">
+              <view class="stat-item">
+                <image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
+                <text>设备：{{ block.deviceCount }}</text>
+              </view>
+              <view class="stat-item">
+                <image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit"></image>
+                <text>在线：{{ block.onlineDevices }}</text>
+              </view>
+              <view class="stat-item" v-if="block.alerts > 0">
+                <image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit"></image>
+                <text class="alert-text">告警：{{ block.alerts }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLoading: true,
+      searchKeyword: '',
+      currentBlock: {
+        id: 'plot001',
+        code: 'FK20230001',
+        name: '东区智慧农场',
+        farmName: '绿色生态农业基地',
+        manager: '张三',
+        area: 15.5,
+        type: '大棚',
+        crop: '西红柿',
+        status: 'active',
+        deviceCount: 12,
+        onlineDevices: 10,
+        alerts: 1
+      },
+      blocks: [
+        {
+          id: 'plot001',
+          code: 'FK20230001',
+          name: '东区智慧农场',
+          farmName: '绿色生态农业基地',
+          manager: '张三',
+          area: 15.5,
+          type: '大棚',
+          crop: '西红柿',
+          status: 'active',
+          deviceCount: 12,
+          onlineDevices: 10,
+          alerts: 1
+        },
+        {
+          id: 'plot002',
+          code: 'FK20230002',
+          name: '南区试验田',
+          farmName: '绿色生态农业基地',
+          manager: '李四',
+          area: 8.2,
+          type: '露天',
+          crop: '玉米',
+          status: 'active',
+          deviceCount: 8,
+          onlineDevices: 6,
+          alerts: 0
+        },
+        {
+          id: 'plot003',
+          code: 'FK20230003',
+          name: '西区果园',
+          farmName: '现代农业示范园',
+          manager: '王五',
+          area: 20.0,
+          type: '果园',
+          crop: '苹果',
+          status: 'maintenance',
+          deviceCount: 15,
+          onlineDevices: 5,
+          alerts: 3
+        },
+        {
+          id: 'plot004',
+          code: 'FK20230004',
+          name: '北区水稻田',
+          farmName: '水稻研究中心',
+          manager: '赵六',
+          area: 30.5,
+          type: '水田',
+          crop: '水稻',
+          status: 'active',
+          deviceCount: 10,
+          onlineDevices: 9,
+          alerts: 0
+        },
+        {
+          id: 'plot005',
+          code: 'FK20230005',
+          name: '中央实验区',
+          farmName: '农业科技研究所',
+          manager: '钱七',
+          area: 5.0,
+          type: '育苗',
+          crop: '',
+          status: 'idle',
+          deviceCount: 6,
+          onlineDevices: 2,
+          alerts: 0
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    filteredBlocks() {
+      if (!this.searchKeyword) return this.blocks
+      
+      const keyword = this.searchKeyword.toLowerCase()
+      return this.blocks.filter(block => {
+        return block.name.toLowerCase().includes(keyword) || 
+               block.id.toLowerCase().includes(keyword) ||
+               block.code.toLowerCase().includes(keyword) ||
+               block.manager.toLowerCase().includes(keyword) ||
+               block.farmName.toLowerCase().includes(keyword)
+      })
+    }
+  },
+  
+  mounted() {
+    // 尝试从本地存储中读取上次选择的地块
+    try {
+      const savedPlot = uni.getStorageSync('current_plot')
+      if (savedPlot) {
+        const plotData = JSON.parse(savedPlot)
+        // 如果存储的地块在当前地块列表中，则设置为当前选中地块
+        const matchedBlock = this.blocks.find(block => block.id === plotData.id)
+        if (matchedBlock) {
+          this.currentBlock = matchedBlock
+        }
+      }
+    } catch (e) {
+      console.error('读取保存的地块失败', e)
+    }
+    
+    // 模拟加载数据
+    setTimeout(() => {
+      this.isLoading = false
+    }, 1000)
+  },
+  
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    
+    handleSearch() {
+      // 搜索功能已通过计算属性实现
+    },
+    
+    clearSearch() {
+      this.searchKeyword = ''
+    },
+    
+    handleBlockClick(block) {
+      // 如果点击当前已选中的地块，不做任何操作
+      if (this.currentBlock.id === block.id) return
+      
+      // 弹出确认框
+      uni.showModal({
+        title: '切换地块',
+        content: '是否切换到该地块？切换后将查看该地块的相关设备数据。',
+        cancelText: '取消',
+        confirmText: '确定',
+        success: (res) => {
+          if (res.confirm) {
+            this.selectBlock(block)
+          }
+        }
+      })
+    },
+    
+    selectBlock(block) {
+      this.currentBlock = block
+      
+      // 保存当前选择的地块到本地存储
+      try {
+        uni.setStorageSync('current_plot', JSON.stringify({
+          id: block.id,
+          code: block.code,
+          name: block.name,
+          timestamp: Date.now()
+        }))
+      } catch (e) {
+        console.error('保存地块选择状态失败', e)
+      }
+      
+      // 触发选择事件，传递地块ID
+      this.$emit('selectBlock', block.id)
+      
+      // 获取页面参数，检查是否需要返回
+      const pages = getCurrentPages()
+      const currentPage = pages[pages.length - 1]
+      let eventChannel
+      
+      // 尝试获取页面参数和事件通道
+      let shouldReturn = true // 默认行为是返回
+      try {
+        const options = currentPage.options || {}
+        // 获取事件通道（如果存在）
+        eventChannel = currentPage.getOpenerEventChannel && currentPage.getOpenerEventChannel()
+        
+        // 如果有redirect参数，则跳转到指定页面而不是返回
+        if (options.redirect) {
+          shouldReturn = false
+          uni.redirectTo({
+            url: decodeURIComponent(options.redirect),
+            success: () => {
+              // 跳转成功后传递选中的地块数据
+              if (eventChannel) {
+                eventChannel.emit('selectBlockResult', {
+                  success: true,
+                  blockId: block.id,
+                  blockData: block
+                })
+              }
+            }
+          })
+        } else if (options.noReturn === 'true') {
+          // 如果设置了noReturn参数，则不执行返回操作
+          shouldReturn = false
+        }
+      } catch (e) {
+        console.error('获取页面参数失败', e)
+      }
+      
+      // 如果需要返回上一页，则执行返回操作
+      if (shouldReturn) {
+        setTimeout(() => {
+          uni.navigateBack({
+            success: () => {
+              // 返回成功后传递选中的地块数据
+              if (eventChannel) {
+                eventChannel.emit('selectBlockResult', {
+                  success: true,
+                  blockId: block.id,
+                  blockData: block
+                })
+              }
+            }
+          })
+        }, 300)
+      }
+    },
+    
+    getStatusClass(status) {
+      const statusMap = {
+        'active': 'status-active',
+        'idle': 'status-idle',
+        'maintenance': 'status-maintenance'
+      }
+      return statusMap[status] || ''
+    },
+    
+    getStatusText(status) {
+      const statusMap = {
+        'active': '使用中',
+        'idle': '闲置',
+        'maintenance': '维护中'
+      }
+      return statusMap[status] || '未知'
+    },
+    
+    // 可以被父组件调用的方法
+    onBack(callback) {
+      if (typeof callback === 'function') {
+        callback(this.currentBlock.id)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  min-height: 100vh;
+  background-color: #F5F7FA;
+  padding-bottom: 30rpx;
+}
+
+/* 头部导航 */
+.header {
+  display: none; /* 隐藏整个头部标题栏 */
+}
+
+.back-button {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-back {
+  font-size: 36rpx;
+  color: #333;
+}
+
+.page-title {
+  flex: 1;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-right: 60rpx; /* 平衡左侧返回按钮 */
+}
+
+/* 搜索框 */
+.search-box {
+  padding: 20rpx 30rpx;
+  background-color: #FFFFFF;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+  margin-bottom: 20rpx;
+}
+
+.search-header {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 15rpx;
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+  height: 70rpx;
+  background-color: #F5F7FA;
+  border-radius: 35rpx;
+  padding: 0 30rpx;
+  box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
+  border: 1rpx solid rgba(0, 0, 0, 0.03);
+}
+
+.icon-search {
+  font-size: 28rpx;
+  color: #999;
+  margin-right: 10rpx;
+}
+
+.search-input input {
+  flex: 1;
+  height: 70rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.clear-icon {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #999;
+}
+
+/* 块区域通用样式 */
+.current-block, .block-list {
+  margin: 0 30rpx 20rpx;
+  background-color: #FFFFFF;
+  padding: 24rpx;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+}
+
+.block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.block-header .left {
+  display: flex;
+  align-items: center;
+}
+
+.icon-tag {
+  font-size: 24rpx;
+  color: #FFFFFF;
+  background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
+  padding: 4rpx 16rpx;
+  border-radius: 6rpx;
+  margin-right: 16rpx;
+  box-shadow: 0 2rpx 5rpx rgba(59, 180, 74, 0.2);
+}
+
+.block-header .title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.block-header .count {
+  font-size: 24rpx;
+  color: #999;
+  background-color: #F5F7FA;
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+}
+
+/* 当前选中地块卡片 */
+.current-block-card {
+  background: linear-gradient(to right, #F0F8F0, #E7F5E8);
+  border-radius: 16rpx;
+  padding: 30rpx;
+  position: relative;
+  border: 2rpx solid rgba(59, 180, 74, 0.2);
+  box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
+}
+
+.current-tag {
+  position: absolute;
+  top: 0;
+  right: 20rpx;
+  background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
+  color: white;
+  font-size: 22rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 0 0 12rpx 12rpx;
+  font-weight: bold;
+}
+
+/* 地块列表卡片 */
+.block-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.block-card {
+  background-color: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  border: 1rpx solid rgba(0, 0, 0, 0.03);
+  transition: all 0.3s ease;
+}
+
+.block-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
+}
+
+.block-card.active-block {
+  border: 2rpx solid #3BB44A;
+  background-color: #F0F8F0;
+  box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
+}
+
+.block-card.clickable {
+  cursor: pointer;
+}
+
+.block-card.clickable:hover {
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+}
+
+.block-content {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 20rpx;
+}
+
+.block-icon {
+  width: 40rpx;
+  margin-right: 15rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.location-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+.block-info {
+  flex: 1;
+}
+
+.block-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 6rpx;
+}
+
+.block-farm {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 10rpx;
+}
+
+.block-meta {
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 10rpx;
+}
+
+.block-details {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.separator {
+  margin: 0 10rpx;
+  color: #ccc;
+}
+
+.check-mark {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.check-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+/* 状态标签 */
+.status-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 22rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 0 16rpx 0 12rpx;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.status-active-badge {
+  background-color: #E6F7E6;
+  color: #3BB44A;
+  border-left: 1rpx solid rgba(59, 180, 74, 0.2);
+  border-bottom: 1rpx solid rgba(59, 180, 74, 0.2);
+}
+
+.status-idle-badge {
+  background-color: #F1F2F3;
+  color: #909399;
+  border-left: 1rpx solid rgba(144, 147, 153, 0.2);
+  border-bottom: 1rpx solid rgba(144, 147, 153, 0.2);
+}
+
+.status-maintenance-badge {
+  background-color: #FEF0F0;
+  color: #F56C6C;
+  border-left: 1rpx solid rgba(245, 108, 108, 0.2);
+  border-bottom: 1rpx solid rgba(245, 108, 108, 0.2);
+}
+
+/* 地块统计信息 */
+.block-stats {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-top: 1rpx solid #F0F0F0;
+  padding-top: 20rpx;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  margin-right: 24rpx;
+  font-size: 26rpx;
+  color: #666;
+}
+
+.stat-icon {
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+.online-icon {
+  /* 在线图标使用绿色 */
+  filter: hue-rotate(120deg) saturate(1.2);
+}
+
+.alert-icon {
+  /* 告警图标使用红色 */
+  filter: hue-rotate(0deg) saturate(1.5);
+}
+
+.alert-text {
+  color: #F56C6C;
+}
+
+/* 骨架屏 */
+.skeleton-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.skeleton-box {
+  background-color: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-bottom: 10rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: flex-start;
+}
+
+.skeleton-icon {
+  width: 40rpx;
+  height: 40rpx;
+  background-color: #EEEEEE;
+  border-radius: 8rpx;
+  margin-right: 15rpx;
+}
+
+.skeleton-info {
+  flex: 1;
+}
+
+.skeleton-title {
+  width: 200rpx;
+  height: 32rpx;
+  background-color: #EEEEEE;
+  margin-bottom: 10rpx;
+  border-radius: 4rpx;
+}
+
+.skeleton-detail {
+  width: 300rpx;
+  height: 24rpx;
+  background-color: #EEEEEE;
+  border-radius: 4rpx;
+}
+
+.skeleton-stats {
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #F5F5F5;
+  height: 30rpx;
+  background-color: #EEEEEE;
+  border-radius: 4rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 0;
+}
+
+.empty-image {
+  width: 240rpx;
+  height: 240rpx;
+  margin-bottom: 20rpx;
+  opacity: 0.7;
+}
+
+.empty-text {
+  font-size: 32rpx;
+  color: #666;
+  font-weight: 500;
+  margin-bottom: 10rpx;
+}
+
+.empty-subtext {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 基础图标样式 */
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style> 

static/icons/alert.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2L22 20H2L12 2Z" fill="#F56C6C"/>
+  <path d="M12 8v4" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="16" r="1" fill="white"/>
+</svg> 

static/icons/check-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <circle cx="12" cy="12" r="10" fill="#3BB44A"/>
+  <path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

static/icons/device.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <rect x="4" y="4" width="16" height="12" rx="2" ry="2" fill="#666666"/>
+  <rect x="6" y="6" width="12" height="8" rx="1" ry="1" fill="white"/>
+  <circle cx="12" cy="10" r="1.5" fill="#666666"/>
+  <rect x="9" y="17" width="6" height="1" rx="0.5" ry="0.5" fill="#666666"/>
+  <rect x="8" y="19" width="8" height="1" rx="0.5" ry="0.5" fill="#666666"/>
+</svg> 

static/icons/location.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#3BB44A"/>
+  <circle cx="12" cy="9" r="2.5" fill="white"/>
+</svg> 

static/icons/online.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <circle cx="12" cy="12" r="10" fill="#3BB44A"/>
+  <circle cx="12" cy="12" r="3" fill="white"/>
+  <circle cx="12" cy="12" r="1.5" fill="#3BB44A"/>
+</svg>