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.
668 lines
22 KiB
668 lines
22 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>生产管理看板</title>
|
|
<script type="text/javascript" src="~/Content/Cust011/js/jquery.js"></script>
|
|
<link rel="stylesheet" href="~/Content/Cust011/css/comon0.css?ss=12" />
|
|
<script type="text/javascript" src="~/Content/Cust011/js/echarts.min.js"></script>
|
|
|
|
<link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" />
|
|
<link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" />
|
|
<link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" />
|
|
@*<script language="JavaScript" src="~/Content/Cust011/js/js.js?ss=4"></script>*@
|
|
<style>
|
|
.logoclass {
|
|
height:1rem;
|
|
}
|
|
.TopNamelogo {
|
|
position:absolute;
|
|
}
|
|
.ul_listIn {
|
|
-webkit-animation: 14s gundong linear infinite normal;
|
|
animation: 14s gundong linear infinite normal;
|
|
position: relative;
|
|
}
|
|
.rightMain_bottomIn, .rightMain_bottom,.biaoge {
|
|
height:100%;
|
|
}
|
|
.rightMain_bottomIn {
|
|
border: none;
|
|
width: unset;
|
|
min-height: unset;
|
|
position: relative;
|
|
padding: unset;
|
|
}
|
|
.rightMain_bottomIn .biaoge_list .ul_con {
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
.rightMain_bottomIn .biaoge_list ul li {
|
|
width: 20%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, .9);
|
|
font-size: 0.18rem;
|
|
height: 0.4rem;
|
|
line-height: 0.4rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
white-space: normal !important;
|
|
height: auto;
|
|
|
|
}
|
|
table td {
|
|
font-size: .18rem;
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.rightMain_bottomIn .biaoge_list .ul_title {
|
|
|
|
background: -webkit-linear-gradient(left, rgb(5 17 50 / 10%), rgb(5 17 50 / 50%), rgb(5 17 50 / 10%));
|
|
|
|
}
|
|
.LineStringSet span {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.ZPClass ul li:nth-child(1), .ZPClass ul li:nth-child(1) {
|
|
width: 5% !important;
|
|
}
|
|
|
|
.ZPClass ul li:nth-child(2), .ZPClass ul li:nth-child(2) {
|
|
width: 12% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(3), .ZPClass ul li:nth-child(3) {
|
|
width: 6% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(4), .ZPClass ul li:nth-child(4) {
|
|
width: 6% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(5), .ZPClass ul li:nth-child(5) {
|
|
width: 12% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(6), .ZPClass ul li:nth-child(6) {
|
|
width: 19% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(7), .ZPClass ul li:nth-child(7) {
|
|
width: 19% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(8), .ZPClass ul li:nth-child(8) {
|
|
width: 6% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(9), .ZPClass ul li:nth-child(9) {
|
|
width: 6% !important;
|
|
}
|
|
.ZPClass ul li:nth-child(10), .ZPClass ul li:nth-child(10) {
|
|
width: 9% !important;
|
|
}
|
|
|
|
.rateCClass {
|
|
margin:0.6rem;
|
|
}
|
|
|
|
.rateCClass {
|
|
width: 2.4rem;
|
|
z-index:99;
|
|
}
|
|
|
|
|
|
/* 方法1：Flexbox布局（推荐） */
|
|
.equal-width-list {
|
|
list-style: none;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.equal-width-list li {
|
|
display: flex;
|
|
padding: 0.04rem;
|
|
}
|
|
|
|
|
|
|
|
.equal-width-list li span {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
color:#fff;
|
|
font-size:0.2rem;
|
|
|
|
}
|
|
|
|
.left-span {
|
|
background-color: #344244d1;
|
|
color: white;
|
|
|
|
}
|
|
|
|
.right-span {
|
|
background-color: #395cabb5;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="head">
|
|
<img class="TopNamelogo logoclass" src="~/Content/img/logo.png" border="0" />
|
|
<h1><a href="">金豪生产管理看板</a></h1>
|
|
<div class="time" id="showTime">2019/12/05 16:16:54</div>
|
|
|
|
</div>
|
|
<div class="mainbox">
|
|
<ul class="clearfix" style="height: calc(30%)">
|
|
<li style="width: calc(65%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem)">
|
|
<div class="alltitle">十天生产订单开工&生产汇总</div>
|
|
<div class="boxnav" id="echarts1"></div>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li style="width: calc(35%)">
|
|
<div class="rateCClass " style=" position:absolute;" >
|
|
<ul class="equal-width-list">
|
|
<li><span class="left-span">设备总数</span><span class="right-span" id="ZQTYStr">0</span></li>
|
|
<li> <span class="left-span">开机总数</span><span class="right-span" id="QTYStr">0</span> </li>
|
|
<li> <span class="left-span">设备开机率</span><span class="right-span" id="EQPRateStr">0</span> </li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem);">
|
|
<div class="alltitle">设备开机率</div>
|
|
<div class="boxnav" id="echarts3"></div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<ul class="clearfix" style="height: calc(35% )">
|
|
|
|
<li style="width: calc(100%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem )">
|
|
<div class="alltitle">当天定子生产工单明细</div>
|
|
<div class="boxnav" id="">
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
|
|
<div class="biaoge biaoge_list" id="UserWork1_list">
|
|
<div class="biaoge_listIn ZPClass">
|
|
|
|
<ul class="ul_title">
|
|
<li>序号</li>
|
|
<li>工单代码</li>
|
|
<li>计划数量</li>
|
|
<li>完工数量</li>
|
|
<li>产品代码</li>
|
|
<li>产品名称</li>
|
|
<li>产品规格</li>
|
|
<li>机台号</li>
|
|
<li>模具号</li>
|
|
<li>客户</li>
|
|
</ul>
|
|
<div class="ul_list" id="UserWork1_Upp">
|
|
<div class="ul_listIn ul_listInCust1 ZPClass" id="UserWork1">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<ul class="clearfix" style="height: calc(35% )">
|
|
|
|
<li style="width: calc(100%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem )">
|
|
<div class="alltitle">当天转子生产工单明细</div>
|
|
<div class="boxnav" id="">
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
|
|
<div class="biaoge biaoge_list" id="UserWork2_list">
|
|
<div class="biaoge_listIn ZPClass">
|
|
|
|
<ul class="ul_title">
|
|
<li>序号</li>
|
|
<li>工单代码</li>
|
|
<li>计划数量</li>
|
|
<li>完工数量</li>
|
|
<li>产品代码</li>
|
|
<li>产品名称</li>
|
|
<li>产品规格</li>
|
|
<li>机台号</li>
|
|
<li>模具号</li>
|
|
<li>客户</li>
|
|
</ul>
|
|
<div class="ul_list" id="UserWork2_Upp">
|
|
<div class="ul_listIn ul_listInCust2 ZPClass" id="UserWork2">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
var whei = $(window).width()
|
|
$("html").css({ fontSize: whei / 20 })
|
|
$(window).resize(function () {
|
|
var whei = $(window).width()
|
|
$("html").css({ fontSize: whei / 20 })
|
|
});
|
|
});
|
|
var DataF = 300;// 300;//单位秒 //刷新数据时间
|
|
|
|
$(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;
|
|
//填充到组件中
|
|
$("#showTime").text(theDateStr);
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(getTime, 1000);
|
|
}
|
|
function GetDataZong() {
|
|
echarts_1();
|
|
echarts_3();
|
|
|
|
table_1();
|
|
SetIfGo("UserWork1_Upp", "UserWork1", "UserWork1_list");//判断是否需要滚动
|
|
table_2();
|
|
SetIfGo("UserWork2_Upp", "UserWork2", "UserWork2_list");//判断是否需要滚动
|
|
}
|
|
|
|
//十天生产订单开工&生产汇总
|
|
function echarts_1() {
|
|
var myChart = echarts.init(document.getElementById('echarts1'));
|
|
|
|
var MoQty = new Array();//工单开工数量
|
|
var ComInQty = new Array();//工单产出数量
|
|
var MonthData = new Array();
|
|
|
|
//测试
|
|
//MonthData = ["1月", "2月", "3月"];
|
|
//ComInQty = ["200", "100", "140","200", "100", "140","200", "100", "140","200", "100", "140"];
|
|
//MoQty = ["4", "2", "7"];
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetList1?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++) {
|
|
|
|
MoQty.push(data[i].开工数);
|
|
MonthData.push(data[i].日期);
|
|
ComInQty.push(data[i].生产数);
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
}, "grid": {
|
|
"top": "40",
|
|
"right": "10",
|
|
"bottom": "20",
|
|
"left": "60",
|
|
},
|
|
legend: {
|
|
data: ['开工数', '完工数'],
|
|
right: 'center', width: '100%',
|
|
textStyle: {
|
|
color: "#fff"
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
},
|
|
|
|
|
|
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
data: MonthData,
|
|
axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } },
|
|
axisLabel: {
|
|
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"type": "value",
|
|
"name": "工单数",
|
|
axisTick: { show: false },
|
|
splitLine: {
|
|
show: false,
|
|
|
|
},
|
|
axisLabel: {
|
|
"show": true,
|
|
fontSize: 14,
|
|
color: "rgba(255,255,255,.7)"
|
|
|
|
},
|
|
axisLine: {
|
|
min: 0,
|
|
max: 10,
|
|
lineStyle: { color: 'rgba(255,255,255,.2)' }
|
|
},
|
|
|
|
}
|
|
|
|
],
|
|
"series": [
|
|
|
|
{
|
|
"name": "开工数",
|
|
"type": "bar",
|
|
"data": MoQty,
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#145ab0e6'
|
|
}, {
|
|
offset: 1,
|
|
color: '#3783e0e6'
|
|
}]),
|
|
|
|
}
|
|
},
|
|
//"barGap": "0.2"
|
|
},
|
|
{
|
|
"name": "完工数",
|
|
"type": "bar",
|
|
"data": ComInQty,
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#8bd46e'
|
|
}, {
|
|
offset: 1,
|
|
color: '#09bcb7'
|
|
}]),
|
|
}
|
|
},
|
|
// "barGap": "0.2"
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
}
|
|
//定子
|
|
function table_1() {
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetGridJson2?ttype=" + escape("定子") + "&" + 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 += " <ul class='ul_con'> <li>" + data[i].序号 + "</li> <li>" + data[i].工单代码 +
|
|
"</li> <li>" + data[i].计划数量 + "</li> <li>" + data[i].完工数量 +
|
|
"</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 +
|
|
"</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].机台号 +
|
|
"</li> <li>" + data[i].模具号 + "</li> <li>" + data[i].客户 + "</li> </ul>";
|
|
|
|
}
|
|
$(".ul_listInCust1").css("animation-duration", data.length * 3 + "s");
|
|
document.getElementById("UserWork1").innerHTML = html;
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
///转子
|
|
function table_2() {
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetGridJson2?ttype=" + escape("转子") + "&" + 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 += " <ul class='ul_con'> <li>" + data[i].序号 + "</li> <li>" + data[i].工单代码 +
|
|
"</li> <li>" + data[i].计划数量 + "</li> <li>" + data[i].完工数量 +
|
|
"</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 +
|
|
"</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].机台号 +
|
|
"</li> <li>" + data[i].模具号 + "</li> <li>" + data[i].客户 + "</li> </ul>";
|
|
|
|
}
|
|
$(".ul_listInCust2").css("animation-duration", data.length * 3 + "s");
|
|
document.getElementById("UserWork2").innerHTML = html;
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
//设备开机率
|
|
function echarts_3() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echarts3'));
|
|
|
|
|
|
|
|
var EQPRATE =0;
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetGridJson7?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
|
|
EQPRATE=data[0].EQPRATE ;
|
|
|
|
$("#ZQTYStr").html(data[0].ZQTY);
|
|
|
|
$("#QTYStr").html(data[0].QTY);
|
|
$("#EQPRateStr").html(data[0].EQPRATE+'%');
|
|
}
|
|
}
|
|
});
|
|
|
|
// EQPRATE = 65;
|
|
option = {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
radius: "94%",
|
|
center: ["74%", "48%"],
|
|
itemStyle: {
|
|
color: '#58D9F9',
|
|
shadowColor: 'rgba(0,138,255,0.45)',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
|
|
},
|
|
progress: {
|
|
show: true,
|
|
roundCap: true,
|
|
width: 18
|
|
},
|
|
pointer: {
|
|
length: "60%"
|
|
},
|
|
axisLine: {
|
|
roundCap: true,
|
|
lineStyle: {
|
|
width: 8,
|
|
color: [[1, '#37a2da']]
|
|
}
|
|
},
|
|
axisTick: {
|
|
splitNumber: 4,
|
|
length:4,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#999'
|
|
}
|
|
},
|
|
splitLine: {
|
|
length: 12,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#999'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
distance: 4,
|
|
color: '#999',
|
|
fontSize: 9,
|
|
|
|
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
|
|
width: '20%',
|
|
lineHeight: 40,
|
|
height: 20,
|
|
formatter: '{value} %',
|
|
offsetCenter: [0, '65%'],
|
|
valueAnimation: false,
|
|
|
|
rich: {
|
|
value: {
|
|
fontSize: 30,
|
|
fontWeight: 'bolder',
|
|
color: '#777'
|
|
},
|
|
unit: {
|
|
fontSize: 20,
|
|
color: '#999',
|
|
padding: [0, 0, -20, 10]
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: EQPRATE
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function SetIfGo(DivID, DivCHID, listID) {
|
|
var ListDIV = $("#" + listID)[0].clientHeight;
|
|
var H_marqueediv = $("#" + DivCHID)[0];
|
|
//var H_marquee= H_marqueediv.clientHeight;
|
|
var H_marqueeView = $("#" + DivID)[0].clientHeight;
|
|
if ((ListDIV - 40) > H_marqueeView) {
|
|
if (!$("#" + DivID).hasClass("animationNone")) {
|
|
$("#" + DivID).addClass("animationNone");
|
|
}
|
|
if (!$("#" + DivCHID).hasClass("animationNone")) {
|
|
$("#" + DivCHID).addClass("animationNone");
|
|
}
|
|
|
|
}
|
|
else {
|
|
|
|
if ($("#" + DivID).hasClass("animationNone")) {
|
|
$("#" + DivID).removeClass("animationNone");
|
|
}
|
|
if ($("#" + DivCHID).hasClass("animationNone")) {
|
|
$("#" + DivCHID).removeClass("animationNone");
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|