|
|
@{ ViewBag.Title = "Form"; Layout = "~/Views/Shared/_Form.cshtml"; } <script src="~/Content/js/echarts/echarts5.3.3.min.js"></script> <script src="~/Content/js/echarts/echarts-gl.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; background-color: #031c7bc2; padding-bottom: 5px; }
body { height: 100%; FONT-SIZE: 15px; /*FONT-SIZE: 18px;*/ background-color: black; --CustTitlecolor: #0bd4d4; /*表标题颜色*/ /*#4D5457 #000000bf*/ --Custbackgroundcolor: #031c7bc2; /*#031c7b;*/ /*表整体颜色*/ --CustSelect: #103764; /*选中颜色*/ /*悬浮颜色*/ --Custcolor: white; /*字体颜色*/ --CustBorderColor: #031c7bc2; /*边框颜色*/ --CustRow1: #0e59a5d4; /*偶行颜色*/ --CustRow2: #031c7bc2; /*奇行颜色*/ }
/*大标题*/ .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: white; }
.formdiv { height: 100% !important; margin-bottom: 2px; margin-top: 5px; 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: black; }
/*.bootstrap-select .dropdown-toggle .filter-option-inner-inner { height: 24px !important; }*/
/*表列表头颜色*/ .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); }
#tdXX1 > div > div > canvas { height: 100% !important; }
#tdXX1 > div > div { height: 100% !important; }
/*.ui-jqgrid .ui-jqgrid-htable thead th { padding:4px 2px 4px 2px; }*/ .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 4px 2px 4px 2px; }
.ui-jqgrid .ui-search-table td.ui-search-clear { display:none; } .ui-search-toolbar,.ui-search-toolbar th,.ui-search-toolbar th div { background-color: transparent !important; } .ui-search-toolbar input { background-color: #0594a566 !important; border:none; color: #e7ebee; /*padding:0;*/ width:99%; }
#ShaiXuan tbody tr td input { background-color: #0594a566 !important; border:none; padding:2px 2px 2px 2px !important; width:92%; color:white; } .bootstrap-select > .dropdown-toggle.bs-placeholder:active { background-color: #0594a566 !important; }
.btn-default { background-color: #0594a566 !important; color:white !important; } #ShaiXuan { /*background-color: var(--Custbackgroundcolor);*/ /*width:100%*/ } #ShaiXuan tbody tr td { padding:0px 2px 0px 2px; }
#Tr_ShaiXuan { background-color: var(--Custbackgroundcolor); }
.ToptdClass { padding:0; } </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 HeightToDel = 140; var timer; var timer2;//刷新数据时间 var TBBackColor = "#031c7bc2"; var TBTitleFontColor = "#0bd4d4"; var GunDongRate = 2 * 1000;//单位毫秒 //表格滚动间隔时间 var DataF = 300;//单位秒 //刷新数据时间 var IsFirstShow = false; var GunDongRow = 1; $(function () {
//显示时间 getTime(); gridList1(); ReSetCSS(); GetALLSelectData(); $(window).resize(function () {
// gridList1(); GunDongRow = 0; }); //scrollBody(); //刷新数据 timer2 = setInterval(function () { gridList1(); }, DataF * 1000);
});
//自动滚动 function scrollBody() { timer = setInterval(function () { scrollBody_act(); }, GunDongRate);
}
function scrollBody_act() { var ob3 = $('#gridList1').getGridParam("records"); var div = $('#gridList1').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; } } //end 自动滚动
function GetAllCols1() { var _cols = new Array(); //项目号 客户名称 设备类型 产品名称 产品型号 序列号 计划开工日期 计划完工日期 数量 设备编号 生产工单号 //项目进度条 项目阶段 状态 生产确认表 电装开始 电装完成 机械装配开始 机械装配完成 总装开始 总装完成 仪表配置开始 //仪表配置完成 调试测试开始 调试测试完成 FAT开始 FAT完成 FQC OQC 产品类型 _cols.push({ label: 'ID', name: 'ID', width: 80, align: 'left', hidden: true, }); _cols.push({ label: '项目号', name: '项目号', width: 100, align: 'left', }); _cols.push({ label: '设备类型', name: '设备类型', width: 100, align: 'left', }); _cols.push({ label: '产品型号', name: '产品型号', width: 230, align: 'left', }); _cols.push({ label: '设备编号', name: '设备编号', width: 170, align: 'left', }); _cols.push({ label: '成品编码', name: '成品编码', width: 110, align: 'left', }); _cols.push({ label: '生产工单号', name: '生产工单号', width: 120, align: 'left', }); _cols.push({ label: 'COLORSTR', name: 'COLORSTR', width: 30, align: 'left', hidden: true, }); _cols.push({ label: '项目阶段', name: '项目阶段', width: 150, align: 'left', cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) { if (rawObject.COLORSTR == "green") { return "style='color:#42f943'"; } } }); _cols.push({ label: '项目进度条', name: '项目进度条', width: 180, align: 'left', formatter: function (cellvalue, options, rowObject) { var str_retrun = '<div id="JDText_' + rowObject.ID + '" style="width: 99%;height:98%;"></div>'; return cellvalue = str_retrun;
} });
_cols.push({ label: '项目进度条值', name: '项目进度条值', width: 50, align: 'left', hidden: true, }); _cols.push({ label: '状态', name: '状态', width: 110, align: 'left', cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) { if (val == "延期") { return "style='color:red'"; } if (val == "紧急") { return "style='color:yellow'"; } if (val == "完成") { return "style='color:#42f943'"; } } }); _cols.push({ label: '计划开工日期', name: '计划开工日期', width: 120, align: 'left', }); _cols.push({ label: '需求完工日期', name: '需求完工日期', width: 150, align: 'left', }); _cols.push({ label: '计划完工日期', name: '计划完工日期', width: 150, align: 'left', }); _cols.push({ label: '', name: '', width: 1, align: 'left' });
return _cols; }
function GetChose(SelectID) { var txtProJieDuan = ""; var Select3 = $("#" + SelectID + " option:selected"); for (i = 0; i < Select3.length; i++) { if (txtProJieDuan == "") { txtProJieDuan += Select3[i].innerText; } else { txtProJieDuan += "," + Select3[i].innerText; }
} return txtProJieDuan }
function gridList1() { document.getElementById("gridPanel1").innerHTML = ' <table id="gridList1"></table> ';//重置grid var _cols = GetAllCols1(); var $gridList = $("#gridList1");
var txtProJieDuan = GetChose("txtProJieDuan"); var txtEQPType = GetChose("txtEQPType"); var txtStatus = GetChose("txtStatus");
var queryJson = { txtProject: $("#txtProject").val(), txtEQPType: txtEQPType, txtItemStd: $("#txtItemStd").val(), txtEQPCode: $("#txtEQPCode").val(), txtPlanStartDay: $("#txtPlanStartDay").val(), txtMOCode: $("#txtMOCode").val(), txtItemCode: $("#txtItemCode").val(),
txtProJieDuan: txtProJieDuan, txtStatus: txtStatus, txtPlanEndDay: $("#txtPlanEndDay").val(), }
$gridList.dataGrid({ url: "/SRM/WatchPanel/GetGridJson_WIPJinDu?" + Math.random(), postData: { queryJson:JSON.stringify(queryJson) }, height: $("#form1").height() - HeightToDel, colModel: _cols, // caption: '生产进度汇总表', // sortname: " ", rowNum: 5000, viewrecords: true, rownumbers: true, multiselect: false, gridComplete: function () { $("#gridList1").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, ''); var strIds = $("#gridList1").jqGrid("getDataIDs");
for (var i = 0; i < strIds.length; i++) { var ID = $("#gridList1").jqGrid("getCell", strIds[i], "ID"); var QTY = $("#gridList1").jqGrid("getCell", strIds[i], "项目进度条值"); //var COLORSTR = $("#gridList1").jqGrid("getCell", strIds[i], "COLORSTR"); var Status = $("#gridList1").jqGrid("getCell", strIds[i], "状态"); JDPictureSet("JDText_" + ID, QTY, Status); }
},
});
//$('#gridList1').jqGrid('filterToolbar', { // //defaultSearch: 'cn', stringResult: true, searchOnEnter: false, searchOperators: true, groupOp:"AND", // searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND" //});
}
function ReSetCSS() { //设置表头筛选内容 var tablewidth = $(".ui-jqgrid-labels").width(); $("#ShaiXuan").css("width", tablewidth); if (tablewidth < 1568) { addNewStyle(' #ShaiXuan tbody tr td:nth-child( 1 ) { width: 1.786%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 2 ) { width: 6.378%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 3 ) { width: 6.378%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 4 ) { width: 14.6682%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 5 ) { width: 10.842%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 6 ) { width: 7.015%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 7 ) { width: 7.653%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 8 ) { width: 9.566%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 9 ) { width: 11.480%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 10 ) { width: 7.015%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 11 ) { width: 7.653%; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 12 ) { width: 9.566%; } '); } else { addNewStyle(' #ShaiXuan tbody tr td:nth-child( 1 ) { width: 28px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 2 ) { width: 100px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 3 ) { width: 100px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 4 ) { width: 230px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 5 ) { width: 170px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 6 ) { width: 110px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 7 ) { width: 120px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 8 ) { width: 150px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 9 ) { width: 180px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 10 ) { width: 110px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 11 ) { width: 120px; } '); addNewStyle(' #ShaiXuan tbody tr td:nth-child( 12 ) { width: 150px; } '); }
}
//加载所有DB选项 function GetALLSelectData() { GetProjectJD(); GetEQPType(); GetStatus();
} //项目阶段 function GetProjectJD() { $.ajax({ url: "/SRM/WatchPanel/GetProjectJD?" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { $("#txtProJieDuan").find("option").remove(); $("#txtProJieDuan").append("<option value=''></option>"); for (var i = 0; i < data.length; i++) { $("#txtProJieDuan").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>"); }
} $('#txtProJieDuan').selectpicker('refresh'); $('#txtProJieDuan').selectpicker('render'); } }); }
//设备类型 function GetEQPType() { $.ajax({ url: "/SRM/WatchPanel/GetEQPType?" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { $("#txtEQPType").find("option").remove(); $("#txtEQPType").append("<option value=''></option>"); for (var i = 0; i < data.length; i++) { $("#txtEQPType").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>"); }
} $('#txtEQPType').selectpicker('refresh'); $('#txtEQPType').selectpicker('render'); } });
}
//状态 function GetStatus() { $.ajax({ url: "/SRM/WatchPanel/GetStatus?" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { $("#txtStatus").find("option").remove(); $("#txtStatus").append("<option value=''></option>"); for (var i = 0; i < data.length; i++) { $("#txtStatus").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>"); }
} $('#txtStatus').selectpicker('refresh'); $('#txtStatus').selectpicker('render'); } }); }
function addNewStyle(newStyle) { var styleElement = document.getElementById('styles_js'); if (!styleElement) { styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.id = 'styles_js'; document.getElementsByTagName('head')[0].appendChild(styleElement); } styleElement.appendChild(document.createTextNode(newStyle)); }
function JDPictureSet(JDDivID, JDQty, Status) { var myChart = echarts.init(document.getElementById(JDDivID)); var Colorfont = "black"; var Color = "white"; if (Status == "紧急") { Color = "yellow";//黄色 } if (Status == "完成") { Color = "#42f943";//绿色 } if (Status == "延期") { Color = "red";//红色 Colorfont = "white"; } if (JDQty == 0) { Colorfont = Color; }
myChart.setOption({ //加载数据图表
title: { show: false, }, tooltip: { show: false, }, legend: { show: false, }, grid: { show: false, }, xAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, max: 100, min: 0, }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, type: 'category', }, series: [ { type: 'bar', data: [JDQty], label: { show: true, formatter: '{c}%', color: Colorfont }, itemStyle: { color: Color, } } ] });
}
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 ChangeStartEnd() { var textTT=$("#IsStartEnd").text(); if (textTT == "暂停滚动") { timer = window.clearInterval(timer);//停止滚动 $("#IsStartEnd").text("开始滚动"); } else { timer = setInterval(function () { scrollBody_act(); }, GunDongRate); $("#IsStartEnd").text("暂停滚动"); } }
function ChangeShaiXuan_input() { if (event.keyCode == 13) { gridList1(); } }
function ChangeShaiXuan_inputTime() { gridList1(); }
function btn_ExportAll() {
var txtProject = $("#txtProject").val(); var txtEQPType = GetChose("txtEQPType"); var txtItemStd = $("#txtItemStd").val(); var txtEQPCode = $("#txtEQPCode").val(); var txtPlanStartDay = $("#txtPlanStartDay").val(); var txtMOCode = $("#txtMOCode").val(); var txtItemCode = $("#txtItemCode").val(); var txtProJieDuan = GetChose("txtProJieDuan"); var txtStatus = GetChose("txtStatus"); var txtPlanEndDay = $("#txtPlanEndDay").val();
var data = "&txtProject=" + txtProject + "&txtEQPType=" + txtEQPType + "&txtItemStd=" + txtItemStd + "&txtEQPCode=" + txtEQPCode + "&txtPlanStartDay=" + txtPlanStartDay + "&txtMOCode=" + txtMOCode + "&txtItemCode=" + txtItemCode + "&txtProJieDuan=" + txtProJieDuan + "&txtStatus=" + txtStatus + "&txtPlanEndDay=" + txtPlanEndDay; $.download("/SRM/WatchPanel/ExportAll?" + Math.random(), data, 'post'); } </script>
<form id="form1"> <div class="formdiv">
<table class="form"> <tr class="topRow"> <td style="text-align:right;width:18%"> <label class="radio-inline" id="logolabel"> <img src="~/Content/img/Panellogo.png" border="0" class="logoclass" /> </label> </td> <td style="width:22%"> <div class="TopNamelogo" id="TopNamelogo">利穗科技</div> </td> <td style="width:20%"> <div class="TopName" id="TopName">生产进度看板</div> </td> <td style="width:8%"> <a href="PanelWIPDetail" style="float:right;color:antiquewhite;font-size:18px" class="btn btn-primary">切换</a> </td> <td style="width:8%"> <a id="IsOut" href="#" style="float:right;color:antiquewhite;font-size:18px" class="btn btn-primary" onclick="btn_ExportAll()">导出</a> </td> <td style="width:8%"> <a id="IsStartEnd" href="#" onclick="ChangeStartEnd()" class="btn btn-primary" style="float:right;color:antiquewhite; font-size:18px">开始滚动</a> </td> <td style="width:16%"> <div class="time" id="timeStr"></div> </td> </tr>
<tr style="width:100%;height:100%;" id="Tr_ShaiXuan"> <td colspan="7" class="ToptdClass"> <div class="gridPanel"> <table id="ShaiXuan"> <tr> <td > </td> <td > <input id="txtProject" class="form-control" name="txtItemStd" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><select id="txtEQPType" name="txtEQPType" class="selectpicker" data-width="70px" title="" onchange="ChangeShaiXuan_inputTime()" multiple="multiple" data-live-search="true" ></select></td> <td ><input id="txtItemStd" class="form-control" name="txtItemStd" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><input id="txtEQPCode" class="form-control" name="txtEQPCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><input id="txtPlanStartDay" class="form-control" name="txtPlanStartDay" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><input id="txtMOCode" class="form-control" name="txtMOCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><input id="txtItemCode" class="form-control" name="txtItemCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td ><select id="txtProJieDuan" name="txtProJieDuan" class="selectpicker" data-width="120px" title="" onchange="ChangeShaiXuan_inputTime()" multiple="multiple" data-live-search="true"></select></td> <td ><select id="txtStatus" name="txtStatus" class="selectpicker" data-width="80px" title="" onchange="ChangeShaiXuan_inputTime()" multiple="multiple" data-live-search="true" ></select></td> <td ><input id="txtPlanEndDay" class="form-control" name="txtPlanEndDay" type="text" onkeypress="ChangeShaiXuan_input()"/> </td> <td style="width:auto" > </td> </tr> </table> </div> </td>
</tr>
<tr style="width:100%;height:100%;"> <td colspan="7" class="ToptdClass"> <div class="gridPanel" id="gridPanel1"> <table id="gridList1"></table>
</div> </td>
</tr>
</table>
</div>
</form>
|