1340 lines
43 KiB
Plaintext
1340 lines
43 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.MPoint"%>
|
||
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<style>
|
||
.box-top {
|
||
height:300px;
|
||
padding:10px ;
|
||
}
|
||
.box-bottom{
|
||
height:240px;
|
||
padding:10px ;
|
||
}
|
||
.box-middle{
|
||
height:355px;
|
||
padding:10px ;
|
||
}
|
||
.box-middle >.box-body{
|
||
padding-bottom: 0 ;
|
||
}
|
||
.box.box-white {
|
||
border-top: 0;
|
||
}
|
||
.box-body{
|
||
|
||
}
|
||
.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;
|
||
}
|
||
|
||
.lable-right{
|
||
font-size: 15px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #1d1e1f;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.lable-left{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #68696b;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.dl-horizontal{
|
||
margin-top:10px;
|
||
}
|
||
.dl-horizontal>dt{
|
||
font-weight:initial;
|
||
text-align: left;
|
||
width: 80px;
|
||
height: 20px;
|
||
margin-bottom:13px;
|
||
}
|
||
.dl-horizontal.dl-horizontal-right>dt{
|
||
width: 180px;
|
||
text-align: right;
|
||
margin-bottom:17px;
|
||
}
|
||
.dl-horizontal.dl-horizontal-right>dd{
|
||
margin-left: 180px;
|
||
margin-bottom:17px;
|
||
}
|
||
.dl-horizontal>dd{
|
||
margin-left: 80px;
|
||
height: 20px;
|
||
text-align: left;
|
||
margin-bottom:13px;
|
||
}
|
||
.dl-horizontal>.font-blue{
|
||
color: #3e99e8;
|
||
}
|
||
.dl-horizontal>.font-red{
|
||
color: #F55945;
|
||
}
|
||
.dl-horizontal>.font-yellow{
|
||
color: #F0B253;
|
||
}
|
||
.yesterday{
|
||
float:right;
|
||
width:50%;
|
||
height:70px;
|
||
text-align:center;
|
||
border-left:1px solid #e5e5e5;
|
||
margin-top:15px;
|
||
}
|
||
.yesterday-title{
|
||
height: 24px;
|
||
background: #3883ff;
|
||
font-size: 12px;
|
||
padding-top:3px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
margin-left:30px;
|
||
margin-right:22px;
|
||
}
|
||
.yesterday-num{
|
||
margin-top:10px;
|
||
margin-left:30px;
|
||
margin-right:22px;
|
||
border-bottom:1px solid #e5e5e5;
|
||
font-size: 18px;
|
||
font-family: Helvetica, Helvetica-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #161616;
|
||
height: 35px;
|
||
line-height: 25px;
|
||
letter-spacing: 2px;
|
||
}
|
||
.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;
|
||
}
|
||
@media (max-width: 1600px){
|
||
.yesterday{
|
||
float:right;
|
||
width:35%;
|
||
height:30px;
|
||
text-align:center;
|
||
border-left:1px solid #e5e5e5;
|
||
margin-top:8px;
|
||
}
|
||
.yesterday-title{
|
||
height: 50%;
|
||
background: #3883ff;
|
||
font-size: 12px;
|
||
width:100%;
|
||
padding-top:0px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
margin-left:10%;
|
||
margin-right:22px;
|
||
}
|
||
.yesterday-num{
|
||
margin-top:1px;
|
||
margin-left:1%;
|
||
width:100%;
|
||
margin-right:22px;
|
||
border-bottom:1px solid #e5e5e5;
|
||
font-size: 12px;
|
||
font-family: Helvetica, Helvetica-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #161616;
|
||
|
||
letter-spacing: 2px;
|
||
}
|
||
.lable-right{
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #1d1e1f;
|
||
line-height: 15px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.lable-left{
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #68696b;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.lable-green{
|
||
font-size: 30px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #00cccc;
|
||
line-height: 72px;
|
||
}
|
||
|
||
.lable-green-small{
|
||
font-size: 20px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #00cccc;
|
||
line-height: 42px;
|
||
}
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
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');
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
}
|
||
};
|
||
/*
|
||
工单列表
|
||
*/
|
||
function getWorkList(bizid,dateType,selectDate){
|
||
//获取div的高度
|
||
var hei = $(window).height();
|
||
var heightstr = (hei-40)*0.5*0.96;
|
||
|
||
$('#table').bootstrapTable('destroy');
|
||
$("#table").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/maintenance/getWorkList.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10], // 设置页面可以显示的数据条数
|
||
pageSize: 10, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
height: heightstr-230,
|
||
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(),
|
||
search_code: bizid,
|
||
type:'${type}',
|
||
dateType: dateType,
|
||
bizid:bizid,
|
||
selectDate: selectDate
|
||
}
|
||
},
|
||
sortName: 'id', // 要排序的字段
|
||
sortOrder: 'desc', // 排序规则
|
||
onClickRow:function(row){
|
||
viewFun(row.id);
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'companyName', // 返回json数据中的name
|
||
title: '厂区', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width:'10%',
|
||
formatter: function (value, row, index) {
|
||
//新数据直接保存维护公司信息，老数据只含有运维信息
|
||
if (row.company != null) {
|
||
return row.company.name;
|
||
} else if (row.maintenance != null) {
|
||
return row.maintenance.company.name;
|
||
} else {
|
||
return "--";
|
||
}
|
||
|
||
}
|
||
},{
|
||
field: 'equipmentNames', // 返回json数据中的name
|
||
title: '设备名称', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width:'13%',
|
||
formatter: function (value, row, index) {
|
||
return row.equipmentNames;
|
||
return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.equipmentNames + "'>" + row.equipmentNames + "</span>";
|
||
}
|
||
}, {
|
||
field: 'equipmentCardIds', // 返回json数据中的name
|
||
title: '设备编号', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width:'15%',
|
||
formatter: function (value, row, index) {
|
||
return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.equipmentCardIds + "'>" + row.equipmentCardIds + "</span>";
|
||
}
|
||
}, {
|
||
field: 'problemcontent', // 返回json数据中的name
|
||
title: '问题描述', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
width:'24%',
|
||
formatter: function (value, row, index) {
|
||
return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.problemcontent + "'>" + row.problemcontent + "</span>";
|
||
}
|
||
}, {
|
||
field: 'insdt', // 返回json数据中的name
|
||
title: '发起时间', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width:'14%',
|
||
formatter: function (value, row, index) {
|
||
return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + value.substring(0, 19) + "'>" + value.substring(0, 19) + "</span>";
|
||
}
|
||
}, {
|
||
field: 'status', // 返回json数据中的name
|
||
title: '问题状态', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle', // 上下居中
|
||
width:'10%',
|
||
formatter: function (value, row, index) {
|
||
switch (value) {
|
||
case '${Status_Start}':
|
||
return '已下发';
|
||
case '${Status_Finish}':
|
||
return '已完成';
|
||
default:
|
||
return value;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
adjustBootstrapTableView("table");
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
})
|
||
};
|
||
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 dogauge(id,value,title){
|
||
var max = 100;
|
||
var sizenub =1;
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*1
|
||
}
|
||
|
||
// 蓝色背景
|
||
var num = value / max;
|
||
var colorSet = [
|
||
[num, "#347EFB"],
|
||
[1, "#F6F8F9"]
|
||
];
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title:{
|
||
text:title,
|
||
textStyle: {
|
||
fontSize: 12 ,
|
||
fontWeight: 400 ,
|
||
color: '#a3a9af' ,
|
||
},
|
||
x:'center',
|
||
bottom:0,
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: '达标率',
|
||
type: 'gauge',
|
||
radius: 120*sizenub+'%' ,
|
||
center: ["50%", "75%"], //整体的位置设置
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
splitLine: {
|
||
show: false ,
|
||
},
|
||
axisLine: {
|
||
// 坐标轴线
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: colorSet,
|
||
width: 15,
|
||
opacity: 1 //刻度背景宽度
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false ,
|
||
},
|
||
axisLabel: {
|
||
show: false ,
|
||
},
|
||
pointer: {
|
||
show: false ,
|
||
},
|
||
detail: {
|
||
offsetCenter: [0, '-15%'] ,
|
||
fontSize: 44 ,
|
||
formatter: '{value}%'
|
||
|
||
},
|
||
data: [{value: value}]
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//设备完好率
|
||
function doequgood(id,value){
|
||
var sizenub = window.screen.height/1080;
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*0.8
|
||
}
|
||
var othVal = 100 - value;
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'30%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: 40*sizenub,
|
||
},
|
||
subtext:'设备完好率',
|
||
subtextStyle: {
|
||
fontSize: '12',
|
||
fontWeight: 400,
|
||
color: '#a3a9af',
|
||
} ,
|
||
},
|
||
color: ['#F6F8F9'],
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['80%', '100%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: value,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#3883FF',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal
|
||
}]
|
||
}]
|
||
}
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//设备类型pie
|
||
function doequtype(id,val){
|
||
var sizenub = window.screen.height/1080;
|
||
var sizenuba = window.screen.height/1080*0.8;
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*0.9
|
||
}
|
||
const colorList = ['#3883FF', '#A84ECB', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
||
var data = val;
|
||
var legendName = new Array;
|
||
data.forEach(function(value,i){
|
||
legendName[i] = value.name;
|
||
});
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: '设备',
|
||
textStyle: {
|
||
fontSize: 17*sizenub,
|
||
color: '#000',
|
||
lineHeight: 24
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 28*sizenub,
|
||
color: '#333'
|
||
},
|
||
textAlign: 'center',
|
||
left: '19%',
|
||
top: '41%'
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 0,
|
||
top: '20%',
|
||
itemGap: 10*sizenub,
|
||
selectedMode: false,
|
||
data: legendName,
|
||
textStyle: {
|
||
rich: {
|
||
uname: {
|
||
fontSize: 14*sizenuba,
|
||
color: '#606163',
|
||
},
|
||
unum: {
|
||
fontSize: 20*sizenuba,
|
||
color: '#000',
|
||
}
|
||
}
|
||
},
|
||
formatter(name) {
|
||
var index = 0;
|
||
data.forEach(function(value,i){
|
||
if(value.name == name){
|
||
index = i;
|
||
}
|
||
});
|
||
var value = data[index].value;
|
||
return ' {uname|'+name+'}：{unum|'+value+'}';
|
||
}
|
||
},
|
||
color: colorList,
|
||
series: [
|
||
{
|
||
name: '设备',
|
||
type: 'pie',
|
||
radius: [60*sizenub+'%', 85*sizenub+'%'],
|
||
center: ['20%', '50%'],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 3*sizenub,
|
||
borderColor: '#fff'
|
||
},
|
||
data: data,
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//处理量、外运量等line
|
||
function doline(id,data){
|
||
const colorList = ['#347EFB', '#EBA043', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
var series = new Array;
|
||
data.forEach(function(val,i){
|
||
series[i] = {
|
||
name: val.name,
|
||
type: 'line',
|
||
data: val.value,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0.9,
|
||
x2: 0,
|
||
y2: 0,
|
||
colorStops: [{
|
||
offset: 0, color: '#FFF' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: colorList[i] // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
lineStyle:{
|
||
color:colorList[i],
|
||
},
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#000' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type : 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitNumber: 3 ,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//药、电等bar
|
||
function doBar(id,data,colorNum){
|
||
const colorList = ['#F0B253', '#397EFA', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList[colorNum],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#000' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed',
|
||
opacity:0.3,
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: data.name,
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
barMinWidth: 10 ,
|
||
data: data.value
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
//巡检、维修、保养等完成率bar
|
||
function doendPie(id,data,colorNum){
|
||
var sizenub =window.screen.height/1080;
|
||
var sizenubtsxt = sizenub;
|
||
var sizenubtx = sizenub;
|
||
if(window.screen.width<1601){
|
||
sizenub = (window.screen.height/1080)*1.5;
|
||
sizenubtsxt = (window.screen.height/1080)*0.8;
|
||
sizenubtx = (window.screen.height/1080)*0.6;
|
||
}
|
||
const colorList = [ '#47C1C8', '#F5A623','#397EFB','#9E70C7','#347EFB', '#EBA043', '#A84ECB'];
|
||
var othVal = 100 - data.value;
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: ['#F6F8F9'],
|
||
title: {
|
||
text: data.value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:25*+sizenub+'%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: colorList[colorNum],
|
||
fontSize: 40*sizenubtsxt,
|
||
},
|
||
subtext:'完好率',
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
color: '#a3a9af',
|
||
} ,
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
x: 18*sizenubtx+'%',
|
||
y: 'bottom',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#a3a9af' ,
|
||
lineHeight: 16,
|
||
fontSize: 13,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: [65*sizenub+'%', 80*sizenub+'%'],
|
||
center: ['50%', '40%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: data.value,
|
||
name: data.name,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList[colorNum],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal
|
||
}]
|
||
}]
|
||
}
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
function doTable(id){
|
||
var height = $("#"+id).parent().height();
|
||
$("#"+id).bootstrapTable({
|
||
//url:"",
|
||
height:height,
|
||
striped: false, //是否显示行间隔色
|
||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
||
});
|
||
}
|
||
//js获取项目根路径，如： http://localhost:8083/uimcardprj
|
||
function getRootPath(){
|
||
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
|
||
var curWwwPath=window.document.location.href;
|
||
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
|
||
var pathName=window.document.location.pathname;
|
||
var pos=curWwwPath.indexOf(pathName);
|
||
//获取主机地址，如： http://localhost:8083
|
||
var localhostPaht=curWwwPath.substring(0,pos);
|
||
//获取带"/"的项目名，如：/uimcardprj
|
||
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
|
||
return(localhostPaht+projectName);
|
||
}
|
||
|
||
function refreshData() {
|
||
$.post("url",{},function(data){
|
||
if (data.res == 1) {
|
||
$("#scrollNews").text(data);
|
||
}
|
||
});
|
||
|
||
}
|
||
$(function() {
|
||
setInterval("refreshData", 3000);
|
||
|
||
$.post(ext.contextPath + '/work/mpoint/getOverviewProduce.do', {biz_id:"d0f105b6eafb49c58ac072bc7a23b663"} , function(data) {
|
||
//init();
|
||
|
||
var arr= JSON.parse(data);
|
||
$("#data").html(arr.data+"万吨/日");
|
||
$("#data1").html(arr.data1);
|
||
$("#data2").html(arr.data2);
|
||
$("#data3").html(arr.data3);
|
||
$("#data4").html(arr.data4);
|
||
$("#data5").html(arr.data5);
|
||
$("#data6").html(arr.data6);
|
||
$("#data7").html(arr.data7);
|
||
$("#data8").html(arr.data8);
|
||
$("#data9").html(arr.data9);
|
||
$("#data10").html(arr.data10);
|
||
$("#data11").html(arr.data11);
|
||
$("#data12").html(arr.data12);
|
||
|
||
$("#data13").html(arr.data13);
|
||
$("#data14").html(arr.data14+"h");
|
||
$("#data15").html(arr.data15);
|
||
$("#data16").html(arr.data16+"h");
|
||
$("#data17").html(arr.data17);
|
||
$("#data18").html(arr.data18+"h");
|
||
|
||
|
||
$("#data19").html(arr.data19+"%");
|
||
$("#data21").html(arr.data21+"%");
|
||
var jsdbl = arr.data20;
|
||
//if(arr.data20==0){jsdbl = 0;}
|
||
var csdbl = arr.data22
|
||
//if(arr.data22==0){csdbl = 0;}
|
||
$("#equNum").html(arr.equipmentTotal);
|
||
dogauge("in",jsdbl,'进水达标率');
|
||
dogauge("out",csdbl,'出水达标率');
|
||
doequgood("equ-good",arr.equipmentIntactRate);
|
||
var data = [
|
||
{name: 'A类设备数量', value: arr.equipmentTotalA},
|
||
{name: 'B类设备数量', value: arr.equipmentTotalB},
|
||
{name: 'C类设备数量', value: arr.equipmentTotalC},
|
||
];
|
||
doequtype("equ-type",data);
|
||
var waterLine = [{name:"水处理",value:arr.wscll}];
|
||
doline("waterLine",waterLine);
|
||
var allLine = [
|
||
{name:"用电量",value:arr.wnwyl},
|
||
];
|
||
doline("allLine",allLine);
|
||
var drugBar = {name:"泥处理",value:arr.yyl};
|
||
doBar("drugBar",drugBar,0);
|
||
var elecBar = {name:"吨水电耗",value:arr.ydl};
|
||
doBar("elecBar",elecBar,1);
|
||
var xjPie = {name:"巡检",value:arr.equipmentInspection};
|
||
doendPie("xjPie",xjPie,0);
|
||
var wxPie = {name:"维修",value:arr.equipmentRepair};
|
||
doendPie("wxPie",wxPie,1);
|
||
var byPie = {name:"保养",value:arr.equipmentMaintain};
|
||
doendPie("byPie",byPie,2);
|
||
doTable("table");
|
||
getWorkList("","","");//工单列表
|
||
});
|
||
});
|
||
</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-3">
|
||
<div class="box box-white box-top">
|
||
<div class="box-header">
|
||
<h4 class="box-title"><i class="fa fa-home"></i> 上海青浦第二污水处理厂有限公司</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</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">
|
||
<div class="yesterday" >
|
||
<div class="yesterday-title">昨日处理量</div>
|
||
<div class="yesterday-num" id="data">18.8万吨/日</div>
|
||
</div>
|
||
<dl class="dl-horizontal">
|
||
<dt class="lable-left">投运日期：</dt>
|
||
<dd class="lable-right">1999年</dd>
|
||
<dt class="lable-left">运营形式：</dt>
|
||
<dd class="lable-right">自主运营</dd>
|
||
<dt class="lable-left">设计水量：</dt>
|
||
<dd class="font-blue lable-right">18万吨/日</dd>
|
||
<dt class="lable-left">占地面积：</dt>
|
||
<dd class="lable-right">191998平方米</dd>
|
||
<dt class="lable-left">处理工艺：</dt>
|
||
<dd class="lable-right">改良Bardenpho工艺</dd>
|
||
<dt class="lable-left">排放标准：</dt>
|
||
<dd class="lable-right">GB18918一级A，其中TP\TN\NH3执行地表四类水标准</dd>
|
||
</dl>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-9">
|
||
<div class="box box-white box-top">
|
||
<div class="box-header">
|
||
<h4 class="box-title"><i class="fa fa-line-chart"></i> 生产情况</h4>
|
||
<div class="box-tools pull-right">
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<button id="yearButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#238AE5;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceBlack.do');">
|
||
黑
|
||
</button>
|
||
<button id="monthButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#D4D4D4;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduce.do');">
|
||
白
|
||
</button>
|
||
</div>
|
||
</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">
|
||
<div calss="row">
|
||
<div class="col-md-3">
|
||
<dl class="dl-horizontal dl-horizontal-right">
|
||
<dt class="lable-left">出水流量（m3/h）：</dt>
|
||
<dd class="lable-right" id = "data1">1060416</dd>
|
||
<dt class="lable-left">进水流量（m3/h）：</dt>
|
||
<dd class="lable-right" id = "data2">0</dd>
|
||
<dt class="lable-left">昨日累计泥量（m3/h）：</dt>
|
||
<dd class="lable-right" id = "data3">3.71</dd>
|
||
<dt class="lable-left">昨日累计水量（m3/h）：</dt>
|
||
<dd class="lable-right" id = "data4">34.71</dd>
|
||
<dt class="lable-left">进水COD（mg/L）：</dt>
|
||
<dd class="lable-right" id = "data7">7.4</dd>
|
||
<dt class="lable-left">出水COD（mg/L）：</dt>
|
||
<dd class="lable-right" id = "data8">307.12</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<dl class="dl-horizontal dl-horizontal-right">
|
||
<dt class="lable-left">进水PH：</dt>
|
||
<dd class="font-red lable-right" id = "data5">0</dd>
|
||
<dt class="lable-left">出水pH：</dt>
|
||
<dd class="font-red lable-right" id = "data6">-21372</dd>
|
||
<dt class="lable-left">进水NH3N（mg/L）：</dt>
|
||
<dd class="font-yellow lable-right" id = "data9">20.02</dd>
|
||
<dt class="lable-left">出水NH3N（mg/L）：</dt>
|
||
<dd class="font-yellow lable-right" id = "data10">51.85</dd>
|
||
<dt class="lable-left">进水TP（mg/L）：</dt>
|
||
<dd class="lable-right" id = "data11">3.71</dd>
|
||
<dt class="lable-left">出水TP（mg/L）：</dt>
|
||
<dd class="lable-right" id = "data12">42.51</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="col-md-3" style="height:100%;">
|
||
<div style="width:100%;height:150px;" id="in"></div>
|
||
<div style="width:100%;height:80px;text-align: center;">
|
||
<row>
|
||
<div class="col-md-12 lable-left" style="margin-top:12px;"><i class="iconfont iconshuidi" style="color:#5AB1EF;"></i>进水达标率</div>
|
||
</row>
|
||
<row>
|
||
<div class="col-md-12" style="margin-top:12px;">
|
||
<span class="lable-left">实际值：</span>
|
||
<span class="lable-right" id = "data19">64.0%</span>
|
||
</div>
|
||
</row>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div style="width:100%;height:150px;" id="out"></div>
|
||
<div style="width:100%;height:80px;text-align: center;">
|
||
<row>
|
||
<div class="col-md-12 lable-left" style="margin-top:12px;"><i class="iconfont iconshuidi" style="color:#5AB1EF;"></i>出水达标率</div>
|
||
</row>
|
||
<row>
|
||
<div class="col-md-12" style="margin-top:12px;">
|
||
<span class="lable-left">实际值：</span>
|
||
<span class="lable-right" id = "data21">100.0%</span>
|
||
</div>
|
||
</row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div calss="row">
|
||
<div class="col-md-3">
|
||
<div class="box box-white box-middle">
|
||
<div class="box-header">
|
||
<h4 class="box-title"><i class="fa fa-laptop"></i> 设备统计</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</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">
|
||
<div class="row">
|
||
<div class="col-md-6 text-center" style="padding-top:20px;">
|
||
<span class="col-md-12 lable-green" id="equNum"></span>
|
||
<span class="col-md-12 lable-right">总设备数量</span>
|
||
</div>
|
||
<div class="col-md-6" id="equ-good" style="height:140px;"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12" id="equ-type" style="height:140px;"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-9">
|
||
<div class="box box-white box-middle">
|
||
<div class="box-body" style="height:100%;">
|
||
<div class="row" style="height:50%;">
|
||
<div class="col-md-5" style="height:100%;" id="waterLine"></div>
|
||
<div class="col-md-7" style="height:100%;" id="drugBar"></div>
|
||
</div>
|
||
<div class="row" style="height:50%;">
|
||
<div class="col-md-5" style="height:100%;" id="allLine"></div>
|
||
<div class="col-md-7" style="height:100%;" id="elecBar"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div calss="row">
|
||
<div class="col-md-7">
|
||
<div class="box box-white box-bottom">
|
||
<div class="box-header">
|
||
<h4 class="box-title"><i class="fa fa-edit"></i> 工单统计</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</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" style="height:100%;">
|
||
<div class="col-md-2" style="height:100%;padding:0;" id="xjPie"></div>
|
||
<div class="col-md-2" style="height:100%;">
|
||
<span class="col-md-12 lable-green-small" id = "data13" style="padding:0;">211</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">巡检数</span>
|
||
<span class="col-md-12 lable-green-small" id = "data14" style="padding:0;">24h</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">工时数</span>
|
||
</div>
|
||
<div class="col-md-2" style="height:100%;padding:0;" id="wxPie"></div>
|
||
<div class="col-md-2" style="height:100%;">
|
||
<span class="col-md-12 lable-green-small" id = "data15" style="padding:0;">23</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">维修数</span>
|
||
<span class="col-md-12 lable-green-small" id = "data16" style="padding:0;">123h</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">工时数</span>
|
||
</div>
|
||
<div class="col-md-2" style="height:100%;padding:0;" id="byPie"></div>
|
||
<div class="col-md-2" style="height:100%;">
|
||
<span class="col-md-12 lable-green-small" id = "data17" style="padding:0;">12</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">保养数</span>
|
||
<span class="col-md-12 lable-green-small" id = "data18" style="padding:0;">3245h</span>
|
||
<span class="col-md-12 lable-right-small" style="padding:0;">工时数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="box box-white box-bottom">
|
||
<div class="box-header">
|
||
<h4 class="box-title"><i class="fa fa-bell"></i> 报警及异常</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</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:100%;">
|
||
|
||
<table id="table" class="table table-striped table-condensed"></table>
|
||
</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> |