646 lines
32 KiB
Plaintext
646 lines
32 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>
|
||
<!-- 北江首页文件-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/JS/smart/smart.css"/>
|
||
<style type="text/css">
|
||
.smart-head{
|
||
<%-- background-image: url(<%=request.getContextPath()%>/IMG/smart/head.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
height: 60px; --%>
|
||
height: 10px;
|
||
}
|
||
.center-middle{
|
||
/* height: 830px;
|
||
width: 695px; */
|
||
height: 950px;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/map_blank.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
}
|
||
|
||
.right-title-long{
|
||
width: 122px;
|
||
height: 26px;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/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/smart/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/smart/title.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
.right-title-blue{
|
||
width: 122px;
|
||
height: 26px;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/title_blue.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.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 {
|
||
color:#69f6f9;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/tab_bg_dark.png);
|
||
}
|
||
.nav-pills>li.active>.waterDataLight, .nav-pills>li.active>.waterDataLight:focus, .nav-pills>li.active>.waterDataLight:hover {
|
||
color: #00315b;
|
||
border-bottom :3px solid #01c9ff;
|
||
}
|
||
.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/smart/title.png);
|
||
padding:0 30px;
|
||
}
|
||
.nav-pills>li>.modular,.nav-pills>li>.modular:hover {
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/title_dark.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
background-size: 100% 100%;
|
||
padding:0 30px;
|
||
color:#0D2336;
|
||
}
|
||
.nav-pills>li.active>.modularLight, .nav-pills>li.active>.modularLight:focus, .nav-pills>li.active>.modularLight:hover {
|
||
color:#FFFFFF;
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/title_blue.png);
|
||
padding:0 30px;
|
||
}
|
||
.nav-pills>li>.modularLight,.nav-pills>li>.modularLight:hover {
|
||
background-image: url(<%=request.getContextPath()%>/IMG/smart/title_blue_dark.png);
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
background-size: 100% 100%;
|
||
padding:0 30px;
|
||
color:#FFFFFF;
|
||
}
|
||
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
function mapClick(parent_this,e){
|
||
if($("#new_element").length){
|
||
$("#new_element").remove();
|
||
}
|
||
var obj = $(parent_this);
|
||
var offset = obj.offset();
|
||
var left = e.pageX-offset.left; //获取当前鼠标相对div的左坐标
|
||
var top = e.pageY-offset.top; //获取当前鼠标相对div的上坐标
|
||
var obj_width = obj.width(); //获取当前鼠标相对div的右坐标
|
||
var obj_height = obj.height();//获取当前鼠标相对div的下坐标
|
||
var element_width = 300;
|
||
var element_height = 275;
|
||
var styleStr = 'style="margin-bottom: 0px;padding: 0 5px;width:'+element_width+'px;height:'+element_height+'px;';
|
||
if(left+element_width>obj_width){
|
||
styleStr += 'right:'+(obj_width-left)+'px;';
|
||
}else{
|
||
styleStr += 'left:'+left+'px;';
|
||
}
|
||
if(top+element_height>obj_height){
|
||
if(obj_height-top+element_height>obj_height){
|
||
styleStr += 'bottom:0px;';
|
||
}else{
|
||
styleStr += 'bottom:'+(obj_height-top)+'px;';
|
||
}
|
||
}else{
|
||
styleStr += 'top:'+top+'px;';
|
||
}
|
||
styleStr += '"';
|
||
var new_element =
|
||
'<div class="box box-primary new-element" id="new_element" '+styleStr+'>'+
|
||
'<div class="box-header with-border">'+
|
||
'<h3 class="box-title">配置内容</h3>'+
|
||
'<div class="box-tools pull-right">'+
|
||
'<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="box-body">'+
|
||
'<form class="form-horizontal " id="subForm">'+
|
||
'<input id="elementLeft" name="elementLeft" type="hidden" value="'+left+'" />'+
|
||
'<input id="elementTop" name="elementTop" type="hidden" value="'+top+'" />'+
|
||
'<input id="pid" name="pid" type="hidden" value="'+jsp_id+'" />'+
|
||
'<input id="unitId" name="unitId" type="hidden" value="'+bizid+'" />'+
|
||
'<input id="windowsHeight" name="windowsHeight" type="hidden" value="'+height+'" />'+
|
||
'<input id="windowsWidth" name="windowsWidth" type="hidden" value="'+width+'" />'+
|
||
'<div class="form-group">'+
|
||
'<label class="col-sm-3 control-label font-color-black">*名称</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input type="text" class="form-control" id="name" name ="name" value="" >'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="form-group">'+
|
||
'<label class="col-sm-3 control-label font-color-black">*类型</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<select id ="dataType" name="dataType" class="form-control select2" onchange="changeDataType();">'+
|
||
'<option value="1" selected="selected" >水厂</option>'+
|
||
'<option value="2" >泵站</option>'+
|
||
'<option value="3">工艺</option>'+
|
||
'</select>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="form-group dataType" id="unit">'+
|
||
'<label class="col-sm-3 control-label font-color-black">关联水厂</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input id="companyid" name="companyid" type="hidden" value="" />'+
|
||
'<input type="text" class="form-control" id="companyname" name ="companyname" value="" '+
|
||
'onclick="showSmartCompany4Select();">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'<div class="form-group dataType" id="proDatavisualFrame">'+
|
||
'<label class="col-sm-3 control-label font-color-black">实时监视</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input id="proDatavisualFrameId" name="proDatavisualFrameId" type="hidden" value="" />'+
|
||
'<input type="text" class="form-control" id="proDatavisualFrameName" name ="proDatavisualFrameName" value="" '+
|
||
'onclick="showDatavisualFrame4Select(\'proDatavisualFrameId\',\'proDatavisualFrameName\');">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'</form>'+
|
||
'</div>'+
|
||
'<div class="box-footer">'+
|
||
'<a class="btn btn-primary btn-sm btn-flat" onclick="dosaveElement()">保存</a>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$(parent_this).append(new_element);
|
||
changeDataType();
|
||
}
|
||
function editElement(parent_this,event){
|
||
if($("#new_element").length){
|
||
$("#new_element").remove();
|
||
}
|
||
var obj = $('.center-middle');
|
||
var offset = obj.offset();
|
||
var left = $(parent_this).data('elementleft'); //获取当前鼠标相对div的左坐标
|
||
var top = $(parent_this).data('elementtop'); //获取当前鼠标相对div的上坐标
|
||
var obj_width = obj.width(); //获取当前鼠标相对div的右坐标
|
||
var obj_height = obj.height();//获取当前鼠标相对div的下坐标
|
||
var element_width = 300;
|
||
var element_height = 275;
|
||
var styleStr = 'style="margin-bottom: 0px;padding: 0 5px;width:'+element_width+'px;height:'+element_height+'px;';
|
||
if(left+element_width>obj_width){
|
||
styleStr += 'right:'+(obj_width-left)+'px;';
|
||
}else{
|
||
styleStr += 'left:'+left+'px;';
|
||
}
|
||
if(top+element_height>obj_height){
|
||
if(obj_height-top+element_height>obj_height){
|
||
styleStr += 'bottom:0px;';
|
||
}else{
|
||
styleStr += 'bottom:'+(obj_height-top)+'px;';
|
||
}
|
||
}else{
|
||
styleStr += 'top:'+top+'px;';
|
||
}
|
||
styleStr += '"';
|
||
var id = $(parent_this).data('id');
|
||
var name = $(parent_this).data('name');
|
||
var proDatavisualFrameId = $(parent_this).data('prodatavisualframeid');
|
||
var proDatavisualFrameName = $(parent_this).data('prodatavisualframename');
|
||
|
||
var companyid = $(parent_this).data('selectunitid');
|
||
var companyname = $(parent_this).data('selectunitname');
|
||
var dataType = $(parent_this).data('datatype');
|
||
var selected_1 = '';
|
||
var selected_2 = '';
|
||
var selected_3 = '';
|
||
if(dataType==1){
|
||
selected_1 = 'selected="selected"';
|
||
}
|
||
if(dataType==2){
|
||
selected_2 = 'selected="selected"';
|
||
}
|
||
if(dataType==3){
|
||
selected_3 = 'selected="selected"';
|
||
}
|
||
var new_element =
|
||
'<div class="box box-primary new-element" id="new_element" '+styleStr+'>'+
|
||
'<div class="box-header with-border">'+
|
||
'<h3 class="box-title">编辑内容</h3>'+
|
||
'<div class="box-tools pull-right">'+
|
||
'<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="box-body">'+
|
||
'<form class="form-horizontal " id="subForm">'+
|
||
'<input id="id" name="id" type="hidden" value="'+id+'" />'+
|
||
'<input id="elementLeft" name="elementLeft" type="hidden" value="'+left+'" />'+
|
||
'<input id="elementTop" name="elementTop" type="hidden" value="'+top+'" />'+
|
||
'<input id="pid" name="pid" type="hidden" value="'+jsp_id+'" />'+
|
||
'<input id="unitId" name="unitId" type="hidden" value="'+bizid+'" />'+
|
||
'<input id="windowsHeight" name="windowsHeight" type="hidden" value="'+height+'" />'+
|
||
'<input id="windowsWidth" name="windowsWidth" type="hidden" value="'+width+'" />'+
|
||
'<div class="form-group">'+
|
||
'<label class="col-sm-3 control-label font-color-black">*名称</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input type="text" class="form-control" id="name" name ="name" value="'+name+'" >'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="form-group">'+
|
||
'<label class="col-sm-3 control-label font-color-black">*类型</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<select id ="dataType" name="dataType" class="form-control select2" onchange="changeDataType();">'+
|
||
'<option value="1" '+selected_1+' >水厂</option>'+
|
||
'<option value="2" '+selected_2+' >泵站</option>'+
|
||
'<option value="3" '+selected_3+' >工艺</option>'+
|
||
'</select>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="form-group dataType" id="unit">'+
|
||
'<label class="col-sm-3 control-label font-color-black">关联水厂</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input id="companyid" name="companyid" type="hidden" value="'+companyid+'" />'+
|
||
'<input type="text" class="form-control" id="companyname" name ="companyname" value="'+companyname+'" '+
|
||
'onclick="showSmartCompany4Select();"/>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'<div class="form-group dataType" id="proDatavisualFrame">'+
|
||
'<label class="col-sm-3 control-label font-color-black">实时监视</label>'+
|
||
'<div class="col-sm-9">'+
|
||
'<input id="proDatavisualFrameId" name="proDatavisualFrameId" type="hidden" value="'+proDatavisualFrameId+'" />'+
|
||
'<input type="text" class="form-control" id="proDatavisualFrameName" name ="proDatavisualFrameName" value="'+proDatavisualFrameName+'" '+
|
||
'onclick="showDatavisualFrame4Select(\'proDatavisualFrameId\',\'proDatavisualFrameName\');"/>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'</form>'+
|
||
'</div>'+
|
||
'<div class="box-footer">'+
|
||
'<div class="col-sm-4"><a class="btn btn-primary btn-sm btn-flat" onclick="doupdateElement()">修改</a></div>'+
|
||
'<div class="col-sm-4"><a class="btn btn-danger btn-sm btn-flat" onclick="dodelElement()">删除</a></div>'+
|
||
'<div class="col-sm-4" id="configureDetail"><a class="btn btn-info btn-sm btn-flat" onclick="doConfigureDetail(\''+id+'\')">配置参数</a></div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
obj.append(new_element);
|
||
changeDataType();
|
||
}
|
||
|
||
function drag(id) {
|
||
var $div = $('#'+id);
|
||
var dataType = $div.data('datatype');
|
||
/*确定限制区域*/
|
||
if(dataType==1){
|
||
icon_width = 36;
|
||
icon_height = 49;
|
||
}else{
|
||
icon_width = 18;
|
||
icon_height = 42;
|
||
}
|
||
var limit_top = 0;
|
||
var limit_bottom = limit_top+$('.center-middle').height()-icon_height;
|
||
var limit_left = $('.center-middle').position().left-icon_width/2;
|
||
var limit_right = limit_left+$('.center-middle').width();
|
||
var elementleft = $div.data('elementleft');
|
||
var elementtop = $div.data('elementtop');
|
||
/* 绑定鼠标左键按住事件 */
|
||
$div.bind("mousedown",function(event){
|
||
$(this).css("cursor","move");//改变鼠标指针的形状
|
||
/* 获取需要拖动节点的坐标 */
|
||
var offset_x = $(this)[0].offsetLeft;//x坐标
|
||
var offset_y = $(this)[0].offsetTop;//y坐标
|
||
/* 获取当前鼠标的坐标 */
|
||
var mouse_x = event.pageX;
|
||
var mouse_y = event.pageY;
|
||
/* 绑定拖动事件 */
|
||
/* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
|
||
$(document).bind("mousemove",function(ev){
|
||
/* 计算鼠标移动了的位置 */
|
||
var _x = ev.pageX - mouse_x;
|
||
var _y = ev.pageY - mouse_y;
|
||
/* 改变目标元素的位置参数 */
|
||
elementleft = offset_x + _x;
|
||
elementtop = offset_y + _y;
|
||
/* 判断是否超出区域 */
|
||
if(elementleft<limit_left){
|
||
elementleft = limit_left;
|
||
}
|
||
if(elementleft>limit_right){
|
||
elementleft = limit_right;
|
||
}
|
||
if(elementtop<limit_top){
|
||
elementtop = limit_top;
|
||
}
|
||
if(elementtop>limit_bottom){
|
||
elementtop = limit_bottom;
|
||
}
|
||
/* 设置移动后的元素坐标 */
|
||
var now_x = elementleft + "px";
|
||
var now_y = elementtop + "px";
|
||
/* 改变目标元素的位置 */
|
||
$div.css({
|
||
top:now_y,
|
||
left:now_x
|
||
});
|
||
});
|
||
/* 当鼠标左键松开，接触事件绑定 */
|
||
$(document).bind("mouseup",function(){
|
||
$div.css("cursor","pointer");
|
||
$div.data('elementleft',elementleft);
|
||
$div.data('elementtop',elementtop);
|
||
$(this).unbind("mousemove");
|
||
$(this).unbind("mouseup");
|
||
drag_doupdate(id,elementleft,elementtop);
|
||
});
|
||
});
|
||
}
|
||
function drag_doupdate(id,elementleft,elementtop) {
|
||
$.post(ext.contextPath + "/jspConfigure/updatedrag.do",
|
||
{id:id,elementLeft:elementleft,elementTop:elementtop,windowsHeight:height,windowsWidth:width},
|
||
function(data) {
|
||
console.log(data);
|
||
},'json');
|
||
}
|
||
$(function () {
|
||
$('.mouse-select').mouseover(function(e){
|
||
if(!$(this).hasClass('edit-select')){
|
||
$(this).addClass('edit-after');
|
||
}
|
||
});
|
||
$('.mouse-select').mouseout(function(e){
|
||
if(!$(this).hasClass('edit-select')){
|
||
$(this).removeClass('edit-after');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/smart/smart.js" charset="utf-8"></script>
|
||
</head>
|
||
<body class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<div class="content-wrapper content-wrapper-bg-darkblue ">
|
||
<!-- BEGIN CONTAINER -->
|
||
<input type="hidden" name="jsp_id" id="jsp_id" value="smart">
|
||
<div id="menu4SelectDiv"></div>
|
||
<div id="company4SelectDiv"></div>
|
||
<div id="monitorDiv"></div>
|
||
<div id="mpSelectDiv"></div>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 content-wrapper-bg-darkblue ">
|
||
<div class="row" >
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 smart-head"></div>
|
||
</div>
|
||
<div class="row text-center font-basics font-color-white" >
|
||
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 left-top content-wrapper-bg-transparent">
|
||
<div class="col-xs-12">
|
||
<div class="font-md right-title font-color-black text-center">日供水量</div>
|
||
</div>
|
||
<div class="col-xs-12 left-top-line" id="left-top-line">
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 left-middle content-wrapper-bg-transparent">
|
||
<div class="col-xs-12">
|
||
<div class="font-md right-title font-color-black text-center">原水水质</div>
|
||
</div>
|
||
<div class="col-xs-12 left-middle-line" id="left-middle-line">
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 left-bottom content-wrapper-bg-transparent">
|
||
<div class="col-xs-6">
|
||
<div class="font-md 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>
|
||
</ul>
|
||
</div>
|
||
<div class="col-xs-12">
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="tab_1">
|
||
<div class="col-xs-12 left-bottom-line" id="left-bottom-line-1"></div>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_2">
|
||
<div class="col-xs-12 left-bottom-line" id="left-bottom-line-2"></div>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-center">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 font-color-dark-blue center-top bgcolor-blue content-wrapper-bg-transparent">
|
||
<div class="col-xs-3">
|
||
<div class="col-xs-6">
|
||
<span class="col-xs-12">最高日供水</span>
|
||
<span class="col-xs-12">万立方米/日</span>
|
||
</div>
|
||
<span class="col-xs-6 font-xlg max_daily_water_supply font-color-blue">0</span>
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<div class="col-xs-6">
|
||
<span class="col-xs-12">平均日供水</span>
|
||
<span class="col-xs-12">万立方米</span>
|
||
</div>
|
||
<span class="col-xs-6 font-xlg avg_daily_water_supply font-color-blue">0</span>
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<div class="col-xs-6">
|
||
<span class="col-xs-12">昨日供水</span>
|
||
<span class="col-xs-12">万立方米</span>
|
||
</div>
|
||
<span class="col-xs-6 font-xlg yesterday_water_supply font-color-blue">0</span>
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<div class="col-xs-6">
|
||
<span class="col-xs-12">今日供水</span>
|
||
<span class="col-xs-12">万立方米</span>
|
||
</div>
|
||
<span class="col-xs-6 font-xlg today_water_supply font-color-blue">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-middle mouse-select"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 text-center">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 right-top content-wrapper-bg-transparent">
|
||
<div class="col-xs-8">
|
||
<ul class="nav nav-pills">
|
||
<li role="presentation" class="active">
|
||
<a href="#tab_equipment" data-toggle="tab" class="font-md text-center modular">设备管理</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#tab_Patrol" data-toggle="tab" class="font-md text-center modular">巡检管理</a>
|
||
</li>
|
||
</ul>
|
||
</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 font-color-dark-blue">深色</div>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="tab_equipment">
|
||
<div class="col-xs-12 paddingTopAndBottom10">
|
||
<div class="col-xs-4">
|
||
<span class="col-xs-12">设备完好率(%)</span>
|
||
<span class="col-xs-10 font-color-blue font-xlg equipment_intact_rate">0</span>
|
||
</div>
|
||
<div class="col-xs-4">
|
||
<span class="col-xs-12">主要设备完好率(%)</span>
|
||
<span class="col-xs-12 font-color-blue font-xlg main_equipment_intact_rate">0</span>
|
||
</div>
|
||
<div class="col-xs-4">
|
||
<span class="col-xs-12">保养完成率(%)</span>
|
||
<span class="col-xs-12 font-color-blue font-xlg maintain_intact_rate">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 right-bottom-bar" id="right-bottom-bar">
|
||
</div>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_Patrol">
|
||
<div class="row">
|
||
<div class="col-xs-6 right-top-pie" id="right-top-pie-1"></div>
|
||
<div class="col-xs-6">
|
||
<div class="col-xs-12" style="padding-top: 15px;">
|
||
<div class="col-xs-1 text-bar text-bar-4"></div>
|
||
<div class="col-xs-11">
|
||
<div class="col-xs-12 font-md pad-bottom-10">运行工单数</div>
|
||
<div class="col-xs-12 font-lg">
|
||
<span class="col-xs-5 font-color-blue run_work_complete_number">0</span>
|
||
<span class="col-xs-2 font-color-4">/</span>
|
||
<span class="col-xs-5 font-color-4 run_work_total_number">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12" style="padding-top: 10px;">
|
||
<div class="col-xs-1 text-bar text-bar-5"></div>
|
||
<div class="col-xs-11">
|
||
<div class="col-xs-12 font-md pad-bottom-10">机电工单数</div>
|
||
<div class="col-xs-12 font-lg">
|
||
<span class="col-xs-5 font-color-blue electromechanical_work_complete_number">0</span>
|
||
<span class="col-xs-2 font-color-5">/</span>
|
||
<span class="col-xs-5 font-color-5 electromechanical_work_total_number">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-6 right-top-pie" id="right-top-pie-2"></div>
|
||
<div class="col-xs-6">
|
||
<div class="col-xs-12" style="padding-top: 15px;">
|
||
<div class="col-xs-1 text-bar text-bar-3"></div>
|
||
<div class="col-xs-11">
|
||
<div class="col-xs-12 font-md pad-bottom-10">维修工单数</div>
|
||
<div class="col-xs-12 font-lg">
|
||
<span class="col-xs-5 font-color-blue repair_work_complete_number">0</span>
|
||
<span class="col-xs-2 font-color-3">/</span>
|
||
<span class="col-xs-5 font-color-3 repair_work_total_numbe">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 right-bottom content-wrapper-bg-transparent mouse-select cursor-pointer"
|
||
onclick="showMonitor();" >
|
||
<div class="col-xs-6">
|
||
<div class="font-md right-title-long 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_pressure" data-toggle="tab" class="font-color-blue waterData">压力点</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#tab_flow" data-toggle="tab" class="font-color-blue waterData">流量点</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-xs-12" style="padding-top:10px;height: 97%;">
|
||
<div class="tab-content" style="height: 100%;overflow: hidden;">
|
||
<div class="tab-pane active" id="tab_pressure">
|
||
<table class="table table-condensed text-center table_font_white">
|
||
<thead>
|
||
<tr class="font-color-lightBlack">
|
||
<th>压力点</th>
|
||
<th>监测值（Mpa）</th>
|
||
<th>时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="font-color-blue" id="monitor_pressure">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
<div class="tab-pane" id="tab_flow">
|
||
|
||
<table class="table table-condensed text-center table_font_white">
|
||
<thead>
|
||
<tr class="font-color-lightBlack">
|
||
<th>流量点</th>
|
||
<th>监测值（m³/h）</th>
|
||
<th>时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="font-color-blue" id="monitor_flow">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- /.tab-pane -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |