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.
1304 lines
49 KiB
1304 lines
49 KiB
@{
|
|
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: 9px;
|
|
/*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;
|
|
}
|
|
</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 = 100;
|
|
var timer;//刷新数据时间
|
|
|
|
var TBBackColor = "#031c7bc2";
|
|
var TBTitleFontColor = "#0bd4d4";
|
|
var GunDongRate = 2 * 1000;//单位毫秒 //表格滚动间隔时间
|
|
var DataF = 300;//单位秒 //刷新数据时间
|
|
var IsFirstShow = false;
|
|
var GunDongRow = 1;
|
|
$(function () {
|
|
|
|
//显示时间
|
|
getTime();
|
|
|
|
gridList();
|
|
$(window).resize(function () {
|
|
|
|
// gridList1();
|
|
GunDongRow = 0;
|
|
});
|
|
// scrollBody();
|
|
//刷新数据
|
|
timer = setInterval(function () {
|
|
gridList();
|
|
}, DataF * 1000);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function gridList() {
|
|
SetPanel1();
|
|
SetPanel5();
|
|
SetPanel2();
|
|
|
|
SetPanel4();
|
|
SetPanel3();
|
|
// gridList1();
|
|
}
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
//生产进度看板-层析柱(Qty)
|
|
function SetPanel1()
|
|
{
|
|
var myChart = echarts.init(document.getElementById('panel1'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#91cc75','#5470c6', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
//var Y_Show = ['电装', '机械装配', '总装', '仪表配置', '调试测试', 'FAT', 'FQC'];
|
|
var Y_Show = [ '机械装配', '总装', '调试测试', 'FAT', 'FQC'];
|
|
var X_Show = ['完成', '在制','总数'];
|
|
var DataList = new Array();//[[38, 0, 2, 0, 4, 37, 138], [12, 4, 18, 11, 98, 10, 0] ];
|
|
var DataPercent = new Array();//[50, 4, 20,11,102, 47,138];
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWIPQty1?" + Math.random(),
|
|
data: { XX: "XX" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
var Qry1 = new Array();
|
|
var Qry2 = new Array();
|
|
Y_Show = new Array();
|
|
DataPercent = new Array();
|
|
for (var i = 0; i < result.length; i++) {
|
|
Y_Show.push(result[i].PROJECTSTR);
|
|
Qry2.push(result[i].COMQTY);//完成
|
|
Qry1.push(result[i].WIPQTY);//在制
|
|
DataPercent.push(result[i].ZQTY);//总数量
|
|
|
|
}
|
|
DataList.push(Qry2);
|
|
DataList.push(Qry1);
|
|
|
|
|
|
var seriesData = new Array();
|
|
for (var i = 0; i < 2; i++) {
|
|
var obj = {
|
|
|
|
name: X_Show[i],
|
|
type: 'bar',
|
|
stack: 'total',
|
|
color: colors[i],
|
|
barMaxWidth: 32,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
distance: -1,
|
|
position: 'insideRight',
|
|
formatter: function (param) {
|
|
if (param.seriesName == "完成")
|
|
{ return '{a|' + param.value + '}{b|}'; }
|
|
else {
|
|
return '{c|' + param.value + '}{b| ' + DataPercent[param.dataIndex] + '}';
|
|
}
|
|
},
|
|
rich: {
|
|
a: {
|
|
color: 'black',
|
|
},
|
|
b: {
|
|
color: colors[2],
|
|
width: 2,
|
|
fontWeight: 700,
|
|
},
|
|
c: {
|
|
color: 'white',
|
|
|
|
},
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: DataList[i]
|
|
};
|
|
seriesData.push(obj);
|
|
}
|
|
|
|
var objp = {
|
|
name: X_Show[2],
|
|
type: 'line',
|
|
show: false,
|
|
color: colors[2],
|
|
// stack: 'total',
|
|
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: DataList[2]
|
|
};
|
|
seriesData.push(objp);
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '生产进度看板-层析柱(Qty)',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
|
|
backgroundColor: TBBackColor,
|
|
|
|
legend: {
|
|
data: X_Show, icon: "rect",
|
|
top: 30,
|
|
textStyle: { color: colors, }, fontWeight: 700,
|
|
},
|
|
grid: {
|
|
show: false,
|
|
|
|
left: 70,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
|
|
},
|
|
xAxis: {
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
splitLine: { show: false, },
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
splitLine: { show: false, },
|
|
type: 'category',
|
|
data: Y_Show
|
|
},
|
|
series: seriesData
|
|
});
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("生产进度看板-层析柱(Qty)没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("生产进度看板-层析柱(Qty)请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//生产进度-设备(Qty)
|
|
function SetPanel5()
|
|
{
|
|
var myChart = echarts.init(document.getElementById('panel5'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#91cc75', '#5470c6', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var Y_Show = ['电装', '机械装配', '总装', '仪表配置', '调试测试', 'FAT', 'FQC'];
|
|
var X_Show = ['完成', '在制', '总数'];
|
|
var DataList = new Array();//[[38, 0, 2, 0, 4, 37, 138], [12, 4, 18, 11, 98, 10, 0] ];
|
|
var DataPercent = new Array();//[50, 4, 20,11,102, 47,138];
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWIPQty5?" + Math.random(),
|
|
data: { XX: "XX" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
var Qry1 = new Array();
|
|
var Qry2 = new Array();
|
|
Y_Show = new Array();
|
|
DataPercent = new Array();
|
|
for (var i = 0; i < result.length; i++) {
|
|
Y_Show.push(result[i].PROJECTSTR);
|
|
Qry2.push(result[i].COMQTY);//完成
|
|
Qry1.push(result[i].WIPQTY);//在制
|
|
DataPercent.push(result[i].ZQTY);//总数量
|
|
}
|
|
DataList.push(Qry2);
|
|
DataList.push(Qry1);
|
|
|
|
var seriesData = new Array();
|
|
for (var i = 0; i < 2; i++) {
|
|
var obj = {
|
|
|
|
name: X_Show[i],
|
|
type: 'bar',
|
|
stack: 'total',
|
|
color: colors[i],
|
|
barMaxWidth: 32,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
distance: -1,
|
|
position: 'insideRight',
|
|
formatter: function (param) {
|
|
if (param.seriesName == "完成")
|
|
{ return '{a|' + param.value + '}{b|}'; }
|
|
else {
|
|
return '{c|' + param.value + '}{b| ' + DataPercent[param.dataIndex] + '}';
|
|
}
|
|
},
|
|
rich: {
|
|
a: {
|
|
color: 'black',
|
|
},
|
|
b: {
|
|
color: colors[2],
|
|
width: 2,
|
|
fontWeight: 700,
|
|
},
|
|
c: {
|
|
color: 'white',
|
|
|
|
},
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: DataList[i]
|
|
};
|
|
seriesData.push(obj);
|
|
}
|
|
|
|
var objp = {
|
|
name: X_Show[2],
|
|
type: 'line',
|
|
show: false,
|
|
color: colors[2],
|
|
// stack: 'total',
|
|
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: DataList[2]
|
|
};
|
|
seriesData.push(objp);
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '生产进度-设备(Qty)',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
|
|
backgroundColor: TBBackColor,
|
|
|
|
legend: {
|
|
data: X_Show, icon: "rect",
|
|
top: 30,
|
|
textStyle: { color: colors, }, fontWeight: 700,
|
|
},
|
|
grid: {
|
|
show: false,
|
|
|
|
left: 70,
|
|
right: 30,
|
|
top: 60,
|
|
bottom: 30,
|
|
|
|
},
|
|
xAxis: {
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
splitLine:{ show:false,},
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
color: "white"
|
|
}
|
|
},
|
|
splitLine: { show: false, },
|
|
type: 'category',
|
|
data: Y_Show
|
|
},
|
|
series: seriesData
|
|
});
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("生产进度-设备(Qty)没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("生产进度-设备(Qty)请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
//生产进度 柱状图 （在制数 完成数 ）
|
|
function SetPanel2()
|
|
{
|
|
var myChart = echarts.init(document.getElementById('panel2'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
// var colors = ['#2DB1EF', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
var colors = ['#5470c6', '#91cc75', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
|
|
var X_Show = ['待开工', '已开工'];
|
|
var DataList = new Array();
|
|
|
|
//var DataList = [200,372];
|
|
//var DataPercent = ['35%', '65%'];
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWIPQty2?" + Math.random(),
|
|
data: { XX: "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++) {
|
|
DataList.push(result[i].DKGQTY);
|
|
DataList.push(result[i].YKGQTY);
|
|
|
|
}
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
color:colors,
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b},{c},{d}%'
|
|
|
|
},
|
|
legend: {
|
|
show:true,
|
|
// top: '5%',
|
|
left: '0',
|
|
orient: "vertical",
|
|
textStyle: { color: colors,fontWeight:700, },
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
// radius: DataPercent,
|
|
avoidLabelOverlap: false,
|
|
radius: [60, 130],
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{c}',
|
|
},
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
|
|
//设备类型在制数
|
|
function SetPanel3old()
|
|
{
|
|
var myChart = echarts.init(document.getElementById('panel3'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
|
|
var Y_Show = ['ECA柱', '过滤系统', '双柱', '仪表配置', '设备1',
|
|
'设备3', '其他', 'OAS柱', '双柱4', '仪表',
|
|
'设备4', '其他3', 'OAS柱5', '单柱', '配置',
|
|
'无设备'];
|
|
var DataPercent = [2, 2,11,1,3,1,11,1,1,33,15,4,15,26,15,1];
|
|
var seriesData = new Array();
|
|
|
|
//$.ajax({
|
|
// url: "/SRM/WatchPanel/GetWIPQty3?" + Math.random(),
|
|
// data: { XX: "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++) {
|
|
// Y_Show.push(result[i].EQPTYPENAME);
|
|
// DataPercent.push(result[i].QTY);
|
|
// }
|
|
|
|
for (var i = 0; i < Y_Show.length; i++) {
|
|
var obj = {
|
|
name: Y_Show[i],
|
|
value: DataPercent[i],
|
|
label: {
|
|
show: true,
|
|
position: "inside",
|
|
formatter: function (point, params, dom, rect, size) {
|
|
return point.name + ':' + point.value;
|
|
}
|
|
},
|
|
|
|
};
|
|
seriesData.push(obj);
|
|
}
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '设备类型在制数',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
tooltip: {
|
|
formatter: function (point, params, dom, rect, size) {
|
|
return point.name + ':' + point.value;
|
|
}
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
series: [{
|
|
type: 'treemap',
|
|
data: seriesData,
|
|
}],
|
|
});
|
|
|
|
|
|
// }
|
|
// else {
|
|
// myChart.hideLoading();//隐藏加载动画
|
|
// alert("设备类型在制数没有抓取到相关数据");
|
|
// }
|
|
// },
|
|
// error: function (errorMsg) {
|
|
// alert("设备类型在制数请求数据失败!", "error");
|
|
// myChart.hideLoading();
|
|
// }
|
|
//});
|
|
}
|
|
|
|
//设备类型在制数
|
|
function SetPanel3() {
|
|
var myChart = echarts.init(document.getElementById('panel3'));
|
|
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
|
|
// var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];
|
|
var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
|
|
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
|
|
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
|
|
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
//new Array();//
|
|
var Y_Show = new Array();// ['ECA柱', '过滤系统', '双柱', '仪表配置', '设备1', '设备3', '其他', 'OAS柱', '双柱4', '仪表', '设备4', '其他3', 'OAS柱5', '单柱', '配置', '无设备'];
|
|
var DataPercent = new Array();// [2, 2, 11, 1, 3, 1, 11, 1, 1, 33, 15, 4, 15, 26, 15, 1];
|
|
var seriesData = new Array();
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWIPQty3?" + Math.random(),
|
|
data: { XX: "XX" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
if (result && result != null && result.length > 0) {
|
|
for (var i = 0; i < result.length; i++) {
|
|
Y_Show.push(result[i].EQPTYPENAME);
|
|
DataPercent.push(result[i].QTY);
|
|
}
|
|
|
|
for (var i = 0; i < Y_Show.length; i++) {
|
|
var obj = {
|
|
name: Y_Show[i],
|
|
value: DataPercent[i],
|
|
label: {
|
|
show: true,
|
|
formatter: function (point, params, dom, rect, size) {
|
|
return point.name + ':' + point.value;
|
|
},
|
|
color: colors[i],
|
|
fontSize:14,
|
|
},
|
|
};
|
|
seriesData.push(obj);
|
|
}
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '设备类型在制数',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
tooltip: {
|
|
formatter: function (point, params, dom, rect, size) {
|
|
return point.name + ':' + point.value;
|
|
}
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
|
|
color: colors,
|
|
series: [
|
|
{
|
|
top: 20,
|
|
//name: 'Nightingale Chart',
|
|
type: 'pie',
|
|
radius: [60, 130],
|
|
|
|
//center: ['50%', '50%'],
|
|
//roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 5
|
|
},
|
|
data: seriesData
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("设备类型在制数没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("设备类型在制数请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
function SetPanel4()//待开工项目（Qty）
|
|
{
|
|
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];
|
|
|
|
var MonthList = new Array();// ['6月', '7月', '8月', '9月', '10月', '11月', '12月', ];
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetWIPQty4?" + Math.random(),
|
|
data: { XX: "XX" },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
|
if (result && result != null && result.length > 0) {
|
|
var Qry1 = new Array();
|
|
for (var i = 0; i < result.length; i++) {
|
|
QtyList.push(result[i].QTY);
|
|
MonthList.push(result[i].MONTHSTR);
|
|
}
|
|
|
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //加载数据图表
|
|
title: {
|
|
show: true,
|
|
text: '待开工项目（Qty）',
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: TBTitleFontColor,
|
|
},
|
|
},
|
|
tooltip: {
|
|
formatter: function (point, params, dom, rect, size) {
|
|
return point.value[0] + ':' + point.value[1];
|
|
}
|
|
},
|
|
backgroundColor: TBBackColor,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + ":" + params[0].data;
|
|
return showHtm;
|
|
}
|
|
},
|
|
|
|
xAxis: {
|
|
offset: 12,
|
|
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: 'pictorialBar',
|
|
symbolSize: [30, 14],
|
|
symbolOffset: [0, -7],
|
|
symbolPosition: 'end',
|
|
z: 24,
|
|
//color: "#2DB1EF",
|
|
color: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.5,
|
|
colorStops: [{
|
|
offset: 0, color: '#376db0'//'#4F81BD' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#2DB1EF' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
data: QtyList,
|
|
barMaxWidth: 30,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
{
|
|
name: '数量',
|
|
type: 'pictorialBar',
|
|
symbolSize: [30, 14],
|
|
symbolOffset: [0, 7],
|
|
z: 12,
|
|
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0, color: '#376db0' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0, color: '#2DB1EF' // 50% 处的颜色
|
|
},
|
|
{
|
|
offset: 1, color: '#376db0' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
data: QtyList,
|
|
barMaxWidth: 30,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
|
|
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data: QtyList,
|
|
barMaxWidth: 30,
|
|
yAxisIndex: 0,
|
|
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0, color: '#376db0' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0, color: '#2DB1EF' // 50% 处的颜色
|
|
},
|
|
{
|
|
offset: 1, color: '#376db0' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
z: 15,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: 'white',
|
|
offset: [0, -20],
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
}
|
|
else {
|
|
myChart.hideLoading();//隐藏加载动画
|
|
alert("待开工项目（Qty）没有抓取到相关数据");
|
|
}
|
|
},
|
|
error: function (errorMsg) {
|
|
alert("待开工项目（Qty）请求数据失败!", "error");
|
|
myChart.hideLoading();
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
//自动滚动
|
|
//function scrollBody() {
|
|
// timer = setInterval(function () {
|
|
// 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; }
|
|
// }, GunDongRate);
|
|
//}
|
|
|
|
|
|
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: 190, align: 'left', });
|
|
_cols.push({ label: '设备编号', name: '设备编号', width: 150, align: 'left', });
|
|
_cols.push({ label: '计划开工日期', name: '计划开工日期', width: 120, align: 'left', });
|
|
_cols.push({ label: '生产工单号', name: '生产工单号', width: 120, align: 'left', });
|
|
_cols.push({ label: '项目阶段', name: '项目阶段', width: 150, align: 'left', });
|
|
_cols.push({
|
|
label: '状态', name: '状态', width: 110, align: 'left',
|
|
cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) {
|
|
if (val=="延期") {
|
|
return "style='color:red'";
|
|
}
|
|
}
|
|
});
|
|
_cols.push({ label: '计划完工日期', name: '计划完工日期', width: 120, align: 'left', });
|
|
_cols.push({
|
|
label: '项目进度条', name: '项目进度条', width: 200, 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: 10, align: 'left', sortable: false });
|
|
// _cols.push({ label: '客户名称', name: '客户名称', width: 90, align: 'left', });
|
|
// _cols.push({ label: '产品名称', name: '产品名称', width: 125, align: 'left', });
|
|
// _cols.push({ label: '序列号', name: '序列号', width: 60, align: 'left', });
|
|
//_cols.push({ label: '数量', name: '数量', width: 40, align: 'left', });//hidden: true,
|
|
//_cols.push({ label: '待装配', name: '生产确认表', width: 60, align: 'left', });
|
|
//_cols.push({ label: '电装开始', name: '电装开始', width: 60, align: 'left', });
|
|
//_cols.push({ label: '电装完成', name: '电装完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: '机械装配开始', name: '机械装配开始', width: 60, align: 'left', });
|
|
//_cols.push({ label: '机械装配完成', name: '机械装配完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: '总装开始', name: '总装开始', width: 60, align: 'left', });
|
|
|
|
//_cols.push({ label: '总装完成', name: '总装完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: '仪表配置开始', name: '仪表配置开始', width: 60, align: 'left', });
|
|
|
|
//_cols.push({ label: '仪表配置完成', name: '仪表配置完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: '调试测试开始', name: '调试测试开始', width: 60, align: 'left', });
|
|
//_cols.push({ label: '调试测试完成', name: '调试测试完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: 'FAT开始', name: 'FAT开始', width: 60, align: 'left', });
|
|
//_cols.push({ label: 'FAT完成', name: 'FAT完成', width: 60, align: 'left', });
|
|
//_cols.push({ label: 'FQC', name: 'FQC', width: 60, align: 'left', });
|
|
//_cols.push({ label: 'OQC', name: 'OQC', width: 60, align: 'left', });
|
|
//_cols.push({ label: '产品类型', name: '产品类型', width: 60, align: 'left', });
|
|
|
|
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/GetGridJson_WIPJinDu?" + Math.random(),
|
|
// postData: { queryJson: JSON.stringify(queryJson) },
|
|
// height: $("#form1").height()*0.5 - 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], "项目进度条值");
|
|
// JDPictureSet("JDText_" + ID, QTY);
|
|
// }
|
|
|
|
// }
|
|
// });
|
|
//}
|
|
|
|
function JDPictureSet(JDDivID, JDQty) {
|
|
var myChart = echarts.init(document.getElementById(JDDivID));
|
|
|
|
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: "white"
|
|
},
|
|
itemStyle: {
|
|
color: "#91cc75"
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</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:18%">
|
|
<div class="TopNamelogo" id="TopNamelogo">利穗科技</div>
|
|
</td>
|
|
<td style="width:28%">
|
|
<div class="TopName" id="TopName">生产进度看板</div>
|
|
</td>
|
|
<td style="width:8%">
|
|
<a href="PanelWIPDetail_SX" style="float:right;color:antiquewhite;font-size:18px" >(明细)</a>
|
|
</td>
|
|
<td style="width:28%">
|
|
<div class="time" id="timeStr"></div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr style="height:100%;">
|
|
<td colspan="2" id="tdXX1">
|
|
@*<div id="panel1" style="width: 100%;height:100%;"></div>*@
|
|
|
|
<table class="form">
|
|
<tr style="width: 100%;height:50%;">
|
|
<td><div id="panel1" style="width: 100%;height:100%;"></div></td>
|
|
</tr>
|
|
<tr style="width: 100%;height:50%;">
|
|
<td><div id="panel5" style="width: 100%;height:100%;"></div></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<table class="form">
|
|
<tr style="width: 100%;height:50%;">
|
|
<td><div id="panel2" style="width: 100%;height:100%;"></div></td>
|
|
</tr>
|
|
<tr style="width: 100%;height:50%;">
|
|
<td><div id="panel3" style="width: 100%;height:100%;"></div></td>
|
|
</tr>
|
|
</table>
|
|
|
|
</td>
|
|
<td colspan="2">
|
|
<div id="panel4" style="width: 100%;height:100%;"></div>
|
|
</td>
|
|
</tr>
|
|
@*<tr style="width:100%;height:50%;">
|
|
<td colspan="5">
|
|
<div class="gridPanel" id="gridPanel1">
|
|
<table id="gridList1"></table>
|
|
|
|
</div>
|
|
</td>
|
|
|
|
</tr>*@
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</form>
|