nongxiaoyu/pages/device/device-list/index.vue

<template>
  <view class="container">
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box" :class="{ 'search-focus': isSearchFocused }">
        <view class="search-icon">
          <!-- <text class="iconfont icon-search"></text> -->
		  <image src="@/static/icons/search.png" style="width: 40rpx; height: 40rpx; padding-right: 10rpx;"
		  	mode="widthFix" />
        </view>
        <input 
          class="search-input" 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索设备名称 / 编号"
          confirm-type="search"
          @confirm="onSearch"
          @focus="isSearchFocused = true"
          @blur="isSearchFocused = false"
        />
        <view class="clear-icon" v-if="searchKey" @click="clearSearch">
          <text class="iconfont icon-close"></text>
        </view>
      </view>
    </view>
    
    <!-- 状态筛选区域 -->
    <view class="filter-section">
      <view 
        class="filter-item" 
        :class="{ active: currentStatus === -1 }" 
        @click="selectStatus(-1)"
      >
        全部
      </view>
      <view 
        class="filter-item" 
        :class="{ active: currentStatus === 1 }" 
        @click="selectStatus(1)"
      >
        <view class="filter-dot online-dot"></view>
        在线 ({{ onlineDevices }})
      </view>
      <view 
        class="filter-item" 
        :class="{ active: currentStatus === 0 }" 
        @click="selectStatus(0)"
      >
        <view class="filter-dot offline-dot"></view>
        离线 ({{ offlineDevices }})
      </view>
<!--      <view 
        class="filter-item" 
        :class="{ active: currentStatus === 2 }" 
        @click="selectStatus(2)"
      >
        <view class="filter-dot fault-dot"></view>
        故障 ({{ getStatusCount(2) }})
      </view> -->
    </view>
    
    <!-- 设备列表区域 -->
    <scroll-view 
      scroll-y 
      class="device-list" 
      @scrolltolower="onReachBottom"
      :scroll-with-animation="true"
      :enable-back-to-top="true"
      :refresher-enabled="true"
      :refresher-threshold="80"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="handleRefresh"
      @refresherrestore="isRefreshing = false"
    >
      <!-- 无数据提示 -->
      <view v-if="deviceList.length === 0 && !loading" class="empty-tips">
        <view class="empty-icon">
          <text class="iconfont icon-empty"></text>
        </view>
        <text class="empty-text">{{ searchKey ? '未找到匹配的设备' : '暂无设备' }}</text>
        <view v-if="searchKey" class="empty-action" @click="clearSearch">
          <text>清除搜索条件</text>
        </view>
      </view>
      
      <!-- 首次加载中状态 -->
      <view v-if="loading && deviceList.length === 0" class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 设备列表 -->
      <view 
        v-for="(item, index) in deviceList" 
        :key="index"
        class="device-card"
        :class="{
          'has-alert': item.hasAlert,
          'is-offline': item.status === 0
        }"
        hover-class="device-card-hover"
        hover-stay-time="70"
        @click="navigateToDeviceDetail(item)"
      >
        <!-- 设备基本信息 -->
        <view class="device-info">
          <view class="device-icon-wrapper">
            <!-- 告警标记 -->
            <view v-if="item.hasAlert" class="alarm-badge">
              1
            </view>
            
            <view class="device-icon-container" :class="{'offline-icon': item.status === 0}">
              <image :src="getDeviceTypeIcon(item.deviceTypeId)" mode="aspectFit" class="device-icon"></image>
            </view>
          </view>
          
          <view class="device-meta">
            <view class="device-name-row">
              <text class="device-name" :class="{'offline-text': item.status === 0}">{{ item.deviceName }}</text>
              <view 
                class="status-tag" 
                :class="{
                  'status-online': item.status === 1,
                  'status-offline': item.status === 0,
                  'status-fault': item.status === 2,
                  'status-maintain': item.status === 3
                }"
              >
                <text class="status-dot" :class="{
                  'offline-dot': item.status === 0,
                  'fault-dot': item.status === 2,
                  'maintain-dot': item.status === 3
                }"></text>
                {{ getStatusText(item.status) }}
              </view>
            </view>
            
            <view class="device-id">
              <text class="id-label">设备编号：</text>
              <text class="id-value">{{ item.deviceId }}</text>
            </view>
            
            <view class="device-location">
              <text class="location-label">安装位置：</text>
              <text class="location-value">{{ item.fieldName || '未指定位置' }}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部信息栏 -->
        <view class="device-footer">
          <text class="update-time">最后活跃: {{ formatDate(item.lastActiveTime) }}</text>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view v-if="deviceList.length > 0" class="load-more">
        <view class="load-more-content" v-if="loadMoreStatus === 'loading'">
          <view class="loading-icon"></view>
          <text>正在加载...</text>
        </view>
        <view class="load-more-content" v-if="loadMoreStatus === 'noMore'">
          <text>没有更多了</text>
        </view>
        <view class="load-more-content" v-if="loadMoreStatus === 'more'" @click="onReachBottom">
          <text>点击加载更多</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { fetchDevicesByType } from "@/api/services/device.js";
