pest_admin/src/views/orchardScreen/components/SoilInfo.vue

<!--
 * @Author: chris
 * @Date: 2025-08-25 15:51:13
 * @LastEditors: chris
 * @LastEditTime: 2025-09-03 14:22:30
-->
<script setup>
import ModuleTitle from './moduleTitle.vue';
import { 
  Sunny
} from '@element-plus/icons-vue';

// 土壤数据 - 使用土壤设备常用的7个参数
const soilData = ref([
  {
    id: 'temperature',
    name: '土壤温度',
    value: '22.5',
    unit: '°C',
    icon: 'turangwendu',
    color: '#ff7a45',
    status: 'normal',
    description: '适宜作物生长'
  },
  {
    id: 'moisture',
    name: '土壤湿度',
    value: '65',
    unit: '%',
    icon: 'turangshidu',
    color: '#4096ff',
    status: 'normal',
    description: '湿润度良好'
  },
  {
    id: 'ec',
    name: '电导率',
    value: '0.8',
    unit: 'mS/cm',
    icon: 'turangdiandaoshuai',
    color: '#73d13d',
    status: 'normal',
    description: '盐分适中'
  },
  {
    id: 'ph',
    name: '土壤pH值',
    value: '6.8',
    unit: '',
    icon: 'suanjiandu',
    color: '#ff9800',
    status: 'normal',
    description: '酸碱度适宜'
  },
  {
    id: 'nitrogen',
    name: '氮含量',
    value: '35',
    unit: 'mg/kg',
    icon: 'turangdanhanliang',
    color: '#fa541c',
    status: 'normal',
    description: '肥力良好'
  },
  {
    id: 'phosphorus',
    name: '磷含量',
    value: '22',
    unit: 'mg/kg',
    icon: 'turanglinhanliang',
    color: '#9c27b0',
    status: 'normal',
    description: '含量适中'
  },
  {
    id: 'potassium',
    name: '钾含量',
    value: '85',
    unit: 'mg/kg',
    icon: 'turangjiahanliang',
    color: '#2196f3',
    status: 'normal',
    description: '钾素充足'
  }
]);

// 状态颜色映射
const statusColors = {
  normal: '#52c41a',
  warning: '#faad14',
  danger: '#ff4d4f'
};
</script>

<template>
  <div class="soil-info">
    <ModuleTitle class="soil-title" title="土壤信息" icon="duocengturangshangqing" />
    <div class="soil-data-grid">
      <div 
        v-for="item in soilData"
        :key="item.id"
        class="soil-data-card"
      >
        <div class="soil-data-icon" :style="{ backgroundColor: item.color + '20' }">
          <svg-icon class="item-icon" :icon-class="item.icon" :color="item.color"/>
        </div>
        
        <div class="soil-data-content">
          <div class="soil-data-value-group">
            <span class="soil-data-value">{{ item.value }}</span>
            <span class="soil-data-unit">{{ item.unit }}</span>
          </div>
          <div class="soil-data-name">{{ item.name }}</div>
          <!-- <div class="soil-data-status" :style="{ color: statusColors[item.status] }">
            {{ item.description }}
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 定义SCSS变量
$primary-color: #4dabf7;
$border-radius: 6px;
$transition: all 0.3s ease;

.soil-info {
  @apply h-full p-20px overflow-hidden flex flex-col;
}

.soil-title {
  @apply mb-10px;
}
// 土壤数据网格布局
.soil-data-grid {
  @apply grid grid-cols-3 gap-1 flex-1 overflow-auto p-1 h-full;
  // 自定义滚动条
  &::-webkit-scrollbar {
    @apply w-1;
  }
  &::-webkit-scrollbar-track {
    @apply bg-[rgba(255,255,255,0.05)] rounded-full;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-[rgba(255,255,255,0.2)] rounded-full hover:bg-[rgba(255,255,255,0.3)] transition-colors;
  }
}

// 土壤数据卡片
.soil-data-card {
  @apply px-2.5 py-1.5 rounded-lg border border-transparent cursor-pointer hover:border-[rgba(255,255,255,0.2)] transition-all duration-300 flex items-center gap-1.5;
  background: rgba(255, 255, 255, 0.08);
  min-height: 48px;
}

// 土壤数据图标
.soil-data-icon {
  @apply w-50px h-50px rounded-full flex items-center justify-center flex-shrink-0;

  .item-icon {
    @apply w-26px h-26px;
  }
}

// 土壤数据内容
.soil-data-content {
  @apply flex-1 min-w-0 flex flex-col justify-between;
}

.soil-data-value-group {
  @apply flex items-baseline gap-1;
}

.soil-data-value {
  @apply text-lg font-bold text-white;
}

.soil-data-unit {
  @apply text-xs text-[#a0a0a0];
}

.soil-data-name {
  @apply text-sm font-medium text-white mt-0.5;
}

.soil-data-status {
  @apply text-xs mt-0.5;
}
</style>