433 lines
22 KiB
HTML
433 lines
22 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">
|
|
<!-- 美化样式 -->
|
|
<link rel="stylesheet" href="enhanced-styles.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:none; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.04); padding:20px; transition:box-shadow 0.3s; }
|
|
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #667eea 0%, #764ba2 100%); transform:scaleX(0); transition:transform 0.3s; }
|
|
.card:hover::before { transform:scaleX(1); }
|
|
.card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); transform:translateY(-2px); }
|
|
.card-title { color:#909399; font-size:13px; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
|
|
.card-value { font-size:28px; font-weight:700; line-height:1.2; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
|
.card-sub { color:#67c23a; font-size:12px; margin-top:6px; font-weight:500; }
|
|
.row { display:grid; gap:16px; grid-template-columns: 2fr 1fr; margin-top:16px; }
|
|
.chart-placeholder { height:260px; background:#fafafa; border:1px dashed #dcdfe6; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#909399; }
|
|
.chart-container { height:260px; width:100%; }
|
|
.chart-tabs { display:flex; gap:8px; margin-bottom:12px; }
|
|
.chart-tab { padding:6px 12px; border:1px solid #dcdfe6; border-radius:4px; background:#fff; color:#606266; cursor:pointer; font-size:13px; }
|
|
.chart-tab.active { background:#409EFF; color:#fff; border-color:#409EFF; }
|
|
.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:6px 16px; border:none; border-radius:4px; cursor:pointer; font-size:14px; transition:all 0.3s; }
|
|
.btn-primary { background:#409EFF; color:#fff; }
|
|
.btn-primary:hover { background:#66b1ff; }
|
|
.btn-default { background:#fff; color:#606266; border:1px solid #dcdfe6; }
|
|
.btn-default:hover { border-color:#409EFF; color:#409EFF; }
|
|
</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 style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
|
<div class="card-title" style="font-size:15px;color:#303133;margin:0;">项目与收支趋势</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<div class="chart-tabs">
|
|
<div class="chart-tab active" onclick="switchChart('trend')">趋势图</div>
|
|
<div class="chart-tab" onclick="switchChart('status')">状态分布</div>
|
|
</div>
|
|
<button class="btn btn-default" onclick="refreshCharts()" style="padding:4px 12px;font-size:12px;">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div id="trendChart" class="chart-container"></div>
|
|
<div id="statusChart" class="chart-container" style="display:none;"></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>
|
|
<button class="btn btn-default" onclick="go('project-board.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('tool-center.html')">进入</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>费用计算器<span class="tag">工具</span></div>
|
|
<button class="btn btn-default" onclick="go('tool-fee-calculator.html')">进入</button>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>产值计算器<span class="tag">工具</span></div>
|
|
<button class="btn btn-default" onclick="go('tool-output-calculator.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;margin-bottom:12px;">项目状态分布</div>
|
|
<div id="projectStatusChart" class="chart-container" style="height:200px;"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title" style="font-size:15px;color:#303133;margin-bottom:12px;">服务类型统计</div>
|
|
<div id="serviceTypeChart" class="chart-container" style="height:200px;"></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>
|
|
<!-- ECharts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
|
|
<script src="common.js"></script>
|
|
<script src="layout.js"></script>
|
|
<script>
|
|
function go(link) { window.location.href = link; }
|
|
|
|
// 图表切换
|
|
function switchChart(type) {
|
|
document.querySelectorAll('.chart-tab').forEach(tab => tab.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
currentChartType = type;
|
|
|
|
if (type === 'trend') {
|
|
document.getElementById('trendChart').style.display = 'block';
|
|
document.getElementById('statusChart').style.display = 'none';
|
|
} else {
|
|
document.getElementById('trendChart').style.display = 'none';
|
|
document.getElementById('statusChart').style.display = 'block';
|
|
initStatusChart();
|
|
}
|
|
}
|
|
|
|
// 初始化趋势图
|
|
function initTrendChart() {
|
|
const chart = echarts.init(document.getElementById('trendChart'));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross' }
|
|
},
|
|
legend: {
|
|
data: ['项目数量', '开票金额', '回款金额'],
|
|
bottom: 0
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '项目数量',
|
|
position: 'left'
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '金额(万元)',
|
|
position: 'right'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '项目数量',
|
|
type: 'line',
|
|
data: [3, 5, 4, 6, 8, 7, 9, 8, 10, 9, 11, 12],
|
|
itemStyle: { color: '#409EFF' }
|
|
},
|
|
{
|
|
name: '开票金额',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
data: [120, 150, 180, 200, 220, 250, 280, 300, 320, 350, 380, 400],
|
|
itemStyle: { color: '#67c23a' }
|
|
},
|
|
{
|
|
name: '回款金额',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
data: [100, 130, 160, 180, 200, 230, 260, 280, 300, 330, 360, 380],
|
|
itemStyle: { color: '#e6a23c' }
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
window.addEventListener('resize', () => chart.resize());
|
|
}
|
|
|
|
// 初始化状态分布图
|
|
function initStatusChart() {
|
|
const chart = echarts.init(document.getElementById('statusChart'));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
bottom: 0
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目状态',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: '{b}: {c}\n({d}%)'
|
|
},
|
|
data: [
|
|
{ value: 8, name: '已立项', itemStyle: { color: '#409EFF' } },
|
|
{ value: 5, name: '投标中', itemStyle: { color: '#e6a23c' } },
|
|
{ value: 3, name: '已中标', itemStyle: { color: '#f56c6c' } },
|
|
{ value: 12, name: '已签合同', itemStyle: { color: '#67c23a' } },
|
|
{ value: 18, name: '已启动', itemStyle: { color: '#909399' } }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
window.addEventListener('resize', () => chart.resize());
|
|
}
|
|
|
|
// 初始化项目状态分布图
|
|
function initProjectStatusChart() {
|
|
const chart = echarts.init(document.getElementById('projectStatusChart'));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '60%',
|
|
data: [
|
|
{ value: 8, name: '已立项', itemStyle: { color: '#409EFF' } },
|
|
{ value: 5, name: '投标中', itemStyle: { color: '#e6a23c' } },
|
|
{ value: 3, name: '已中标', itemStyle: { color: '#f56c6c' } },
|
|
{ value: 12, name: '已签合同', itemStyle: { color: '#67c23a' } },
|
|
{ value: 18, name: '已启动', itemStyle: { color: '#909399' } }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
window.addEventListener('resize', () => chart.resize());
|
|
}
|
|
|
|
// 初始化服务类型统计图
|
|
function initServiceTypeChart() {
|
|
const chart = echarts.init(document.getElementById('serviceTypeChart'));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['工程监理', '项目管理', '跟踪审计', '工程咨询', '结算审计']
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: [8, 6, 10, 15, 12],
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: '#83bff6' },
|
|
{ offset: 0.5, color: '#188df0' },
|
|
{ offset: 1, color: '#188df0' }
|
|
])
|
|
}
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
window.addEventListener('resize', () => chart.resize());
|
|
}
|
|
|
|
// 刷新图表
|
|
function refreshCharts() {
|
|
CommonUtils.showMessage('正在刷新数据...', 'info');
|
|
// 模拟数据刷新
|
|
setTimeout(() => {
|
|
if (currentChartType === 'trend') {
|
|
initTrendChart();
|
|
} else {
|
|
initStatusChart();
|
|
}
|
|
initProjectStatusChart();
|
|
initServiceTypeChart();
|
|
CommonUtils.showMessage('数据已刷新', 'success');
|
|
}, 500);
|
|
}
|
|
|
|
let currentChartType = 'trend';
|
|
|
|
// 页面加载时初始化图表
|
|
window.onload = function() {
|
|
initTrendChart();
|
|
initProjectStatusChart();
|
|
initServiceTypeChart();
|
|
};
|
|
|
|
injectLayout('home');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|