import storage from "@/utils/storage.js";

export default {
  data() {
    return {
      deviceType: '', // monitor, sensor, control, irrigation, tractor
      deviceTypeName: '',
      deviceList: [],
      searchKey: '',
      isSearchFocused: false,
      currentStatus: -1, // -1代表全部
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      isRefreshing: false,
      loadMoreStatus: 'more', // 加载更多状态: more-加载更多 loading-加载中 noMore-没有更多了
      deviceTypeMap: {
        'monitor': { name: '监控设备', icon: '/static/icons/camera.png', class: 'type-monitor' },
        'sensor': { name: '采集设备', icon: '/static/icons/sensor.png', class: 'type-sensor' },
        'control': { name: '控制设备', icon: '/static/icons/control.png', class: 'type-control' },
        'irrigation': { name: '灌溉设备', icon: '/static/icons/water.png', class: 'type-irrigation' },
        'tractor': { name: '农机设备', icon: '/static/icons/tractor.png', class: 'type-tractor' }
      },
      currentFieldId: null,
	  onlineDevices:0,
	  offlineDevices:0
    };
  },
  
  computed: {
    // 设备类型对应的样式类
    deviceTypeClass() {
      return this.deviceTypeMap[this.deviceType]?.class || '';
    }
  },
  
  onLoad(options) {
    // 获取传递的设备类型
    console.log("options类型：", options);
    const { type, typeOnline, typeOffline } = options;
	// 处理传递过来的统计数量
	this.offlineDevices = typeOffline
	this.onlineDevices = typeOnline
    if (type && this.deviceTypeMap[type]) {
      this.deviceType = type;
      this.deviceTypeName = this.deviceTypeMap[type].name;
    }
    
    // 获取当前地块ID
    this.initFieldInfo();
    
    // 加载设备列表
    this.loadDeviceList();
  },
  
  methods: {
    // 初始化地块信息
    initFieldInfo() {
      const currentPlots = JSON.parse(storage.getPlots() || '{}');
      if (currentPlots) {
        this.currentFieldId = currentPlots.id;
      }
    },
    
    // 获取特定状态的设备数量
    getStatusCount(status) {
      return this.deviceList.filter(device => device.status === status).length;
    },
    
    // 加载设备列表
    loadDeviceList(reset = true) {
      if (this.loading) return;
      
      if (reset) {
        this.pageNum = 1;
        this.deviceList = [];
      }
      
      this.loading = true;
      this.loadMoreStatus = 'loading';
      
      // 构建查询参数
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        deviceQueryParams: this.searchKey || undefined,
        deviceType: this.deviceType || undefined,
        fieldId: this.currentFieldId || undefined
      };
      
      // 如果状态不是全部，添加状态筛选
      if (this.currentStatus !== -1) {
        params.status = this.currentStatus;
      }
      
      // 调用API获取设备列表
      fetchDevicesByType(params)
        .then(res => {
          console.log("res", res);
          if (res.data.code === 200 && res.data.rows) {
            const { rows, total } = res.data;
            
            // 更新设备列表
            if (reset) {
              this.deviceList = rows;
            } else {
              this.deviceList = [...this.deviceList, ...rows];
            }
            
            this.total = total;
			// 为农技增加模拟数据 后续可删除
            if(this.deviceType === 'tractor' ){
            	const newDevices = this.generateMockDevices();
				console.log("newDevices",newDevices);
            	this.deviceList = [...this.deviceList, ...newDevices];
				this.total = this.deviceList.length
            }
			
            // 标记有告警的设备
            this.deviceList.forEach(device => {
              // 这里可以根据实际情况设置hasAlert属性
              device.hasAlert = false; // 示例，实际应该根据后台数据判断
            });
            
            // 更新加载更多状态
            if (this.deviceList.length >= total) {
              this.loadMoreStatus = 'noMore';
            } else {
              this.loadMoreStatus = 'more';
            }
          } else {
            this.handleApiError(res);
          }
        })
        .catch(error => {
          console.error('获取设备列表失败', error);
          uni.showToast({
            title: '获取设备列表失败',
            icon: 'none'
          });
          this.loadMoreStatus = 'more';
        })
        .finally(() => {
          this.loading = false;
          this.isRefreshing = false;
          uni.hideLoading();
        });
    },
    
    // 处理API错误
    handleApiError(res) {
      console.error('API错误', res);
      uni.showToast({
        title: res.msg || '获取数据失败',
        icon: 'none'
      });
    },
    
    // 搜索
    onSearch() {
      this.loadDeviceList();
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKey = '';
      this.loadDeviceList();
    },
    
    // 选择状态
    selectStatus(value) {
      this.currentStatus = value;
      this.loadDeviceList();
    },
    
    // 处理下拉刷新
    handleRefresh() {
      this.isRefreshing = true;
      this.loadDeviceList();
    },
    
    // 跳转到设备详情页
    navigateToDeviceDetail(device) {
		console.log("device",device);
      // 根据设备类型跳转到不同的详情页
      let url = '';
      // 先发送事件
      uni.$emit('passDeviceData', {
        deviceId: device.deviceId,
        deviceTypeId: device.deviceTypeId,
        fieldName: device.fieldName,
        deviceName: device.deviceName
      });
      if (device.deviceTypeId === '2') {
        url = `/pages/device/device-list/detail-camera?id=${device.id}`;
      } else if (device.deviceTypeId === '1' || device.deviceTypeId === '4') {
        // 采集设备跳转到采集设备详情页，同时传递设备编码，便于判断设备子类型
        // url = `/pages/device/device-list/detail-collector?id=${device.deviceId}&deviceTypeId=${device.deviceTypeId}&fieldName=${device.fieldName}&deviceName=${device.deviceName}`;
		url = `/pages/device/device-list/detail-collector`;
      
      } else if (device.type === 'tractor') {
        // 农机设备跳转到农机设备详情页
        url = `/pages/device/device-list/detail-machine?id=${device.id}&deviceId=${device.code}`;
      } else {
        // 其他类型设备暂时使用通用详情页
        url = `/pages/device/device-detail/index?id=${device.id}&type=${device.type}`;
      }
      
      // 先跳转
        uni.navigateTo({
          url: url,
          success: () => {
            // 跳转成功后再发送事件，延迟一点确保页面onLoad注册完成
            setTimeout(() => {
              uni.$emit('passDeviceData', {
                deviceId: device.deviceId,
                deviceTypeId: device.deviceTypeId,
                fieldName: device.fieldName,
                deviceName: device.deviceName,
				status:device.status
              });
            }, 100); // 100ms 通常足够，必要时可加到 200
          },
		  fail: (e)=>{
			  console.log(e);
		  }
        });
    },
    
    // 获取设备类型图标
    getDeviceTypeIcon(typeId) {
      // 根据后端设备类型ID获取对应前端类型的图标
      const typeMapping = {
        '1': 'sensor', // 传感器
        '2': 'monitor', // 摄像头
        '3': 'control', // 控制器
        '4': 'irrigation', // 气象设备/灌溉设备
        '5': 'tractor'  // 农机设备
      };
      
      const frontendType = typeMapping[typeId] || this.deviceType;
      return this.deviceTypeMap[frontendType]?.icon || '/static/icons/device.png';
    },
    
    // 获取设备类型名称
    getDeviceTypeName(typeId) {
      const typeNames = {
        '1': '采集设备',
        '2': '监控设备',
        '3': '控制设备',
        '4': '灌溉设备',
        '5': '农机设备'
      };
      
      return typeNames[typeId] || '未知类型';
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '离线',
        1: '在线',
        2: '故障',
        3: '维护中'
      };
      
      return statusMap[status] || '未知状态';
    },
    
    // 格式化日期
	formatDate(dateStr) {
	  if (!dateStr) return '未知';
	  
	  // 解析为 Date
	  const parsedStr = dateStr.replace(' ', 'T'); 
	  const date = new Date(parsedStr);
	  if (isNaN(date)) return '无效时间';
	  
	  const now = new Date();
	
	  // 计算差时长（分钟）
	  const diff = Math.floor((now - date) / 1000 / 60);
	  
	  if (diff < 1) return '刚刚更新';
	  if (diff < 5) return '1分钟前更新';
	  if (diff < 10) return '5分钟前更新';
	  if (diff < 60) return `${diff}分钟前更新`;
	  
	  if (diff < 120) return '1小时前更新';
	  if (diff < 24 * 60) return `${Math.floor(diff / 60)}小时前更新`;
	  if (diff < 7 * 24 * 60) return `${Math.floor(diff / (60 * 24))}天前更新`;
	  
	  return parsedStr.split('T')[0] + ' 更新';
	},
	// 生成模拟设备数据
	generateMockDevices() {
	  const devices = [];
	  const locations = ['东区A1地块', '西区B2地块', '南区C3地块', '北区D4地块'];
	  const updateTimes = ['刚刚更新', '1分钟前更新', '5分钟前更新', '10分钟前更新', '1小时前更新'];
	  
	  // 根据当前页码和限制数量生成对应数量的模拟数据
	  const startIndex = (this.pageNum - 1) * this.pageSize;
	  for (let i = 0; i < this.pageSize; i++) {
	    const index = startIndex + i;
	    
	    // 如果已经生成了30条数据，则停止
	    if (index >= 30) break;
	    
	    // 对于采集设备类型，生成随机的气象或土壤设备
	    let deviceType = this.deviceType;
	    let deviceCode = `DEV${String(index + 1001).padStart(4, '0')}`;
	    
	    // 如果是采集设备，随机生成气象站或土壤墒情设备
	    if (this.deviceType === 'sensor') {
	      // 随机分配采集设备子类型：气象站或土壤墒情
	      const sensorSubType = Math.random() > 0.5 ? 'weather' : 'soil';
	      deviceCode = sensorSubType === 'weather' ? `W${deviceCode}` : `S${deviceCode}`;
	    }
	    
	    devices.push({
	      id: `device-${index + 1}`,
	      deviceName: `${this.getDeviceTypeName(this.deviceType)}-${index + 1}`,
	      deviceId: deviceCode,
	      type: deviceType,
	      status: Math.random() > 0.3 ? 'online' : 'offline', // 70% 概率在线
	      fieldName: locations[Math.floor(Math.random() * locations.length)],
	      updateTime: updateTimes[Math.floor(Math.random() * updateTimes.length)],
	      alarmCount: Math.random() > 0.7 ? Math.floor(Math.random() * 3) + 1 : 0 // 30% 概率有告警
	    });
	  }
	  
	  return devices;
	},
