517 lines
20 KiB
Plaintext
517 lines
20 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XLXSBJ_AFZNRDR.aspx.cs" Inherits="GThinking.N_XLXSBJ.XLXSBJ_AFZNRDR" %>
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head id="Head1" runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>数据解析工具</title>
|
|
<link type="text/css" rel="stylesheet" href="images/css2.css"/>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
|
|
<![endif]-->
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Roboto", Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
margin: 0 0 32px 0;
|
|
float: left;
|
|
}
|
|
.grid-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
.grid-item {
|
|
width: 48%;
|
|
float: left;
|
|
margin-right: 4%;
|
|
}
|
|
.grid-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.card {
|
|
padding: 24px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
|
|
height: 900px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.mode-selector {
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.mode-button {
|
|
width: 32%;
|
|
float: left;
|
|
margin-right: 2%;
|
|
padding: 16px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
}
|
|
.mode-button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.mode-button.selected {
|
|
border-color: #1976d2;
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
color: #1976d2;
|
|
}
|
|
.example-content {
|
|
height: 750px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.example-image {
|
|
flex: 1;
|
|
min-height: 400px;
|
|
margin: 16px 0;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.example-image img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.button-container {
|
|
margin-bottom: 35px;
|
|
overflow: hidden;
|
|
}
|
|
.paste-button, .submit-button {
|
|
width: 48%;
|
|
float: left;
|
|
margin-right: 4%;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
height: 52px;
|
|
line-height: 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
}
|
|
.submit-button {
|
|
margin-right: 0;
|
|
}
|
|
.paste-button {
|
|
background: #1976d2;
|
|
}
|
|
.paste-button:hover {
|
|
background: #1565c0;
|
|
}
|
|
.submit-button {
|
|
background: #9c27b0;
|
|
}
|
|
.submit-button:hover {
|
|
background: #7b1fa2;
|
|
}
|
|
.icon-container {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
}
|
|
.data-table {
|
|
height: 800px;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
th, td {
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
word-wrap: break-word;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
th {
|
|
background-color: #f5f5f5;
|
|
font-weight: bold;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
th:nth-child(1), td:nth-child(1) { width: 25%; }
|
|
th:nth-child(2), td:nth-child(2) { width: 20%; }
|
|
th:nth-child(3), td:nth-child(3) { width: 35%; }
|
|
th:nth-child(4), td:nth-child(4) { width: 20%; }
|
|
.example-content h3, .card > h3 {
|
|
font-size: 20px;
|
|
color: #1976d2;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
margin: 0 0 20px 0;
|
|
font-weight: 500;
|
|
}
|
|
.example-content h3:before, .card > h3:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
width: 3px;
|
|
height: 20px;
|
|
background-color: #1976d2;
|
|
}
|
|
.example-desc {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f9ff;
|
|
border-left: 4px solid #1976d2;
|
|
padding: 16px;
|
|
margin-top: 24px;
|
|
}
|
|
.ie-warning {
|
|
display: none;
|
|
padding: 10px;
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeeba;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<asp:HiddenField ID="hdnTableData" runat="server" />
|
|
<div class="container">
|
|
<h1 class="page-title">数据解析工具</h1>
|
|
<div id="ieWarning" class="ie-warning">
|
|
注意：您正在使用IE浏览器，粘贴功能需要手动点击允许访问剪贴板。
|
|
</div>
|
|
<div class="grid-container">
|
|
<div class="grid-item">
|
|
<div class="card">
|
|
<div class="mode-selector">
|
|
<button type="button" class="mode-button selected" onclick="selectMode('A')" id="modeA">
|
|
<div style="font-weight:500">模式A</div>
|
|
<div class="example-desc">三列独立数据(型号 规格 数量)</div>
|
|
</button>
|
|
<button type="button" class="mode-button" onclick="selectMode('B')" id="modeB">
|
|
<div style="font-weight:500">模式B</div>
|
|
<div class="example-desc">两列空格分隔(型号 规格 数量)</div>
|
|
</button>
|
|
<button type="button" class="mode-button" onclick="selectMode('C')" id="modeC">
|
|
<div style="font-weight:500">模式C</div>
|
|
<div class="example-desc">两列(产品名称 型号 规格 数量)</div>
|
|
</button>
|
|
</div>
|
|
<div class="example-content" data-mode="A" style="display: block;">
|
|
<h3>模式A示例</h3>
|
|
<div class="example-image">
|
|
<img src="images/modeA_example.png" alt="模式A示例" />
|
|
</div>
|
|
</div>
|
|
<div class="example-content" data-mode="B" style="display: none;">
|
|
<h3>模式B示例</h3>
|
|
<div class="example-image">
|
|
<img src="images/modeB_example.png" alt="模式B示例" />
|
|
</div>
|
|
</div>
|
|
<div class="example-content" data-mode="C" style="display: none;">
|
|
<h3>模式C示例</h3>
|
|
<div class="example-image">
|
|
<img src="images/modeC_example.png" alt="模式C示例" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="card">
|
|
<div class="button-container">
|
|
<button type="button" class="paste-button" id="pasteButton" onclick="pasteData()">
|
|
<span class="icon-container">
|
|
<svg width="24" height="24" viewBox="0 0 24 24">
|
|
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
|
stroke="white" stroke-width="2" fill="none"/>
|
|
<rect x="8" y="2" width="8" height="4" rx="1"
|
|
stroke="white" stroke-width="2" fill="none"/>
|
|
<path d="M8 10h8v8H8z"
|
|
stroke="white" stroke-width="2" fill="none"/>
|
|
</svg>
|
|
</span>
|
|
<span>点击粘贴数据</span>
|
|
</button>
|
|
<asp:Button ID="btnSubmit" runat="server" CssClass="submit-button"
|
|
Text="写入报价单" OnClick="btnSubmit_Click" OnClientClick="return prepareData();" />
|
|
</div>
|
|
<h3>解析数据预览结果</h3>
|
|
<div class="data-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>型号</th>
|
|
<th>电压等级</th>
|
|
<th>规格</th>
|
|
<th>数量</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resultBody">
|
|
<!-- 数据动态插入 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script type="text/javascript">
|
|
// ==== 解决SQL DateTime溢出问题 ====
|
|
function getValidDate() {
|
|
var currentDate = new Date();
|
|
if (currentDate < new Date('1753-01-01')) {
|
|
currentDate = new Date('1753-01-02');
|
|
}
|
|
return currentDate.toISOString();
|
|
}
|
|
|
|
// ==== 移除页面关闭提示 ====
|
|
window.onbeforeunload = null;
|
|
if (window.addEventListener) {
|
|
window.addEventListener("beforeunload", function(){}, false);
|
|
} else if (window.attachEvent) {
|
|
window.attachEvent("onbeforeunload", function(){});
|
|
}
|
|
|
|
// ==== 其他功能 ====
|
|
if (!NodeList.prototype.forEach) {
|
|
NodeList.prototype.forEach = function(callback, thisArg) {
|
|
thisArg = thisArg || window;
|
|
for (var i = 0; i < this.length; i++) {
|
|
callback.call(thisArg, this[i], i, this);
|
|
}
|
|
};
|
|
}
|
|
|
|
// 检测IE浏览器
|
|
function isIE() {
|
|
return window.navigator.userAgent.indexOf('MSIE ') > -1 ||
|
|
window.navigator.userAgent.indexOf('Trident/') > -1;
|
|
}
|
|
|
|
// 如果是IE浏览器，显示警告信息
|
|
if (isIE()) {
|
|
document.getElementById('ieWarning').style.display = 'block';
|
|
}
|
|
|
|
var selectedMode = "A";
|
|
|
|
function selectMode(mode) {
|
|
selectedMode = mode;
|
|
document.querySelectorAll('.mode-button').forEach(function(button) {
|
|
button.classList.remove('selected');
|
|
});
|
|
document.getElementById('mode' + mode).classList.add('selected');
|
|
document.querySelectorAll('.example-content').forEach(function(content) {
|
|
content.style.display = content.dataset.mode === mode ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
// 从型号中提取电压等级并清理型号（改进版）
|
|
function extractVoltageInfo(model) {
|
|
if (!model) return { model: '', voltage: '' };
|
|
|
|
// 匹配常见的电压等级模式，如0.6/1kV、300/500V、1.8/3kV、6/10kV等
|
|
var voltagePattern = /(?:[-_](\d+\.?\d*\s*\/\s*\d+\.?\d*\s*[kK]?[Vv])|(\d+\.?\d*\s*[kK]?[Vv]))$/;
|
|
var matches = model.match(voltagePattern);
|
|
|
|
if (matches && matches[0]) {
|
|
// 获取电压等级并标准化
|
|
var voltage = matches[0].replace(/^[-_]/, '').trim().replace(/[kK][Vv]$/i, 'kV');
|
|
// 获取清理后的型号（保留前面的连字符）
|
|
var cleanModel = model.substring(0, model.length - matches[0].length).replace(/[-_]$/, '').trim();
|
|
return {
|
|
model: cleanModel,
|
|
voltage: voltage
|
|
};
|
|
}
|
|
|
|
return { model: model, voltage: '' };
|
|
}
|
|
|
|
function parseAndDisplayData(text) {
|
|
var rows = text.split('\n');
|
|
var resultBody = document.getElementById('resultBody');
|
|
resultBody.innerHTML = '';
|
|
|
|
rows.forEach(function(row) {
|
|
if (row.trim() !== '') {
|
|
var cells;
|
|
var model, voltageLevel = '', spec = '', quantity = '';
|
|
|
|
if (selectedMode === 'A') {
|
|
cells = row.split('\t');
|
|
var modelInfo = extractVoltageInfo(cells[0] || '');
|
|
model = modelInfo.model;
|
|
voltageLevel = modelInfo.voltage;
|
|
spec = cells[1] || '';
|
|
quantity = cells[2] || '';
|
|
} else if (selectedMode === 'B') {
|
|
cells = row.split('\t');
|
|
var modelSpec = cells[0] || '';
|
|
var splitIndex = Math.max(
|
|
modelSpec.lastIndexOf(' '),
|
|
modelSpec.lastIndexOf('-')
|
|
);
|
|
|
|
// 分割型号和规格
|
|
var modelPart, specPart;
|
|
if (splitIndex === -1) {
|
|
modelPart = modelSpec;
|
|
specPart = '';
|
|
} else {
|
|
modelPart = modelSpec.substring(0, splitIndex);
|
|
specPart = modelSpec.substring(splitIndex + 1);
|
|
}
|
|
|
|
// 提取电压等级并清理型号
|
|
var modelInfo = extractVoltageInfo(modelPart);
|
|
model = modelInfo.model;
|
|
voltageLevel = modelInfo.voltage;
|
|
spec = specPart;
|
|
quantity = cells[1] || '';
|
|
} else if (selectedMode === 'C') {
|
|
// 修正模式C的解析逻辑
|
|
cells = row.trim().split(/\s+/); // 使用正则分割多个空格
|
|
if (cells.length >= 4) {
|
|
// 产品名称 = cells[0]
|
|
var modelInfo = extractVoltageInfo(cells[1] || '');
|
|
model = modelInfo.model;
|
|
voltageLevel = modelInfo.voltage;
|
|
spec = cells[2] || '';
|
|
quantity = cells[3] || '';
|
|
} else if (cells.length === 3) {
|
|
// 兼容可能缺少产品名称的情况
|
|
var modelInfo = extractVoltageInfo(cells[0] || '');
|
|
model = modelInfo.model;
|
|
voltageLevel = modelInfo.voltage;
|
|
spec = cells[1] || '';
|
|
quantity = cells[2] || '';
|
|
}
|
|
}
|
|
|
|
if (model !== undefined) {
|
|
var newRow = resultBody.insertRow();
|
|
var cell1 = newRow.insertCell(0);
|
|
var cell2 = newRow.insertCell(1);
|
|
var cell3 = newRow.insertCell(2);
|
|
var cell4 = newRow.insertCell(3);
|
|
|
|
cell1.textContent = model;
|
|
cell2.textContent = voltageLevel;
|
|
cell3.textContent = spec;
|
|
cell4.textContent = quantity;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function pasteData() {
|
|
// 现代浏览器使用 navigator.clipboard
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.readText()
|
|
.then(function(text) {
|
|
parseAndDisplayData(text);
|
|
})
|
|
.catch(function(err) {
|
|
alert('无法访问剪贴板，请检查浏览器权限设置或使用IE兼容模式。错误: ' + err);
|
|
console.error('Failed to read clipboard contents: ', err);
|
|
});
|
|
}
|
|
// IE浏览器使用 window.clipboardData
|
|
else if (window.clipboardData) {
|
|
try {
|
|
var text = window.clipboardData.getData('Text');
|
|
if (text) {
|
|
parseAndDisplayData(text);
|
|
} else {
|
|
alert('无法从剪贴板获取数据，请确保已复制内容并点击允许访问剪贴板。');
|
|
}
|
|
} catch (e) {
|
|
alert('IE浏览器安全设置阻止了剪贴板访问。请点击允许或调整安全设置。错误: ' + e.message);
|
|
console.error('IE clipboard access error: ', e);
|
|
}
|
|
}
|
|
// 其他不支持剪贴板API的浏览器
|
|
else {
|
|
alert('您的浏览器不支持直接访问剪贴板。请手动粘贴到文本框中。');
|
|
var manualInput = prompt("请粘贴您的数据到这里:", "");
|
|
if (manualInput !== null) {
|
|
parseAndDisplayData(manualInput);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 准备数据并提交到服务器
|
|
function prepareData() {
|
|
var table = document.getElementById('resultBody');
|
|
var rows = table.rows;
|
|
var data = [];
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var cells = rows[i].cells;
|
|
data.push({
|
|
XLXHID: cells[0].textContent || '', // 型号
|
|
DYDJID: cells[1].textContent || '', // 电压等级
|
|
XLGGID: cells[2].textContent || '', // 规格
|
|
BJSL: cells[3].textContent || '0' // 数量
|
|
});
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
alert('没有可写入的数据，请先粘贴数据！');
|
|
return false;
|
|
}
|
|
|
|
// 将数据存入隐藏字段
|
|
document.getElementById('<%= hdnTableData.ClientID %>').value = JSON.stringify(data);
|
|
return true;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |