@{
Layout = "~/Views/Shared/_AMESLayout.cshtml";
}
<script src="~/Highcharts-7.1.2/highcharts.js"></script>
<script src="~/Highcharts-7.1.2/modules/exporting.js"></script>
<script src="~/Highcharts-7.1.2/modules/export-data.js"></script>
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-form">
<div class="layui-form-item ">
<div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
</div>
</div>
</div>
<div class="layui-card-body">
<div id="divChart" style="width: 100%; height: 400px; margin: 0 auto"></div>
<input type="hidden" id="param_list" value="@ViewData["ParamList"]" />
<button type="button" onclick="tableToExcel('ratelist','直通率明細')" class="layui-btn layui-btn-normal layui-btn-sm"><i class="fa fa-file-excel-o"></i>導出Excel</button>
<br />
<br />
@Html.Raw(ViewData["RateDataList"])
</div>
</div>
@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
await Html.RenderPartialAsync("_FileinputScriptsPartial"); }
<script type="text/javascript">
function formatJSONDate(jsonDate) {
if (jsonDate == null) {
return "";
}
else {
var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
var myDate = new Date(date);
var yy = myDate.getFullYear();
var mm = (myDate.getMonth() + 1 < 10 ? '0' : '') + (myDate.getMonth() + 1);
var dd = (myDate.getDate() < 10 ? '0' : '') + myDate.getDate();
var h = (myDate.getHours() < 10 ? '0' : '') + myDate.getHours();
var m = (myDate.getMinutes() < 10 ? '0' : '') + myDate.getMinutes();
var s = (myDate.getSeconds() < 10 ? '0' : '') + myDate.getSeconds();
//mm + "/" + dd + " " +
//var output = yy + "-" + mm + "-" + dd + " " + h + ":" + m + ":" + s;
var output = yy + mm + dd + h + m + s;
// myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
return output;
}
}
function base64(content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
function tableToExcel(tableID, fileName) {
var table = document.getElementById(tableID);
var excelContent = table.innerHTML;
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
excelFile += "<body><table>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
var a = document.createElement("a");
a.download = fileName + formatJSONDate(Date.now().toString()) + ".xls";
a.href = link;
a.click();
}
$(document).ready(function () {
//alert(param_list.value);
$.ajax({
type: "Post",
url: '/QRS/GetYieldData4QRS014?id=' + param_list.value,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
var idx = 0;
var xAxisData = new Array();
var yieldData = new Array();
$.each(response, function (i, item) {
yieldData[idx] = item["yield"];
xAxisData[idx] = item["wipNO"];
idx = idx + 1;
});
Highcharts.chart('divChart', {
title: {
text: '直通率圖表'
},
subtitle: {
text: ''
},
xAxis: {
categories: xAxisData
},
yAxis: {
title: {
text: '直通率'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: '工單號碼',
data: yieldData
},
{
type: 'line',
name: '工單號碼',
data: yieldData
}]
});
},
error: function () {
alert("查無直通率資料!");
$("#divChart").empty();
}
});
});
</script>
}