|
|
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>纽威配发料看板</title>
<link rel="stylesheet" href="~/Content/Cust017/css/comon1.css" /> <link rel="stylesheet" href="~/Content/Cust007/css/public.css" /> <link rel="stylesheet" href="~/Content/Cust007/css/fq.css" />
<style> .span1 { /*width: 130px !important;*/ }
.span2 { /*margin-bottom:2px;*/ }
.listhead5 span { /*font-family: 黑体; font-weight: 500 !important;*/ font-size: 0.1rem !important; }
.nav03 { height: calc(100%); } .div1 { display: inline-table; }
#WIPRCV ul li span { font-size: 0.1rem !important; word-break: break-word; } </style>
</head><body> <!-- 头部模块 --> <div class="header"> <div class="title"> <span>纽威系统看板</span> </div> <div class="time"> <span></span> </div> <div class="company"> @*<img src="~/Content/img/Panellogo.png" border="0" class="logoclass" />*@ </div> </div> <div class="header5"> <div class="title">配发料看板</div> </div>
<!-- 主题模块 --> <div class="main"> <div class="div1" id="panel3" style="width: 50%; height: 50%; float: left"></div> <div class="div1" id="panel4" style="width: 50%; height: 50%; float: right"></div> <div class="div1" id="panel5" style="width: 100%; height: 50%;"></div> </div>
<script type="text/javascript" src="~/Content/Cust017/js/jquery.js"></script> <script type="text/javascript" src="~/Content/Cust017/js/echarts.min.js"></script> <script src="~/Content/Cust017/js/jquery.liMarquee.js"></script> <script language="JavaScript" src="~/Content/Cust017/js/js.js"></script> <script type="text/javascript" src="~/Content/Cust017/js/jquery.countup.min.js"></script> <script type="text/javascript" src="~/Content/Cust017/js/jquery.waypoints.min.js"></script>
<script type="text/javascript"> $(function () { changeShow();
$(window).resize(function () { changeShow(); });
//刷新时间 setInterval(function () { changeShow(); }, 30 *60 * 1000); })
function changeShow() { SetPanel3(); SetPanel4(); SetPanel5(); }
function SetPanel3()// 折线图 （配、发料及时率） { //document.getElementById("td3").innerHTML = ' <div id="panel3" style="width: 100%;height:100%;"></div> ';//重置图 var myChart = echarts.init(document.getElementById('panel3'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var Y_ShowWc= []; var X_Show = []; var Y_ShowJs = [];
$.ajax({ url: "/WMS/WatchPanel/GetGridJson_MonthLLPer?" + Math.random(), data: {}, dataType: "json", async: true, success: function (result) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (result && result != null && result.length > 0) { //var GoodRate = '@System.Web.Configuration.WebConfigurationManager.AppSettings["GoodRate"]'; for (var i = 0; i < result.length; i++) { X_Show.push(result[i].NeedDate); Y_ShowWc.push(result[i].WcPer); Y_ShowJs.push(result[i].JsPer); }
myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { show: true, text: '月度每日配发料百分比', textStyle: { color: "#D0FFF6" } //top:'center' }, tooltip: { show: true, trigger: 'axis' },
legend: { textStyle: { color: '#D0FFF6'//字体颜色 }, data: ['配发料完成率','配发料及时率'], icon: "rect", top: 30 }, grid: { show: true, backgroundColor: '#031c7bc2', left: 50, right: 50, top: 60, bottom: 90, borderwidth: 1, //containLabel: true }, xAxis: [ { type: 'category', data: X_Show, axisLabel: { color: '#D0FFF6', interval: 0,//使x轴横坐标全部显示 rotate: 40//X轴横坐标倾斜 } } ], yAxis: [ { type: 'value', //name: '完成率', nameTextStyle: { color: '#D0FFF6' },//坐标轴name颜色 splitLine: { show: false },//不显示网格线 axisLabel: { formatter: '{value} %',//字体显示形式 color: '#D0FFF6'// 字体颜色 } }, { type: 'value', //name: '及格率', nameTextStyle: { color: '#D0FFF6' },//坐标轴name颜色 splitLine: { show: false },//不显示网格线 axisLabel: { formatter: '{value} %',//字体显示形式 color: '#D0FFF6'// 字体颜色 } } ], series: [ { name: '配发料完成率', type: 'line', itemStyle: { color: "blue" }, data: Y_ShowWc }, { name: '配发料及时率', type: 'line', itemStyle: { color: "red" }, data: Y_ShowJs } ] }); } else { myChart.hideLoading();//隐藏加载动画 alert("配发料完成率没有抓取到相关数据"); } }, error: function (errorMsg) { alert("配发料完成率请求数据失败!", "error"); myChart.hideLoading(); } }); }
function SetPanel4()// 柱状图 （库存物料账龄分布） { //document.getElementById("td3").innerHTML = ' <div id="panel3" style="width: 100%;height:100%;"></div> ';//重置图 var myChart = echarts.init(document.getElementById('panel4'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var X_Show = []; var Y_Show1 = []; var Y_Show2 = []; var Y_Show3 = []; var Y_Show4 = []; var Y_Show5 = []; var Y_Show6 = [];
$.ajax({ url: "/WMS/WatchPanel/GetGridJson_ItemAgeNew?" + Math.random(), data: {}, dataType: "json", async: true, success: function (result) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (result && result != null && result.length > 0) { for (var i = 0; i < result.length; i++) { X_Show.push(result[i].YearRound); Y_Show1.push(result[i].Qty1); Y_Show2.push(result[i].Qty2); Y_Show3.push(result[i].Qty3); Y_Show4.push(result[i].Qty4); Y_Show5.push(result[i].Qty5); Y_Show6.push(result[i].Qty6); }
var data = new Date(); //获取年 var year = data.getFullYear(); //获取月 var mon = data.getMonth() + 1; var arry = new Array(); arry.push(year + "-" + mon); for (var i = 0; i < 5; i++) { mon = mon - 1; if (mon <= 0) { year = year - 1; mon = mon + 12; } if (mon < 10) { mon = "0" + mon; }
arry.push(year + "-" + mon); }
myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { show: true, text: '库存物料账龄分布', textStyle: { color: "#D0FFF6" } //top:'center' }, tooltip: { show: true, trigger: 'axis' },
legend: { textStyle: { color: '#D0FFF6'//字体颜色 }, data: arry, icon: "rect", top: 30 }, grid: { show: true, backgroundColor: '#031c7bc2', left: 60, right: 50, top: 60, bottom: 90, borderwidth: 1, //containLabel: true }, xAxis: [ { type: 'category', data: X_Show, axisLabel: { color: '#D0FFF6', interval: 0,//使x轴横坐标全部显示 rotate: 40//X轴横坐标倾斜 } } ], yAxis: [ { type: 'value', //name: '完成率', nameTextStyle: { color: '#D0FFF6' },//坐标轴name颜色 splitLine: { show: false },//不显示网格线 axisLabel: { color: '#D0FFF6'// 字体颜色 } } ], series: [ { name: arry[5], type: 'bar', itemStyle: { color: "blue" }, barGap: 0, data: Y_Show1 }, { name: arry[4], type: 'bar', itemStyle: { color: "red" }, barGap: 0, data: Y_Show2 }, { name: arry[3], type: 'bar', itemStyle: { color: "yellow" }, barGap: 0, data: Y_Show3 }, { name: arry[2], type: 'bar', itemStyle: { color: "pink" }, barGap: 0, data: Y_Show4 }, { name: arry[1], type: 'bar', itemStyle: { color: "gray" }, barGap: 0, data: Y_Show5 }, { name: arry[0], type: 'bar', itemStyle: { color: "green" }, barGap:0, data: Y_Show6 } ] }); } else { myChart.hideLoading();//隐藏加载动画 alert("库存物料周转天数没有抓取到相关数据"); } }, error: function (errorMsg) { alert("库存物料周转天数请求数据失败!", "error"); myChart.hideLoading(); } }); }
function SetPanel5()// 折线图 （库存物料周转天数） { var myChart = echarts.init(document.getElementById('panel5'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var Y_Show = []; var X_Show = [];
$.ajax({ url: "/WMS/WatchPanel/GetGridJson_ItemZzDays?" + Math.random(), data: {}, dataType: "json", async: true, success: function (result) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (result && result != null && result.length > 0) { for (var i = 0; i < result.length; i++) { X_Show.push(result[i].Week); Y_Show.push(result[i].Days); }
myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { show: true, text: '库存物料周转天数', textStyle: { color: "#D0FFF6" } //top:'center' }, tooltip: { show: true, trigger: 'axis' }, //toolbox: { // feature: { // dataView: { show: true, readOnly: false }, // magicType: { show: true, type: ['line', 'bar'] }, // restore: { show: true }, // saveAsImage: { show: true } // } //},
legend: { textStyle: { color: '#D0FFF6'//字体颜色 }, data: ['库存物料周转天数'], icon: "rect", top: 30 }, grid: { show: true, backgroundColor: '#031c7bc2', left: 50, right: 50, top: 60, bottom: 90, borderwidth: 1, //containLabel: true }, xAxis: [ { type: 'category', data: X_Show, axisLabel: { color: '#D0FFF6', interval: 0,//使x轴横坐标全部显示 rotate: 40//X轴横坐标倾斜 } } ], yAxis: [ { type: 'value', //name: '完成率', nameTextStyle: { color: '#D0FFF6' },//坐标轴name颜色 splitLine: { show: false },//不显示网格线 axisLabel: { //formatter: '{value} %',//字体显示形式 color: '#D0FFF6'// 字体颜色 } } ], series: [ { name: '库存物料周转天数', type: 'line', itemStyle: { color: "blue" }, data: Y_Show } ] }); } else { myChart.hideLoading();//隐藏加载动画 alert("库存物料周转天数没有抓取到相关数据"); } }, error: function (errorMsg) { alert("库存物料周转天数请求数据失败!", "error"); myChart.hideLoading(); } }); }
</script>
</body>
</html>
|
