save code
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,934 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>海洋项目管理系统 - 设计参考</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f0f2f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-selector {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.page-selector h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.page-selector button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 5px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.page-selector button:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
|
||||
.page-selector button.active {
|
||||
background: #096dd9;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Login Page Styles */
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #001529 0%, #1890ff 100%);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 400px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #1890ff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.checkbox-group input {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
|
||||
/* Main Layout Styles */
|
||||
.main-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 256px;
|
||||
background: white;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
padding-top: 64px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border-left-color: #1890ff;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
background: #001529;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 256px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 256px;
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
/* Dashboard Styles */
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 300px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.recent-project {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.project-amount {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* Project List Styles */
|
||||
.toolbar {
|
||||
background: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.action-link:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
height: 48px;
|
||||
background: white;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.page-btn:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
/* Project Detail Styles */
|
||||
.breadcrumb {
|
||||
height: 32px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.info-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-item-label {
|
||||
width: 120px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-item-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Page Selector -->
|
||||
<div class="page-selector">
|
||||
<h3>页面切换</h3>
|
||||
<button class="active" onclick="showPage('login')">登录页面</button>
|
||||
<button onclick="showPage('dashboard')">仪表盘</button>
|
||||
<button onclick="showPage('project-list')">项目列表</button>
|
||||
<button onclick="showPage('project-detail')">项目详情</button>
|
||||
</div>
|
||||
|
||||
<!-- Login Page -->
|
||||
<div id="login" class="page login-page active">
|
||||
<div class="login-box">
|
||||
<h1 class="login-title">海洋项目管理系统</h1>
|
||||
<div class="form-group">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-input" placeholder="请输入用户名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">密码</label>
|
||||
<input type="password" class="form-input" placeholder="请输入密码">
|
||||
</div>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="remember">
|
||||
<label for="remember">记住密码</label>
|
||||
</div>
|
||||
<button class="btn-login">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Page -->
|
||||
<div id="dashboard" class="page">
|
||||
<div class="main-layout">
|
||||
<div class="sidebar">
|
||||
<div class="menu-item active">📊 仪表盘</div>
|
||||
<div class="menu-item">📁 项目管理</div>
|
||||
<div class="menu-item">👥 用户管理</div>
|
||||
<div class="menu-item">📈 项目统计</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div class="header">
|
||||
<div class="logo">海洋项目管理系统</div>
|
||||
<div class="user-info">
|
||||
<span>张三 (市场部)</span>
|
||||
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2 style="margin-bottom: 24px; font-size: 24px; font-weight: 600; color: #333;">仪表盘</h2>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">项目总数</div>
|
||||
<div class="stat-value">156</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">进行中</div>
|
||||
<div class="stat-value">68</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">已完成</div>
|
||||
<div class="stat-value">88</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总合同金额(万元)</div>
|
||||
<div class="stat-value">12,450</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<div class="card">
|
||||
<div class="card-title">项目趋势图</div>
|
||||
<div class="chart-placeholder">
|
||||
[柱状图/折线图显示区域]
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">最近项目</div>
|
||||
<div class="recent-project">
|
||||
<div class="project-name">某电力基建工程项目</div>
|
||||
<div class="project-meta">2026-01-25</div>
|
||||
<div class="project-amount">950万元</div>
|
||||
</div>
|
||||
<div class="recent-project">
|
||||
<div class="project-name">业扩工程项目</div>
|
||||
<div class="project-meta">2026-01-24</div>
|
||||
<div class="project-amount">500万元</div>
|
||||
</div>
|
||||
<div class="recent-project">
|
||||
<div class="project-name">客户工程项目</div>
|
||||
<div class="project-meta">2026-01-23</div>
|
||||
<div class="project-amount">300万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project List Page -->
|
||||
<div id="project-list" class="page">
|
||||
<div class="main-layout">
|
||||
<div class="sidebar">
|
||||
<div class="menu-item">📊 仪表盘</div>
|
||||
<div class="menu-item active">📁 项目管理</div>
|
||||
<div class="menu-item">👥 用户管理</div>
|
||||
<div class="menu-item">📈 项目统计</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div class="header">
|
||||
<div class="logo">海洋项目管理系统</div>
|
||||
<div class="user-info">
|
||||
<span>张三 (市场部)</span>
|
||||
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2 style="margin-bottom: 24px; font-size: 24px; font-weight: 600; color: #333;">项目管理</h2>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<input type="text" class="search-input" placeholder="搜索项目名称、合同编号">
|
||||
<select class="select-input">
|
||||
<option>工程类别</option>
|
||||
<option>基建</option>
|
||||
<option>业扩</option>
|
||||
<option>客户</option>
|
||||
</select>
|
||||
<select class="select-input">
|
||||
<option>所属项目部</option>
|
||||
<option>项目部一</option>
|
||||
<option>项目部二</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-primary">+ 新建项目</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>合同编号</th>
|
||||
<th>项目名称</th>
|
||||
<th>工程类别</th>
|
||||
<th>签订日期</th>
|
||||
<th>合同金额(万元)</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PRJ2026001</td>
|
||||
<td>某电力基建工程项目</td>
|
||||
<td><span class="tag tag-blue">基建</span></td>
|
||||
<td>2026-01-25</td>
|
||||
<td>950.00</td>
|
||||
<td><span class="tag tag-green">进行中</span></td>
|
||||
<td>
|
||||
<span class="action-link">查看</span>
|
||||
<span class="action-link">编辑</span>
|
||||
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PRJ2026002</td>
|
||||
<td>业扩工程项目</td>
|
||||
<td><span class="tag tag-blue">业扩</span></td>
|
||||
<td>2026-01-24</td>
|
||||
<td>500.00</td>
|
||||
<td><span class="tag tag-green">进行中</span></td>
|
||||
<td>
|
||||
<span class="action-link">查看</span>
|
||||
<span class="action-link">编辑</span>
|
||||
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PRJ2026003</td>
|
||||
<td>客户工程项目</td>
|
||||
<td><span class="tag tag-blue">客户</span></td>
|
||||
<td>2026-01-23</td>
|
||||
<td>300.00</td>
|
||||
<td><span class="tag" style="background: #f5f5f5; color: #999;">已完成</span></td>
|
||||
<td>
|
||||
<span class="action-link">查看</span>
|
||||
<span class="action-link">编辑</span>
|
||||
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Detail Page -->
|
||||
<div id="project-detail" class="page">
|
||||
<div class="main-layout">
|
||||
<div class="sidebar">
|
||||
<div class="menu-item">📊 仪表盘</div>
|
||||
<div class="menu-item active">📁 项目管理</div>
|
||||
<div class="menu-item">👥 用户管理</div>
|
||||
<div class="menu-item">📈 项目统计</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div class="header">
|
||||
<div class="logo">海洋项目管理系统</div>
|
||||
<div class="user-info">
|
||||
<span>张三 (市场部)</span>
|
||||
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="breadcrumb">首页 > 项目管理 > 项目详情</div>
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">某电力基建工程项目</h1>
|
||||
<div class="btn-group">
|
||||
<button class="btn-edit">编辑</button>
|
||||
<button class="btn-delete">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">基本信息</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">合同编号</div>
|
||||
<div class="info-item-value">PRJ2026001</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">项目名称</div>
|
||||
<div class="info-item-value">某电力基建工程项目</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">工程类别</div>
|
||||
<div class="info-item-value"><span class="tag tag-blue">基建</span></div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">合同金额</div>
|
||||
<div class="info-item-value">950.00 万元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">项目时间</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">签订日期</div>
|
||||
<div class="info-item-value">2026-01-25</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">开工日期</div>
|
||||
<div class="info-item-value">2026-01-15</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">计划竣工日期</div>
|
||||
<div class="info-item-value">2026-12-31</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">实际竣工日期</div>
|
||||
<div class="info-item-value">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">成本管理</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">总体成本控制</div>
|
||||
<div class="info-item-value">800.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">人工成本控制</div>
|
||||
<div class="info-item-value">300.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">材料成本控制</div>
|
||||
<div class="info-item-value">400.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">其他费用控制</div>
|
||||
<div class="info-item-value">100.00 万元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">合同财务</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">合同金额</div>
|
||||
<div class="info-item-value">950.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">质保金比例</div>
|
||||
<div class="info-item-value">5.00%</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">质保金金额</div>
|
||||
<div class="info-item-value">47.50 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">质保到期日</div>
|
||||
<div class="info-item-value">2028-12-31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">收款付款</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">项目进度</div>
|
||||
<div class="info-item-value">60.00%</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">应收款金额</div>
|
||||
<div class="info-item-value">570.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">实际收款金额</div>
|
||||
<div class="info-item-value">475.00 万元</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">收款完成率</div>
|
||||
<div class="info-item-value">50.00%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card-title">结算信息</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">成本结算金额</div>
|
||||
<div class="info-item-value">-</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">到期结算项目</div>
|
||||
<div class="info-item-value">0 个</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">未结算项目</div>
|
||||
<div class="info-item-value">0 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card full-width">
|
||||
<div class="info-card-title">项目管理</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">所属项目部</div>
|
||||
<div class="info-item-value">项目部一</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">项目负责人</div>
|
||||
<div class="info-item-value">李四 13900000001</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">工程款拨付方式</div>
|
||||
<div class="info-item-value">按进度付款</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">存在的问题</div>
|
||||
<div class="info-item-value">-</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">建议措施</div>
|
||||
<div class="info-item-value">-</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-label">备注</div>
|
||||
<div class="info-item-value">备注信息</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showPage(pageId) {
|
||||
// Hide all pages
|
||||
document.querySelectorAll('.page').forEach(page => {
|
||||
page.classList.remove('active');
|
||||
});
|
||||
|
||||
// Remove active class from all buttons
|
||||
document.querySelectorAll('.page-selector button').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show selected page
|
||||
document.getElementById(pageId).classList.add('active');
|
||||
|
||||
// Add active class to clicked button
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,158 @@
|
||||
# 产品设计文档修改日志
|
||||
|
||||
## 修改时间
|
||||
2026-01-25
|
||||
|
||||
## 修改说明
|
||||
|
||||
根据技术总监的要求,从产品设计文档中移除Excel数据导入功能,改为在部署时直接写入初始数据。
|
||||
|
||||
## 修改内容
|
||||
|
||||
### 1. 移除的内容
|
||||
|
||||
#### 1.1 产品特点(第1.3节)
|
||||
**删除:**
|
||||
- ❌ "支持Excel数据导入,便于数据迁移"
|
||||
|
||||
**修改为:**
|
||||
- ✅ "数据初始化在部署时完成,无需手动导入"
|
||||
|
||||
#### 1.2 数据导入章节(第2.5节)
|
||||
**完全删除:**
|
||||
- ❌ 2.5.1 Excel导入功能
|
||||
- ❌ 2.5.2 数据管理
|
||||
|
||||
**删除的子内容:**
|
||||
- 支持从Excel文件批量导入项目数据
|
||||
- 系统自动验证数据格式
|
||||
- 导入前显示数据预览
|
||||
- 导入后显示导入结果(成功数、失败数)
|
||||
- 支持错误日志导出
|
||||
- 查看已导入的数据
|
||||
- 编辑和删除导入的数据
|
||||
- 数据验证和提示
|
||||
- 数据备份功能
|
||||
|
||||
#### 1.3 项目列表页(第3.2.5节)
|
||||
**删除:**
|
||||
- ❌ "批量操作(可选)"
|
||||
|
||||
#### 1.4 常见问题(第6.2节)
|
||||
**删除:**
|
||||
- ❌ Q: 导入Excel失败怎么办?
|
||||
- ❌ A: 请检查Excel格式是否符合要求,查看错误日志。
|
||||
|
||||
#### 1.5 数据来源章节(第7.1节)
|
||||
**删除:**
|
||||
- ❌ "系统支持从Excel文件导入项目数据,Excel文件格式参照提供的模板。"
|
||||
|
||||
**修改为:**
|
||||
- ✅ "系统初始数据在部署时直接写入数据库,包括:"
|
||||
- 默认管理员账号
|
||||
- 基础项目分类信息
|
||||
- 示例项目数据(可选)
|
||||
- ✅ "部署完成后,用户可以直接使用系统,无需手动导入数据。"
|
||||
|
||||
### 2. 保留的内容
|
||||
|
||||
- ✅ 项目管理功能(创建、编辑、删除、查询)
|
||||
- ✅ 数据查询和统计功能
|
||||
- ✅ 权限控制功能
|
||||
- ✅ 用户管理功能
|
||||
- ✅ 数据导出功能(在项目列表页导出统计数据)
|
||||
|
||||
### 3. 章节编号
|
||||
|
||||
章节编号保持不变,因为删除的是子章节(2.5),主章节编号不需要改变。
|
||||
|
||||
## 文档变化
|
||||
|
||||
### 修改前
|
||||
- **文档行数**: 404行
|
||||
- **包含功能**: 项目管理 + Excel导入
|
||||
|
||||
### 修改后
|
||||
- **文档行数**: 389行
|
||||
- **包含功能**: 项目管理 + 部署时初始化数据
|
||||
- **精简**: 减少15行(约3.7%)
|
||||
|
||||
## 功能说明
|
||||
|
||||
### 数据初始化方式变更
|
||||
|
||||
**修改前:**
|
||||
- 用户登录系统后,手动导入Excel文件
|
||||
- 系统验证数据格式并导入数据库
|
||||
- 用户提供Excel模板
|
||||
|
||||
**修改后:**
|
||||
- 部署系统时,由开发人员或运维人员直接写入初始数据
|
||||
- 用户登录系统后,可以直接使用
|
||||
- 无需手动导入任何数据
|
||||
|
||||
### 用户操作简化
|
||||
|
||||
**修改前:**
|
||||
1. 部署系统
|
||||
2. 登录系统
|
||||
3. 导入Excel文件
|
||||
4. 验证数据
|
||||
5. 开始使用
|
||||
|
||||
**修改后:**
|
||||
1. 部署系统(包含初始数据)
|
||||
2. 登录系统
|
||||
3. 开始使用
|
||||
|
||||
### 优势
|
||||
|
||||
1. **操作更简单**: 用户无需手动导入数据
|
||||
2. **减少错误**: 避免Excel格式错误
|
||||
3. **节省时间**: 用户登录即可使用
|
||||
4. **数据更可靠**: 由专业人员准备初始数据
|
||||
|
||||
## 技术实现说明
|
||||
|
||||
本修改仅涉及产品设计文档,不涉及技术实现。技术文档(技术架构文档.md)中可能仍保留Excel数据导入的技术方案,供开发人员参考。
|
||||
|
||||
如果需要完全移除Excel数据导入功能,还需要修改以下文档:
|
||||
- `技术架构文档.md` - 删除Excel导入相关的技术方案
|
||||
- `后端架构设计.md` - 删除Excel导入相关的接口设计
|
||||
- `api.md` - 删除Excel导入相关的API接口
|
||||
|
||||
## 影响范围
|
||||
|
||||
### 文档
|
||||
- ✅ `产品设计文档.md` - 已修改
|
||||
|
||||
### 产品功能
|
||||
- ✅ 移除Excel数据导入功能
|
||||
- ✅ 简化初始数据加载方式
|
||||
|
||||
### 用户操作
|
||||
- ✅ 用户无需手动导入数据
|
||||
- ✅ 部署后直接使用系统
|
||||
|
||||
## 后续工作
|
||||
|
||||
### 待确认
|
||||
- [ ] 确认技术文档是否需要同步删除Excel导入相关内容
|
||||
- [ ] 确认后端开发计划是否需要调整
|
||||
- [ ] 确认初始数据准备的流程和责任人
|
||||
|
||||
### 可选优化
|
||||
- [ ] 考虑提供数据导出功能,方便用户备份数据
|
||||
- [ ] 考虑提供数据恢复功能,方便用户导入备份
|
||||
|
||||
## 总结
|
||||
|
||||
本次修改成功从产品设计文档中移除了Excel数据导入功能,改为在部署时直接写入初始数据。这样可以简化用户操作,减少错误,节省时间。
|
||||
|
||||
文档从404行精简到389行,减少了3.7%的内容,使文档更加简洁和聚焦。
|
||||
|
||||
---
|
||||
|
||||
**修改人**: 技术总监
|
||||
**修改时间**: 2026-01-25
|
||||
**审核状态**: 待审核
|
||||
+8
-22
@@ -16,7 +16,7 @@
|
||||
- 无需复杂配置,降低使用门槛
|
||||
- 基于角色的权限控制(RBAC)
|
||||
- 简单易用的用户界面
|
||||
- 支持Excel数据导入,便于数据迁移
|
||||
- 数据初始化在部署时完成,无需手动导入
|
||||
|
||||
## 2. 功能需求
|
||||
|
||||
@@ -181,21 +181,6 @@
|
||||
- 项目管理相关字段
|
||||
- 不能修改:合同编号、项目名称、工程类别、业主信息等基础字段
|
||||
|
||||
### 2.5 数据导入
|
||||
|
||||
#### 2.5.1 Excel导入功能
|
||||
- 支持从Excel文件批量导入项目数据
|
||||
- 系统自动验证数据格式
|
||||
- 导入前显示数据预览
|
||||
- 导入后显示导入结果(成功数、失败数)
|
||||
- 支持错误日志导出
|
||||
|
||||
#### 2.5.2 数据管理
|
||||
- 查看已导入的数据
|
||||
- 编辑和删除导入的数据
|
||||
- 数据验证和提示
|
||||
- 数据备份功能
|
||||
|
||||
## 3. 用户界面
|
||||
|
||||
### 3.1 界面设计原则
|
||||
@@ -250,7 +235,6 @@
|
||||
- 关键词搜索
|
||||
- 排序功能
|
||||
- 创建新项目按钮
|
||||
- 批量操作(可选)
|
||||
- 分页功能
|
||||
|
||||
#### 3.2.6 项目详情页
|
||||
@@ -341,9 +325,6 @@ A: 目前系统不支持批量编辑,请逐个编辑。
|
||||
**Q: 项目创建后能否修改工程类别?**
|
||||
A: 可以,但有权限限制,请联系管理员。
|
||||
|
||||
**Q: 导入Excel失败怎么办?**
|
||||
A: 请检查Excel格式是否符合要求,查看错误日志。
|
||||
|
||||
### 6.3 联系支持
|
||||
- 技术支持:提供技术帮助和问题解答
|
||||
- 系统管理员:负责用户管理和权限分配
|
||||
@@ -351,8 +332,13 @@ A: 请检查Excel格式是否符合要求,查看错误日志。
|
||||
|
||||
## 7. 数据来源
|
||||
|
||||
### 7.1 原始数据
|
||||
系统支持从Excel文件导入项目数据,Excel文件格式参照提供的模板。
|
||||
### 7.1 初始数据
|
||||
系统初始数据在部署时直接写入数据库,包括:
|
||||
- 默认管理员账号
|
||||
- 基础项目分类信息
|
||||
- 示例项目数据(可选)
|
||||
|
||||
部署完成后,用户可以直接使用系统,无需手动导入数据。
|
||||
|
||||
### 7.2 工程分类
|
||||
根据业务需求,工程项目分为以下类别:
|
||||
|
||||
Reference in New Issue
Block a user