9cd6837935
- 更新为桌面端侧边栏布局 - 添加数据概览、基础信息、合同管理等页面 - 修改服务器端口为 7358 - 添加原型截图和文档数据 Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
320 lines
18 KiB
HTML
320 lines
18 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="flex min-h-screen">
|
|
<!-- 侧边栏 -->
|
|
<div class="w-72 bg-slate-800 text-white flex flex-col">
|
|
<!-- Logo -->
|
|
<div class="p-6 border-b border-slate-700">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-building text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-bold">资产租赁管理</h1>
|
|
<p class="text-slate-400 text-xs">管理后台</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="flex-1 p-4 overflow-y-auto">
|
|
<!-- 数据看板 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">数据看板</p>
|
|
<a href="#dashboard" onclick="showPage('dashboard')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-chart-line w-5 text-blue-400"></i>
|
|
<span>数据概览</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 基础信息 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">基础信息</p>
|
|
<a href="#project-info" onclick="showPage('project-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-city w-5 text-green-400"></i>
|
|
<span>项目信息</span>
|
|
</a>
|
|
<a href="#asset-info" onclick="showPage('asset-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-archive w-5 text-green-400"></i>
|
|
<span>资产台账</span>
|
|
</a>
|
|
<a href="#tenant-info" onclick="showPage('tenant-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-users w-5 text-green-400"></i>
|
|
<span>承租人管理</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 合同管理 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">合同管理</p>
|
|
<a href="#contract-list" onclick="showPage('contract-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-file-contract w-5 text-blue-400"></i>
|
|
<span>合同列表</span>
|
|
</a>
|
|
<a href="#contract-add" onclick="showPage('contract-add')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-plus-circle w-5 text-blue-400"></i>
|
|
<span>合同新增</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 应收管理 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">应收管理</p>
|
|
<a href="#receivable-list" onclick="showPage('receivable-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-money-bill-wave w-5 text-amber-400"></i>
|
|
<span>合同应收</span>
|
|
</a>
|
|
<a href="#invoice-register" onclick="showPage('invoice-register')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-receipt w-5 text-amber-400"></i>
|
|
<span>开票登记</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 收款核销 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">收款核销</p>
|
|
<a href="#payment-list" onclick="showPage('payment-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-hand-holding-usd w-5 text-purple-400"></i>
|
|
<span>收款明细</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 统计报表 -->
|
|
<div class="mb-6">
|
|
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">统计报表</p>
|
|
<a href="#report-budget" onclick="showPage('report-budget')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-table w-5 text-cyan-400"></i>
|
|
<span>预算总结表</span>
|
|
</a>
|
|
<a href="#report-contract" onclick="showPage('report-contract')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
|
|
<i class="fas fa-file-alt w-5 text-cyan-400"></i>
|
|
<span>合同应收表</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="p-4 border-t border-slate-700">
|
|
<div class="flex items-center gap-3 px-4 py-3">
|
|
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">管理员</p>
|
|
<p class="text-slate-400 text-sm">在线</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="flex-1 overflow-auto">
|
|
<!-- 顶部栏 -->
|
|
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<a href="index.html" class="text-slate-600 hover:text-slate-800">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="text-xl font-bold text-slate-800" id="pageTitle">数据概览</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 text-slate-500 hover:text-slate-700">
|
|
<i class="fas fa-bell"></i>
|
|
</button>
|
|
<button class="p-2 text-slate-500 hover:text-slate-700">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页面内容容器 -->
|
|
<div id="pageContent" class="p-6">
|
|
<!-- 默认显示数据看板 -->
|
|
<div id="dashboard-content">
|
|
<!-- 统计卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-slate-500 text-sm">项目总数</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">11</p>
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up"></i> 较上月 +2</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-city text-blue-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-slate-500 text-sm">资产总数</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">61</p>
|
|
<p class="text-slate-400 text-sm mt-2">未出租 60 | 已签约 1</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-archive text-green-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-amber-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-slate-500 text-sm">有效合同</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">12</p>
|
|
<p class="text-amber-500 text-sm mt-2">本月到期 2</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-file-contract text-amber-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-red-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-slate-500 text-sm">逾期应收</p>
|
|
<p class="text-3xl font-bold text-red-500 mt-2">3</p>
|
|
<p class="text-red-400 text-sm mt-2">待处理金额 ¥45,000</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="font-bold text-slate-800 mb-4">应收趋势</h3>
|
|
<div class="h-64 flex items-end justify-between gap-2">
|
|
<div class="flex-1 bg-blue-500 rounded-t" style="height: 60%"></div>
|
|
<div class="flex-1 bg-blue-500 rounded-t" style="height: 75%"></div>
|
|
<div class="flex-1 bg-blue-500 rounded-t" style="height: 45%"></div>
|
|
<div class="flex-1 bg-blue-500 rounded-t" style="height: 90%"></div>
|
|
<div class="flex-1 bg-blue-500 rounded-t" style="height: 70%"></div>
|
|
<div class="flex-1 bg-blue-400 rounded-t" style="height: 55%"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2 text-xs text-slate-500">
|
|
<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="font-bold text-slate-800 mb-4">资产状态分布</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="text-slate-600">未出租</span>
|
|
<span class="font-bold">60 (98.4%)</span>
|
|
</div>
|
|
<div class="h-3 bg-gray-200 rounded-full">
|
|
<div class="h-3 bg-slate-400 rounded-full" style="width: 98.4%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="text-slate-600">已签约</span>
|
|
<span class="font-bold">1 (1.6%)</span>
|
|
</div>
|
|
<div class="h-3 bg-gray-200 rounded-full">
|
|
<div class="h-3 bg-green-500 rounded-full" style="width: 1.6%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待办事项 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h3 class="font-bold text-slate-800 mb-4">待办事项</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-4 p-3 bg-red-50 rounded-lg">
|
|
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
|
<div class="flex-1">
|
|
<p class="font-medium">3笔应收已逾期</p>
|
|
<p class="text-sm text-slate-500">总金额 ¥45,000</p>
|
|
</div>
|
|
<button onclick="showPage('receivable-list')" class="text-blue-500 text-sm">处理 →</button>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-3 bg-amber-50 rounded-lg">
|
|
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
|
|
<div class="flex-1">
|
|
<p class="font-medium">2份合同即将到期</p>
|
|
<p class="text-sm text-slate-500">预计 7 天内到期</p>
|
|
</div>
|
|
<button onclick="showPage('contract-list')" class="text-blue-500 text-sm">查看 →</button>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-3 bg-blue-50 rounded-lg">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
|
<div class="flex-1">
|
|
<p class="font-medium">5份合同待续签</p>
|
|
<p class="text-sm text-slate-500">需要跟进续签事宜</p>
|
|
</div>
|
|
<button onclick="showPage('contract-list')" class="text-blue-500 text-sm">查看 →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面标题映射
|
|
const pageTitles = {
|
|
'dashboard': '数据概览',
|
|
'project-info': '项目信息维护',
|
|
'asset-info': '资产台账管理',
|
|
'tenant-info': '承租人信息管理',
|
|
'contract-list': '合同列表',
|
|
'contract-add': '新增合同',
|
|
'receivable-list': '合同应收',
|
|
'invoice-register': '开票登记',
|
|
'payment-list': '收款明细',
|
|
'report-budget': '预算总结表',
|
|
'report-contract': '合同应收表'
|
|
};
|
|
|
|
// 显示指定页面
|
|
function showPage(pageName) {
|
|
const pagePath = `pages/admin/${pageName}.html`;
|
|
|
|
// 更新标题
|
|
document.getElementById('pageTitle').textContent = pageTitles[pageName] || pageName;
|
|
|
|
// 加载页面内容
|
|
fetch(pagePath)
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
// 提取 body 内容
|
|
const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/);
|
|
if (bodyMatch) {
|
|
document.getElementById('pageContent').innerHTML = bodyMatch[1];
|
|
} else {
|
|
document.getElementById('pageContent').innerHTML = '<p class="text-slate-500">页面加载失败</p>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('pageContent').innerHTML = `
|
|
<div class="text-center py-16">
|
|
<i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
|
|
<p class="text-slate-600">页面加载失败: ${pageName}</p>
|
|
<p class="text-slate-500 text-sm">${error.message}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|