|
|
<!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> |
