bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>销售目标 - 轻量 CRM</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @media (max-width: 640px) {
      .mobile-stack { flex-direction: column !important; }
      .mobile-full { width: 100% !important; }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 顶部导航 -->
  <nav class="bg-indigo-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <span class="text-2xl">📊</span>
          <h1 class="text-xl font-bold">轻量 CRM</h1>
        </div>
        <div class="flex space-x-4">
          <a href="/" class="hover:bg-indigo-500 px-3 py-2 rounded">首页</a>
          <a href="/customers" class="hover:bg-indigo-500 px-3 py-2 rounded">客户</a>
          <a href="/leads" class="hover:bg-indigo-500 px-3 py-2 rounded">线索</a>
          <a href="/public-pool" class="hover:bg-indigo-500 px-3 py-2 rounded">公海池</a>
          <a href="/sales-target" class="bg-indigo-500 px-3 py-2 rounded">销售目标</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="mb-8">
      <h2 class="text-3xl font-bold text-gray-800">🎯 销售目标</h2>
      <p class="text-gray-600 mt-2">跟踪销售业绩，达成目标</p>
    </div>

    <!-- 今日目标 -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h3 class="text-xl font-semibold mb-4">📅 今日目标</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="text-center p-4 bg-blue-50 rounded-lg">
          <p class="text-gray-500 text-sm">新增客户</p>
          <p id="todayNew" class="text-3xl font-bold text-blue-600 mt-2">-</p>
          <p class="text-xs text-gray-400 mt-1">目标：5</p>
          <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
            <div id="todayNewProgress" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>
        <div class="text-center p-4 bg-green-50 rounded-lg">
          <p class="text-gray-500 text-sm">客户跟进</p>
          <p id="todayFollowups" class="text-3xl font-bold text-green-600 mt-2">-</p>
          <p class="text-xs text-gray-400 mt-1">目标：10</p>
          <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
            <div id="todayFollowupsProgress" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>
        <div class="text-center p-4 bg-purple-50 rounded-lg">
          <p class="text-gray-500 text-sm">线索转化</p>
          <p id="todayConverted" class="text-3xl font-bold text-purple-600 mt-2">-</p>
          <p class="text-xs text-gray-400 mt-1">目标：3</p>
          <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
            <div id="todayConvertedProgress" class="bg-purple-600 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 本周目标 -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h3 class="text-xl font-semibold mb-4">📊 本周目标</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="text-center p-4 bg-indigo-50 rounded-lg">
          <p class="text-gray-500 text-sm">新增客户</p>
          <p id="weekNew" class="text-3xl font-bold text-indigo-600 mt-2">-</p>
          <p class="text-xs text-gray-400 mt-1">目标：20</p>
          <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
            <div id="weekNewProgress" class="bg-indigo-600 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>
        <div class="text-center p-4 bg-teal-50 rounded-lg">
          <p class="text-gray-500 text-sm">客户跟进</p>
          <p id="weekFollowups" class="text-3xl font-bold text-teal-600 mt-2">-</p>
          <p class="text-xs text-gray-400 mt-1">目标：50</p>
          <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
            <div id="weekFollowupsProgress" class="bg-teal-600 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 本月目标 -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h3 class="text-xl font-semibold mb-4">📈 本月目标</h3>
      <div class="text-center p-4 bg-orange-50 rounded-lg">
        <p class="text-gray-500 text-sm">新增客户</p>
        <p id="monthNew" class="text-3xl font-bold text-orange-600 mt-2">-</p>
        <p class="text-xs text-gray-400 mt-1">目标：80</p>
        <div class="w-full bg-gray-200 rounded-full h-3 mt-2">
          <div id="monthNewProgress" class="bg-orange-600 h-3 rounded-full" style="width: 0%"></div>
        </div>
      </div>
    </div>

    <!-- 累计转化 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="text-xl font-semibold mb-4">🏆 累计成就</h3>
      <div class="text-center">
        <p class="text-gray-500 text-sm">线索转化总数</p>
        <p id="totalConverted" class="text-4xl font-bold text-yellow-600 mt-2">-</p>
      </div>
    </div>
  </main>

  <script>
    const API_BASE = '';
    const TARGETS = {
      todayNew: 5,
      todayFollowups: 10,
      todayConverted: 3,
      weekNew: 20,
      weekFollowups: 50,
      monthNew: 80
    };

    // 加载销售目标数据
    async function loadSalesTarget() {
      try {
        const res = await fetch(`${API_BASE}/api/stats/sales`);
        const data = await res.json();
        if (data.success) {
          const d = data.data;
          
          // 今日
          document.getElementById('todayNew').textContent = d.todayNew;
          document.getElementById('todayFollowups').textContent = d.todayFollowups;
          document.getElementById('todayConverted').textContent = d.convertedLeads;
          
          // 本周
          document.getElementById('weekNew').textContent = d.weekNew;
          document.getElementById('weekFollowups').textContent = d.weekFollowups;
          
          // 本月
          document.getElementById('monthNew').textContent = d.monthNew;
          
          // 累计
          document.getElementById('totalConverted').textContent = d.convertedLeads;
          
          // 进度条
          updateProgress('todayNewProgress', d.todayNew, TARGETS.todayNew);
          updateProgress('todayFollowupsProgress', d.todayFollowups, TARGETS.todayFollowups);
          updateProgress('todayConvertedProgress', d.convertedLeads, TARGETS.todayConverted);
          updateProgress('weekNewProgress', d.weekNew, TARGETS.weekNew);
          updateProgress('weekFollowupsProgress', d.weekFollowups, TARGETS.weekFollowups);
          updateProgress('monthNewProgress', d.monthNew, TARGETS.monthNew);
        }
      } catch (error) {
        console.error('加载失败:', error);
      }
    }

    // 更新进度条
    function updateProgress(elementId, current, target) {
      const percentage = Math.min(100, Math.round((current / target) * 100));
      document.getElementById(elementId).style.width = percentage + '%';
    }

    // 页面加载
    document.addEventListener('DOMContentLoaded', loadSalesTarget);
  </script>
</body>
</html>