数据可视化组件 - 工业化农业

<section class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto space-y-8">
    
    <div class="text-center">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-400 mb-2 tracking-tight uppercase">
        Farm Analytics Dashboard
      </h1>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Real-time insights for optimized agricultural operations.
      </p>
    </div>

    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Soil Moisture</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">68%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">+3%</span> last 24h
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Air Temperature</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">24°C</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 110 2H9a1 1 0 01-1-1v-4a1 1 0 112 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-red-500 font-medium">-1°C</span> last hour
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Yield Forecast</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">+15%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">Expected</span> growth
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Water Usage</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3500L</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-yellow-500 font-medium">Steady</span> daily
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>
    </div>

    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Historical Data Trends</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <img src="https://picsum.photos/700/300?random=1" alt="Placeholder chart for historical trends" class="object-cover w-full h-auto rounded-md border border-gray-200 dark:border-gray-700 aspect-[7/3] dark:opacity-80">
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Insights on growth performance over the past quarter.</p>
        </div>
      </div>

      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Crop Health Status</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <img src="https://picsum.photos/150/150?random=2" alt="Healthy crop placeholder" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-full border-4 border-green-500 shadow-md dark:border-green-600">
            <ul class="flex-1 text-gray-700 dark:text-gray-300 leading-relaxed">
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-green-500 rounded-full"></span> All fields showing optimal growth.</li>
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-yellow-500 rounded-full"></span> Minor nutrient variance in Sector B.</li>
              <li class="flex items-center"><span class="w-2 h-2 mr-2 bg-red-500 rounded-full"></span> No critical health alerts detected.</li>
            </ul>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">Regular drone scans provide detailed health assessments.</p>
        </div>
      </div>
    </div>

    
    <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
      <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Resource Allocation Overview</h3>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
      <div class="relative z-10">
        <div class="flex flex-col md:flex-row gap-6 mb-6">
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Water Distribution</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-purple-600 h-4 rounded-full" style="width: 85%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">85% of capacity utilized across all zones.</p>
          </div>
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Equipment Deployment</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-violet-600 h-4 rounded-full" style="width: 70%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">70% of machinery actively deployed or on standby.</p>
          </div>
        </div>
        
        <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-md">
          <h4 class="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">Team Activity</h4>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of John Doe" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>John Doe - Field A Maintenance</span>
              </div>
              <span class="text-sm text-green-600 dark:text-green-400">Active</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Avatar of Jane Smith" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>Jane Smith - QA Check, Sector C</span>
              </div>
              <span class="text-sm text-yellow-600 dark:text-yellow-400">Paused</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</section>