1856 lines
81 KiB
Plaintext
1856 lines
81 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"%>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
|
|
<title>
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/font-smart/iconfont.css"/>
|
|
<!-- 开关按钮-->
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js" charset="utf-8"></script>
|
|
<style type="text/css">
|
|
.overall-content{
|
|
padding:15px 5px;
|
|
}
|
|
.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-5, .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: 5px;
|
|
padding-left: 5px
|
|
}
|
|
.row-10{
|
|
height:10%;
|
|
}
|
|
.row-15{
|
|
height:15%;
|
|
}
|
|
.row-25{
|
|
height:25%;
|
|
}
|
|
.row-30{
|
|
height:30%;
|
|
}
|
|
.row-35{
|
|
height:35%;
|
|
}
|
|
.row-40{
|
|
height:40%;
|
|
}
|
|
.row-50{
|
|
height:50%;
|
|
}
|
|
.row-70{
|
|
height:70%;
|
|
}
|
|
.row-75{
|
|
height:75%;
|
|
}
|
|
.row-100{
|
|
height:100%;
|
|
}
|
|
.content-wrapper-bg-darkblue{
|
|
background: #0d2336;
|
|
}
|
|
.content-wrapper-bg-grey{
|
|
background: #eeeeee;
|
|
}
|
|
.content-wrapper-bg-white,.bgcolor-white,.bgcolor-white-light{
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.content-wrapper-bg-white,.content-wrapper-bg-transparent{
|
|
margin:0 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.shakou-head{
|
|
height: 90px;
|
|
border-radius: 10px;
|
|
}
|
|
.shakou-head-top{
|
|
height: 35px;
|
|
}
|
|
.shakou-head-bottom{
|
|
height: 55px;
|
|
}
|
|
.shakou-title{
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/rise.png);
|
|
background-repeat:no-repeat;
|
|
background-position:left top;
|
|
}
|
|
.shakou-head>.col-xs-11,.shakou-head>.col-xs-11>.col-xs-3{
|
|
height: 100%;
|
|
}
|
|
.bgcolor-blue{
|
|
background: #052941;
|
|
}
|
|
.padding-top-5{
|
|
padding-top:5px;
|
|
}
|
|
.padding-top-10{
|
|
padding-top: 10px;
|
|
}
|
|
.padding-top-15{
|
|
padding-top: 15px;
|
|
}
|
|
.line-height-08{
|
|
line-height: 0.8;
|
|
}
|
|
.line-height-1{
|
|
line-height: 1;
|
|
}
|
|
.line-height-1-5{
|
|
line-height: 1.5;
|
|
}
|
|
.line-height-2{
|
|
line-height: 2;
|
|
}
|
|
.line-height-3{
|
|
line-height: 3;
|
|
}
|
|
.line-height-4{
|
|
line-height: 4;
|
|
}
|
|
.line-height-5{
|
|
line-height: 5;
|
|
}
|
|
.line-height-6{
|
|
line-height: 6;
|
|
}
|
|
.font-size-12{
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
.font-size-14{
|
|
font-size: 14px;
|
|
line-height: inherit;
|
|
}
|
|
.font-size-16{
|
|
font-size: 16px;
|
|
}
|
|
.font-size-20{
|
|
font-size: 20px;
|
|
}
|
|
.font-size-22{
|
|
font-size: 22px;
|
|
}
|
|
.font-size-30{
|
|
font-size: 30px;
|
|
}
|
|
.font-size-35{
|
|
font-size: 35px;
|
|
}
|
|
.font-size-40{
|
|
font-size: 40px;
|
|
line-height: normal;
|
|
}
|
|
.font-size-50{
|
|
font-size: 50px;
|
|
line-height: 1.5;
|
|
}
|
|
.font-size-65{
|
|
font-size: 65px;
|
|
}
|
|
.font-color-white,.font-color-dark-white{
|
|
color: #dbeeff;
|
|
}
|
|
.font-color-black{
|
|
color: #0d2336;
|
|
font-weight: 600;
|
|
}
|
|
.font-color-red{
|
|
color: #E7A2FF
|
|
}
|
|
.font-color-redlight{
|
|
color: #CE00FF
|
|
}
|
|
.font-color-blue,.font-color-dark-blue{
|
|
color: #69f6f9;
|
|
}
|
|
.font-color-lightBlue,.font-color-light-blue{
|
|
color: #1790ff;
|
|
}
|
|
.font-color-smalt{
|
|
color: #2b9dd8;
|
|
}
|
|
.font-color-lightBlack{
|
|
color: #000;
|
|
}
|
|
.font-color-lightWhite{
|
|
color: #FFFFFF;
|
|
}
|
|
.font-color-1{
|
|
color: #fff12d;
|
|
}
|
|
.font-color-2{
|
|
color: #d62dff;
|
|
}
|
|
.font-color-3{
|
|
color: #9cef2e;
|
|
}
|
|
.font-color-4{
|
|
color: #2dabff;
|
|
}
|
|
.font-color-5{
|
|
color: #ffb536;
|
|
}
|
|
.color-green{
|
|
color: #2ECE3E;
|
|
}
|
|
.color-yellow{
|
|
color: #FFE923;
|
|
}
|
|
.color-blue{
|
|
color: #1472FF;
|
|
}
|
|
.left-top{
|
|
height: 345px;
|
|
}
|
|
.left-middle{
|
|
height: 345px;
|
|
}
|
|
.left-bottom{
|
|
height: 345px;
|
|
}
|
|
.center-top{
|
|
height: 75px;
|
|
padding-top:1%;
|
|
}
|
|
.center-middle{
|
|
height: 550px;
|
|
}
|
|
|
|
.center-map{
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/map_new.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.center-bottom{
|
|
height: 380px;
|
|
|
|
}
|
|
.margin-bottom-15{
|
|
margin-bottom: 15px;
|
|
}
|
|
.margin-bottom-22{
|
|
margin-bottom: 22px;
|
|
}
|
|
.right-top{
|
|
height: 515px;
|
|
|
|
}
|
|
.right-title-long{
|
|
width: 122px;
|
|
height: 26px;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title_long.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.right-title-long-blue{
|
|
width: 122px;
|
|
height: 26px;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title_long_blue.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.right-title{
|
|
width: 122px;
|
|
height: 26px;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
.right-title-blue{
|
|
width: 122px;
|
|
height: 26px;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title_blue.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.right-middle{
|
|
height: 165px;
|
|
|
|
}
|
|
.right-bottom{
|
|
height: 515px;
|
|
|
|
}
|
|
.text-bar{
|
|
margin-top: 5px;
|
|
max-width: 10px;
|
|
min-height:50px;
|
|
height:95%;
|
|
border-radius: 5px;
|
|
}
|
|
.text-bar-1{
|
|
background: #fff12d;
|
|
}
|
|
.text-bar-2{
|
|
background: #d62dff;
|
|
}
|
|
.text-bar-3{
|
|
background: #9cef2e;
|
|
}
|
|
.text-bar-4{
|
|
background: #2dabff;
|
|
}
|
|
.text-bar-5{
|
|
background: #ffb536;
|
|
}
|
|
.pad-bottom-10{
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.bootstrap-switch,.bootstrap-switch-handle-on,.bootstrap-switch-handle-off {
|
|
border-radius: 15px;
|
|
}
|
|
.bootstrap-switch-container{
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
|
|
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
|
|
background: #0d2336;
|
|
}
|
|
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
|
|
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
|
|
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
|
|
line-height: 1;
|
|
}
|
|
.nav>li>a {
|
|
padding:0 15px;
|
|
border:0;
|
|
}
|
|
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
|
|
background-color: transparent;
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.nav-pills>li.active>.waterData, .nav-pills>li.active>.waterData:focus, .nav-pills>li.active>.waterData:hover,
|
|
.nav-pills>li.active>.electricData, .nav-pills>li.active>.electricData:focus, .nav-pills>li.active>.electricData:hover,
|
|
.nav-pills>li.active>.drugData, .nav-pills>li.active>.drugData:focus, .nav-pills>li.active>.drugData:hover {
|
|
color:#69f6f9;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/tab_bg_dark.png);
|
|
}
|
|
.nav-pills>li.active>.waterData-light, .nav-pills>li.active>.waterData-light:focus, .nav-pills>li.active>.waterData-light:hover {
|
|
color:#00B9FF;
|
|
border-bottom: 2px solid #00B9FF;
|
|
}
|
|
.nav-pills>li.active>.electricData-light, .nav-pills>li.active>.electricData-light:focus, .nav-pills>li.active>.electricData-light:hover {
|
|
color:#FFCC01;
|
|
border-bottom: 2px solid #FFCC01;
|
|
}
|
|
.nav-pills>li.active>.drugData-light, .nav-pills>li.active>.drugData-light:focus, .nav-pills>li.active>.drugData-light:hover {
|
|
color:#F700FF;
|
|
border-bottom: 2px solid #F700FF;
|
|
}
|
|
.nav-pills>li.active>.modular, .nav-pills>li.active>.modular:focus, .nav-pills>li.active>.modular:hover {
|
|
color:#0d2336;
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title.png);
|
|
padding:0 30px;
|
|
}
|
|
.nav-pills>li>.modular,.nav-pills>li>.modular:hover {
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/title_dark.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 100% 100%;
|
|
padding:0 30px;
|
|
color:#0D2336;
|
|
}
|
|
.map-content{
|
|
width: 180px;
|
|
background: rgba(0,0,0,0.70);
|
|
border: 1px solid #707070;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
}
|
|
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
|
|
border: 0;
|
|
}
|
|
.barAndPie{
|
|
height:260px;
|
|
width: 600px;
|
|
}
|
|
.annular{
|
|
height:280px;
|
|
width: 280px;
|
|
}
|
|
.annular-bg{
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/logo.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
}
|
|
.annular-bg-light{
|
|
background-image: url(<%=request.getContextPath()%>/IMG/shakou/logo_light.png);
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
}
|
|
.progress_bar{
|
|
width: 380px;
|
|
}
|
|
.top-right-middle{
|
|
height:90px;
|
|
padding:10px 5px;
|
|
}
|
|
.top-right-bottom{
|
|
height:210px;
|
|
padding-top:10px;
|
|
}
|
|
.bottom-line{
|
|
height: 320px;
|
|
width: 620px;
|
|
}
|
|
.border-left{
|
|
border-left: 1px solid #c1c1c1;
|
|
}
|
|
.border-right{
|
|
border-right: 1px solid #c1c1c1;
|
|
}
|
|
.border-bottom{
|
|
border-bottom: 1px solid #c1c1c1;
|
|
}
|
|
.border-leftAndRight{
|
|
border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;
|
|
}
|
|
.bgcolor-blue-light{
|
|
background: #192B73;
|
|
}
|
|
.bgcolor-transparent{
|
|
background: transparent;
|
|
border-radius: 5px;
|
|
}
|
|
.nowTime{
|
|
position: absolute;
|
|
font-size: 35px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
var fontcolor_grey = '#aeaeae';
|
|
var fontcolor_black = '#0d2336';
|
|
var color_blue = '#36FFF9';
|
|
var color_blue_other = '#1D4F6D';
|
|
var img_name = '';
|
|
|
|
var color = ['#649DFF','#64FFFA','#ff2ee3','#2e97ff','#ffb536'];
|
|
$(function () {
|
|
var height = $(window).height();
|
|
if(height<100){
|
|
height = window.screen.height-150;
|
|
}
|
|
var proportion = height/1080;
|
|
$('.shakou-head').height($('.shakou-head').height()*proportion);
|
|
$('.shakou-head-top').height($('.shakou-head-top').height()*proportion);
|
|
$('.shakou-head-bottom').height($('.shakou-head-bottom').height()*proportion);
|
|
$('.left-top').height($('.left-top').height()*proportion);
|
|
$('.left-top-line').height($('.left-top').height()-30);
|
|
$('.left-middle').height($('.left-middle').height()*proportion);
|
|
$('.left-bottom').height($('.left-bottom').height()*proportion);
|
|
$('.bottom-line').height($('.bottom-line').height()*proportion);
|
|
$('.bottom-line').width($('.bottom-line').width()*proportion);
|
|
|
|
$('.center-top').height($('.center-top').height()*proportion);
|
|
$('.center-middle').height($('.center-middle').height()*proportion);
|
|
$('.center-bottom').height($('.center-bottom').height()*proportion);
|
|
$('.center-bottom-line').height($('.center-bottom').height()-30);
|
|
|
|
$('.annular').height($('.annular').height()*proportion);
|
|
$('.annular').width($('.annular').width()*proportion);
|
|
$('.annular').css('background-size',(164*proportion)+'px '+(164*proportion)+'px');
|
|
$('.barAndPie').height($('.barAndPie').height()*proportion);
|
|
$('.barAndPie').width($('.barAndPie').width()*proportion);
|
|
$('.progress_bar').width($('.progress_bar').width()*proportion);
|
|
|
|
$('.top-right-middle').height($('.top-right-middle').height()*proportion);
|
|
$('.top-right-bottom').height($('.top-right-bottom').height()*proportion);
|
|
|
|
var bizid = unitId;
|
|
$('#switch').bootstrapSwitch({ //初始化按钮
|
|
onText:" ",
|
|
offText:" ",
|
|
onColor:"primary",
|
|
offColor:"default",
|
|
size:"mini",
|
|
handleWidth:10,
|
|
labelWidth:20,
|
|
onSwitchChange:function(event,state){
|
|
if(state==true){
|
|
console.log("深色");
|
|
addAndRemove4Class('content-wrapper-bg-grey','content-wrapper-bg-darkblue');
|
|
addAndRemove4Class('content-wrapper-bg-white','content-wrapper-bg-transparent');
|
|
addAndRemove4Class('font-color-lightBlack','font-color-white');
|
|
addAndRemove4Class('font-color-lightBlue','font-color-blue');
|
|
addAndRemove4Class('font-color-smalt','font-color-dark-blue');
|
|
addAndRemove4Class('font-color-lightWhite','font-color-black');
|
|
addAndRemove4Class('font-color-light-blue','font-color-dark-white');
|
|
addAndRemove4Class('bgcolor-white-light','bgcolor-blue-light');
|
|
addAndRemove4Class('bgcolor-white','bgcolor-transparent');
|
|
addAndRemove4Class('right-title-blue','right-title');
|
|
addAndRemove4Class('annular-bg-light','annular-bg');
|
|
addAndRemove4Class('waterData-light','waterData');
|
|
addAndRemove4Class('electricData-light','electricData');
|
|
addAndRemove4Class('drugData-light','drugData');
|
|
fontcolor_black = '#0d2336';
|
|
color_blue = '#36FFF9';
|
|
color_blue_other = '#1D4F6D';
|
|
img_name = '';
|
|
$('.switch-title').html("深色模式");
|
|
}else{
|
|
console.log("浅色");
|
|
addAndRemove4Class('content-wrapper-bg-darkblue','content-wrapper-bg-grey');
|
|
addAndRemove4Class('content-wrapper-bg-transparent','content-wrapper-bg-white');
|
|
addAndRemove4Class('font-color-white','font-color-lightBlack');
|
|
addAndRemove4Class('font-color-black','font-color-lightWhite');
|
|
addAndRemove4Class('font-color-blue','font-color-lightBlue');
|
|
addAndRemove4Class('font-color-dark-blue','font-color-smalt');
|
|
addAndRemove4Class('font-color-dark-white','font-color-light-blue');
|
|
addAndRemove4Class('bgcolor-blue-light','bgcolor-white-light');
|
|
addAndRemove4Class('bgcolor-transparent','bgcolor-white');
|
|
addAndRemove4Class('right-title','right-title-blue');
|
|
addAndRemove4Class('annular-bg','annular-bg-light');
|
|
addAndRemove4Class('waterData','waterData-light');
|
|
addAndRemove4Class('electricData','electricData-light');
|
|
addAndRemove4Class('drugData','drugData-light');
|
|
fontcolor_black = '#fff';
|
|
color_blue = '#1790FF';
|
|
color_blue_other = '#E9E9E9';
|
|
img_name = '_blue';
|
|
$('.switch-title').html("浅色模式");
|
|
}
|
|
getData(bizid);
|
|
}
|
|
});
|
|
var data = {
|
|
value:0,
|
|
}
|
|
doBar("annular",data);
|
|
data = {
|
|
value:0,
|
|
list:[
|
|
{ value: 0, name: '通用设备' },
|
|
{ value: 0, name: '电气设备' },
|
|
{ value: 0, name: '仪器仪表' },
|
|
{ value: 0, name: '水专业设备' },
|
|
{ value: 0, name: '计算机及其外围设备' }
|
|
],
|
|
}
|
|
doBarAndPie("barAndPie",data);
|
|
data = {
|
|
value1:0,
|
|
value2:0,
|
|
}
|
|
progressBar('progress_bar_left',data,'#2ECE3E','#FFE923');
|
|
data = {
|
|
value1:0,
|
|
value2:0,
|
|
}
|
|
progressBar('workorder_bar_right',data,'#E7A2FF','#CE00FF');
|
|
progressBar('progress_bar_right',data,'#69F6F9','#1472FF');
|
|
var legenddata = ['取水量','供水量'];
|
|
var seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',22],['2021-10-20 15:00',21]]
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
}
|
|
]
|
|
echarts_line('left-middle-line',legenddata,seriesdata);
|
|
legenddata = ['原水水质','出水水质'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',22],['2021-10-20 15:00',21]]
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
}
|
|
]
|
|
echarts_line('waterQualityTurbidity',legenddata,seriesdata);
|
|
/* echarts_line('waterQualityPH',legenddata,seriesdata);
|
|
echarts_line('waterQualityChlorine',legenddata,seriesdata);*/
|
|
|
|
/* legenddata = ['电耗','自用水率','矾耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',21]]
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
},
|
|
{
|
|
name: legenddata[2],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',22],['2021-10-20 15:00',21]]
|
|
}
|
|
]
|
|
echarts_line('consume',legenddata,seriesdata); */
|
|
legenddata = ['制水电耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',21]]
|
|
},
|
|
/* {
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
} */
|
|
]
|
|
echarts_line('consumePower',legenddata,seriesdata);
|
|
legenddata = ['自用水率'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',22],['2021-10-20 15:00',21]]
|
|
},
|
|
/* {
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
} */
|
|
]
|
|
echarts_line('consumeWater',legenddata,seriesdata);
|
|
legenddata = ['矾耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',20],['2021-10-20 01:00',21],['2021-10-20 02:00',22],['2021-10-20 03:00',23],['2021-10-20 04:00',24],['2021-10-20 05:00',21],['2021-10-20 06:00',23]
|
|
,['2021-10-20 07:00',24],['2021-10-20 08:00',22],['2021-10-20 09:00',25],['2021-10-20 10:00',25],['2021-10-20 11:00',21],['2021-10-20 12:00',22],['2021-10-20 13:00',23]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',21]]
|
|
},
|
|
/* {
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: [['2021-10-20 00:00',30],['2021-10-20 01:00',31],['2021-10-20 02:00',32],['2021-10-20 03:00',33],['2021-10-20 04:00',34],['2021-10-20 05:00',31],['2021-10-20 06:00',33]
|
|
,['2021-10-20 07:00',34],['2021-10-20 08:00',32],['2021-10-20 09:00',35],['2021-10-20 10:00',35],['2021-10-20 11:00',31],['2021-10-20 12:00',32],['2021-10-20 13:00',33]
|
|
,['2021-10-20 14:00',32],['2021-10-20 15:00',31]]
|
|
} */
|
|
]
|
|
echarts_line('consumeDrug',legenddata,seriesdata);
|
|
getData(bizid);
|
|
setInterval("getData('"+bizid+"')",600000);
|
|
|
|
/* var nowTime = getNowTime();
|
|
$('#nowTime').html(nowTime);
|
|
setInterval(function(){
|
|
var nowTime = getNowTime();
|
|
$('#nowTime').html(nowTime);
|
|
}, 1000); */
|
|
});
|
|
|
|
function addAndRemove4Class(one,two){
|
|
$('.'+one).addClass(two);
|
|
$('.'+one).removeClass(one);
|
|
}
|
|
function getData(bizid){
|
|
var jsp_id = $('#jsp_id').val();
|
|
var time_input = $('#time_input').val();
|
|
$.post(ext.contextPath + '/shakou/getShaKouCompanyData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
|
|
var arr= JSON.parse(data);
|
|
console.log(arr);
|
|
var health_evaluation_score = 0;
|
|
var safe_operation_days = 0;
|
|
var level_1_alarms_number = 0;
|
|
var current_month_process_alarms_number = 0;
|
|
var work_total_number = 0;
|
|
var work_complete_number = 0;
|
|
var patrol_inspection_completion_num = 0;
|
|
var patrol_inspection_num = 0;
|
|
var general_equipment_number = 0;
|
|
var electrical_equipment_number = 0;
|
|
var instruments_apparatuses_equipment_number = 0;
|
|
var water_specialty_equipment_number = 0;
|
|
var computer_and_peripheral_equipment_number = 0;
|
|
var daily_water_supply_dataseries = [];
|
|
var daily_water_intake_dataseries = [];
|
|
var actual_ton_water_power_consumption_dataseries = [];
|
|
var planned_ton_water_power_consumption_dataseries = [];
|
|
var actual_ton_water_drug_consumption_dataseries = [];
|
|
var planned_ton_water_drug_consumption_dataseries = [];
|
|
var accumulated_today_dataseries = [];
|
|
var target_water_volume_dataseries = [];
|
|
var raw_water_quality_dataseries = [];
|
|
var effluent_quality_dataseries = [];
|
|
var equipment_intact_rate = 0;
|
|
|
|
var raw_water_turbidity_dataseries = [];
|
|
var raw_water_ph_dataseries = [];
|
|
var effluent_turbidity_dataseries = [];
|
|
var effluent_ph_dataseries = [];
|
|
var effluent_free_chlorine_dataseries = [];
|
|
|
|
if(arr.shakou!=null && arr.shakou!=undefined && arr.shakou!=''){
|
|
for(var i=0;i<arr.shakou.length;i++){
|
|
var value =0;
|
|
var numtail=0;
|
|
var dataMax=0;
|
|
var rate = 1;
|
|
var nowdate = getNowTime();
|
|
if(arr.shakou[i].visualCacheConfig!=null
|
|
&& arr.shakou[i].visualCacheConfig!=undefined
|
|
&& arr.shakou[i].visualCacheConfig!=''){
|
|
var visualCacheConfig = arr.shakou[i].visualCacheConfig;
|
|
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && visualCacheConfig.numtail!=''){
|
|
numtail = visualCacheConfig.numtail;
|
|
}
|
|
}
|
|
if(arr.shakou[i].visualCacheData!=null
|
|
&& arr.shakou[i].visualCacheData!=undefined
|
|
&& arr.shakou[i].visualCacheData!=''){
|
|
var visualCacheData = arr.shakou[i].visualCacheData;
|
|
if(visualCacheData.inivalue!=null && visualCacheData.inivalue!=undefined && visualCacheData.inivalue!=''){
|
|
value = visualCacheData.inivalue;
|
|
}else{
|
|
if(visualCacheData.value!=null && visualCacheData.value!=undefined && visualCacheData.value!=''){
|
|
value = visualCacheData.value;
|
|
}else{
|
|
if(arr.shakou[i].mPoint!=null && arr.shakou[i].mPoint!=undefined && arr.shakou[i].mPoint!=''){
|
|
var mPoint = arr.shakou[i].mPoint;
|
|
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
|
value = mPoint.parmvalue;
|
|
}
|
|
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
|
dataMax = mPoint.alarmmax;
|
|
}
|
|
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
|
numtail = mPoint.numtail;
|
|
}
|
|
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
|
|
nowdate = mPoint.measuredt;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && visualCacheData.numtail!=''){
|
|
numtail = visualCacheData.numtail;
|
|
}
|
|
if(visualCacheData.insdt!=null && visualCacheData.insdt!=undefined && visualCacheData.insdt!=''){
|
|
nowdate = visualCacheData.insdt;
|
|
}
|
|
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && visualCacheData.rate!=''){
|
|
rate = visualCacheData.rate;
|
|
}
|
|
}else{
|
|
var mPoint = arr.shakou[i].mPoint;
|
|
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
|
|
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
|
value = mPoint.parmvalue;
|
|
}
|
|
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
|
dataMax = mPoint.alarmmax;
|
|
}
|
|
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
|
numtail = mPoint.numtail;
|
|
}
|
|
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
|
|
nowdate = mPoint.measuredt;
|
|
}
|
|
}
|
|
}
|
|
value = parseFloat(value)*rate;
|
|
value = value.toFixed(numtail);
|
|
if($("."+arr.shakou[i].elementCode).length > 0){
|
|
$("."+arr.shakou[i].elementCode).html(toThousands(value));
|
|
}
|
|
if($("."+arr.shakou[i].elementCode).parent().find('.nowdate').length > 0){
|
|
$("."+arr.shakou[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
|
|
}
|
|
//健康评价得分
|
|
if(arr.shakou[i].elementCode=='health_evaluation_score'){
|
|
health_evaluation_score=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='equipment_intact_rate'){
|
|
equipment_intact_rate=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='general_equipment_number'){
|
|
general_equipment_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='electrical_equipment_number'){
|
|
electrical_equipment_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='instruments_apparatuses_equipment_number'){
|
|
instruments_apparatuses_equipment_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='water_specialty_equipment_number'){
|
|
water_specialty_equipment_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='computer_and_peripheral_equipment_number'){
|
|
computer_and_peripheral_equipment_number=value;
|
|
}
|
|
|
|
if(arr.shakou[i].elementCode=='current_month_process_alarms_number'){
|
|
current_month_process_alarms_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='level_1_alarms_number'){
|
|
level_1_alarms_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='work_complete_number'){
|
|
work_complete_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='work_total_number'){
|
|
work_total_number=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='patrol_inspection_completion_num'){
|
|
patrol_inspection_completion_num=value;
|
|
}
|
|
if(arr.shakou[i].elementCode=='patrol_inspection_num'){
|
|
patrol_inspection_num=value;
|
|
}
|
|
|
|
if(arr.shakou[i].elementCode=='daily_water_supply_line'){
|
|
daily_water_supply_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='daily_water_intake'){
|
|
daily_water_intake_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='actual_ton_water_power_consumption'){
|
|
actual_ton_water_power_consumption_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='planned_ton_water_power_consumption'){
|
|
planned_ton_water_power_consumption_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='actual_ton_water_drug_consumption'){
|
|
actual_ton_water_drug_consumption_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='planned_ton_water_drug_consumption'){
|
|
planned_ton_water_drug_consumption_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='accumulated_today'){
|
|
accumulated_today_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='target_water_volume'){
|
|
target_water_volume_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='raw_water_quality'){
|
|
raw_water_quality_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='effluent_quality'){
|
|
effluent_quality_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='raw_water_turbidity'){
|
|
raw_water_turbidity_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='raw_water_ph'){
|
|
raw_water_ph_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='effluent_turbidity'){
|
|
effluent_turbidity_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='effluent_ph'){
|
|
effluent_ph_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
if(arr.shakou[i].elementCode=='effluent_free_chlorine'){
|
|
effluent_free_chlorine_dataseries = getdataseries(arr.shakou[i].mPointHistory,arr.shakou[i].visualCacheDataList,numtail);
|
|
}
|
|
}
|
|
}
|
|
|
|
var annular_data = {
|
|
value:health_evaluation_score,
|
|
}
|
|
doBar("annular",annular_data);
|
|
data = {
|
|
value:equipment_intact_rate,
|
|
list:[
|
|
{ value: general_equipment_number, name: '通用设备' },
|
|
{ value: electrical_equipment_number, name: '电气设备' },
|
|
{ value: instruments_apparatuses_equipment_number, name: '仪器仪表' },
|
|
{ value: water_specialty_equipment_number, name: '水专业设备' },
|
|
{ value: computer_and_peripheral_equipment_number, name: '计算机及其外围设备' }
|
|
],
|
|
}
|
|
doBarAndPie("barAndPie",data);
|
|
data = {
|
|
value1:current_month_process_alarms_number,
|
|
value2:level_1_alarms_number,
|
|
}
|
|
progressBar('progress_bar_left',data,'#2ECE3E','#FFE923');
|
|
data = {
|
|
value1:work_complete_number,
|
|
value2:work_total_number,
|
|
}
|
|
progressBar('workorder_bar_right',data,'#E7A2FF','#CE00FF');
|
|
data = {
|
|
value1:patrol_inspection_completion_num,
|
|
value2:patrol_inspection_num,
|
|
}
|
|
progressBar('progress_bar_right',data,'#69F6F9','#1472FF');
|
|
var legenddata = ['取水量','供水量'];
|
|
var seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: daily_water_intake_dataseries
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: daily_water_supply_dataseries
|
|
}
|
|
]
|
|
if(daily_water_intake_dataseries.length>0 || daily_water_supply_dataseries.length>0 ){
|
|
echarts_line('left-middle-line',legenddata,seriesdata);
|
|
}
|
|
legenddata = ['浊度','PH'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: raw_water_turbidity_dataseries
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
yAxisIndex: 1,
|
|
data: raw_water_ph_dataseries
|
|
}
|
|
]
|
|
if(raw_water_turbidity_dataseries.length>0 || raw_water_ph_dataseries.length>0 ){
|
|
echarts_line_2y('waterQualityTurbidity',legenddata,seriesdata);
|
|
}
|
|
legenddata = ['浊度','PH','游离氯'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: effluent_turbidity_dataseries
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
yAxisIndex: 1,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: effluent_ph_dataseries
|
|
},
|
|
{
|
|
name: legenddata[2],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: effluent_free_chlorine_dataseries
|
|
}
|
|
]
|
|
if(effluent_turbidity_dataseries.length>0 || effluent_ph_dataseries.length>0 || effluent_free_chlorine_dataseries.length>0 ){
|
|
echarts_line_2y('waterQualityTurbidity_out',legenddata,seriesdata);
|
|
}
|
|
/* legenddata = ['电耗','自用水率','矾耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: actual_ton_water_power_consumption_dataseries
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: accumulated_today_dataseries
|
|
},
|
|
{
|
|
name: legenddata[2],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: actual_ton_water_drug_consumption_dataseries
|
|
}
|
|
]
|
|
echarts_line('consume',legenddata,seriesdata); */
|
|
|
|
legenddata = ['制水电耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: actual_ton_water_power_consumption_dataseries
|
|
},
|
|
/* {
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: planned_ton_water_power_consumption_dataseries
|
|
} */
|
|
]
|
|
if(actual_ton_water_power_consumption_dataseries.length>0 ){
|
|
echarts_line('consumePower',legenddata,seriesdata);
|
|
}
|
|
legenddata = ['自用水率'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: accumulated_today_dataseries
|
|
},
|
|
/* {
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: target_water_volume_dataseries
|
|
} */
|
|
]
|
|
if(accumulated_today_dataseries.length>0 ){
|
|
echarts_line('consumeWater',legenddata,seriesdata);
|
|
}
|
|
legenddata = ['单位矾耗','单位氯耗'];
|
|
seriesdata = [
|
|
{
|
|
name: legenddata[0],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: actual_ton_water_drug_consumption_dataseries
|
|
},
|
|
{
|
|
name: legenddata[1],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: planned_ton_water_drug_consumption_dataseries
|
|
}
|
|
]
|
|
if(actual_ton_water_drug_consumption_dataseries.length>0 || planned_ton_water_drug_consumption_dataseries.length>0 ){
|
|
echarts_line('consumeDrug',legenddata,seriesdata);
|
|
}
|
|
});
|
|
$.post(ext.contextPath + "/equipment/getEquipmentOverview_Target.do",
|
|
{unitId:'FS_SK11_C',date:'${nowdate.substring(0,7)}'},
|
|
function(data) {
|
|
var result = data.result;
|
|
var level_a_num = result.level_a_num;//A类设备-数量
|
|
var level_b_num = result.level_b_num;//B类设备-数量
|
|
var level_c_num = result.level_c_num;//C类设备-数量
|
|
var not_config_level_num = result.not_config_level_num;//其他设备-数量
|
|
$("#equipment_A_number").html(toThousands(level_a_num));
|
|
$("#equipment_B_number").html(toThousands(level_b_num));
|
|
$("#equipment_C_number").html(toThousands(level_c_num));
|
|
},'json');
|
|
//完成演练数
|
|
$.post(ext.contextPath + "/equipment/getEmergencyRecordCount.do",
|
|
{unitId:'FS_SK11_C',type:1},
|
|
function(data) {
|
|
var result = data.result;
|
|
$(".complete_drill_number").html(toThousands(result));
|
|
},'json');
|
|
//计划演练数
|
|
$.post(ext.contextPath + "/equipment/getEmergencyRecordCount.do",
|
|
{unitId:'FS_SK11_C',type:0},
|
|
function(data) {
|
|
var result = data.result;
|
|
$(".plan_drill_number").html(toThousands(result));
|
|
},'json');
|
|
}
|
|
function getdataseries(mPointHistory,visualCacheDataList,numtail){
|
|
var dataseries =[];
|
|
if(mPointHistory!=null
|
|
&& mPointHistory!=undefined
|
|
&& mPointHistory!=''){
|
|
var mPointHistory = mPointHistory;
|
|
for(var m=0;m<mPointHistory.length;m++){
|
|
var dataserie =[];
|
|
dataserie.push(mPointHistory[m].measuredt.substr(0,16));
|
|
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
|
dataseries.push(dataserie);
|
|
}
|
|
}else{
|
|
if(visualCacheDataList!=null
|
|
&& visualCacheDataList!=undefined
|
|
&& visualCacheDataList!=''){
|
|
var visualCacheDataList = visualCacheDataList;
|
|
for(var m=0;m<visualCacheDataList.length;m++){
|
|
var dataserie =[];
|
|
dataserie.push(visualCacheDataList[m].insdt.substr(0,16));
|
|
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
|
dataseries.push(dataserie);
|
|
}
|
|
}
|
|
}
|
|
return dataseries;
|
|
}
|
|
function echarts_line(id,legenddata,seriesdata){
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|
lifeChart.dispose();
|
|
}
|
|
var option = {
|
|
color:color,
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: legenddata,
|
|
x:'right',
|
|
textStyle: {
|
|
color: fontcolor_grey ,
|
|
fontSize: 12 ,
|
|
},
|
|
icon:'roundRect'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed' ,
|
|
}
|
|
}
|
|
},
|
|
series: seriesdata,
|
|
};
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|
lifeChart.setOption(option,true);
|
|
}
|
|
|
|
function echarts_line_2y(id,legenddata,seriesdata){
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|
lifeChart.dispose();
|
|
}
|
|
var option = {
|
|
color:color,
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: legenddata,
|
|
x:'right',
|
|
textStyle: {
|
|
color: fontcolor_grey ,
|
|
fontSize: 12 ,
|
|
},
|
|
icon:'roundRect'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed' ,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed' ,
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: seriesdata,
|
|
};
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|
lifeChart.setOption(option,true);
|
|
}
|
|
function doBar(id,data){
|
|
var myChart = echarts.init(document.getElementById(id));
|
|
var option = {
|
|
/* title: [
|
|
{
|
|
text: data.value.toFixed(0),
|
|
left: '48%',
|
|
top: '35%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: '67',
|
|
fontWeight: '400',
|
|
color: '#69F6F9',
|
|
textAlign: 'center',
|
|
textBorderColor: 'rgba(0, 0, 0, 0)',
|
|
textShadowColor: '#000',
|
|
textShadowBlur: '0',
|
|
textShadowOffsetX: 0,
|
|
textShadowOffsetY: 1,
|
|
},
|
|
},
|
|
], */
|
|
polar: {
|
|
radius: ['65%', '75%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
clockwise: false,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true,
|
|
z: 2,
|
|
showBackground: true,
|
|
data: [data.value],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#36FFF9'
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option, true);
|
|
}
|
|
function doBarAndPie(id,data){
|
|
var myChart = echarts.init(document.getElementById(id));
|
|
var option = {
|
|
color:['#71D3FF','#8871FF','#F671FF','#28EC77','#FFFA71'],
|
|
title: [
|
|
{
|
|
text: data.value + '%',
|
|
left: '50%',
|
|
top: '43%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: '24',
|
|
fontWeight: '400',
|
|
color: '#69F6F9',
|
|
textAlign: 'center',
|
|
textBorderColor: 'rgba(0, 0, 0, 0)',
|
|
textShadowColor: '#000',
|
|
textShadowBlur: '0',
|
|
textShadowOffsetX: 0,
|
|
textShadowOffsetY: 1,
|
|
},
|
|
},
|
|
],
|
|
polar: {
|
|
radius: ['45%', '55%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
clockwise: false,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true,
|
|
z: 2,
|
|
showBackground: true,
|
|
data: [data.value],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#36FFF9'
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['60%', '80%'],
|
|
label: {
|
|
color: "#fff" ,
|
|
},
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
data: data.list
|
|
}
|
|
],
|
|
};
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
function progressBar(id,data,color1,color2){
|
|
var myChart = echarts.init(document.getElementById(id));
|
|
var option={
|
|
grid: {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: '5%',
|
|
right: '5%'
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: "value",
|
|
boundaryGap: [0, 0]
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "category",
|
|
data: [""],
|
|
axisLine: { show: false },
|
|
axisTick: [
|
|
{
|
|
show: false
|
|
}
|
|
]
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "金额",
|
|
type: "bar",
|
|
zlevel: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 9,
|
|
color: color1
|
|
}
|
|
},
|
|
barWidth: 20,
|
|
data: [data.value1]
|
|
},
|
|
{
|
|
name: "背景",
|
|
type: "bar",
|
|
barWidth: 20,
|
|
barGap: "-100%",
|
|
data: [data.value2],
|
|
itemStyle: {
|
|
normal: {
|
|
color: color2,
|
|
barBorderRadius: 9
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
myChart.clear();
|
|
myChart.setOption(option, true);
|
|
}
|
|
//添加千分位符合
|
|
function toThousands(num) {
|
|
var nums =num;
|
|
var re=/\d{1,3}(?=(\d{3})+$)/g;
|
|
var n1=0;
|
|
if(nums!=null && nums!='' && nums!=undefined){
|
|
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
|
|
}
|
|
return n1;
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<body class="hold-transition ${cu.themeclass} sidebar-mini">
|
|
<div class="wrapper">
|
|
<div class="content-wrapper content-wrapper-bg-darkblue overall-content">
|
|
<!-- BEGIN CONTAINER -->
|
|
<input type="hidden" name="jsp_id" id="jsp_id" value="shakou_home">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center font-size-12 font-color-white">
|
|
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 margin-bottom-15">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 shakou-head bgcolor-blue-light margin-bottom-15">
|
|
<div class="col-xs-4">
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 shakou-head-top">原水流量(m³/h)</span>
|
|
<span class="col-xs-12 shakou-head-bottom font-size-30 inlet_flow font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 shakou-head-top">出厂水流量(m³/h)</span>
|
|
<span class="col-xs-12 shakou-head-bottom font-size-30 effluent_flow font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 shakou-head-top">出厂压力(MPa)</span>
|
|
<span class="col-xs-12 shakou-head-bottom font-size-30 factory_pressure font-color-blue">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2 border-left">
|
|
<div class="col-xs-4 padding-top-5">
|
|
<div class="col-xs-12 font-color-dark-white">
|
|
<i class="iconfont icon-shuizhi font-size-40"></i>
|
|
</div>
|
|
<div class="col-xs-12 font-size-14 font-color-dark-white">
|
|
<span>原水</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 shakou-head-top" style="line-height: 1.5;">浊度(NTU)</span>
|
|
<span class="col-xs-12 font-size-20 line-height-2 shakou-head-bottom raw_water_turbidity font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 shakou-head-top">PH</span>
|
|
<span class="col-xs-12 font-size-20 line-height-2 shakou-head-bottom raw_water_ph font-color-blue">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3 border-left">
|
|
<div class="col-xs-3 padding-top-5">
|
|
<div class="col-xs-12 font-color-dark-white">
|
|
<i class="iconfont icon-ercigongshui font-size-40"></i>
|
|
</div>
|
|
<div class="col-xs-12 font-size-14 font-color-dark-white">
|
|
<span>待滤水</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<span class="col-xs-12 line-height-1-5">浊度(NTU)</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 line-height-1-5">一流程</span>
|
|
<span class="col-xs-12 font-size-20 line-height-1-5 shakou-head-bottom river_turbidity_process_1 font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 line-height-1-5">二流程</span>
|
|
<span class="col-xs-12 font-size-20 line-height-1-5 shakou-head-bottom river_turbidity_process_2 font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<span class="col-xs-12 line-height-1-5">三流程</span>
|
|
<span class="col-xs-12 font-size-20 line-height-1-5 shakou-head-bottom river_turbidity_process_3 font-color-blue">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3 border-left">
|
|
<div class="col-xs-3 padding-top-5">
|
|
<div class="col-xs-12 font-color-dark-white">
|
|
<i class="iconfont icon-shuiguan font-size-40"></i>
|
|
</div>
|
|
<div class="col-xs-12 font-size-14 font-color-dark-white">
|
|
<span>出厂水</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<span class="col-xs-12 shakou-head-top" style="line-height: 1.5;">浊度(NTU)</span>
|
|
<span class="col-xs-12 font-size-20 line-height-2 shakou-head-bottom effluent_turbidity font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<span class="col-xs-12 shakou-head-top">PH</span>
|
|
<span class="col-xs-12 font-size-20 line-height-2 shakou-head-bottom effluent_ph font-color-blue">0</span>
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<span class="col-xs-12 shakou-head-top" style="line-height: 1.5;">游离氯(mg/L)</span>
|
|
<span class="col-xs-12 font-size-20 line-height-2 shakou-head-bottom effluent_free_chlorine font-color-blue">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 bgcolor-transparent">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-middle">
|
|
<div class="row row-75" >
|
|
<div class="col-xs-6 row-100">
|
|
<div class="col-xs-12 row-25 padding-top-15" >
|
|
<div class="col-xs-4 font-size-20">
|
|
<span class="col-xs-12">健康</span>
|
|
<span class="col-xs-12">评价</span>
|
|
</div>
|
|
<span class="col-xs-6 font-size-65 font-color-blue health_evaluation_score line-height-08" >0</span>
|
|
<span class="col-xs-2 line-height-6">分</span>
|
|
</div>
|
|
<div class="col-xs-12 row-75 annular annular-bg" id="annular" >
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 row-100">
|
|
<div class="row row-25" >
|
|
<div class="col-xs-6">
|
|
<span class="col-xs-12">设计供水规模</span>
|
|
<span class="col-xs-12">(万立方米/日)</span>
|
|
</div>
|
|
<div class="col-xs-6 font-size-40 font-color-blue design_scale" >0</div>
|
|
</div>
|
|
<div class="row row-25" >
|
|
<div class="col-xs-6">
|
|
<span class="col-xs-12">年内最高供水</span>
|
|
<span class="col-xs-12">(万立方米/日)</span>
|
|
</div>
|
|
<div class="col-xs-6 font-size-40 font-color-blue max_daily_water_supply" >0</div>
|
|
</div>
|
|
<div class="row row-25" >
|
|
<div class="col-xs-6">
|
|
<span class="col-xs-12">昨日供水</span>
|
|
<span class="col-xs-12">(万立方米/日)</span>
|
|
</div>
|
|
<div class="col-xs-6 font-size-40 font-color-blue yesterday_water_supply" >0</div>
|
|
</div>
|
|
<div class="row row-25" >
|
|
<div class="col-xs-6">
|
|
<span class="col-xs-12">今日供水</span>
|
|
<span class="col-xs-12">(万立方米/日)</span>
|
|
</div>
|
|
<div class="col-xs-6 font-size-40 font-color-blue daily_water_supply" >0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-25" >
|
|
<div class="col-xs-12 row-100">
|
|
<div class="col-xs-3 row-100">
|
|
<div class="col-xs-12 row-75">
|
|
<i class="iconfont icon-a-jiangzhang1 font-size-50"></i>
|
|
</div>
|
|
<div class="col-xs-12 font-size-20 row-25">安全运行</div>
|
|
</div>
|
|
<div class="col-xs-9 row-100">
|
|
<div class="col-xs-12 row-75">
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-40 color-green safe_operation_days">0</div>
|
|
<div class="col-xs-12 row-30">天</div>
|
|
</div>
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-40 color-yellow complete_drill_number">0</div>
|
|
<div class="col-xs-12 row-30">完成演练数</div>
|
|
</div>
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-40 color-green plan_drill_number">0</div>
|
|
<div class="col-xs-12 row-30">计划演练数</div>
|
|
</div>
|
|
<!-- <div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-40 color-yellow level_1_alarms_number">0</div>
|
|
<div class="col-xs-12 row-30">一级报警数</div>
|
|
</div>
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-40 color-green current_month_process_alarms_number">0</div>
|
|
<div class="col-xs-12 row-30">当月已处理</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="col-xs-12 row-25 progress_bar" id="progress_bar_left">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
|
|
<div id="nowTime" class="nowTime font-color-blue"></div>
|
|
<a class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-middle center-map"
|
|
href="javascript:;"
|
|
onclick="parent.addTab('09ce2a16fd894ad3b899e6dc55070d86','实时监视','process/dataVisualFrame/viewList.do?menuType=proVisual')" ></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 text-center row-100 bgcolor-transparent margin-bottom-15">
|
|
<div class="row shakou-head" >
|
|
<div class="col-xs-12 pull-right">
|
|
<div class="col-xs-4 pull-right">
|
|
<input id="switch" name="switch" type="checkbox" checked>
|
|
<span class="switch-title">深色模式</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 font-size-20 line-height-2">设备完好率</div>
|
|
</div>
|
|
<!-- <div class="col-xs-4">
|
|
<div class="col-xs-7 ">
|
|
<input id="switch" name="switch" type="checkbox" checked>
|
|
</div>
|
|
<div class="col-xs-5 switch-title">深色</div>
|
|
</div> -->
|
|
<div class="row" >
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 barAndPie" id="barAndPie">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 top-right-middle border-bottom" >
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-35 font-color-blue" id="equipment_A_number">0</div>
|
|
<div class="col-xs-12 row-30">A类</div>
|
|
</div>
|
|
<div class="col-xs-4 row-100 border-leftAndRight">
|
|
<div class="col-xs-12 row-70 font-size-35 font-color-blue " id="equipment_B_number">0</div>
|
|
<div class="col-xs-12 row-30">B类</div>
|
|
</div>
|
|
<div class="col-xs-4 row-100">
|
|
<div class="col-xs-12 row-70 font-size-35 font-color-blue " id="equipment_C_number">0</div>
|
|
<div class="col-xs-12 row-30">C类</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 top-right-bottom">
|
|
<div class="col-xs-3 row-100">
|
|
<div class="col-xs-12 row-30 padding-top-5">
|
|
<i class="iconfont icon-gongdan font-size-40"></i>
|
|
</div>
|
|
<div class="col-xs-12 font-size-16 row-30 line-height-4">工单情况</div>
|
|
<div class="col-xs-12 font-size-16 row-30 line-height-6">巡检情况</div>
|
|
</div>
|
|
<div class="col-xs-9 row-100">
|
|
<div class="col-xs-12 row-20">
|
|
<div class="col-xs-4">已完成工单</div>
|
|
<div class="col-xs-4">未完成工单</div>
|
|
<div class="col-xs-4">工单总数</div>
|
|
</div>
|
|
<div class="col-xs-12 row-30 font-size-35 line-height-1 padding-top-5">
|
|
<div class="col-xs-4 row-100 font-color-red work_complete_number">0</div>
|
|
<div class="col-xs-4 row-100 font-color-redlight work_incompletion_num">0</div>
|
|
<div class="col-xs-4 row-100 font-color-redlight work_total_number">0</div>
|
|
</div>
|
|
<div class="col-xs-12 row-10 progress_bar" id="workorder_bar_right"></div>
|
|
<div class="col-xs-12 row-30 font-size-35 line-height-1 padding-top-5">
|
|
<div class="col-xs-4 row-100 font-color-blue patrol_inspection_completion_num">0</div>
|
|
<div class="col-xs-4 row-100 color-blue patrol_inspection_incompletion_num">0</div>
|
|
<div class="col-xs-4 row-100 color-blue patrol_inspection_num">0</div>
|
|
</div>
|
|
<div class="col-xs-12 row-10 progress_bar" id="progress_bar_right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 text-center font-size-12 font-color-white" >
|
|
<div class="col-xs-12 bgcolor-transparent padding-top-10" >
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bottom-left">
|
|
<div class="col-xs-12">
|
|
<div class="font-size-16 right-title font-color-black text-center">水量曲线</div>
|
|
</div>
|
|
<div class="col-xs-12 bottom-line" id="left-middle-line">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bottom-center">
|
|
<div class="col-xs-6">
|
|
<div class="font-size-16 right-title font-color-black text-center">水质曲线</div>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<ul class="nav nav-pills">
|
|
<li role="presentation" class="active">
|
|
<a href="#tab_1" data-toggle="tab" class="font-color-blue waterData">原水</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#tab_2" data-toggle="tab" class="font-color-blue waterData">出厂水</a>
|
|
</li>
|
|
<!-- <li role="presentation">
|
|
<a href="#tab_3" data-toggle="tab" class="font-color-blue waterData">游离氯</a>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-12">
|
|
<!-- <div class="col-xs-12 bottom-line" id="waterQualityTurbidity"></div> -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="tab_1">
|
|
<div class="col-xs-12 bottom-line" id="waterQualityTurbidity"></div>
|
|
</div>
|
|
<div class="tab-pane" id="tab_2">
|
|
<div class="col-xs-12 bottom-line" id="waterQualityTurbidity_out"></div>
|
|
</div>
|
|
<!-- <div class="tab-pane" id="tab_3">
|
|
<div class="col-xs-12 bottom-line" id="waterQualityChlorine"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bottom-center">
|
|
<div class="col-xs-6">
|
|
<div class="font-size-16 right-title font-color-black text-center">水厂三耗</div>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<ul class="nav nav-pills">
|
|
<li role="presentation" class="active">
|
|
<a href="#consume_1" data-toggle="tab" class="font-color-blue electricData">电耗</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#consume_2" data-toggle="tab" class="font-color-blue waterData">水耗</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#consume_3" data-toggle="tab" class="font-color-blue drugData">药耗</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-12">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="consume_1">
|
|
<div class="col-xs-12 bottom-line" id="consumePower"></div>
|
|
</div>
|
|
<!-- /.tab-pane -->
|
|
<div class="tab-pane" id="consume_2">
|
|
<div class="col-xs-12 bottom-line" id="consumeWater"></div>
|
|
</div>
|
|
<div class="tab-pane" id="consume_3">
|
|
<div class="col-xs-12 bottom-line" id="consumeDrug"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |