1351 lines
45 KiB
Plaintext
1351 lines
45 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>
|
|||
|
|
.fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.fixed-table-pagination div.pagination, .fixed-table-pagination .pagination-detail
|
|||
|
|
{
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.fixed-table-container tbody tr:first-child td {
|
|||
|
|
background-color:#1C3855;
|
|||
|
|
color:#FFFFFF;
|
|||
|
|
}
|
|||
|
|
.fixed-table-container tbody td:first-child{
|
|||
|
|
background-color:#1C3855;
|
|||
|
|
color:#FFFFFF;
|
|||
|
|
}
|
|||
|
|
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
|
|||
|
|
background-color:#1C3855;
|
|||
|
|
color:#FFFFFF;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
color: #61798f;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box.box-white .box-border{
|
|||
|
|
padding:0 10px;
|
|||
|
|
}
|
|||
|
|
.box.box-white .box-border >.box-border-left{
|
|||
|
|
width: 50px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg,#81a7ff 1%, #6896ff 16%, rgba(181,209,255,0.48) 93%, rgba(255,255,255,0.23) 197%);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.box.box-white .box-border >.box-border-right{
|
|||
|
|
width: calc(100% - 50px);
|
|||
|
|
height: 3px;
|
|||
|
|
background: linear-gradient(270deg,rgba(23,39,55,0), #4e80b2 98%);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
float:right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lable-right{
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #82BDF3;
|
|||
|
|
line-height: 20px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.lable-left{
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
color: #61798F;
|
|||
|
|
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: #82BDF3;
|
|||
|
|
line-height: 15px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.lable-left{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
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: false, //表格显示条纹，默认为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, "#17191D"]
|
|||
|
|
];
|
|||
|
|
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: {
|
|||
|
|
borderColor:'#16314c',
|
|||
|
|
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: '#61798F',
|
|||
|
|
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: '#61798F',
|
|||
|
|
},
|
|||
|
|
unum: {
|
|||
|
|
fontSize: 20*sizenuba,
|
|||
|
|
color:'#FFFFFF',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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:'#16314c'
|
|||
|
|
},
|
|||
|
|
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: '#17191D' // 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: '#61798f',
|
|||
|
|
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: '#61798f',
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
borderColor:'#16314c'
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
data: [{
|
|||
|
|
value: data.value,
|
|||
|
|
name: data.name,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderColor:'#16314c',
|
|||
|
|
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() {
|
|||
|
|
$.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},
|
|||
|
|
{name:"深度脱水处理量",value:arr.sdtscll},
|
|||
|
|
{name:"剩余污泥量",value:arr.sywnl}
|
|||
|
|
];
|
|||
|
|
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" style=" background-color: #172737">
|
|||
|
|
<h1 style="color: #ffffff" 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" style=" background-color: #172737">
|
|||
|
|
<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" style=" background-color: #16314C">
|
|||
|
|
<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" style=" color: #00CCCC" 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" style=" background-color: #16314C">
|
|||
|
|
<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">加药流量（m3/h）：</dt>
|
|||
|
|
<dd class="lable-right" id = "data5">0</dd>
|
|||
|
|
<dt class="lable-left">污泥流量（m3/h）：</dt>
|
|||
|
|
<dd class="lable-right" id = "data6">-21372</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 = "data7">7.4</dd>
|
|||
|
|
<dt class="lable-left">进水COD（mg/L）：</dt>
|
|||
|
|
<dd class="lable-right" id = "data8">307.12</dd>
|
|||
|
|
<dt class="lable-left">进水NH3N（mg/L）：</dt>
|
|||
|
|
<dd class="font-yellow lable-right" id = "data9">20.02</dd>
|
|||
|
|
<dt class="lable-left">进水TH（mg/L）：</dt>
|
|||
|
|
<dd class="lable-right" id = "data10">51.85</dd>
|
|||
|
|
<dt class="lable-left">进水IP（mg/L）：</dt>
|
|||
|
|
<dd class="lable-right" id = "data11">3.71</dd>
|
|||
|
|
<dt class="lable-left">进水SS（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" style=" background-color: #16314C">
|
|||
|
|
<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" style="color:#61798F;">总设备数量</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" style=" background-color: #16314C">
|
|||
|
|
<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" style=" background-color: #16314C">
|
|||
|
|
<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;color: #61798f;">巡检数</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;color: #61798f;">工时数</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;color: #61798f;">维修数</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;color: #61798f;">工时数</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;color: #61798f;">保养数</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;color: #61798f;">工时数</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-5">
|
|||
|
|
<div class="box box-white box-bottom" style=" background-color: #16314C">
|
|||
|
|
<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>
|