430 lines
18 KiB
HTML
430 lines
18 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>杆塔导入</title>
|
||
<meta name="renderer" content="webkit" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
|
||
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
|
||
<style>
|
||
html,body{
|
||
height: 100%;
|
||
}
|
||
body{
|
||
overflow-y:hidden;
|
||
}
|
||
.demo-tab-header .layui-btn.layui-this{
|
||
border-color: #1E9FFF; color: #1E9FFF;background: #1E9FFF;
|
||
}
|
||
.layui-btn-container .layui-btn {
|
||
margin-right: 0px;
|
||
margin-bottom: 0px;
|
||
word-spacing: normal;
|
||
}
|
||
.demo-tab-header{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
}
|
||
.demo-tab-body>div{display: none;}
|
||
.one{
|
||
border-radius: 50%;
|
||
width: 35px;
|
||
}
|
||
/* .two{
|
||
height: 1px;
|
||
width: 5%;
|
||
margin-top: 18px
|
||
} */
|
||
#tabHeader{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.line {
|
||
width: 100px;
|
||
height: 2px;
|
||
background-color: gray;
|
||
top: 99px;
|
||
left: 50px;
|
||
}
|
||
.one1{
|
||
background: #1E9FFF
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
border: 1px solid black;
|
||
}
|
||
th, td {
|
||
border: 1px solid black;
|
||
padding: 5px;
|
||
text-align: center
|
||
}
|
||
.text-complete {
|
||
font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: rgb(102, 102, 102);
|
||
text-align: center;
|
||
line-height: 24px;
|
||
}
|
||
#uploadConatiner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center; /* 垂直居中 */
|
||
align-items: center; /* 水平居中 */
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
#uploadConatiner img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layui-panel" style="height: 100%">
|
||
<!-- 任意自定义的 tab 元素 -->
|
||
<div class="demo-tab-header layui-btn-container" id="tabHeader">
|
||
<button class="layui-btn one layui-btn-primary layui-this" id="btn1" ></button>
|
||
<div class="line one1"></div>
|
||
<div class="line two"></div>
|
||
<button class="layui-btn one layui-btn-primary" id="btn2" ></button>
|
||
<div class="line three"></div>
|
||
<div class="line four"></div>
|
||
<button class="layui-btn one layui-btn-primary" id="btn3" ></button>
|
||
<div class="line five"></div>
|
||
<div class="line six"></div>
|
||
<button class="layui-btn one layui-btn-primary" id="btn4" ></button>
|
||
</div>
|
||
<div id="tabHeader_title">
|
||
<span style="position: absolute;left: 29.2%;" id="chooseDiv">选择文件</span>
|
||
<span style="position: absolute;left: 42.1%;" id="reviewDiv">数据预览</span>
|
||
<span style="position: absolute;left: 55%;" id="checkDataDiv">异常数据</span>
|
||
<span style="position: absolute;left: 67.8%;" id="uploadFinishDiv">导入完成</span>
|
||
</div>
|
||
<div style="margin-top: 20px;">
|
||
<div id="chooseConatiner">
|
||
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;">
|
||
<label class="layui-form-label" style="height: 100px;">
|
||
<img src="../../img/download.png" style="width: 50px;margin-left: 10px;margin-top: 10px;" alt=""/>
|
||
</label>
|
||
<div class="layui-input-block layui-panel" style="display: flex;height: 99px;flex-direction: column;">
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">填写导入数据信息</div>
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</div>
|
||
<span style="color: #1E9FFF;margin-left: 30px;margin-top: 10px;cursor: pointer" onclick="download()">下载模板</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;">
|
||
<label class="layui-form-label" style="height: 100px;">
|
||
<img src="../../img/selection.png" style="width: 50px;margin-left: 10px;margin-top: 10px;"/>
|
||
</label>
|
||
<div class="layui-input-block layui-panel" style="display: flex;height: 99px;flex-direction: column;">
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">选择所属工程</div>
|
||
<div style="display: flex">
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">请选择杆塔所属工程</div>
|
||
<select id="engineerIds" name="engineerIds" class="layui-select" lay-search="" style="margin-left: 20px;width: 30%;"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;">
|
||
<label class="layui-form-label" style="height: 100px;">
|
||
<img src="../../img/upload.png" style="width: 50px;margin-left: 10px;margin-top: 10px;" alt=""/>
|
||
</label>
|
||
<div class="layui-input-block layui-panel" style="display: flex;height: 99px;flex-direction: column;">
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">上传填好的信息表</div>
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">文件后缀名必须为xls或xlsx(即Excel格式),文件大小不得大于10M,最多支持1000行数据</div>
|
||
<input type="file" id="excel-file" style="display: none;">
|
||
<div style="display: flex">
|
||
<span id="select-file-btn" style="color: #1E9FFF;margin-left: 30px;margin-top: 10px;cursor: pointer">上传文件</span>
|
||
<div id="selected-file-name" style="margin-top: 10px; margin-left: 20px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-pane" style="height: 100px;padding-right: 50px;padding-left: 50px;padding-top: 20px;display: flex;flex-direction: row;margin-bottom: 100px;">
|
||
<div class="layui-panel" style="display: flex;height: 99px;flex-direction: row;background-color: rgb(255,245,230);width: 100%;">
|
||
<img src="../../img/warn.png" style="width: 50px;margin-left: 10px;margin-top: 20px;height: 50px;" alt=""/>
|
||
<div style="display: flex;flex-direction: column;">
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 600;font-size: 16px;">特别提示</div>
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">1. 必须选择杆塔所属工程</div>
|
||
<div style="margin-left: 30px;margin-top: 10px;font-weight: 400;font-size: 12px;">2. 导入过程中如发现相同数据，且对该数据更新，则更新这条数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position: absolute;bottom: 1%;left: 3%;">
|
||
<span style="color: #1E9FFF; cursor: pointer" onclick="importRecord()">导入记录</span>
|
||
</div>
|
||
<div style="position: absolute;bottom: 1%;right: 3%;">
|
||
<button class="layui-btn layui-bg-blue" id="upload_next">下一步</button>
|
||
</div>
|
||
</div>
|
||
<div id="reviewConatiner" style="display: none;">
|
||
<div style="height: 500px;margin-top: 40px;padding: 10px;overflow: auto;display: flex;justify-content: center;">
|
||
<!-- 表格 -->
|
||
<table id="previewTable"></table>
|
||
</div>
|
||
<div style="position: absolute;bottom: 1%;right: 3%;">
|
||
<button class="layui-btn layui-bg-blue" id="review_before">上一步</button>
|
||
<button class="layui-btn layui-bg-blue" id="review_next">下一步</button>
|
||
</div>
|
||
</div>
|
||
<div id="abnormal" style="display: none;">
|
||
<div id="checkDataConatiner" style="margin: 53px; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px;"></div>
|
||
<div style="position: absolute;bottom: 1%;right: 3%;">
|
||
<button class="layui-btn layui-bg-blue" id="abnormal_before">上一步</button>
|
||
</div>
|
||
</div>
|
||
<div id="uploadConatiner" style="display: none;">
|
||
<img src="../../img/complete.png" alt="">
|
||
<span class="text-complete">数据导入完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
<script src="../../js/jquery/jquery-3.6.0.js"></script>
|
||
<script src="../../layui-v2.8.18/layui/layui.js"></script>
|
||
<script type="text/javascript" src="../../js/jq.js"></script>
|
||
<script type="text/javascript" src="../../js/select.js"></script>
|
||
<script src="../../js/common_methon.js"></script>
|
||
<script src="../../js/xlsx.full.min.js"></script>
|
||
<script type="text/javascript" src="../../js/my/permission.js"></script>
|
||
<script type="text/javascript" src="../../../public/public.js"></script>
|
||
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
||
|
||
<script>
|
||
let rowCount = 0;
|
||
let fileSizeInMB = 0;
|
||
$("#upload_next").click(function(){
|
||
// 判断工程下拉框是否有值
|
||
var engineerId = $("#engineerIds").val();
|
||
if (!engineerId) {
|
||
layer.msg('请选择工程');
|
||
return;
|
||
}
|
||
|
||
// 判断是否已经选择了 Excel 文件
|
||
var file = $("#excel-file").prop("files")[0];
|
||
if (!file) {
|
||
layer.msg('请选择要上传的 Excel 文件');
|
||
return;
|
||
}
|
||
var fileName = file.name;
|
||
var fileExt = fileName.split('.').pop().toLowerCase();
|
||
if (fileExt !== 'xlsx' && fileExt !== 'xls') {
|
||
layer.msg('文件只能是后缀名为.xlsx或.xls的Excel 文件');
|
||
return;
|
||
}
|
||
$("#chooseConatiner").css("display","none")
|
||
$("#reviewConatiner").css("display","")
|
||
$(".two").css("background","#1E9FFF")
|
||
$(".three").css("background","#1E9FFF")
|
||
$("#btn2").css("background","#1E9FFF")
|
||
|
||
})
|
||
$("#review_before").click(function(){
|
||
$("#chooseConatiner").css("display","")
|
||
$("#reviewConatiner").css("display","none")
|
||
$(".two").css("background","gray")
|
||
$(".three").css("background","gray")
|
||
$("#btn2").css("background","")
|
||
})
|
||
$("#abnormal_before").click(function(){
|
||
$("#reviewConatiner").css("display","")
|
||
$("#abnormal").css("display","none")
|
||
$(".four").css("background","gray")
|
||
$(".five").css("background","gray")
|
||
$("#btn3").css("background","")
|
||
})
|
||
getEngineerLevel("","");
|
||
|
||
/*
|
||
* 下载模板
|
||
*/
|
||
function download() {
|
||
window.location.href = czl_ht_url + "/downloadTemplateController/download?filename=杆塔-导入模版（大地坐标系）.xlsx";
|
||
}
|
||
/*
|
||
* 选择文件
|
||
*/
|
||
var selectFileBtn = document.getElementById("select-file-btn");
|
||
var excelFile = document.getElementById("excel-file");
|
||
var selectedFileName = document.getElementById("selected-file-name");
|
||
|
||
selectFileBtn.onclick = function() {
|
||
excelFile.click();
|
||
}
|
||
|
||
excelFile.onchange = function() {
|
||
selectedFileName.innerHTML = excelFile.value.split("\\").pop(); // 获取选择的文件名 // 显示文件名
|
||
}
|
||
|
||
/*
|
||
* 预览
|
||
*/
|
||
document.getElementById('excel-file').addEventListener('change', handleFileSelect, false);
|
||
|
||
function handleFileSelect(event) {
|
||
const file = event.target.files[0];
|
||
|
||
// 获取文件大小（以字节为单位）
|
||
const fileSizeInBytes = file.size;
|
||
|
||
// 将文件大小转换为更适合阅读的格式（例如 KB 或 MB）
|
||
const fileSizeInKB = fileSizeInBytes / 1024;
|
||
fileSizeInMB = fileSizeInKB / 1024;
|
||
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = function(e) {
|
||
const data = e.target.result;
|
||
const workbook = XLSX.read(data, {type: 'array'});
|
||
|
||
const sheetName = workbook.SheetNames[0];
|
||
const sheet = workbook.Sheets[sheetName];
|
||
|
||
const table = document.getElementById('previewTable');
|
||
table.innerHTML = '';
|
||
|
||
const range = XLSX.utils.decode_range(sheet['!ref']);
|
||
for (let R = range.s.r; R <= range.e.r; ++R) {
|
||
const row = table.insertRow(-1);
|
||
for (let C = range.s.c; C <= range.e.c; ++C) {
|
||
const cellRef = XLSX.utils.encode_cell({c: C, r: R});
|
||
const cell = sheet[cellRef];
|
||
const text = cell ? cell.v : '';
|
||
const cellElement = row.insertCell(-1);
|
||
cellElement.appendChild(document.createTextNode(text));
|
||
}
|
||
}
|
||
|
||
// 获取表格有多少行数据
|
||
rowCount = table.rows.length;
|
||
console.log('表格有 ' + rowCount + ' 行数据。');
|
||
};
|
||
reader.readAsArrayBuffer(file);
|
||
}
|
||
|
||
/*
|
||
* 导入
|
||
*/
|
||
|
||
$("#review_next").click(function(){
|
||
if(rowCount > 1000){
|
||
layer.msg('数据量大于1000行', {icon: 2, time: 2000});
|
||
}else if(fileSizeInMB > 10){
|
||
layer.msg('文件大小大于10M', {icon: 2, time: 2000});
|
||
}else{
|
||
uploadFile();
|
||
}
|
||
});
|
||
function uploadFile() {
|
||
var fileInput = document.getElementById('excel-file');
|
||
var file = fileInput.files[0]; // 获取文件对象
|
||
|
||
if (file) {
|
||
var formData = new FormData();
|
||
formData.append('file', file);
|
||
formData.append('engineerId', $("#engineerIds").val());
|
||
console.log(formData)
|
||
|
||
// 发送文件数据
|
||
$.ajax({
|
||
url: czl_ht_url + "/towerPro/towerListImport",
|
||
type: 'POST',
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
beforeSend: function() {
|
||
layer.msg('数据导入中，请稍等。。。', {icon: 4});
|
||
},
|
||
success: function(res) {
|
||
console.log(res);
|
||
layer.closeAll("loading");
|
||
if (res.resMsg === "导入成功") {
|
||
$(".four").css("background","#1E9FFF")
|
||
$("#btn3").css("background","#1E9FFF")
|
||
$(".five").css("background","#1E9FFF")
|
||
$(".six").css("background","#1E9FFF")
|
||
$("#btn4").css("background","#1E9FFF")
|
||
$("#reviewConatiner").css("display","none")
|
||
$("#uploadConatiner").css("display","")
|
||
} else if (res.resMsg === "数据为空") {
|
||
layer.msg('数据为空,请先添加数据再进行导入!', {icon: 2, time: 2000});
|
||
} else {
|
||
$(".four").css("background","#1E9FFF")
|
||
$(".five").css("background","#1E9FFF")
|
||
$("#btn3").css("background","#1E9FFF")
|
||
$("#reviewConatiner").css("display","none")
|
||
$("#abnormal").css("display","")
|
||
var checkDataContainer = document.getElementById('checkDataConatiner');
|
||
checkDataContainer.innerHTML = res.resMsg;
|
||
checkDataContainer.style.display = 'block';
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.log(err);
|
||
layer.msg('上传失败', { icon: 2, time: 3000 });
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg('请先选择文件', {icon: 2, time: 2000});
|
||
}
|
||
}
|
||
|
||
|
||
function importRecord() {
|
||
popup("导入记录","./ImportRecordList.html");
|
||
}
|
||
function popup(title, contentUrl) {
|
||
var index = layer.open({
|
||
title: [title, 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
|
||
type: 2,
|
||
content: contentUrl,
|
||
area: ['90%', '95%'],
|
||
maxmin: false,
|
||
success: function (layero, index) {
|
||
},
|
||
yes: function (index, layero) {
|
||
//提交子页面时执行
|
||
// 获取弹出层中的form表单元素
|
||
var formSubmit = layer.getChildFrame('form', index);
|
||
// 查找class样式为submitBtn的按钮
|
||
let submited = formSubmit.find('button.subBtn');
|
||
// 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
|
||
submited.click();
|
||
}
|
||
,end:function (){
|
||
reloadTable(contentUrl, title, index)
|
||
}
|
||
, cancel: function (index, layero) {
|
||
var t = changeProTeam(contentUrl, title, index);
|
||
if (!t) {
|
||
return false;
|
||
}
|
||
var tf = changSubTeam(contentUrl, title, index);
|
||
if (!tf) {
|
||
return false;
|
||
}
|
||
var tff = changOwnTeam(contentUrl, title, index);
|
||
if (!tff) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
});
|
||
}
|
||
|
||
</script>
|
||
</html>
|