You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
6.4 KiB
171 lines
6.4 KiB
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>注塑合格率月报</title>
|
|
<script src="../Scripts/echarts.min.js"></script>
|
|
<script src="../Scripts/jquery-1.8.0.min.js"></script>
|
|
<script src="../Scripts/DateScript.js"></script>
|
|
<link href="../CSS/InitCSS.css" rel="stylesheet" />
|
|
<link href="../CSS/YueStyleSheet.css" rel="stylesheet" />
|
|
<style>
|
|
#body {
|
|
background-image:url(../Pic/shang.png);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="body">
|
|
<div id="main"></div>
|
|
<div id="table">
|
|
<table>
|
|
<thead id="thead"></thead>
|
|
<tbody id="tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
$(function () {
|
|
Show();
|
|
setInterval("Show()", 60000);
|
|
});
|
|
|
|
function Show() {
|
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
$.ajax({
|
|
url: "../Handler/FiveScreenHandler.ashx?method=getInjection1_1",
|
|
datatype: 'json',
|
|
type: "Post",
|
|
contentType: "application/json; charset=utf-8",
|
|
async: false,
|
|
success: function (result) {
|
|
if (result) {
|
|
var objlist = eval('(' + result + ')');
|
|
var month = GetMonth();
|
|
|
|
//生成图表
|
|
myChart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
//color: ['lightgreen', 'lightblue', 'red'],
|
|
color: ['lightgreen', 'red'],
|
|
//backgroundColor: '#ffffff',
|
|
legend: {
|
|
textStyle: {
|
|
fontSize: 10,
|
|
color: '#666'
|
|
}
|
|
},
|
|
grid: {
|
|
//left: '3%',
|
|
//right: '4%',
|
|
//bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
//data: ['2018', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
data: month,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ffffff',
|
|
width: 1 //这里是为了突出显示加上的
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: { show: false },//去除网格线
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ffffff',
|
|
width: 1 //这里是为了突出显示加上的
|
|
}
|
|
},
|
|
min: 90,
|
|
max: 100,
|
|
interval:2
|
|
},
|
|
series: [{
|
|
name: '',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
//formatter: function (params) {
|
|
// if (params.value >= 90) {
|
|
// return params.value;
|
|
// } else {
|
|
// return '';
|
|
// }
|
|
//}
|
|
},
|
|
barWidth: '20px',
|
|
visualMap: {
|
|
show: false,
|
|
pieces: [{ gte: 0, lte: 100, color: 'red' }],
|
|
outOfRange: { color: 'green' }
|
|
},
|
|
data: objlist.data3
|
|
},
|
|
//{
|
|
// name: '',
|
|
// type: 'line',
|
|
// itemStyle: { normal: { label: { show: false } } },
|
|
// data: objlist.data1
|
|
//},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
itemStyle: {
|
|
normal: {
|
|
label: { show: false }
|
|
}
|
|
},
|
|
data: objlist.data2
|
|
}]
|
|
});
|
|
|
|
//生成表格
|
|
//title
|
|
var tableHead = "<tr>";
|
|
tableHead += "<td>日</td>";
|
|
for (var i = 0; i < month.length; i++)
|
|
{
|
|
tableHead += "<td>" + month[i] + "</td>";
|
|
}
|
|
tableHead += "</tr>";
|
|
$("#thead").html(tableHead);
|
|
//body
|
|
var standard = objlist.data2;
|
|
var numerial = objlist.data1;
|
|
|
|
var tableBody = "<tr>";
|
|
tableBody += "<td>标</td>";
|
|
for (var i = 0; i < standard.length; i++) {
|
|
tableBody += "<td>" + standard[i] + "</td>";
|
|
}
|
|
tableBody += "</tr>";
|
|
|
|
tableBody += "<tr>";
|
|
tableBody += "<td>数</td>";
|
|
for (var i = 0; i < numerial.length; i++) {
|
|
tableBody += "<td>" + numerial[i] + "</td>";
|
|
}
|
|
tableBody += "</tr>";
|
|
$("#tbody").html(tableBody);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|