当前位置：首页 > news >正文
坐席业绩可视化分析工具

news 2025/5/10 7:21:20
这个交互式的坐席业绩分析工具具有以下特点：
数据导入功能：支持上传 CSV 文件，自动解析并展示数据
多维度分析：可按日 / 周 / 月分析业绩数据，支持切换不同业绩指标（接通时长 / 外呼次数 / 接通次数）
灵活筛选：可通过勾选坐席姓名筛选数据，支持全选 / 取消全选操作
数据可视化：使用 Chart.js 生成美观的趋势分析图表，支持导出为 PNG、SVG 和 CSV 格式
统计信息：顶部卡片展示关键业绩指标，如平均接通时长、总外呼次数和平均接通率
原始数据查看：点击按钮可查看完整原始数据，并支持导出为 CSV 格式
响应式设计：适配不同屏幕尺寸，在移动设备上也能良好展示
现代化 UI：采用 Tailwind CSS 构建，具有精美的动画和过渡效果
工具内置了示例数据下载功能，您可以先下载示例数据体验功能，再上传自己的业绩数据进行分析。
目标值功能适用于所有业绩指标（接通时长 / 外呼次数 / 接通次数），并且会根据当前选择的时间维度（日 / 周 / 月）自动调整显示。
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>坐席业绩可视化分析工具</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',secondary: '#64748B',accent: '#F97316',success: '#10B981',warning: '#F59E0B',danger: '#EF4444',dark: '#1E293B',light: '#F8FAFC'},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.card-shadow {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}.hover-scale {transition: transform 0.2s ease-in-out;}.hover-scale:hover {transform: scale(1.02);}.checkbox-primary {accent-color: #3B82F6;}.input-focus {@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;}}</style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col"><!-- 顶部导航栏 --><header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300"><div class="container mx-auto px-4 py-3 flex justify-between items-center"><div class="flex items-center space-x-2"><i class="fa-solid fa-chart-line text-primary text-2xl"></i><h1 class="text-xl md:text-2xl font-bold text-gray-800">坐席业绩可视化分析工具</h1></div><div class="flex items-center space-x-4"><div class="hidden md:flex items-center space-x-2 text-sm text-gray-600"><i class="fa-regular fa-clock"></i><span id="current-date">加载中...</span></div><button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors"><i class="fa-solid fa-moon text-gray-600"></i></button></div></div></header><!-- 主内容区 --><main class="flex-grow container mx-auto px-4 py-6"><!-- 文件上传区域 --><section class="bg-white rounded-xl p-6 mb-8 card-shadow hover-scale"><div class="flex flex-col md:flex-row items-center justify-between"><div class="mb-4 md:mb-0"><h2 class="text-xl font-bold mb-2">数据导入</h2><p class="text-gray-600 text-sm">请上传包含坐席业绩数据的CSV文件</p></div><div class="flex items-center space-x-4"><label for="file-upload" class="px-4 py-2 bg-primary text-white rounded-lg cursor-pointer transition-all hover:bg-primary/90 flex items-center space-x-2"><i class="fa-solid fa-upload"></i><span>选择文件</span></label><input id="file-upload" type="file" accept=".csv" class="hidden"><button id="download-sample" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-all flex items-center space-x-2"><i class="fa-solid fa-download"></i><span>下载示例</span></button></div></div><div id="file-info" class="mt-4 hidden"><div class="p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="flex items-center justify-between"><div><h3 class="font-medium text-gray-700" id="file-name">文件名：</h3><p class="text-sm text-gray-500" id="file-size">文件大小：</p></div><button id="remove-file" class="text-red-500 hover:text-red-700 transition-colors"><i class="fa-solid fa-times"></i></button></div><div class="mt-3 flex items-center space-x-3"><div class="w-full bg-gray-200 rounded-full h-2"><div id="upload-progress" class="bg-primary h-2 rounded-full" style="width: 0%"></div></div><span id="progress-text" class="text-sm text-gray-600">0%</span></div></div></div></section><!-- 图表和控制面板 --><div class="grid grid-cols-1 lg:grid-cols-4 gap-6"><!-- 左侧控制面板 --><div class="lg:col-span-1"><div class="bg-white rounded-xl p-6 card-shadow sticky top-24"><h2 class="text-xl font-bold mb-4">数据分析选项</h2><!-- 时间维度选择 --><div class="mb-6"><h3 class="font-medium mb-2 text-gray-700">时间维度</h3><div class="flex flex-wrap gap-2"><button class="time-option px-3 py-1.5 bg-primary text-white rounded-md text-sm" data-period="day">日</button><button class="time-option px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md text-sm" data-period="week">周</button><button class="time-option px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md text-sm" data-period="month">月</button></div></div><!-- 指标选择 --><div class="mb-6"><h3 class="font-medium mb-2 text-gray-700">业绩指标</h3><div class="flex flex-wrap gap-2"><button class="metric-option px-3 py-1.5 bg-primary text-white rounded-md text-sm" data-metric="duration">接通时长</button><button class="metric-option px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md text-sm" data-metric="calls">外呼次数</button><button class="metric-option px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md text-sm" data-metric="connected">接通次数</button></div></div><!-- 目标值设置 --><div class="mb-6"><h3 class="font-medium mb-2 text-gray-700">目标值设置</h3><div class="flex items-center space-x-2"><input type="number" id="target-value" class="flex-grow px-3 py-2 border border-gray-300 rounded-md text-sm input-focus" placeholder="输入目标值"><button id="set-target" class="px-3 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors">设置</button></div><div id="current-target" class="mt-2 text-sm text-gray-600 hidden">当前目标值: <span id="target-value-display">--</span><button id="clear-target" class="ml-2 text-red-500 hover:text-red-700 transition-colors text-xs"><i class="fa-solid fa-times"></i></button></div></div><!-- 坐席选择 --><div><div class="flex justify-between items-center mb-2"><h3 class="font-medium text-gray-700">坐席筛选</h3><div class="text-xs text-gray-500"><span id="selected-agents-count">0</span>/<span id="total-agents-count">0</span></div></div><div class="space-y-2 max-h-[300px] overflow-y-auto pr-2"><div id="agent-list" class="space-y-2"><!-- 坐席列表将通过JS动态生成 --><div class="text-gray-500 text-sm italic">请先上传数据文件</div></div></div><div class="mt-3 flex space-x-2"><button id="select-all" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors">全选</button><button id="deselect-all" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors">取消全选</button></div></div></div></div><!-- 右侧图表展示区 --><div class="lg:col-span-3"><div class="bg-white rounded-xl p-6 mb-6 card-shadow hover-scale"><div class="flex flex-col md:flex-row md:items-center justify-between mb-6"><h2 class="text-xl font-bold mb-2 md:mb-0">业绩趋势分析</h2><div class="flex space-x-3"><button id="export-png" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors flex items-center"><i class="fa-solid fa-download mr-1"></i> PNG</button><button id="export-svg" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors flex items-center"><i class="fa-solid fa-download mr-1"></i> SVG</button><button id="export-csv" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors flex items-center"><i class="fa-solid fa-download mr-1"></i> CSV</button></div></div><div class="relative h-[400px]"><canvas id="performance-chart"></canvas><div id="chart-loading" class="absolute inset-0 flex items-center justify-center bg-white/80 rounded-lg z-10 hidden"><div class="flex flex-col items-center"><div class="w-10 h-10 border-4 border-primary/30 border-t-primary rounded-full animate-spin"></div><p class="mt-3 text-gray-600">数据加载中...</p></div></div><div id="chart-no-data" class="absolute inset-0 flex flex-col items-center justify-center bg-white/80 rounded-lg z-10 hidden"><i class="fa-solid fa-chart-line text-6xl text-gray-300 mb-4"></i><p class="text-gray-500">暂无数据可显示</p><p class="text-gray-400 text-sm mt-2">请上传数据文件并选择坐席</p></div></div></div><!-- 统计信息卡片 --><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><div class="bg-white rounded-xl p-6 card-shadow hover-scale"><div class="flex items-start justify-between"><div><p class="text-gray-500 text-sm">平均接通时长</p><h3 class="text-2xl font-bold mt-1" id="avg-duration">--</h3><p class="text-success text-xs mt-1 flex items-center"><i class="fa-solid fa-arrow-up mr-1"></i> 较上周增长 12%</p></div><div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa-solid fa-phone text-primary"></i></div></div></div><div class="bg-white rounded-xl p-6 card-shadow hover-scale"><div class="flex items-start justify-between"><div><p class="text-gray-500 text-sm">总外呼次数</p><h3 class="text-2xl font-bold mt-1" id="total-calls">--</h3><p class="text-danger text-xs mt-1 flex items-center"><i class="fa-solid fa-arrow-down mr-1"></i> 较上周下降 3%</p></div><div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center"><i class="fa-solid fa-headphones text-accent"></i></div></div></div><div class="bg-white rounded-xl p-6 card-shadow hover-scale"><div class="flex items-start justify-between"><div><p class="text-gray-500 text-sm">平均接通率</p><h3 class="text-2xl font-bold mt-1" id="avg-connect-rate">--</h3><p class="text-success text-xs mt-1 flex items-center"><i class="fa-solid fa-arrow-up mr-1"></i> 较上周增长 5%</p></div><div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"><i class="fa-solid fa-chart-pie text-success"></i></div></div></div></div></div></div></main><!-- 页脚 --><footer class="bg-white border-t border-gray-200 mt-12"><div class="container mx-auto px-4 py-6"><div class="flex flex-col md:flex-row justify-between items-center"><div class="mb-4 md:mb-0"><p class="text-gray-500 text-sm">© 2025 坐席业绩可视化分析工具</p></div><div class="flex space-x-4"><a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa-solid fa-question-circle"></i></a><a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa-solid fa-cog"></i></a><a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa-solid fa-user"></i></a></div></div></div></footer><!-- 模态框：数据表格 --><div id="data-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden"><div class="bg-white rounded-xl w-full max-w-4xl max-h-[80vh] flex flex-col"><div class="p-6 border-b border-gray-200 flex justify-between items-center"><h3 class="text-xl font-bold">原始数据</h3><button id="close-modal" class="text-gray-400 hover:text-gray-600 transition-colors"><i class="fa-solid fa-times"></i></button></div><div class="p-6 overflow-y-auto flex-grow"><div class="overflow-x-auto"><table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-50"><tr id="table-header"><!-- 表头将通过JS动态生成 --></tr></thead><tbody class="bg-white divide-y divide-gray-200" id="table-body"><!-- 表格内容将通过JS动态生成 --><tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无数据</td></tr></tbody></table></div></div><div class="p-4 border-t border-gray-200 flex justify-between items-center"><div class="text-sm text-gray-500">共 <span id="total-rows">0</span> 条记录</div><div><button id="export-full-csv" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors"><i class="fa-solid fa-download mr-1"></i> 导出完整数据</button></div></div></div></div><script>// 全局变量let performanceChart = null;let parsedData = [];let selectedAgents = new Set();let currentPeriod = 'day';let currentMetric = 'duration';let targetValue = null;// DOM 元素const fileUpload = document.getElementById('file-upload');const fileInfo = document.getElementById('file-info');const fileName = document.getElementById('file-name');const fileSize = document.getElementById('file-size');const uploadProgress = document.getElementById('upload-progress');const progressText = document.getElementById('progress-text');const removeFile = document.getElementById('remove-file');const downloadSample = document.getElementById('download-sample');const agentList = document.getElementById('agent-list');const selectedAgentsCount = document.getElementById('selected-agents-count');const totalAgentsCount = document.getElementById('total-agents-count');const selectAllBtn = document.getElementById('select-all');const deselectAllBtn = document.getElementById('deselect-all');const timeOptions = document.querySelectorAll('.time-option');const metricOptions = document.querySelectorAll('.metric-option');const chartLoading = document.getElementById('chart-loading');const chartNoData = document.getElementById('chart-no-data');const exportPng = document.getElementById('export-png');const exportSvg = document.getElementById('export-svg');const exportCsv = document.getElementById('export-csv');const dataModal = document.getElementById('data-modal');const closeModal = document.getElementById('close-modal');const tableHeader = document.getElementById('table-header');const tableBody = document.getElementById('table-body');const totalRows = document.getElementById('total-rows');const exportFullCsv = document.getElementById('export-full-csv');const themeToggle = document.getElementById('theme-toggle');const currentDate = document.getElementById('current-date');const targetValueInput = document.getElementById('target-value');const setTargetBtn = document.getElementById('set-target');const currentTarget = document.getElementById('current-target');const targetValueDisplay = document.getElementById('target-value-display');const clearTargetBtn = document.getElementById('clear-target');// 设置当前日期function setCurrentDate() {const now = new Date();const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };currentDate.textContent = now.toLocaleDateString('zh-CN', options);}// 初始化应用function initApp() {setCurrentDate();setupEventListeners();}// 设置事件监听器function setupEventListeners() {// 文件上传fileUpload.addEventListener('change', handleFileUpload);removeFile.addEventListener('click', resetFileUpload);downloadSample.addEventListener('click', downloadSampleFile);// 时间维度选择timeOptions.forEach(option => {option.addEventListener('click', () => {setActiveButton(timeOptions, option);currentPeriod = option.dataset.period;updateChart();});});// 指标选择metricOptions.forEach(option => {option.addEventListener('click', () => {setActiveButton(metricOptions, option);currentMetric = option.dataset.metric;updateChart();});});// 坐席选择selectAllBtn.addEventListener('click', selectAllAgents);deselectAllBtn.addEventListener('click', deselectAllAgents);// 图表导出exportPng.addEventListener('click', exportChartAsPNG);exportSvg.addEventListener('click', exportChartAsSVG);exportCsv.addEventListener('click', exportChartDataAsCSV);// 数据模态框closeModal.addEventListener('click', () => {dataModal.classList.add('hidden');});// 导出完整数据exportFullCsv.addEventListener('click', exportFullDataAsCSV);// 主题切换themeToggle.addEventListener('click', toggleTheme);// 目标值设置setTargetBtn.addEventListener('click', setTargetValue);clearTargetBtn.addEventListener('click', clearTargetValue);targetValueInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {setTargetValue();}});}// 设置目标值function setTargetValue() {const value = parseFloat(targetValueInput.value);if (isNaN(value) || value <= 0) {alert('请输入有效的目标值');return;}targetValue = value;targetValueDisplay.textContent = formatTargetValue(value);currentTarget.classList.remove('hidden');updateChart();// 添加动画效果setTargetBtn.classList.add('bg-success');setTargetBtn.innerHTML = '<i class="fa-solid fa-check"></i> 已设置';setTimeout(() => {setTargetBtn.classList.remove('bg-success');setTargetBtn.innerHTML = '设置';}, 1500);}// 清除目标值function clearTargetValue() {targetValue = null;targetValueInput.value = '';currentTarget.classList.add('hidden');updateChart();}// 格式化目标值显示function formatTargetValue(value) {if (currentMetric === 'duration') {return value + ' 分钟';}return value;}// 处理文件上传function handleFileUpload(event) {const file = event.target.files[0];if (!file) return;// 显示文件信息fileInfo.classList.remove('hidden');fileName.textContent = `文件名：${file.name}`;fileSize.textContent = `文件大小：${formatFileSize(file.size)}`;// 解析CSV文件parseCSVFile(file);}// 解析CSV文件function parseCSVFile(file) {chartLoading.classList.remove('hidden');Papa.parse(file, {header: true,dynamicTyping: true,skipEmptyLines: true,step: (results, parser) => {parsedData.push(results.data);// 更新进度条const progress = Math.round((parser.cursor / file.size) * 100);uploadProgress.style.width = `${progress}%`;progressText.textContent = `${progress}%`;},complete: () => {chartLoading.classList.add('hidden');processData();updateAgentList();updateChart();updateSummaryStats();populateDataTable();},error: (error) => {chartLoading.classList.add('hidden');console.error('CSV解析错误:', error);alert('CSV解析错误: ' + error.message);}});}// 处理数据function processData() {// 扁平化数据结构parsedData = parsedData.flat();// 确保数据有必要的字段parsedData = parsedData.filter(row => row['日期'] && row['坐席姓名'] && (row['接通时长'] || row['外呼次数'] || row['接通次数']));// 转换日期格式parsedData.forEach(row => {if (row['日期']) {row['日期'] = new Date(row['日期']);}});}// 更新坐席列表function updateAgentList() {agentList.innerHTML = '';// 提取所有唯一的坐席姓名const agents = [...new Set(parsedData.map(row => row['坐席姓名']))];totalAgentsCount.textContent = agents.length;if (agents.length === 0) {agentList.innerHTML = '<div class="text-gray-500 text-sm italic">数据中未找到坐席信息</div>';return;}// 创建坐席选择框agents.forEach(agent => {const isSelected = selectedAgents.has(agent);const agentItem = document.createElement('div');agentItem.className = 'flex items-center';const checkbox = document.createElement('input');checkbox.type = 'checkbox';checkbox.id = `agent-${agent.replace(/\s+/g, '-')}`;checkbox.className = 'h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary checkbox-primary';checkbox.value = agent;checkbox.checked = isSelected;checkbox.addEventListener('change', (e) => {if (e.target.checked) {selectedAgents.add(agent);} else {selectedAgents.delete(agent);}updateSelectedAgentsCount();updateChart();});const label = document.createElement('label');label.htmlFor = checkbox.id;label.className = 'ml-2 block text-sm text-gray-700 cursor-pointer';label.textContent = agent;agentItem.appendChild(checkbox);agentItem.appendChild(label);agentList.appendChild(agentItem);});updateSelectedAgentsCount();}// 更新选中的坐席数量function updateSelectedAgentsCount() {selectedAgentsCount.textContent = selectedAgents.size;}// 全选坐席function selectAllAgents() {const checkboxes = document.querySelectorAll('#agent-list input[type="checkbox"]');checkboxes.forEach(checkbox => {checkbox.checked = true;selectedAgents.add(checkbox.value);});updateSelectedAgentsCount();updateChart();}// 取消全选坐席function deselectAllAgents() {const checkboxes = document.querySelectorAll('#agent-list input[type="checkbox"]');checkboxes.forEach(checkbox => {checkbox.checked = false;selectedAgents.delete(checkbox.value);});updateSelectedAgentsCount();updateChart();}// 更新图表function updateChart() {if (parsedData.length === 0) {showNoData();return;}if (selectedAgents.size === 0) {showNoData();return;}chartLoading.classList.remove('hidden');chartNoData.classList.add('hidden');// 过滤选中的坐席数据const filteredData = parsedData.filter(row => selectedAgents.has(row['坐席姓名']));// 根据时间维度处理数据const groupedData = groupDataByTime(filteredData, currentPeriod);// 准备图表数据const chartData = prepareChartData(groupedData);// 创建或更新图表createOrUpdateChart(chartData);chartLoading.classList.add('hidden');}// 按时间维度分组数据function groupDataByTime(data, period) {const grouped = {};data.forEach(row => {let timeKey;if (period === 'day') {// 按日期分组timeKey = row['日期'].toISOString().split('T')[0];} else if (period === 'week') {// 按周分组 (以周一开始)const date = row['日期'];const day = date.getDay() || 7; // 转换为周一开始 (1-7)const monday = new Date(date);monday.setDate(date.getDate() - day + 1);timeKey = `周 ${monday.getMonth() + 1}/${monday.getDate()}`;} else if (period === 'month') {// 按月分组timeKey = `${row['日期'].getFullYear()}年 ${row['日期'].getMonth() + 1}月`;}if (!grouped[timeKey]) {grouped[timeKey] = {};}// 按坐席分组if (!grouped[timeKey][row['坐席姓名']]) {grouped[timeKey][row['坐席姓名']] = {duration: 0,calls: 0,connected: 0};}// 累加指标grouped[timeKey][row['坐席姓名']].duration += row['接通时长'] || 0;grouped[timeKey][row['坐席姓名']].calls += row['外呼次数'] || 0;grouped[timeKey][row['坐席姓名']].connected += row['接通次数'] || 0;});return grouped;}// 准备图表数据function prepareChartData(groupedData) {// 排序时间键const timeKeys = Object.keys(groupedData).sort();// 准备标签const labels = timeKeys;// 准备数据集const datasets = [];const colors = generateColors(selectedAgents.size);let agentIndex = 0;selectedAgents.forEach(agent => {const data = timeKeys.map(timeKey => {const agentData = groupedData[timeKey][agent];return agentData ? agentData[currentMetric] : 0;});datasets.push({label: agent,data: data,borderColor: colors[agentIndex],backgroundColor: `${colors[agentIndex]}40`, // 带透明度的背景色borderWidth: 2,tension: 0.3,fill: true});agentIndex++;});// 添加目标值数据if (targetValue !== null) {datasets.push({label: '目标值',data: Array(labels.length).fill(targetValue),borderColor: '#EF4444',borderWidth: 2,borderDash: [5, 5],pointRadius: 0,fill: false,tension: 0,order: 2});}return {labels: labels,datasets: datasets};}// 创建或更新图表function createOrUpdateChart(chartData) {const ctx = document.getElementById('performance-chart').getContext('2d');// 设置Y轴标签let yAxisLabel;if (currentMetric === 'duration') {yAxisLabel = '接通时长 (分钟)';} else if (currentMetric === 'calls') {yAxisLabel = '外呼次数';} else if (currentMetric === 'connected') {yAxisLabel = '接通次数';}// 设置时间维度标题let timeTitle;if (currentPeriod === 'day') {timeTitle = '日期';} else if (currentPeriod === 'week') {timeTitle = '周';} else if (currentPeriod === 'month') {timeTitle = '月份';}// 设置指标标题let metricTitle;if (currentMetric === 'duration') {metricTitle = '接通时长';} else if (currentMetric === 'calls') {metricTitle = '外呼次数';} else if (currentMetric === 'connected') {metricTitle = '接通次数';}// 如果图表已存在，则销毁它if (performanceChart) {performanceChart.destroy();}// 创建新图表performanceChart = new Chart(ctx, {type: 'line',data: chartData,options: {responsive: true,maintainAspectRatio: false,plugins: {legend: {position: 'top',labels: {usePointStyle: true,boxWidth: 6,font: {family: 'Inter',size: 12}}},tooltip: {mode: 'index',intersect: false,backgroundColor: 'rgba(255, 255, 255, 0.9)',titleColor: '#1E293B',bodyColor: '#64748B',borderColor: '#E2E8F0',borderWidth: 1,padding: 12,boxPadding: 6,usePointStyle: true,callbacks: {label: function(context) {let label = context.dataset.label || '';if (label) {label += ': ';}if (context.parsed.y !== null) {// 根据指标类型格式化数值if (currentMetric === 'duration') {label += context.parsed.y.toFixed(1) + ' 分钟';} else {label += context.parsed.y;}}return label;}}},title: {display: true,text: `${metricTitle}趋势分析 (按${timeTitle})`,font: {family: 'Inter',size: 16,weight: 'bold'},color: '#1E293B',padding: {bottom: 20}}},scales: {x: {grid: {display: false},ticks: {font: {family: 'Inter'}}},y: {beginAtZero: true,grid: {color: '#F1F5F9'},ticks: {font: {family: 'Inter'},callback: function(value) {// 根据指标类型格式化Y轴标签if (currentMetric === 'duration') {return value + ' 分钟';}return value;}},title: {display: true,text: yAxisLabel,font: {family: 'Inter',weight: 'bold'}}}},interaction: {mode: 'nearest',axis: 'x',intersect: false},animation: {duration: 1000,easing: 'easeOutQuart'}}});}// 显示无数据状态function showNoData() {if (performanceChart) {performanceChart.destroy();performanceChart = null;}chartNoData.classList.remove('hidden');}// 更新统计信息卡片function updateSummaryStats() {if (parsedData.length === 0) {document.getElementById('avg-duration').textContent = '--';document.getElementById('total-calls').textContent = '--';document.getElementById('avg-connect-rate').textContent = '--';return;}// 计算总接通时长const totalDuration = parsedData.reduce((sum, row) => sum + (row['接通时长'] || 0), 0);// 计算总外呼次数const totalCalls = parsedData.reduce((sum, row) => sum + (row['外呼次数'] || 0), 0);// 计算总接通次数const totalConnected = parsedData.reduce((sum, row) => sum + (row['接通次数'] || 0), 0);// 计算平均接通时长const avgDuration = (totalDuration / parsedData.length).toFixed(1);// 计算平均接通率const avgConnectRate = totalCalls > 0 ? ((totalConnected / totalCalls) * 100).toFixed(1) + '%' : '0%';// 更新DOMdocument.getElementById('avg-duration').textContent = avgDuration + ' 分钟';document.getElementById('total-calls').textContent = totalCalls;document.getElementById('avg-connect-rate').textContent = avgConnectRate;}// 填充数据表格function populateDataTable() {if (parsedData.length === 0) {tableHeader.innerHTML = '';tableBody.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无数据</td></tr>';totalRows.textContent = '0';return;}// 获取表头const headers = Object.keys(parsedData[0]);// 清空表头tableHeader.innerHTML = '';// 创建表头单元格headers.forEach(header => {const th = document.createElement('th');th.scope = 'col';th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';th.textContent = header;tableHeader.appendChild(th);});// 清空表格内容tableBody.innerHTML = '';// 填充表格内容parsedData.forEach(row => {const tr = document.createElement('tr');tr.className = 'hover:bg-gray-50 transition-colors';headers.forEach(header => {const td = document.createElement('td');td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';// 格式化日期if (header === '日期' && row[header] instanceof Date) {td.textContent = row[header].toISOString().split('T')[0];} else {td.textContent = row[header] !== undefined ? row[header] : '';}tr.appendChild(td);});tableBody.appendChild(tr);});// 更新总记录数totalRows.textContent = parsedData.length;}// 导出图表为PNGfunction exportChartAsPNG() {if (!performanceChart) return;const link = document.createElement('a');link.download = `坐席业绩分析_${currentMetric}_${currentPeriod}.png`;link.href = performanceChart.toBase64Image('image/png', 1.0);link.click();}// 导出图表为SVGfunction exportChartAsSVG() {if (!performanceChart) return;// 获取图表容器const chartContainer = document.getElementById('performance-chart').parentNode;// 创建临时SVG容器const svgContainer = document.createElement('div');svgContainer.style.width = chartContainer.offsetWidth + 'px';svgContainer.style.height = chartContainer.offsetHeight + 'px';document.body.appendChild(svgContainer);// 创建临时Canvasconst tempCanvas = document.createElement('canvas');tempCanvas.width = chartContainer.offsetWidth;tempCanvas.height = chartContainer.offsetHeight;svgContainer.appendChild(tempCanvas);// 复制图表数据到临时Canvasconst tempCtx = tempCanvas.getContext('2d');tempCtx.drawImage(document.getElementById('performance-chart'), 0, 0);// 转换为SVGconst svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');svg.setAttribute('width', tempCanvas.width);svg.setAttribute('height', tempCanvas.height);const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');image.setAttribute('width', tempCanvas.width);image.setAttribute('height', tempCanvas.height);image.setAttribute('href', tempCanvas.toDataURL('image/png'));svg.appendChild(image);// 创建下载链接const svgData = new XMLSerializer().serializeToString(svg);const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});const url = URL.createObjectURL(blob);const link = document.createElement('a');link.download = `坐席业绩分析_${currentMetric}_${currentPeriod}.svg`;link.href = url;link.click();// 清理document.body.removeChild(svgContainer);URL.revokeObjectURL(url);}// 导出图表数据为CSVfunction exportChartDataAsCSV() {if (parsedData.length === 0 || selectedAgents.size === 0) return;// 过滤选中的坐席数据const filteredData = parsedData.filter(row => selectedAgents.has(row['坐席姓名']));// 准备CSV数据let csvContent = '日期,坐席姓名,接通时长,外呼次数,接通次数\n';filteredData.forEach(row => {csvContent += `${row['日期'].toISOString().split('T')[0]},${row['坐席姓名']},${row['接通时长'] || 0},${row['外呼次数'] || 0},${row['接通次数'] || 0}\n`;});// 创建下载链接const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});const url = URL.createObjectURL(blob);const link = document.createElement('a');link.download = `坐席业绩数据_${currentMetric}_${currentPeriod}.csv`;link.href = url;link.click();// 清理URL.revokeObjectURL(url);}// 导出完整数据为CSVfunction exportFullDataAsCSV() {if (parsedData.length === 0) return;// 获取表头const headers = Object.keys(parsedData[0]);// 准备CSV数据let csvContent = headers.join(',') + '\n';parsedData.forEach(row => {const values = headers.map(header => {// 处理日期if (header === '日期' && row[header] instanceof Date) {return row[header].toISOString().split('T')[0];}// 处理字符串值，添加引号if (typeof row[header] === 'string') {return `"${row[header].replace(/"/g, '""')}"`;}return row[header] !== undefined ? row[header] : '';});csvContent += values.join(',') + '\n';});// 创建下载链接const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});const url = URL.createObjectURL(blob);const link = document.createElement('a');link.download = '完整坐席业绩数据.csv';link.href = url;link.click();// 清理URL.revokeObjectURL(url);}// 下载示例文件function downloadSampleFile() {const sampleData = [{日期: '2025-05-01', 坐席姓名: '张三', 接通时长: 12.5, 外呼次数: 30, 接通次数: 15},{日期: '2025-05-01', 坐席姓名: '李四', 接通时长: 18.2, 外呼次数: 25, 接通次数: 12},{日期: '2025-05-02', 坐席姓名: '张三', 接通时长: 15.3, 外呼次数: 35, 接通次数: 18},{日期: '2025-05-02', 坐席姓名: '李四', 接通时长: 14.7, 外呼次数: 28, 接通次数: 14},{日期: '2025-05-03', 坐席姓名: '张三', 接通时长: 10.8, 外呼次数: 27, 接通次数: 13},{日期: '2025-05-03', 坐席姓名: '李四', 接通时长: 20.1, 外呼次数: 32, 接通次数: 16},{日期: '2025-05-04', 坐席姓名: '张三', 接通时长: 16.4, 外呼次数: 33, 接通次数: 17},{日期: '2025-05-04', 坐席姓名: '李四', 接通时长: 13.9, 外呼次数: 26, 接通次数: 11},{日期: '2025-05-05', 坐席姓名: '张三', 接通时长: 14.2, 外呼次数: 31, 接通次数: 15},{日期: '2025-05-05', 坐席姓名: '李四', 接通时长: 17.8, 外呼次数: 29, 接通次数: 13}];let csvContent = '日期,坐席姓名,接通时长,外呼次数,接通次数\n';sampleData.forEach(row => {csvContent += `${row.日期},${row.坐席姓名},${row.接通时长},${row.外呼次数},${row.接通次数}\n`;});const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});const url = URL.createObjectURL(blob);const link = document.createElement('a');link.download = '坐席业绩示例数据.csv';link.href = url;link.click();URL.revokeObjectURL(url);}// 重置文件上传function resetFileUpload() {fileUpload.value = '';fileInfo.classList.add('hidden');parsedData = [];selectedAgents.clear();targetValue = null;targetValueInput.value = '';currentTarget.classList.add('hidden');updateAgentList();updateChart();updateSummaryStats();populateDataTable();}// 设置活动按钮function setActiveButton(buttons, activeButton) {buttons.forEach(button => {button.classList.remove('bg-primary', 'text-white');button.classList.add('bg-gray-200', 'text-gray-700');});activeButton.classList.remove('bg-gray-200', 'text-gray-700');activeButton.classList.add('bg-primary', 'text-white');}// 生成颜色function generateColors(count) {const baseColors = ['#3B82F6', // 蓝色'#F97316', // 橙色'#10B981', // 绿色'#8B5CF6', // 紫色'#EC4899', // 粉色'#06B6D4', // 青色'#F59E0B', // 琥珀色'#EF4444', // 红色'#6366F1', // 靛蓝色'#14B8A6'  // 翡翠色];const colors = [];for (let i = 0; i < count; i++) {colors.push(baseColors[i % baseColors.length]);}return colors;}// 格式化文件大小function formatFileSize(bytes) {if (bytes === 0) return '0 Bytes';const k = 1024;const sizes = ['Bytes', 'KB', 'MB', 'GB'];const i = Math.floor(Math.log(bytes) / Math.log(k));return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];}// 切换主题function toggleTheme() {const isDarkMode = document.documentElement.classList.toggle('dark');const icon = themeToggle.querySelector('i');if (isDarkMode) {document.documentElement.classList.add('dark');icon.classList.remove('fa-moon');icon.classList.add('fa-sun');} else {document.documentElement.classList.remove('dark');icon.classList.remove('fa-sun');icon.classList.add('fa-moon');}}// 初始化应用document.addEventListener('DOMContentLoaded', initApp);</script>
</body>
</html>
效果：