|
|
<!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%); }
#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 id="panel3" style="width: 50%;height:100%;float:left"></div> <div id="panel4" style="width: 50%; height: 100%; float: right"></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(); }
function SetPanel3()// 柱状图 （月度每日下单行数与每日完成出库行数） { //document.getElementById("main").innerHTML = ' <div id="panel3" style="width: 50%;height:100%;float:left"></div> ';//重置图 var myChart = echarts.init(document.getElementById('panel3'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var Y_Show = []; var X_Show = []; var Y_Show_Com = [];
$.ajax({ url: "/WMS/WatchPanel/GetGridJson_MonthDaliyComplete?" + 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].MTIME); Y_Show.push(result[i].FLQty); Y_Show_Com.push(result[i].RkQty); }
myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { show: true, text: '月度每日下单行数与每日完成出库行数', textStyle: { color: "#D0FFF6" } //top:'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' // 'shadow' as default; can also be 'line' or 'shadow' } }, //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: { color: '#D0FFF6' } // 字体颜色 }, { type: 'value', //name: '完成行数', nameTextStyle: { color: '#D0FFF6' },//坐标轴name颜色 splitLine: { show: false },//不显示网格线 axisLabel: { //formatter: '{value} %',//字体显示形式 color: '#D0FFF6'// 字体颜色 } } ], series: [
{ name: '创建行数', type: 'bar', itemStyle: { color: "blue" }, barGap: 0, data: Y_Show }, { name: '完成行数', type: 'bar', itemStyle: { color: "#0ced32" }, barGap: 0, data: Y_Show_Com } //}, //{ // name: '完工比例', // type: 'line', // itemStyle: { // color: "#9f8c06" // }, // yAxisIndex: 1, // tooltip: { // valueFormatter: function (value) { // return value + '%'; // } // }, // data: Y_Show_PER //} ] }); } else { myChart.hideLoading();//隐藏加载动画 alert("月度每日下单行数与每日完成出库行数没有抓取到相关数据"); } }, error: function (errorMsg) { alert("月度每日下单行数与每日完成出库行数请求数据失败!", "error"); myChart.hideLoading(); } }); }
function SetPanel4()//柱状图 （每日合格数行数与每日完成入库行数） { //document.getElementById("main").innerHTML = ' <div id="panel4" style="width: 50%; height: 100%; float: right"></div> ';//重置图 var myChart = echarts.init(document.getElementById('panel4'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var Y_Show = []; var X_Show = []; var Y_Show_Com = [];
$.ajax({ url: "/WMS/WatchPanel/GetGridJson_MonthDaliyRcv?" + 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].MTIME); Y_Show.push(result[i].FLQty); Y_Show_Com.push(result[i].RkQty); }
myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { show: true, text: '月度下每日合格数行数与每日完成入库行数', textStyle: { color: "#D0FFF6" } //top:'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' // 'shadow' as default; can also be 'line' or 'shadow' } }, //toolbox: { // feature: { // dataView: { show: true, readOnly: false }, // magicType: { show: true, type: ['line', 'bar'] }, // restore: { show: true }, // saveAsImage: { show: true } // } //},
//backgroundColor: '#031c7bc2',
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: { color: '#D0FFF6' } // 字体颜色 } ], series: [
{ name: '合格行数', type: 'bar', itemStyle: { color: "blue" }, barGap: 0, data: Y_Show }, { name: '入库行数', type: 'bar', itemStyle: { color: "#0ced32" }, barGap: 0, data: Y_Show_Com } //}, //{ // name: '完工比例', // type: 'line', // itemStyle: { // color: "#9f8c06" // }, // yAxisIndex: 1, // tooltip: { // valueFormatter: function (value) { // return value + '%'; // } // }, // data: Y_Show_PER //} ] }); } else { myChart.hideLoading();//隐藏加载动画 alert("月度下每日合格数行数与每日完成入库行数没有抓取到相关数据"); } }, error: function (errorMsg) { alert("月度下每日合格数行数与每日完成入库行数请求数据失败!", "error"); myChart.hideLoading(); } }); } </script>
</body>
</html>
|
