Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/equipment/equipmentOverview.jsp
2026-01-16 14:13:44 +08:00

735 lines
26 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<!-- echarts-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/layui-v2.6.4/layui/css/layui.css"/>
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/font_currency/iconfont.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/layui-v2.6.4/layui/layui.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/equipment/main_equipment.js"
charset="utf-8"></script>
<!-- 引入daterangepicker-->
</head>
<body>
<div style="background-color: #EAEAEA" id="mainDiv">
<div id="subDiv"></div>
<div id="subDiv_view"></div>
<div id="subDiv_recordDetail"></div>
<div id="subDiv_contents"></div>
<div id="subDiv_workorder"></div>
<div id="subDiv_workorder_view"></div>
<input type="hidden" id="proPage" value="1">
<input type="hidden" id="levelPage" value="1">
<input type="hidden" id="classPage" value="1">
<input type="hidden" id="proId" value="">
<input type="hidden" id="levelId" value="">
<input type="hidden" id="classId" value="">
<div class="layui-row" style="height:100%;">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6" style="height:20%;">
<div class="insideDiv" style="padding-left: 10px;">
<div class="top_left">
<div style="width: 10%;height: 100%;float: left;font-weight: bold;">工艺区段:</span>
</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-success btn-xs" id="proAll"
onclick="choseProcess('proAll')">
不限
</button>
</div>
<div style="width: 80%;height: 100%;float: left;" id="process">
</div>
<div style="width: 5%;height: 100%;float: left;">
<span>
<a href="#" aria-label="Previous">
<span aria-hidden="true" onclick="proPage('previous');">&laquo;</span>
</a>
</span>
<span>
<a href="#" aria-label="Next">
<span aria-hidden="true" onclick="proPage('next');">&raquo;</span>
</a>
</span>
</div>
</div>
<div class="top_left">
<div style="width: 10%;height: 100%;float: left;font-weight: bold;">设备等级:</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-success btn-xs" id="levelAll"
onclick="choseLevel('levelAll');">不限
</button>
</div>
<div style="width: 80%;height: 100%;float: left;" id="level">
<%--<div style="width:16%;height:100%;float:left;color:#838393;cursor:pointer;">关键</div>
<div style="width:16%;height:100%;float:left;color:#838393;cursor:pointer;">重要</div>
<div style="width:16%;height:100%;float:left;color:#838393;cursor:pointer;">普通</div>--%>
</div>
<div style="width: 5%;height: 100%;float: left;">
<span>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</span>
<span>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</span>
</div>
</div>
<div class="top_left">
<div style="width: 10%;height: 100%;float: left;font-weight: bold;">设备类型:</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-success btn-xs" id="equclassAll"
onclick="choseEquipmentClass('equclassAll');">不限
</button>
</div>
<div style="width: 80%;height: 100%;float: left;" id="equClass">
</div>
<div style="width: 5%;height: 100%;float: left;">
<span>
<a href="#" aria-label="Previous">
<span aria-hidden="true" onclick="equclassPage('previous');">&laquo;</span>
</a>
</span>
<span>
<a href="#" aria-label="Next">
<span aria-hidden="true" onclick="equclassPage('next');">&raquo;</span>
</a>
</span>
</div>
</div>
<div class="top_left">
<%--<div style="width: 10%;height: 100%;float: left;font-weight: bold;">时间范围:</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-success btn-xs">不限</button>
</div>
<div style="width: 85%;height: 100%;float: left;">-</div>--%>
<div style="width: 1%;height: 100%;float: left;">
</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-primary btn-xs" onclick="search();">搜索</button>
</div>
<div style="width: 5%;height: 100%;float: left;">
<button type="button" class="btn btn-danger btn-xs" onclick="firstFun();">重置</button>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6" style="height:20%;">
<div class="insideDiv"
style="background-color: #ffffff;padding-left: 0px;border-top: 3px solid #eaeaea;border-left: 3px solid #eaeaea;border-bottom: 1px solid #eaeaea;">
<div style="width:100%;height:25%;padding: 5px 0px 0px 10px;border-bottom: 2px solid #eaeaea;">
<span class="titleStyle">设备关键KPI</span>
</div>
<div style="width:100%;height:75%;">
<div style="width:25%;height:100%;float:left;padding: 15px 8px 15px 8px;">
<div style="width:100%;height:100%;float:left;background-color: #66D99F;">
<div class="KPI_Left">
<div class="KPI_Img">
<span class="iconfont icon-shujuku1"
style="color: #ffffff;"></span>
</div>
<div class="KPI_Title">设备异常上报数 (个)</div>
</div>
<div style="margin-left: -15px;" class="KPI_Right" id="kpi_abnormity_num">
0
</div>
</div>
</div>
<div style="width:25%;height:100%;float:left;padding: 15px 8px 15px 8px;">
<div style="width:100%;height:100%;float:left;background-color: #3CA3E9;">
<div class="KPI_Left">
<div class="KPI_Img">
<span class="iconfont icon-baojing"
style="color: #ffffff;"></span>
</div>
<div class="KPI_Title">维修工单完成率 (%)</div>
</div>
<div style="margin-left: -15px;" class="KPI_Right" id="kpi_repair_completion_rate">
0
</div>
</div>
</div>
<div style="width:25%;height:100%;float:left;padding: 15px 8px 15px 8px;">
<div style="width:100%;height:100%;float:left;background-color: #66D97c;">
<div class="KPI_Left">
<div class="KPI_Img">
<span class="iconfont icon-lishijilu"
style="color: #ffffff;"></span>
</div>
<div class="KPI_Title">保养工单完成率 (%)</div>
</div>
<div style="margin-left: -15px;" class="KPI_Right" id="kpi_main_completion_rate">
0
</div>
</div>
</div>
<div style="width:25%;height:100%;float:left;padding: 15px 8px 15px 8px;">
<div style="width:100%;height:100%;float:left;background-color: #4260A1;">
<div class="KPI_Left">
<div class="KPI_Img">
<span class="iconfont icon-tingji"
style="color: #ffffff;"></span>
</div>
<div class="KPI_Title">设备完好率 (%)</div>
</div>
<div style="margin-left: -15px;" class="KPI_Right" id="kpi_intact_rate">
0
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md2" style="height:40%;">
<div class="insideDiv" style="padding: 0px 2px 0px 10px;">
<div style="width:100%;height:15%;border: 1px solid #eaeaea;padding: 10px 0px 0px 5px;background-color: #ffffff;">
<span class="titleStyle">设备总台套数</span>
</div>
<div style="width:100%;height:35%;border: 1px solid #eaeaea;background-color: #ffffff;">
<div style="width:50%;height:100%;float:left;padding: 35px 0px 0px 45px;">
<span class="iconfont icon-shebeiguanli4" style="color: #378dcc;font-size: 40px;"></span>
</div>
<div style="width:50%;height:100%;float:left;padding: 40px 0px 0px 30px;">
<span style="font-size: 32px;font-weight: bold;color: #428ECB;" id="allNum">0</span>
</div>
</div>
<div style="width:100%;height:15%;border: 1px solid #eaeaea;padding: 10px 0px 0px 5px;background-color: #ffffff;">
<span class="titleStyle">设备在用总台套数</span>
</div>
<div style="width:100%;height:35%;border: 1px solid #eaeaea;background-color: #ffffff;">
<div style="width:50%;height:100%;float:left;padding: 35px 0px 0px 45px;">
<span class="iconfont icon-shebei3" style="color: #378dcc;font-size: 40px;"></span>
</div>
<div style="width:50%;height:100%;float:left;padding: 40px 0px 0px 30px;">
<span style="font-size: 32px;font-weight: bold;color: #428ECB;" id="useNum">0</span>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md6" style="height:40%;">
<div class="insideDiv" style="padding: 0px 4px 0px 3px;">
<div style="width:100%;height:15%;color: #838393;padding:10px 10px 0px 10px;background-color: #ffffff;border-bottom: 2px solid #eaeaea;">
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;">
<span class="titleStyle" style="color: #EFA103;"
id="viewEchartTable2">维修统计</span>
</div>
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;">
<span class="titleStyle" style="color: #00CCCC;"
id="viewEchartTable3">养护计划</span>
</div>
</div>
<div style="width:100%;height:85%;background-color: #ffffff;">
<div style="width:100%;height:100%;float:left;" id="myChartsafe1"></div>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="height:40%;">
<div class="insideDiv" style="padding: 0px 0px 0px 0px;">
<div style="width:100%;height:15%;color: #838393;padding:10px 10px 0px 10px;background-color: #ffffff;border-bottom: 2px solid #eaeaea;">
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;color: #9E70C7;">
<span style="color: #9E70C7;" class="titleStyle">运行异常</span>
</div>
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;color: #47C1C8;">
<span style="color: #47C1C8;" class="titleStyle">设备异常</span>
</div>
</div>
<div style="width:100%;height:85%;background-color: #ffffff;">
<div style="width:100%;height:100%;float:right;background-color: #ffffff;" id="myChartsafe2"></div>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md4" style="height:40%;">
<div class="insideDiv" style="padding: 0px 4px 0px 4px;width:100%;height:100%;">
<div class="box-body" style="width:100%;height:100%;">
<div id='sandbox-container' style="width:100%;height:100%;">
<div></div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="height:40%;">
<div class="insideDiv" style="padding: 0px 4px 0px 0px;">
<div style="width:100%;height:15%;border-bottom: 2px solid #eaeaea;color: #838393;padding:12px 0px 0px 10px;background-color: #ffffff;">
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;">
<u class="titleStyle" style="color: #428ECB;cursor:pointer;" onclick="viewTableFun1('0')"
id="viewTable1">设备台账</u>
</div>
<div style="width:90px;float:left;font-size: 20px;font-weight: bold;">
<u class="titleStyle" style="color: #838393;cursor:pointer;" onclick="viewTableFun1('1')"
id="viewTable2">设备巡检</u>
</div>
</div>
<div style="width:100%;height:85%;background-color: #ffffff;">
<table id="table1" style="table-layout:fixed"></table>
</div>
</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="height:40%;">
<div class="insideDiv" style="background-color: #ffffff;">
<div style="width:100%;height:15%;border-bottom: 2px solid #eaeaea;color: #838393;padding:12px 0px 0px 10px;">
<div style="width:100px;float:left;font-size: 20px;font-weight: bold;color: #428ECB;">
<span class="titleStyle">设备维修</span>
</div>
</div>
<div style="width:100%;height:85%;">
<table id="table2" style="table-layout:fixed"></table>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
firstFun();
});
window.onresize = function () {
firstFun();
}
/**
* echart柱状图--双柱通用
*/
function echartColumnarnew1(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
$.ajax({
type: 'GET',
url: ext.contextPath + '/maintenance/abnormity/getAbnormity4Month.do?unitId=' + unitId,
async: true,
globle: false,
error: function () {
return false;
},
success: function (ALLdata) {
var data = eval('(' + ALLdata + ')');
// 基于准备好的dom初始化echarts实例
// var height = $(document).height() * 0.31;
// $("#" + echartId).height(height);
// var myChart = echarts.init(document.getElementById(id));
option = {
color: ['#c23531', '#2f4554'],
xAxis: {
type: 'category',
data: data.value
},
yAxis: {
type: 'value'
},
grid: {
top: '5%',
left: '1%',
right: '5%',
bottom: '3%',
containLabel: true
},
series: [
{
name: '维修',
color: '#EFA103',
data: data.value1,
type: 'bar'
},
{
name: '保养',
color: '#00CCCC',
data: data.value2,
type: 'bar'
}
],
};
myChart.clear();
myChart.setOption(option, true);
}
});
}
$('.markedDay').click(function (data) {
// console.log("data is ", data)
})
function echartColumnarnew12(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
$.ajax({
type: 'GET',
url: ext.contextPath + '/maintenance/abnormity/getAbnormity4Month2.do?unitId=' + unitId,
async: true,
globle: false,
error: function () {
return false;
},
success: function (ALLdata) {
var data = JSON.parse(ALLdata);
// console.log(data.value);
// console.log(data.value1);
// console.log(data.value2);
const color = ['#9E70C7', '#47C1C8'];
// 基于准备好的dom初始化echarts实例
// var height = $(document).height() * 0.31;
// $("#" + echartId).height(height);
// var myChart = echarts.init(document.getElementById(id));
option = {
xAxis: {
type: 'category',
data: data.value
},
yAxis: {
type: 'value'
},
grid: {
top: '5%',
left: '3%',
right: '5%',
bottom: '3%',
containLabel: true
},
series: [
{
name: '维修',
data: data.value1,
color: '#9E70C7',
type: 'bar'
},
{
name: '保养',
data: data.value2,
color: '#47C1C8',
type: 'bar'
}
],
};
myChart.clear();
myChart.setOption(option, true);
}
});
}
function firstFun() {
var height = $(window).height();
$('#mainDiv').css('height', height);//页面加载先给高度
//重置用
$('#proId').val('');
$('#levelId').val('');
$('#classId').val('');
//获取所有设备数量
getEquNum(unitId, 'all', 'allNum');
//获取在用设备数量
getEquNum(unitId, 'use2', 'useNum');
//KPI
// getfindDATA(unitId, 'Equipment_overview', 'kpi_abnormity_num');
// getfindDATA(unitId, 'Equipment_overview', 'kpi_main_completion_rate');
// getfindDATA(unitId, 'Equipment_overview', 'kpi_repair_completion_rate');
// getfindDATA(unitId, 'Equipment_overview', 'kpi_intact_rate');
getKpiCount1(unitId,'kpi_abnormity_num');
getKpiCount2(unitId,'kpi_repair_completion_rate');
getKpiCount3(unitId,'kpi_main_completion_rate');
getKpiCount4(unitId,'kpi_intact_rate');
//设备台账table
tableType1(unitId, '0', '2021-04-11');
//设备维修table
tableType3(unitId, '0', '2021-04-11');
//巡检异常统计
echartColumnarnew1(unitId, 'TH_03_FIT040001D_FLOW_C', 'myChartsafe1');
//设备故障统计
echartColumnarnew12(unitId, 'TH_03_FIT040001D_FLOW_C', 'myChartsafe2');
//初始化日历
initializeCalendar();
//获取工艺段
getProcessSection(unitId);
//获取ABC重要等级
getLevel();
//获取设备类型
getEquipmentClass();
//重置用
document.getElementById('proAll').className = 'btn btn-success btn-xs';
document.getElementById('levelAll').className = 'btn btn-success btn-xs';
document.getElementById('equclassAll').className = 'btn btn-success btn-xs';
}
</script>
<style>
/*body {*/
/* -webkit-text-size-adjust: none;*/
/*}*/
/*
内部div
*/
.insideDiv {
height: 98%;
/*border: 1px solid red;*/
}
/*
标题样式
*/
.titleStyle {
font-size: 20px;
font-weight: bold;
color: #428ECB;
}
/*
日历样式
*/
.datepicker-inline {
width: 100%;
height: 100%;
}
.datepicker > div {
height: 100%;
}
.box-body {
padding: 0px 2px 5px 5px;
}
.datepicker-inline .datepicker-days > table {
width: 100%;
height: 100%;
}
/*
KPI左边
*/
.KPI_Left {
width: 50%;
height: 100%;
float: left;
overflow: hidden;
}
/*
KPI右边
*/
.KPI_Right {
width: 50%;
height: 100%;
float: left;
padding: 30px 0px 0px 30px;
font-weight: bold;
color: #195627;
}
/*
KPI图标
*/
.KPI_Img {
width: 100%;
height: 50%;
float: left;
}
/*
KPI名称
*/
.KPI_Title {
width: 100%;
height: 50%;
float: left;
font-size: 16px;
color: #ffffff;
}
.top_left {
width: 100%;
height: 25%;
border-bottom: 1px solid #eaeaea;
border-top: 3px solid #eaeaea;
background-color: #ffffff;
padding-top: 10px;
text-align: center;
font-size: 12px;
}
@media (min-width: 768px) {
.KPI_Title {
/*color: pink;*/
font-size: 2px;
}
.titleStyle {
font-size: 16px;
}
.KPI_Right {
font-size: 12px;
padding: 10px 0px 0px 20px;
}
.icon-shujuku1 {
font-size: 15px;
}
.icon-baojing {
font-size: 15px;
}
.icon-lishijilu {
font-size: 15px;
}
.icon-tingji {
font-size: 15px;
}
}
@media (min-width: 992px) {
.KPI_Title {
/*color: blue;*/
font-size: 14px;
}
.titleStyle {
font-size: 16px;
}
.KPI_Right {
font-size: 17px;
padding: 10px 0px 0px 20px;
}
.icon-shujuku1 {
font-size: 25px;
}
.icon-baojing {
font-size: 25px;
}
.icon-lishijilu {
font-size: 25px;
}
.icon-tingji {
font-size: 25px;
}
}
@media (min-width: 1200px) {
.KPI_Title {
/*color: yellow;*/
font-size: 18px;
}
.titleStyle {
font-size: 18px;
}
.KPI_Right {
font-size: 27px;
padding: 10px 0px 0px 20px;
}
.icon-shujuku1 {
font-size: 25px;
}
.icon-baojing {
font-size: 25px;
}
.icon-lishijilu {
font-size: 25px;
}
.icon-tingji {
font-size: 25px;
}
.top_left {
padding-top: 5px;
font-size: 14px;
}
}
@media (min-width: 1400px) {
.KPI_Title {
/*color: red;*/
font-size: 18px;
}
.titleStyle {
font-size: 18px;
}
.KPI_Right {
font-size: 36px;
padding: 15px 0px 0px 15px;
}
.icon-shujuku1 {
font-size: 40px;
}
.icon-baojing {
font-size: 40px;
}
.icon-lishijilu {
font-size: 40px;
}
.icon-tingji {
font-size: 40px;
}
.top_left {
padding-top: 8px;
font-size: 14px;
}
}
.markedDay {
background-color: #FFC1E0;
}
</style>
</body>
</html>