834 lines
42 KiB
HTML
834 lines
42 KiB
HTML
|
<!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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
primary: '#10b981',
|
||
|
|
secondary: '#3b82f6',
|
||
|
|
purple: '#8b5cf6',
|
||
|
|
orange: '#f59e0b',
|
||
|
|
red: '#ef4444',
|
||
|
|
gray: {
|
||
|
|
50: '#f8fafc',
|
||
|
|
100: '#f1f5f9',
|
||
|
|
200: '#e2e8f0',
|
||
|
|
300: '#cbd5e1',
|
||
|
|
400: '#94a3b8',
|
||
|
|
500: '#64748b',
|
||
|
|
600: '#475569',
|
||
|
|
700: '#334155',
|
||
|
|
800: '#1e293b',
|
||
|
|
900: '#0f172a',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
inter: ['Inter', 'sans-serif'],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/tailwindcss">
|
||
|
|
@layer utilities {
|
||
|
|
.content-auto {
|
||
|
|
content-visibility: auto;
|
||
|
|
}
|
||
|
|
.card-shadow {
|
||
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||
|
|
}
|
||
|
|
.sidebar-item-active {
|
||
|
|
background-color: rgba(16, 185, 129, 0.1);
|
||
|
|
color: #10b981;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
|
||
|
|
<div class="flex flex-1 overflow-hidden">
|
||
|
|
<!-- 左侧侧边栏 -->
|
||
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
|
||
|
|
<!-- Logo区域 -->
|
||
|
|
<div class="p-4 border-b border-gray-200">
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
|
||
|
|
<i class="fa fa-leaf text-white"></i>
|
||
|
|
</div>
|
||
|
|
<span class="font-semibold text-lg">星海科技</span>
|
||
|
|
<button class="ml-auto text-gray-400 hover:text-gray-600">
|
||
|
|
<i class="fa fa-angle-left"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 导航菜单 -->
|
||
|
|
<nav class="flex-1 py-4 overflow-y-auto">
|
||
|
|
<ul class="space-y-1 px-3">
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md sidebar-item-active">
|
||
|
|
<i class="fa fa-th-large w-5 text-center"></i>
|
||
|
|
<span class="ml-3">总览</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-file-text-o w-5 text-center"></i>
|
||
|
|
<span class="ml-3">报销单</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-check-square-o w-5 text-center"></i>
|
||
|
|
<span class="ml-3">审批中心</span>
|
||
|
|
<span class="ml-auto bg-red text-white text-xs px-2 py-0.5 rounded-full">128</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-exclamation-triangle w-5 text-center"></i>
|
||
|
|
<span class="ml-3">风险预警</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-ticket w-5 text-center"></i>
|
||
|
|
<span class="ml-3">发票中心</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-pie-chart w-5 text-center"></i>
|
||
|
|
<span class="ml-3">预算控制</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-users w-5 text-center"></i>
|
||
|
|
<span class="ml-3">员工服务</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="flex items-center px-3 py-2.5 rounded-md text-gray-600 hover:bg-gray-100">
|
||
|
|
<i class="fa fa-cog w-5 text-center"></i>
|
||
|
|
<span class="ml-3">设置</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 用户信息 -->
|
||
|
|
<div class="p-4 border-t border-gray-200">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<p class="text-sm font-medium text-gray-900 truncate">张晓明</p>
|
||
|
|
<p class="text-xs text-gray-500 truncate">财务管理员</p>
|
||
|
|
</div>
|
||
|
|
<button class="text-gray-400 hover:text-gray-600">
|
||
|
|
<i class="fa fa-angle-down"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- 主内容区域 -->
|
||
|
|
<main class="flex-1 overflow-y-auto bg-gray-50">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<header class="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||
|
|
<div class="flex items-center justify-between p-4">
|
||
|
|
<div>
|
||
|
|
<div class="text-xs text-primary font-medium uppercase tracking-wider">Smart Expense Operations</div>
|
||
|
|
<h1 class="text-2xl font-bold text-gray-800 mt-1">企业报销智能运营台</h1>
|
||
|
|
<p class="text-sm text-gray-500 mt-1">面向财务共享中心的审批、风控、SLA与自动化运营看板</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
|
|
<i class="fa fa-search text-gray-400"></i>
|
||
|
|
</div>
|
||
|
|
<input type="text" placeholder="搜索申请人、单号、费用类型..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary w-64">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 日期选择器 -->
|
||
|
|
<div class="relative">
|
||
|
|
<select class="appearance-none pl-3 pr-8 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white">
|
||
|
|
<option>2024-07-06 ~ 2024-07-12</option>
|
||
|
|
<option>2024-07-01 ~ 2024-07-07</option>
|
||
|
|
<option>2024-06-30 ~ 2024-07-06</option>
|
||
|
|
</select>
|
||
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||
|
|
<i class="fa fa-calendar-o text-gray-400"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI助手按钮 -->
|
||
|
|
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md flex items-center space-x-2 transition-colors">
|
||
|
|
<i class="fa fa-magic"></i>
|
||
|
|
<span>AI助手</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 时间筛选标签 -->
|
||
|
|
<div class="flex items-center justify-end px-4 pb-3 space-x-2">
|
||
|
|
<button class="px-3 py-1 text-sm rounded-md bg-white border border-gray-300 hover:bg-gray-50">今日</button>
|
||
|
|
<button class="px-3 py-1 text-sm rounded-md bg-gray-100 border border-gray-300 font-medium">本周</button>
|
||
|
|
<button class="px-3 py-1 text-sm rounded-md bg-white border border-gray-300 hover:bg-gray-50">本月</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- 仪表盘内容 -->
|
||
|
|
<div class="p-6">
|
||
|
|
<!-- 统计卡片行 -->
|
||
|
|
<div class="grid grid-cols-6 gap-6 mb-6">
|
||
|
|
<!-- 待审批单据 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">待审批单据</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">128 <span class="text-sm font-normal text-gray-500">单</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-file-text-o text-primary text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-green-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-down mr-1"></i> 12.5%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 -18 单</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 待处理金额 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">待处理金额</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">¥361,600</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-yen text-secondary text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-red-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-up mr-1"></i> 8.3%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 +¥27,400</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 平均审批时长 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">平均审批时长</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">6.8 <span class="text-sm font-normal text-gray-500">h</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-clock-o text-purple text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-green-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-down mr-1"></i> 14.8%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 -1.2h</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 自动审单通过率 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">自动审单通过率</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">78 <span class="text-sm font-normal text-gray-500">%</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-shield text-primary text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-green-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-up mr-1"></i> 6.2%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 +4.6%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 异常预警单 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">异常预警单</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">14 <span class="text-sm font-normal text-gray-500">单</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-exclamation-triangle text-red text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-red-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-up mr-1"></i> 16.7%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 +2 单</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SLA达成率 -->
|
||
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500 mb-1">SLA达成率</p>
|
||
|
|
<p class="text-2xl font-bold text-gray-800">96 <span class="text-sm font-normal text-gray-500">%</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
|
||
|
|
<i class="fa fa-check-circle text-primary text-lg"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm">
|
||
|
|
<span class="text-green-600 flex items-center">
|
||
|
|
<i class="fa fa-arrow-up mr-1"></i> 3.1%
|
||
|
|
</span>
|
||
|
|
<span class="text-gray-500 ml-2">较昨日 +2.9%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 图表行1 -->
|
||
|
|
<div class="grid grid-cols-12 gap-6 mb-6">
|
||
|
|
<!-- 报销申请与审批趋势 -->
|
||
|
|
<div class="col-span-6 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">报销申请与审批趋势 <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
<select class="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
||
|
|
<option>近12天</option>
|
||
|
|
<option>近7天</option>
|
||
|
|
<option>近30天</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="h-64">
|
||
|
|
<canvas id="trendChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 费用结构 -->
|
||
|
|
<div class="col-span-3 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">费用结构 <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-center h-48">
|
||
|
|
<canvas id="expenseChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs text-gray-500 text-center mt-2">* 百分比为占待处理金额比例</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 风险异常分布 -->
|
||
|
|
<div class="col-span-3 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">风险异常分布 <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-center h-48">
|
||
|
|
<canvas id="riskChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs text-gray-500 text-center mt-2">* 近30天数据</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 图表行2 -->
|
||
|
|
<div class="grid grid-cols-12 gap-6">
|
||
|
|
<!-- 部门报销排行 -->
|
||
|
|
<div class="col-span-6 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">部门报销排行（待处理金额） <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
<select class="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
||
|
|
<option>本周</option>
|
||
|
|
<option>本月</option>
|
||
|
|
<option>本季度</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="w-6 h-6 rounded-full bg-orange text-white flex items-center justify-center text-xs font-medium mr-3">1</span>
|
||
|
|
<span class="w-16 text-sm text-gray-600">销售部</span>
|
||
|
|
<div class="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-primary rounded-full" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-3 text-sm font-medium text-gray-700">¥182,000</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="w-6 h-6 rounded-full bg-gray-400 text-white flex items-center justify-center text-xs font-medium mr-3">2</span>
|
||
|
|
<span class="w-16 text-sm text-gray-600">研发中心</span>
|
||
|
|
<div class="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-secondary rounded-full" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-3 text-sm font-medium text-gray-700">¥146,000</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="w-6 h-6 rounded-full bg-orange/80 text-white flex items-center justify-center text-xs font-medium mr-3">3</span>
|
||
|
|
<span class="w-16 text-sm text-gray-600">市场部</span>
|
||
|
|
<div class="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-orange rounded-full" style="width: 53%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-3 text-sm font-medium text-gray-700">¥96,000</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="w-6 h-6 rounded-full bg-gray-500 text-white flex items-center justify-center text-xs font-medium mr-3">4</span>
|
||
|
|
<span class="w-16 text-sm text-gray-600">运营部</span>
|
||
|
|
<div class="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-purple rounded-full" style="width: 38%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-3 text-sm font-medium text-gray-700">¥68,600</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="w-6 h-6 rounded-full bg-gray-600 text-white flex items-center justify-center text-xs font-medium mr-3">5</span>
|
||
|
|
<span class="w-16 text-sm text-gray-600">行政部</span>
|
||
|
|
<div class="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-blue-500 rounded-full" style="width: 27%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-3 text-sm font-medium text-gray-700">¥48,300</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 审批瓶颈 -->
|
||
|
|
<div class="col-span-3 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">审批瓶颈（平均处理时长） <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/64/32/32" alt="李文静" class="w-8 h-8 rounded-full mr-3">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-gray-800">李文静</p>
|
||
|
|
<p class="text-xs text-gray-500">财务经理</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-sm font-medium text-gray-800">12.4 h</p>
|
||
|
|
<span class="text-xs bg-red/10 text-red px-2 py-0.5 rounded">较慢</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/91/32/32" alt="王志强" class="w-8 h-8 rounded-full mr-3">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-gray-800">王志强</p>
|
||
|
|
<p class="text-xs text-gray-500">财务专员</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-sm font-medium text-gray-800">8.7 h</p>
|
||
|
|
<span class="text-xs bg-orange/10 text-orange px-2 py-0.5 rounded">偏慢</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/55/32/32" alt="刘思雨" class="w-8 h-8 rounded-full mr-3">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-gray-800">刘思雨</p>
|
||
|
|
<p class="text-xs text-gray-500">费用审核员</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-sm font-medium text-gray-800">5.2 h</p>
|
||
|
|
<span class="text-xs bg-green/10 text-green-600 px-2 py-0.5 rounded">正常</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4 pt-4 border-t border-gray-100">
|
||
|
|
<a href="#" class="text-sm text-primary hover:text-primary/80 flex items-center justify-between">
|
||
|
|
查看全部
|
||
|
|
<i class="fa fa-angle-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 预算执行率 -->
|
||
|
|
<div class="col-span-3 bg-white rounded-lg p-5 card-shadow">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="font-semibold text-gray-800">预算执行率（本月） <i class="fa fa-info-circle text-gray-400 text-xs ml-1"></i></h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-center h-32">
|
||
|
|
<canvas id="budgetChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-3 gap-2 mt-4 text-center">
|
||
|
|
<div>
|
||
|
|
<p class="text-xs text-gray-500">预算总额</p>
|
||
|
|
<p class="text-sm font-medium text-gray-800">¥2,800,000</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs text-gray-500">已执行</p>
|
||
|
|
<p class="text-sm font-medium text-gray-800">¥2,128,000</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs text-gray-500">剩余可用</p>
|
||
|
|
<p class="text-sm font-medium text-gray-800">¥672,000</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4 pt-4 border-t border-gray-100">
|
||
|
|
<a href="#" class="text-sm text-primary hover:text-primary/80 flex items-center justify-between">
|
||
|
|
查看详情
|
||
|
|
<i class="fa fa-angle-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 报销申请与审批趋势图
|
||
|
|
const trendCtx = document.getElementById('trendChart').getContext('2d');
|
||
|
|
new Chart(trendCtx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: ['07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-12'],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: '申请量（单）',
|
||
|
|
data: [140, 105, 175, 195, 155, 70, 65, 60, 185, 200, 220],
|
||
|
|
backgroundColor: '#10b981',
|
||
|
|
borderRadius: 4,
|
||
|
|
barPercentage: 0.6,
|
||
|
|
categoryPercentage: 0.5
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '审批完成量（单）',
|
||
|
|
data: [110, 85, 130, 125, 110, 60, 55, 50, 145, 150, 170],
|
||
|
|
backgroundColor: '#3b82f6',
|
||
|
|
borderRadius: 4,
|
||
|
|
barPercentage: 0.6,
|
||
|
|
categoryPercentage: 0.5
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '平均审批时长（小时）',
|
||
|
|
data: [10, 8, 9, 7, 7, 6.8, 6, 6.5, 7, 8, 7.5],
|
||
|
|
borderColor: '#8b5cf6',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
borderWidth: 2,
|
||
|
|
pointBackgroundColor: '#ffffff',
|
||
|
|
pointBorderColor: '#8b5cf6',
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
pointRadius: 4,
|
||
|
|
type: 'line',
|
||
|
|
yAxisID: 'y1'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
interaction: {
|
||
|
|
mode: 'index',
|
||
|
|
intersect: false,
|
||
|
|
},
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'top',
|
||
|
|
align: 'start',
|
||
|
|
labels: {
|
||
|
|
boxWidth: 10,
|
||
|
|
usePointStyle: true,
|
||
|
|
pointStyle: 'circle'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||
|
|
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) {
|
||
|
|
label += context.parsed.y;
|
||
|
|
}
|
||
|
|
return label;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
grid: {
|
||
|
|
display: false
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
color: '#64748b',
|
||
|
|
font: {
|
||
|
|
size: 11
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
beginAtZero: true,
|
||
|
|
max: 250,
|
||
|
|
grid: {
|
||
|
|
color: '#f1f5f9'
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
color: '#64748b',
|
||
|
|
font: {
|
||
|
|
size: 11
|
||
|
|
},
|
||
|
|
stepSize: 50
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y1: {
|
||
|
|
position: 'right',
|
||
|
|
beginAtZero: true,
|
||
|
|
max: 15,
|
||
|
|
grid: {
|
||
|
|
display: false
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
color: '#64748b',
|
||
|
|
font: {
|
||
|
|
size: 11
|
||
|
|
},
|
||
|
|
stepSize: 3
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 费用结构图
|
||
|
|
const expenseCtx = document.getElementById('expenseChart').getContext('2d');
|
||
|
|
new Chart(expenseCtx, {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
labels: ['机票', '酒店', '火车/用车', '餐补及杂费'],
|
||
|
|
datasets: [{
|
||
|
|
data: [182000, 146000, 78600, 55000],
|
||
|
|
backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6'],
|
||
|
|
borderWidth: 0,
|
||
|
|
borderRadius: 0,
|
||
|
|
cutout: '70%'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'right',
|
||
|
|
labels: {
|
||
|
|
boxWidth: 10,
|
||
|
|
usePointStyle: true,
|
||
|
|
pointStyle: 'circle',
|
||
|
|
padding: 15,
|
||
|
|
font: {
|
||
|
|
size: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||
|
|
titleColor: '#1e293b',
|
||
|
|
bodyColor: '#64748b',
|
||
|
|
borderColor: '#e2e8f0',
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 12,
|
||
|
|
boxPadding: 6,
|
||
|
|
usePointStyle: true,
|
||
|
|
callbacks: {
|
||
|
|
label: function(context) {
|
||
|
|
const label = context.label || '';
|
||
|
|
const value = context.parsed;
|
||
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
||
|
|
const percentage = ((value / total) * 100).toFixed(1);
|
||
|
|
return `${label}: ¥${value.toLocaleString()} (${percentage}%)`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plugins: [{
|
||
|
|
id: 'centerText',
|
||
|
|
beforeDraw: function(chart) {
|
||
|
|
const width = chart.width;
|
||
|
|
const height = chart.height;
|
||
|
|
const ctx = chart.ctx;
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
const fontSize = (height / 160).toFixed(2);
|
||
|
|
ctx.font = `bold ${fontSize}em Inter`;
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
|
||
|
|
const text = '¥361,600';
|
||
|
|
const textX = width / 2;
|
||
|
|
const textY = height / 2 - 10;
|
||
|
|
ctx.fillStyle = '#1e293b';
|
||
|
|
ctx.fillText(text, textX, textY);
|
||
|
|
|
||
|
|
ctx.font = `${fontSize * 0.6}em Inter`;
|
||
|
|
ctx.fillStyle = '#64748b';
|
||
|
|
ctx.fillText('待处理金额', textX, textY + 20);
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
|
||
|
|
// 风险异常分布图
|
||
|
|
const riskCtx = document.getElementById('riskChart').getContext('2d');
|
||
|
|
new Chart(riskCtx, {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
labels: ['住宿超标', '重复报销', '行程缺失', '发票异常'],
|
||
|
|
datasets: [{
|
||
|
|
data: [5, 3, 3, 3],
|
||
|
|
backgroundColor: ['#ef4444', '#f59e0b', '#8b5cf6', '#3b82f6'],
|
||
|
|
borderWidth: 0,
|
||
|
|
borderRadius: 0,
|
||
|
|
cutout: '70%'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'right',
|
||
|
|
labels: {
|
||
|
|
boxWidth: 10,
|
||
|
|
usePointStyle: true,
|
||
|
|
pointStyle: 'circle',
|
||
|
|
padding: 15,
|
||
|
|
font: {
|
||
|
|
size: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||
|
|
titleColor: '#1e293b',
|
||
|
|
bodyColor: '#64748b',
|
||
|
|
borderColor: '#e2e8f0',
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 12,
|
||
|
|
boxPadding: 6,
|
||
|
|
usePointStyle: true,
|
||
|
|
callbacks: {
|
||
|
|
label: function(context) {
|
||
|
|
const label = context.label || '';
|
||
|
|
const value = context.parsed;
|
||
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
||
|
|
const percentage = ((value / total) * 100).toFixed(1);
|
||
|
|
return `${label}: ${value} 单 (${percentage}%)`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plugins: [{
|
||
|
|
id: 'centerText',
|
||
|
|
beforeDraw: function(chart) {
|
||
|
|
const width = chart.width;
|
||
|
|
const height = chart.height;
|
||
|
|
const ctx = chart.ctx;
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
const fontSize = (height / 160).toFixed(2);
|
||
|
|
ctx.font = `bold ${fontSize}em Inter`;
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
|
||
|
|
const text = '14';
|
||
|
|
const textX = width / 2;
|
||
|
|
const textY = height / 2 - 10;
|
||
|
|
ctx.fillStyle = '#1e293b';
|
||
|
|
ctx.fillText(text, textX, textY);
|
||
|
|
|
||
|
|
ctx.font = `${fontSize * 0.6}em Inter`;
|
||
|
|
ctx.fillStyle = '#64748b';
|
||
|
|
ctx.fillText('异常预警单', textX, textY + 20);
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
|
||
|
|
// 预算执行率图
|
||
|
|
const budgetCtx = document.getElementById('budgetChart').getContext('2d');
|
||
|
|
new Chart(budgetCtx, {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
datasets: [{
|
||
|
|
data: [76, 24],
|
||
|
|
backgroundColor: ['#10b981', '#e2e8f0'],
|
||
|
|
borderWidth: 0,
|
||
|
|
borderRadius: 0,
|
||
|
|
cutout: '75%'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: false
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
enabled: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rotation: -90,
|
||
|
|
circumference: 180
|
||
|
|
},
|
||
|
|
plugins: [{
|
||
|
|
id: 'centerText',
|
||
|
|
beforeDraw: function(chart) {
|
||
|
|
const width = chart.width;
|
||
|
|
const height = chart.height;
|
||
|
|
const ctx = chart.ctx;
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
const fontSize = (height / 80).toFixed(2);
|
||
|
|
ctx.font = `bold ${fontSize}em Inter`;
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
|
||
|
|
const text = '76%';
|
||
|
|
const textX = width / 2;
|
||
|
|
const textY = height / 2 + 10;
|
||
|
|
ctx.fillStyle = '#10b981';
|
||
|
|
ctx.fillText(text, textX, textY);
|
||
|
|
|
||
|
|
ctx.font = `${fontSize * 0.5}em Inter`;
|
||
|
|
ctx.fillStyle = '#64748b';
|
||
|
|
ctx.fillText('已执行', textX, textY + 25);
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|