Skip to content

B
buildbank-replica
Commit 8d3eee9c authored by 黄同智's avatar 黄同智
Browse files
Options

Merge branch 'master' of http://git.ruanyiit.com/yaoke/buildbank-replica

parents 33c4ab5c 5198162e
Show whitespace changes
Inline Side-by-side
Showing with 1330 additions and 243 deletions
account.html
View file @ 8d3eee9c
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/xlsx-js-style/dist/xlsx.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<title>账户信息查询 - 活期账户</title> <title>账户信息查询 - 活期账户</title>
<style> <style>
* { * {
...@@ -169,6 +173,9 @@ ...@@ -169,6 +173,9 @@
cursor: pointer; cursor: pointer;
background: #FFFFFF; background: #FFFFFF;
} }
.downloadBox ul li:hover {
font-weight: bold;
}
.download{ .download{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center; background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center;
} }
...@@ -258,9 +265,6 @@ ...@@ -258,9 +265,6 @@
padding: 0; padding: 0;
border: 0; border: 0;
} }
tr td .checkbox {
margin-left: 15px;
}
.tableList tr td { .tableList tr td {
overflow: hidden; overflow: hidden;
height: 35px; height: 35px;
...@@ -310,6 +314,9 @@ ...@@ -310,6 +314,9 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.tableListBody:hover {
background-color: #ebf4fb;
}
.lineLeft { .lineLeft {
float: left; float: left;
margin-right: 20px; margin-right: 20px;
...@@ -380,6 +387,9 @@ ...@@ -380,6 +387,9 @@
vertical-align: middle; vertical-align: middle;
border-radius: 5px; border-radius: 5px;
} }
.btn-group button:hover {
background-color: #229EE6;
}
/* 温馨提示 */ /* 温馨提示 */
.tips-section { .tips-section {
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
...@@ -403,21 +413,61 @@ ...@@ -403,21 +413,61 @@
color: #0066b3; color: #0066b3;
text-decoration: none; text-decoration: none;
} }
#pdfArea {
position: absolute;
left: -9999px;
top: 0;
width: 1040px;
background: #fff;
}
.title {
padding: 30px 0 4px 0;
text-align: center;
font-weight: normal;
font-size: 14px;
}
.print-date {
float: right;
margin-right: 5px;
font-size: 14px;
}
.table_none {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 14px;
/* ✅ 平分列宽 */
table-layout: fixed;
}
.ths, .tds {
color: #000 !important;
border: 1px solid #000 !important;
padding: 4px;
text-align: center;
font-weight: normal;
word-break: break-all;
}
.tds:nth-child(1), /* 账号 */
.tds:nth-child(5), /* 账面余额 */
.tds:nth-child(6), /* 可用余额 */
.tds:nth-child(11), /* 历史余额 */
.tds:nth-child(12) /* 时间 */
{
color: #000;
font-weight: 500 !important;
}
.ths {
background-color: #fff;
font-weight: normal;
}
</style> </style>
</head> </head>
<body> <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"> <div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span> 当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
...@@ -436,10 +486,10 @@ ...@@ -436,10 +486,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -449,10 +499,10 @@ ...@@ -449,10 +499,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1065,10 +1115,10 @@ ...@@ -1065,10 +1115,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1078,10 +1128,10 @@ ...@@ -1078,10 +1128,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1116,11 +1166,12 @@ ...@@ -1116,11 +1166,12 @@
<td nowrap=""><a id="td10" style="cursor: pointer;width: 173.05px;"">开户机构<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="td10" style="cursor: pointer;width: 173.05px;"">开户机构<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="display:none;"><a id="td11" style="cursor: pointer;">历史余额<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="display:none;"><a id="td11" style="cursor: pointer;">历史余额<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="display:none;"><a id="td12" style="cursor: pointer;">历史查询时间<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="display:none;"><a id="td12" style="cursor: pointer;">历史查询时间<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> <!-- <td nowrap="" style="width: 26.52px;"><a id="showOrHideTableBtn" onclick="setShowOrHideRsTable();parent.iFrameHeight();" class="tableLink">&gt;&gt;</a></td> -->
<td nowrap="" style="width: 26.52px;"><a id="showOrHideTableBtn" class="tableLink">&gt;&gt;</a></td>
</tr> </tr>
<tr onmouseover="tdOver(this)" onmouseout="tdOut(this)" class="tableListBody"> <tr class="tableListBody">
<td><input type="checkbox" id="acc_42050123704500001941@156" class="row-checkbox" name="ACC_NO" value="42050123704500001941@中科软盈（武汉）科技有限公司@中国建设银行股份有限公司武汉南湖大道支行@420237045@1@156@202004" class="checkbox" bankcode="202004"></td> <td><input type="checkbox" id="acc_42050123704500001941@156" class="row-checkbox" name="ACC_NO" value="42050123704500001941@中科软盈（武汉）科技有限公司@中国建设银行股份有限公司武汉南湖大道支行@420237045@1@156@202004" style="margin-left: 15px;" bankcode="202004"></td>
<td><a href="javaScript:getBalance('acc_42050123704500001941@156')">42050123704500001941</a>&nbsp;</td> <td onclick="onAccount(0)"><a href="#">42050123704500001941</a>&nbsp;</td>
<td class="txtLeft fzWord" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">中科软盈（武汉）科技有限公司&nbsp;</td> <td class="txtLeft fzWord" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">中科软盈（武汉）科技有限公司&nbsp;</td>
<td nowrap="" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">人民币元&nbsp;</td> <td nowrap="" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">人民币元&nbsp;</td>
<td nowrap="" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">中国建设银行&nbsp;</td> <td nowrap="" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">中国建设银行&nbsp;</td>
...@@ -1130,15 +1181,13 @@ ...@@ -1130,15 +1181,13 @@
<td onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">钞&nbsp;</td> <td onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">钞&nbsp;</td>
<td class="fzWord" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">-&nbsp;</td> <td class="fzWord" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">-&nbsp;</td>
<td onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">中国建设银行股份有限公司武汉南湖大道支行&nbsp;</td> <td onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')" class="table_center">中国建设银行股份有限公司武汉南湖大道支行&nbsp;</td>
<td style="display:none;" class="txtRight" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')"> <td style="display:none;" class="txtRight" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')"></td>
775,342.62&nbsp;
</td>
<td style="display:none;" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">2026-04-29<br>11:01:15&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> <td>&nbsp;</td>
</tr> </tr>
<tr style="display:none" id="queryProcess" class=" tableListTr"> <tr style="display:none" id="queryProcess" class=" tableListTr">
<td colspan="13" class="table_left"> <td colspan="13" class="table_left">
<div id="queryProcessDiv">正在进行余额查询,请稍候<img src="/V6/STY3/CN/images6/NCCB_jd2.gif"></div> <!-- <div id="queryProcessDiv">正在进行余额查询,请稍候<img src="https://xc.b2bstatic3.ccb.com/V6/STY3/CN/images6/NCCB_jd2.gif"></div> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -1154,10 +1203,10 @@ ...@@ -1154,10 +1203,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1167,10 +1216,10 @@ ...@@ -1167,10 +1216,10 @@
</div> </div>
<div class="downloadBox" style="left: 0;"> <div class="downloadBox" style="left: 0;">
<ul> <ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li> <li class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li> <li>Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li> <li>Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li> <li>PDF下载</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1215,25 +1264,76 @@ ...@@ -1215,25 +1264,76 @@
<p>2. 实时余额查询支持同时50个账户。</p> <p>2. 实时余额查询支持同时50个账户。</p>
<p>3. 历史余额、明细查询支持5个以内账户同时查询并实时返回查询结果，5个以上将通过批量方式查询下载。</p> <p>3. 历史余额、明细查询支持5个以内账户同时查询并实时返回查询结果，5个以上将通过批量方式查询下载。</p>
<p>4. 本日首次登录时，历史余额栏位为系统自动于本日零点查询的账户余额；本日非首次查询余额，历史余额显示上次查询的余额信息。</p> <p>4. 本日首次登录时，历史余额栏位为系统自动于本日零点查询的账户余额；本日非首次查询余额，历史余额显示上次查询的余额信息。</p>
<p>5. 若您的签约/授权账户变动未及时体现在账户列表中，请点击此处<a href="#">刷新</a>。</p> <p>5. 若您的签约/授权账户变动未及时体现在账户列表中，请点击此处<a href="#" onclick="window.location.reload()">刷新</a>。</p>
</div>
<div id="pdfArea">
<div class="title">活期账户列表信息</div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<thead>
<tr>
<th class="ths">账号</th>
<th class="ths">账户名称</th>
<th class="ths">币种</th>
<th class="ths">行别</th>
<th class="ths">账面余额</th>
<th class="ths">可用余额</th>
<th class="ths">签约类型</th>
<th class="ths">钞汇类别</th>
<th class="ths">账户别名</th>
<th class="ths">开户机构</th>
<th class="ths">历史余额</th>
<th class="ths">历史查询时间</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tds">42050123704500001941</td>
<td class="tds">中科软盈（武汉）科技有限公司</td>
<td class="tds">人民币元</td>
<td class="tds">中国建设银行</td>
<td class="tds">775,342.62</td>
<td class="tds">775,342.62</td>
<td class="tds">签约</td>
<td class="tds">钞</td>
<td class="tds">-</td>
<td class="tds">中国建设银行股份有限公司武汉南湖大道支行</td>
<td class="tds">775,342.62</td>
<td class="tds">2026-04-30 11:30:22</td>
</tr>
</tbody>
</table>
</div> </div>
</div>
</body> </body>
</html> </html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script> <script>
function onAccount(number){ function onAccount(number) {
if(number == 1){ if(number == 0) {
window.location.href = './account_balance.html'
}else{
var checkedList = document.querySelectorAll('.row-checkbox:checked');
if (checkedList.length === 0) {
alert('请先勾选账户');
return;
}
if (number == 1) {
window.location.href = './account_info.html' window.location.href = './account_info.html'
} }
if(number == 2){ if (number == 2) {
window.location.href = './account_balance.html' window.location.href = './account_balance.html'
} }
if(number == 3){ if (number == 3) {
window.location.href = './account_detail.html' window.location.href = './account_detail.html'
} }
if(number == 4){ if (number == 4) {
window.location.href = './history_query.html' window.location.href = './history_query.html'
} }
}
} }
function openFilter(element) { function openFilter(element) {
var isChecked = element.checked; var isChecked = element.checked;
...@@ -1300,8 +1400,8 @@ function balanceQuery(strAccno) { ...@@ -1300,8 +1400,8 @@ function balanceQuery(strAccno) {
if(balanceValue== '<FONT color=gray>点击查询</FONT>'||balanceValue== '<font color="gray">点击查询</font>'||balanceValue=='&nbsp;'){ if(balanceValue== '<FONT color=gray>点击查询</FONT>'||balanceValue== '<font color="gray">点击查询</font>'||balanceValue=='&nbsp;'){
// document.getElementById("queryProcess").style.display=""; // document.getElementById("queryProcess").style.display="";
// document.getElementById("queryProcessDiv").innerHTML='正在进行余额查询,请稍候<img src="/V6/STY3/CN/images6/NCCB_jd2.gif">'; // document.getElementById("queryProcessDiv").innerHTML='正在进行余额查询,请稍候<img src="/V6/STY3/CN/images6/NCCB_jd2.gif">';
document.getElementById('balance_'+checkedAccno).innerHTML='775342.62'; document.getElementById('balance_'+checkedAccno).innerHTML='775,342.62';
document.getElementById('bookBalance_'+checkedAccno).innerHTML='775342.62'; document.getElementById('bookBalance_'+checkedAccno).innerHTML='775,342.62';
} }
} }
// 获取表头行元素 // 获取表头行元素
...@@ -1414,66 +1514,240 @@ function downloadFile(content, fileName, type) { ...@@ -1414,66 +1514,240 @@ function downloadFile(content, fileName, type) {
link.click(); link.click();
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href);
} }
document.querySelectorAll('.downloadBox li').forEach((el, index) => {
el.addEventListener('click', function () {
submitSelect('0', String(index + 1));
});
});
function submitSelect(scope, type) { function submitSelect(scope, type) {
// scope: 0 当前页 / 1 全部（你可以扩展）
// type: 1 txt 2 excel 3 csv 4 pdf
var data = getTableData(); var data = getTableData();
switch (type) { switch (type) {
case '1': case '1':
case '5':
case '21':
case '25':
downloadTXT(data); downloadTXT(data);
break; break;
case '2': case '2':
case '6':
case '22':
case '26':
downloadExcel(data); downloadExcel(data);
break; break;
case '3': case '3':
case '7':
case '23':
case '27':
downloadCSV(data); downloadCSV(data);
break; break;
case '4': case '4':
case '8':
case '24':
case '28':
downloadPDF(data); downloadPDF(data);
break; break;
} }
} }
function downloadTXT(data) { function downloadTXT() {
var content = data.map(row => row.join('\t')).join('\n'); var table = document.getElementById("rsTable2");
var rows = table.rows;
var result = [];
var colLength = [9, 9, 4, 5, 10, 10, 7, 5, 5, 12, 5, 7];
var colLengths = [28, 16, 3, 7, 1, 1, 3, 2, 2, 21, 11, 20];
function wrapHeader(str, len, index) {
str = (str || "").toString().trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
return `"${str}"${space}`;
}
function wrapData(str, len, index) {
str = (str || "")
.toString()
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
if (index === 0) {
return `"${space + str}"`;
}
return `"${str + space}"`;
}
var header = [
"账号","账户名称","币种","行别",
"账面余额","可用余额","签约类型",
"钞汇鉴别","账户别名","开户机构",
"历史余额","历史查询时间"
];
var headerRow = header.map((item, i) => wrapHeader(item, colLength[i], i));
result.push(headerRow.join(','));
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].cells;
if (!cells || cells.length < 11) continue;
var row = [];
row.push(cells[1].innerText);
row.push(cells[2].innerText);
row.push(cells[3].innerText);
row.push(cells[4].innerText);
var bookBalance = cells[5].innerText;
if (bookBalance.indexOf("点击查询") !== -1) bookBalance = "";
row.push(bookBalance);
var balance = cells[6].innerText;
if (balance.indexOf("点击查询") !== -1) balance = "";
row.push(balance);
row.push(cells[7].innerText);
row.push(cells[8].innerText);
row.push(cells[9].innerText);
row.push(cells[10].innerText);
var lastBalance = "";
if (cells[11]) {
lastBalance = cells[11].innerText
.replace(/FormatAmtRempty\(.+?\);?/g, '')
.trim();
}
row.push(lastBalance);
var lastTime = "";
if (cells[12]) {
lastTime = cells[12].innerHTML
.replace(/&nbsp;/gi, ' ')
.replace(/<br\s*\/?>/gi, ' ')
.replace(/\s+/g, ' ')
.trim();
lastTime = lastTime + " ";
}
row.push(lastTime);
var formatted = row.map((item, idx) => wrapData(item, colLengths[idx], idx));
result.push(formatted.join(','));
}
var content = result.join('\n');
downloadFile(content, '活期账户列表下载.txt', 'text/plain'); downloadFile(content, '活期账户列表下载.txt', 'text/plain');
} }
function downloadExcel(data) { function downloadExcel(list) {
var html = ` let arr = [
<table border="1"> ["中国建设银行"],
${data.map(row => ["活期账户列表信息"],
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>` ];
).join('')} list[0].pop()
</table> list[1] = list[1].map(item => {
`; return item === '点击查询' ? '' : item
downloadFile(html, '活期账户列表下载.xls', 'application/vnd.ms-excel'); })
let data = [...arr,...list]
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }
];
const baseFont = {
name: "Arial",
sz: 10
};
ws["A1"].s = {
font: baseFont
};
ws["A2"].s = {
font: { ...baseFont, bold: true },
alignment: { horizontal: "center", vertical: "center" }
};
data[2].forEach((_, i) => {
const cell = XLSX.utils.encode_cell({ r: 2, c: i });
ws[cell].s = {
font: baseFont,
alignment: { horizontal: "center", vertical: "center" }
};
});
data[3].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 3, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: "s", // ✅ 数字 or 字符串
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
ws["!cols"] = [
{ wch: 24.29 }, { wch: 21.29 }, { wch: 12.29 }, { wch: 12.29 },
{ wch: 10.29 }, { wch: 10.29 }, { wch: 16.29 }, { wch: 15.29 },
{ wch: 16.29 }, { wch: 17.29 }, { wch: 18.29 }, { wch: 20.29 },
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "账户信息");
const wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "array"
});
saveAs(new Blob([wbout]), "活期账户列表下载.xls");
} }
function downloadCSV(data) { function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n'); var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户列表下载.csv', 'text/csv'); downloadFile(content, '活期账户列表下载.csv', 'text/csv');
} }
function downloadPDF(data) { /* ✅ 打印日期 */
var container = document.createElement('div'); const now = new Date();
container.innerHTML = ` const year = now.getFullYear();
<h3 style="text-align:center;">活期账户列表</h3> const month = now.getMonth() + 1; // ✅ 不补0
<table border="1" cellspacing="0" cellpadding="5" style="width:100%;border-collapse:collapse;"> const day = now.getDate(); // ✅ 不补0
${data.map(row => document.getElementById("printDate").innerText =
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>` `打印日期：${year}年${month}月${day}日`;
).join('')}
</table> /* ✅ PDF导出 */
`; async function downloadPDF() {
const { jsPDF } = window.jspdf;
const element = document.getElementById("pdfArea");
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true
});
const imgData = canvas.toDataURL("image/png");
html2pdf() const pdf = new jsPDF({
.set({ orientation: "p",
margin: 10, unit: "mm",
filename: '活期账户列表下载.pdf', format: [210, 297]
html2canvas: { scale: 2 }, });
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
}) const pageWidth = 210;
.from(container) const pageHeight = 297;
.save();
const margin = 5;
let imgWidth = pageWidth - margin * 2;
let imgHeight = canvas.height * imgWidth / canvas.width;
if (imgHeight > pageHeight - margin * 2) {
imgHeight = pageHeight - margin * 2;
imgWidth = canvas.width * imgHeight / canvas.height;
}
const x = (pageWidth - imgWidth) / 2;
const y = margin;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("活期账户列表下载.pdf");
} }
function printPage(type) { function printPage(type) {
if(type == '2') {
return downloadPDF()
}
var table = document.getElementById('rsTable2').outerHTML; var table = document.getElementById('rsTable2').outerHTML;
var now = new Date(); var now = new Date();
var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate()
......
account_balance.html
View file @ 8d3eee9c
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/xlsx-js-style/dist/xlsx.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<title>账户信息查询 - 实时余额</title> <title>账户信息查询 - 实时余额</title>
<style> <style>
* { * {
...@@ -169,6 +173,9 @@ ...@@ -169,6 +173,9 @@
cursor: pointer; cursor: pointer;
background: #FFFFFF; background: #FFFFFF;
} }
.downloadBox ul li:hover {
font-weight: bold;
}
.download{ .download{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center; background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center;
} }
...@@ -297,7 +304,6 @@ ...@@ -297,7 +304,6 @@
justify-content: space-between; justify-content: space-between;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding: 0 10px 0 10px;
background-color: #f6fbf4; background-color: #f6fbf4;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-top: none; border-top: none;
...@@ -310,6 +316,12 @@ ...@@ -310,6 +316,12 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.xj{
background-color: #f7fafd;
}
.tableListBody:hover {
background-color: #ebf4fb;
}
.lineLeft { .lineLeft {
float: left; float: left;
margin-right: 20px; margin-right: 20px;
...@@ -373,6 +385,9 @@ ...@@ -373,6 +385,9 @@
vertical-align: middle; vertical-align: middle;
border-radius: 5px; border-radius: 5px;
} }
.btn-group button:hover {
background-color: #229EE6;
}
/* 温馨提示 */ /* 温馨提示 */
.tips-section { .tips-section {
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
...@@ -396,6 +411,58 @@ ...@@ -396,6 +411,58 @@
color: #0066b3; color: #0066b3;
text-decoration: none; text-decoration: none;
} }
#pdfArea {
position: absolute;
left: -9999px;
top: 0;
width: 1040px;
background: #fff;
}
.title {
padding: 30px 0 4px 0;
text-align: center;
font-weight: normal;
font-size: 14px;
}
.print-date {
float: right;
margin-right: 5px;
font-size: 14px;
}
.table_none {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 14px;
/* ✅ 平分列宽 */
table-layout: fixed;
}
.ths, .tds {
color: #000 !important;
border: 1px solid #000 !important;
padding: 4px;
text-align: center;
font-weight: normal;
word-break: break-all;
}
.tds:nth-child(1), /* 账号 */
.tds:nth-child(5), /* 账面余额 */
.tds:nth-child(6), /* 可用余额 */
.tds:nth-child(11), /* 历史余额 */
.tds:nth-child(12) /* 时间 */
{
color: #000;
font-weight: 500 !important;
}
.ths {
background-color: #fff;
font-weight: normal;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -1062,7 +1129,7 @@ ...@@ -1062,7 +1129,7 @@
<td nowrap="" style="width: 26.52px;"><a id="showOrHideTableBtn" onclick="setShowOrHideRsTable();parent.iFrameHeight();" class="tableLink">&gt;&gt;</a></td> <td nowrap="" style="width: 26.52px;"><a id="showOrHideTableBtn" onclick="setShowOrHideRsTable();parent.iFrameHeight();" class="tableLink">&gt;&gt;</a></td>
</tr> </tr>
<tr onmouseover="tdOver(this)" onmouseout="tdOut(this)" class="tableListBody"> <tr class="tableListBody">
<td>42050123704500001941&nbsp;</td> <td>42050123704500001941&nbsp;</td>
<td class="txtLeft fzWord">中科软盈（武汉）科技有限公司&nbsp;</td> <td class="txtLeft fzWord">中科软盈（武汉）科技有限公司&nbsp;</td>
<td nowrap="" >人民币元&nbsp;</td> <td nowrap="" >人民币元&nbsp;</td>
...@@ -1077,36 +1144,19 @@ ...@@ -1077,36 +1144,19 @@
<!-- <td style="display:none;" onclick="balanceQuery('42050123704500001941@420237045@1@156@202004')">2026-04-29<br>11:01:15&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> <td>&nbsp;</td>
</tr> </tr>
<tr onmouseover="tdOver(this)" onmouseout="tdOut(this)" class=" tableListTr tableListSlt" <tr class="tableListBody xj">
style="background-color: #f7fafd;"> <td class="table_center">小计:</td>
<td nowrap="" class="table_center">
小计:
</td>
<td class="fzWord">&nbsp;</td> <td class="fzWord">&nbsp;</td>
<td>人民币元&nbsp;</td> <td>人民币元&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td nowrap="" class="txtRight table_center">775,342.62</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 nowrap="" class="txtRight table_center">775,342.62</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 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>&nbsp;</td> <td>&nbsp;</td>
<td style="display:none;">&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>
<tr style="display:none" id="queryProcess" class=" tableListTr"> <tr style="display:none" id="queryProcess" class=" tableListTr">
...@@ -1157,7 +1207,77 @@ ...@@ -1157,7 +1207,77 @@
返回 返回
</button> </button>
</div> </div>
<div id="pdfArea">
<div class="title">活期账户列表信息</div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<thead>
<tr>
<th class="ths">账号</th>
<th class="ths">账户名称</th>
<th class="ths">币种</th>
<th class="ths">行别</th>
<th class="ths">账面余额</th>
<th class="ths">冻结金额</th>
<th class="ths">可用余额</th>
<th class="ths">本日存入金额</th>
<th class="ths">本日支取金额</th>
<th class="ths">账户状态</th>
<th class="ths">账户控制状态</th>
<th class="ths">开户机构</th>
<th class="ths">透支金额</th>
<th class="ths">透支天数</th>
<th class="ths">普通业务冻结金额</th>
<th class="ths">存款司法冻结金额</th>
<th class="ths">在途业务冻结金额</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tds">42050123704900001941</td>
<td class="tds">中科软盈(武汉)科技有限公司</td>
<td class="tds">人民币元</td>
<td class="tds">中国建设银行</td>
<td class="tds">773,541.62</td>
<td class="tds">0.00</td>
<td class="tds">773,541.62</td>
<td class="tds">0.00</td>
<td class="tds">1,801.00</td>
<td class="tds">正常</td>
<td class="tds">正常</td>
<td class="tds">中国建设银行股份有限公司武汉南湖大道支行</td>
<td class="tds">0.00</td>
<td class="tds">0</td>
<td class="tds">0.00</td>
<td class="tds">0.00</td>
<td class="tds">0.00</td>
</tr>
<tr>
<td class="tds">小计</td>
<td class="tds"></td>
<td class="tds">人民币元</td>
<td class="tds"></td>
<td class="tds">773,541.62</td>
<td class="tds">0.00</td>
<td class="tds">773,541.62</td>
<td class="tds">0.00</td>
<td class="tds">1,801.00</td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds">0.00</td>
<td class="tds"></td>
<td class="tds">0.00</td>
<td class="tds">0.00</td>
<td class="tds">0.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</body> </body>
</html> </html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
...@@ -1327,7 +1447,6 @@ function getTableData() { ...@@ -1327,7 +1447,6 @@ function getTableData() {
} }
var row = []; var row = [];
cells.forEach((td, i) => { cells.forEach((td, i) => {
if (i === 0) return;
row.push(td.innerText.trim()); row.push(td.innerText.trim());
}); });
...@@ -1363,46 +1482,204 @@ function submitSelect(scope, type) { ...@@ -1363,46 +1482,204 @@ function submitSelect(scope, type) {
break; break;
} }
} }
function downloadTXT(data) { function downloadTXT() {
var content = data.map(row => row.join('\t')).join('\n'); var table = document.getElementById("rsTable2");
downloadFile(content, '活期账户列表下载.txt', 'text/plain'); var rows = table.rows;
var result = [];
var colLength = [9, 9, 4, 5, 10, 10, 7, 5, 5, 12, 5, 7];
var colLengths = [28, 16, 3, 7, 1, 1, 3, 2, 2, 21, 11, 20];
function wrapHeader(str, len, index) {
str = (str || "").toString().trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
return `"${str}"${space}`;
}
function wrapData(str, len, index) {
str = (str || "")
.toString()
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
if (index === 0) {
return `"${space + str}"`;
}
return `"${str + space}"`;
}
var header = ["账号 ","账户名称 ","币种 ","行别 ","账面余额 ","冻结金额 ","可用余额 ","本日存入金额 ","本日支取金额 ","账户状态 ","账户控制状态","开户机构 ","透支金额 ","透支天数 ","普通业务冻结金额 ","存款司法冻结金额 ","在途业务冻结金额 "
];
var headerRow = header.map((item, i) => wrapHeader(item, colLength[i], i));
result.push(headerRow.join(','));
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].cells;
if (!cells || cells.length < 11) continue;
var row = [];
row.push(cells[1].innerText);
row.push(cells[2].innerText);
row.push(cells[3].innerText);
row.push(cells[4].innerText);
var bookBalance = cells[5].innerText;
if (bookBalance.indexOf("点击查询") !== -1) bookBalance = "";
row.push(bookBalance);
var balance = cells[6].innerText;
if (balance.indexOf("点击查询") !== -1) balance = "";
row.push(balance);
row.push(cells[7].innerText);
row.push(cells[8].innerText);
row.push(cells[9].innerText);
row.push(cells[10].innerText);
var lastBalance = "";
if (cells[11]) {
lastBalance = cells[11].innerText
.replace(/FormatAmtRempty\(.+?\);?/g, '')
.trim();
}
row.push(lastBalance);
var lastTime = "";
if (cells[12]) {
lastTime = cells[12].innerHTML
.replace(/&nbsp;/gi, ' ')
.replace(/<br\s*\/?>/gi, ' ')
.replace(/\s+/g, ' ')
.trim();
lastTime = lastTime + " ";
}
row.push(lastTime);
var formatted = row.map((item, idx) => wrapData(item, colLengths[idx], idx));
result.push(formatted.join(','));
}
var content = result.join('\n');
downloadFile(content, '活期账户实时余额下载.txt', 'text/plain');
} }
function downloadExcel(data) { function downloadExcel(list) {
var html = ` console.log(list,'list');
<table border="1"> let arr = [
${data.map(row => ["中国建设银行"],
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>` ["账户实时余额查询结果下载"],
).join('')} ];
</table> list[0].pop()
`; let data = [...arr,...list]
downloadFile(html, '活期账户列表下载.xls', 'application/vnd.ms-excel'); const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }
];
const baseFont = {
name: "Arial",
sz: 10
};
ws["A1"].s = {
font: baseFont
};
ws["A2"].s = {
font: { ...baseFont, bold: true },
alignment: { horizontal: "center", vertical: "center" }
};
data[2].forEach((_, i) => {
const cell = XLSX.utils.encode_cell({ r: 2, c: i });
ws[cell].s = {
font: baseFont,
alignment: { horizontal: "center", vertical: "center" }
};
});
data[3].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 3, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: "s", // ✅ 数字 or 字符串
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
data[4].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 4, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: "s", // ✅ 数字 or 字符串
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
ws["!cols"] = [
{ wch: 24.29 }, { wch: 21.29 }, { wch: 12.29 }, { wch: 12.29 },
{ wch: 10.29 }, { wch: 10.29 }, { wch: 16.29 }, { wch: 15.29 },
{ wch: 16.29 }, { wch: 17.29 }, { wch: 18.29 }, { wch: 20.29 },
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "账户信息");
const wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "array"
});
saveAs(new Blob([wbout]), "活期账户实时余额下载.xls");
} }
function downloadCSV(data) { function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n'); var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户列表下载.csv', 'text/csv'); downloadFile(content, '活期账户实时余额下载.csv', 'text/csv');
} }
function downloadPDF(data) { /* ✅ 打印日期 */
var container = document.createElement('div'); const now = new Date();
container.innerHTML = ` const year = now.getFullYear();
<h3 style="text-align:center;">活期账户列表</h3> const month = now.getMonth() + 1; // ✅ 不补0
<table border="1" cellspacing="0" cellpadding="5" style="width:100%;border-collapse:collapse;"> const day = now.getDate(); // ✅ 不补0
${data.map(row => document.getElementById("printDate").innerText =
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>` `打印日期：${year}年${month}月${day}日`;
).join('')}
</table> /* ✅ PDF导出 */
`; async function downloadPDF() {
const { jsPDF } = window.jspdf;
const element = document.getElementById("pdfArea");
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true
});
html2pdf() const imgData = canvas.toDataURL("image/png");
.set({
margin: 10,
filename: '活期账户列表下载.pdf',
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
})
.from(container)
.save();
}
const pdf = new jsPDF({
orientation: "p",
unit: "mm",
format: [210, 297]
});
const pageWidth = 210;
const pageHeight = 297;
const margin = 5;
let imgWidth = pageWidth - margin * 2;
let imgHeight = canvas.height * imgWidth / canvas.width;
if (imgHeight > pageHeight - margin * 2) {
imgHeight = pageHeight - margin * 2;
imgWidth = canvas.width * imgHeight / canvas.height;
}
const x = (pageWidth - imgWidth) / 2;
const y = margin;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("活期账户实时余额下载.pdf");
}
function printPage(type) { function printPage(type) {
var table = document.getElementById('rsTable2').outerHTML; var table = document.getElementById('rsTable2').outerHTML;
var now = new Date(); var now = new Date();
......
account_info.html
View file @ 8d3eee9c
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账户信息详情</title> <script src="https://cdn.jsdelivr.net/npm/xlsx-js-style/dist/xlsx.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<title>账户交易明细</title>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif; font-family: '\5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif';
font-size: 14px; font-size: 14px;
color: #2C2C2C;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* 面包屑导航 */
/* 面包屑 */
.breadcrumb { .breadcrumb {
background-color: #f5f7fa; height: 42px;
padding: 15px 20px; background-color: #f4f5fb;
color: #333; border: 1px solid #dfe1f2;
line-height: 40px;
padding-left: 10px;
margin-top: 15px;
font-size: 14px;
color: #2C2C2C;
} }
/* 账户标题栏 */ .breadcrumb_item{
.account-header { font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 2px solid #1890ff;
} }
.account-header .account-number { /* 账户信息卡片 */
border: 1px solid #1890ff; .account-card {
color: #1890ff; margin-top: 15px;
padding: 10px 15px;
border-radius: 4px; border-radius: 4px;
font-size: 18px;
font-weight: bold;
} }
.account-header .收支视图 {
color: #1890ff; .account-card .account-number {
text-decoration: none; background: #fff;
font-size: 16px; position: relative;
display: flex; }
align-items: center;
gap: 4px; .account-card .account-number::before {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 0;
width: 25px;
}
.account-card .account-number::after {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 141px;
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:23px;
height: 40px;
width: 120px;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.info-table { .info-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 0; margin-top: 6px;
border: 1px solid #62a7e3;
} }
.info-table td { .info-table td {
padding: 12px 20px; height: 34px;
border: 1px solid #d0e8ff; padding: 0 10px;
border: none
} }
.info-table td:first-child {
width: 20%; .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; text-align: right;
color: #333; }
font-weight: 500;
.info-table td:first-child {
width: 258px;
background: #fafafa;
} }
.info-table td:nth-child(2) { .info-table td:nth-child(2) {
width: 30%; width: 337.47px;
} }
.info-table td:nth-child(3) { .info-table td:nth-child(3) {
width: 20%; width: 221.41px;
text-align: right; background: #fafafa;
color: #333;
font-weight: 500;
} }
.info-table td:nth-child(4) { .info-table td:nth-child(4) {
width: 30%; width: 341.13px;
} }
/* 工具栏 */ /* 工具栏 */
.toolbar { .toolbar {
display: flex; display: flex;
justify-content: flex-end;
align-items: center; align-items: center;
gap: 20px; justify-content: flex-end;
padding: 10px 20px; height: 42px;
background: #f8faf5; background-color: #f6fbf4;
border-top: 1px solid #e8e8e8; height: 35px;
border-bottom: 1px solid #e8e8e8; line-height: 35px;
} }
.toolbar a { .toolbar a {
color: #1890ff; color: #1890ff;
...@@ -91,102 +140,588 @@ ...@@ -91,102 +140,588 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 16px; }
.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;
}
.downloadBox ul li:hover {
font-weight: bold;
}
.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;
}
.tableRBtn {
padding-left: 16px;
color: #1f93d5;
cursor: pointer;
} }
/* 底部按钮组 */ /* 底部按钮组 */
.bottom-btn-group { .bottom-btn-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; margin-top: 30px;
margin: 30px 0;
} }
.bottom-btn-group button { .bottom-btn-group button {
background-color: #1890ff; height: 35px;
min-width: 100px;
padding: 0 20px;
background-color: #1f93d5;
color: #fff; color: #fff;
border: none; border: none;
padding: 15px 30px;
border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-weight: bold;
border-radius: 5px;
font-size: 1em;
margin-right: 20px;
}
.bottom-btn-group button:hover {
background-color: #229EE6;
}
#pdfArea {
position: absolute;
left: -9999px;
top: 0;
width: 1060px;
background: #fff;
}
.title {
padding: 30px 0 4px 0;
text-align: center;
font-weight: normal;
font-size: 14px;
}
.print-date {
float: right;
margin-right: 5px;
font-size: 14px;
}
.table_none {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 14px;
/* ✅ 平分列宽 */
table-layout: fixed;
}
.ths, .tds {
color: #000 !important;
border: 1px solid #000 !important;
padding: 4px;
text-align: center;
font-weight: normal;
word-break: break-all;
}
.tds:nth-child(1), /* 账号 */
.tds:nth-child(5), /* 账面余额 */
.tds:nth-child(6), /* 可用余额 */
.tds:nth-child(11), /* 历史余额 */
.tds:nth-child(12) /* 时间 */
{
color: #000;
font-weight: 500 !important;
}
.ths {
background-color: #fff;
font-weight: normal;
} }
</style> </style>
<script src="./js/pako.min.js"></script>
</head> </head>
<body> <body>
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > 活期账户 当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
</div> </div>
<!-- 账户信息卡片 -->
<!-- 账户标题栏 --> <div class="account-card">
<div class="account-header"> <div class="account-number">
<div class="account-number">4205****1941</div> <div>4205***1941</div>
<a href="#" class="收支视图">
<span>⦿</span> 收支视图
</a>
</div> </div>
<table class="info-table" border="none">
<!-- 账户信息表格 -->
<table class="info-table">
<tr> <tr>
<td>账户名称：</td> <td>账户名称:</td>
<td>中科软盈（武汉）科技有限公司</td> <td>中科软盈（武汉）科技有限公司 </td>
<td>账号：</td> <td>账号:</td>
<td>42050123704500001941</td> <td>42050123704500001941 </td>
</tr> </tr>
<tr> <tr>
<td>开户机构名称：</td> <td>开户机构名称:</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td> <td>中国建设银行股份有限公司武汉南湖大道支行 </td>
<td>开户机构号：</td> <td>开户机构号:</td>
<td>420237045</td> <td>420237045 </td>
</tr> </tr>
<tr> <tr>
<td>本外币合一标识：</td> <td>本外币合一标识:</td>
<td>-</td> <td>- </td>
<td>币种：</td> <td>币种: </td>
<td>人民币元</td> <td>人民币元 </td>
</tr> </tr>
<tr> <tr>
<td>钞/汇：</td> <td>钞/汇:</td>
<td>钞</td> <td>钞 </td>
<td>账户性质：</td> <td>账户性质:</td>
<td>基本户</td> <td>基本户 </td>
</tr> </tr>
<tr> <tr>
<td>外币资金性质：</td> <td>外币资金性质:</td>
<td>-</td> <td>- </td>
<td>账户状态：</td> <td>账户状态:</td>
<td>正常</td> <td>正常 </td>
</tr> </tr>
<tr> <tr>
<td>可用余额：</td> <td>可用余额:</td>
<td>775, 342.62</td> <td>773,541.62 </td>
<td>开户日期：</td> <td>开户日期:</td>
<td>20251105</td> <td>20251105 </td>
</tr> </tr>
<tr> <tr>
<td>开户许可证号/基本存款账户编号信息：</td> <td>开户许可证号/基本存款账户编号信息:</td>
<td>J5210095814103</td> <td>J5210095814103 </td>
<td>银行联行号：</td> <td>银行联行号:</td>
<td>105521000764</td> <td>105521000764 </td>
</tr> </tr>
</table> </table>
</div>
<!-- 工具栏 -->
<div class="toolbar"> <div class="toolbar">
<a href="#"><span>↓</span> 下载全部</a> <div class="tableLBtn_box">
<a href="#"><span>🖨️</span> 打印</a> <div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>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="bottom-btn-group"> <div class="bottom-btn-group">
<button>基本存款信息打印</button> <button>基本存款信息打印</button>
<button>存款人查询密码打印</button> <button>存款人查询密码打印</button>
<button onclick="onBack()">返回</button> <button onclick="onBack()">返回</button>
</div> </div>
<div id="pdfArea">
<div class="title"></div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<tr>
<td class="tds">账户名称</td>
<td class="tds">中科软赢（武汉）科技有限公司</td>
<td class="tds">账号</td>
<td class="tds">42050123704500001941</td>
<td class="tds">开户机构号</td>
<td class="tds">420237045</td>
</tr>
<tr>
<td class="tds">开户机构名称</td>
<td class="tds">中国建设银行股份有限公司武汉汉阳大道支行</td>
<td class="tds">本外币合一标识</td>
<td class="tds"></td>
<td class="tds">币种</td>
<td class="tds">人民币元</td>
</tr>
<tr>
<td class="tds">钞/汇</td>
<td class="tds"></td>
<td class="tds">账户性质</td>
<td class="tds">基本户</td>
<td class="tds">外币资金性质</td>
<td class="tds"></td>
</tr>
<tr>
<td class="tds">账户状态</td>
<td class="tds">正常</td>
<td class="tds">开户日期</td>
<td class="tds">20251105</td>
<td class="tds">可用余额</td>
<td class="tds">773,541.62</td>
</tr>
<tr>
<td class="tds">透支金额</td>
<td class="tds">0.00</td>
<td class="tds">普通业务冻结金额</td>
<td class="tds">0.00</td>
<td class="tds">存款司法冻结金额</td>
<td class="tds">0.00</td>
</tr>
<tr>
<td class="tds">在途业务冻结金额</td>
<td class="tds">0.00</td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
</tr>
<tr>
<td class="tds">开户许可证号/基本存款账户编号信息</td>
<td class="tds">J5210095814103</td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
</tr>
</table>
</div>
</div>
</body> </body>
</html>
<script> <script>
function onBack() { document.querySelectorAll('.downloadBox li').forEach((el, index) => {
window.history.back(); el.addEventListener('click', function () {
submitSelect('0', String(index + 1));
});
});
// 通用函数
function getTableData() {
var table = document.querySelector(".info-table");
if (!table) return [];
var rows = table.querySelectorAll('tr');
// ✅ 表头（你自己定义）
var header = [
"账户名称","账号","开户机构号","开户机构名称",
"本外币合一标识","币种","钞/汇","账户性质",
"外币资金性质","账户状态","开户日期","可用余额",
"开户许可证号/基本存款账户编号信息"
];
var body = [];
rows.forEach(tr => {
var cells = tr.querySelectorAll('td');
for (var i = 1; i < cells.length; i += 2) {
let text = cells[i].innerText
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (
!text ||
text.includes("点击查询") ||
text === "-" ||
text === "--"
) {
text = "";
} }
body.push(text);
}
});
[body[2], body[3]] = [body[3], body[2]];
return [header, body];
}
// 下载方法
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) {
var data = getTableData();
switch (type) {
case '1':
case '5':
case '21':
case '25':
downloadTXT(data);
break;
case '2':
case '6':
case '22':
case '26':
downloadExcel(data);
break;
case '3':
case '7':
case '23':
case '27':
downloadCSV(data);
break;
case '4':
case '8':
case '24':
case '28':
downloadPDF(data);
break;
}
}
function downloadTXT(data) {
var list = data[1]
var result = [];
var colLength = [9, 9, 4, 5, 10, 10, 7, 5, 5, 12, 5, 7];
var colLengths = [28, 16, 3, 7, 1, 1, 3, 2, 2, 21, 11, 20];
function format(str, len, index) {
str = (str || "")
.toString()
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (index === 2) len += 2;
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
return `"${str + space}"`;
}
var header = [
"账户名称","账号","开户机构号","开户机构名称",
"本外币合一标识","币种","钞/汇","账户性质",
"外币资金性质","账户状态","开户日期","可用余额","开户许可证号/基本存款账户编号信息"
];
var headerRow = header.map((item, i) =>
format(item, colLength[i] || 10, i)
);
result.push(headerRow.join(','));
list.forEach(row => {
var formatted = row.slice(0, -1).map((item, idx) =>
format(item, colLengths[idx] || 20, idx)
);
result.push(formatted.join(','));
});
var content = result.join('\n');
downloadFile(content, '活期账户详情下载.txt', 'text/plain');
}
function downloadExcel(list) {
let arr = [
["中国建设银行"],
["账户信息查询下载"],
];
list[1].pop()
let data = [...arr,...list]
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }
];
const baseFont = {
name: "Arial",
sz: 10
};
ws["A1"].s = {
font: baseFont
};
ws["A2"].s = {
font: { ...baseFont, bold: true },
alignment: { horizontal: "center", vertical: "center" }
};
data[2].forEach((_, i) => {
const cell = XLSX.utils.encode_cell({ r: 2, c: i });
ws[cell].s = {
font: baseFont,
alignment: { horizontal: "center", vertical: "center" }
};
});
data[3].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 3, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: "s",
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
ws["!cols"] = [
{ wch: 24.29 }, { wch: 21.29 }, { wch: 12.29 }, { wch: 12.29 },
{ wch: 10.29 }, { wch: 10.29 }, { wch: 16.29 }, { wch: 15.29 },
{ wch: 16.29 }, { wch: 17.29 }, { wch: 18.29 }, { wch: 20.29 },
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "账户信息");
const wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "array"
});
saveAs(new Blob([wbout]), "活期账户详情下载.xls");
}
function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户详情下载.csv', 'text/csv');
}
/* ✅ 打印日期 */
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // ✅ 不补0
const day = now.getDate(); // ✅ 不补0
document.getElementById("printDate").innerText =
`打印日期：${year}年${month}月${day}日`;
/* ✅ PDF导出 */
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const element = document.getElementById("pdfArea");
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true
});
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({
orientation: "p",
unit: "mm",
format: [210, 297]
});
const pageWidth = 210;
const pageHeight = 297;
const margin = 5;
let imgWidth = pageWidth - margin * 2;
let imgHeight = canvas.height * imgWidth / canvas.width;
if (imgHeight > pageHeight - margin * 2) {
imgHeight = pageHeight - margin * 2;
imgWidth = canvas.width * imgHeight / canvas.height;
}
const x = (pageWidth - imgWidth) / 2;
const y = margin;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("活期账户详情下载.pdf");
}
function printPage(type) {
if (type == '2') {
return downloadPDF();
}
var table = document.querySelector('.info-table');
if (!table) return;
var tableHTML = table.outerHTML;
var now = new Date();
var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
var win = window.open('', '_blank');
var html = `
<html>
<head>
<title>中国建设银行 企业网上银行</title>
<style>
body {
font-family: SimSun, Arial;
margin: 0;
font-size: 14px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
border: 1px solid #62a7e3;
}
td {
padding: 6px;
border: none !important;
border-bottom: 1px solid rgba(98, 167, 227, 0.4) !important;
}
tr:last-child td {
border-bottom: none;
}
</style>
</head>
<body>
${tableHTML}
</body>
</html>
`;
win.document.write(html);
win.document.close();
win.onload = function () {
win.print();
win.close();
};
}
</script> </script>
</html>
\ 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