nongxiaoyu/pages/device/index.vue

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