Skip to content

B
buildbank-replica
Commit e694689b authored by 秦垚玲's avatar 秦垚玲
Browse files
Options

fix:调整

parent 60952100
Hide whitespace changes
Inline Side-by-side
Showing with 1214 additions and 212 deletions
history_balance.html
View file @ e694689b
......@@ -3,229 +3,987 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活期账户历史余额查询结果</title>
<title>账户信息查询 - 实时余额</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
/* 顶部导航栏 */
.top-nav {
background-color: #ffffff;
border-bottom: 2px solid #1890ff;
display: flex;
align-items: center;
padding: 10px 20px;
gap: 40px;
}
.top-nav a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
.breadcrumb span {
color: #000;
/* 面包屑 */
.breadcrumb {
height: 42px;
background-color: #f4f5fb;
border: 1px solid #dfe1f2;
line-height: 40px;
padding-left: 10px;
margin: 15px 0;
font-size: 14px;
color: #2C2C2C;
}
.breadcrumb_item{
font-weight: bold;
}
/* 账户标题栏 */
.account-header {
padding: 20px;
border-bottom: 2px solid #1890ff;
/* 筛选与工具栏 */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 42px;
margin-top: 15px;
line-height: 42px;
padding-left: 10px;
padding-right: 11px;
}
.toolbar .left {
display: flex;
align-items: center;
gap: 5px;
margin-left: 15px;
}
.toolbar .right {
display: flex;
align-items: center;
}
.account-header .account-number {
border: 1px solid #1890ff;
.toolbar a {
color: #1890ff;
padding: 10px 15px;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
}
#rightTypes{
display: none;
width: 100%;
height: 42px;
margin-top: 15px;
line-height: 42px;
padding-right: 11px;
}
.right_box{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.icon5 {
padding-left: 16px;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/filter.png) left no-repeat;
}
.iBtn {
margin-right: 10px;
display: inline-block;
color: #0066b3;
cursor: pointer;
line-height: 24px;
vertical-align: middle;
}
/* 账户信息表格 */
.info-table {
a {
text-decoration: none;
outline: none;
}
.tableRBtn {
padding-left: 16px;
color: #1f93d5;
cursor: pointer;
}
.tableLBtn_box{
position: relative;
}
.tableLBtn_active{
padding: 10px 10px 10px 10px;
}
.tableLBtn_box:hover .tableLBtn_active{
position: relative;
border-left: 1px solid #d1d0d0;
border-top: 1px solid #d1d0d0;
border-right: 1px solid #d1d0d0;
background: #FFFFFF;
line-height: 14px;
z-index: 9999;
}
.tableLBtn_box:hover .downloadBox{
display: block;
}
.downloadBox{
display: none;
}
.downloadBox{
position: absolute;
top: 33px;
z-index: 999;
}
.downloadBox span {
display: block;
border-left: 1px solid #d1d0d0;
border-top: 1px solid #d1d0d0;
border-right: 1px solid #d1d0d0;
background: #FFFFFF;
padding: 10px 10px 0px 10px;
height: 24px;
}
.downloadBox span a {
float: none;
font-size: 1em;
padding-left: 16px;
margin-right: 0px;
background-color: #FFFFFF;
}
.underline {
text-decoration: underline;
}
.downloadBox .firstLi {
border-top: 1px solid #d9d9d9;
}
.downloadBox ul {
border: 1px solid #d9d9d9;
padding: 15px 10px 15px 10px;
background: #FFFFFF;
list-style: none;
}
.downloadBox ul li {
border-bottom: 1px solid #d9d9d9;
color: #0066bb;
line-height: 32px;
width: 94px;
cursor: pointer;
background: #FFFFFF;
}
.download{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center;
}
.print{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tablePrint.png) no-repeat left center;
}
/* 筛选条件栏 */
.tableHide {
background: #F7FAFD;
width: 100%;
border-collapse: collapse;
margin: 0;
}
.info-table td {
padding: 12px 20px;
border: 1px solid #d0e8ff;
.tableHide tr td {
height: 42px;
padding-left: 10px;
}
.info-table td:first-child {
width: 20%;
.hideTitle {
width: 210px;
text-align: right;
color: #333;
font-weight: 500;
padding-right: 5px;
}
.info-table td:nth-child(2) {
width: 30%;
.select {
height: 27px;
border: 1px solid #c5c5c5;
padding: 3px 2px 3px 2px;
vertical-align: middle;
font-size: 1em;
}
.info-table td:nth-child(3) {
width: 20%;
text-align: right;
color: #333;
font-weight: 500;
/* .select:focus {
border: 1px solid #62a7e3;
} */
/* 尝试覆盖系统高亮 */
.select:focus {
outline: none; /* 去掉聚焦时的蓝色外圈 */
border-color: #808080; /* 边框变灰 */
}
/* 针对 WebKit 浏览器的滚动条和选中项 */
.select::-webkit-scrollbar-thumb {
background-color: #808080;
}
.inTxt {
border: 1px solid #c5c5c5;
height: 27px;
line-height: 27px;
padding-left: 10px;
width: 220px;
vertical-align: middle;
font-size: 1em;
}
.info-table td:nth-child(4) {
width: 30%;
.slSty1 {
width: 232px;
}
/* 余额列表表格 */
.balance-table {
/* 表格样式 */
.tableList {
background: #FFF;
text-align: center;
border: 1px solid #62a7e3;
width: 100%;
overflow: hidden;
}
table {
overflow: hidden;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 0;
padding: 0;
}
.balance-table th {
background-color: #cce5ff;
color: #000;
padding: 15px 10px;
text-align: center;
border: 1px solid #b3d9ff;
th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
text-align: left;
vertical-align: middle;
}
table th,
table td {
border: none !important; /* 使用 !important 确保覆盖原有的行内样式或高优先级样式 */
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
}
thead, tbody, tfoot, tr {
margin: 0;
padding: 0;
border: 0;
}
tr td .checkbox {
margin-left: 15px;
}
.tableList tr td {
overflow: hidden;
height: 35px;
padding: 0px 5px 0px 5px;
}
.tableList .tableListHead td {
background: #c8e0f5;
font-weight: bold;
font-size: 18px;
text-align: center;
}
.balance-table td {
padding: 15px 10px;
border: 1px solid #b3d9ff;
.table_center{
text-align: center;
font-size: 18px;
}
/* 工具栏 */
.toolbar {
th {
background-color: #e6f4ff;
color: #1890ff;
padding: 10px;
text-align: left;
border: 1px solid #e8e8e8;
font-weight: normal;
}
td {
padding: 10px;
border: 1px solid #e8e8e8;
}
.tableLink {
color: #1f93d5;
margin: 0 3px;
cursor: pointer;
}
.table-action-bar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
justify-content: space-between;
height: 35px;
line-height: 35px;
padding: 0 10px 0 10px;
background-color: #f6fbf4;
border: 1px solid #e8e8e8;
border-top: none;
border-bottom: none;
}
.toolbar a {
.table-action-bar a {
color: #1890ff;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
}
/* 分页栏 */
.pagination-bar {
.lineLeft {
float: left;
margin-right: 20px;
color: #2C2C2C !important;
}
.lineRight{
float: right;
display: flex;
align-items: center;
}
/* 分页 */
.pagination {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
padding: 0 10px 0 10px;
height: 35px;
line-height: 35px;
background-color: #f6fbf4;
border: 1px solid #e8e8e8;
border-top: none;
}
.pagination-bar a {
.pagination a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
.pagination-bar input {
width: 40px;
.pagination input {
width: 30px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 2px;
}
/* 底部按钮 */
.bottom-btn {
.curPageNum {
padding: 4px 4px;
border: 1px solid #DBDBDB;
margin-right: 8px;
line-height: normal;
}
/* 功能按钮组 */
.btn-group {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.bottom-btn button {
background-color: #1890ff;
color: #fff;
border: none;
padding: 15px 50px;
border-radius: 4px;
.btn-group button {
box-sizing: content-box;
height: 35px;
min-width: 60px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
border: 0;
cursor: pointer;
font-size: 18px;
color: #FFF;
margin-right: 15px;
font-weight: bold;
background-color: #1f93d5;
font-size: 1em;
vertical-align: middle;
border-radius: 5px;
}
/* 温馨提示 */
.tips-section {
padding: 0 10px 10px 10px;
width: auto;
overflow: hidden;
border: 1px solid #f1f5f9;
background-color: #f7fafd;
margin-top: 50px;
}
.tips-title {
height: 42px;
color: #FF0000;
line-height: 42px;
font-weight: bold;
}
.tips-section p {
line-height: 24px;
}
.tips-section a {
font-weight: bolder;
color: #0066b3;
text-decoration: none;
}
/* 账户信息卡片 */
.account-card {
margin: 10px 0;
border-radius: 4px;
}
.account-card .account-number {
background: #fff;
position: relative;
}
.account-card .account-number::before {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 0;
width: 42px;
}
.account-card .account-number::after {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 158px;
right: 0
}
.account-number div {
display: inline-block;
border: 2px solid #1f93d5;
border-bottom: none;
color: #1f93d5;
padding: 4px 8px;
border-radius: 4px 4px 0 0;
margin-left: 40px;
height: 40px;
width: 120px;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin-top: 6px;
border: 1px solid #62a7e3;
}
.info-table td {
padding: 8px 15px;
border: none
}
.info-table tr {
border-top: 1px solid #c5d7e8;
}
.info-table tr:first-child {
border-top: 1px solid #1f93d5;
}
.info-table tr td:nth-child(2n+1) {
background-color: #f7fbfe;
text-align: right;
}
.info-table td:first-child {
width: 230px;
background: #fafafa;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a>
<a href="#">批量账户查询</a>
<a href="#">电子回单查询</a>
<a href="#">集成资讯 ∨</a>
<a href="#">电子对账 ∨</a>
<a href="#">经营分析</a>
<a href="#">操作指南</a>
<a href="#">明细清单</a>
</div> -->
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span>活期账户</span>
</div>
<!-- 账户标题栏 -->
<div class="account-header">
<div class="account-number">4205****1941</div>
当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
</div>
<!-- 账户信息表格 -->
<table class="info-table">
<tr>
<td>账户名称：</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>账　　号：</td>
<td>42050123704500001941</td>
</tr>
<tr>
<td>开户行名称：</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td>
<td>账户状态：</td>
<td>正常</td>
</tr>
</table>
<!-- 余额列表表格 -->
<table class="balance-table">
<thead>
<!-- 账户信息卡片 -->
<div class="account-card">
<div class="account-number">
<div>4205***1941</div>
</div>
<table class="info-table" border="none">
<tr>
<th>日期 ➤</th>
<th>币种 ➤</th>
<th>钞/汇 ➤</th>
<th>账面余额 ➤</th>
<th>可用余额 ➤</th>
<th>账户控制状态 ➤</th>
<th>>></th>
<td>账户名称：</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>账 &nbsp;号：</td>
<td>42050123704500001941</td>
</tr>
</thead>
<tbody>
<tr>
<td>20260428</td>
<td>人民币元</td>
<td>钞</td>
<td>775, 342.62</td>
<td>775, 342.62</td>
<td>开户行名称：</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td>
<td>账户状态：</td>
<td>正常</td>
<td></td>
</tr>
</tbody>
</table>
<!-- 工具栏 -->
<div class="toolbar">
<a href="#"><span>↓</span> 下载当前页</a>
<a href="#"><span>↓</span> 下载全部</a>
<a href="#"><span>🖨️</span> 打印</a>
</table>
</div>
<div id="rightTypes">
<div class="right_box">
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载当前页</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
</ul>
</div>
</div>
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
</ul>
</div>
</div>
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn print">打印</a>
</div>
<div class="downloadBox" style="right: 0; ">
<ul>
<li onclick="printPage('1')" class="firstLi">网页打印</li>
<li onclick="printPage('2')">PDF打印</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 账户列表表格 -->
<div style="overflow: hidden; width: 100%;">
<table class="tableList" cellpadding="0" cellspacing="0" border="0" width="100%" id="rsTable2" name="rsTable2">
<tbody>
<tr class="tableListHead">
<!-- 分页栏 -->
<div class="pagination-bar">
<td nowrap=""><a id="td2" style="cursor: pointer;width: 137.94px;">日期<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap=""><a id="td3" style="cursor: pointer;width: 137.94px;">币种<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap=""><a id="td4" style="cursor: pointer;width: 137.94px;">钞/汇<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap=""><a id="td5" style="cursor: pointer;width: 137.94px;">账面余额<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap=""><a id="td7" style="cursor: pointer;width: 137.94px;">可用余额<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap=""><a id="td11" style="cursor: pointer;width: 137.94px;">账户控制状态<img class="sortImgClass" src="https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png" style="vertical-align:text-bottom;_vertical-align:middle;margin-left:3px;"></a></td>
<td nowrap="" style="width: 26.52px;"><a id="showOrHideTableBtn" onclick="setShowOrHideRsTable();parent.iFrameHeight();" class="tableLink">&gt;&gt;</a></td>
</tr>
<tr onmouseover="tdOver(this)" onmouseout="tdOut(this)" class="tableListBody">
<td class="txtLeft fzWord table_center">20260429&nbsp;</td>
<td nowrap="" class="table_right table_center">人民币元&nbsp;</td>
<td nowrap="" class="table_right table_center">钞&nbsp;</td>
<td nowrap="" class="table_right table_center" id="bookBalance_42050123704500001941@420237045@1@156@202004">775,342.62</td>
<td nowrap="" class="table_right table_center" id="bookBalance_42050123704500001941@420237045@1@156@202004">775,342.62</td>
<td class="table_center">正常&nbsp;</td>
<!-- <td style="display:none;" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">2026-04-29<br>11:01:15&nbsp;</td> -->
<td>&nbsp;</td>
</tr>
<!-- <tr onmouseover="tdOver(this)" onmouseout="tdOut(this)" class=" tableListTr tableListSlt">
<td nowrap="" class="table_center">
小计:
</td>
<td class="fzWord">&nbsp;</td>
<td>人民币元&nbsp;</td>
<td>&nbsp;</td>
<td nowrap="" class="txtRight table_center">775,342.62</td>
<td nowrap="" class="txtRight table_center">0.00&nbsp;</td>
<td nowrap="" class="txtRight table_center">775,342.62</td>
<td nowrap="" class="txtRight table_center">0.00&nbsp;</td>
<td nowrap="" class="txtRight table_center">0.00&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td style="display:none;">&nbsp;</td>
<td style="display:none;">0.00&nbsp;</td>
<td style="display:none;">&nbsp;</td>
<td style="display:none;">0.00&nbsp;</td>
<td style="display:none;">0.00&nbsp;</td>
<td style="display:none;">0.00&nbsp;</td>
<td nowrap="">&nbsp;</td>
</tr> -->
<tr style="display:none" id="queryProcess" class=" tableListTr">
<td colspan="13" class="table_left">
<div id="queryProcessDiv">正在进行余额查询,请稍候<img src="/V6/STY3/CN/images6/NCCB_jd2.gif"></div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 表格下方的工具栏 -->
<div class="table-action-bar">
<div></div>
<!-- <a class="lineLeft"><div id="lable2" style="position: relative; left: 10px;"><input type="checkbox" id="all_1" onclick="selectAll(1);">全选</div></a> -->
<div class="lineRight">
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载当前页</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
</ul>
</div>
</div>
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
</ul>
</div>
</div>
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn print">打印</a>
</div>
<div class="downloadBox" style="right: 0; ">
<ul>
<li onclick="printPage('1')" class="firstLi">网页打印</li>
<li onclick="printPage('2')">PDF打印</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination">
<a href="#">首页</a>
<a href="#">&lt;上一页</a>
<span style="border: 1px solid #ddd; padding: 2px 8px; background: #fff;">1</span>
<a href="#">下一页&gt;</a>
<span href="#"><上一页</span>
<span class="curPageNum">1</span>
<span href="#">下一页></span>
<span>共1页</span>
<span>到第 <input type="text"> 页</span>
<a href="#">转至</a>
</div>
<!-- 底部按钮 -->
<div class="bottom-btn">
<button onclick="onBack()">返回</button>
<!-- 功能按钮组 -->
<div class="btn-group">
<button onclick="onBack()">
返回
</button>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function onBack() {
function onBack(){
window.history.back();
}
</script>
\ No newline at end of file
}
function openFilter(element) {
var isChecked = element.checked;
var rightType = document.getElementById("rightType");
var rightTypes = document.getElementById("rightTypes");
var conditionTB = document.getElementById("conditionTB");
console.log("复选框当前状态:", isChecked);
if(isChecked) {
rightType.style.display = 'none';
rightTypes.style.display = 'inline-block';
conditionTB.style.display = 'inline-block';
}else{
rightType.style.display = 'inline-block';
rightTypes.style.display = 'none';
conditionTB.style.display = 'none';
}
}
function searchOne(checkboxElement) {
if (checkboxElement) {
checkboxElement.checked = false;
}
var rightType = document.getElementById("rightType");
var rightTypes = document.getElementById("rightTypes");
var conditionTB = document.getElementById("conditionTB");
rightType.style.display = 'inline-block';
rightTypes.style.display = 'none';
conditionTB.style.display = 'none';
}
// var showOrHideTableValue="1";
// function setShowOrHideRsTable(){
// var rsTable = document.getElementById("rsTable2");
// var tableRows = rsTable.rows;
// for(var i=0;i<tableRows.length-1;i++){
// var tableTr=tableRows[i].getElementsByTagName("td");
// if(tableTr.length == 0)tableTr=tableRows[i].getElementsByTagName("th");
// tableTr[0].style.width = "68px";
// var tableTd=tableTr[11];
// var tableTd2=tableTr[12];
// if(tableTd!=null){
// if(showOrHideTableValue=='1'){
// tableTd.style.display="";
// tableTd2.style.display="";
// }else{
// tableTd.style.display="none";
// tableTd2.style.display="none";
// }
// }
// }
// //修改全局变量并修改箭头
// if("1" == showOrHideTableValue){ //隐藏->显示
// showOrHideTableValue="0";
// document.getElementById("showOrHideTableBtn").innerHTML="&lt;&lt;";//<<
// } else if("0" == showOrHideTableValue){ //显示->隐藏
// showOrHideTableValue="1";
// document.getElementById("showOrHideTableBtn").innerHTML=" >>";
// }
// }
//点击某一行账户查询账户余额
function balanceQuery(strAccno) {
//checkedAccno = strAccno.split("@")[0];
checkedAccno = strAccno;
var balanceValue= document.getElementById('balance_'+strAccno).innerHTML;
if(balanceValue== '<FONT color=gray>点击查询</FONT>'||balanceValue== '<font color="gray">点击查询</font>'||balanceValue=='&nbsp;'){
// document.getElementById("queryProcess").style.display="";
// document.getElementById("queryProcessDiv").innerHTML='正在进行余额查询,请稍候<img src="/V6/STY3/CN/images6/NCCB_jd2.gif">';
document.getElementById('balance_'+checkedAccno).innerHTML='775342.62';
document.getElementById('bookBalance_'+checkedAccno).innerHTML='775342.62';
}
}
// 获取表头行元素
var headerRow = document.querySelector('.tableListHead');
var lastClickedTh = null;
// 点击表头进行切换
headerRow.addEventListener('click', function(event) {
var target = event.target;
while (target && target.nodeName !== 'A') {
target = target.parentNode;
}
if (!target || target.nodeName !== 'A') return;
var img = target.querySelector('.sortImgClass');
if (!img) return;
if (lastClickedTh && lastClickedTh !== target) {
var lastImg = lastClickedTh.querySelector('.sortImgClass');
if (lastImg) {
lastImg.src = "https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortNo.png";
}
}
var currentSrc = img.src;
if (currentSrc.includes('sortNo.png')) {
img.src = "https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortUp.png";
} else if (currentSrc.includes('sortUp.png')) {
img.src = "https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortDn.png";
} else if (currentSrc.includes('sortDn.png')) {
img.src = "https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/sortUp.png";
}
lastClickedTh = target;
});
// 获取所有行 checkbox
function getRowCheckboxes() {
return document.querySelectorAll('.row-checkbox');
}
// 全选 / 取消全选
function selectAll(num) {
var isChecked;
if (num == 0) {
isChecked = document.getElementById('all_0').checked;
} else {
isChecked = document.getElementById('all_1').checked;
}
document.getElementById('all_0').checked = isChecked;
document.getElementById('all_1').checked = isChecked;
var checkboxes = getRowCheckboxes();
checkboxes.forEach(function(item) {
item.checked = isChecked;
});
}
// 反选
function invertSelection() {
var checkboxes = getRowCheckboxes();
checkboxes.forEach(function(item) {
item.checked = !item.checked;
});
updateSelectAllStatus();
}
// 单个点击时，联动“全选”
function updateSelectAllStatus() {
var checkboxes = getRowCheckboxes();
var allCheckbox = document.getElementById('all_0');
var allCheckboxs = document.getElementById('all_1');
var allChecked = true;
checkboxes.forEach(function(item) {
if (!item.checked) {
allChecked = false;
}
});
allCheckbox.checked = allChecked;
allCheckboxs.checked = allChecked;
}
// 给每个子 checkbox 绑定事件（页面加载后执行）
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = getRowCheckboxes();
checkboxes.forEach(function(item) {
item.addEventListener('change', updateSelectAllStatus);
});
});
// 通用函数
function getTableData() {
var table = document.getElementById('rsTable2');
var rows = table.querySelectorAll('tr');
var data = [];
rows.forEach((tr, index) => {
if (tr.id === 'queryProcess') return;
var cells = tr.querySelectorAll('td');
if (index === 0) {
cells = tr.querySelectorAll('td');
}
var row = [];
cells.forEach((td, i) => {
if (i === 0) return;
row.push(td.innerText.trim());
});
data.push(row);
});
return data;
}
// 下载方法
function downloadFile(content, fileName, type) {
var blob = new Blob([content], { type: type });
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}
function submitSelect(scope, type) {
// scope: 0 当前页 / 1 全部（你可以扩展）
// type: 1 txt 2 excel 3 csv 4 pdf
var data = getTableData();
switch (type) {
case '1':
downloadTXT(data);
break;
case '2':
downloadExcel(data);
break;
case '3':
downloadCSV(data);
break;
case '4':
downloadPDF(data);
break;
}
}
function downloadTXT(data) {
var content = data.map(row => row.join('\t')).join('\n');
downloadFile(content, '活期账户列表下载.txt', 'text/plain');
}
function downloadExcel(data) {
var html = `
<table border="1">
${data.map(row =>
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
).join('')}
</table>
`;
downloadFile(html, '活期账户列表下载.xls', 'application/vnd.ms-excel');
}
function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户列表下载.csv', 'text/csv');
}
function downloadPDF(data) {
var container = document.createElement('div');
container.innerHTML = `
<h3 style="text-align:center;">活期账户列表</h3>
<table border="1" cellspacing="0" cellpadding="5" style="width:100%;border-collapse:collapse;">
${data.map(row =>
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
).join('')}
</table>
`;
html2pdf()
.set({
margin: 10,
filename: '活期账户列表下载.pdf',
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
})
.from(container)
.save();
}
function printPage(type) {
var table = document.getElementById('rsTable2').outerHTML;
var now = new Date();
var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate()
+ ' ' + now.getHours() + ':' + now.getMinutes();
// 标题
var title = '账户信息查询 - 活期账户';
var win = window.open('', '_blank');
var html = `
<html>
<head>
<title>中国建设银行 企业网上银行</title>
<style>
body {
font-family: SimSun, Arial;
margin: 0;
}
.print-header {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.print-title {
text-align: center;
font-size: 18px;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
border: 1px solid #62a7e3;
}
td {
padding: 6px;
text-align: center;
}
td:first-child {
display: none;
}
</style>
</head>
<body>
${table}
</body>
</html>
`;
win.document.write(html);
win.document.close();
// 等渲染完成再打印
win.onload = function () {
win.print();
win.close();
};
}
</script>
history_query.html
View file @ e694689b
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>活期账户历史余额查询</title>
<style>
* {
......@@ -12,146 +14,388 @@
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
/* 顶部导航栏 */
.top-nav {
background-color: #ffffff;
border-bottom: 2px solid #1890ff;
display: flex;
align-items: center;
padding: 10px 20px;
gap: 40px;
}
.top-nav a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
/* 面包屑 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
font-size: 16px;
}
.breadcrumb span {
color: #000;
font-weight: bold;
color: #666;
margin: 10px 0;
}
/* 查询表单 */
.form-container {
padding: 30px 50px;
padding: 20px;
}
.form-title {
font-size: 20px;
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
margin-bottom: 20px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 25px;
gap: 10px;
margin-bottom: 15px;
/* gap: 10px; */
}
.form-label {
width: 120px;
text-align: right;
font-size: 18px;
color: #333;
}
.form-label .required {
color: #ff4d4f;
color: red;
margin-right: 4px;
}
.form-select,
.form-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 2px;
font-size: 18px;
.form-input,
.form-select {
padding: 5px 8px;
border: 1px solid #d9d9d9;
width: 230px;
}
.form-input {
width: 120px;
.select-down-icon {
height: 31px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
border: 1px solid #d9d9d9;
border-left: none;
}
.calendar-icon {
color: #1890ff;
font-size: 20px;
.down-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #b0b0b0;
}
.help-icon {
color: #1890ff;
font-size: 20px;
.form-select.hide {
appearance: none;
}
.form-input.small {
width: 111px;
}
.px-2 {
padding-left: 2px;
padding-right: 2px;
}
.form-input.x-small {
width: 84px;
}
.form-input.wide {
width: 234px;
}
.radio-group {
display: flex;
gap: 30px;
margin-left: 10px;
}
.radio-group label {
display: flex;
align-items: center;
input {
margin-right: 5px;
}
}
.form-tip {
color: #0066b3;
margin-left: 8px;
}
.form-question {
cursor: pointer;
margin-left: 8px;
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
background-color: #1890ff;
color: #fff;
padding-left: 4px;
}
.question1 {
margin-left: 30px;
}
.question2 {
margin-left: 70px;
}
/* 按钮组 */
.btn-group {
display: flex;
justify-content: center;
gap: 30px;
margin: 40px 0;
gap: 20px;
margin: 30px 0;
padding-left: 120px;
}
.buttonx,
.btn-group button {
background-color: #1890ff;
background-color: #1f93d5;
color: #fff;
border: none;
padding: 15px 50px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
font-size: 15px;
height: 35px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.buttonx {
position: absolute;
}
.xx {
left: 120px;
bottom: 34px;
}
.yy {
left: 264px;
bottom: 34px;
}
.zz {
left: 390px;
bottom: -57px;
}
/* 温馨提示 */
.tips-section {
background-color: #f5faff;
padding: 20px;
background-color: #f0f7ff;
padding: 10px;
border: 1px solid #e8e8e8;
}
.tips-title {
color: #ff4d4f;
color: red;
font-weight: bold;
margin-bottom: 10px;
font-size: 20px;
}
.tips-section p {
line-height: 1.8;
color: #333;
font-size: 18px;
}
.mt-24 {
margin-top: 24px;
}
.mt-20 {
margin-top: 20px;
}
.date-picker {
width: 27px;
height: 27px;
position: relative;
}
.date-picker .date-input {
position: absolute;
top: 0;
left: 0;
width: 27px;
height: 27px;
opacity: 0;
z-index: 1;
}
.date-picker .dateimg {
width: 27px;
height: 27px;
}
#myForm {
position: relative;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a>
<a href="#">批量账户查询</a>
<a href="#">电子回单查询</a>
<a href="#">集成资讯 ∨</a>
<a href="#">电子对账 ∨</a>
<a href="#">经营分析</a>
<a href="#">操作指南</a>
<a href="#">明细清单</a>
</div> -->
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span>活期账户</span>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 -->
<div class="form-container">
<div class="form-title">活期账户历史余额查询</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label>
<select class="form-select">
<option>按账户查询</option>
</select>
</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" class="form-input" value="20260428">
<span class="calendar-icon">🗓️</span>
<span>-</span>
<input type="text" class="form-input" value="20260428">
<span class="calendar-icon">🗓️</span>
<span class="help-icon">❓</span>
</div>
<!-- 按钮组 -->
<div class="btn-group">
<button onclick="onConfirm()">确定</button>
<button onclick="onBack()">返回</button>
</div>
<form id="myForm">
<div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label>
<select class="form-select">
<option value="1">按账户查询</option>
<option value="2">按日期查询</option>
</select>
</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom">
<div class="date-picker" id="sDate">
<img class="dateimg" src="./images/date.png" alt="" />
</div>
<span>-</span>
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo">
<div class="date-picker" id="eDate">
<img class="dateimg" src="./images/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> -->
</div>
<!-- <div class="radio-group">
<label><input type="radio" name="quickDate" value="7" /> 最近7天</label>
<label><input type="radio" name="quickDate" value="14" /> 最近14天</label>
<label><input type="radio" name="quickDate" value="30" /> 最近30天</label>
</div> -->
<span class="form-question question1">？</span>
</div>
<div style="height: 90px;"></div>
<!-- 按钮组 -->
<button class="buttonx xx" onclick="onSubmit()" type="submit">确定</button>
<button class="buttonx yy" onclick="onBack()">返回</button>
</form>
<!-- <div class="btn-group" style="margin-top: -65px;">
<button onclick="onAccount(1)" type="submit">确定</button>
</div> -->
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-title">温馨提示</div>
<p>查询起止日期默认为当前日期的前一天。</p>
</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p>
<script src="calendar-plugin/calendar.js"></script>
</body>
</html>
<script>
function onBack() {
window.history.back();
}
function onConfirm() {
window.location.href = './history_balance.html'
}
const pickerStart = new CalendarPlugin({
trigger: '#sDate',
onSelect: function (date) {
const result = date.replaceAll('-', '');
document.getElementById('dateFrom').value = result || '未选择';
}
});
const pickerEnd = new CalendarPlugin({
trigger: '#eDate',
onSelect: function (date) {
const result = date.replaceAll('-', '');
document.getElementById('dateTo').value = result || '未选择';
}
});
// 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => {
el.addEventListener('change', () => {
const days = parseInt(el.value, 10);
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零
const day = String(now.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000);
const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
document.getElementById('dateFrom').value = fmt(from);
document.getElementById('dateTo').value = fmt(today);
});
});
const form = document.getElementById('myForm');
function onSubmit() {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
localStorage.setItem('historyQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.location.href = './history_balance.html'
}, 500);
});
}
function onBack(){
window.history.back();
}
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment