<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>excel文件导入</title>
<style type="text/css">
html,.body{
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
}
.body{
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.post-message-section {
visibility: hidden;
}
.file-upload {
position: relative;
display: inline-block;
}
input[type="file"] {
display: none;
/* 隐藏原始输入框 */
}
label {
width: 240px;
height: 25px;
line-height: 25px;
display: inline-block;
padding: 10px 15px;
background-color: #007aff;
color: white;
border-radius: 32px;
cursor: pointer;
transition: background-color 0.3s;
text-align: center;
font-size: 16px;
}
header{
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 44px;
width: 100vw;
color: #fff;
padding-top: 25px;
}
header .title{
font-size: 18px;
}
header img{
position: absolute;
left: 20px;
}
/* header::before{
width: 16px;
height: 30px;
content: '';
position: absolute;
left: 20px;
top: 20px;
background-image: url('/static/image/home/return.png');
background-repeat: no-repeat;
background-size: cover;
} */
main{
width: 90%;
height: 80vh;
background-color: #fff;
border-radius: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
margin: 0 auto;
gap: 30px 0;
}
.body{
width: 100vw;
height: calc(100vh-22px);
padding-top: 22px;
background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
position: relative;
display: flex;
justify-content: center;
}
</style>
</head>
<body class="body">
<header>
<img id="gobackBtn" src="../../static/image/home/return.png" style="width: 8px; height:15px;"/>
<span class="title">数据导入</span>
<!-- <span class="title"></span> -->
</header>
<main>
<img src="../../static/image/upload/center.png" style="width: 207px; height:164px; margin-top: 159px;" />
<div class="file-upload">
<input type="file" id="file-input" @change="onFileChange" />
<label for="file-input">选择系统文件并导入</label>
</div>
</main>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="webview.js"></script>
<script src="xlsx.full.min.js"></script>
<script type="text/javascript">
console.log('XLSX', XLSX)
const fileInfoDiv = document.getElementById('fileInfo');
// document.getElementById('file-input').click();
// 返回上一页
document.getElementById('gobackBtn').addEventListener('click', function(event) {
uni.postMessage({ // 往真机页面传递读取数据
data: {
type: 'goHome'
}
});
})
document.getElementById('file-input').addEventListener('change', function(event) {
/**
* 1、选择excel文件
* 2、读取excel文件数据内容（只读取第一个sheet的表格数据值）
* 3、数据清洗，获取级联列表数据
* 4、
*/
console.log('onFileChange', JSON.stringify(event))
const files = event.target.files; // 获取文件列表
if (files.length > 0) {
const file = files[0]; // 获取第一个文件对象
const fileSize = (file.size / (1024)).toFixed(2); // 文件大小，单位MB
const fileName = file.name;
const fileType = file.type;
const extendName = fileName.split('.')[1]
if (extendName !== 'xlsx' && extendName !== 'xls') {
uni.postMessage({ // 往真机页面传递读取数据
data: {
errorTip: '请选择xlsx、xls格式的文件进行导入'
}
});
// alert('请选择xlsx、xls格式的文件进行导入');
return
}
if (fileSize > 700) { // 9999条数据 ≈ 700kb
// alert('文件过大，不能超过15MB');
uni.postMessage({ // 往真机页面传递读取数据
data: {
errorTip: '文件过大，不能超过700kb'
}
});
return
}
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data);
// console.log('读取数据workbook', JSON.stringify(workbook))
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(sheet);
console.log('读取数据jsonData', JSON.stringify(jsonData))
// console.log('sheet_to_row_object_array', XLSX.utils.sheet_to_row_object_array(sheet))
// jsonData 数据格式 如dataArr
const dataArr = jsonData
// 用于存储重复项
const duplicates = {};
const keysToCheck = ['工程名称', '中段名称', '分段名称', '排位线名称', '炮孔编号'];
// 导入数据必填项填写
var checkErrorRows = []
if(dataArr.length){
dataArr.forEach((item, index)=>{
for (let key in keysToCheck) {
if(!item[keysToCheck[key]]){
checkErrorRows.push(
`第[ ${index+1+1} ]行，数据列[ ${keysToCheck[key]} ]不存在或值为空!`)
}
}
})
if(checkErrorRows.length){ // 校验失败，提示错误信息
uni.postMessage({ // 往真机页面传递读取数据
data: {
errorTip: checkErrorRows.join('\n')
}
});
return
}
}else{
uni.postMessage({ // 往真机页面传递读取数据
data: {
errorTip: '导入文件内容为空'
}
});
return
}
// 检查重复项
dataArr.forEach((item, index) => {
const key = keysToCheck.map(k => item[k]).join('|'); // 使用各属性的组合作为唯一标识
if (!duplicates[key]) {
duplicates[key] = []; // 初始化数组
}
duplicates[key].push(index + 1); // 保存重复项的行号
});
// 找出并提醒重复项
const repeatingItems = Object.values(duplicates).filter(itemIndexes => itemIndexes.length > 1);
if (repeatingItems.length > 0) {
const messages = repeatingItems.map(item => `重复行: ${item.join(', ')}`).join('\n');
console.log(`发现重复项:\n${messages}`);
} else {
console.log('没有发现重复项');
}
const tempArr = dataArr.map((item)=>{
return {
engineeringName: item['工程名称']+'',
middleSectionName: item['中段名称']+'',
segmentName: item['分段名称']+'',
alignmentLineName: item['排位线名称']+'',
boreholeNumber: item['炮孔编号']+'',
throughHole: item['透孔'],
designHoleDepth: item['设计孔深'],
designInclination: item['设计倾角'],
}
})
alert('导入数据成功，正在跳转首页')
setTimeout(()=>{
uni.postMessage({ // 往真机页面传递读取数据
data: {
dataArr: tempArr,
}
});
}, 1000)
};
// alert(`
// <p>文件名: ${fileName}</p>
// <p>文件类型: ${fileType}</p>
// <p>文件大小: ${fileSize} KB</p>
// `);
} else {
alert('文件导入失败')
}
})
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
</script>
</body>
</html>