1789 lines
62 KiB
Plaintext
1789 lines
62 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>
|
||
.content{
|
||
height: 960px;
|
||
}
|
||
.content-top{
|
||
height: 60%;
|
||
}
|
||
.content-bottom{
|
||
height: 30%;
|
||
}
|
||
.box.box-white {
|
||
border-top: 0;
|
||
height: calc(100% - 10px);
|
||
margin-bottom: 10px;
|
||
}
|
||
.box.box-white>.box-body{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.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-right_2{
|
||
font-size: 14px
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #606163;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
.lable-right_21{
|
||
font-size: 20px
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #1D1E1F;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
.lable-left{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #68696b;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.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;
|
||
}
|
||
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
|
||
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-4, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
|
||
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
|
||
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
|
||
padding-right: 2px;
|
||
padding-left: 2px;
|
||
height: 100%;
|
||
}
|
||
/* NAV STACKED */
|
||
.nav-stacked > li > a {
|
||
border-radius: 0;
|
||
border-top: 0;
|
||
border-left: 3px solid transparent;
|
||
color: #444;
|
||
}
|
||
.nav-stacked > li.active > a,.nav-stacked>li.active>a:focus,
|
||
.nav-stacked > li.active > a:hover {
|
||
background: #238072;
|
||
border-radius: 8px;
|
||
color: #69F6F9;
|
||
border-top: 0;
|
||
border-left: 0;
|
||
}
|
||
.nav-stacked > li.header {
|
||
border-bottom: 1px solid #ddd;
|
||
color: #69F6F9;
|
||
margin-bottom: 10px;
|
||
padding: 5px 10px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.progress1 {
|
||
overflow: hidden;
|
||
height: 10px;
|
||
margin-bottom: 10px;
|
||
background-color: #557AA5;
|
||
border-radius: 55px;
|
||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.progress-bar1 {
|
||
float: left;
|
||
width: 0%;
|
||
height: 100%;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
color: #000;
|
||
text-align: center;
|
||
background-color: #347EFB;
|
||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||
-webkit-transition: width 0.6s ease;
|
||
-o-transition: width 0.6s ease;
|
||
transition: width 0.6s ease;
|
||
border-radius: 55px;
|
||
}
|
||
.FontColor-Words {
|
||
font-size: 28px;
|
||
font-weight:bold;
|
||
color: #4666B7;
|
||
float:left;
|
||
}
|
||
.FontColor-Words-Medium {
|
||
font-size: 23px;
|
||
font-weight:bold;
|
||
color: #4666B7;
|
||
float:left;
|
||
}
|
||
.FontColor-Words-Small {
|
||
font-size: 14px;
|
||
color: #8AC2F6;
|
||
}
|
||
/* 文字预设大小 */
|
||
.FontSize-Words-Large{
|
||
font-size:69px;
|
||
}
|
||
.FontSize-Words-Medium{
|
||
font-size:40px;
|
||
}
|
||
.FontSize-Words-Small{
|
||
font-size:20px;
|
||
font-weight:bold;
|
||
}
|
||
.FontSize-Words-Xsmall {
|
||
font-size: 15px;
|
||
font-weight:bold;
|
||
}
|
||
.FontSize-Words-XXsmall {
|
||
font-size: 13px;
|
||
}
|
||
/* END */
|
||
/* 文字预设颜色 */
|
||
.FontColor-Words-Light {
|
||
color: #69F6F9;
|
||
}
|
||
.FontColor-Words-Yellow {
|
||
color: #B25C16;
|
||
}
|
||
.FontColor-Words-Pink {
|
||
color: #E922FF;
|
||
}
|
||
.FontColor-Words-Blue {
|
||
color: #375999;
|
||
}
|
||
.FontColor-Words-DarkBlue {
|
||
color: #325490;
|
||
}
|
||
.FontColor-Words-LightBlue {
|
||
color: #369FFF;
|
||
}
|
||
|
||
/* END */
|
||
/* 数字预设颜色 */
|
||
.FontColor-Numbers {
|
||
color: #4666B7;
|
||
}
|
||
.FontColor-Numbers-Light {
|
||
color: #69F6F9;
|
||
float:left;
|
||
}
|
||
.FontColor-Numbers-LightBlue {
|
||
color: #69F6F9;
|
||
}
|
||
.FontColor-Numbers-Green {
|
||
color: #00CCCC;
|
||
}
|
||
.FontColor-Numbers-Yellow {
|
||
color: #FFD428;
|
||
}
|
||
.FontColor-Numbers-Red {
|
||
color: #FF0624;
|
||
}
|
||
/* 数字预设大小 */
|
||
.FontSize-Numbers-Large{
|
||
font-size:69px;
|
||
line-height:1;
|
||
}
|
||
.FontSize-Numbers-Medium{
|
||
font-size:37px;
|
||
line-height:1;
|
||
font-weight: 700;
|
||
}
|
||
.FontSize-Numbers-Small{
|
||
font-size:24px;
|
||
line-height:0.7;
|
||
font-weight: 700;
|
||
}
|
||
.FontSize-Numbers-Xsmall{
|
||
font-size:16px;
|
||
line-height:1;
|
||
}
|
||
.FontLineHeight-One{
|
||
line-height:1;
|
||
}
|
||
.FontSize-Numbers-Top{
|
||
font-size:30px;
|
||
}
|
||
/* END */
|
||
.canvas-body{
|
||
padding:0;
|
||
margin:0;
|
||
background-image:url("<%=request.getContextPath()%>/IMG/map_bg2.png");
|
||
}
|
||
.canvas-title{
|
||
width:55%;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20%;
|
||
text-align:center;
|
||
}
|
||
.canvas-text{
|
||
width: 30%;
|
||
position: absolute;
|
||
background: rgba(225,241,255,0.5);
|
||
border-radius: 3px;
|
||
text-align:center;
|
||
padding:8px;
|
||
}
|
||
.canvas-text .row{
|
||
padding:5px 0;
|
||
}
|
||
.canvas-text .font-text{
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
text-align: right;
|
||
color: #6998c3;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.canvas-text .font-num{
|
||
font-size: 12px;
|
||
font-family: Helvetica;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
color: #6998c3;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.canvas-text .border-right-one{
|
||
border-right: 1px solid #999;
|
||
}
|
||
.canvas-text-one{
|
||
top: 22%;
|
||
left: 10px;
|
||
}
|
||
.canvas-text-two{
|
||
top: 54%;
|
||
left: 10px;
|
||
}
|
||
.canvas-text-three{
|
||
top: 80%;
|
||
left: 20%;
|
||
}
|
||
.canvas-text-four{
|
||
top: 90%;
|
||
left: 52%;
|
||
}
|
||
.canvas-text-five{
|
||
top: 55%;
|
||
right: 10px;
|
||
}
|
||
.canvas-text-six{
|
||
top: 7%;
|
||
right: 10px;
|
||
}
|
||
|
||
.iconcube,.iconshuiliang{
|
||
font-size:32px;
|
||
}
|
||
|
||
.top-left-title-text{
|
||
padding:5px;
|
||
text-align: center;
|
||
letter-spacing: 3px;
|
||
color: #ffffff;
|
||
}
|
||
.top-left-title-num{
|
||
font-size: 21px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #0A171F;
|
||
line-height: 29px;
|
||
letter-spacing: 4px;
|
||
color: #69f6f9;
|
||
}
|
||
|
||
.top-left-fuwu{
|
||
height: 34%;
|
||
width: 100%;
|
||
padding:10px 20px;
|
||
}
|
||
.top-left-fuwu-text{
|
||
width:20%;
|
||
float:left;
|
||
color: #6998c3;
|
||
}
|
||
.top-left-fuwu-bar{
|
||
padding-top:5px;
|
||
width:40%;
|
||
float:left;
|
||
}
|
||
.top-left-fuwu-num{
|
||
text-align:right;width:20%;float:left;color: #69f6f9;
|
||
}
|
||
|
||
.iconshuidi,.iconni,.icondian,.iconyaoji{
|
||
font-size:30px;
|
||
}
|
||
@media (max-width: 1600px) {
|
||
.canvas-body{
|
||
padding:0;
|
||
margin:0;
|
||
padding-top:15%;
|
||
}
|
||
.canvas-text-one{
|
||
top: 36%;
|
||
left: 10px;
|
||
}
|
||
.canvas-text-five{
|
||
top: 66%;
|
||
right: 10px;
|
||
}
|
||
.canvas-text-six{
|
||
top: 20%;
|
||
right: 10px;
|
||
}
|
||
.top-left-title-text{
|
||
padding:2px;
|
||
color: #ffffff;
|
||
}
|
||
.top-left-title-num{
|
||
font-size: 18px;
|
||
line-height: 20px;
|
||
color: #69f6f9;
|
||
}
|
||
.top-left-fuwu{
|
||
padding:5px 8px;
|
||
}
|
||
.top-left-fuwu-text{
|
||
color: #6998c3;
|
||
width:30%;
|
||
}
|
||
.top-left-fuwu-bar{
|
||
width:30%;
|
||
}
|
||
.top-left-fuwu-num{
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
color: #69f6f9;
|
||
}
|
||
|
||
.lable-right_2{
|
||
font-size: 12px;
|
||
color: #606163;
|
||
|
||
|
||
}
|
||
.lable-right_21{
|
||
font-size: 12px
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #1D1E1F;
|
||
}
|
||
.progress1{
|
||
margin-bottom: 0px;
|
||
}
|
||
.iconcube,.iconshuiliang,
|
||
.iconshuidi,.iconni,.icondian,.iconyaoji{
|
||
font-size:20px;
|
||
}
|
||
|
||
.canvas-text {
|
||
width: 35%;
|
||
padding: 0px;
|
||
}
|
||
.canvas-text .font-num {
|
||
font-size: 12px;
|
||
line-height: 12px;
|
||
}
|
||
.canvas-text-three{
|
||
top: 80%;
|
||
left: 10%;
|
||
}
|
||
.canvas-text-four{
|
||
top: 90%;
|
||
left: 62%;
|
||
}
|
||
.FontSize-Numbers-Medium {
|
||
font-size: 26px;
|
||
}
|
||
.FontColor-Words-Small,
|
||
.FontSize-Numbers-Xsmall,
|
||
.title_text {
|
||
font-size: 12px;
|
||
}
|
||
.FontSize-Numbers-Xsmall {
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
@media (max-width: 1366px) {
|
||
.canvas-body{
|
||
padding:0;
|
||
margin:0;
|
||
padding-top:15%;
|
||
}
|
||
.canvas-text-one{
|
||
top: 30%;
|
||
left: 10px;
|
||
}
|
||
.canvas-text-five{
|
||
top: 53%;
|
||
right: 10px;
|
||
}
|
||
.canvas-text-six{
|
||
top: 17%;
|
||
right: 10px;
|
||
}
|
||
}
|
||
</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');
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
}
|
||
};
|
||
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,colorNum){
|
||
var sizenub =1;
|
||
|
||
var color = ['#69F6F9','#F5A524','#347EFB'];
|
||
var max = 100;
|
||
// 蓝色背景
|
||
var num = value / max;
|
||
var colorSet = [
|
||
[num, color[colorNum]],
|
||
[1, "#97CEFF"]
|
||
];
|
||
var height = $(document).height()*0.125;
|
||
if($(document).height()<200){
|
||
height = window.screen.availHeight*0.125;
|
||
}
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*1.1
|
||
}
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title:{
|
||
text:title,
|
||
textStyle: {
|
||
fontSize: 12 ,
|
||
fontWeight: 400 ,
|
||
color: '#E3E3E3' ,
|
||
},
|
||
x:'center',
|
||
y:'bottom',
|
||
bottom:0,
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: '达标率',
|
||
type: 'gauge',
|
||
radius: 115*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: 32 ,
|
||
formatter: '{value}%'
|
||
|
||
},
|
||
data: [{value: value}]
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//设备完好率
|
||
function doequgood(id,name,value,colorNum){
|
||
var sizenub = window.screen.height/1080;
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*0.8
|
||
}
|
||
const colorList = ['#EFA103','#3883FF', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
||
var othVal = 100 - value;
|
||
var height = $(document).height()*0.12;
|
||
if($(document).height()<200){
|
||
height = window.screen.availHeight*0.12;
|
||
}
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'25%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: colorList[colorNum],
|
||
fontSize: '26'
|
||
},
|
||
},
|
||
legend: {
|
||
data:[name],
|
||
x: 5+(sizenub-1)*55+'%',
|
||
bottom: 'bottom',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: colorList[colorNum] ,
|
||
lineHeight: 19,
|
||
fontSize: 14 ,
|
||
fontWeight : 700 ,
|
||
},
|
||
},
|
||
color: ['#17191D'],
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: name,
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['55%', '70%'],
|
||
center: ["50%", "35%"], //整体的位置设置
|
||
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);
|
||
}
|
||
//设备类型pie
|
||
function doequtype(id,val){
|
||
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 height = $(document).height()*0.07;
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: '设备\n数量',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#FFFFFF',
|
||
lineHeight: 16
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 28,
|
||
color: '#333'
|
||
},
|
||
textAlign: 'center',
|
||
left: '50%',
|
||
top: '26%'
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'horizontal',
|
||
left: '25%',
|
||
right: 0,
|
||
top: '15%',
|
||
itemGap: 10,
|
||
show:false,
|
||
selectedMode: false,
|
||
data: legendName,
|
||
textStyle: {
|
||
rich: {
|
||
uname: {
|
||
fontSize: 12,
|
||
color: '#82BDF3',
|
||
},
|
||
unum: {
|
||
fontSize: 16,
|
||
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+'}\n{unum|'+value+'}';
|
||
}
|
||
},
|
||
color: colorList,
|
||
series: [
|
||
{
|
||
name: '设备',
|
||
type: 'pie',
|
||
radius: ['70%', '95%'],
|
||
center: ['55%', '50%'],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 3,
|
||
borderColor:'#16314c'
|
||
},
|
||
data: data,
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//处理量、外运量等line
|
||
function doline(id,data,name){
|
||
const colorList = ['#F55945', '#347EFB', '#47C1C8', '#EBA043', '#9E70C7', '#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: '#122F4A' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: colorList[i] // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
lineStyle:{
|
||
color:colorList[i],
|
||
},
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var height = $(document).height()*0.31;
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
bottom: 0,
|
||
x: 'center',
|
||
icon:'roundRect',
|
||
textStyle: {
|
||
color: '#FFFFFF' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
left: '4%',
|
||
right: '1%',
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type : 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name:name,
|
||
splitNumber: 3 ,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color:'#FFFFFF',
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
//药、电等bar
|
||
function doBar(id,data){
|
||
const color = ['#EFA103', '#00CCCC', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var height = $(document).height()*0.31;
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: color,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '4%',
|
||
right: '1%',
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
bottom: 0,
|
||
x: 'center',
|
||
icon:'roundRect',
|
||
textStyle: {
|
||
color: '#ffffff' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name:data.name,
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed',
|
||
opacity:0.3,
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '实际值',
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
barMinWidth: 10 ,
|
||
itemStyle: {
|
||
barBorderRadius: 8 ,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop'
|
||
},
|
||
data: data.value1
|
||
},
|
||
{
|
||
name: '目标值',
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
barMinWidth: 10 ,
|
||
itemStyle: {
|
||
barBorderRadius: 8 ,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
data: data.value2
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
//巡检、维修、保养等完成率bar
|
||
function doendPie(id,data,colorNum){
|
||
const colorList = ['#F5A623','#9E70C7','#397EFB','#47C1C8','#347EFB', '#EBA043', '#A84ECB'];
|
||
var sizenub = window.screen.height/1080;
|
||
if(window.screen.width<1441){
|
||
sizenub = (window.screen.height/1080)*0.9
|
||
}
|
||
var othVal = 100 - data.value;
|
||
var height = $(document).height()*0.11;
|
||
if($(document).height()<200){
|
||
height = window.screen.availHeight*0.11;
|
||
}
|
||
$("#"+id).height(height);
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: ['#F6F8F9'],
|
||
title: {
|
||
text: data.value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'26%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#FFFFFF',
|
||
fontSize: 22*sizenub
|
||
},
|
||
/* subtext:'完好率',
|
||
subtextStyle: {
|
||
fontSize: '12',
|
||
fontWeight: 400,
|
||
color: '#a3a9af',
|
||
} , */
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
x: 0-(1-sizenub)*65,
|
||
y: 'bottom',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#8AC2F6' ,
|
||
lineHeight: 11,
|
||
fontSize: 12 ,
|
||
fontWeight : 500 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['52%', '60%'],
|
||
center: ['50%', '38%'],
|
||
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);
|
||
}
|
||
//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 doTable(id){
|
||
var height = $("#"+id).parent().height();
|
||
$("#"+id).bootstrapTable({
|
||
//url:"",
|
||
height:height,
|
||
striped: false, //是否显示行间隔色
|
||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
||
});
|
||
}
|
||
|
||
var canvas;
|
||
var context;
|
||
var beauty;
|
||
var beautyPng;
|
||
|
||
$(function() {
|
||
|
||
|
||
//init();
|
||
var biz_id = '?biz_id='+unitId;
|
||
$.post(ext.contextPath + '/work/mpoint/getoverviewProduceGroup.do'+biz_id, {} , function(data) {
|
||
//init();
|
||
|
||
var arr= JSON.parse(data);
|
||
$("#equipmentAnomaliesTotal").html(arr.equipmentAnomaliesTotal);
|
||
$("#equ_allnum").html(arr.equipmentTotal);
|
||
$("#equ_runnum").html(arr.equipmentTotalRun);
|
||
$("#equipmentRunAnomalies").html(arr.equipmentRunAnomalies+"/"+arr.equipmentTotal);
|
||
$("#equipmentToAnomalies").html(arr.equipmentToAnomalies+"/"+arr.equipmentTotal);
|
||
var equipmentRunAnomalieswidth = arr.equipmentRunAnomalies*100/arr.equipmentTotal;
|
||
$("#equipmentRunAnomaliesstyle").width(equipmentRunAnomalieswidth+'%');
|
||
var equipmentToAnomalieswidth = arr.equipmentToAnomalies*100/arr.equipmentTotal;
|
||
$("#equipmentToAnomaliesstyle").width(equipmentToAnomalieswidth+'%');
|
||
$("#data16").html(arr.data16);
|
||
$("#data17").html(arr.data17);
|
||
$("#data18").html(arr.data18);
|
||
$("#data19").html(arr.data19);
|
||
$("#data20").html(arr.data20+"万m³");
|
||
$("#fwmj").html(arr.fwmj);
|
||
$("#fwrk").html(arr.fwrk);
|
||
$("#zxyyclnl").html(arr.zxyyclnl+"万m³");
|
||
$("#jnljclsl").html(arr.jnljclsl);
|
||
$("#canvas-title_runnum").html(arr.data29);
|
||
$("#canvas-title_allnum").html(arr.data30);
|
||
// var jsdbl = arr.data21*100/arr.data22;
|
||
//if(arr.data22==0){jsdbl=0;}
|
||
// var csdbl = arr.data23*100/arr.data24;
|
||
// if(arr.data24==0){csdbl=0;}
|
||
var jsdbl = arr.data21;
|
||
var csdbl = arr.data23;
|
||
// var sl = arr.data25*100/arr.data26;
|
||
// if(arr.data26==0){sl=0;}
|
||
//var nl = arr.data27*100/arr.data28;
|
||
// if(arr.data28==0){nl=0;}
|
||
var sl = arr.data25;
|
||
var nl = arr.data27;
|
||
canvas = document.getElementById("canvas");
|
||
context = canvas.getContext('2d');
|
||
beauty = new Image();
|
||
beauty.src = "<%=request.getContextPath()%>/IMG/map_bg2.png";
|
||
beautyPng = new Image();
|
||
beautyPng.src = "<%=request.getContextPath()%>/IMG/map_line.png";
|
||
canvasLoad();
|
||
$(window).resize(function(){
|
||
canvas = document.getElementById("canvas");
|
||
context = canvas.getContext('2d');
|
||
beauty = new Image();
|
||
beauty.src = "<%=request.getContextPath()%>/IMG/map_bg2.png";
|
||
beautyPng = new Image();
|
||
beautyPng.src = "<%=request.getContextPath()%>/IMG/map_line.png";
|
||
canvasLoad();
|
||
});
|
||
|
||
var widget = $('.tabs-basic');
|
||
var tabs = widget.find('ul li');
|
||
tabs.on('click', function (e) {
|
||
e.preventDefault();
|
||
tabs.removeClass('active');
|
||
$(this).addClass('active');
|
||
var allLine = [
|
||
{name:"实际值",value:arr.data},
|
||
{name:"目标值",value:arr.data4}
|
||
];
|
||
var allLine1 = [
|
||
{name:"实际值",value:arr.data1},
|
||
{name:"目标值",value:arr.data5}
|
||
];
|
||
var allLine2 = [
|
||
{name:"实际值",value:arr.data2},
|
||
{name:"目标值",value:arr.data6}
|
||
];
|
||
var allLine3 = [
|
||
{name:"实际值",value:arr.data3},
|
||
{name:"目标值",value:arr.data7}
|
||
];
|
||
var name = $(this).find('.title_text').text();
|
||
|
||
|
||
var drugBar = {name:name,value1:arr.data8
|
||
,value2:arr.data9};
|
||
|
||
var drugBar1 = {name:name,value1:arr.data10
|
||
,value2:arr.data11};
|
||
|
||
var drugBar2 = {name:name,value1:arr.data12
|
||
,value2:arr.data13};
|
||
|
||
var drugBar3 = {name:name,value1:arr.data14
|
||
,value2:arr.data15};
|
||
|
||
|
||
if(name=='水处理(万m3/D)' ){
|
||
doline("line",allLine,name);
|
||
doBar("bar",drugBar,0);
|
||
}else if(name=='泥处理(吨)'){
|
||
doline("line",allLine1,name);
|
||
doBar("bar",drugBar1,0);
|
||
}else if(name=='用电量(kW)'){
|
||
doline("line",allLine2,name);
|
||
doBar("bar",drugBar2,0);
|
||
}else if(name=='吨水电耗(kW)'){
|
||
doline("line",allLine3,name);
|
||
doBar("bar",drugBar3,0);
|
||
}
|
||
});
|
||
dogauge("pie_water",sl,'水量达标率',0);
|
||
dogauge("pie_mud",nl,'泥量达标率',1);
|
||
dogauge("pie_in",jsdbl,'进水达标率',2);
|
||
dogauge("pie_out",csdbl,'出水达标率',2);
|
||
var data = [
|
||
{name: 'A类设备', value: arr.equipmentTotalA},
|
||
{name: 'B类设备', value: arr.equipmentTotalB},
|
||
{name: 'C类设备', value: arr.equipmentTotalC},
|
||
];
|
||
$("#tpA").html('　A类设备<br/> '+arr.equipmentTotalA);
|
||
$("#tpB").html('　B类设备<br/> '+arr.equipmentTotalB);
|
||
$("#tpC").html('　C类设备<br/> '+arr.equipmentTotalC);
|
||
if(window.screen.width<1441){
|
||
$("#tpA").html(' A类设备<br/> 　 '+arr.equipmentTotalA);
|
||
$("#tpB").html(' B类设备<br/> 　 '+arr.equipmentTotalB);
|
||
$("#tpC").html(' C类设备<br/> 　 '+arr.equipmentTotalC);
|
||
}
|
||
doequtype("pie_equ",data);
|
||
var xjPie = {name:"设备完好率", value: arr.equipmentIntactRate};
|
||
doendPie("pie_equ_good",xjPie,0);
|
||
var wxPie = {name:"大修完成率", value: arr.equipmentRepair};
|
||
doendPie("pie_equ_repair",wxPie,1);
|
||
var byPie = {name:"保养完成率", value: arr.equipmentMaintain};
|
||
doendPie("pie_equ_maintain",byPie,2);
|
||
doequgood("pie_inspection_run","运行巡检完成率", arr.yxxj,0);
|
||
doequgood("pie_inspection_equ","设备巡检完成率",arr.sbxj,1);
|
||
var allLine = [
|
||
{name:"实际值",value:arr.data},
|
||
{name:"目标值",value:arr.data4}
|
||
];
|
||
var name = "水处理(万m3/D)";
|
||
doline("line",allLine,name);
|
||
var drugBar = {name:name,value1:arr.data8
|
||
,value2:arr.data9};
|
||
doBar("bar",drugBar,0);
|
||
});
|
||
$.post(ext.contextPath + '/work/mpoint/getValue4Group.do', {bizId:unitId} , function(data) {
|
||
var arr= JSON.parse(data);
|
||
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
||
for(var i=0;i<arr.rows.length;i++){
|
||
$("#"+arr.rows[i].elementCode).text(arr.rows[i].visualCacheData.value);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
function canvasLoad(){
|
||
var Width = document.getElementById("box-body").offsetWidth;
|
||
document.getElementById('canvas').width=Width;
|
||
var scale = Width/920;
|
||
document.getElementById('canvas').height=scale*580;
|
||
context.save();
|
||
context.drawImage(beauty, 0, 0, Width, scale*580);
|
||
var data =[
|
||
/* 手动获取坐标，无数据地块 */
|
||
{"count":80000.400,"name":"青庭新地(04-D09)","lnglats":[[410, 562],[443, 577],[423, 616],[393, 600]]}
|
||
,{"count":75000.400,"name":"万通中心(04-D10)","lnglats":[[432, 521],[459, 556],[446, 570],[415, 556]]}
|
||
];
|
||
if(data!=null && data!=undefined && data!=''){
|
||
for(var i=0;i<data.length;i++){
|
||
|
||
}
|
||
}
|
||
context.save();
|
||
context.drawImage(beautyPng, 0, 0, Width, scale*580);
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini" style="min-width: 1100px;overflow:auto;">
|
||
<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 style="color: #ffffff" id ='head_firstlevel' href="#"><i class="fa fa-refresh"></i> </a>
|
||
<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/overviewProduceGroupBlack.do');">
|
||
黑
|
||
</button>
|
||
<button id="monthButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#D4D4D4;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceGroup.do');">
|
||
白
|
||
</button>
|
||
|
||
</div>-->
|
||
<button id="monthButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#D4D4D4;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceGroup.do');">
|
||
白
|
||
</button>
|
||
</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="content-top row" style="height: 60%;">
|
||
<div class="col-md-3">
|
||
<div class="box box-white">
|
||
<!-- /.box-header -->
|
||
|
||
<div class="box-body" style=" background-color: #16314C" >
|
||
<div style="height: 50%;width: 100%;">
|
||
<div style="height: 33%;width: 100%;">
|
||
<div style="height: 100%;width: 30%;float:left;color:#606163;text-align: center;">
|
||
<i class="iconfont iconcube"></i>
|
||
<div style="color: #6998c3;">项目情况</div>
|
||
</div>
|
||
<div style="height: 100%;width: 70%;float:left;">
|
||
<div class="top-left-title-text">在线运营处理能力</div>
|
||
<div class="top-left-title-num" id = "zxyyclnl">220m³</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-left-fuwu">
|
||
<div style="height: 50%;width: 100%;">
|
||
<div class="FontColor-Words-Small top-left-fuwu-text">服务面积</div>
|
||
<div class="top-left-fuwu-bar">
|
||
<div class="progress1">
|
||
<div class="progress-bar1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;float:left;">
|
||
<span class="sr-only">60% Complete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="FontColor-Numbers-Light FontSize-Numbers-Small top-left-fuwu-num" id="fwmj">2478</div>
|
||
<div class="FontColor-Words-Small" style="width:20%;float:left;text-align:center; ">km²</div>
|
||
</div>
|
||
<div style="height: 50%;width: 100%;">
|
||
<div class="FontColor-Words-Small top-left-fuwu-text">服务人口</div>
|
||
<div class="top-left-fuwu-bar">
|
||
<div class="progress1">
|
||
<div class="progress-bar1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 70%;float:left;">
|
||
<span class="sr-only">40% Complete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="FontColor-Numbers-Light FontSize-Numbers-Small top-left-fuwu-num" id="fwrk">740</div>
|
||
<div class="FontColor-Words-Small" style="width:20%;float:left;text-align:center; ">万人</div>
|
||
</div>
|
||
</div>
|
||
<div style="height: 33%;width: 100%;">
|
||
<div style="height: 100%;width: 30%;float:left;color:#606163;text-align: center;">
|
||
<i class="iconfont iconshuiliang"></i>
|
||
<div style="color: #6998c3;">水量信息</div>
|
||
</div>
|
||
<div style="height: 100%;width: 70%;float:left;">
|
||
<div class="top-left-title-text">今年累计处理水量</div>
|
||
<div id = "data20" class="top-left-title-num" id="jnljclsl">22320.3万吨/日</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height: 50%;width: 100%;">
|
||
<div style="height: 50%;width: 50%;float:left;" id="pie_water">图1</div>
|
||
<div style="height: 50%;width: 50%;float:left;" id="pie_mud">图2</div>
|
||
<div style="height: 50%;width: 50%;float:left;" id="pie_in">图3</div>
|
||
<div style="height: 50%;width: 50%;float:left;" id="pie_out">图4</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="box box-white" style=" background-color: #16314C">
|
||
<!-- /.box-header -->
|
||
<div id="box-body" class="box-body" style="padding:0;">
|
||
<canvas id="canvas" class="canvas-body"></canvas>
|
||
<div class="canvas-title" id="canvas-title">
|
||
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:right;line-height: 3.5;font-weight: 700;">现有员工</div>
|
||
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="canvas-title_allnum">2038</div>
|
||
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:right;line-height: 3.5;font-weight: 700;">项目公司</div>
|
||
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="canvas-title_runnum">19</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-one" id="canvas-text-one" style="background-color:rgba(3,5,18,0.46);">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">漯河BOT：</div>
|
||
<div class="col-md-3 font-num border-right-one">5万</div>
|
||
<div class="col-md-2 font-num" id="luohe"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-two" id="canvas-text-two" style="background-color:rgba(3,5,18,0.46)">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">益阳桃江：</div>
|
||
<div class="col-md-3 font-num border-right-one">3万</div>
|
||
<div class="col-md-2 font-num" id="taojiang"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">益阳城北：</div>
|
||
<div class="col-md-3 font-num border-right-one">8万</div>
|
||
<div class="col-md-2 font-num" id="yiyangchengbei"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">益阳城东：</div>
|
||
<div class="col-md-3 font-num border-right-one">3万</div>
|
||
<div class="col-md-2 font-num" id="chengdong"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-three" style="background-color:rgba(3,5,18,0.46)" id="canvas-text-three">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">东莞大朗：</div>
|
||
<div class="col-md-3 font-num border-right-one">10万</div>
|
||
<div class="col-md-2 font-num" id="dalang"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">东莞雁田：</div>
|
||
<div class="col-md-3 font-num border-right-one">5万</div>
|
||
<div class="col-md-2 font-num" id="yantian"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">东莞石碣：</div>
|
||
<div class="col-md-3 font-num border-right-one">6万</div>
|
||
<div class="col-md-2 font-num" id="shijie"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-four" id="canvas-text-four" style="background-color:rgba(3,5,18,0.46)">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">青浦厂：</div>
|
||
<div class="col-md-3 font-num border-right-one">18万</div>
|
||
<div class="col-md-2 font-num" id="qingpu"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-five" id="canvas-text-five" style="background-color:rgba(3,5,18,0.46)">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">潍坊沙窝：</div>
|
||
<div class="col-md-3 font-num border-right-one">6万</div>
|
||
<div class="col-md-2 font-num" id="shawo"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">潍坊高新：</div>
|
||
<div class="col-md-3 font-num border-right-one">5万</div>
|
||
<div class="col-md-2 font-num" id="gaoxin"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">潍坊城西：</div>
|
||
<div class="col-md-3 font-num border-right-one">4万</div>
|
||
<div class="col-md-2 font-num" id="chengxi"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">潍坊城北：</div>
|
||
<div class="col-md-3 font-num border-right-one">20万</div>
|
||
<div class="col-md-2 font-num" id="weifangchengbei"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">山东德州：</div>
|
||
<div class="col-md-3 font-num border-right-one">10万</div>
|
||
<div class="col-md-2 font-num" id="dezhou"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">枣庄峄城：</div>
|
||
<div class="col-md-3 font-num border-right-one">4万</div>
|
||
<div class="col-md-2 font-num" id="yicheng"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">枣庄山亭：</div>
|
||
<div class="col-md-3 font-num border-right-one">2万</div>
|
||
<div class="col-md-2 font-num" id="shanting"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas-text canvas-text-six" id="canvas-text-six" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceBlotBlack.do');" style="background-color:rgba(3,5,18,0.46)">
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">大连湾：</div>
|
||
<div class="col-md-3 font-num border-right-one">4万</div>
|
||
<div class="col-md-2 font-num" id="dalianwan"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">大连凌水：</div>
|
||
<div class="col-md-3 font-num border-right-one">8万</div>
|
||
<div class="col-md-2 font-num" id="lingshui"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">大连虎滩：</div>
|
||
<div class="col-md-3 font-num border-right-one">9万</div>
|
||
<div class="col-md-2 font-num" id="hutan"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">泉水河：</div>
|
||
<div class="col-md-3 font-num border-right-one">10.5万</div>
|
||
<div class="col-md-2 font-num" id="quanshuihe"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">三十里堡：</div>
|
||
<div class="col-md-3 font-num border-right-one">2万</div>
|
||
<div class="col-md-2 font-num" id="sanshilibao"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 font-text">大连后海：</div>
|
||
<div class="col-md-3 font-num border-right-one">2万</div>
|
||
<div class="col-md-2 font-num" id="houhai"></div>
|
||
<div class="col-md-2 font-num">(m3/D)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="box box-white">
|
||
<!-- /.box-header -->
|
||
<div class="box-body" style=" background-color: #16314C">
|
||
<div style="height: calc(50% - 1px);width: 100%;">
|
||
<div style="height: 20%;width: 100%;">
|
||
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:center;">总设备<br>数量</div>
|
||
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="equ_allnum">1233</div>
|
||
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:center;">投运设备<br>数量</div>
|
||
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="equ_runnum">875</div>
|
||
</div>
|
||
<div style="height: 40%;width: 100%;" >
|
||
<div class="col-md-3 text-center" >
|
||
<div id="pie_equ"></div>
|
||
</div>
|
||
<div class="col-md-3 text-center" >
|
||
<div class="col-md-5 text-center" > 　 </div>
|
||
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #3883FF;" > 　 </div>
|
||
<span class="col-md-12 lable-right_2" style="color: #82bdf3;" id = "tpA">　A类设备</span>
|
||
<span class="col-md-12 lable-right_21" ></span>
|
||
</div>
|
||
<div class="col-md-3 text-center" >
|
||
<div class="col-md-5 text-center" > 　 </div>
|
||
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #FE8840;" > 　 </div>
|
||
<span class="col-md-12 lable-right_2" style="color: #82bdf3;" id = "tpC" >　C类设备</span>
|
||
<span style="height: 100%;width: 100%;" ></span>
|
||
</div>
|
||
|
||
<div class="col-md-3 text-center" >
|
||
<div class="col-md-5 text-center" > 　 </div>
|
||
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #A84ECB;" > 　 </div>
|
||
<span class="col-md-12 lable-right_2" style="color: #82bdf3;" id = "tpB" >　B类设备</span>
|
||
<div class="col-md-12 lable-right_21"></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div style="height: 40%;width: 100%;">
|
||
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_good"></div>
|
||
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_repair"></div>
|
||
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_maintain"></div>
|
||
</div>
|
||
</div>
|
||
<div style="width: calc(100% - 20px);height: 2px;margin:0 10px;opacity: 0.23;border: 1px solid #c4e2e6;"></div>
|
||
<div style="height: calc(50% - 1px);width: 100%;">
|
||
<div style="height: 50%;width: 100%;">
|
||
<div style="height: 100%;width: 30%;float:left;">
|
||
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 50%;width: 100%;text-align:center;padding-top: 10%;" id= "equipmentAnomaliesTotal">1230</div>
|
||
<div class="FontColor-Words-Small" style="height: 50%;width: 100%;text-align:center;padding-top:10%;">异常数量</div>
|
||
</div>
|
||
<div style="height: 100%;width: 70%;float:left;">
|
||
<div style="height: 50%;width: 100%;padding-top:5%;">
|
||
<div class="FontColor-Words-Small" style="width:35%;float:left;">运行异常数量</div>
|
||
<div style="padding-top:5px;width:40%;float:left;">
|
||
<div class="progress1">
|
||
<div class="progress-bar1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id = "equipmentRunAnomaliesstyle" style="float:left;">
|
||
<span class="sr-only">60% Complete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="FontColor-Numbers-Light FontSize-Numbers-Xsmall" id="equipmentRunAnomalies" style="text-align:right;width:25%;float:left;">390/600</div>
|
||
</div>
|
||
<div style="height: 50%;width: 100%;padding-top:5%;">
|
||
<div class="FontColor-Words-Small" style="width:35%;float:left;">设备异常数量</div>
|
||
<div style="padding-top:5px;width:40%;float:left;">
|
||
<div class="progress1">
|
||
<div class="progress-bar1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" id = "equipmentToAnomaliesstyle" style="width: 70%;float:left;">
|
||
<span class="sr-only">40% Complete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="FontColor-Numbers-Light FontSize-Numbers-Xsmall" id="equipmentToAnomalies" style="text-align:right;width:25%;float:left;">600/630</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height: 50%;width: 100%;">
|
||
<div style="height: 100%;width: 50%;float:left;" id="pie_inspection_run"></div>
|
||
<div style="height: 100%;width: 50%;float:left;" id="pie_inspection_equ"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div calss="content-bottom row" style="height: 40%;">
|
||
<div class="col-md-12">
|
||
<div class="box box-white">
|
||
<div class="box-body" style=" background-color: #16314C">
|
||
<div class="tabs-basic" style="height: 100%;width: 14%;float:left;">
|
||
<ul class="nav nav-pills nav-stacked" style="height: 100%;">
|
||
<li class="active" style="height: 25%;border-color:#203E5D;border-width:1px;border-style:solid;padding:1px;" id="water" style=" background-color: #16314C;border-color:#203E5D">
|
||
<a href="#" style="height:100%;width:100%;">
|
||
<i class="iconfont iconshuidi" style="color:#a3d4ff;height:100%;width:20%;float:left;"></i>
|
||
<span class="title_text" style="height:50%;width:80%;color: #F3F3F3;float:left;">水处理(万m3/D)</span>
|
||
<span id="data16" style="height:50%;width:80%;float:left;color: #F3F3F3;font-size:18px;">121.5</span>
|
||
</a>
|
||
</li>
|
||
<li style="height: 25%;border-color:#203E5D;border-width:1px;border-style:solid;padding:1px;" id="ud">
|
||
<a href="#" style="height:100%;width:100%;" style=" background-color: #16314C">
|
||
<i class="iconfont iconni" style="color:#D56C6D;height:100%;width:20%;float:left;"></i>
|
||
<span class="title_text" style="color: #F3F3F3;height:50%;width:80%;float:left;">泥处理(吨)</span>
|
||
<span id="data17" style="height:50%;color: #F3F3F3;width:80%;float:left;font-size:18px;">11,304</span>
|
||
</a>
|
||
</li>
|
||
<li style="height: 25%;border-color:#203E5D;border-width:1px;border-style:solid;padding:1px;" id="ele">
|
||
<a href="#" style="height:100%;width:100%;" style=" background-color: #16314C">
|
||
<i class="iconfont icondian" style="color:#FFA14F;height:100%;width:20%;float:left;"></i>
|
||
<span class="title_text" style="height:50%;color: #F3F3F3;width:80%;float:left;">用电量(kW)</span>
|
||
<span id="data18" style="height:50%;width:80%;color: #F3F3F3;float:left;font-size:18px;">23,325</span>
|
||
</a>
|
||
</li>
|
||
<li style="height: 25%;border-color:#203E5D;border-width:1px;border-style:solid;padding:1px;" id="drug">
|
||
<a href="#" style="height:100%;width:100%;" style=" background-color: #16314C">
|
||
<i class="iconfont iconyaoji" style="color:#F957FA;height:100%;width:20%;float:left;"></i>
|
||
<span class="title_text" style="height:50%;color: #F3F3F3;width:80%;float:left;">吨水电耗(kW)</span>
|
||
<span id="data19" style="height:50%;width:80%;color: #F3F3F3;float:left;font-size:18px;">12,021</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="height: 100%;width: 86%;float:left;">
|
||
<div class="tab-pane active" style="height: 100%;width: 100%;padding:10px 20px;">
|
||
<div class="row" style="height: 100%;">
|
||
<div class="col-md-6" id="line"></div>
|
||
<div class="col-md-6" id="bar"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
</div>
|
||
|
||
</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> |