nongxiaoyu/pages/plots/list.vue

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