1196 lines
44 KiB
Plaintext
1196 lines
44 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
|
||
<%@page import="com.sipai.entity.scada.ScadaAlarm"%>
|
||
<%@page import="com.sipai.entity.work.ScadaPic_Txt"%>
|
||
<%@page import="com.sipai.entity.work.ScadaPic"%>
|
||
<%@page import="com.sipai.entity.equipment.EquipmentCard"%>
|
||
<%@page import="com.sipai.entity.maintenance.MaintenanceDetail"%>
|
||
<%@page import="com.sipai.entity.maintenance.MaintenanceCommString"%>
|
||
<%@page import="com.sipai.entity.work.KPIPointProfessor"%>
|
||
<%@page import="com.sipai.entity.work.ProAlarm"%>
|
||
|
||
<% request.setAttribute("Type_scadapic_ps", ScadaPic.Type_scadapic_ps); %>
|
||
<% request.setAttribute("Status_N", ProAlarm.Status_N); %>
|
||
<% request.setAttribute("Status_C", ProAlarm.Status_C); %>
|
||
<% request.setAttribute("Status_Y", ProAlarm.Status_Y); %>
|
||
|
||
<%@page import="java.util.Date"%>
|
||
<%@page import="java.text.SimpleDateFormat"%>
|
||
<%@ page import="com.sipai.tools.SessionManager"%>
|
||
<%
|
||
SessionManager sessionManager = new SessionManager();
|
||
%>
|
||
<%
|
||
request.setAttribute("Flag_Txt", ScadaPic_Txt.Flag_Txt);
|
||
%>
|
||
<%
|
||
request.setAttribute("Flag_MPoint", ScadaPic_Txt.Flag_MPoint);
|
||
%>
|
||
<%
|
||
request.setAttribute("Flag_EM", ScadaPic_Txt.Flag_EM);
|
||
%>
|
||
<%
|
||
request.setAttribute("Flag_PS", ScadaPic_Txt.Flag_PS);
|
||
%>
|
||
|
||
<%
|
||
request.setAttribute("Type_Prime", ScadaPic_Txt.Type_Prime);
|
||
%>
|
||
<%
|
||
request.setAttribute("Type_Detail", ScadaPic_Txt.Type_Detail);
|
||
%>
|
||
|
||
<%
|
||
request.setAttribute("Status_Start", MaintenanceDetail.Status_Start);
|
||
%>
|
||
<%
|
||
request.setAttribute("Status_Finish",
|
||
MaintenanceDetail.Status_Finish);
|
||
%>
|
||
|
||
<%
|
||
request.setAttribute("MAINTENANCE_TYPE_REPAIR",
|
||
MaintenanceCommString.MAINTENANCE_TYPE_REPAIR);
|
||
%>
|
||
|
||
<%request.setAttribute("Status_OFF", EquipmentCard.Status_OFF); %>
|
||
<%request.setAttribute("Status_ON", EquipmentCard.Status_ON); %>
|
||
<%request.setAttribute("Status_Fault", EquipmentCard.Status_Fault); %>
|
||
<%request.setAttribute("Status_Transfer", EquipmentCard.Status_Transfer); %>
|
||
<%request.setAttribute("Status_Scrap", EquipmentCard.Status_Scrap); %>
|
||
<%request.setAttribute("Status_STOP", EquipmentCard.Status_STOP); %>
|
||
|
||
<%
|
||
request.setAttribute("Type_scadapic_brief",
|
||
ScadaPic.Type_scadapic_brief);
|
||
%>
|
||
<%
|
||
request.setAttribute("Type_scadapic_detail",
|
||
ScadaPic.Type_scadapic_detail);
|
||
%>
|
||
<%
|
||
request.setAttribute("STATUS_ALARM", ScadaAlarm.STATUS_ALARM);
|
||
%>
|
||
<%
|
||
request.setAttribute("STATUS_ALARM_CONFIRM", ScadaAlarm.STATUS_ALARM_CONFIRM);
|
||
%>
|
||
<%
|
||
request.setAttribute("STATUS_ALARM_RECOVER", ScadaAlarm.STATUS_ALARM_RECOVER);
|
||
%>
|
||
|
||
<%
|
||
request.setAttribute("Flag_Yes", KPIPointProfessor.Flag_Yes);
|
||
%>
|
||
<%
|
||
request.setAttribute("Flag_No", KPIPointProfessor.Flag_No);
|
||
%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet"
|
||
href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css" />
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
<style>
|
||
.box-top {
|
||
height: 625px;
|
||
padding: 10px ;
|
||
}
|
||
.box-bottom {
|
||
height: 330px;
|
||
padding: 10px ;
|
||
}
|
||
.box-top>.box-body>.row{
|
||
height:25%;
|
||
}
|
||
.box-top>.box-body>.row>.col-md-12{
|
||
height:100%;
|
||
}
|
||
.box-bottom>.box-body>.row,.box-bottom>.box-body>.row>.col-md-12{
|
||
height:100%;
|
||
background: #e3ecff;
|
||
}
|
||
.box-right {
|
||
height: 975px;
|
||
padding: 10px ;
|
||
}
|
||
.box.box-white {
|
||
border-top: 0;
|
||
}
|
||
.nowdt{
|
||
font-size: 12px;
|
||
font-weight:600;
|
||
color:#EFA103;
|
||
}
|
||
.table>tbody>tr>td{
|
||
vertical-align: middle;
|
||
}
|
||
.box-header .box-title{
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei
|
||
}
|
||
|
||
.box.box-white .box-border{
|
||
padding:0 10px;
|
||
}
|
||
.box.box-white .box-border >.box-border-left{
|
||
width: 50px;
|
||
height: 4px;
|
||
background: #c4e2e6;
|
||
border-radius: 4px;
|
||
float:left;
|
||
}
|
||
.box.box-white .box-border >.box-border-right{
|
||
width: calc(100% - 50px);
|
||
height: 3px;
|
||
border-bottom: 2px solid #f6f7fa;
|
||
border-radius: 4px;
|
||
float:right;
|
||
}
|
||
|
||
.dl-horizontal{
|
||
margin-top:10px;
|
||
}
|
||
.dl-horizontal>dt{
|
||
font-weight:initial;
|
||
text-align: right;
|
||
width: 120px;
|
||
height: 20px;
|
||
margin-bottom:8px;
|
||
}
|
||
.dl-horizontal>dd{
|
||
margin-left: 120px;
|
||
height: 20px;
|
||
text-align: left;
|
||
margin-bottom:8px;
|
||
}
|
||
.font-blue{
|
||
color: #1890FF;
|
||
}
|
||
.font-red{
|
||
color: #F55945;
|
||
}
|
||
.font-yellow{
|
||
color: #efa103;
|
||
}
|
||
.lable-right{
|
||
font-size: 15px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 550;
|
||
color: #1d1e1f;
|
||
line-height: 20px;
|
||
}
|
||
.lable-left{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #68696b;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.lable-black{
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #121212;
|
||
line-height: 21px;
|
||
letter-spacing: 0px;
|
||
}
|
||
.lable-green{
|
||
font-size: 50px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #00cccc;
|
||
line-height: 72px;
|
||
}
|
||
|
||
.lable-green-small{
|
||
font-size: 30px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #00cccc;
|
||
line-height: 42px;
|
||
}
|
||
.select-blue{
|
||
border: 1px solid #3e99e8;
|
||
border-radius: 4px;
|
||
color: #3e99e8;
|
||
padding:5px 10px;
|
||
height:30px;
|
||
}
|
||
.select-blue{
|
||
border: 1px solid #3e99e8;
|
||
border-radius: 4px;
|
||
color: #3e99e8;
|
||
padding:0px 5px;
|
||
height:25px;
|
||
}
|
||
.well-xs{
|
||
padding: 5px;
|
||
}
|
||
.well-xs>label{
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.fa-long-arrow-up{
|
||
color:#EC4747;
|
||
}
|
||
.fa-long-arrow-down{
|
||
color:#1790FF;
|
||
}
|
||
.fa-check{
|
||
color:#28A3CF;
|
||
}
|
||
.fa-line-chart{
|
||
color:#EFA103;
|
||
}
|
||
|
||
.tab-content{
|
||
height:88%;
|
||
}
|
||
.tab-pane{
|
||
height:100%;
|
||
}
|
||
.input-xs{
|
||
height: 22px;
|
||
line-height: 22px;
|
||
padding: 1px;
|
||
}
|
||
.table .label{
|
||
margin-right:5px;
|
||
}
|
||
.dl-horizontal{
|
||
height:20%;
|
||
margin-bottom: 10px;
|
||
}
|
||
.handle-title{
|
||
height:5%;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight:600;
|
||
text-align: center;
|
||
line-height: 21px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.monitor{
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 5px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var companyId = "";
|
||
var processSectionId = "";//底图id
|
||
var processid ="";//工艺段id
|
||
var selectionIds = []; //保存选中ids
|
||
var addFun = function() {
|
||
$.post(ext.contextPath + '/work/mpoint/add.do', {} , function(data) {
|
||
$("#subDiv").html(data);
|
||
openModal('subModal');
|
||
});
|
||
};
|
||
var editFun = function(id) {
|
||
$.post(ext.contextPath + '/work/mpoint/edit.do', {id:id} , function(data) {
|
||
$("#subDiv").html(data);
|
||
openModal('subModal');
|
||
});
|
||
};
|
||
var deleteFun = function(id) {
|
||
swal({
|
||
text: "您确定要删除此记录？",
|
||
dangerMode: true,
|
||
buttons: {
|
||
cancel: {
|
||
text: "取消",
|
||
value: null,
|
||
visible: true,
|
||
className: "btn btn-default btn-sm",
|
||
closeModal: true,
|
||
},
|
||
confirm: {
|
||
text: "确定",
|
||
value: true,
|
||
visible: true,
|
||
className: "btn btn-danger btn-sm",
|
||
closeModal: true
|
||
}
|
||
}
|
||
})
|
||
.then(willDelete => {
|
||
if (willDelete) {
|
||
$.post(ext.contextPath + '/work/group/delete.do', {id : id}, function(data) {
|
||
if(data==1){
|
||
$("#table").bootstrapTable('refresh');
|
||
}else{
|
||
showAlert('d','删除失败','mainAlertdiv');
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
};
|
||
var deletesFun = function() {
|
||
var checkedItems = $("#table").bootstrapTable('getSelections');
|
||
var datas="";
|
||
$.each(checkedItems, function(index, item){
|
||
datas+=item.id+",";
|
||
});
|
||
if(datas==""){
|
||
showAlert('d','请先选择记录','mainAlertdiv');
|
||
}else{
|
||
swal({
|
||
text: "您确定要删除此记录？",
|
||
dangerMode: true,
|
||
buttons: {
|
||
cancel: {
|
||
text: "取消",
|
||
value: null,
|
||
visible: true,
|
||
className: "btn btn-default btn-sm",
|
||
closeModal: true,
|
||
},
|
||
confirm: {
|
||
text: "确定",
|
||
value: true,
|
||
visible: true,
|
||
className: "btn btn-danger btn-sm",
|
||
closeModal: true
|
||
}
|
||
}
|
||
})
|
||
.then(willDelete => {
|
||
if (willDelete) {
|
||
$.post(ext.contextPath + '/work/group/deletes.do', {ids:datas} , function(data) {
|
||
if(data>0){
|
||
$("#table").bootstrapTable('refresh');
|
||
}else{
|
||
showAlert('d','删除失败','mainAlertdiv');
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
}
|
||
};
|
||
var init = function() {
|
||
$.post(ext.contextPath + '/work/group/getListForSelect.do', {} , function(data) {
|
||
//console.info(data)
|
||
if(data.length>0){
|
||
for(var i=0;i<data.length;i++){
|
||
$("#search_code").append("<option value='"+data[i].id+"'>"+data[i].text+"</option>");
|
||
}
|
||
}
|
||
},'json');
|
||
|
||
};
|
||
var dosearch = function() {
|
||
$("#table").bootstrapTable('refresh');
|
||
};
|
||
//巡检情况
|
||
function doInspection(id,value,colorNum){
|
||
const colorList = [ '#0988FF','#EFA103', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
||
var othVal = 100 - value;
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: value+'%',
|
||
x: 'center',
|
||
y: '30%',
|
||
textStyle: {
|
||
fontSize: '19',
|
||
fontWeight: 600,
|
||
color: '#000000',
|
||
},
|
||
},
|
||
color: ['#F6F8F9'],
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '80%'],
|
||
center: ['50%', '40%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: value,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList[colorNum],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal
|
||
}]
|
||
}]
|
||
}
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
//临时任务
|
||
function doTable(id,size){
|
||
if(size==null || size==undefined){
|
||
size = 10;
|
||
}
|
||
var height = $("#"+id).parent().height();
|
||
$("#"+id).bootstrapTable({
|
||
//url:"",
|
||
height:height,
|
||
striped: false, //是否显示行间隔色
|
||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
||
pagination: true, //是否显示分页（*）
|
||
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
|
||
pageNumber:1, //初始化加载第一页，默认第一页
|
||
pageSize: size, //每页的记录行数（*）
|
||
pageList: [10,20], //可供选择的每页的行数（*）
|
||
});
|
||
}
|
||
function doLoad(url){
|
||
url=ext.contextPath+'/'+url;
|
||
location.replace(url);
|
||
}
|
||
|
||
function detail(){
|
||
|
||
var datas="";
|
||
datas_name="";
|
||
$.each(selectionIds, function(index, item){
|
||
if(datas!=""){
|
||
datas+=",";
|
||
}
|
||
datas+=item;
|
||
});
|
||
datas+=",";
|
||
// console.log(datas);
|
||
editFun(datas);
|
||
}
|
||
|
||
|
||
//选中事件操作数组
|
||
var union = function(array,ids){
|
||
$.each(ids, function (i, id) {
|
||
if($.inArray(id,array)==-1){
|
||
array[array.length] = id;
|
||
}
|
||
});
|
||
return array;
|
||
};
|
||
//取消选中事件操作数组
|
||
var difference = function(array,ids){
|
||
$.each(ids, function (i, id) {
|
||
var index = $.inArray(id,array);
|
||
if(index!=-1){
|
||
array.splice(index, 1);
|
||
}
|
||
});
|
||
return array;
|
||
};
|
||
var _ = {"union":union,"difference":difference};
|
||
|
||
//表格分页之前处理多选框数据
|
||
function responseHandler(res) {
|
||
$.each(res.rows, function (i, row) {
|
||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||
});
|
||
return res;
|
||
}
|
||
|
||
// 选择工艺段
|
||
function processSectionSelect() {
|
||
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", { companyId: companyId }, function (data) {
|
||
var select = $("#processSection").select2({
|
||
data: data,
|
||
cache: false,
|
||
placeholder: '请选择',// 默认文字提示
|
||
allowClear: true,// 允许清空
|
||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||
language: "zh-CN",
|
||
minimumInputLength: 0,
|
||
minimumResultsForSearch: 10,// 禁用搜索框
|
||
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||
});
|
||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' })
|
||
select.val('').trigger("change");
|
||
select.on("select2:select", function (e) {
|
||
dosearch();
|
||
});
|
||
}, 'json');
|
||
}
|
||
var beginTimeStore2 = '';
|
||
var endTimeStore2 = '';
|
||
function initDate() {
|
||
//定义locale汉化插件
|
||
beginTimeStore2 = moment().subtract(1, 'month').format('YYYY-MM-DD');
|
||
endTimeStore2 = moment().subtract(0, 'month').format('YYYY-MM-DD');
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD',
|
||
"separator": " ~ ",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
$('#reservationtime2').daterangepicker({
|
||
"timePicker": false,
|
||
"timePicker24Hour": false,
|
||
"linkedCalendars": false,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"locale": locale,
|
||
//汉化按钮部分
|
||
ranges: {
|
||
'今日': [moment(), moment().subtract(-1, 'days')],
|
||
'昨日': [moment().subtract(1, 'days'), moment()],
|
||
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
|
||
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
|
||
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
|
||
},
|
||
startDate: beginTimeStore2,
|
||
endDate: endTimeStore2
|
||
}, function(start, end, label) {
|
||
beginTimeStore2 = start.format(this.locale.format);
|
||
endTimeStore2 = end.format(this.locale.format);
|
||
if(!this.startDate){
|
||
this.element.val('');
|
||
}else{
|
||
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
||
}
|
||
});
|
||
$('#reservationtime2').val(beginTimeStore2 + locale.separator + endTimeStore2);
|
||
//$('#reservationtime2').val(beginTimeStore2 + locale.separator + endTimeStore2);
|
||
//$('#reservationtime2').daterangepicker({autoUpdateInput:false})
|
||
};
|
||
$(function() {
|
||
processSectionSelect();
|
||
initDate();
|
||
$("#table").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/work/kpipoint/getlist.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10, 20,50], // 设置页面可以显示的数据条数
|
||
pageSize: 5, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
responseHandler:responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
processid=$("#processSection").val();
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset/params.limit+1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order, // 排序规则
|
||
search_name: $('#search_name').val(),
|
||
companyId: unitId,
|
||
pSectionId: processid,
|
||
}
|
||
},
|
||
sortName: 'grade', // 要排序的字段
|
||
sortOrder: 'asc', // 排序规则
|
||
columns: [
|
||
{
|
||
field: 'mpoint', // 返回json数据中的name
|
||
title: '工艺运行关键KPI', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function(value,row) {
|
||
if(value !=null){
|
||
return value.parmname;
|
||
}else{
|
||
return '-';
|
||
}
|
||
}
|
||
},{
|
||
field: 'mpoint', // 返回json数据中的name
|
||
title: '最新值', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function(value,row) {
|
||
if(value !=null){
|
||
return value.parmvalue;
|
||
}else{
|
||
return '-';
|
||
}
|
||
}
|
||
},{
|
||
field: 'mpoint', // 返回json数据中的name
|
||
title: '单位', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function(value,row) {
|
||
if(value !='' && value!=null){
|
||
return value.unit;
|
||
} else{
|
||
return '-';
|
||
}
|
||
}
|
||
|
||
},{
|
||
field: 'mpoint', // 返回json数据中的name
|
||
title: '更新时间', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
formatter: function(value,row) {
|
||
if(value.measuredt !=''){
|
||
return value.measuredt.substring(0,16);
|
||
} else{
|
||
return '-';
|
||
}
|
||
|
||
}
|
||
|
||
},{
|
||
field: 'bizid', // 返回json数据中的name
|
||
title: '所属厂区', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
},{
|
||
field: 'processectionname', // 返回json数据中的name
|
||
title: '工艺段', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
}
|
||
],
|
||
onLoadSuccess: function(){ //加载成功时执行
|
||
adjustBootstrapTableView("table");
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
});
|
||
//绑定选中事件、取消事件、全部选中、全部取消
|
||
$("#table").on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
|
||
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
|
||
return row.mpointid;
|
||
});
|
||
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
|
||
selectionIds = _[func](selectionIds, ids);
|
||
});
|
||
$("#table1").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/maintenance/getMaintenanceDetailList.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10, 20,50], // 设置页面可以显示的数据条数
|
||
pageSize: 5, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
processid=$("#processSection").val();
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset/params.limit+1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order, // 排序规则
|
||
search_name: $('#search_name').val(),
|
||
search_code:unitId,
|
||
processSectionId:processid,
|
||
type:'${MAINTENANCE_TYPE_REPAIR}'
|
||
}
|
||
},
|
||
sortName: 'id', // 要排序的字段
|
||
sortOrder: 'desc', // 排序规则
|
||
columns: [
|
||
{
|
||
field: 'detailNumber', // 返回json数据中的name
|
||
title: '缺陷编码', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function(value,row) {
|
||
var a = '<span style="color:#3c8dbc;font-weight:900">'+value+'</span>';
|
||
return a;
|
||
}
|
||
},{
|
||
field: 'problemcontent', // 返回json数据中的name
|
||
title: '缺陷内容', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
},{
|
||
field: 'status',
|
||
title: "缺陷状态",
|
||
align: 'center',
|
||
sortable : false,
|
||
valign: 'middle',
|
||
width: 60, // 定义列的宽度，单位为像素px
|
||
formatter:function(value,row,index){
|
||
if(value == '${Status_Start}' && row.type == '${TYPE_SUPPLEMENT}'){
|
||
return '处理中';
|
||
}else if(value == '${Status_Start}'){
|
||
return '已下发';
|
||
}else if(value == '${Status_Finish}'){
|
||
return '已完成';
|
||
}else{
|
||
return value;
|
||
}
|
||
}
|
||
|
||
}
|
||
,{
|
||
//field: 'insuser', // 返回json数据中的name
|
||
field: 'insertUser.caption',
|
||
title: '报告人', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
|
||
|
||
} // 上下居中
|
||
,{
|
||
field: 'insdt', // 返回json数据中的name
|
||
title: '报告时间', // 表格表头显示文字
|
||
sortable : false,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
formatter: function(value,row) {
|
||
if(value !=null){
|
||
return value.substring(0,16);
|
||
} else{
|
||
return '-';
|
||
}
|
||
}
|
||
|
||
}
|
||
],
|
||
onLoadSuccess: function(){ //加载成功时执行
|
||
adjustBootstrapTableView("table1");
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
});
|
||
$("#table2").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/work/proAlarm/getListForProcess.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10, 20,50], // 设置页面可以显示的数据条数
|
||
pageSize: 5, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset/params.limit+1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order, // 排序规则
|
||
//search_name: $('#search_name').val(),
|
||
unitId: unitId,
|
||
pSectionId: processid,
|
||
beginTimeStore:beginTimeStore2,
|
||
endTimeStore:endTimeStore2
|
||
}
|
||
},
|
||
sortName: 'alarmtime', // 要排序的字段
|
||
sortOrder: 'desc', // 排序规则
|
||
columns: [
|
||
{
|
||
field: 'alarmtime', // 返回json数据中的name
|
||
title: '报警时间', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function (value, row, index){
|
||
return value.substring(0,16);
|
||
}
|
||
},{
|
||
field: 'mpid', // 返回json数据中的name
|
||
title: '报警变量', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
},{
|
||
field: 'describe', // 返回json数据中的name
|
||
title: '报警内容', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
},{
|
||
field: 'alarmlvl', // 返回json数据中的name
|
||
title: '报警等级', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle' // 上下居中
|
||
},{
|
||
field: 'areaname', // 返回json数据中的name
|
||
title: '所属工艺段', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function (value, row, index){
|
||
if(row.processSection!=null){
|
||
return row.processSection.name;
|
||
}else{
|
||
return ''
|
||
}
|
||
}
|
||
},{
|
||
field: 'status', // 返回json数据中的name
|
||
title: '状态', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',// 上下居中
|
||
formatter: function (value, row, index){
|
||
switch (value){
|
||
case '${Status_N}' :
|
||
return "新报警";
|
||
case '${Status_C}' :
|
||
return "已确认";
|
||
case '${Status_Y}' :
|
||
return "已恢复";
|
||
default :
|
||
return "";
|
||
}
|
||
}
|
||
}
|
||
],
|
||
onLoadSuccess: function(){ //加载成功时执行
|
||
adjustBootstrapTableView("table2");
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
});
|
||
|
||
//统计信息-异常处理率
|
||
doInspection("Err", 0, 0);
|
||
//统计信息-报警处理率
|
||
doInspection("Alrm", 0, 1);
|
||
|
||
$("#tableEqu").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/equipment/getList.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10, 20,50], // 设置页面可以显示的数据条数
|
||
pageSize: 22, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset/params.limit+1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order, // 排序规则
|
||
search_name: $('#search_name').val(),
|
||
companyId: unitId,
|
||
pSectionId: processid,
|
||
}
|
||
},
|
||
sortName: 'id', // 要排序的字段
|
||
sortOrder: 'desc', // 排序规则
|
||
onClickRow: function (row) {//单击行事件,执行查看功能
|
||
viewEqu(row.id);
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'equipmentname', // 返回json数据中的name
|
||
title: '设备名称', // 表格表头显示文字
|
||
sortable : true,
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
formatter: function(value,row) {
|
||
var a = '<span style="font-weight:900">'+value+'</span>';
|
||
return a;
|
||
}
|
||
},{
|
||
field: 'equipmentstatus', // 返回json数据中的name
|
||
title: '状态', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
formatter: function (value, row, index) {
|
||
switch (value){
|
||
case '${Status_OFF}' :
|
||
return "封存";
|
||
case '${Status_ON}' :
|
||
return "在用";
|
||
case '${Status_Fault}' :
|
||
return "故障";
|
||
case '${Status_Transfer}' :
|
||
return "调拨";
|
||
case '${Status_Scrap}' :
|
||
return "报废";
|
||
case '${Status_STOP}' :
|
||
return "停用";
|
||
default :
|
||
return "";
|
||
}
|
||
}
|
||
}
|
||
],
|
||
onLoadSuccess: function(){ //加载成功时执行
|
||
adjustBootstrapTableView("table2");
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<!-- 引用top -->
|
||
<%--<jsp:include page="/jsp/top.jsp"></jsp:include>--%>
|
||
<!-- 菜单栏 -->
|
||
<%--<jsp:include page="/jsp/left.jsp"></jsp:include>--%>
|
||
<div class="content-wrapper">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id ="head_title"></h1>
|
||
<ol class="breadcrumb">
|
||
<li><a id ='head_firstlevel' href="#"><i class="fa fa-refresh"></i> </a></li>
|
||
</ol>
|
||
</section>
|
||
<!-- Main content -->
|
||
<section class="content container-fluid">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
<div id="menu4SelectDiv"></div>
|
||
<div calss="row">
|
||
<div class="col-md-2">
|
||
<div class="box box-white box-top">
|
||
<div class="box-header">
|
||
<h4 class="box-title">统计信息</h4>
|
||
<div class="box-tools "></div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div class="box-border">
|
||
<div class="box-border-left"></div>
|
||
<div class="box-border-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body" style="height:90%;">
|
||
<div class="handle-title font-blue">异常处理率</div>
|
||
<dl class="dl-horizontal">
|
||
<dt class="lable-left">异常处理量：</dt>
|
||
<dd class="lable-right">0</dd>
|
||
<dt class="lable-left">异常目标处理量：</dt>
|
||
<dd class="lable-right">0</dd>
|
||
<dt class="lable-left">异常处理率：</dt>
|
||
<dd class="lable-right">0%</dd>
|
||
</dl>
|
||
<div class="row">
|
||
<div class="col-md-12" id="Err"></div>
|
||
</div>
|
||
<div class="handle-title font-yellow">报警处理率</div>
|
||
<dl class="dl-horizontal">
|
||
<dt class="lable-left">报警总数量：</dt>
|
||
<dd class="lable-right">0</dd>
|
||
<dt class="lable-left">已解除报警量：</dt>
|
||
<dd class="lable-right">0</dd>
|
||
<dt class="lable-left">报警处理率：</dt>
|
||
<dd class="lable-right">0%</dd>
|
||
</dl>
|
||
<div class="row">
|
||
<div class="col-md-12" id="Alrm"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
<div class="box box-white box-bottom">
|
||
<div class="box-header">
|
||
<h4 class="box-title">现场监控</h4>
|
||
<div class="box-tools ">
|
||
<select class="form-control select-blue">
|
||
<option>监控区域1</option>
|
||
</select>
|
||
</div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div class="box-border">
|
||
<div class="box-border-left"></div>
|
||
<div class="box-border-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body" style="height:90%;">
|
||
<div class="row">
|
||
<div class="col-md-12"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<div class="box box-white box-top">
|
||
<div class="box-header">
|
||
<h4 class="box-title">工艺流程</h4>
|
||
<div class="box-tools-left "></div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div class="box-border">
|
||
<div class="box-border-left"></div>
|
||
<div class="box-border-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body" style="height:90%;">
|
||
<img alt="" style=" width: 100%; " src="<%=request.getContextPath()%>/IMG/gy.jpg">
|
||
<a class="btn btn-primary monitor" href="javascript:doLoad('work/mpoint/overviewMonitor.do');"
|
||
role="button"><i class="fa fa-video-camera"></i> 实时监控</a>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
<div class="nav-tabs-custom box-bottom">
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a href="#tab_1" data-toggle="tab">工艺运行KPI</a></li>
|
||
<li><a href="#tab_2" data-toggle="tab">缺陷管理</a></li>
|
||
<li><a href="#tab_3" data-toggle="tab">报警统计</a></li>
|
||
<!-- <li><a href="#tab_4" data-toggle="tab">报警详情</a></li> -->
|
||
<li class="pull-right">
|
||
<div class="btn-toolbar" role="toolbar" aria-label="...">
|
||
<!-- <div class="btn-group" role="group" aria-label="...">
|
||
<a class="btn btn-default" href="#" role="button">年</a>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<a class="btn btn-primary" href="#" role="button">月</a>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<a class="btn btn-default" href="#" role="button">日</a>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<select class="form-control">
|
||
<option>2020-02</option>
|
||
</select>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<a class="btn btn-primary" href="#" role="button">确定</a>
|
||
</div> -->
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="tab_1">
|
||
<table class="table table-striped table-condensed" id="table">
|
||
<!-- <thead>
|
||
<tr>
|
||
<th data-width="30px" data-align="center">
|
||
<input type="checkbox" name="checkall" class="checkbox"
|
||
onclick="selectAll('cids',this.checked);">
|
||
</th>
|
||
<th data-width="30%">工艺运行关键KPI</th>
|
||
<th data-width="20%">目标值</th>
|
||
<th data-width="20%">实际值</th>
|
||
<th data-width="20%">评价</th>
|
||
<th data-width="8%">曲线</th>
|
||
</tr>
|
||
</thead> -->
|
||
</table>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_2">
|
||
<table class="table table-striped table-condensed" id="table1"></table>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_3">
|
||
<div class="input-group pull-right input-group-sm">
|
||
<input type="text" class="form-control pull-right"
|
||
id="reservationtime2" style="width:175px">
|
||
<div class="input-group-btn ">
|
||
<button type="button" class="btn btn-default"
|
||
onclick="refreshAlarm();">
|
||
<i class="fa fa-search"></i> 查询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<table class="table table-striped table-condensed" id="table2"></table>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_4">
|
||
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
</div>
|
||
<!-- /.tab-content -->
|
||
</div>
|
||
<!-- nav-tabs-custom -->
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="box box-white box-right">
|
||
<div class="box-header">
|
||
<h4 class="box-title">主要设备</h4>
|
||
<div class="box-tools-left "></div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div class="box-border">
|
||
<div class="box-border-left"></div>
|
||
<div class="box-border-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div class="box-body" style="height:97%;">
|
||
<table class="table table-condensed">
|
||
<thead>
|
||
<tr>
|
||
<th>工艺段</th>
|
||
<th>
|
||
<select class="form-control input-xs select2 " id="processSection" name="processSection" style="width: 200px;">
|
||
</select>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
<table class="table table-condensed" id="tableEqu">
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- /.content -->
|
||
</div>
|
||
<%--<jsp:include page="/jsp/bottom.jsp"></jsp:include>--%>
|
||
<%--<jsp:include page="/jsp/side.jsp"></jsp:include>--%>
|
||
</div>
|
||
</body>
|
||
</html> |