2022-10-21 10:49:46 +08:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>@ViewBag.ProjectName-普热斯勒出品</title>
|
|
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
|
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
|
<meta name="format-detection" content="telephone=no">
|
|
|
|
|
|
<link rel="stylesheet" href="~/lib/layui/css/layui.css" media="all">
|
|
|
|
|
|
<link rel="icon" href="@ViewBag.LogoIcon">
|
|
|
|
|
|
<script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="/css/smartscreen.css">
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
window.onload = function () {
|
|
|
|
|
|
$(".loading").fadeOut()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**rem参数基准**/
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
var whei = $(window).width()
|
|
|
|
|
|
$("html").css({ fontSize: whei / 20 })
|
|
|
|
|
|
$(window).resize(function () {
|
|
|
|
|
|
var whei = $(window).width()
|
|
|
|
|
|
$("html").css({ fontSize: whei / 20 })
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="loading">
|
|
|
|
|
|
<div class="loadbox"><img src="/picture/loading.gif"> 页面加载中...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="head">
|
2022-10-21 15:00:44 +08:00
|
|
|
|
<h1 onclick="openSetting()">@ViewBag.BoardName-水之云出品</h1>
|
2022-10-21 10:49:46 +08:00
|
|
|
|
<div class="weather"><span id="showTime"></span></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layuimini-site-mobile">
|
|
|
|
|
|
<btn class="layui-btn layui-btn-danger" onclick="loginOut()"><i class="layui-icon"></i></btn>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mainbox">
|
|
|
|
|
|
<div class="layui-row">
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="boxall">
|
|
|
|
|
|
<div class="alltitle">工单作业</div>
|
|
|
|
|
|
<div class="allnav" id="echart1"></div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="boxall">
|
|
|
|
|
|
<div class="alltitle">产出产品</div>
|
|
|
|
|
|
<div class="allnav" id="echart4"></div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="bar">
|
|
|
|
|
|
<div class="barbox">
|
|
|
|
|
|
<ul class="clearfix">
|
|
|
|
|
|
<li class="pulll_left counter" id="allPlanNum"></li>
|
|
|
|
|
|
<li class="pulll_left counter" id="allDoneNum"></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="barbox2">
|
|
|
|
|
|
<ul class="clearfix">
|
|
|
|
|
|
<li class="pulll_left">计划产量</li>
|
|
|
|
|
|
<li class="pulll_left">实际产量</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="map">
|
|
|
|
|
|
<div class="map1"><img src="/picture/lbx.png"></div>
|
|
|
|
|
|
<div class="map2"><img src="/picture/jt.png"></div>
|
|
|
|
|
|
<div class="map3"><img src="/picture/map.png"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="boxall">
|
|
|
|
|
|
<div class="alltitle">产出不良率</div>
|
|
|
|
|
|
<div class="allnav" id="echart2"></div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="boxall">
|
|
|
|
|
|
<div class="alltitle">设备产能</div>
|
|
|
|
|
|
<div class="allnav" id="echart"></div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-row">
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="boxall">
|
2022-10-21 15:00:44 +08:00
|
|
|
|
<div class="alltitle">区域:冲压</div>
|
2022-10-21 10:49:46 +08:00
|
|
|
|
<div class="allnav">
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">计划产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="hotPlanNum">78888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">实际产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="hotRealNum">88888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">合格率</p>
|
|
|
|
|
|
<p class="textboxnav" id="hotPassRate">98%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">完成率</p>
|
|
|
|
|
|
<p class="textboxnav" id="hotFinishRate">80%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="boxall">
|
|
|
|
|
|
<div class="alltitle">区域:点焊</div>
|
|
|
|
|
|
<div class="allnav">
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">计划产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="weldPlanNum">78888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">实际产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="weldRealNum">88888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">合格率</p>
|
|
|
|
|
|
<p class="textboxnav" id="weldPassRate">98%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">完成率</p>
|
|
|
|
|
|
<p class="textboxnav" id="weldFinishRate">80%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-md4">
|
|
|
|
|
|
<div class="boxall">
|
2022-10-21 15:00:44 +08:00
|
|
|
|
<div class="alltitle">区域:切割</div>
|
2022-10-21 10:49:46 +08:00
|
|
|
|
<div class="allnav">
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">计划产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="laserPlanNum">78888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">实际产量</p>
|
|
|
|
|
|
<p class="textboxnav" id="laserRealNum">88888</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="textbox">
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">合格率</p>
|
|
|
|
|
|
<p class="textboxnav" id="laserPassRate">98%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="half">
|
|
|
|
|
|
<p class="textboxheader">完成率</p>
|
|
|
|
|
|
<p class="textboxnav" id="laserFinishRate">80%</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="boxfoot"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="back"></div>
|
|
|
|
|
|
<script src="~/lib/layui/layui.js" charset="utf-8"></script>
|
|
|
|
|
|
<script src="~/js/lay-config.js?v=@WaterCloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
|
|
|
|
|
<script src="~/js/framework-ui.js?v=@WaterCloud.Code.GlobalContext.GetVersion()"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var t = null;
|
|
|
|
|
|
var type = !$.request("type") ? 0 : $.request("type");
|
|
|
|
|
|
if (type == 0) {
|
|
|
|
|
|
$(".layuimini-site-mobile").remove();
|
|
|
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
|
|
|
var data = JSON.parse(localStorage.getItem("WC_BoardList"));
|
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
console.log("定时器调用");
|
|
|
|
|
|
getData();
|
|
|
|
|
|
}, 0)
|
|
|
|
|
|
}, data.refleshSecond * 1000);
|
|
|
|
|
|
if (data.viewType == "true" && data.viewList.length > 1) {
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
|
for (var i = 0; i < data.viewList.length; i++) {
|
|
|
|
|
|
if (window.location.href.indexOf(data.viewList[i]) > -1) {
|
|
|
|
|
|
var k = i + 1;
|
|
|
|
|
|
var href = k == data.viewList.length ? data.viewList[0] : data.viewList[k];
|
|
|
|
|
|
window.location.href = href.indexOf("?") != -1 ? href + "&type=" + type : href + "?type=" + type;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}, data.skipSecond * 1000);//開始运行
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
var fontSize = '16';
|
|
|
|
|
|
var color = ['#F35331', '#2499F8', '#3DF098', '#33B734'];
|
|
|
|
|
|
var yearPlanData = [];
|
|
|
|
|
|
var yearRealData = [];
|
|
|
|
|
|
var passRatesData = [];
|
|
|
|
|
|
var badRatesData = [];
|
|
|
|
|
|
var outProductData = [];
|
|
|
|
|
|
var outProductNumData = [];
|
|
|
|
|
|
var xAxisData = [];
|
|
|
|
|
|
var hotData = {};
|
|
|
|
|
|
var weldData = {};
|
|
|
|
|
|
var laserData = {};
|
|
|
|
|
|
t = setTimeout(time, 1000);//開始运行
|
|
|
|
|
|
function time() {
|
|
|
|
|
|
clearTimeout(t);//清除定时器
|
|
|
|
|
|
dt = new Date();
|
|
|
|
|
|
var week;
|
|
|
|
|
|
switch (dt.getDay()) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
week = "星期一";
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
week = "星期二";
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
week = "星期三";
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 4:
|
|
|
|
|
|
week = "星期四";
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 5:
|
|
|
|
|
|
week = "星期五";
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 6:
|
|
|
|
|
|
week = "星期六";
|
|
|
|
|
|
break;
|
|
|
|
|
|
default:
|
|
|
|
|
|
week = "星期天";
|
|
|
|
|
|
}
|
|
|
|
|
|
var y = dt.getFullYear();
|
|
|
|
|
|
var mt = dt.getMonth() + 1;
|
|
|
|
|
|
var day = dt.getDate();
|
|
|
|
|
|
var h = dt.getHours();//获取时
|
|
|
|
|
|
var m = dt.getMinutes();//获取分
|
|
|
|
|
|
var s = dt.getSeconds();//获取秒
|
|
|
|
|
|
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日 " + h + "时" + m + "分" + s + "秒 " + week;
|
|
|
|
|
|
t = setTimeout(time, 1000); //设定定时器，循环运行
|
|
|
|
|
|
}
|
|
|
|
|
|
function openSetting() {
|
|
|
|
|
|
if (type == 1) {
|
|
|
|
|
|
layui.use(['jquery', 'common'], function () {
|
|
|
|
|
|
var $ = layui.jquery,
|
|
|
|
|
|
common = layui.common;
|
|
|
|
|
|
common.modalOpen({
|
|
|
|
|
|
title: "看板配置",
|
|
|
|
|
|
url: "/BoardHome/BoardSetting?type=" + type,
|
|
|
|
|
|
width: "600px",
|
|
|
|
|
|
height: "550px",
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function loginOut() {
|
|
|
|
|
|
layui.use(['jquery', 'common'], function () {
|
|
|
|
|
|
var $ = layui.jquery,
|
|
|
|
|
|
common = layui.common;
|
|
|
|
|
|
common.modalConfirm("注：您确定要退出登录吗？", function (r) {
|
|
|
|
|
|
if (r) {
|
|
|
|
|
|
localStorage.removeItem("currentBoard");
|
|
|
|
|
|
window.location.href = '../../BoardLogin/OutLogin';
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function orderPlanStatus() {
|
|
|
|
|
|
layui.use(['echarts'], function () {
|
|
|
|
|
|
var echarts = layui.echarts;
|
|
|
|
|
|
myChart = echarts.init(document.getElementById('echart1'));
|
|
|
|
|
|
option = {
|
|
|
|
|
|
title: { show: false },
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: fontSize
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
top: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#B7E2FF',
|
|
|
|
|
|
fontSize: '16',
|
|
|
|
|
|
fontFamily: '微软雅黑'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['计划生产', '实际生产']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.1)",
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
type: "solid"
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 15,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.6)",
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xAxisData
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
inverse: false,
|
|
|
|
|
|
splitArea: { show: false },
|
|
|
|
|
|
axisLine: { show: false },
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#B7E1FF',
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
fontFamily: 'Arial',
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#09F'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '20',
|
|
|
|
|
|
top: '30',
|
|
|
|
|
|
right: '20',
|
|
|
|
|
|
bottom: '10',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: '计划生产',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
|
color: color[1],
|
|
|
|
|
|
data: yearPlanData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '实际生产',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
|
color: '#F90',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
width: 2
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: yearRealData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function badMaterialStatus() {
|
|
|
|
|
|
layui.use(['echarts'], function () {
|
|
|
|
|
|
var echarts = layui.echarts;
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('echart2'));
|
|
|
|
|
|
option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#dddc6b'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
top: '0%',
|
|
|
|
|
|
data: ['良率', '不良率'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.5)',
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '20',
|
|
|
|
|
|
top: '30',
|
|
|
|
|
|
right: '20',
|
|
|
|
|
|
bottom: '10',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.1)",
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
type: "solid"
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 15,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.6)",
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xAxisData
|
|
|
|
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
axisPointer: { show: false },
|
|
|
|
|
|
axisLine: { show: false },
|
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
|
offset: 20,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
yAxis: [{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.1)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.6)",
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.1)'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '良率',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#0184d5',
|
|
|
|
|
|
width: 2
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(1, 132, 213, 0.4)'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
|
color: 'rgba(1, 132, 213, 0.1)'
|
|
|
|
|
|
}], false),
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#0184d5',
|
|
|
|
|
|
borderColor: 'rgba(221, 220, 107, .1)',
|
|
|
|
|
|
borderWidth: 12
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: passRatesData
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '不良率',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#00d887',
|
|
|
|
|
|
width: 2
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(0, 216, 135, 0.4)'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
|
color: 'rgba(0, 216, 135, 0.1)'
|
|
|
|
|
|
}], false),
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#00d887',
|
|
|
|
|
|
borderColor: 'rgba(221, 220, 107, .1)',
|
|
|
|
|
|
borderWidth: 12
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: badRatesData
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function eqpUseStatus() {
|
|
|
|
|
|
layui.use(['echarts'], function () {
|
|
|
|
|
|
var echarts = layui.echarts;
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('echart'));
|
|
|
|
|
|
var dataStyle = {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
//shadowBlur: 40,
|
|
|
|
|
|
//shadowColor: 'rgba(40, 40, 40, 1)',
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
var placeHolderStyle = {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.05)',
|
|
|
|
|
|
label: { show: false, },
|
|
|
|
|
|
labelLine: { show: false }
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
option = {
|
|
|
|
|
|
color: color,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
formatter: "{a} : {c} "
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
itemWidth: 10,
|
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
|
itemGap: 12,
|
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
|
|
2022-10-29 22:04:50 +08:00
|
|
|
|
data: ['冲压', '切割', '点焊'],
|
2022-10-21 10:49:46 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.6)',
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
2022-10-29 22:04:50 +08:00
|
|
|
|
name: '冲压',
|
2022-10-21 10:49:46 +08:00
|
|
|
|
type: 'pie',
|
|
|
|
|
|
clockWise: false,
|
|
|
|
|
|
center: ['50%', '42%'],
|
|
|
|
|
|
radius: ['59%', '70%'],
|
|
|
|
|
|
itemStyle: dataStyle,
|
|
|
|
|
|
hoverAnimation: false,
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
value: hotData.hotFinishRate,
|
|
|
|
|
|
name: '01'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
value: 100 - Number(hotData.hotFinishRate),
|
|
|
|
|
|
name: 'invisible',
|
|
|
|
|
|
tooltip: { show: false },
|
|
|
|
|
|
itemStyle: placeHolderStyle
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-10-29 22:04:50 +08:00
|
|
|
|
name: '切割',
|
2022-10-21 10:49:46 +08:00
|
|
|
|
type: 'pie',
|
|
|
|
|
|
clockWise: false,
|
|
|
|
|
|
center: ['50%', '42%'],
|
|
|
|
|
|
radius: ['49%', '60%'],
|
|
|
|
|
|
itemStyle: dataStyle,
|
|
|
|
|
|
hoverAnimation: false,
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
value: weldData.weldFinishRate,
|
|
|
|
|
|
name: '02'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
value: 100 - Number(weldData.weldFinishRate),
|
|
|
|
|
|
name: 'invisible',
|
|
|
|
|
|
tooltip: { show: false },
|
|
|
|
|
|
itemStyle: placeHolderStyle
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '点焊',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
clockWise: false,
|
|
|
|
|
|
hoverAnimation: false,
|
|
|
|
|
|
center: ['50%', '42%'],
|
|
|
|
|
|
radius: ['39%', '50%'],
|
|
|
|
|
|
itemStyle: dataStyle,
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
value: laserData.laserFinishRate,
|
|
|
|
|
|
name: '03'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
value: 100 - Number(laserData.laserFinishRate),
|
|
|
|
|
|
name: 'invisible',
|
|
|
|
|
|
tooltip: { show: false },
|
|
|
|
|
|
itemStyle: placeHolderStyle
|
|
|
|
|
|
}]
|
|
|
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function outMaterialStatus() {
|
|
|
|
|
|
layui.use(['echarts'], function () {
|
|
|
|
|
|
var echarts = layui.echarts;
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('echart4'));
|
|
|
|
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '20',
|
|
|
|
|
|
top: '10',
|
|
|
|
|
|
right: '20',
|
|
|
|
|
|
bottom: '10',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
splitLine: { show: false },
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.1)",
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
type: "solid"
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
rotate:50,
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 15,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.6)",
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
inverse: true,
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: outProductData,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.1)",
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
type: "solid"
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 15,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255,255,255,.6)",
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '产品畅销',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: outProductNumData,
|
|
|
|
|
|
barWidth: '35%', //柱子宽度
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#27d08a',
|
|
|
|
|
|
opacity: 1,
|
|
|
|
|
|
barBorderRadius: 5,
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function getData() {
|
|
|
|
|
|
yearPlanData = [];
|
|
|
|
|
|
yearRealData = [];
|
|
|
|
|
|
passRatesData = [];
|
|
|
|
|
|
badRatesData = [];
|
|
|
|
|
|
outProductData = [];
|
|
|
|
|
|
outProductNumData = [];
|
|
|
|
|
|
xAxisData = [];
|
|
|
|
|
|
var allPlanNum = 0;
|
|
|
|
|
|
var allDoneNum = 0;
|
|
|
|
|
|
hotData = {};
|
|
|
|
|
|
weldData = {};
|
|
|
|
|
|
laserData = {};
|
|
|
|
|
|
layui.use(['jquery', 'common'], function () {
|
|
|
|
|
|
var $ = layui.jquery,
|
|
|
|
|
|
common = layui.common;
|
|
|
|
|
|
common.ajax({
|
|
|
|
|
|
url: '/RunMonitor/SmartScreen/GetBoardDataJson',
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
async: false,
|
|
|
|
|
|
success: function (data) {
|
|
|
|
|
|
for (var x in data.plans) {
|
|
|
|
|
|
xAxisData.push(x);
|
|
|
|
|
|
yearPlanData.push(data.plans[x]);
|
|
|
|
|
|
allPlanNum += Number(data.plans[x]);
|
|
|
|
|
|
}
|
|
|
|
|
|
for (var x in data.reals) {
|
|
|
|
|
|
yearRealData.push(data.reals[x]);
|
|
|
|
|
|
allDoneNum += Number(data.reals[x]);
|
|
|
|
|
|
}
|
|
|
|
|
|
for (var x in data.passRates) {
|
|
|
|
|
|
passRatesData.push(data.passRates[x]);
|
|
|
|
|
|
badRatesData.push(100 - Number(data.passRates[x]));
|
|
|
|
|
|
}
|
|
|
|
|
|
for (var x in data.outProducts) {
|
|
|
|
|
|
outProductData.push(x);
|
|
|
|
|
|
outProductNumData.push(data.outProducts[x]);
|
|
|
|
|
|
}
|
|
|
|
|
|
$('#allPlanNum').html(allPlanNum);
|
|
|
|
|
|
$('#allDoneNum').html(allDoneNum);
|
|
|
|
|
|
hotData = data.hot;
|
|
|
|
|
|
weldData = data.weld;
|
|
|
|
|
|
laserData = data.laser;
|
|
|
|
|
|
$('#hotPlanNum').html(hotData.hotPlanNum);
|
|
|
|
|
|
$('#hotRealNum').html(hotData.hotRealNum);
|
|
|
|
|
|
$('#hotPassRate').html(!hotData.hotPassRate ? '0%' : hotData.hotPassRate+'%');
|
|
|
|
|
|
$('#hotFinishRate').html(!hotData.hotFinishRate ? '0%' : hotData.hotFinishRate + '%');
|
|
|
|
|
|
$('#weldPlanNum').html(weldData.weldPlanNum);
|
|
|
|
|
|
$('#weldRealNum').html(weldData.weldRealNum);
|
|
|
|
|
|
$('#weldPassRate').html(!weldData.weldPassRate ? '0%' : weldData.weldPassRate + '%');
|
|
|
|
|
|
$('#weldFinishRate').html(!weldData.weldFinishRate ? '0%' : weldData.weldFinishRate + '%');
|
|
|
|
|
|
$('#laserPlanNum').html(laserData.laserPlanNum);
|
|
|
|
|
|
$('#laserRealNum').html(laserData.laserRealNum);
|
|
|
|
|
|
$('#laserPassRate').html(!laserData.laserPassRate ? '0%' : laserData.laserPassRate + '%');
|
|
|
|
|
|
$('#laserFinishRate').html(!laserData.laserFinishRate ? '0%' : laserData.laserFinishRate + '%');
|
|
|
|
|
|
reloadData();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function reloadData() {
|
|
|
|
|
|
orderPlanStatus();
|
|
|
|
|
|
badMaterialStatus();
|
|
|
|
|
|
outMaterialStatus();
|
|
|
|
|
|
eqpUseStatus();
|
|
|
|
|
|
}
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
getData();
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
