166 lines
9.8 KiB
HTML
166 lines
9.8 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>Dashboard - OA系统</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background:#f0f2f5; overflow:hidden; }
|
|
.layout-container { height:100vh; display:flex; flex-direction:column; }
|
|
.navbar { height:50px; background:#fff; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-shadow:0 1px 4px rgba(0,21,41,.08); }
|
|
.navbar-left { display:flex; align-items:center; }
|
|
.logo { font-size:20px; font-weight:bold; color:#409EFF; cursor:pointer; }
|
|
.nav-menu { display:flex; gap:8px; margin-left:16px; }
|
|
.nav-item { padding:8px 16px; cursor:pointer; border-radius:4px; color:#303133; }
|
|
.nav-item:hover { background:#ecf5ff; color:#409EFF; }
|
|
.nav-item.active { background:#409EFF; color:#fff; }
|
|
.navbar-right { display:flex; align-items:center; gap:20px; }
|
|
.content { flex:1; padding:20px; overflow-y:auto; }
|
|
.grid { display:grid; gap:16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.card { background:#fff; border:1px solid #e6e6e6; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.04); padding:16px; }
|
|
.card-title { color:#909399; font-size:13px; margin-bottom:6px; }
|
|
.card-value { font-size:22px; font-weight:600; color:#303133; }
|
|
.card-sub { color:#67c23a; font-size:12px; margin-top:4px; }
|
|
.row { display:grid; gap:16px; grid-template-columns: 2fr 1fr; margin-top:16px; }
|
|
.chart-placeholder { height:260px; background:linear-gradient(135deg,#f5f7fa,#eef2f7); border:1px dashed #dcdfe6; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#909399; }
|
|
.list { margin-top:8px; }
|
|
.list-item { padding:10px 0; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
|
|
.tag { display:inline-block; padding:2px 8px; border-radius:10px; background:#ecf5ff; color:#409EFF; font-size:12px; margin-left:8px; }
|
|
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
|
|
.btn { padding:8px 12px; border:none; border-radius:4px; cursor:pointer; }
|
|
.btn-primary { background:#409EFF; color:#fff; }
|
|
.btn-default { background:#fff; color:#303133; border:1px solid #dcdfe6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="layout-container">
|
|
<div class="navbar">
|
|
<div class="navbar-left">
|
|
<div class="logo" onclick="go('dashboard.html')">OA系统</div>
|
|
<div class="nav-menu">
|
|
<div class="nav-item active" onclick="go('dashboard.html')">首页</div>
|
|
<div class="nav-item" onclick="window.location.href='project-initiation.html'">商机管理</div>
|
|
<div class="nav-item" onclick="window.location.href='project-start.html'">过程管理</div>
|
|
<div class="nav-item" onclick="window.location.href='finance-invoice.html'">财务管理</div>
|
|
<div class="nav-item" onclick="window.location.href='report-project-detail.html'">报表管理</div>
|
|
<div class="nav-item" onclick="window.location.href='approval-center.html'">审批中心</div>
|
|
<div class="nav-item" onclick="window.location.href='message-center.html'">消息中心</div>
|
|
<div class="nav-item" onclick="window.location.href='file-center.html'">文件中心</div>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-right">
|
|
<span style="color:#303133;">张三</span><span style="color:#909399;margin:0 8px;">|</span>
|
|
<a href="profile.html" style="color:#409EFF;text-decoration:none;">个人中心</a>
|
|
<span style="color:#909399;">|</span>
|
|
<a href="login.html" style="color:#409EFF;text-decoration:none;">退出</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="card-title">待办事项</div>
|
|
<div class="card-value">12</div>
|
|
<div class="card-sub">较昨日 +2</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">进行中项目</div>
|
|
<div class="card-value">18</div>
|
|
<div class="card-sub">本周新开 3</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">本月应收</div>
|
|
<div class="card-value">¥ 2,480,000</div>
|
|
<div class="card-sub">回款完成 65%</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">本月开票</div>
|
|
<div class="card-value">¥ 1,320,000</div>
|
|
<div class="card-sub">审批中 4 笔</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="card">
|
|
<div class="card-title" style="font-size:15px;color:#303133;">项目与收支趋势</div>
|
|
<div class="chart-placeholder">图表占位（项目数量 / 开票 / 回款趋势）</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title" style="font-size:15px;color:#303133;">快捷入口</div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="go('project-initiation.html')">+ 发起立项</button>
|
|
<button class="btn btn-default" onclick="go('approval-center.html')">审批中心</button>
|
|
<button class="btn btn-default" onclick="go('message-center.html')">消息中心</button>
|
|
<button class="btn btn-default" onclick="go('file-center.html')">文件中心</button>
|
|
<button class="btn btn-default" onclick="go('global-search.html')">全局搜索</button>
|
|
</div>
|
|
<div class="list" style="margin-top:12px;">
|
|
<div style="color:#909399;font-size:13px;margin-bottom:6px;">常用页面</div>
|
|
<div class="list-item">
|
|
<div>项目列表<span class="tag">项目</span></div>
|
|
<button class="btn btn-default" onclick="go('project-list.html')">进入</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>报表 - 项目汇总<span class="tag">报表</span></div>
|
|
<button class="btn btn-default" onclick="go('report-project-summary.html')">进入</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>合同详情示例<span class="tag">合同</span></div>
|
|
<button class="btn btn-default" onclick="go('contract-detail.html')">进入</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="grid-template-columns: 1fr 1fr; margin-top:16px;">
|
|
<div class="card">
|
|
<div class="card-title" style="font-size:15px;color:#303133;">待办概览</div>
|
|
<div class="list">
|
|
<div class="list-item">
|
|
<div>立项审批 - XX工程 <span class="tag">待处理</span></div>
|
|
<button class="btn btn-default" onclick="go('approval-center.html')">处理</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>开票申请 - 25-3 <span class="tag">审批</span></div>
|
|
<button class="btn btn-default" onclick="go('approval-center.html')">处理</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>成果提交 - ZZ工程 <span class="tag">待审核</span></div>
|
|
<button class="btn btn-default" onclick="go('approval-center.html')">处理</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title" style="font-size:15px;color:#303133;">最新消息</div>
|
|
<div class="list">
|
|
<div class="list-item">
|
|
<div>您有 1 条待办 <span class="tag">审批</span></div>
|
|
<button class="btn btn-default" onclick="go('message-center.html')">查看</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>公告：年终安全检查 <span class="tag">公告</span></div>
|
|
<button class="btn btn-default" onclick="go('message-center.html')">查看</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>导出完成：审批中心列表 <span class="tag">系统</span></div>
|
|
<button class="btn btn-default" onclick="go('message-center.html')">查看</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="common.js"></script>
|
|
<script src="layout.js"></script>
|
|
<script>
|
|
function go(link) { window.location.href = link; }
|
|
injectLayout('home');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|