Merge remote-tracking branch 'origin/deng' into deng
This commit is contained in:
BIN
src/main/webapp/IMG/icon_bz.png
Normal file
BIN
src/main/webapp/IMG/icon_bz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/main/webapp/IMG/icon_gd.png
Normal file
BIN
src/main/webapp/IMG/icon_gd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/main/webapp/IMG/icon_gj.png
Normal file
BIN
src/main/webapp/IMG/icon_gj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/main/webapp/IMG/icon_jh.png
Normal file
BIN
src/main/webapp/IMG/icon_jh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/main/webapp/IMG/icon_jl.png
Normal file
BIN
src/main/webapp/IMG/icon_jl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/main/webapp/IMG/icon_qy.png
Normal file
BIN
src/main/webapp/IMG/icon_qy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/main/webapp/IMG/icon_wsc.png
Normal file
BIN
src/main/webapp/IMG/icon_wsc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 MiB After Width: | Height: | Size: 28 MiB |
BIN
src/main/webapp/IMG/wsgj.png
Normal file
BIN
src/main/webapp/IMG/wsgj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -493,8 +493,95 @@ function getMpPic() {
|
||||
|
||||
function initMenu() {
|
||||
var menu = $('#menu');
|
||||
|
||||
// 定义一个内部函数来执行DOM操作添加菜单
|
||||
var appendS223Menu = function() {
|
||||
var $menu = $('#menu');
|
||||
|
||||
// 查找“纳管企业清单”所在的菜单项
|
||||
// 情况1: 一级菜单，名称在 span 中
|
||||
var $targetSpan = $menu.find("span").filter(function() {
|
||||
return $(this).text().trim() === '纳管企业清单';
|
||||
});
|
||||
|
||||
var $targetLi = null;
|
||||
|
||||
if ($targetSpan.length > 0) {
|
||||
$targetLi = $targetSpan.closest('li');
|
||||
} else {
|
||||
// 情况2: 二级菜单，名称直接在 a 标签中（可能是文本节点）
|
||||
var $targetLink = $menu.find('a').filter(function() {
|
||||
// 克隆节点，移除子元素（如图标），只获取自身的文本
|
||||
return $(this).clone().children().remove().end().text().trim() === '纳管企业清单';
|
||||
});
|
||||
if ($targetLink.length > 0) {
|
||||
$targetLi = $targetLink.closest('li');
|
||||
}
|
||||
}
|
||||
|
||||
if ($targetLi && $targetLi.length > 0) {
|
||||
var $treeviewMenu = $targetLi.find('> .treeview-menu');
|
||||
|
||||
// 确保 treeview-menu 存在
|
||||
if ($treeviewMenu.length === 0) {
|
||||
$treeviewMenu = $('<ul class="treeview-menu"></ul>');
|
||||
$targetLi.append($treeviewMenu);
|
||||
}
|
||||
|
||||
// 检查是否已经添加过，防止重复添加
|
||||
// 注意：新菜单项可能直接是文本，也可能包含 i 标签
|
||||
var exists = false;
|
||||
$treeviewMenu.find('li').each(function() {
|
||||
if ($(this).text().indexOf('新源头GIS管理') > -1) {
|
||||
exists = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!exists) {
|
||||
// 根据层级决定样式，通常二级或三级菜单项不需要 span 包裹文字，或者保持一致
|
||||
// 这里的样式参考了 menuitems.jsp 中的 Level 3: <li><a ...><i ...></i> Name</a></li>
|
||||
// 使用 addTab 函数而不是 refreshPage，以支持在 tab 页中打开（如果系统支持）或者在当前 iframe 打开
|
||||
// 检查 addTab 是否存在，如果存在则使用它，否则回退到 refreshPage
|
||||
var newMenuHtml = '';
|
||||
if (typeof addTab === 'function') {
|
||||
// 假设 addTab(id, name, url)
|
||||
// /jsp/pipeline/pipelineDataList.jsp
|
||||
// newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\')"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
|
||||
newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\')"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
|
||||
} else {
|
||||
// 如果没有 addTab，尝试使用 iframe 加载或者直接跳转（但在框架内）
|
||||
// refreshPage 通常是 location.replace，这会刷新整个页面。
|
||||
// 如果目标是内嵌，我们应该寻找 iframe 的加载方式。
|
||||
// 查看 comm.js 其他部分，发现有 refreshPage(url) 实现为 location.replace(url)。
|
||||
// 如果要内嵌，通常是设置某个 iframe 的 src。
|
||||
// 假设主内容区域是一个 iframe，或者支持通过 data-url 加载。
|
||||
// 暂时使用 refreshPage，但确认它是在当前窗口（iframe）中加载，而不是弹出新窗口。
|
||||
// 用户反馈说“不要新开特么弹窗”，可能是指 window.open 或者 target="_blank"。
|
||||
// refreshPage 使用 location.replace，是在当前窗口打开。
|
||||
// 如果当前窗口是整个 index 页面，那就会刷新整个页面。
|
||||
// 如果是 SPA 或者 iframe 架构，我们需要找到正确的方法。
|
||||
|
||||
// 观察 menuitems.jsp，发现二级菜单使用 addTab('${cumcl2.id}','${cumcl2.name}','${cumcl2.location}')
|
||||
// 所以我们应该优先使用 addTab。
|
||||
// 如果 addTab 未定义（可能在 index.jsp 中定义），我们尝试模拟它。
|
||||
// 由于 comm.js 被 index.jsp 引用，addTab 应该可用。
|
||||
// newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/visual/newSourceGISPage.jsp\');}"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
|
||||
newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/pipeline/pipelineDataList.jsp\');}"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
|
||||
}
|
||||
$treeviewMenu.append(newMenuHtml);
|
||||
|
||||
// 确保父菜单是展开状态（可选）
|
||||
// $targetLi.addClass('active menu-open');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (sessionStorage.menu != undefined) {
|
||||
$('#menu').html(sessionStorage.menu);
|
||||
|
||||
// 即使是缓存加载，也尝试添加新菜单
|
||||
appendS223Menu();
|
||||
|
||||
if (sessionStorage.m1 != undefined) {
|
||||
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
||||
}
|
||||
@ -521,8 +608,17 @@ function initMenu() {
|
||||
'</ul>' +
|
||||
'</li>';
|
||||
result = result + bigScreenHtml;
|
||||
// 替换源头GIS管理页面链接为JSP
|
||||
result = result.replace('newSourceGISPage.html', 'newSourceGISPage.jsp');
|
||||
result = result.replace('newGIS.html', 'newSourceGISPage.jsp');
|
||||
|
||||
$('#menu').html(result);
|
||||
sessionStorage.setItem("menu", result);
|
||||
|
||||
// 在设置HTML后执行DOM注入
|
||||
appendS223Menu();
|
||||
|
||||
sessionStorage.setItem("menu", $('#menu').html()); // 保存修改后的HTML到sessionStorage
|
||||
|
||||
if (sessionStorage.m1 != undefined) {
|
||||
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
||||
}
|
||||
|
||||
@ -394,7 +394,7 @@
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 153, 0, 0.3)',
|
||||
color: '#FF9900',
|
||||
borderColor: '#FF9900',
|
||||
borderWidth: 1
|
||||
},
|
||||
|
||||
@ -326,7 +326,7 @@
|
||||
<!-- BEGIN 登录 FORM -->
|
||||
<form class="login-form " id="loginForm">
|
||||
<div class="logo row">
|
||||
<img src="IMG/login/title_tglw.png" style="width:100%;" alt="" id="login-title1" />
|
||||
<img src="IMG/login/title.png" style="width:100%;" alt="" id="login-title" />
|
||||
<!-- <div class="col-lg-8 col-sm-8 col-md-8 col-xs-8">
|
||||
<h5 style="color:black" class="form-title">西派埃智能</h4>
|
||||
<h2 style="margin:0px">南康智慧水厂运管平台</h2>
|
||||
|
||||
159
src/main/webapp/jsp/pipeline/pipelineDataAdd.jsp
Normal file
159
src/main/webapp/jsp/pipeline/pipelineDataAdd.jsp
Normal file
@ -0,0 +1,159 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container . select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {
|
||||
$.post(ext.contextPath + "/pipeline/pipelineData/save.do", $("#subForm").serialize(), function(data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
showAlert('s', '保存成功', 'mainAlertdiv');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败', 'alertDiv');
|
||||
} else {
|
||||
showAlert('d', data.res, 'alertDiv');
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',
|
||||
fields: {
|
||||
pipelineName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '管道名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
diameterMm: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
lengthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
startBurialDepthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
endBurialDepthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
startGroundElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
endGroundElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
pipelineInvertElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog" style="width: 700px;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">新增管道数据</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*管道名称</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="pipelineName" name="pipelineName" placeholder="请输入管道名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">直径(mm)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="diameterMm" name="diameterMm" placeholder="请输入管道直径">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">长度(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="lengthM" name="lengthM" placeholder="请输入管道长度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="startBurialDepthM" name="startBurialDepthM" placeholder="请输入起点埋深">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="endBurialDepthM" name="endBurialDepthM" placeholder="请输入终点埋深">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="startGroundElevationM" name="startGroundElevationM" placeholder="请输入起点地面高程">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="endGroundElevationM" name="endGroundElevationM" placeholder="请输入终点地面高程">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">管道底部标高(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="pipelineInvertElevationM" name="pipelineInvertElevationM" placeholder="请输入管道底部标高">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()" id="btn_save">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
169
src/main/webapp/jsp/pipeline/pipelineDataEdit.jsp
Normal file
169
src/main/webapp/jsp/pipeline/pipelineDataEdit.jsp
Normal file
@ -0,0 +1,169 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {
|
||||
$.post(ext.contextPath + "/pipeline/pipelineData/update.do", $("#subForm").serialize(), function(data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
showAlert('s', '更新成功', 'mainAlertdiv');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '更新失败', 'alertDiv');
|
||||
} else {
|
||||
showAlert('d', data.res, 'alertDiv');
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',
|
||||
fields: {
|
||||
pipelineName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '管道名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
diameterMm: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
lengthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
startBurialDepthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
endBurialDepthM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
startGroundElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
endGroundElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
},
|
||||
pipelineInvertElevationM: {
|
||||
validators: {
|
||||
numeric: {
|
||||
message: '请输入有效数字'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog" style="width: 700px;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">编辑管道数据</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<input type="hidden" id="id" name="id" value="${pipelineData.id}">
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*管道名称</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="pipelineName" name="pipelineName"
|
||||
value="${pipelineData.pipelineName}" placeholder="请输入管道名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">直径(mm)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="diameterMm" name="diameterMm"
|
||||
value="${pipelineData.diameterMm}" placeholder="请输入管道直径">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">长度(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="lengthM" name="lengthM"
|
||||
value="${pipelineData.lengthM}" placeholder="请输入管道长度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="startBurialDepthM" name="startBurialDepthM"
|
||||
value="${pipelineData.startBurialDepthM}" placeholder="请输入起点埋深">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="endBurialDepthM" name="endBurialDepthM"
|
||||
value="${pipelineData.endBurialDepthM}" placeholder="请输入终点埋深">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="startGroundElevationM" name="startGroundElevationM"
|
||||
value="${pipelineData.startGroundElevationM}" placeholder="请输入起点地面高程">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="endGroundElevationM" name="endGroundElevationM"
|
||||
value="${pipelineData.endGroundElevationM}" placeholder="请输入终点地面高程">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">管道底部标高(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="pipelineInvertElevationM" name="pipelineInvertElevationM"
|
||||
value="${pipelineData.pipelineInvertElevationM}" placeholder="请输入管道底部标高">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()" id="btn_update">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
293
src/main/webapp/jsp/pipeline/pipelineDataList.jsp
Normal file
293
src/main/webapp/jsp/pipeline/pipelineDataList.jsp
Normal file
@ -0,0 +1,293 @@
|
||||
<%@ 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>
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.table-hover>tbody>tr:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fixed-table-toolbar .bs-bars, .fixed-table-toolbar .columns {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var addFun = function() {
|
||||
$.post(ext.contextPath + '/pipeline/pipelineData/add.do', function(data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
|
||||
var editFun = function(id) {
|
||||
stopBubbleDefaultEvent();
|
||||
$.post(ext.contextPath + '/pipeline/pipelineData/edit.do', {id: id}, function(data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
|
||||
var viewFun = function(id) {
|
||||
stopBubbleDefaultEvent();
|
||||
$.post(ext.contextPath + '/pipeline/pipelineData/view.do', {id: id}, function(data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
|
||||
var deleteFun = function(id) {
|
||||
stopBubbleDefaultEvent();
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
}).then(function(willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/pipeline/pipelineData/delete.do', {id: id}, function(data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
showAlert('s', '删除成功', 'mainAlertdiv');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var deletesFun = function() {
|
||||
var checkedItems = $("#table").bootstrapTable('getSelections');
|
||||
var datas = "";
|
||||
$.each(checkedItems, function(index, item) {
|
||||
datas += item.id + ",";
|
||||
});
|
||||
if (datas == "") {
|
||||
showAlert('d', '请先选择记录', 'mainAlertdiv');
|
||||
} else {
|
||||
swal({
|
||||
text: "您确定要删除选中记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
}).then(function(willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/pipeline/pipelineData/deletes.do', {ids: datas}, function(data) {
|
||||
if (data > 0) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
showAlert('s', '删除成功', 'mainAlertdiv');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var dosearch = function() {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
|
||||
function queryParamsFun(params) {
|
||||
return {
|
||||
rows: params.limit,
|
||||
page: params.offset / params.limit + 1,
|
||||
sort: params.sort,
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val()
|
||||
};
|
||||
}
|
||||
|
||||
var initFun = function() {
|
||||
$("#table").bootstrapTable({
|
||||
url: ext.contextPath + '/pipeline/pipelineData/getList.do',
|
||||
cache: false,
|
||||
striped: true,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 50],
|
||||
pageSize: 20,
|
||||
pageNumber: 1,
|
||||
sidePagination: 'server',
|
||||
queryParams: queryParamsFun,
|
||||
sortName: 'id',
|
||||
sortOrder: 'desc',
|
||||
onClickRow: function(row) {
|
||||
viewFun(row.id);
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
checkbox: true,
|
||||
}, {
|
||||
field: 'pipelineName',
|
||||
title: '管道名称',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '15%',
|
||||
formatter: function(value, row, index) {
|
||||
return '<span onclick="viewFun(\'' + row.id + '\');" style="color:#004B97;cursor:pointer;">' + row.pipelineName + '</span>';
|
||||
}
|
||||
}, {
|
||||
field: 'diameterMm',
|
||||
title: '直径(mm)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'lengthM',
|
||||
title: '长度(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'startBurialDepthM',
|
||||
title: '起点埋深(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '12%'
|
||||
}, {
|
||||
field: 'endBurialDepthM',
|
||||
title: '终点埋深(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '12%'
|
||||
}, {
|
||||
field: 'startGroundElevationM',
|
||||
title: '起点地面高程(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '13%'
|
||||
}, {
|
||||
field: 'endGroundElevationM',
|
||||
title: '终点地面高程(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '13%'
|
||||
}, {
|
||||
field: 'pipelineInvertElevationM',
|
||||
title: '管道底部标高(m)',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '13%'
|
||||
}, {
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '12%',
|
||||
formatter: function(value, row, index) {
|
||||
var buts = "";
|
||||
buts += '<security:authorize buttonUrl="pipeline/pipelineData/edit.do">';
|
||||
buts += '<button class="btn btn-default btn-sm" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
|
||||
buts += '</security:authorize>';
|
||||
|
||||
buts += '<security:authorize buttonUrl="pipeline/pipelineData/delete.do">';
|
||||
buts += '<button class="btn btn-default btn-sm" title="删除" onclick="deleteFun(\'' + row.id + '\')"><i class="fa fa fa-trash-o"></i><span class="hidden-md hidden-lg">删除</span></button>';
|
||||
buts += '</security:authorize>';
|
||||
|
||||
buts = '<div class="btn-group" >' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function() {
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function() {
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function() {
|
||||
initFun();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<section class="content-header">
|
||||
<h1 id="head_title"></h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<form id="searchForm">
|
||||
<div>
|
||||
<div class="form-group" style="padding:0;">
|
||||
<div class="btn-group" style="width: 100%;">
|
||||
<security:authorize buttonUrl="pipeline/pipelineData/add.do">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="addFun();">
|
||||
<i class="fa fa-plus"></i> 新增
|
||||
</button>
|
||||
</security:authorize>
|
||||
<security:authorize buttonUrl="pipeline/pipelineData/delete.do">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="deletesFun();">
|
||||
<i class="fa fa-trash-o"></i> 删除
|
||||
</button>
|
||||
</security:authorize>
|
||||
<div class="form-group pull-right form-inline">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control pull-right" placeholder="管道名称">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" onclick="dosearch();">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<table id="table"></table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
src/main/webapp/jsp/pipeline/pipelineDataView.jsp
Normal file
84
src/main/webapp/jsp/pipeline/pipelineDataView.jsp
Normal file
@ -0,0 +1,84 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.form-control-static {
|
||||
min-height: 34px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog" style="width: 700px;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">查看管道数据</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">管道名称</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.pipelineName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">直径(mm)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.diameterMm}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">长度(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.lengthM}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.startBurialDepthM}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点埋深(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.endBurialDepthM}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">起点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.startGroundElevationM}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">终点地面高程(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.endGroundElevationM}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">管道底部标高(m)</label>
|
||||
<div class="col-sm-8">
|
||||
<p class="form-control-static">${pipelineData.pipelineInvertElevationM}</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
1746
src/main/webapp/jsp/visual/newSourceGISPage.html
Normal file
1746
src/main/webapp/jsp/visual/newSourceGISPage.html
Normal file
File diff suppressed because it is too large
Load Diff
1744
src/main/webapp/jsp/visual/newSourceGISPage.jsp
Normal file
1744
src/main/webapp/jsp/visual/newSourceGISPage.jsp
Normal file
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>水厂大屏展示</title>
|
||||
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../JS/echarts3.0.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
@ -17,16 +19,14 @@
|
||||
width: 6500px;
|
||||
height: 1800px;
|
||||
/* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
|
||||
background-image: url('../../IMG/screen1-1.png');
|
||||
background-image: url('../../IMG/screen1.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
/* Specific Position for Data 6040 */
|
||||
.val-6040 {
|
||||
position: absolute;
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
.slqs {
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
height: 62px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -36,35 +36,546 @@
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
}
|
||||
.slqs-jinri {
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
}
|
||||
.val-4197 {
|
||||
.slqs-zuori {
|
||||
top: 335px;
|
||||
left: 592px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.val-12356 {
|
||||
.slqs-benyue {
|
||||
top: 335px;
|
||||
left: 975px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ncl-val {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: Gilroy;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.ncl-val1 {
|
||||
top: 1168px;
|
||||
left: 318px;
|
||||
}
|
||||
.ncl-val2 {
|
||||
top: 1168px;
|
||||
left: 653px;
|
||||
}
|
||||
.ncl-val3 {
|
||||
top: 1168px;
|
||||
left: 1023px;
|
||||
}
|
||||
.ncl2 {
|
||||
position: absolute;
|
||||
top: 1310px;
|
||||
left: 66px;
|
||||
width: 1077px;
|
||||
height: 440px;
|
||||
}
|
||||
#ncl-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.seven-days-sl {
|
||||
position: absolute;
|
||||
top: 591px;
|
||||
left: 66px;
|
||||
width: 1077px;
|
||||
height: 400px;
|
||||
}
|
||||
#seven-days-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.quality-table {
|
||||
position: absolute;
|
||||
top: 630px;
|
||||
left: 1183px;
|
||||
width: 975px;
|
||||
}
|
||||
.quality-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: #7ef3ff;
|
||||
font-size: 27px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
}
|
||||
.quality-table th,
|
||||
.quality-table td {
|
||||
border: 1px solid rgba(0, 163, 255, 0.4);
|
||||
padding: 16px 23px;
|
||||
}
|
||||
.quality-table th {
|
||||
color: #ffffff;
|
||||
font-size: 27px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.quality-table td:first-child {
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.quality-table td:last-child {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.quality-chart {
|
||||
position: absolute;
|
||||
top: 1380px;
|
||||
left: 1183px;
|
||||
width: 975px;
|
||||
height: 370px;
|
||||
}
|
||||
#quality-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 药耗 */
|
||||
.yaohao{
|
||||
position: absolute;
|
||||
top: 343px;
|
||||
width: 94px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: Gilroy;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.yaohao1 {
|
||||
left: 1317px;
|
||||
}
|
||||
.yaohao2 {
|
||||
left: 1652px;
|
||||
}
|
||||
.yaohao3 {
|
||||
left: 2056px;
|
||||
}
|
||||
|
||||
.Middle3 {
|
||||
width: 2100px;
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 2700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen-container">
|
||||
<!-- <div class="val-6040">6040</div>
|
||||
<div class="val-4197">4197</div>
|
||||
<div class="val-12356">12356</div> -->
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="slqs slqs-jinri">6040</div>
|
||||
<div class="slqs slqs-zuori">4197</div>
|
||||
<div class="slqs slqs-benyue">12356</div>
|
||||
</div>
|
||||
|
||||
<!-- 七日水量 -->
|
||||
<div class="seven-days-sl">
|
||||
<div id="seven-days-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 泥处理指标 -->
|
||||
<div class="ncl">
|
||||
<div class="ncl1">
|
||||
<div class="ncl-val ncl-val1">0</div>
|
||||
<div class="ncl-val ncl-val2">200</div>
|
||||
<div class="ncl-val ncl-val3">4.89</div>
|
||||
</div>
|
||||
<div class="ncl2">
|
||||
<div id="ncl-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Middle">
|
||||
<div class="Middle1">
|
||||
<!-- 药耗 -->
|
||||
<div>
|
||||
<div class="yaohao yaohao1">300</div>
|
||||
<div class="yaohao yaohao2">200</div>
|
||||
<div class="yaohao yaohao3">1</div>
|
||||
</div>
|
||||
|
||||
<!-- 质量指标 表格 -->
|
||||
<div class="quality-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>当前值</th>
|
||||
<th>平均值</th>
|
||||
<th>最高</th>
|
||||
<th>最低</th>
|
||||
<th>指标</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>COD (mg/L)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TP (mg/L)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NH3–N (mg/L)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TN (mg/L)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PH (mg/L)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SS</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>温度(℃)</td>
|
||||
<td>13.186</td>
|
||||
<td>12.996</td>
|
||||
<td>14.666</td>
|
||||
<td>11.92</td>
|
||||
<td>0.000–20.000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="quality-chart">
|
||||
<div id="quality-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Middle2">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间图表 -->
|
||||
<div class="Middle3">
|
||||
<img src="../../IMG/monitor.png" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
|
||||
<div class="Middle4">
|
||||
<!-- 进水 -->
|
||||
<div></div>
|
||||
|
||||
<!-- 出水 -->
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频 -->
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
var chartDom = document.getElementById('seven-days-chart');
|
||||
if (!chartDom) return;
|
||||
var myChart = echarts.init(chartDom);
|
||||
var dataAxis = ['11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16', '11-17'];
|
||||
var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
|
||||
var option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 40,
|
||||
top: 40,
|
||||
bottom: 40
|
||||
},
|
||||
legend: {
|
||||
data: ['处理水量'],
|
||||
right: 10,
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: '#9BE8FF',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dataAxis,
|
||||
axisLine: {
|
||||
lineStyle: { color: '#2C3E50' }
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 10000,
|
||||
splitNumber: 5,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 18
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.15)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{ type: 'inside' }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '处理水量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#46F2FF' },
|
||||
{ offset: 1, color: '#0B4DB5' }
|
||||
]),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#6af8ff' },
|
||||
{ offset: 1, color: '#1560d6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
|
||||
itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
var zoomSize = 6;
|
||||
myChart.on('click', function(params) {
|
||||
var startIndex = Math.max(params.dataIndex - Math.floor(zoomSize / 2), 0);
|
||||
var endIndex = Math.min(params.dataIndex + Math.floor(zoomSize / 2), data.length - 1);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
startValue: dataAxis[startIndex],
|
||||
endValue: dataAxis[endIndex]
|
||||
});
|
||||
});
|
||||
var nclDom = document.getElementById('ncl-chart');
|
||||
if (nclDom) {
|
||||
var nclChart = echarts.init(nclDom, 'dark');
|
||||
var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
|
||||
var nclOption = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 40,
|
||||
top: 40,
|
||||
bottom: 40
|
||||
},
|
||||
legend: {
|
||||
data: ['实际小时排泥量'],
|
||||
right: 10,
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: '#9BE8FF',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: { color: '#2C3E50' }
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 500,
|
||||
splitNumber: 5,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 25
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.15)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际小时排泥量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: { normal: { width: 2 } },
|
||||
itemStyle: { normal: { color: '#46F2FF' } },
|
||||
areaStyle: { normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(70, 242, 255, 0.45)' },
|
||||
{ offset: 1, color: 'rgba(11, 77, 181, 0.05)' }
|
||||
]),
|
||||
opacity: 1
|
||||
}},
|
||||
data: nclData
|
||||
}
|
||||
]
|
||||
};
|
||||
nclChart.setOption(nclOption);
|
||||
window.addEventListener('resize', function() {
|
||||
nclChart.resize();
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', function() {
|
||||
myChart.resize();
|
||||
});
|
||||
var qualityDom = document.getElementById('quality-chart');
|
||||
if (qualityDom) {
|
||||
var qualityChart = echarts.init(qualityDom);
|
||||
var qualityData = [8, 13, 9, 14, 21, 14, 18];
|
||||
var qualityOption = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 40,
|
||||
top: 40,
|
||||
bottom: 40
|
||||
},
|
||||
legend: {
|
||||
data: ['水质量'],
|
||||
right: 10,
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: '#9BE8FF',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['11', '12', '13', '14', '15', '16', '17'],
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: { color: '#2C3E50' }
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 25,
|
||||
splitNumber: 5,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#B7C9E2',
|
||||
fontSize: 25
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.15)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '水质量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: { normal: { width: 2 } },
|
||||
itemStyle: { normal: { color: '#46F2FF' } },
|
||||
areaStyle: { normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(70, 242, 255, 0.45)' },
|
||||
{ offset: 1, color: 'rgba(11, 77, 181, 0.05)' }
|
||||
]),
|
||||
opacity: 1
|
||||
}},
|
||||
data: qualityData
|
||||
}
|
||||
]
|
||||
};
|
||||
qualityChart.setOption(qualityOption);
|
||||
window.addEventListener('resize', function() {
|
||||
qualityChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -14,7 +14,7 @@
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow: auto; /* Allow scrolling if window is smaller */
|
||||
background-color: #030829;
|
||||
}
|
||||
.screen-container {
|
||||
@ -394,10 +394,10 @@
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 170, 0, 0.4)',
|
||||
borderColor: '#ffaa00',
|
||||
borderWidth: 1
|
||||
},
|
||||
color: '#FF9900',
|
||||
borderColor: '#FF9900',
|
||||
borderWidth: 1
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
@ -407,7 +407,7 @@
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ffaa00'
|
||||
color: '#FF9900'
|
||||
},
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
@ -423,11 +423,11 @@
|
||||
show: true,
|
||||
position: 'end',
|
||||
formatter: '{c}',
|
||||
color: '#ffaa00'
|
||||
color: '#FF9900'
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffaa00'
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user