数据可视化补充

2025-11-15 09:28:25 +08:00
parent 31c0371da3
commit 40317b47ec
2 changed files with 157 additions and 14 deletions
--- a/main/templates/main/home.html
+++ b/main/templates/main/home.html
@@ -2,24 +2,41 @@
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
-    <title>主页</title>
+    <title>紫金·稷下薪火·云枢智海师生成果共创系统</title>
    <style>
-        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #fafafa; }
-        .container { max-width: 720px; margin: 8vh auto; padding: 24px; }
-        .card { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 24px; }
+        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #f5f7fb; color:#1f2328; }
+        .container { max-width: 1120px; margin: 6vh auto; padding: 24px; }
+        .card { background: #fff; border-radius: 14px; box-shadow: 0 10px 24px rgba(31,35,40,0.08); padding: 20px; transition: transform .25s ease, box-shadow .25s ease; }
+        .card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(31,35,40,0.10); }
+        .grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
+        .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
+        h2 { margin:0 0 8px; font-weight:600; }
+        .muted { color:#6b7280; font-size:12px; }
+        .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
+        .badge { background:#eef2ff; color:#3730a3; border-radius:999px; padding:4px 10px; font-size:12px; }
+        .legend { display:flex; gap:12px; align-items:center; }
+        .legend .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
+        .topbar { background: linear-gradient(90deg,#4f46e5,#06b6d4); color:#fff; padding:14px 24px; box-shadow: 0 6px 18px rgba(31,35,40,0.12); }
+        .topbar h1 { margin:0; font-size:18px; font-weight:600; letter-spacing:0.5px; }
+        .nav-item a { display:block; padding:8px 10px; border-radius:8px; transition: background .2s ease, transform .2s ease; }
+        .nav-item a:hover { background:#eff6ff; transform: translateX(2px); }
+        .btn { padding:8px 12px; border:none; border-radius:8px; cursor:pointer; }
+        .btn-primary { background:#4f46e5; color:#fff; }
+        .btn-primary:hover { filter: brightness(1.05); }
    </style>
    {% csrf_token %}
    <!-- CSRF token to assist logout POST via cookie/header -->
 </head>
 <body>
+<div class="topbar"><h1>紫金·稷下薪火·云枢智海师生成果共创系统</h1></div>
 <div class="container" style="display:flex; gap:16px;">
-    <aside style="width:220px; background:#fff; border-radius:10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding:16px; height: fit-content;">
+    <aside style="width:240px; background:#fff; border-radius:14px; box-shadow: 0 10px 24px rgba(31,35,40,0.08); padding:16px; height: fit-content;">
        <h3 style="margin-top:0; font-size:16px;">导航</h3>
        <nav>
            <ul style="list-style:none; padding-left:0; line-height:1.9;">
-                <li><a href="/" style="text-decoration:none; color:#1677ff;">主页</a></li>
-                <li><a href="/elastic/upload-page/" style="text-decoration:none; color:#1677ff;">图片上传与识别</a></li>
-                <li><a href="/elastic/manage/" style="text-decoration:none; color:#1677ff;">数据管理（管理员）</a></li>
+                <li class="nav-item"><a href="/" style="text-decoration:none; color:#1677ff;">主页</a></li>
+                <li class="nav-item"><a href="/elastic/upload-page/" style="text-decoration:none; color:#1677ff;">图片上传与识别</a></li>
+                <li class="nav-item"><a href="/elastic/manage/" style="text-decoration:none; color:#1677ff;">数据管理（管理员）</a></li>
            </ul>
        </nav>
        <hr/>
@@ -27,11 +44,43 @@
        <div id="logoutMsg" class="muted" style="margin-top:8px;"></div>
    </aside>

-    <div class="card" style="flex:1;">
-        <h2>主页（留白）</h2>
-        <p>用户ID：{{ user_id }}</p>
-        <p>这里留白即可，主页不由当前实现负责。</p>
-        <p class="muted">提示：已使用安全的会话 Cookie 管理登录状态。</p>
+    <div style="flex:1; display:flex; flex-direction:column; gap:16px;">
+        <div class="card">
+            <div class="header">
+                <h2>数据概览</h2>
+                <div style="display:flex; gap:8px; align-items:center;">
+                    <span class="badge">用户：{{ user_id }}</span>
+                    {% if is_admin %}
+                    <button id="triggerAnalyze" class="btn btn-primary">手动开始分析</button>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="grid-3">
+                <div>
+                    <div class="legend"><span class="dot" style="background:#4f46e5;"></span><span class="muted">最近十天录入</span></div>
+                    <canvas id="chartDays" height="140"></canvas>
+                </div>
+                <div>
+                    <div class="legend"><span class="dot" style="background:#16a34a;"></span><span class="muted">最近十周录入</span></div>
+                    <canvas id="chartWeeks" height="140"></canvas>
+                </div>
+                <div>
+                    <div class="legend"><span class="dot" style="background:#ea580c;"></span><span class="muted">最近十个月录入</span></div>
+                    <canvas id="chartMonths" height="140"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid">
+            <div class="card">
+                <div class="header"><h2>近1个月成果类型</h2></div>
+                <canvas id="pie1m" height="200"></canvas>
+            </div>
+            <div class="card">
+                <div class="header"><h2>近12个月成果类型</h2></div>
+                <canvas id="pie12m" height="200"></canvas>
+            </div>
+        </div>
    </div>
    
    <script>
@@ -66,6 +115,92 @@
        }
    });
    </script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+    async function loadAnalytics() {
+        const resp = await fetch('/elastic/analytics/overview/');
+        const d = await resp.json();
+        if (!resp.ok || d.status !== 'success') return;
+        const data = d.data || {};
+        renderLine('chartDays', data.last_10_days || [], '#4f46e5');
+        renderLine('chartWeeks', data.last_10_weeks || [], '#16a34a');
+        renderLine('chartMonths', data.last_10_months || [], '#ea580c');
+        renderPie('pie1m', data.type_pie_1m || []);
+        renderPie('pie12m', data.type_pie_12m || []);
+    }
+
+    const btn = document.getElementById('triggerAnalyze');
+    if (btn) {
+        btn.addEventListener('click', async () => {
+            btn.disabled = true;
+            btn.textContent = '分析中…';
+            try {
+                const resp = await fetch('/elastic/analytics/overview/?force=1');
+                const d = await resp.json();
+                if (!resp.ok || d.status !== 'success') throw new Error('分析失败');
+                window.location.reload();
+            } catch (e) {
+                btn.textContent = '重试';
+                btn.disabled = false;
+            }
+        });
+    }
+
+    function hexWithAlpha(hex, alphaHex) {
+        if (!hex || !hex.startsWith('#')) return hex;
+        if (hex.length === 7) return hex + alphaHex;
+        return hex;
+    }
+    function renderLine(id, items, color) {
+        const ctx = document.getElementById(id);
+        const labels = items.map(x => x.label);
+        const values = items.map(x => x.count);
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    data: values,
+                    borderColor: color,
+                    backgroundColor: hexWithAlpha(color, '26'),
+                    tension: 0.25,
+                    fill: true,
+                    pointRadius: 3,
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: { legend: { display: false } },
+                animation: { duration: 800, easing: 'easeOutQuart' },
+                scales: {
+                    x: { grid: { display: false } },
+                    y: { grid: { color: 'rgba(31,35,40,0.06)' }, beginAtZero: true }
+                }
+            }
+        });
+    }
+
+    function renderPie(id, items) {
+        const ctx = document.getElementById(id);
+        const labels = items.map(x => x.type);
+        const values = items.map(x => x.count);
+        const colors = ['#2563eb','#22c55e','#f59e0b','#ef4444','#a855f7','#06b6d4','#84cc16','#ec4899','#475569','#d946ef'];
+        new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels,
+                datasets: [{ data: values, backgroundColor: colors.slice(0, labels.length) }]
+            },
+            options: {
+                responsive: true,
+                animation: { duration: 900, easing: 'easeOutQuart' },
+                plugins: { legend: { position: 'bottom' } }
+            }
+        });
+    }
+
+    loadAnalytics();
+    </script>

 </div>
 </body>
--- a/main/views.py
+++ b/main/views.py
@@ -1,5 +1,6 @@
 from django.shortcuts import render, redirect
 from django.views.decorators.http import require_http_methods
+from elastic.es_connect import get_user_by_id


@require_http_methods(["GET"])
@@ -11,7 +12,14 @@ def home(request):

    # Show user_id (prefer query param if present, but don't trust it)
    user_id_qs = request.GET.get("user_id")
+    uid = user_id_qs or session_user_id
+    perm = request.session.get("permission")
+    if perm is None and uid is not None:
+        u = get_user_by_id(uid)
+        perm = (u or {}).get("permission", 1)
+        request.session["permission"] = perm
    context = {
-        "user_id": user_id_qs or session_user_id,
+        "user_id": uid,
+        "is_admin": (perm == 0),
    }
    return render(request, "main/home.html", context)