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.
585 lines
25 KiB
585 lines
25 KiB
<!DOCTYPE html>
|
|
<html style="height:100%">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>执行看板</title>
|
|
|
|
<link rel="stylesheet" href="~/Content/Cust069/css/index.css">
|
|
<link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css">
|
|
<script src="~/Content/Cust069/js/jquery.min.js"></script>
|
|
<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>
|
|
<script src="~/Content/Cust069/js/index.js"></script>
|
|
|
|
<script src="~/Content/Cust069/js/china.js"></script>
|
|
<script src="~/Content/Cust069/js/mymap.js"></script>
|
|
<style>
|
|
.mainbox {
|
|
width:100%;
|
|
}
|
|
.logoclass {
|
|
height: 2rem;
|
|
padding-top: 0.5rem;
|
|
float:right;
|
|
|
|
}
|
|
body {
|
|
background-image:url(../../../../../Content/Cust003/images/bg2.jpg);
|
|
}
|
|
/*logo标题*/
|
|
.TopNamelogo {
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.TopName {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: white;
|
|
|
|
}
|
|
|
|
.TopNameTime {
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-right:3rem;
|
|
color: white;
|
|
}
|
|
.header {
|
|
height:5rem;
|
|
position:absolute;
|
|
|
|
padding-top:1rem;
|
|
/*padding-left: 3rem;*/
|
|
width:100%;
|
|
}
|
|
.header tbody, .header tr {
|
|
width:100%;
|
|
}
|
|
.monitor .head {
|
|
background: rgb(0 76 103);
|
|
}
|
|
.CustDiv1 div span:nth-child(1),.CustDiv1 div div span:nth-child(1) {
|
|
width: 20% !important;
|
|
}
|
|
.CustDiv1 div span:nth-child(2),.CustDiv1 div div span:nth-child(2) {
|
|
width: 28% !important;
|
|
}
|
|
.CustDiv1 div span:nth-child(3),.CustDiv1 div div span:nth-child(3) {
|
|
width: 11% !important;
|
|
}
|
|
.CustDiv1 div span:nth-child(4),.CustDiv1 div div span:nth-child(4) {
|
|
width: 11% !important;
|
|
}
|
|
.CustDiv1 div span:nth-child(5),.CustDiv1 div div span:nth-child(5) {
|
|
width: 19% !important;
|
|
}
|
|
.CustDiv1 div span:nth-child(6),.CustDiv1 div div span:nth-child(6) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
.CustDiv2 div span:nth-child(1),.CustDiv2 div div span:nth-child(1) {
|
|
width: 22% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(2),.CustDiv2 div div span:nth-child(2) {
|
|
width: 15% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(3),.CustDiv2 div div span:nth-child(3) {
|
|
width: 15% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(4),.CustDiv2 div div span:nth-child(4) {
|
|
width: 15% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(5),.CustDiv2 div div span:nth-child(5) {
|
|
width: 15% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(6),.CustDiv2 div div span:nth-child(6) {
|
|
width: 8% !important;
|
|
}
|
|
.CustDiv2 div span:nth-child(7),.CustDiv2 div div span:nth-child(7) {
|
|
width: 10% !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="height:100%">
|
|
<table class="header">
|
|
<tr>
|
|
<td style="width:12%">
|
|
<div class="TopNamelogo" id="TopNamelogo">
|
|
<img src="~/Content/img/ninghong.jpg" border="0" class="logoclass" />
|
|
</div>
|
|
</td>
|
|
|
|
<td style="width:18%">
|
|
<div class="TopNamelogo" id="TopNamelogo">振翔</div>
|
|
</td>
|
|
<td style="width:40%">
|
|
<div class="TopName" id="TopName">执行看板</div>
|
|
</td>
|
|
<td >
|
|
<div class="TopNameTime" id="TopNameTime"></div>
|
|
</td>
|
|
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="viewport" style="height:calc(100% )">
|
|
<div class="mainbox">
|
|
|
|
<ul class="clearfix">
|
|
<li>
|
|
<div style="height: calc(50% - 0.1rem);width: calc(33% - 0.1rem); float: left ">
|
|
<div class="column">
|
|
|
|
<!--监控-->
|
|
<div class="monitor panel">
|
|
<div class="inner">
|
|
<div class="tabs">
|
|
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>SMT车间生产加工数据</a>
|
|
|
|
</div>
|
|
<div class="content CustDiv1" style="display: block;" >
|
|
<div class="head">
|
|
|
|
<span class="col">生产订单</span>
|
|
<span class="col">产品名称</span>
|
|
<span class="col">计划量</span>
|
|
<span class="col">完成量</span>
|
|
<span class="col">计划完工日期</span>
|
|
<span class="col">生产进度</span>
|
|
</div>
|
|
<div class="marquee-view" id="marqueeCust1">
|
|
<div class="marquee" id="marqueeCustCH1">
|
|
@*<div class="row">
|
|
<span class="col">20180701</span>
|
|
<span class="col">1120180701</span>
|
|
<span class="col">10</span>
|
|
<span class="col">20</span>
|
|
<span class="col">2023-03-10</span>
|
|
<span class="col">100%</span>
|
|
</div>*@
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div style="height: calc(50% - 0.1rem);width: calc(33% - 0.1rem); float: left;padding-left:0.5rem ">
|
|
<div class="column">
|
|
<!--监控-->
|
|
<div class="monitor panel" style="border-image:none;">
|
|
<div class="inner">
|
|
<div class="tabs">
|
|
|
|
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>插件车间生产加工数据</a>
|
|
|
|
</div>
|
|
<div class="content CustDiv1" style="display: block;">
|
|
<div class="head">
|
|
<span class="col">生产订单</span>
|
|
<span class="col">产品名称</span>
|
|
<span class="col">计划量</span>
|
|
<span class="col">完成量</span>
|
|
<span class="col">计划完工日期</span>
|
|
<span class="col">生产进度</span>
|
|
</div>
|
|
<div class="marquee-view" id="marqueeCust2">
|
|
<div class="marquee" id="marqueeCustCH2">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div style="height: calc(50% - 0.1rem);width: calc(33% - 0.1rem); float: right ">
|
|
<div class="column">
|
|
<!--监控-->
|
|
<div class="monitor panel">
|
|
<div class="inner">
|
|
<div class="tabs">
|
|
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>组装车间生产加工数据</a>
|
|
</div>
|
|
<div class="content CustDiv1" style="display: block;">
|
|
<div class="head">
|
|
<span class="col">生产订单</span>
|
|
<span class="col">产品名称</span>
|
|
<span class="col">计划量</span>
|
|
<span class="col">完成量</span>
|
|
<span class="col">计划完工日期</span>
|
|
<span class="col">生产进度</span>
|
|
</div>
|
|
<div class="marquee-view" id="marqueeCust3">
|
|
<div class="marquee" id="marqueeCustCH3">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: calc(50% - 0.1rem);width: calc(50% - 0.1rem); float: left ">
|
|
<div class="column">
|
|
|
|
|
|
<!--监控-->
|
|
<div class="monitor panel">
|
|
<div class="inner">
|
|
<div class="tabs">
|
|
|
|
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>IPQC检验合格率</a>
|
|
|
|
</div>
|
|
<div class="content " style="display: block;">
|
|
<div id="echart1_1" style="width:100%;height:100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: calc(50% - 0.1rem);width: calc(50% - 0.1rem); float: right ">
|
|
<div class="column">
|
|
<!--监控-->
|
|
<div class="monitor panel">
|
|
<div class="inner">
|
|
<div class="tabs">
|
|
|
|
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>检验合格未入库</a>
|
|
|
|
</div>
|
|
<div class="content CustDiv2" style="display: block;">
|
|
<div class="head">
|
|
|
|
<span class="col">物料条码</span>
|
|
<span class="col">送货单号</span>
|
|
<span class="col">采购订单号</span>
|
|
<span class="col">存货编码</span>
|
|
<span class="col">存货名称</span>
|
|
<span class="col">数量</span>
|
|
<span class="col">检验人员</span>
|
|
</div>
|
|
<div class="marquee-view" id="RCVUNINView">
|
|
<div class="marquee" id="RCVUNIN">
|
|
<div class="row">
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
<span class="col">100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var DataF = 300;//单位秒 //刷新数据时间
|
|
var _BarWidth = "25%";
|
|
var _barBorderRadius_M = 2;
|
|
|
|
$(function () {
|
|
getTime();
|
|
GetDataZong();
|
|
|
|
//刷新数据
|
|
timer = setInterval(function () {
|
|
GetDataZong();
|
|
|
|
}, DataF * 1000);
|
|
|
|
|
|
});
|
|
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;
|
|
//填充到组件中
|
|
$("#TopNameTime").text(theDateStr);
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(getTime, 1000);
|
|
}
|
|
function GetDataZong() {
|
|
echart1_1();
|
|
|
|
GetZhiXing_MO("marqueeCustCH1", "30");
|
|
GetZhiXing_MO("marqueeCustCH2", "60");
|
|
GetZhiXing_MO("marqueeCustCH3", "90");
|
|
GetZhiXing_RCVUnInWare();
|
|
SetIfGo("marqueeCust1", "marqueeCustCH1");//判断是否需要滚动
|
|
SetIfGo("marqueeCust2", "marqueeCustCH2");//判断是否需要滚动
|
|
SetIfGo("marqueeCust3", "marqueeCustCH3");//判断是否需要滚动
|
|
SetIfGo("RCVUNINView", "RCVUNIN");//判断是否需要滚动
|
|
|
|
|
|
}
|
|
|
|
function SetIfGo(DivID, DivCHID)
|
|
{
|
|
var H_marqueediv = $("#" + DivCHID)[0];
|
|
var H_marquee= H_marqueediv.clientHeight;
|
|
var H_marqueeView = $("#" + DivID)[0].clientHeight;
|
|
if (H_marquee < H_marqueeView) {
|
|
if ($("#" + DivID).hasClass("marquee-view")) {
|
|
$("#" + DivID).removeClass("marquee-view");
|
|
}
|
|
if ($("#" + DivCHID).hasClass("marquee")) {
|
|
$("#" + DivCHID).removeClass("marquee");
|
|
}
|
|
|
|
}
|
|
else {
|
|
if (!$("#" + DivID).hasClass("marquee-view")) {
|
|
$("#" + DivID).addClass("marquee-view");
|
|
}
|
|
if (!$("#" + DivCHID).hasClass("marquee")) {
|
|
$("#" + DivCHID).removeClass("marquee");
|
|
}
|
|
}
|
|
}
|
|
function echart1_1() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart1_1'));
|
|
|
|
var MonthArray = new Array();
|
|
var MonthPercent = new Array();
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
MonthArray.push(data[i].月份);
|
|
MonthPercent.push(data[i].PercentNum);
|
|
}
|
|
|
|
|
|
//MonthPercent = [10, 40.23, 70, 40, 0];//测试
|
|
var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
option = {
|
|
color: colors,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + "月:" + '<br>' +
|
|
params[0].seriesName + ':' + params[0].data+"%";
|
|
|
|
return showHtm;
|
|
}
|
|
},
|
|
grid: {
|
|
"top": "15",
|
|
"right": "20",
|
|
"bottom": "20",
|
|
"left": "40",
|
|
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
|
|
|
|
|
|
"xAxis": [
|
|
{
|
|
|
|
data: MonthArray,
|
|
axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.9)", } },
|
|
axisTick: { show: true, },
|
|
axisLabel: {
|
|
textStyle: {
|
|
show: true,
|
|
//fontSize: 9,
|
|
color: "rgba(255,255,255,.9)",
|
|
},
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
|
|
"type": "value",
|
|
axisTick: { show: true },
|
|
splitLine: { show: false, },
|
|
axisLine: { show: true, },
|
|
axisLabel: {
|
|
show: true,
|
|
//fontSize: 9,
|
|
color: "rgba(255,255,255,.9)"
|
|
|
|
},
|
|
axisLine: {
|
|
show: true
|
|
},
|
|
|
|
}
|
|
],
|
|
"series": [
|
|
|
|
{
|
|
"name": "合格率",
|
|
"type": "bar",
|
|
"data": MonthPercent,
|
|
barWidth: _BarWidth,
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: _barBorderRadius_M,
|
|
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
//position: 'outside',
|
|
formatter: '{c}%',
|
|
},
|
|
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function GetZhiXing_MO(marqueeID, ItemNumber) {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_MO?ItemNumber=" + ItemNumber + "&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
//生产订单 产品名称 计划数量 完成数量 计划完工日期 生产进度
|
|
var html = "";
|
|
for (var i = 0; i < data.length; i++) {
|
|
html += ' <div class="row"> <span class="col">' + data[i].生产订单 + '</span> <span class="col">' + data[i].产品名称 + '</span>';
|
|
html += ' <span class="col">' + data[i].计划数量 + '</span> <span class="col">' + data[i].完成数量 + '</span>';
|
|
html += ' <span class="col" >' + data[i].计划完工日期 + '</span> <span class="col">' + data[i].生产进度 + '</span> </div> ';
|
|
|
|
}
|
|
html += "</ul>";
|
|
$("#" + marqueeID).html(html);
|
|
}
|
|
else {
|
|
$("#" + marqueeID).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function GetZhiXing_RCVUnInWare() {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
|
|
var html = "";
|
|
for (var i = 0; i < data.length; i++) {
|
|
html += ' <div class="row"> <span class="col">' + data[i].LOTNO + '</span> <span class="col">' +
|
|
data[i].送货单号 + '</span>';
|
|
html += ' <span class="col">' + data[i].采购订单号 + '</span> <span class="col">' + data[i].物料编码 + '</span>';
|
|
html += ' <span class="col" >' + data[i].物料名称 + '</span> <span class="col">' + data[i].检验人 + '</span> ';
|
|
html += ' <span class="col" >' + data[i].数量 + '</span> </div> ';
|
|
|
|
}
|
|
html += "</ul>";
|
|
$("#RCVUNIN" ).html(html);
|
|
}
|
|
else {
|
|
$("#RCVUNIN" ).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function GetZhiXing_OQC( ) {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
return data;
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
return null;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|