/*    formatDate(dateStr) {
      if (!dateStr) return '未知';
      
      const date = new Date(dateStr);
      const now = new Date();
      
      // 今天的日期
      if (date.toDateString() === now.toDateString()) {
        return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 一周内
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      const dayDiff = Math.floor((now - date) / (24 * 60 * 60 * 1000));
      if (dayDiff < 7) {
        return `周${days[date.getDay()]} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 超过一周
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    }, */
    
    // 页面上拉触底事件
    onReachBottom() {
      if (this.loadMoreStatus === 'more') {
        this.pageNum++;
        this.loadDeviceList(false);
      }
    }
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.loadDeviceList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  
  // 页面显示
  onShow() {
    uni.setNavigationBarTitle({
      title: this.deviceTypeName || '设备列表'
    });
  }
};
</script>

<style scoped>
/* 图标字体 */
@font-face {
  font-family: "iconfont";
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAOMAAsAAAAACFAAAAM+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqDGIJmATYCJAMUCwwABCAFhGcHRhvqBsgOJaDgwABgBNFYPPy3H/3OSB4kWdI1Pb2QBw8gSpZIsxBFsTCNTIm//9dv/7FzF1E1S9ysIZWDPNdPJdSYbfLy/+fpTTMwKn5ZZ3OImpRUTZ8FHAcYFrLCBqyAHZD3CP9I09oXUgNcDSEAS8oGR507tO6KhRQTNQGQyeNGD8PCkVATUkFYsMgGcuqQ5YiFWruCPAVYnn9f/KGFBQxrghRq0KjzAXS5TP3SHp3ZmXUyEIfTAYDvDEiQARSQiaJjIjKaZiDJ+hpQYnY1i8tK1ZfWl83/fxYLm8TS//EADBBU6C9ghIBwJXxprxqwhC8d6x9AvAB4BcARgGWgRlWY71Cn5I5XvJ5Ot5sXy91Ud9Oj1nXnfbK9vK09bVsrGq2rrB1sxMcbxZmXntbdI8u6cRGhGy9r92Hj7hCjx1G6Dd9G9N6sbSvwVZiw+/hC0D7WFi5tbcltVyPOdqm41HkQr9T0bKFa2zrLLVeKJufZy7vn7aXtY+3XMvl65fJ7wnHT7ZJWozcvrHC5XNnTGy5/0NvX1xdSu8W9Ml0ePXEqZ3Jm0r6SLSdPbJnc27Mm05YsrLjfI8Ypvb5dL5pAj9m5c3Tzw+UvtK/SzO/Vv+Dt/9Lfq3+Xr30Hf9pz0JsnGgsPDBWHv+v12l5zGsE7Pz9A2d0W9WJ2dUZ/a/PkxQW58o/asvHDfyvJEw39G/5zf2p9OmZFYYGKoioVKPzPpwQA0+d2xv7C/aL/Dx/m7QfkjDLZL8AH4F3p+8PBrGIuqFLmM3uqfI6+YxAFCRZWAQ9LM8Q3JuRm2/bCgWEDCgzzIFgrEYk0AxgciQCDtQxgSRr76yYgfkIiHoB0FxGEEKfAEOQMJCHukYj0CQyjPsMQ0oJgyQD6hI6DL3FILJJLiqDqQs9kbYnLnTRuoA+5j7HsWmUJG2QdvdPrY51xR0WpwQZZIJvsGJ8OWYgVpomO28rIDCGTHHGJpqFe7xSPlUXs04FBiQV1FxSCqhboGVlrEldXpOGP94G4Hwydnaj6DjJBj1dvVtZizE8WlMYD9rHWaVsLsmF6QhZEmMDsIk1wOZWLgSHSSTkEJzGNQvvLc3HLFVXz9euBBWkm+YbLZKGH3uISrbIXRuNaAA==');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e6e1";
  font-size: 32rpx;
}

