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.
614 lines
20 KiB
614 lines
20 KiB
@{
|
|
ViewBag.Title = "Form";
|
|
Layout = "~/Views/Shared/_Form.cshtml";
|
|
}
|
|
<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>
|
|
<style>
|
|
.ui-jqgrid tr.jqgrow td {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.btn-primary {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
.topRow {
|
|
height: 54px;
|
|
width:100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
FONT-SIZE: 18px;
|
|
}
|
|
|
|
.TopName {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.time {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
td {
|
|
padding-bottom:5px;
|
|
padding-left:2px;
|
|
padding-right:2px;
|
|
}
|
|
.formdiv {
|
|
height: calc(100% - 54px) !important;
|
|
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.thclass {
|
|
width: 100px;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
|
|
table {
|
|
height: 100%;
|
|
}
|
|
|
|
html, body {
|
|
height: 100% !important;
|
|
}
|
|
|
|
form {
|
|
height: 98% !important;
|
|
background-color: #d9d9d9;
|
|
}
|
|
.echartDiv {
|
|
height:100%;
|
|
width:100%;
|
|
}
|
|
/*.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
|
|
height: 24px !important;
|
|
}*/
|
|
</style>
|
|
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
|
|
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
|
|
<script src="~/Content/js/datepicker/WdatePicker.js"></script>
|
|
<link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" />
|
|
<script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>
|
|
|
|
<script>
|
|
|
|
var timer;//刷新数据时间
|
|
|
|
$(function () {
|
|
|
|
//显示时间
|
|
getTime();
|
|
|
|
gridList();
|
|
|
|
|
|
//刷新数据
|
|
timer = setInterval(function () {
|
|
gridList();
|
|
}, 30 * 1000);
|
|
|
|
|
|
});
|
|
|
|
|
|
function gridList() {
|
|
SetPanel1();
|
|
SetPanel2();
|
|
SetPanel3();
|
|
SetPanel4();
|
|
}
|
|
|
|
|
|
function getTime() {
|
|
var days = new Array("日", "一", "二", "三", "四", "五", "六");
|
|
var currentDT = new Date();
|
|
var y, m, date, day, hs, ms, ss, theDateStr;
|
|
y = currentDT.getFullYear(); //四位整数表示的年份
|
|
m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
|
|
date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
|
|
day = currentDT.getDay(); //星期
|
|
hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
|
|
ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
|
|
ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
|
|
theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
|
|
//填充到组件中
|
|
$("#timeStr").text(theDateStr);
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(getTime, 1000);
|
|
}
|
|
|
|
//收货进度
|
|
function SetPanel1()
|
|
{
|
|
var myChart = echarts.init(document.getElementById('panel1'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#4F81BD', '#fa9258', '#9d9b9b', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var X_Show = new Array();// ['已检待入','优先待检', '待检'];
|
|
var DataList = new Array();//[260, 36,152];
|
|
var DataPercent = new Array();//['58%', '8%', '34%'];
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetRCVJingDu?" + Math.random(),
|
|
data: { XX: "" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
for (var i = 0; i < result.length; i++) {
|
|
//QTY CKTYPE Qtypercent
|
|
X_Show.push(result[i].CKTYPE);
|
|
DataList.push(result[i].QTY);
|
|
DataPercent.push(result[i].Qtypercent);
|
|
|
|
}
|
|
|
|
myChart.setOption({ //加载数据图表
|
|
color: colors,
|
|
title: {
|
|
show: true,
|
|
text: '收货进度',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "black"
|
|
},
|
|
},
|
|
backgroundColor: '#1abc9c',
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b},{c}' + '<br>' + '{d}%'
|
|
},
|
|
legend: {
|
|
|
|
left: 'right',
|
|
orient: "vertical"
|
|
},
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
radius: DataPercent,
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{b},{c},{d}%'
|
|
},
|
|
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: DataList[0], name: X_Show[0] },
|
|
{ value: DataList[1], name: X_Show[1] },
|
|
{ value: DataList[2], name: X_Show[2] },
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("收货进度没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("收货进度图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//配料进度
|
|
function SetPanel2() {
|
|
var myChart = echarts.init(document.getElementById('panel2'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#ffff00', '#4F81BD', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var X_Show = new Array();// ['待配料', '已配料'];
|
|
var DataList = new Array();//[200, 372];
|
|
var DataPercent = new Array();// ['35%', '65%'];
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetPeiLiaoJingDu?" + Math.random(),
|
|
data: { XX: "" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
for (var i = 0; i < result.length; i++) {
|
|
//QTY CKTYPE Qtypercent
|
|
X_Show.push(result[i].CKTYPE);
|
|
DataList.push(result[i].QTY);
|
|
DataPercent.push(result[i].Qtypercent);
|
|
|
|
}
|
|
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '配料进度',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "black"
|
|
},
|
|
},
|
|
color: colors,
|
|
backgroundColor: '#1abc9c',
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b},{c}' + '<br>' + '{d}%'
|
|
},
|
|
legend: {
|
|
|
|
left: 'right',
|
|
orient: "vertical"
|
|
},
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
radius: DataPercent,
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{b},{c},{d}%'
|
|
},
|
|
//emphasis: {
|
|
// label: {
|
|
// show: true,
|
|
// fontSize: '40',
|
|
// fontWeight: 'bold'
|
|
// }
|
|
//},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: DataList[0], name: X_Show[0] },
|
|
{ value: DataList[1], name: X_Show[1] },
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("配料没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("配料图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//到货数量(item)
|
|
function SetPanel3() {
|
|
var myChart = echarts.init(document.getElementById('panel3'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var QtyList = new Array();// [22, 36, 42, 52, 44, 3, 2,34,2,34,45,23,45,45,12,28,39,90,40,44,45];
|
|
var MonthList = new Array();
|
|
//for (var i = 29; i > 0 ; i--) {
|
|
// let nowDate = new Date();
|
|
// nowDate = nowDate.setDate(nowDate.getDate() - i);
|
|
// var dd = new Date(parseInt(nowDate));
|
|
// var DStr = (dd.getMonth() + 1).toString() + '/' + dd.getDate().toString();
|
|
|
|
// MonthList.push(DStr);
|
|
//}
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetRCVQty?" + Math.random(),
|
|
data: { XX: "" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
for (var i = 0; i < result.length; i++) {
|
|
|
|
QtyList.push(result[i].QTY);
|
|
MonthList.push(result[i].日期);
|
|
|
|
}
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
text: '到货数量(item)',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "white"
|
|
},
|
|
},
|
|
color: colors,
|
|
legend: {
|
|
show: false,
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + ":" + params[0].data;
|
|
return showHtm;
|
|
}
|
|
},
|
|
backgroundColor: 'black',
|
|
|
|
grid: {
|
|
show: false,
|
|
left: 30,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
},
|
|
xAxis: {
|
|
|
|
data: MonthList, type: 'category',
|
|
axisPointer: { type: 'shadow' },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "white"
|
|
},
|
|
}
|
|
},
|
|
yAxis: [{
|
|
|
|
type: 'value', position: 'left',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "white"
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [{
|
|
name: '数量',
|
|
type: 'line',
|
|
data: QtyList,
|
|
barMaxWidth: 10,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: 'white',
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("到货数量没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("到货数量图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//入库数量(item)
|
|
function SetPanel4() {
|
|
var myChart = echarts.init(document.getElementById('panel4'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var QtyList = new Array();// [22, 36, 42, 52, 44, 3, 2, 34, 2, 34, 45, 23, 45, 45, 12, 28, 39, 90, 40, 44, 45];
|
|
var MonthList = new Array();
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWareInQty?" + Math.random(),
|
|
data: { XX: "" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
for (var i = 0; i < result.length; i++) {
|
|
|
|
QtyList.push(result[i].QTY);
|
|
MonthList.push(result[i].日期);
|
|
|
|
}
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
text: '入库数量(item)',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "white"
|
|
},
|
|
},
|
|
color: colors,
|
|
legend: {
|
|
show: false,
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + ":" + params[0].data;
|
|
return showHtm;
|
|
}
|
|
},
|
|
backgroundColor: 'black',
|
|
|
|
grid: {
|
|
show: false,
|
|
left: 30,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
},
|
|
xAxis: {
|
|
|
|
data: MonthList, type: 'category',
|
|
axisPointer: { type: 'shadow' },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "white"
|
|
},
|
|
}
|
|
},
|
|
yAxis: [{
|
|
|
|
type: 'value', position: 'left',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "white"
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [{
|
|
name: '数量',
|
|
type: 'line',
|
|
data: QtyList,
|
|
barMaxWidth: 10,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: 'white',
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("入库数量没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("入库数量图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<form id="form1">
|
|
<div class="topRow">
|
|
|
|
<table class="form" >
|
|
<tr >
|
|
<td style="width:25%">
|
|
<div></div>
|
|
</td>
|
|
<td colspan="2" style="width:50%">
|
|
<div class="TopName" id="TopName">仓储管理看板</div>
|
|
</td>
|
|
<td style="width:25%">
|
|
<div class="time" id="timeStr"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="formdiv">
|
|
<table class="form">
|
|
<tr style="width:100%;height:50%;">
|
|
<td colspan="2">
|
|
<div id="panel1" class="echartDiv"></div>
|
|
</td>
|
|
<td colspan="2">
|
|
<div id="panel2" class="echartDiv"></div>
|
|
</td>
|
|
</tr>
|
|
<tr style="width:100%;height:50%;">
|
|
<td colspan="2">
|
|
<div id="panel3" class="echartDiv"></div>
|
|
</td>
|
|
<td colspan="2">
|
|
<div id="panel4" class="echartDiv"></div>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</form>
|