feat: update assessment portal
This commit is contained in:
+55
-94
@@ -1,99 +1,60 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "_pagination.html" import render_pagination %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<title>预测历史</title>
|
||||
{% set active_page = "history" %}
|
||||
{% block title %}预测历史 | 供水管道健康评估系统{% endblock %}
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#005EB8',
|
||||
primaryDeep: '#0c4188',
|
||||
page: '#f3f5f8',
|
||||
card: '#ffffff',
|
||||
line: '#e5e7eb',
|
||||
textMain: '#0f172a',
|
||||
textSub: '#64748b',
|
||||
blueSoft: '#eaf3ff',
|
||||
bluePanel: '#1d4f9a',
|
||||
outline: '#c7ced8',
|
||||
successSoft: '#e9f8ee',
|
||||
successText: '#16a34a',
|
||||
warnSoft: '#fff4e8',
|
||||
warnText: '#c2410c',
|
||||
dangerSoft: '#fff0f0',
|
||||
dangerText: '#dc2626',
|
||||
lowCard: '#f8fafc'
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ['Manrope', 'Inter', 'sans-serif'],
|
||||
body: ['Inter', 'sans-serif']
|
||||
},
|
||||
boxShadow: {
|
||||
soft: '0 24px 24px -12px rgba(24,28,30,.06)',
|
||||
card: '0 10px 25px rgba(15, 23, 42, .06)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; }
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.30) 1.2px, transparent 0);
|
||||
background-size: 42px 42px;
|
||||
}
|
||||
.panel-frame {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.gradient-board {
|
||||
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
||||
}
|
||||
.spinner {
|
||||
width: 18px; height: 18px; border-radius: 9999px;
|
||||
border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
|
||||
animation: spin .75s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
{% block content %}
|
||||
<div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">预测历史</h1>
|
||||
<p class="mt-2 text-sm text-textSub">查看已上传文件和对应预测报告。</p>
|
||||
</div>
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary">
|
||||
<span class="material-symbols-outlined text-lg">upload_file</span>
|
||||
新建分析
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</head>
|
||||
<body class="bg-page min-h-screen p-8 text-textMain">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-extrabold">预测历史</h1>
|
||||
<a href="{{ url_for('main.home') }}" class="px-4 py-2 rounded-lg border border-slate-200 bg-white">返回主页</a>
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
{% for record in records %}
|
||||
<div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-card flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<div class="font-bold">{{ record.original_filename }}</div>
|
||||
<div class="text-sm text-textSub mt-1">{{ record.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a class="px-4 py-2 rounded-lg border border-slate-200 bg-white" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">原始文件</a>
|
||||
<a class="px-4 py-2 rounded-lg bg-primary text-white" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">预测结果</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-white rounded-2xl border border-slate-200 p-10 text-center text-textSub">还没有历史记录。</div>
|
||||
{% endfor %}
|
||||
<section class="flex h-[1152px] flex-col rounded-lg border border-line bg-white shadow-panel">
|
||||
<div class="border-b border-line px-5 py-4">
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h2 class="text-lg font-extrabold">上传记录</h2>
|
||||
{% if pagination.total %}
|
||||
<span class="text-sm text-textSub">共 {{ pagination.total }} 条</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div class="h-[1040px] shrink-0 divide-y divide-line overflow-y-auto">
|
||||
{% for record in records %}
|
||||
<div class="flex min-h-[104px] flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between">
|
||||
<div class="min-w-0">
|
||||
<div class="truncate font-bold">{{ record.original_filename }}</div>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-2 text-sm text-textSub">
|
||||
<span>{{ record.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
<span class="hidden sm:inline">·</span>
|
||||
<span>记录 #{{ record.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a class="ui-btn ui-btn-sm ui-btn-secondary" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">
|
||||
<span class="material-symbols-outlined text-lg">description</span>
|
||||
原始文件
|
||||
</a>
|
||||
<a class="ui-btn ui-btn-sm ui-btn-primary" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">
|
||||
<span class="material-symbols-outlined text-lg">download</span>
|
||||
预测结果
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex h-full min-h-[520px] flex-col items-center justify-center p-10 text-center">
|
||||
<span class="material-symbols-outlined text-5xl text-primary">history</span>
|
||||
<h2 class="mt-4 text-xl font-extrabold">还没有历史记录</h2>
|
||||
<p class="mt-2 text-sm text-textSub">上传数据并完成预测后，记录会显示在这里。</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ render_pagination(pagination, 'main.history_page') }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user