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.
1215 lines
45 KiB
1215 lines
45 KiB
@{
|
|
ViewBag.Title = "Form";
|
|
Layout = "~/Views/Shared/_Form.cshtml";
|
|
}
|
|
<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>
|
|
|
|
<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>
|
|
<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%;
|
|
}
|
|
|
|
|
|
.form {
|
|
|
|
background-color:black;
|
|
}
|
|
html ,body {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
|
|
height:20px !important;
|
|
}
|
|
.gridPanel {
|
|
/*padding-left:2px;
|
|
padding-right:2px;
|
|
padding-bottom:4px;*/
|
|
}
|
|
/*表标题颜色*/
|
|
/*.table > thead:first-child > tr:first-child > th {
|
|
background-color: #229594 ;
|
|
color:white;
|
|
}*/
|
|
/*表标题位置*/
|
|
/*.ui-jqgrid .ui-jqgrid-caption {
|
|
text-align:center;
|
|
}*/
|
|
.ui-jqgrid .ui-jqgrid-title {
|
|
font-size:20px;
|
|
}
|
|
.echartDiv {
|
|
height:100%;
|
|
width:100%;
|
|
/*padding-top:10px;*/
|
|
/*margin-bottom:5px;*/
|
|
}
|
|
|
|
.nav-tabs > li {
|
|
float:right;
|
|
}
|
|
.nav > li > a {
|
|
padding:4px 10px;
|
|
}
|
|
.tab-content {
|
|
height: calc( 100% - 20px );
|
|
}
|
|
.tab-pane, .echartDivOut {
|
|
height:100%
|
|
}
|
|
|
|
|
|
body {
|
|
|
|
/*FONT-SIZE: 18px;*/
|
|
background-color:black;
|
|
|
|
--CustTitlecolor: #0bd4d4;/*表标题颜色*/ /*#4D5457 #000000bf*/
|
|
--Custbackgroundcolor: #031c7bc2; /*#031c7b;*/ /*表整体颜色*/
|
|
--CustSelect: #103764; /*选中颜色*//*悬浮颜色*/
|
|
--Custcolor: white;/*字体颜色*/
|
|
--CustBorderColor: #031c7bc2;/*边框颜色*/
|
|
--CustRow1: #0e59a5d4;/*偶行颜色*/
|
|
--CustRow2: #031c7bc2;/*奇行颜色*/
|
|
}
|
|
|
|
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
|
|
background-color:var(--Custbackgroundcolor) ;
|
|
color:white;
|
|
}
|
|
|
|
.nav-tabs > li > a {
|
|
color:white;
|
|
}
|
|
/*大标题*/
|
|
.TopName {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
/*color:var(--CustTitlecolor);*/
|
|
color:white;
|
|
}
|
|
/*logo标题*/
|
|
.TopNamelogo{
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color:white;
|
|
}
|
|
.logoclass {
|
|
height:24px;
|
|
}
|
|
#logolabel {
|
|
/*width:80%;*/
|
|
}
|
|
.time {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
/*color:var(--CustTitlecolor);*/
|
|
color:white;
|
|
}
|
|
td {
|
|
/*padding-bottom:1px;
|
|
padding-left:1px;
|
|
padding-right:1px;*/
|
|
}
|
|
.ui-jqgrid .ui-jqgrid-titlebar,unwritten, .ui-jqgrid .table-bordered,.ui-jqgrid .ui-jqgrid-hdiv{
|
|
border:none !important;
|
|
}
|
|
.formdiv {
|
|
height: 100% !important;
|
|
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.thclass {
|
|
width: 100px;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
|
|
table {
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
form {
|
|
height: 100% !important;
|
|
background-color: black;
|
|
}
|
|
.echartDiv {
|
|
height:100%;
|
|
width:100%;
|
|
}
|
|
/*表标题颜色*/
|
|
.ui-jqgrid .ui-jqgrid-title {
|
|
color:var(--CustTitlecolor);
|
|
}
|
|
|
|
/*表列表头颜色*/
|
|
.table > thead:first-child > tr:first-child > th {
|
|
background-color: var(--Custbackgroundcolor) ;
|
|
color:var(--CustTitlecolor);
|
|
}
|
|
/*表整体颜色*/
|
|
.ui-jqgrid {
|
|
background-color: var(--Custbackgroundcolor);
|
|
color:var(--Custcolor);
|
|
/*border: 1px solid var(--CustBorderColor);*/
|
|
border:none;
|
|
|
|
}
|
|
.ui-jqgrid .table-bordered td {
|
|
/*border: 0.5px solid var(--CustBorderColor);*/
|
|
border:none;
|
|
border-left:none;
|
|
border-right:none;
|
|
|
|
}
|
|
|
|
/*悬浮颜色*/
|
|
.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,
|
|
.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,
|
|
.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,
|
|
.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active
|
|
{
|
|
background-color:var(--CustSelect) ;
|
|
color:var(--Custcolor);
|
|
}
|
|
|
|
/*选中颜色*/
|
|
.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,
|
|
.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,
|
|
.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,
|
|
.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success
|
|
{
|
|
background-color:var(--CustSelect) ;
|
|
color:var(--Custcolor);
|
|
}
|
|
/*偶行颜色*/
|
|
div>div>div>table>tbody>tr:nth-child(2n) {
|
|
background-color: var(--CustRow1);
|
|
color:white;
|
|
border:none;
|
|
}
|
|
/*奇行颜色*/
|
|
div>div>div>table>tbody>tr:nth-child(2n+1) {
|
|
background-color:var(--CustRow2);
|
|
color:white;
|
|
border:none;
|
|
}
|
|
|
|
form > div > table > tbody > tr>td {
|
|
|
|
padding-bottom:5px;
|
|
padding-top:5px;
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color:var(--CustTitlecolor);
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
|
var HeightToDel = 64;
|
|
var TBBackColor = "#031c7bc2";
|
|
var TBTitleFontColor = "#0bd4d4";
|
|
var timer;
|
|
var timer2;
|
|
var GunDongRate = 2*1000;//单位毫秒 //表格滚动间隔时间
|
|
var GunDongRow = 0;
|
|
var DataF = 300;//单位秒 //刷新数据时间
|
|
// var CurrentscrollTop = 0;
|
|
var IsFirstShow = false;
|
|
var currentDaoHuoQty_type = "日";
|
|
var currentRuKuQty_type = "日";
|
|
var currentPLXX_type = "未完成";
|
|
|
|
//var TopdivMO = 129;
|
|
|
|
$(function () {
|
|
//显示时间
|
|
getTime();
|
|
changeShow();
|
|
|
|
|
|
$(window).resize(function () {
|
|
|
|
//$("#gridList1").setGridWidth($("#gridPanel1").width() );
|
|
//$("#gridList1").setGridHeight($(window).height() * 0.31 - HeightToDel);
|
|
|
|
//$("#gridList2").setGridWidth($("#gridPanel1").width() );
|
|
//$("#gridList2").setGridHeight($(window).height() * 0.31 - HeightToDel);
|
|
|
|
//$("#gridList3").setGridWidth($("#gridPanel3").width() );
|
|
//$("#gridList3").setGridHeight($(window).height() * 0.29 - HeightToDel);
|
|
|
|
//$("#gridList4").setGridWidth($("#gridPanel4").width() );
|
|
//$("#gridList4").setGridHeight($(window).height() * 0.29 - HeightToDel);
|
|
changeShow();
|
|
GunDongRow = 0;
|
|
|
|
});
|
|
|
|
scrollBody("gridList1");
|
|
scrollBody("gridList2");
|
|
scrollBody("gridList3");
|
|
scrollBody("gridList4");
|
|
//$('#myTab li:eq(0) a').tab('show');
|
|
|
|
|
|
// $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
$('.Tab1Class').on('shown.bs.tab', function (e) {
|
|
|
|
// 获取已激活的标签页的名称
|
|
var activeTab = $(e.target).text();
|
|
// 获取前一个激活的标签页的名称
|
|
var previousTab = $(e.relatedTarget).text();
|
|
// $(".active-tab span").html(activeTab);
|
|
// $(".previous-tab span").html(previousTab);
|
|
currentDaoHuoQty_type = activeTab;
|
|
SetPanel3();
|
|
});
|
|
|
|
$('.Tab2Class').on('shown.bs.tab', function (e) {
|
|
|
|
var activeTab = $(e.target).text();
|
|
var previousTab = $(e.relatedTarget).text();
|
|
currentRuKuQty_type = activeTab;
|
|
SetPanel4();
|
|
});
|
|
|
|
$('.Tab3Class').on('shown.bs.tab', function (e) {
|
|
|
|
var activeTab = $(e.target).text();
|
|
var previousTab = $(e.relatedTarget).text();
|
|
currentPLXX_type = activeTab;
|
|
gridList3();
|
|
});
|
|
|
|
|
|
//刷新数据
|
|
timer2 = setInterval(function () {
|
|
changeShow();
|
|
}, DataF * 1000);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//自动滚动
|
|
function scrollBody(gridList) {
|
|
|
|
|
|
timer = setInterval(function () {
|
|
var ob3 = $('#' + gridList).getGridParam("records");
|
|
var div = $('#' + gridList).closest('.ui-jqgrid-bdiv')[0];
|
|
var offsetHeight = div.offsetHeight;
|
|
var scrollHeight = div.scrollHeight - offsetHeight;
|
|
if (GunDongRow == 0) {
|
|
var hh = offsetHeight;
|
|
//GunDongRow = Math.floor(hh / 30.3);
|
|
GunDongRow =1;
|
|
}
|
|
|
|
// div.scrollTop = div.scrollTop + 1;
|
|
if (div.scrollTop >= scrollHeight) {//循环滚动
|
|
scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight
|
|
if (div.scrollTop >= scrollHeight) {
|
|
div.scrollTop = 0; //循环滚动，重置滚动头即可
|
|
IsFirstShow = true;
|
|
}
|
|
if (div.scrollTop >= ob3 * 30.4) {
|
|
div.scrollTop = 0; //循环滚动，重置滚动头即可
|
|
IsFirstShow = true;
|
|
}
|
|
}
|
|
if (!IsFirstShow) {
|
|
div.scrollTop = div.scrollTop + (GunDongRow * 30.3);
|
|
}
|
|
else { IsFirstShow = false; }
|
|
|
|
}, GunDongRate);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//end 自动滚动
|
|
|
|
function GetAllCols1() {
|
|
var _cols = new Array();
|
|
//_cols.push({ label: '序号', name: '序号', width: 90, align: 'left', });
|
|
_cols.push({ label: '到货单号', name: '到货单号', width: 100, align: 'left', });
|
|
_cols.push({ label: '订单号', name: '订单号', width: 120, align: 'left', });
|
|
_cols.push({ label: '料号', name: '料号', width: 70, align: 'left', });
|
|
_cols.push({ label: '物料名称', name: '物料名称', width: 160, align: 'left', });
|
|
_cols.push({ label: '收货数量', name: '收货数量', width: 50, align: 'left', });
|
|
_cols.push({ label: '已检数量', name: '已检数量', width: 50, align: 'left', });
|
|
_cols.push({ label: '待检数量', name: '待检数量', width: 50, align: 'left', });
|
|
_cols.push({ label: '已检待入', name: '已检待入', width: 50, align: 'left', });
|
|
//_cols.push({ label: '已入库数量', name: '已入库数量', width: 75, align: 'left', });//hidden: true,
|
|
_cols.push({ label: '状态', name: '状态', width: 40, align: 'left', });
|
|
|
|
return _cols;
|
|
}
|
|
function GetAllCols2() {
|
|
var _cols = new Array();
|
|
//到货单 料号 条码 物料名称 采购订单号 型号 不合格数量 不良原因
|
|
|
|
|
|
_cols.push({ label: '到货单', name: '到货单', width: 90, align: 'left', });
|
|
_cols.push({ label: '料号', name: '料号', width: 70, align: 'left', });
|
|
//_cols.push({ label: '条码', name: '条码', width: 80, align: 'left', });
|
|
_cols.push({ label: '物料名称', name: '物料名称', width: 190, align: 'left', });
|
|
_cols.push({ label: '采购订单号', name: '采购订单号', width: 115, align: 'left', });
|
|
//_cols.push({ label: '型号', name: '型号', width: 60, align: 'left', });
|
|
_cols.push({ label: '不合格数量', name: '不合格数量', width: 70, align: 'left', });
|
|
_cols.push({ label: '不良原因', name: '不良原因', width: 70, align: 'left', });//hidden: true,
|
|
|
|
return _cols;
|
|
}
|
|
|
|
function GetAllCols3() {
|
|
var _cols = new Array();
|
|
//出库单号 产品编号 业务类型 需求部门 所属仓库 生产工单号 项目号 制单人
|
|
//制单日期 审核人 完成日期 状态
|
|
|
|
_cols.push({ label: '出库单号', name: '出库单号', width: 110, align: 'left', });
|
|
//_cols.push({ label: '产品编号', name: '产品编号', width: 80, align: 'left', });
|
|
//_cols.push({ label: '业务类型', name: '业务类型', width: 80, align: 'left', });
|
|
_cols.push({ label: '需求部门', name: '需求部门', width: 65, align: 'left', });
|
|
//_cols.push({ label: '所属仓库', name: '所属仓库', width: 80, align: 'left', });
|
|
_cols.push({ label: '生产工单号', name: '生产工单号', width: 105, align: 'left', });
|
|
//_cols.push({ label: '项目号', name: '项目号', width: 65, align: 'left', });
|
|
_cols.push({ label: '制单人', name: '制单人', width: 60, align: 'left', });
|
|
_cols.push({ label: '制单日期', name: '制单日期', width: 120, align: 'left', });//hidden: true,
|
|
//_cols.push({ label: '审核人', name: '审核人', width: 65, align: 'left', });
|
|
_cols.push({ label: '完成日期', name: '完成日期', width: 120, align: 'left', });
|
|
_cols.push({ label: '状态', name: '状态', width: 50, align: 'left', });
|
|
|
|
|
|
return _cols;
|
|
}
|
|
|
|
function GetAllCols4() {
|
|
var _cols = new Array();
|
|
//到货单 料号 条码 物料名称 采购订单号 型号 入库数量 库位
|
|
_cols.push({ label: '到货单', name: '到货单', width: 100, align: 'left', });
|
|
_cols.push({ label: '料号', name: '料号', width: 80, align: 'left', });
|
|
_cols.push({ label: '物料名称', name: '物料名称', width: 200, align: 'left', });
|
|
_cols.push({ label: '采购订单号', name: '采购订单号', width: 115, align: 'left', });
|
|
//_cols.push({ label: '型号', name: '型号', width: 70, align: 'left', });
|
|
_cols.push({ label: '待入库数量', name: '待入库数量', width: 70, align: 'left', });
|
|
_cols.push({ label: '库位', name: '库位', width: 50, align: 'left', });
|
|
_cols.push({ label: '条码', name: '条码', width: 90, align: 'left', });//hidden: true,
|
|
|
|
|
|
return _cols;
|
|
}
|
|
|
|
|
|
|
|
function gridList1() {
|
|
document.getElementById("gridPanel1").innerHTML = ' <table id="gridList1"></table> ';//重置grid
|
|
var _cols = GetAllCols1();
|
|
var $gridList = $("#gridList1" );
|
|
|
|
var queryJson = {
|
|
}
|
|
$gridList.dataGrid({
|
|
url: "/SRM/WatchPanel/GetGridJson1?" + Math.random(),
|
|
postData: { queryJson: JSON.stringify(queryJson) },
|
|
height: $(".formdiv").height() * 0.31 ,//($("#form1").height()-10)*0.31,//$(".formdiv").height() * 0.31-HeightToDel-6,
|
|
colModel: _cols,
|
|
caption: '到货明细',
|
|
sortname: " 到货单号,状态, 订单号, 料号 ",
|
|
rowNum: 5000,
|
|
viewrecords: true,
|
|
rownumbers: true,
|
|
multiselect: false,
|
|
gridComplete: function () {
|
|
$("#gridList1" ).jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
|
|
}
|
|
});
|
|
}
|
|
|
|
function gridList2() {
|
|
document.getElementById("gridPanel2").innerHTML = ' <table id="gridList2"></table> ';//重置grid
|
|
var _cols = GetAllCols2();
|
|
var $gridList = $("#gridList2");
|
|
|
|
var queryJson = {
|
|
}
|
|
$gridList.dataGrid({
|
|
url: "/SRM/WatchPanel/GetGridJson2?" + Math.random(),
|
|
postData: { queryJson: JSON.stringify(queryJson) },
|
|
height: $(".formdiv").height() * 0.31 - HeightToDel,
|
|
colModel: _cols,
|
|
caption:"来料不合格明细",
|
|
sortname: " 到货单, 采购订单号, 料号 ",
|
|
rowNum: 5000,
|
|
viewrecords: true,
|
|
rownumbers: true,
|
|
multiselect: false,
|
|
gridComplete: function () {
|
|
$("#gridList2").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
|
|
}
|
|
});
|
|
}
|
|
|
|
function gridList3() {
|
|
document.getElementById("gridPanel3").innerHTML = ' <table id="gridList3"></table> ';//重置grid
|
|
var _cols = GetAllCols3();
|
|
var $gridList = $("#gridList3");
|
|
|
|
var queryJson = {
|
|
"type": currentPLXX_type,
|
|
}
|
|
$gridList.dataGrid({
|
|
url: "/SRM/WatchPanel/GetGridJson3?" + Math.random(),
|
|
postData: { queryJson: JSON.stringify(queryJson) },
|
|
height: $(window).height() * 0.29 - HeightToDel - 24,
|
|
colModel: _cols,
|
|
caption:"配料信息表",
|
|
sortname: " 状态,制单日期,出库单号 ",
|
|
rowNum: 5000,
|
|
viewrecords: true,
|
|
rownumbers: true,
|
|
multiselect: false,
|
|
gridComplete: function () {
|
|
$("#gridList3").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
|
|
}
|
|
});
|
|
}
|
|
|
|
function gridList4() {
|
|
document.getElementById("gridPanel4").innerHTML = ' <table id="gridList4"></table> ';//重置grid
|
|
var _cols = GetAllCols4();
|
|
var $gridList = $("#gridList4");
|
|
|
|
var queryJson = {
|
|
}
|
|
$gridList.dataGrid({
|
|
url: "/SRM/WatchPanel/GetGridJson4?" + Math.random(),
|
|
postData: { queryJson: JSON.stringify(queryJson) },
|
|
height: $(window).height() * 0.29 - HeightToDel,
|
|
colModel: _cols,
|
|
caption:"待入库明细",
|
|
sortname: " 到货单, 采购订单号, 料号 ",
|
|
rowNum: 5000,
|
|
viewrecords: true,
|
|
rownumbers: true,
|
|
multiselect: false,
|
|
gridComplete: function () {
|
|
$("#gridList4").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function changeShow()
|
|
{
|
|
|
|
SetPanel1();
|
|
SetPanel2();
|
|
SetPanel3();
|
|
SetPanel4();
|
|
gridList1();
|
|
gridList2();
|
|
gridList3();
|
|
gridList4();
|
|
|
|
var ee = $(".formdiv").height() * 0.31;
|
|
var tt = $(".ui-jqgrid-titlebar")[0].clientHeight;
|
|
var ff = $(".ui-jqgrid-hdiv")[0].clientHeight;
|
|
$("#gridList1").setGridHeight(ee - tt - ff-20);
|
|
$("#gridList2").setGridHeight(ee - tt - ff - 20);
|
|
$("#gridList3").setGridHeight(ee - tt - ff - 20 - 24);
|
|
$("#gridList4").setGridHeight(ee - tt - ff - 20);
|
|
}
|
|
|
|
|
|
//收货进度
|
|
function SetPanel1() {
|
|
document.getElementById("TB1").innerHTML = ' <div id="panel1" class="echartDiv"></div> ';//重置图
|
|
var myChart = echarts.init(document.getElementById('panel1'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
var colors = ['#91cc75', '#fac858', '#5470c6', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
|
|
|
|
//['#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);
|
|
|
|
}
|
|
}
|
|
else {
|
|
|
|
// alert("收货进度没有抓取到相关数据");
|
|
X_Show = ['已检待入', '优先待检', '待检'];
|
|
DataList = [0, 0, 0];
|
|
}
|
|
|
|
|
|
myChart.setOption({ //加载数据图表
|
|
color: colors,
|
|
title: {
|
|
show: true,
|
|
text: '收货进度（wk）',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b},{c}' + '<br>' + '{d}%'
|
|
},
|
|
legend: {
|
|
textStyle: { color: colors, },
|
|
left: 'right',
|
|
orient: "vertical"
|
|
},
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
// radius: DataPercent,
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: ' {d}%'
|
|
},
|
|
radius: ['40%', '70%'],
|
|
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: TBBackColor,
|
|
borderWidth: 2
|
|
},
|
|
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(); //隐藏加载动画
|
|
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("收货进度图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//配料进度
|
|
function SetPanel2() {
|
|
document.getElementById("TB2").innerHTML = ' <div id="panel2" class="echartDiv"></div> ';//重置图
|
|
var myChart = echarts.init(document.getElementById('panel2'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#fac858', '#91cc75', '#5470c6', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
|
|
// 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);
|
|
|
|
}
|
|
|
|
//测试！！！！！
|
|
//}
|
|
//else
|
|
//{
|
|
// X_Show = ['待配料', '已配料'];
|
|
// DataList = [200, 372];
|
|
// DataPercent = ['35%', '65%'];
|
|
//}
|
|
//X_Show = ['待配料', '已配料'];
|
|
//DataList = [200, 372];
|
|
//DataPercent = ['35%', '65%'];
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '配料进度（mth)',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
color: colors,
|
|
backgroundColor: TBBackColor,
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b},{c}' + '<br>' + '{d}%'
|
|
},
|
|
legend: {
|
|
textStyle: { color: colors, },
|
|
left: 'right',
|
|
orient: "vertical"
|
|
},
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: TBBackColor,
|
|
borderWidth: 2
|
|
},
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: ' {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() {
|
|
document.getElementById("TB3").innerHTML = ' <div id="panel3" class="echartDiv"></div> ';//重置图
|
|
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: { type: currentDaoHuoQty_type },
|
|
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].日期);
|
|
|
|
}
|
|
|
|
//测试！！！！！
|
|
//}
|
|
//else
|
|
//{
|
|
// QtyList = [22, 36, 42, 52, 44, 3, 2,34,2,34,45,23,45,45,12,28,39,90,40,44,45];
|
|
// 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);
|
|
// }
|
|
//}
|
|
// QtyList = [22, 36, 42, 52, 44, 3, 2, 34, 2, 34, 45, 23, 45, 45, 12, 28, 39, 90, 40, 44, 45];
|
|
|
|
// 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);
|
|
//}
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
text: '到货数量(item)',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
color: colors,
|
|
legend: {
|
|
show: false,
|
|
textStyle: {
|
|
color: colors,
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + ":" + params[0].data;
|
|
return showHtm;
|
|
}
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
|
|
grid: {
|
|
show: false,
|
|
left: 70,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
},
|
|
xAxis: {
|
|
axisTick: { show: false, },
|
|
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,
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#fffffff7' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#031c7b06' // 100% 处的颜色
|
|
}],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'top',
|
|
color: 'white',
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
// alert("到货数量没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("到货数量图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//入库数量(item)
|
|
function SetPanel4() {
|
|
document.getElementById("TB4").innerHTML = ' <div id="panel4" class="echartDiv"></div> ';//重置图
|
|
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();
|
|
var QtyYear = "";
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWareInQty?" + Math.random(),
|
|
data: { type: currentRuKuQty_type },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
QtyYear = result[0].QtyYear;
|
|
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: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
color: colors,
|
|
legend: {
|
|
show: false,
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
//legend: {
|
|
// formatter: function (name) {
|
|
// return 'XXXX';
|
|
// },
|
|
|
|
// icon: "none",
|
|
|
|
//},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + ":" + params[0].data;
|
|
return showHtm;
|
|
}
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
|
|
grid: {
|
|
show: false,
|
|
left: 70,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
},
|
|
xAxis: {
|
|
axisTick: { show: false,},
|
|
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,
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#fffffff7' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#031c7b06' // 100% 处的颜色
|
|
}],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'top',
|
|
color: 'white',
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
// alert("入库数量没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("入库数量图表请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<form id="form1">
|
|
<div class="formdiv">
|
|
|
|
<table class="form" id="WTable" style="width:100%;height:100%;">
|
|
<tr style="width:100%;height:10%;background-color:#031c7bc2;padding-bottom:5px">
|
|
<td style="text-align:right;width:14%">
|
|
<label class="radio-inline" id="logolabel">
|
|
<img src="~/Content/img/Panellogo.png" border="0" class="logoclass" />
|
|
</label>
|
|
</td>
|
|
<td style="width:14%">
|
|
<div class="TopNamelogo" id="TopNamelogo">利穗科技</div>
|
|
</td>
|
|
<td colspan="2" style="width:44%">
|
|
<div class="TopName" id="TopName">物料管理看板</div>
|
|
</td>
|
|
<td colspan="2" style="width:28%">
|
|
<div class="time" id="timeStr"></div>
|
|
</td>
|
|
</tr>
|
|
<tr style="width:100%;height:30%;" id="NRow1">
|
|
<td colspan="2" style="padding-top:10px">
|
|
<ul id="myTab" class="nav nav-tabs">
|
|
<li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">年</a></li>
|
|
<li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">月</a></li>
|
|
<li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">周</a></li>
|
|
<li class="active" ><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">日</a> </li>
|
|
</ul>
|
|
<div id="myTabContent" class="tab-content">
|
|
<div class="tab-pane fade active in" id="Tab1_RI">
|
|
<div id="TB3" class="echartDivOut"> <div id="panel3" class="echartDiv"></div> </div>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
<td colspan="2" style="padding-top:10px">
|
|
<div class="gridPanel" id="gridPanel1">
|
|
<table id="gridList1"></table>
|
|
|
|
</div>
|
|
</td>
|
|
<td colspan="2" id="TB1" style="padding-top:10px" >
|
|
<div id="panel1" class="echartDiv"></div>
|
|
</td>
|
|
</tr>
|
|
<tr style="width:100%;height:30%;">
|
|
<td colspan="2" >
|
|
<ul id="myTab2" class="nav nav-tabs">
|
|
<li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">年</a></li>
|
|
<li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">月</a></li>
|
|
<li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">周</a></li>
|
|
<li class="active"><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">日</a> </li>
|
|
</ul>
|
|
<div id="myTabContent2" class="tab-content">
|
|
<div class="tab-pane fade active in" id="Tab2_RI">
|
|
<div id="TB4" class="echartDivOut"> <div id="panel4" class="echartDiv"></div> </div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
<td colspan="2">
|
|
<div class="gridPanel" id="gridPanel2">
|
|
<table id="gridList2"></table>
|
|
</div>
|
|
</td>
|
|
<td colspan="2" id="TB2">
|
|
<div id="panel2" class="echartDiv"></div>
|
|
</td>
|
|
</tr>
|
|
<tr style="width:100%;height:30%;">
|
|
<td colspan="3">
|
|
<div class="gridPanel" id="gridPanel4">
|
|
<table id="gridList4 "></table>
|
|
|
|
</div>
|
|
</td>
|
|
<td colspan="3">
|
|
|
|
<ul id="myTab3" class="nav nav-tabs">
|
|
<li><a href="#Tab3_RI" data-toggle="tab" class="Tab3Class">已完成</a></li>
|
|
<li class="active"><a href="#Tab3_RI" data-toggle="tab" class="Tab3Class">未完成</a> </li>
|
|
</ul>
|
|
<div id="myTabContent3" class="tab-content">
|
|
<div class="tab-pane fade active in" id="Tab3_RI">
|
|
<div class="gridPanel" id="gridPanel3">
|
|
<table id="gridList3"></table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|