.icon-close:before {
  content: "\e6a7";
  font-size: 28rpx;
}

.icon-right:before {
  content: "\e6a3";
  font-size: 28rpx;
}

.icon-empty:before {
  content: "\e6a9";
  font-size: 80rpx;
}

/* 容器样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F9FCFA;
  padding-bottom: 20rpx;
}

/* 搜索区域 */
.search-section {
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  margin-bottom: 2rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #F7F7F7;
  height: 80rpx;
  border-radius: 40rpx;
  padding: 0 24rpx;
  width: 100%;
  box-sizing: border-box;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.search-box.search-focus {
  border-color: #4CAF50;
  background-color: #FFFFFF;
  box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.1);
}

.search-icon {
  color: #4CAF50;
  width: 60rpx;
  display: flex;
  justify-content: center;
}

.search-input {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
  color: #333333;
}

.clear-icon {
  width: 60rpx;
  display: flex;
  justify-content: center;
  color: #999;
}

/* 状态筛选区域 */
.filter-section {
  display: flex;
  padding: 24rpx 24rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 4;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666666;
  margin-right: 30rpx;
  padding: 12rpx 20rpx;
  border-radius: 30rpx;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: 10rpx;
}

.filter-item.active {
  background-color: #F0F9F0;
  color: #4CAF50;
  font-weight: 500;
}

