498 lines
21 KiB
Plaintext
498 lines
21 KiB
Plaintext
@{
|
||
ViewBag.Title = "Index";
|
||
Layout = "~/Views/Shared/_Index.cshtml";
|
||
}
|
||
<script>
|
||
|
||
</script>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>
|
||
表单设计器代码
|
||
</title>
|
||
<link rel="stylesheet" href="~/lib/layui/css/layui.css" />
|
||
<link rel="stylesheet" href="~/js/lay-module/formDesigner/formDesigner.css" />
|
||
<link rel="stylesheet" href="~/js/lay-module/cron/cron.css" />
|
||
<link rel="stylesheet" href="~/js/lay-module/labelGeneration/labelGeneration.css" />
|
||
<link rel="stylesheet" href="~/js/lay-module/formDesigner/formPreview.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div id="workerdiv" style="margin: 10px 20px;">
|
||
<form class="layui-form" style="height:100%;" id="formPreviewForm">
|
||
<div id="grid_2" class="layui-form-item layui-row grid active" data-id="grid_2"
|
||
data-tag="grid" data-index="0">
|
||
<div class="layui-col-md3 widget-col-list column0" data-index="0" data-parentindex="0">
|
||
<div id="ReStartTime" class="layui-form-item active" data-id="ReStartTime"
|
||
data-tag="date" data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 110px;">
|
||
开始时间:
|
||
</label>
|
||
<div class="layui-input-block" style="width:calc(100% - 110px);margin-left: 110px;">
|
||
<input id="dateReStartTime" name="ndateReStartTime" lay-verify="required"
|
||
class="layui-input icon-date widget-date " style="line-height: 40px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3 widget-col-list column1" data-index="1" data-parentindex="0">
|
||
<div id="ReEndTime" class="layui-form-item active" data-id="ReEndTime"
|
||
data-tag="date" data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 110px;">
|
||
结束世间:
|
||
</label>
|
||
<div class="layui-input-block" style="width:calc(100% - 110px);margin-left: 110px;">
|
||
<input id="dateReEndTime" name="ndateReEndTime" lay-verify="required" class="layui-input icon-date widget-date "
|
||
style="line-height: 40px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3 widget-col-list column2" data-index="2" data-parentindex="0">
|
||
<div id="select_4" class="layui-form-item active" data-id="select_4" data-tag="select"
|
||
data-index="0">
|
||
<label class="layui-form-label layui-form-required" style="width: 110px;">
|
||
时间间隔:
|
||
</label>
|
||
<div class="layui-input-block layui-form" lay-filter="select_4" style="margin-left: 110px">
|
||
<select name="selectint" lay-verify="required" id="selectIntervalt">
|
||
<option value="onemin" selected="">
|
||
1分钟
|
||
</option>
|
||
<option value="fivemin">
|
||
5分钟
|
||
</option>
|
||
<option value="tenmin">
|
||
10分钟
|
||
</option>
|
||
<option value="thirtymin">
|
||
30分钟
|
||
</option>
|
||
<option value="onehour">
|
||
1小时
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md2 widget-col-list column3" data-index="3" data-parentindex="0">
|
||
<div id="bottom_5" class="layui-form-item active" data-id="bottom_5" data-tag="bottom"
|
||
data-index="0">
|
||
<div class="layui-input-block" style="margin-left: 0px;">
|
||
<button id="btn_search" type="button" class="layui-btn custom-zc" ; onclick="GetReportView()">
|
||
<i class="layui-icon ">
|
||
</i>
|
||
确定
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md1 widget-col-list column4" data-index="4" data-parentindex="0">
|
||
<div id="btn_download" class="layui-form-item active" data-id="bottom_6" data-tag="bottom"
|
||
data-index="0">
|
||
|
||
<div class="layui-input-block" style="margin-left: 0px;">
|
||
<button id="bottom_6bottom" type="button" class="layui-btn custom-zc" ; onclick="downloadreport()">
|
||
<i class="layui-icon ">
|
||
</i>
|
||
下载
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
<form class="layui-form" style="height:100%;width:100%;" id="tablepanel">
|
||
<div class="layui-panel" id="gridpanel" style="height:100%;width:100%;overflow:scroll;">
|
||
<div id="result"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script type="text/javascript" src="~/lib/layui/layui.js">
|
||
</script>
|
||
<script type="text/javascript" src="~/js/Sortable/Sortable.js">
|
||
</script>
|
||
<script type="text/javascript" src="~/js/lay-module/iceEditor/iceEditor.js">
|
||
</script>
|
||
<script type="text/javascript" src="~/js/config.js?v=100">
|
||
</script>
|
||
<script type="text/javascript" src="~/lib/xlsx/dist/xlsx.full.min.js">
|
||
</script>
|
||
<script>
|
||
|
||
layui.use(["table", "layer", "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "carousel", "upload", "formField", "numberInput", "iconPicker", "cron", "labelGeneration"],
|
||
function () {
|
||
var $ = layui.jquery,
|
||
table = layui.table,
|
||
layer = layui.layer,
|
||
laytpl = layui.laytpl,
|
||
setter = layui.cache,
|
||
element = layui.element,
|
||
slider = layui.slider,
|
||
laydate = layui.laydate,
|
||
rate = layui.rate,
|
||
colorpicker = layui.colorpicker,
|
||
carousel = layui.carousel,
|
||
form = layui.form,
|
||
upload = layui.upload,
|
||
formField = layui.formField,
|
||
hint = layui.hint,
|
||
numberInput = layui.numberInput,
|
||
iconPicker = layui.iconPicker,
|
||
cron = layui.cron,
|
||
labelGeneration = layui.labelGeneration;
|
||
debugger;
|
||
|
||
});
|
||
wcLoading.close();
|
||
//debugger;
|
||
var starttime = new Date(new Date().setHours(0, 0, 0, 0));
|
||
var starttimeString = starttime.getFullYear() + "-" + parseInt(starttime.getMonth() + 1) + "-" + starttime.getDate() + " " + (starttime.getHours()) + ":" + starttime.getMinutes() + ":" + starttime.getSeconds();
|
||
var endtime = new Date();
|
||
endtime.setDate(endtime.getDate())
|
||
var endtimeString = endtime.getFullYear() + "-" + parseInt(endtime.getMonth() + 1) + "-" + endtime.getDate() + " " + (endtime.getHours()) + ":" + endtime.getMinutes() + ":" + endtime.getSeconds();
|
||
layui.use('laydate', function () {
|
||
var laydate = layui.laydate;
|
||
lay('#dateReStartTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value:starttimeString,
|
||
});
|
||
});
|
||
lay('#dateReEndTime').each(function () {
|
||
laydate.render({
|
||
elem: this,
|
||
trigger: 'click',
|
||
format: "yyyy-MM-dd HH:mm:ss",
|
||
//value: "2023-02-23 13:56:25",
|
||
value: endtimeString,
|
||
});
|
||
});
|
||
});
|
||
|
||
var starttime = new Date(new Date().setHours(0, 0, 0, 0));
|
||
var starttimeString = starttime.getFullYear() + "-" + parseInt(starttime.getMonth() + 1) + "-" + starttime.getDate() + " " + (starttime.getHours()) + ":" + starttime.getMinutes() + ":" + starttime.getSeconds();
|
||
var endtime = new Date();
|
||
endtime.setDate(endtime.getDate())
|
||
var endtimeString = endtime.getFullYear() + "-" + parseInt(endtime.getMonth() + 1) + "-" + endtime.getDate() + " " + (endtime.getHours()) + ":" + endtime.getMinutes() + ":" + endtime.getSeconds();
|
||
|
||
debugger;
|
||
|
||
function getFormatDate(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
let hour = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let seconds = date.getSeconds();
|
||
month = (month < 10) ? '0' + month : month;
|
||
day = (day < 10) ? '0' + day : day;
|
||
hour = (hour < 10) ? '0' + hour : hour;
|
||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||
let currentDate = year + "-" + month + "-" + day
|
||
+ " " + hour + ":" + minutes + ":" + seconds;
|
||
return currentDate;
|
||
}
|
||
|
||
//loadinghelper
|
||
|
||
var filepath = "";
|
||
// 文件普通操作
|
||
var handler = {};
|
||
//right_content
|
||
var rootpath = window.location.host;
|
||
//在页面未加载完毕之前显示的loading Html自定义内容
|
||
var _LoadingHtml = '<div id="loadingDiv" style="display: none; "><div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background-color: #f5f5f5;opacity:0.5;z-index: 1000;"></div><div id="layout" style="position: absolute;top: 40%; left: 40%;width: 20%; height: 20%; z-index: 1001;text-align:center;"><img src="//'+ rootpath +'/images/loading.gif" /></div></div>';
|
||
//呈现loading效果
|
||
document.getElementById("workerdiv").innerHTML += _LoadingHtml;
|
||
//移除loading效果
|
||
function completeLoading() {
|
||
document.getElementById("loadingDiv").style.display = "none";
|
||
}
|
||
//展示loading效果
|
||
function showLoading() {
|
||
document.getElementById("loadingDiv").style.display = "block";
|
||
}
|
||
|
||
function del() {
|
||
var delDiv = document.getElementById("_layer_"); delDiv.parentNode.removeChild(delDiv);
|
||
}
|
||
|
||
async function downloadreport() {
|
||
|
||
|
||
window.open(filepath);
|
||
}
|
||
async function GetReportView() {
|
||
debugger;
|
||
showLoading();
|
||
var datetimestart = $('#dateReStartTime')[0].value;
|
||
var datetimeend = $('#dateReEndTime')[0].value;
|
||
var timeInterval = 0;
|
||
switch ($('[name="selectint"]')[0].value) {
|
||
case "tensec":
|
||
timeInterval = 10
|
||
break
|
||
case "twentysec":
|
||
timeInterval = 20
|
||
break
|
||
case "thirtysec":
|
||
timeInterval = 30
|
||
break
|
||
case "onemin":
|
||
timeInterval = 60
|
||
break
|
||
case "fivemin":
|
||
timeInterval = 300
|
||
break
|
||
case "tenmin":
|
||
timeInterval = 600
|
||
break
|
||
case "thirtymin":
|
||
timeInterval = 1800
|
||
break
|
||
case "onehour":
|
||
timeInterval = 3600
|
||
break
|
||
default:
|
||
timeInterval = 3600
|
||
};
|
||
debugger;
|
||
//showLoading();
|
||
var datapa = {
|
||
"StartTime": Date.parse(new Date(datetimestart)), "EndTime": Date.parse(new Date(datetimeend)), "Interval": timeInterval
|
||
};
|
||
//var datapa = { "StartTime": datetimestart, "EndTime": datetimeend, "Interval": timeInterval };
|
||
debugger;
|
||
var result = "";
|
||
await $.ajax({
|
||
url: "/ReportManage/HistoryReport/GetReport",
|
||
type: "POST",
|
||
//dataType: "json",
|
||
//async: false,
|
||
data:datapa,
|
||
success: function (redata) {
|
||
result = redata;
|
||
debugger;
|
||
}
|
||
});
|
||
|
||
debugger;
|
||
//var result = await Call(api.Report.GetReport, datapa);
|
||
const fileDownloadUrl = "/report/" + result;
|
||
location.origin = fileDownloadUrl;
|
||
filepath = location.origin + fileDownloadUrl;
|
||
|
||
var data = xhrequest(filepath,
|
||
function (blob, type) {
|
||
ShowExcelReport(blob, "test" + '.' + type)
|
||
})
|
||
|
||
};
|
||
|
||
async function xhrequest(url, callback) {
|
||
let DownUrl = url;
|
||
let data = await fetch(DownUrl)
|
||
.then((response) => response.blob())
|
||
.then((res) => {
|
||
//获取文件格式
|
||
var index = DownUrl.lastIndexOf(".");
|
||
//获取文件后缀判断文件格式
|
||
var fileType = DownUrl.substr(index + 1);
|
||
let blod = new Blob([res]);
|
||
if (typeof callback == "function") {
|
||
callback(blod, fileType)
|
||
}
|
||
});
|
||
return data;
|
||
}
|
||
|
||
let ShowExcelReport = (blob, fileName) => {
|
||
try {
|
||
|
||
let file = new File([blob], fileName, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||
|
||
|
||
if (!/\.xlsx$/g.test(file.name)) {
|
||
alert("报表生成出错");
|
||
return;
|
||
}
|
||
handler.readWorkbookFromLocalFile(file, function (workbook) {
|
||
handler.readWorkbook(workbook);
|
||
});
|
||
} catch (e) {
|
||
console.log("表格转换失败");
|
||
}
|
||
};
|
||
|
||
handler = {
|
||
// 处理本地加载的文件
|
||
readWorkbookFromLocalFile(file, callback) {
|
||
var reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
var data = e.target.result;
|
||
var workbook = XLSX.read(data, { type: "binary" });
|
||
if (callback) callback(workbook);
|
||
};
|
||
reader.readAsBinaryString(file);
|
||
},
|
||
|
||
readWorkbook(workbook) {
|
||
var sheetNames = workbook.SheetNames; // 工作表名称集合
|
||
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
|
||
var csv = XLSX.utils.sheet_to_csv(worksheet);
|
||
document.getElementById("result").innerHTML = handler.csv2table(
|
||
csv,
|
||
true
|
||
);
|
||
|
||
// 合并单元格
|
||
handler.mergeTable(workbook, true);
|
||
staticToLayTable();
|
||
completeLoading();
|
||
},
|
||
|
||
// csv 数据转换为 table
|
||
csv2table(csv, showTab = false) {
|
||
var html = "<table lay-filter = \"tdemo\" class=\"layui-table\" lay-even=\"\" lay-skin=\"row\">";
|
||
var rows = csv.split("\n");
|
||
debugger;
|
||
rows.pop(); // 最后一行没用的
|
||
html += "<tbody>";
|
||
rows.forEach(function (row, idx) {
|
||
var columns = row.split(",");
|
||
//if (showTab) {
|
||
// columns.unshift(idx + 1); // 添加行索引
|
||
// if (idx == 0) {
|
||
// // 添加列索引
|
||
// html += "<tr>";
|
||
// for (var i = 1; i < columns.length; i++) {
|
||
// html +=
|
||
// "<th>" +
|
||
// //(i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
|
||
// (i == 0 ? "" : i.toString()) +
|
||
// "</th>";
|
||
// }
|
||
// html += "</tr>";
|
||
// }
|
||
//}
|
||
html += "<tr>";
|
||
columns.forEach(function (column) {
|
||
html += "<td align=center>" + column + "</td>";
|
||
});
|
||
html += "</tr>";
|
||
});
|
||
html += "</tbody>";
|
||
html += "</table>";
|
||
return html;
|
||
},
|
||
|
||
// 合并单元格
|
||
mergeTable(workbook, hasTab = false) {
|
||
let SheetNames = workbook.SheetNames[0];
|
||
let mergeInfo = workbook.Sheets[SheetNames]["!merges"];
|
||
console.log(mergeInfo);
|
||
|
||
let result = document.getElementById("result");
|
||
|
||
// 是否显示了tab
|
||
let baiseAdd = hasTab ? 1 : 0;
|
||
|
||
mergeInfo.forEach((item) => {
|
||
let start_r = item.s.r + baiseAdd-1;
|
||
let end_r = item.e.r + baiseAdd-1;
|
||
|
||
let start_c = item.s.c + baiseAdd-1;
|
||
let end_c = item.e.c + baiseAdd-1;
|
||
|
||
for (let i = start_r; i <= end_r; i++) {
|
||
let row = document.querySelectorAll("#result tr")[i];
|
||
for (let child = start_c; child <= end_c; child++) {
|
||
if (child === start_c && i === start_r) {
|
||
// 循环到就是第一个单元格，以这个单元格为开始进行合并
|
||
row.children[child].classList.add("will_span");
|
||
row.children[child].setAttribute("row", end_r - start_r + 1);
|
||
row.children[child].setAttribute("col", end_c - start_c + 1);
|
||
} else {
|
||
// 只做标记，不在这里删除
|
||
row.children[child].classList.add("remove");
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 移除对应的td
|
||
document.querySelectorAll(".remove").forEach((item) => {
|
||
item.parentNode.removeChild(item);
|
||
});
|
||
|
||
// 为大的td设置跨单元格合并
|
||
document.querySelectorAll(".will_span").forEach((item) => {
|
||
item.classList.remove("will_span");
|
||
item.rowSpan = item.getAttribute("row");
|
||
item.colSpan = item.getAttribute("col");
|
||
});
|
||
}
|
||
};
|
||
|
||
function staticToLayTable()
|
||
{
|
||
var table = layui.table;
|
||
|
||
//转换静态表格
|
||
table.init('tdemo', {
|
||
//height: 315 //设置高度
|
||
//, limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
|
||
//支持所有基础参数
|
||
});
|
||
}
|
||
|
||
|
||
function dataURLToFile(dataUrl, fileName) {
|
||
const dataArr = dataUrl.split(',');
|
||
const mime = "xlsx";
|
||
const originStr = atob(dataArr[0]);
|
||
return new File([originStr], fileName, { type: mime });
|
||
};
|
||
|
||
|
||
|
||
function getFileFromUrl(url, fileName) {
|
||
return new Promise((resolve, reject) => {
|
||
var blob = null;
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("GET", url);
|
||
xhr.setRequestHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||
xhr.responseType = "blob";
|
||
// 加载时处理
|
||
xhr.onload = () => {
|
||
// 获取返回结果
|
||
blob = xhr.response;
|
||
let file = new File([blob], fileName, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||
// 返回结果
|
||
resolve(file);
|
||
};
|
||
xhr.onerror = (e) => {
|
||
reject(e)
|
||
};
|
||
// 发送
|
||
xhr.send();
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |