| <!DOCTYPE html> |
| <html lang="zh-TW"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ASR 後台管理系統 - 報表下載</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .sidebar-collapsed { |
| width: 64px; |
| } |
| .main-content { |
| transition: all 0.3s ease; |
| } |
| .content-expanded { |
| margin-left: 64px; |
| } |
| .nav-item.active { |
| background-color: rgba(59, 130, 246, 0.1); |
| border-left: 4px solid #3b82f6; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900"> |
| <div class="flex h-screen"> |
| |
| <div class="sidebar bg-white dark:bg-gray-800 shadow-lg w-64 sidebar-collapsed" id="sidebar"> |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between"> |
| <h1 class="text-xl font-bold text-gray-800 dark:text-white">ASR系統</h1> |
| <button id="toggleSidebar" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| |
| <nav class="mt-6"> |
| <a href="index.html" class="nav-item flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700"> |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> |
| <span class="font-medium">主控台</span> |
| </a> |
| <a href="reports.html" class="nav-item active flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700"> |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i> |
| <span class="font-medium">報表下載</span> |
| </a> |
| <a href="customers.html" class="nav-item flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700"> |
| <i data-feather="users" class="w-5 h-5 mr-3"></i> |
| <span class="font-medium">客戶管理</span> |
| </a> |
| </nav> |
| </div> |
|
|
| |
| <div class="main-content flex-1 overflow-auto"> |
| |
| <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700"> |
| <div class="px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h1 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center"> |
| <i data-feather="bar-chart-2" class="w-6 h-6 mr-2"></i> |
| 報表下載 |
| </h1> |
| <p class="text-gray-600 dark:text-gray-400 mt-1">下載 ASR 系統的任務報表資料</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center"> |
| <span class="text-white text-sm font-medium">A</span> |
| </div> |
| <span class="text-gray-700 dark:text-gray-300 font-medium">管理員</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6" data-aos="fade-up"> |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">報表篩選條件</h2> |
| |
| <div class="space-y-6"> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">日期範圍</label> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">起始日期</label> |
| <input type="text" id="startDate" placeholder="選擇起始日期" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"> |
| </div> |
| <div> |
| <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">結束日期</label> |
| <input type="text" id="endDate" placeholder="選擇結束日期" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"> |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">格式：YYYY/MM/DD，最大範圍：720天</p> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">報表類型</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="all" selected>全部（合併兩種任務）</option> |
| <option value="file">檔案任務 (File Tasks)</option> |
| <option value="streaming">串流任務 (Streaming Tasks)</option> |
| </select> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">客戶篩選</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="all" selected>全部客戶</option> |
| </select> |
| </div> |
|
|
| |
| <div class="pt-4 border-t border-gray-200 dark:border-gray-600"> |
| <button id="downloadBtn" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center"> |
| <i data-feather="download" class="w-5 h-5 mr-2"></i> |
| 下載 Excel 報表 |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| AOS.init({ |
| duration: 800, |
| once: true |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| document.getElementById('toggleSidebar').addEventListener('click', function() { |
| const sidebar = document.getElementById('sidebar'); |
| const mainContent = document.querySelector('.main-content'); |
| |
| sidebar.classList.toggle('sidebar-collapsed'); |
| mainContent.classList.toggle('content-expanded'); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const currentPage = window.location.pathname.split('/').pop() || 'index.html'; |
| const navItems = document.querySelectorAll('.nav-item'); |
| |
| navItems.forEach(item => { |
| item.classList.remove('active'); |
| const href = item.getAttribute('href'); |
| if (href === currentPage) { |
| item.classList.add('active'); |
| } |
| }); |
| }); |
| |
| |
| function initializeDatePickers() { |
| const startDatePicker = flatpickr("#startDate", { |
| dateFormat: "Y/m/d", |
| locale: "zh", |
| allowInput: true, |
| clickOpens: true, |
| onChange: function(selectedDates, dateStr, instance) { |
| if (selectedDates.length > 0) { |
| const maxDate = new Date(selectedDates[0]); |
| maxDate.setDate(maxDate.getDate() + 720); |
| |
| endDatePicker.set('minDate', selectedDates[0]); |
| endDatePicker.set('maxDate', maxDate); |
| |
| if (endDatePicker.selectedDates.length > 0) { |
| validateDateRange(selectedDates[0], endDatePicker.selectedDates[0]); |
| } |
| } |
| } |
| }); |
| |
| const endDatePicker = flatpickr("#endDate", { |
| dateFormat: "Y/m/d", |
| locale: "zh", |
| allowInput: true, |
| clickOpens: true, |
| onChange: function(selectedDates, dateStr, instance) { |
| if (selectedDates.length > 0 && startDatePicker.selectedDates.length > 0) { |
| validateDateRange(startDatePicker.selectedDates[0], selectedDates[0]); |
| } |
| } |
| }); |
| } |
| |
| |
| function validateDateRange(startDate, endDate) { |
| if (startDate && endDate) { |
| const diffTime = Math.abs(endDate - startDate); |
| const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); |
| |
| if (diffDays > 720) { |
| alert('日期範圍不能超過720天'); |
| document.getElementById('endDate').value = ''; |
| return false; |
| } |
| } |
| return true; |
| } |
| |
| |
| document.getElementById('downloadBtn').addEventListener('click', function() { |
| const startDate = document.getElementById('startDate').value; |
| const endDate = document.getElementById('endDate').value; |
| |
| if (!startDate || !endDate) { |
| alert('請選擇起始日期和結束日期'); |
| return; |
| } |
| |
| const startDateObj = new Date(startDate); |
| const endDateObj = new Date(endDate); |
| |
| if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) { |
| alert('日期格式不正確，請確認選擇的日期'); |
| return; |
| } |
| |
| if (!validateDateRange(startDateObj, endDateObj)) { |
| return; |
| } |
| |
| |
| alert(`報表下載中...\n日期範圍: ${startDate} - ${endDate}`); |
| |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| initializeDatePickers(); |
| }); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
