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

<!--
 * @Author: chris
 * @Date: 2025-08-25 15:51:13
 * @LastEditors: chris
 * @LastEditTime: 2025-10-14 16:14:16
-->
<script setup>
import ModuleTitle from './moduleTitle.vue';
import { soilDict, soilTypes } from '../config';

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

const props = defineProps({
  soilData: {
    type: Array,
    default: () => [],
  }
})

const formateData = ref({})

const liveData = computed(() => {
  return createLiveData(formateData.value)
});

onMounted(() => {
  formateData.value = formatData(props.soilData)
})

function createLiveData (data) {
  const liveData = []
  Object.keys(data).forEach((type, index) => {
    const dictItem = soilDict[type]
    liveData.push({
      id: index + 1,
      title: dictItem.name,
      type,
      value: data[type][0]?.value || '--',
      icon: dictItem.icon,
      color: dictItem.color,
      unit: dictItem.unit,
    })
  })
  return liveData;
}

function formatData(data) {
  const obj = {};
  const res = {};
  // data.sort((a,b) => soilTypes.indexOf(a.identifier) - soilTypes.indexOf(b.identifier))
  data.forEach(item => {
    const identifier = item.identifier;
    if (!identifier || identifier === 'null') return false;
    obj[identifier] ? obj[identifier].push(item) : (obj[identifier] = [item])
  })
  soilTypes.forEach(type => {
    res[type] = obj[type] || []
  })
  return res;
}
</script>

<template>
  <div class="soil-info">
    <ModuleTitle class="soil-title" title="土壤信息" icon="duocengturangshangqing" />
    <div class="soil-data-grid">
      <div 
        v-for="item in liveData"
        :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.title }}</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>