.filter-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.online-dot {
  background-color: #4CAF50;
  box-shadow: 0 0 6rpx rgba(76, 175, 80, 0.5);
}

.offline-dot {
  background-color: #F56C6C;
  box-shadow: 0 0 6rpx rgba(245, 108, 108, 0.5);
}

.fault-dot {
  background-color: #FF9800;
  box-shadow: 0 0 6rpx rgba(255, 152, 0, 0.5);
}

.maintain-dot {
  background-color: #2196F3;
  box-shadow: 0 0 6rpx rgba(33, 150, 243, 0.5);
}

/* 设备列表区域 */
.device-list {
  flex: 1;
  padding: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 3;
  height: calc(100vh - 220rpx);
}

/* 空数据提示 */
.empty-tips {
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  color: #DDDDDD;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 20rpx;
}

.empty-action {
  font-size: 26rpx;
  color: #4CAF50;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  background-color: rgba(76, 175, 80, 0.1);
}

/* 首次加载中状态 */
.loading-container {
  padding: 80rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #E0E0E0;
  border-top: 4rpx solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

/* 设备卡片 */
.device-card {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.device-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6rpx;
  height: 100%;
  background: linear-gradient(to bottom, #66CC6A, #3BB44A);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.device-card:active::before {
  opacity: 1;
}

.device-card-hover {
  background-color: #f2fef6;
  box-shadow: 0 10rpx 25rpx rgba(59, 180, 74, 0.1);
  transform: translateY(-3rpx);
}

.device-card.has-alert {
  box-shadow: 0 6rpx 20rpx rgba(245, 108, 108, 0.08);
  border: 1rpx solid rgba(245, 108, 108, 0.08);
}

.device-card.has-alert::before {
  background: linear-gradient(to bottom, #FF8F8F, #F56C6C);
}

.device-card.is-offline {
  opacity: 0.9;
}

.device-card.is-offline.device-card-hover {
  background-color: #f5f5f5;
  box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.05);
}

/* 告警角标 */
.alarm-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  min-width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: #F56C6C;
  color: #FFFFFF;
  font-size: 22rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  z-index: 3;
  box-shadow: 0 3rpx 8rpx rgba(245, 108, 108, 0.3);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 设备基本信息 */
.device-info {
  display: flex;
  margin-bottom: 24rpx;
  width: 100%;
}

.device-icon-wrapper {
  position: relative;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.device-icon-container {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6rpx 16rpx rgba(59, 180, 74, 0.2);
  transition: all 0.3s ease;
}

.device-icon-container.offline-icon {
  background: linear-gradient(135deg, #AAB2BD 0%, #656D78 100%);
  box-shadow: 0 6rpx 16rpx rgba(101, 109, 120, 0.2);
}

.device-icon {
  width: 52rpx;
  height: 52rpx;
  filter: brightness(0) invert(1);
}

.device-meta {
  flex: 1;
  width: calc(100% - 120rpx);
  overflow: hidden;
}

.device-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14rpx;
  width: 100%;
}

.device-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #333333;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.device-name.offline-text {
  color: #656D78;
}

.status-tag {
  padding: 6rpx 16rpx 6rpx 32rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
  flex-shrink: 0;
  border: 1rpx solid;
  position: relative;
  overflow: hidden;
}

.status-online {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  border-color: rgba(76, 175, 80, 0.3);
}

.status-offline {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
  border-color: rgba(245, 108, 108, 0.3);
}

.status-fault {
  background-color: rgba(255, 152, 0, 0.1);
  color: #FF9800;
  border-color: rgba(255, 152, 0, 0.3);
}

.status-maintain {
  background-color: rgba(33, 150, 243, 0.1);
  color: #2196F3;
  border-color: rgba(33, 150, 243, 0.3);
}

.status-dot {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background-color: #4CAF50;
  border-radius: 50%;
  top: 50%;
  left: 16rpx;
  transform: translateY(-50%);
  box-shadow: 0 0 4rpx rgba(76, 175, 80, 0.8);
  animation: blink 1.5s infinite;
  display: inline-block;
}

.status-dot.offline-dot {
  background-color: #F56C6C;
  box-shadow: 0 0 4rpx rgba(245, 108, 108, 0.8);
}

.status-dot.fault-dot {
  background-color: #FF9800;
  box-shadow: 0 0 4rpx rgba(255, 152, 0, 0.8);
}

.status-dot.maintain-dot {
  background-color: #2196F3;
  box-shadow: 0 0 4rpx rgba(33, 150, 243, 0.8);
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.device-id, .device-location {
  display: flex;
  font-size: 26rpx;
  margin-top: 10rpx;
  color: #666666;
  width: 100%;
  overflow: hidden;
}

.id-label, .location-label {
  color: #999999;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.id-value, .location-value {
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部信息栏 */
.device-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18rpx;
  border-top: 1rpx solid #F2F2F2;
}

.update-time {
  font-size: 24rpx;
  color: #999999;
}

.device-actions {
  display: flex;
  align-items: center;
  color: #CCCCCC;
}

/* 加载更多区域 */
.load-more {
  padding: 20rpx 0 40rpx;
}

.load-more-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  font-size: 24rpx;
  color: #999999;
}

.loading-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border: 2rpx solid #E0E0E0;
  border-top: 2rpx solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>