607 lines
30 KiB
Plaintext
607 lines
30 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/smartFactory.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: 540px;
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/smart/factory.png);
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
border:1px dotted #707070;
|
|||
|
|
/* cursor: pointer; */
|
|||
|
|
}
|
|||
|
|
.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%;
|
|||
|
|
}
|
|||
|
|
</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">'+
|
|||
|
|
'<div id="company4SelectDiv"></div>'+
|
|||
|
|
'<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">水厂</option>'+
|
|||
|
|
'<option value="2" >泵站</option>'+ */
|
|||
|
|
'<option value="3" selected="selected" >工艺</option>'+
|
|||
|
|
'<option value="4" >摄像头</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="showCompany4SelectFun(\'companyid\',\'companyname\');">'+
|
|||
|
|
'</div>'+
|
|||
|
|
' </div>'+
|
|||
|
|
'<div class="form-group dataType" id="proDatavisualFrame">'+
|
|||
|
|
'<label class="col-sm-3 control-label font-color-black" id="proDatavisualFrameTitle">实时监视</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 = '';
|
|||
|
|
var selected_4 = '';
|
|||
|
|
var proDatavisualFrameTitle = "";
|
|||
|
|
if(dataType==1){
|
|||
|
|
selected_1 = 'selected="selected"';
|
|||
|
|
}
|
|||
|
|
if(dataType==2){
|
|||
|
|
selected_2 = 'selected="selected"';
|
|||
|
|
}
|
|||
|
|
if(dataType==3){
|
|||
|
|
selected_3 = 'selected="selected"';
|
|||
|
|
proDatavisualFrameTitle = "实时监视";
|
|||
|
|
}
|
|||
|
|
if(dataType==4){
|
|||
|
|
selected_4 = 'selected="selected"';
|
|||
|
|
proDatavisualFrameTitle = "摄像头";
|
|||
|
|
}
|
|||
|
|
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">'+
|
|||
|
|
'<div id="company4SelectDiv"></div>'+
|
|||
|
|
'<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>'+
|
|||
|
|
'<option value="4" '+selected_4+'>摄像头</option>'+
|
|||
|
|
'</select>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="form-group dataType" id="proDatavisualFrame">'+
|
|||
|
|
'<label class="col-sm-3 control-label font-color-black" id="proDatavisualFrameTitle">'+proDatavisualFrameTitle+'</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>'+
|
|||
|
|
'<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="showCompany4SelectFun(\'companyid\',\'companyname\');"/>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</form>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="box-footer">'+
|
|||
|
|
'<div class="col-sm-6"><a class="btn btn-primary btn-sm btn-flat" onclick="doupdateElement()">修改</a></div>'+
|
|||
|
|
'<div class="col-sm-6"><a class="btn btn-danger btn-sm btn-flat" onclick="dodelElement()">删除</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 () {
|
|||
|
|
$('.center-middle').mouseover(function(e){
|
|||
|
|
if(!$(this).hasClass('edit-select')){
|
|||
|
|
$(this).addClass('edit-after');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('.center-middle').mouseout(function(e){
|
|||
|
|
if(!$(this).hasClass('edit-select')){
|
|||
|
|
$(this).removeClass('edit-after');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/smart/smartFactory.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 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 content-wrapper-bg-transparent">
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 left-top">
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<div class="col-xs-12 font-color-dark-white">
|
|||
|
|
<i class="iconfont icon-shuizhi font-xlg"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12 font-md font-color-dark-white">
|
|||
|
|
<span>水源地水质</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">河水浊度</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue river_turbidity">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue">NTU</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">河水PH</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue river_ph">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">河水溶解氧</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue river_dissolved_oxygen">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue">mg/l</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<div class="col-xs-12 font-color-dark-white">
|
|||
|
|
<i class="iconfont icon-gongshuichang-weixuanzhong font-xlg"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12 font-md font-color-dark-white">
|
|||
|
|
<span>原水水质</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">原水浊度</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue raw_water_turbidity">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue">NTU</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">原水PH</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue raw_water_ph">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12">
|
|||
|
|
<span class="col-xs-5">原水溶解氧</span>
|
|||
|
|
<span class="col-xs-4 font-color-blue raw_water_dissolved_oxygen">0</span>
|
|||
|
|
<span class="col-xs-3 font-color-blue">mg/l</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 left-middle">
|
|||
|
|
<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">
|
|||
|
|
<div class="col-xs-12 left-bottom-bar" id="left-bottom-bar">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 content-wrapper-bg-transparent">
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 font-color-dark-blue center-top bgcolor-blue">
|
|||
|
|
<!-- <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 design_scale 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 annual_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-size-38 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-size-38 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-size-38 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-size-38 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"></div>
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-bottom bgcolor-blue">
|
|||
|
|
<div class="col-xs-3 center-bottom-line">
|
|||
|
|
<span class="col-xs-12" style="height:20%">
|
|||
|
|
<div class="font-md right-title font-color-black text-center">关键指标</div>
|
|||
|
|
</span>
|
|||
|
|
<div class="col-xs-12" style="height:20%">
|
|||
|
|
<div class="col-xs-1 text-bar text-bar-1"></div>
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<span class="col-xs-12">单位电耗</span>
|
|||
|
|
<span class="col-xs-12">kwh/km3.Mpa</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="col-xs-5 font-md font-color-blue unit_power">0</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12" style="height:20%">
|
|||
|
|
<div class="col-xs-1 text-bar text-bar-2"></div>
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<span class="col-xs-12">单位矾耗</span>
|
|||
|
|
<span class="col-xs-12">kg/km3</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="col-xs-5 font-md font-color-blue unit_alum">0</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12" style="height:20%">
|
|||
|
|
<div class="col-xs-1 text-bar text-bar-3"></div>
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<span class="col-xs-12">单位氯耗</span>
|
|||
|
|
<span class="col-xs-12">kg/km3</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="col-xs-5 font-md font-color-blue unit_chlorine">0</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12" style="height:20%">
|
|||
|
|
<div class="col-xs-1 text-bar text-bar-4"></div>
|
|||
|
|
<div class="col-xs-6">
|
|||
|
|
<span class="col-xs-12">自耗水率</span>
|
|||
|
|
<span class="col-xs-12">%</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="col-xs-5 font-md font-color-blue water_rate">0</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-9 center-bottom-line" id="center-bottom-line">
|
|||
|
|
</div>
|
|||
|
|
</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 content-wrapper-bg-transparent">
|
|||
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 right-top">
|
|||
|
|
<div class="col-xs-7">
|
|||
|
|
<div class="font-md right-title font-color-black text-center">巡检管理</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-5">
|
|||
|
|
<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-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 class="col-lg-12 col-md-12 col-sm-12 col-xs-12 right-middle">
|
|||
|
|
<div class="col-xs-12" style="padding-bottom:20px;">
|
|||
|
|
<div class="font-md right-title font-color-black text-center">设备管理</div>
|
|||
|
|
</div>
|
|||
|
|
<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-lg-12 col-md-12 col-sm-12 col-xs-12 right-bottom">
|
|||
|
|
<div class="col-xs-12 right-bottom-bar" id="right-bottom-bar">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|