278 lines
18 KiB
HTML
278 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>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="css/style.css" />
|
||
</head>
|
||
<body>
|
||
<section id="view-login" class="view-login">
|
||
<div class="login-card">
|
||
<div class="login-brand">
|
||
<span class="brand-icon">◇</span>
|
||
<h1 class="login-title">项目管理系统</h1>
|
||
<p class="login-desc">多部门协作维护项目信息</p>
|
||
</div>
|
||
<form id="loginForm" class="login-form" novalidate>
|
||
<div class="form-group">
|
||
<label for="loginUsername">账号</label>
|
||
<input type="text" id="loginUsername" class="input" name="username" placeholder="请输入账号" required autocomplete="username" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="loginPassword">密码</label>
|
||
<input type="password" id="loginPassword" class="input" name="password" placeholder="请输入密码" required autocomplete="current-password" />
|
||
</div>
|
||
<div id="loginError" class="login-error" role="alert" style="display: none;"></div>
|
||
<button type="submit" class="btn btn-primary btn-login-submit" id="btnLoginSubmit">登录</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="app" id="appMain" style="display: none;">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-brand">
|
||
<span class="brand-icon">◇</span>
|
||
<span class="brand-text">项目管理系统</span>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<a href="#" class="nav-item active" id="navList" data-nav="list">
|
||
<span class="nav-icon">▦</span>
|
||
<span>项目列表</span>
|
||
</a>
|
||
</nav>
|
||
<div class="sidebar-footer">
|
||
<span class="user-info" id="userInfo"></span>
|
||
<button type="button" class="btn-logout" id="btnLogout">退出</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<section id="view-list" class="view view-list active">
|
||
<header class="page-header">
|
||
<h1 class="page-title">项目列表</h1>
|
||
<div class="header-actions">
|
||
<button type="button" class="btn btn-primary btn-new-project" id="btnNewProject" style="display: none;">
|
||
<span class="btn-icon">+</span> 新建项目
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div class="toolbar">
|
||
<div class="search-row">
|
||
<select id="searchType" class="input input-select">
|
||
<option value="name">项目名称</option>
|
||
<option value="code">项目编号</option>
|
||
</select>
|
||
<input type="text" id="searchKeyword" class="input input-search" placeholder="输入关键词搜索" />
|
||
<button type="button" class="btn btn-search" id="btnSearch">搜索</button>
|
||
</div>
|
||
<div class="filter-row">
|
||
<div class="filter-group">
|
||
<label>项目进度</label>
|
||
<select id="filterProgress" class="input input-filter">
|
||
<option value="">全部</option>
|
||
<option value="planning">筹备中</option>
|
||
<option value="ongoing">进行中</option>
|
||
<option value="completed">已竣工</option>
|
||
<option value="settled">已结算</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>项目费用</label>
|
||
<select id="filterCost" class="input input-filter">
|
||
<option value="">全部</option>
|
||
<option value="normal">正常</option>
|
||
<option value="over">超支</option>
|
||
<option value="under">节余</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>日期筛选</label>
|
||
<select id="dateFilterType" class="input input-filter">
|
||
<option value="">不按日期</option>
|
||
<option value="signDate">签订日期</option>
|
||
<option value="startDate">开工日期</option>
|
||
<option value="plannedCompletionDate">计划竣工日期</option>
|
||
<option value="actualCompletionDate">实际竣工日期</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>起</label>
|
||
<input type="date" id="dateFrom" class="input input-date" />
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>止</label>
|
||
<input type="date" id="dateTo" class="input input-date" />
|
||
</div>
|
||
<div class="filter-group filter-check">
|
||
<label><input type="checkbox" id="dateAbnormal" /> 仅日期异常</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<div class="table-loading" id="listLoading">加载中…</div>
|
||
<div class="table-empty" id="listEmpty" style="display: none;">
|
||
<span class="empty-icon">📋</span>
|
||
<p>暂无项目数据</p>
|
||
</div>
|
||
<table class="table" id="projectTable">
|
||
<thead>
|
||
<tr>
|
||
<th>项目名称</th>
|
||
<th>合同编号</th>
|
||
<th>进度</th>
|
||
<th>费用状态</th>
|
||
<th>更新时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="projectTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="pagination">
|
||
<span class="pagination-info" id="paginationInfo">共 0 条</span>
|
||
<div class="pagination-btns">
|
||
<button type="button" class="btn btn-sm" id="btnPrev" disabled>上一页</button>
|
||
<button type="button" class="btn btn-sm" id="btnNext">下一页</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="view-detail" class="view view-detail">
|
||
<header class="page-header">
|
||
<button type="button" class="btn-back" id="btnBack">← 返回列表</button>
|
||
<h1 class="page-title detail-title" id="detailTitle">项目详情</h1>
|
||
<div class="header-actions">
|
||
<button type="button" class="btn btn-ghost" id="btnViewLog">查看操作日志</button>
|
||
<button type="button" class="btn btn-primary" id="btnSave">
|
||
<span class="btn-text">保存</span>
|
||
<span class="btn-loading" style="display: none;">保存中…</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div class="detail-loading" id="detailLoading">加载中…</div>
|
||
<div class="detail-content" id="detailContent" style="display: none;">
|
||
<div class="tabs">
|
||
<button type="button" class="tab active" data-tab="contract">合同信息</button>
|
||
<button type="button" class="tab" data-tab="costControl">成本控制</button>
|
||
<button type="button" class="tab" data-tab="receivable">应收款</button>
|
||
<button type="button" class="tab" data-tab="payable">应付款</button>
|
||
<button type="button" class="tab" data-tab="other">其他</button>
|
||
</div>
|
||
<div class="tab-panels">
|
||
<div class="tab-panel active" id="panel-contract">
|
||
<div class="form-grid" data-section="contract">
|
||
<div class="form-group"><label>序号</label><input type="text" class="input" data-field="serialNo" /></div>
|
||
<div class="form-group"><label>合同编号 <em>*</em></label><input type="text" class="input" data-field="contractCode" required /></div>
|
||
<div class="form-group"><label>供电局项目合同编号</label><input type="text" class="input" data-field="powerBureauContractCode" /></div>
|
||
<div class="form-group"><label>项目名称 <em>*</em></label><input type="text" class="input" data-field="projectName" required /></div>
|
||
<div class="form-group"><label>子项个数</label><input type="number" class="input" data-field="subItemCount" /></div>
|
||
<div class="form-group"><label>子项编码</label><input type="text" class="input" data-field="subItemCode" /></div>
|
||
<div class="form-group"><label>项目总投资（万元）</label><input type="number" class="input" data-field="totalInvestment" /></div>
|
||
<div class="form-group"><label>中标合同金额（万元）</label><input type="text" class="input" data-field="bidContractAmount" /></div>
|
||
<div class="form-group"><label>质保金比例</label><input type="text" class="input" data-field="warrantyRatio" /></div>
|
||
<div class="form-group"><label>结算金额（万元）</label><input type="number" class="input" data-field="settlementAmount" /></div>
|
||
<div class="form-group"><label>总成本测算</label><input type="number" class="input" data-field="totalCostEstimate" /></div>
|
||
<div class="form-group"><label>工程电压等级</label><input type="text" class="input" data-field="voltageLevel" /></div>
|
||
<div class="form-group"><label>工程类别</label><input type="text" class="input" data-field="projectCategory" /></div>
|
||
<div class="form-group"><label>业主单位</label><input type="text" class="input" data-field="ownerUnit" /></div>
|
||
<div class="form-group"><label>业主联系人及电话</label><input type="text" class="input" data-field="ownerContact" /></div>
|
||
<div class="form-group"><label>中标形式</label><input type="text" class="input" data-field="bidType" /></div>
|
||
<div class="form-group"><label>签订日期</label><input type="text" class="input input-date-or-text" data-field="signDate" placeholder="日期或文字" /></div>
|
||
<div class="form-group"><label>开工日期</label><input type="text" class="input input-date-or-text" data-field="startDate" placeholder="日期或文字" /></div>
|
||
<div class="form-group"><label>计划竣工日期</label><input type="text" class="input input-date-or-text" data-field="plannedCompletionDate" placeholder="日期或文字" /></div>
|
||
<div class="form-group"><label>实际竣工日期</label><input type="text" class="input input-date-or-text" data-field="actualCompletionDate" placeholder="日期或文字" /></div>
|
||
<div class="form-group"><label>质保金（万元）</label><input type="number" class="input" data-field="warrantyAmount" /></div>
|
||
<div class="form-group"><label>质保期截止日</label><input type="text" class="input" data-field="warrantyEndDate" /></div>
|
||
<div class="form-group"><label>实际退质保金日期</label><input type="text" class="input" data-field="actualWarrantyRefundDate" /></div>
|
||
<div class="form-group"><label>所属项目部</label><input type="text" class="input" data-field="projectDepartment" /></div>
|
||
<div class="form-group"><label>项目负责人及电话</label><input type="text" class="input" data-field="projectLeaderContact" /></div>
|
||
<div class="form-group form-group-full"><label>工程款拨付方式</label><input type="text" class="input" data-field="paymentMethod" /></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-panel" id="panel-costControl">
|
||
<div class="form-grid" data-section="costControl">
|
||
<div class="form-group"><label>总体成本</label><input type="number" class="input" data-field="totalCost" /></div>
|
||
<div class="form-group"><label>是否调整</label><select class="input" data-field="isAdjusted"><option value="">请选择</option><option value="是">是</option><option value="否">否</option></select></div>
|
||
<div class="form-group"><label>农民工工资（按进度计划）</label><input type="text" class="input" data-field="migrantWorkerPlan" /></div>
|
||
<div class="form-group"><label>农民工工资（实付）</label><input type="number" class="input" data-field="migrantWorkerActual" /></div>
|
||
<div class="form-group"><label>乙供材料费（控制）</label><input type="number" class="input" data-field="selfSupplyMaterialControl" /></div>
|
||
<div class="form-group"><label>应付材料费（按收款比例）</label><input type="number" class="input" data-field="materialPayableByRatio" /></div>
|
||
<div class="form-group"><label>实际发生材料费</label><input type="number" class="input" data-field="materialActualOccurred" /></div>
|
||
<div class="form-group"><label>实际支付材料费</label><input type="number" class="input" data-field="materialActualPaid" /></div>
|
||
<div class="form-group"><label>其他费用（控制）</label><input type="number" class="input" data-field="otherCostControl" /></div>
|
||
<div class="form-group"><label>应付其他费</label><input type="number" class="input" data-field="otherPayable" /></div>
|
||
<div class="form-group"><label>实际其他费用</label><input type="number" class="input" data-field="otherActual" /></div>
|
||
<div class="form-group"><label>税金</label><input type="number" class="input" data-field="tax" /></div>
|
||
<div class="form-group"><label>利润（万元）</label><input type="number" class="input" data-field="profit" /></div>
|
||
<div class="form-group"><label>实际利润（万元）</label><input type="number" class="input" data-field="actualProfit" /></div>
|
||
<div class="form-group"><label>成本结算金额（万元）</label><input type="number" class="input" data-field="costSettlementAmount" /></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-panel" id="panel-receivable">
|
||
<div class="form-grid" data-section="receivable">
|
||
<div class="form-group"><label>应收款（完成进度款）</label><input type="number" class="input" data-field="receivableProgress" /></div>
|
||
<div class="form-group"><label>开票金额（万元）</label><input type="number" class="input" data-field="invoiceAmount" /></div>
|
||
<div class="form-group"><label>实际收款金额（万元）</label><input type="number" class="input" data-field="actualReceiptAmount" /></div>
|
||
<div class="form-group"><label>实际收款完成率</label><input type="text" class="input" data-field="actualReceiptRate" placeholder="%" /></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-panel" id="panel-payable">
|
||
<div class="form-grid" data-section="payable">
|
||
<div class="form-group"><label>应付款金额（万元）</label><input type="number" class="input" data-field="payableAmount" /></div>
|
||
<div class="form-group"><label>实际付款金额（万元）</label><input type="number" class="input" data-field="actualPaymentAmount" /></div>
|
||
<div class="form-group"><label>未收款（万元）</label><input type="number" class="input" data-field="unreceivedAmount" /></div>
|
||
<div class="form-group"><label>实际付款完成率</label><input type="text" class="input" data-field="actualPaymentRate" placeholder="%" /></div>
|
||
<div class="form-group"><label>民工工资清欠金额（万元）</label><input type="number" class="input" data-field="migrantWorkerArrears" /></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-panel" id="panel-other">
|
||
<div class="form-grid" data-section="other">
|
||
<div class="form-group"><label>结算后成本测算金额</label><input type="number" class="input" data-field="settlementCostEstimate" /></div>
|
||
<div class="form-group"><label>结算人工费</label><input type="number" class="input" data-field="settlementLaborCost" /></div>
|
||
<div class="form-group"><label>结算材料费</label><input type="number" class="input" data-field="settlementMaterialCost" /></div>
|
||
<div class="form-group"><label>结算其他费</label><input type="number" class="input" data-field="settlementOtherCost" /></div>
|
||
<div class="form-group"><label>到期应结算项目个数</label><input type="number" class="input" data-field="dueSettlementCount" /></div>
|
||
<div class="form-group"><label>到期未完成结算个数</label><input type="number" class="input" data-field="overdueSettlementCount" /></div>
|
||
<div class="form-group form-group-full"><label>存在的问题</label><textarea class="input input-area" data-field="existingProblems" rows="2"></textarea></div>
|
||
<div class="form-group form-group-full"><label>建议措施</label><textarea class="input input-area" data-field="suggestions" rows="2"></textarea></div>
|
||
<div class="form-group"><label>累计进度</label><input type="text" class="input" data-field="cumulativeProgress" placeholder="%" /></div>
|
||
<div class="form-group form-group-full"><label>备注</label><textarea class="input input-area" data-field="remark" rows="2"></textarea></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="drawer-overlay" id="logOverlay" aria-hidden="true"></div>
|
||
<div class="drawer" id="logDrawer">
|
||
<div class="drawer-header">
|
||
<h2 class="drawer-title">操作日志</h2>
|
||
<button type="button" class="drawer-close" id="logDrawerClose">×</button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<div class="drawer-loading" id="logLoading">加载中…</div>
|
||
<div class="drawer-empty" id="logEmpty" style="display: none;">
|
||
<span class="empty-icon">📜</span>
|
||
<p>暂无操作记录</p>
|
||
</div>
|
||
<ul class="log-list" id="logList"></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast" role="alert" aria-live="polite"></div>
|
||
|
||
<!-- Agentation 可视化反馈工具栏（https://github.com/benjitaylor/agentation） -->
|
||
<div id="agentation-root"></div>
|
||
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script type="module" src="dist/agentation.js"></script>
|
||
</body>
|
||
</html>
|