大屏更新、源头管理
This commit is contained in:
Rue Ji
@ -494,88 +494,11 @@ function getMpPic() {
|
|||||||
function initMenu() {
|
function initMenu() {
|
||||||
var menu = $('#menu');
|
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('管道管理') > -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)
|
|
||||||
} 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 应该可用。
|
|
||||||
}
|
|
||||||
$treeviewMenu.append(newMenuHtml);
|
|
||||||
|
|
||||||
// 确保父菜单是展开状态（可选）
|
|
||||||
// $targetLi.addClass('active menu-open');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (sessionStorage.menu != undefined) {
|
if (sessionStorage.menu != undefined) {
|
||||||
$('#menu').html(sessionStorage.menu);
|
$('#menu').html(sessionStorage.menu);
|
||||||
|
|
||||||
// 即使是缓存加载，也尝试添加新菜单
|
// 更新大屏菜单的onclick事件，确保使用全屏功能
|
||||||
appendS223Menu();
|
updateBigScreenMenuEvents();
|
||||||
|
|
||||||
if (sessionStorage.m1 != undefined) {
|
if (sessionStorage.m1 != undefined) {
|
||||||
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
||||||
@ -589,29 +512,8 @@ function initMenu() {
|
|||||||
//return;
|
//return;
|
||||||
} else {
|
} else {
|
||||||
$.post(ext.contextPath + "/user/showMenuListByCu.do", {}, function (result) {
|
$.post(ext.contextPath + "/user/showMenuListByCu.do", {}, function (result) {
|
||||||
var bigScreenHtml = '<li class="treeview">' +
|
|
||||||
'<a href="#">' +
|
|
||||||
'<i class="fa fa-desktop"></i> <span>大屏展示</span>' +
|
|
||||||
'<span class="pull-right-container">' +
|
|
||||||
'<i class="fa fa-angle-left pull-right"></i>' +
|
|
||||||
'</span>' +
|
|
||||||
'</a>' +
|
|
||||||
'<ul class="treeview-menu">' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 水厂大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen2.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 区域管线大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen3.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 排污户大屏</a></li>' +
|
|
||||||
'</ul>' +
|
|
||||||
'</li>';
|
|
||||||
result = result + bigScreenHtml;
|
|
||||||
// 替换源头GIS管理页面链接为JSP
|
|
||||||
result = result.replace('newSourceGISPage.html', 'newSourceGISPage.jsp');
|
|
||||||
result = result.replace('newGIS.html', 'newSourceGISPage.jsp');
|
|
||||||
|
|
||||||
$('#menu').html(result);
|
$('#menu').html(result);
|
||||||
|
|
||||||
// 在设置HTML后执行DOM注入
|
|
||||||
appendS223Menu();
|
|
||||||
|
|
||||||
sessionStorage.setItem("menu", $('#menu').html()); // 保存修改后的HTML到sessionStorage
|
sessionStorage.setItem("menu", $('#menu').html()); // 保存修改后的HTML到sessionStorage
|
||||||
|
|
||||||
if (sessionStorage.m1 != undefined) {
|
if (sessionStorage.m1 != undefined) {
|
||||||
@ -647,6 +549,51 @@ function initMenuScroll(menu) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 获取浏览器当前缩放比例
|
||||||
|
* @returns 100为100%
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 打开全屏窗口
|
||||||
|
* @param url 页面URL
|
||||||
|
*/
|
||||||
|
function openFullScreenWindow(url) {
|
||||||
|
// 打开新窗口，使用屏幕全部尺寸
|
||||||
|
var width = screen.width;
|
||||||
|
var height = screen.height;
|
||||||
|
var newWindow = window.open(url, '_blank',
|
||||||
|
'width=' + width + ',height=' + height +
|
||||||
|
',top=0,left=0,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=no');
|
||||||
|
|
||||||
|
// 尝试让新窗口获得焦点
|
||||||
|
if (newWindow) {
|
||||||
|
newWindow.focus();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新大屏菜单的点击事件，确保使用全屏功能
|
||||||
|
* 用于处理缓存菜单的情况
|
||||||
|
*/
|
||||||
|
function updateBigScreenMenuEvents() {
|
||||||
|
// 查找所有大屏菜单项并更新onclick事件
|
||||||
|
$('#menu a').each(function() {
|
||||||
|
var text = $(this).text().trim();
|
||||||
|
var url = '';
|
||||||
|
if (text === '水厂大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen.jsp';
|
||||||
|
} else if (text === '区域管线大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen2.jsp';
|
||||||
|
} else if (text === '排污户大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen3.jsp';
|
||||||
|
}
|
||||||
|
if (url) {
|
||||||
|
$(this).attr('href', 'javascript:void(0);');
|
||||||
|
$(this).attr('onclick', 'openFullScreenWindow(\'' + url + '\');');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/** 获取浏览器当前缩放比例
|
/** 获取浏览器当前缩放比例
|
||||||
* @returns 100为100%
|
* @returns 100为100%
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
.screen-container {
|
.screen-container {
|
||||||
width: 6500px;
|
width: 6500px;
|
||||||
height: 1800px;
|
height: 1800px;
|
||||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
|
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png');
|
||||||
/* background-image: url("../../IMG/screen1.png"); */
|
/* background-image: url("../../IMG/screen1.png"); */
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -178,9 +178,48 @@
|
|||||||
top: 300px;
|
top: 300px;
|
||||||
left: 2700px;
|
left: 2700px;
|
||||||
}
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- 全屏提示遮罩 -->
|
||||||
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
|
<div class="tip-content">
|
||||||
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="screen-container">
|
<div class="screen-container">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div>
|
<div>
|
||||||
@ -305,7 +344,8 @@
|
|||||||
|
|
||||||
<!-- 中间图表 -->
|
<!-- 中间图表 -->
|
||||||
<div class="Middle3">
|
<div class="Middle3">
|
||||||
<img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
|
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
||||||
|
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Middle4">
|
<div class="Middle4">
|
||||||
@ -325,6 +365,35 @@
|
|||||||
<div class="right"></div>
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
// 进入全屏函数
|
||||||
|
function enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) { /* IE11 */
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
// 隐藏提示遮罩
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
// 退出全屏时显示提示
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
var chartDom = document.getElementById("seven-days-chart");
|
var chartDom = document.getElementById("seven-days-chart");
|
||||||
if (!chartDom) return;
|
if (!chartDom) return;
|
||||||
|
|||||||
@ -119,9 +119,48 @@ pageEncoding="UTF-8"%>
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- 全屏提示遮罩 -->
|
||||||
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
|
<div class="tip-content">
|
||||||
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="screen-container">
|
<div class="screen-container">
|
||||||
<div class="stat-card card-1">53829.5</div>
|
<div class="stat-card card-1">53829.5</div>
|
||||||
<div class="stat-card card-2">2495</div>
|
<div class="stat-card card-2">2495</div>
|
||||||
@ -159,8 +198,34 @@ pageEncoding="UTF-8"%>
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 进入全屏函数
|
||||||
|
function enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) {
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) {
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
launchIntoFullscreen(document.documentElement);
|
|
||||||
initPieChart();
|
initPieChart();
|
||||||
initPieChart2();
|
initPieChart2();
|
||||||
initGaugeChart("gauge-chart-content-3", 53829.5);
|
initGaugeChart("gauge-chart-content-3", 53829.5);
|
||||||
|
|||||||
@ -269,9 +269,48 @@ pageEncoding="UTF-8"%>
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- 全屏提示遮罩 -->
|
||||||
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
|
<div class="tip-content">
|
||||||
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="screen-container">
|
<div class="screen-container">
|
||||||
<div class="rank-module-container">
|
<div class="rank-module-container">
|
||||||
<!-- Statistics -->
|
<!-- Statistics -->
|
||||||
@ -367,8 +406,34 @@ pageEncoding="UTF-8"%>
|
|||||||
var currentFocusIndex = 0;
|
var currentFocusIndex = 0;
|
||||||
var rotationTimer = null;
|
var rotationTimer = null;
|
||||||
|
|
||||||
|
// 进入全屏函数
|
||||||
|
function enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) {
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) {
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
launchIntoFullscreen(document.documentElement);
|
|
||||||
initData();
|
initData();
|
||||||
|
|
||||||
// Double click to toggle fullscreen
|
// Double click to toggle fullscreen
|
||||||
|
|||||||
@ -4,20 +4,6 @@
|
|||||||
function searchMenu(){
|
function searchMenu(){
|
||||||
var search_name = $('#search_name_menu').val();
|
var search_name = $('#search_name_menu').val();
|
||||||
$.post(ext.contextPath+"/user/showMenuListByCu.do" , {search_name:search_name}, function(result) {
|
$.post(ext.contextPath+"/user/showMenuListByCu.do" , {search_name:search_name}, function(result) {
|
||||||
var bigScreenHtml = '<li class="treeview">' +
|
|
||||||
'<a href="#">' +
|
|
||||||
'<i class="fa fa-desktop"></i> <span>大屏展示</span>' +
|
|
||||||
'<span class="pull-right-container">' +
|
|
||||||
'<i class="fa fa-angle-left pull-right"></i>' +
|
|
||||||
'</span>' +
|
|
||||||
'</a>' +
|
|
||||||
'<ul class="treeview-menu">' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 水厂大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen2.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 区域管线大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen3.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 排污户大屏</a></li>' +
|
|
||||||
'</ul>' +
|
|
||||||
'</li>';
|
|
||||||
result = result + bigScreenHtml;
|
|
||||||
$('#menu').html(result);
|
$('#menu').html(result);
|
||||||
sessionStorage.setItem("menu",result);
|
sessionStorage.setItem("menu",result);
|
||||||
var $li=$('#menu').find("li:first");
|
var $li=$('#menu').find("li:first");
|
||||||
|
|||||||
@ -179,7 +179,7 @@
|
|||||||
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
|
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
|
||||||
<div style="height:100%;width:100%;background-color:#ffffff;">
|
<div style="height:100%;width:100%;background-color:#ffffff;">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
上海金山卫污水公司11
|
上海金山卫污水公司
|
||||||
</div>
|
</div>
|
||||||
<div style="width:20%;height:95%;float:left;">
|
<div style="width:20%;height:95%;float:left;">
|
||||||
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
|
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
|
||||||
|
|||||||
@ -3,21 +3,10 @@
|
|||||||
function doSaveMainRole() {
|
function doSaveMainRole() {
|
||||||
var checkedtree = $('#menu_func_tree').treeview('getChecked');
|
var checkedtree = $('#menu_func_tree').treeview('getChecked');
|
||||||
var datas = "";
|
var datas = "";
|
||||||
var lis = $('[data-nodeid]');
|
// 使用getChecked方法获取勾选的节点，直接获取节点的id属性（菜单的真实ID）
|
||||||
for (var i = 0; i < lis.length; i++) {
|
$.each(checkedtree, function(index, item){
|
||||||
if (lis[i].dataset.nodeid.split('.').length == 4) {
|
datas += item.id + ",";
|
||||||
var lis_element = $('#' + lis[i].id);
|
});
|
||||||
if (lis_element.hasClass('node-checked')) {
|
|
||||||
var span = lis_element.children('.check-icon');
|
|
||||||
if (span.hasClass('glyphicon-check')) {
|
|
||||||
datas += lis[i].id + ",";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/*$.each(checkedtree,function(index,item){
|
|
||||||
datas+=item.id+",";
|
|
||||||
});*/
|
|
||||||
$.post(ext.contextPath + "/user/updateRoleMenu.do", {menustr: datas, roleid: "${roleid}"}, function (result) {
|
$.post(ext.contextPath + "/user/updateRoleMenu.do", {menustr: datas, roleid: "${roleid}"}, function (result) {
|
||||||
if (result >= 0) {
|
if (result >= 0) {
|
||||||
closeModal('menuFuncModal');
|
closeModal('menuFuncModal');
|
||||||
|
|||||||
@ -7,9 +7,9 @@
|
|||||||
<title>源头GIS管理</title>
|
<title>源头GIS管理</title>
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||||
<!-- DateRangePicker CSS -->
|
<!-- DateRangePicker CSS -->
|
||||||
<link rel="stylesheet" href="../../plugins/bootstrap-daterangepicker/daterangepicker.css">
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
@ -198,25 +198,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="drawer-sidebar">
|
<div class="drawer-sidebar">
|
||||||
<div class="drawer-nav-item active" onclick="switchTab('tab-sewage', this)">
|
<div class="drawer-nav-item active" onclick="switchTab('tab-sewage', this)">
|
||||||
<img src="../../IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
<img src="<%=request.getContextPath()%>/IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
|
||||||
<img src="../../IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
<img src="<%=request.getContextPath()%>/IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
|
||||||
<img src="../../IMG/icon_qy.png" class="drawer-nav-icon">企业
|
<img src="<%=request.getContextPath()%>/IMG/icon_qy.png" class="drawer-nav-icon">企业
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
|
||||||
<img src="../../IMG/icon_gd.png" class="drawer-nav-icon">管道
|
<img src="<%=request.getContextPath()%>/IMG/icon_gd.png" class="drawer-nav-icon">管道
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
|
||||||
<img src="../../IMG/icon_gj.png" class="drawer-nav-icon">管井
|
<img src="<%=request.getContextPath()%>/IMG/icon_gj.png" class="drawer-nav-icon">管井
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
|
||||||
<img src="../../IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
<img src="<%=request.getContextPath()%>/IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
|
||||||
<img src="../../IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
<img src="<%=request.getContextPath()%>/IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-content">
|
<div class="drawer-content">
|
||||||
@ -342,32 +342,18 @@
|
|||||||
|
|
||||||
<div class="well well-sm" style="background: white; border: none; box-shadow: none; padding: 0;">
|
<div class="well well-sm" style="background: white; border: none; box-shadow: none; padding: 0;">
|
||||||
<div class="query-form-group">
|
<div class="query-form-group">
|
||||||
<label>时间范围</label>
|
<label>企业名称/合同编号</label>
|
||||||
<div style="display: flex; align-items: center;">
|
|
||||||
<div class="input-group date">
|
|
||||||
<input type="text" class="form-control input-sm" id="company-time-start" value="2026-01-09 00:00">
|
|
||||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
|
||||||
</div>
|
|
||||||
<span style="margin: 0 5px;">~</span>
|
|
||||||
<div class="input-group date">
|
|
||||||
<input type="text" class="form-control input-sm" id="company-time-end" value="2026-02-09 17:15">
|
|
||||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="query-form-group">
|
|
||||||
<label>企业名称</label>
|
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control" placeholder="请输入企业名称">
|
<input type="text" class="form-control" id="company-search-name" placeholder="请输入企业名称或合同编号">
|
||||||
<span class="input-group-btn">
|
<span class="input-group-btn">
|
||||||
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
<button class="btn btn-primary" type="button" onclick="searchCompany()"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-bottom: 10px;">
|
<div style="margin-bottom: 10px;">
|
||||||
<label><input type="checkbox" checked> 显示标注</label>
|
<label><input type="checkbox" checked id="company-show-label"> 显示标注</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="max-height: 500px; overflow-y: auto;">
|
<div style="max-height: 500px; overflow-y: auto;">
|
||||||
@ -375,13 +361,16 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th width="40">序号</th>
|
<th width="40">序号</th>
|
||||||
<th>编号</th>
|
<th>合同编号</th>
|
||||||
<th>名称</th>
|
<th>公司名称</th>
|
||||||
<th>地址</th>
|
<th>地址</th>
|
||||||
<th>污水厂编号</th>
|
<th>所属区域</th>
|
||||||
<th>排放编号</th>
|
<th>所属泵站</th>
|
||||||
<th>日排放量</th>
|
<th>排污许可证编号</th>
|
||||||
<th>日排放点位</th>
|
<th>所属行业</th>
|
||||||
|
<th>实际日排量</th>
|
||||||
|
<th>已关联点位</th>
|
||||||
|
<th>已录入数据</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="company-table-body">
|
<tbody id="company-table-body">
|
||||||
@ -636,8 +625,8 @@
|
|||||||
<div id="map-container"></div>
|
<div id="map-container"></div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
<!-- Tianditu Map API -->
|
<!-- Tianditu Map API -->
|
||||||
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
||||||
@ -735,7 +724,30 @@
|
|||||||
var records = [];
|
var records = [];
|
||||||
var markers = [];
|
var markers = [];
|
||||||
|
|
||||||
// Mock API Function
|
// 获取上下文路径
|
||||||
|
var contextPath = '<%=request.getContextPath()%>';
|
||||||
|
|
||||||
|
// 真实API请求函数
|
||||||
|
function apiRequest(url, params) {
|
||||||
|
console.log('API Request:', contextPath + url, params);
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
$.ajax({
|
||||||
|
url: contextPath + url,
|
||||||
|
type: 'POST',
|
||||||
|
data: params || {},
|
||||||
|
success: function(data) {
|
||||||
|
console.log('API Response:', url, data);
|
||||||
|
resolve(data);
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
console.error('API Request Error:', url, error);
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock API Function (保留用于没有真实接口的数据)
|
||||||
function mockApiRequest(url, params) {
|
function mockApiRequest(url, params) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve, reject) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
@ -826,15 +838,15 @@
|
|||||||
resolve(wls);
|
resolve(wls);
|
||||||
} else if (url === '/api/plan/list') {
|
} else if (url === '/api/plan/list') {
|
||||||
resolve([
|
resolve([
|
||||||
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", start: "2026-02-01", end: "2026-12-31" },
|
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||||
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", start: "2026-02-01", end: "2026-12-31" },
|
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||||
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", start: "2026-01-01", end: "2026-03-31" }
|
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", startTime: "2026-01-01", endTime: "2026-03-31" }
|
||||||
]);
|
]);
|
||||||
} else if (url === '/api/record/list') {
|
} else if (url === '/api/record/list') {
|
||||||
resolve([
|
resolve([
|
||||||
{ id: 1, name: "金山一车间周检", status: "已完成", planStart: "2026-02-03 09:00", planEnd: "2026-02-03 11:00", actualEnd: "2026-02-03 10:45" },
|
{ id: 1, taskName: "金山一车间周检", status: "已完成", planStartTime: "2026-02-03 09:00", planEndTime: "2026-02-03 11:00", actualTime: "2026-02-03 10:45" },
|
||||||
{ id: 2, name: "泵站日常巡检", status: "已完成", planStart: "2026-02-08 08:00", planEnd: "2026-02-08 12:00", actualEnd: "2026-02-08 11:30" },
|
{ id: 2, taskName: "泵站日常巡检", status: "已完成", planStartTime: "2026-02-08 08:00", planEndTime: "2026-02-08 12:00", actualTime: "2026-02-08 11:30" },
|
||||||
{ id: 3, name: "泵站日常巡检", status: "进行中", planStart: "2026-02-11 08:00", planEnd: "2026-02-11 12:00", actualEnd: "-" }
|
{ id: 3, taskName: "泵站日常巡检", status: "进行中", planStartTime: "2026-02-11 08:00", planEndTime: "2026-02-11 12:00", actualTime: "-" }
|
||||||
]);
|
]);
|
||||||
} else {
|
} else {
|
||||||
reject("Unknown API Endpoint");
|
reject("Unknown API Endpoint");
|
||||||
@ -843,44 +855,220 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize Data
|
// 加载企业数据（排污源）
|
||||||
function loadData() {
|
// 接口字段参考 Sewage 实体类和 sewageList.jsp
|
||||||
Promise.all([
|
function loadCompanyData() {
|
||||||
mockApiRequest('/api/sewage/list'),
|
return apiRequest('/sparepart/sewage/getList.do', {
|
||||||
mockApiRequest('/api/pump/list'),
|
page: 1,
|
||||||
mockApiRequest('/api/company/list'),
|
rows: 1000,
|
||||||
mockApiRequest('/api/pipeline/list'),
|
sort: 'contract_order',
|
||||||
mockApiRequest('/api/well/list'),
|
order: 'asc'
|
||||||
mockApiRequest('/api/plan/list'),
|
}).then(function(data) {
|
||||||
mockApiRequest('/api/record/list'),
|
// 接口返回格式: {total: xxx, rows: [...]}
|
||||||
]).then(function(results) {
|
var list = data.rows || [];
|
||||||
sources = results[0];
|
console.log('企业接口返回数据条数:', list.length);
|
||||||
pumpStations = results[1];
|
companies = list.map(function(items) {
|
||||||
companies = results[2];
|
const item = items.company;
|
||||||
pipelines = results[3];
|
// 解析经纬度 (格式: "经度" 或 "经度,纬度")
|
||||||
wells = results[4];
|
var lng = null, lat = null;
|
||||||
plans = results[5];
|
if (item.longitudeLatitude) {
|
||||||
records = results[6];
|
var coords = String(item.longitudeLatitude).split(',');
|
||||||
|
if (coords.length >= 2) {
|
||||||
// Initialize View with default tab (Sewage)
|
lng = parseFloat(coords[0]);
|
||||||
initSewageTable();
|
lat = parseFloat(coords[1]);
|
||||||
initMarkers('sewage');
|
} else if (coords.length === 1) {
|
||||||
|
lng = parseFloat(coords[0]);
|
||||||
// Initialize other tables but they are hidden
|
}
|
||||||
initPumpTable();
|
}
|
||||||
initCompanyTable();
|
// 如果经纬度不完整，从 company 对象获取
|
||||||
initPipelineTable();
|
if ((!lng || !lat) && item.company) {
|
||||||
initWellTable();
|
lng = lng || item.company.longitude;
|
||||||
initPlanTable();
|
lat = lat || item.company.latitude;
|
||||||
initRecordTable();
|
}
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
// 合同编号
|
||||||
|
contractNumber: item.contractNumber || '',
|
||||||
|
// 公司名称
|
||||||
|
name: item.name || '',
|
||||||
|
// 地址
|
||||||
|
address: item.address || '',
|
||||||
|
// 所属区域 (company.name)
|
||||||
|
areaName: item.company ? (item.company.name || '') : '',
|
||||||
|
// 所属泵站ID
|
||||||
|
processSectionId: item.processSectionId || '',
|
||||||
|
// 所属泵站名称 (processSection为null时显示空)
|
||||||
|
processSectionName: item.processSection ? (item.processSection.name || '') : '',
|
||||||
|
// 排污许可证编号
|
||||||
|
permitNum: item.permitNum || '',
|
||||||
|
// 排放编号
|
||||||
|
ventNum: item.ventNum || '',
|
||||||
|
// 所属行业
|
||||||
|
trade: item.trade || '',
|
||||||
|
// 实际日排量(吨/天)
|
||||||
|
displacement: item.displacement ? (item.displacement + '吨/天') : '-',
|
||||||
|
// 统一社会信用代码
|
||||||
|
societyNumber: item.societyNumber || '',
|
||||||
|
// 管网所有权单位
|
||||||
|
city: item.city || '',
|
||||||
|
// 联系人
|
||||||
|
username: item.username || '',
|
||||||
|
// 电话
|
||||||
|
phone: item.phone || '',
|
||||||
|
// 经纬度
|
||||||
|
longitudeLatitude: item.longitudeLatitude || '',
|
||||||
|
// 已关联点位
|
||||||
|
point: item._point ? '是' : '否',
|
||||||
|
// 已录入数据
|
||||||
|
input: item._input ? '是' : '否',
|
||||||
|
// 地图坐标
|
||||||
|
lng: lng,
|
||||||
|
lat: lat,
|
||||||
|
// 保留原始数据
|
||||||
|
_raw: item
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return companies;
|
||||||
}).catch(function(err) {
|
}).catch(function(err) {
|
||||||
console.error("Failed to load data:", err);
|
console.error('加载企业数据失败:', err);
|
||||||
alert("数据加载失败，请重试");
|
return [];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call loadData instead of inline data definitions
|
// 加载泵站数据（工艺段）
|
||||||
|
function loadPumpData() {
|
||||||
|
return apiRequest('/user/processSection/getProcessSection4Select.do', {
|
||||||
|
companyId: 'JSBZ' // 根据排污源信息页面传参
|
||||||
|
}).then(function(data) {
|
||||||
|
console.log('泵站接口返回原始数据:', data, '类型:', typeof data);
|
||||||
|
// 确保data是数组
|
||||||
|
var dataList = data;
|
||||||
|
if (typeof data === 'string') {
|
||||||
|
try {
|
||||||
|
dataList = JSON.parse(data);
|
||||||
|
} catch(e) {
|
||||||
|
console.error('解析泵站数据失败:', e);
|
||||||
|
dataList = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 接口返回格式: [{id: xxx, text: xxx}, ...] 或 [{text: xxx}, ...]
|
||||||
|
pumpStations = (dataList || []).map(function(item, index) {
|
||||||
|
return {
|
||||||
|
id: item.id || ('pump_' + index),
|
||||||
|
name: item.text || item.name || '',
|
||||||
|
code: item.id || '',
|
||||||
|
level: '-',
|
||||||
|
flow: '-',
|
||||||
|
status: '-',
|
||||||
|
time: '-',
|
||||||
|
// 泵站暂无坐标信息，使用默认位置
|
||||||
|
lng: 121.320000 + index * 0.01,
|
||||||
|
lat: 30.760000 - index * 0.005
|
||||||
|
};
|
||||||
|
});
|
||||||
|
console.log('泵站数据处理后:', pumpStations);
|
||||||
|
return pumpStations;
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error('加载泵站数据失败:', err);
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize Data - 只加载默认Tab(污水厂)的数据
|
||||||
|
function loadData() {
|
||||||
|
// 初始加载污水厂数据
|
||||||
|
mockApiRequest('/api/sewage/list').then(function(data) {
|
||||||
|
sources = data;
|
||||||
|
initSewageTable();
|
||||||
|
initMarkers('sewage');
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error("Failed to load sewage data:", err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据加载状态标记
|
||||||
|
var dataLoaded = {
|
||||||
|
sewage: true, // 初始已加载
|
||||||
|
pump: false,
|
||||||
|
company: false,
|
||||||
|
pipeline: false,
|
||||||
|
well: false,
|
||||||
|
plan: false,
|
||||||
|
record: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// 按Tab类型加载数据
|
||||||
|
function loadTabData(type) {
|
||||||
|
// 如果数据已加载，直接返回
|
||||||
|
if (dataLoaded[type]) {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
var loadPromise;
|
||||||
|
|
||||||
|
switch(type) {
|
||||||
|
case 'pump':
|
||||||
|
loadPromise = loadPumpData().then(function(data) {
|
||||||
|
console.log('loadTabData pump 接收数据:', data);
|
||||||
|
pumpStations = data;
|
||||||
|
console.log('pumpStations 赋值后:', pumpStations);
|
||||||
|
initPumpTable();
|
||||||
|
dataLoaded.pump = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'company':
|
||||||
|
loadPromise = loadCompanyData().then(function(data) {
|
||||||
|
console.log('loadTabData company 接收数据:', data);
|
||||||
|
companies = data;
|
||||||
|
console.log('companies 赋值后:', companies);
|
||||||
|
initCompanyTable();
|
||||||
|
dataLoaded.company = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'pipeline':
|
||||||
|
loadPromise = mockApiRequest('/api/pipeline/list').then(function(data) {
|
||||||
|
pipelines = data;
|
||||||
|
initPipelineTable();
|
||||||
|
dataLoaded.pipeline = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'well':
|
||||||
|
loadPromise = mockApiRequest('/api/well/list').then(function(data) {
|
||||||
|
wells = data;
|
||||||
|
initWellTable();
|
||||||
|
dataLoaded.well = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'plan':
|
||||||
|
loadPromise = mockApiRequest('/api/plan/list').then(function(data) {
|
||||||
|
plans = data;
|
||||||
|
initPlanTable();
|
||||||
|
dataLoaded.plan = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'record':
|
||||||
|
loadPromise = mockApiRequest('/api/record/list').then(function(data) {
|
||||||
|
records = data;
|
||||||
|
initRecordTable();
|
||||||
|
dataLoaded.record = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
return loadPromise.catch(function(err) {
|
||||||
|
console.error('加载' + type + '数据失败:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call loadData for initial tab
|
||||||
loadData();
|
loadData();
|
||||||
|
|
||||||
function initMarkers(dataType) {
|
function initMarkers(dataType) {
|
||||||
@ -954,35 +1142,35 @@
|
|||||||
console.log('currentType', currentType)
|
console.log('currentType', currentType)
|
||||||
if (currentType === 'well') {
|
if (currentType === 'well') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/wsgj.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/wsgj.png",
|
||||||
iconSize: new T.Point(10, 10),
|
iconSize: new T.Point(10, 10),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'pipeline-node') {
|
} else if (currentType === 'pipeline-node') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_gd.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_gd.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'pump') {
|
} else if (currentType === 'pump') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_bz.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_bz.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'company') {
|
} else if (currentType === 'company') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_qy.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_qy.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'sewage') {
|
} else if (currentType === 'sewage') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_wsc.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_wsc.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
@ -1151,27 +1339,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initPumpTable() {
|
function initPumpTable() {
|
||||||
|
console.log('initPumpTable 被调用, pumpStations:', pumpStations);
|
||||||
var tbody = document.getElementById('pump-table-body');
|
var tbody = document.getElementById('pump-table-body');
|
||||||
|
console.log('tbody 元素:', tbody);
|
||||||
|
if (!tbody) {
|
||||||
|
console.error('找不到 pump-table-body 元素!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
var html = '';
|
var html = '';
|
||||||
|
if (!pumpStations || pumpStations.length === 0) {
|
||||||
|
console.warn('pumpStations 为空或长度为0');
|
||||||
|
tbody.innerHTML = '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
pumpStations.forEach(function(station, index) {
|
pumpStations.forEach(function(station, index) {
|
||||||
var rowClass = index % 2 === 0 ? '' : 'active'; // stripe effect
|
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||||
// Add soft blue background for some rows as in screenshot
|
|
||||||
if (index % 2 !== 0) {
|
|
||||||
// bootstrap 'active' class adds a grey background, let's use custom style if needed,
|
|
||||||
// but 'active' or 'info' class is standard bootstrap.
|
|
||||||
// The screenshot shows light blue stripes.
|
|
||||||
rowClass = 'info';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '<tr class="' + rowClass + '">';
|
html += '<tr class="' + rowClass + '">';
|
||||||
html += '<td class="text-center">' + (index + 1) + '</td>';
|
html += '<td class="text-center">' + (index + 1) + '</td>';
|
||||||
html += '<td style="font-weight:bold;">' + station.name + '</td>';
|
html += '<td style="font-weight:bold;">' + (station.name || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + station.level + '</td>';
|
html += '<td class="text-right">' + (station.level || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + station.flow + '</td>';
|
html += '<td class="text-right">' + (station.flow || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + station.status + '</td>';
|
html += '<td class="text-center">' + (station.status || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + station.time + '</td>';
|
html += '<td class="text-center">' + (station.time || '-') + '</td>';
|
||||||
html += '</tr>';
|
html += '</tr>';
|
||||||
});
|
});
|
||||||
|
console.log('生成的表格HTML长度:', html.length);
|
||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1222,29 +1415,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initMarkers();
|
// initMarkers() 和表格初始化在 loadData() 完成后调用
|
||||||
initPumpTable();
|
// 不要在这里单独调用，否则会使用空数据
|
||||||
initSewageTable();
|
|
||||||
|
|
||||||
// Mock Data for Companies
|
// 数据定义 (pipelines 和 wells) 已在 loadData() 中加载
|
||||||
var companies = [
|
// 如果需要默认数据，请在 loadData() 的 mockApiRequest 中配置
|
||||||
{ id: 1, code: "JSALQY01", name: "福达（上海）食品有限公司", address: "上海市金山区工业区金...", sewageNo: "JS2C", dischargeNo: "AL9654501", discharge: "717m³", point: "AL9654501_CSLL", lng: 121.320000, lat: 30.730000 },
|
|
||||||
{ id: 2, code: "JSALQY02", name: "上海嘉乐股份有限公司", address: "上海市金山区亭林镇...", sewageNo: "MM_AL11_C", dischargeNo: "AL9654502", discharge: "1010m³", point: "AL9654502_CSLL", lng: 121.330000, lat: 30.740000 },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Pipelines
|
|
||||||
var pipelines = [
|
|
||||||
{ id: 1, name: "", diameter: "0", length: "0", startDepth: "0", endDepth: "0", startElev: "0", endElev: "0", invertElev: "0", path: [[121.3400, 30.7400], [121.3410, 30.7410]] },
|
|
||||||
{ id: 2, name: "", diameter: "1600", length: "72.0223546", startDepth: "0.149", endDepth: "0.251", startElev: "5.649", endElev: "5.451", invertElev: "0.2", path: [[121.3410, 30.7410], [121.3430, 30.7430]] },
|
|
||||||
{ id: 3, name: "", diameter: "200", length: "11.1513874", startDepth: "0.251", endDepth: "3.035", startElev: "5.451", endElev: "5.335", invertElev: "1.643", path: [[121.3430, 30.7430], [121.3440, 30.7440]] },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Wells
|
|
||||||
var wells = [
|
|
||||||
{ id: 1, name: "BWS1", depth: "8.15", bottomElev: "-3.963", groundElev: "0", spec: "", lng: "3420414.23109246", lat: "340424.84811152", mapLng: "121.3410", mapLat: "30.7410" },
|
|
||||||
{ id: 2, name: "BWS2", depth: "8.15", bottomElev: "-3.619", groundElev: "0", spec: "", lng: "3420475.77946245", lat: "340408.18952986", mapLng: "121.3420", mapLat: "30.7420" },
|
|
||||||
{ id: 3, name: "BWS3", depth: "7.15", bottomElev: "-2.414", groundElev: "0", spec: "", lng: "3420467.51573462", lat: "340548.72770082", mapLng: "121.3430", mapLat: "30.7430" },
|
|
||||||
];
|
|
||||||
|
|
||||||
// ---------------------------------------------------------
|
// ---------------------------------------------------------
|
||||||
// 坐标转换处理
|
// 坐标转换处理
|
||||||
@ -1273,26 +1448,49 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initCompanyTable() {
|
function initCompanyTable() {
|
||||||
|
console.log('initCompanyTable 被调用, companies:', companies);
|
||||||
var tbody = document.getElementById('company-table-body');
|
var tbody = document.getElementById('company-table-body');
|
||||||
|
console.log('company-table-body 元素:', tbody);
|
||||||
|
if (!tbody) {
|
||||||
|
console.error('找不到 company-table-body 元素!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
var html = '';
|
var html = '';
|
||||||
|
if (!companies || companies.length === 0) {
|
||||||
|
console.warn('companies 为空或长度为0');
|
||||||
|
tbody.innerHTML = '<tr><td colspan="11" class="text-center">暂无数据</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
companies.forEach(function(item, index) {
|
companies.forEach(function(item, index) {
|
||||||
var rowClass = index % 2 === 0 ? '' : 'active';
|
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||||
if (index % 2 !== 0) rowClass = 'info';
|
|
||||||
|
|
||||||
html += '<tr class="' + rowClass + '">';
|
html += '<tr class="' + rowClass + '" onclick="selectCompany(' + index + ')" style="cursor: pointer;">';
|
||||||
html += '<td class="text-center">' + (index + 1) + '</td>';
|
html += '<td class="text-center">' + (index + 1) + '</td>';
|
||||||
html += '<td>' + item.code + '</td>';
|
html += '<td>' + (item.contractNumber || '-') + '</td>';
|
||||||
html += '<td>' + item.name + '</td>';
|
html += '<td>' + (item.name || '-') + '</td>';
|
||||||
html += '<td>' + item.address + '</td>';
|
html += '<td>' + (item.address || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + item.sewageNo + '</td>';
|
html += '<td class="text-center">' + (item.areaName || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + item.dischargeNo + '</td>';
|
html += '<td class="text-center">' + (item.processSectionName || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + item.discharge + '</td>';
|
html += '<td class="text-center">' + (item.permitNum || '-') + '</td>';
|
||||||
html += '<td>' + item.point + '</td>';
|
html += '<td class="text-center">' + (item.trade || '-') + '</td>';
|
||||||
|
html += '<td class="text-right">' + (item.displacement || '-') + '</td>';
|
||||||
|
html += '<td class="text-center">' + (item.point || '-') + '</td>';
|
||||||
|
html += '<td class="text-center">' + (item.input || '-') + '</td>';
|
||||||
html += '</tr>';
|
html += '</tr>';
|
||||||
});
|
});
|
||||||
|
console.log('生成的企业表格HTML长度:', html.length);
|
||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 选择企业在地图上定位
|
||||||
|
function selectCompany(index) {
|
||||||
|
var item = companies[index];
|
||||||
|
if (item && item.lng && item.lat) {
|
||||||
|
map.panTo(new T.LngLat(item.lng, item.lat));
|
||||||
|
map.setZoom(15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function initPipelineTable() {
|
function initPipelineTable() {
|
||||||
var tbody = document.getElementById('pipeline-table-body');
|
var tbody = document.getElementById('pipeline-table-body');
|
||||||
var html = '';
|
var html = '';
|
||||||
@ -1351,25 +1549,11 @@
|
|||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
initCompanyTable();
|
// initCompanyTable(), initPipelineTable(), initWellTable() 已在 loadData() 完成后调用
|
||||||
initPipelineTable();
|
// 不要在这里重复调用
|
||||||
initWellTable();
|
|
||||||
|
|
||||||
// Mock Data for Plans
|
// plans 和 records 数据已在 loadData() 中通过 mockApiRequest 加载
|
||||||
var plans = [
|
// 不要在这里重复定义，否则会覆盖已加载的数据
|
||||||
{ id: 1, name: "金山一车间日常巡检", status: "启用", duration: "2小时", interval: "1天", startTime: "2026-01-01", endTime: "2026-12-31" },
|
|
||||||
{ id: 2, name: "泵站设备专项检查", status: "启用", duration: "4小时", interval: "7天", startTime: "2026-02-01", endTime: "2026-06-30" },
|
|
||||||
{ id: 3, name: "管网防汛排查", status: "停用", duration: "8小时", interval: "30天", startTime: "2026-05-01", endTime: "2026-09-30" },
|
|
||||||
{ id: 4, name: "排污口突击检查", status: "启用", duration: "3小时", interval: "15天", startTime: "2026-03-15", endTime: "2026-09-15" }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Records
|
|
||||||
var records = [
|
|
||||||
{ id: 1, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "11:00", actualTime: "10:45" },
|
|
||||||
{ id: 2, taskName: "泵站设备专项检查", status: "未完成", planStartTime: "14:00", planEndTime: "17:30", actualTime: "--" },
|
|
||||||
{ id: 3, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "10:50", actualTime: "10:30" },
|
|
||||||
{ id: 4, taskName: "管网防汛排查", status: "进行中", planStartTime: "10:00", planEndTime: "16:00", actualTime: "--" }
|
|
||||||
];
|
|
||||||
|
|
||||||
function initPlanTable() {
|
function initPlanTable() {
|
||||||
var tbody = document.getElementById('plan-table-body');
|
var tbody = document.getElementById('plan-table-body');
|
||||||
@ -1419,8 +1603,8 @@
|
|||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
initPlanTable();
|
// initPlanTable() 和 initRecordTable() 已在 loadData() 完成后调用
|
||||||
initRecordTable();
|
// 不要在这里重复调用
|
||||||
|
|
||||||
// Drawer Logic
|
// Drawer Logic
|
||||||
function toggleDrawer() {
|
function toggleDrawer() {
|
||||||
@ -1474,6 +1658,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function switchTab(tabId, navItem) {
|
function switchTab(tabId, navItem) {
|
||||||
|
console.log('switchTab 被调用, tabId:', tabId);
|
||||||
// Update Nav Items
|
// Update Nav Items
|
||||||
var navItems = document.querySelectorAll('.drawer-nav-item');
|
var navItems = document.querySelectorAll('.drawer-nav-item');
|
||||||
navItems.forEach(function(item) {
|
navItems.forEach(function(item) {
|
||||||
@ -1488,29 +1673,37 @@
|
|||||||
});
|
});
|
||||||
document.getElementById(tabId).classList.add('active');
|
document.getElementById(tabId).classList.add('active');
|
||||||
|
|
||||||
// Update Map Markers based on Tab ID
|
// 根据Tab ID确定数据类型
|
||||||
var type = 'sewage';
|
var type = 'sewage';
|
||||||
if (tabId === 'tab-pump') type = 'pump';
|
if (tabId === 'tab-pump') type = 'pump';
|
||||||
else if (tabId === 'tab-company') type = 'company';
|
else if (tabId === 'tab-company') type = 'company';
|
||||||
else if (tabId === 'tab-well') type = 'well';
|
else if (tabId === 'tab-well') type = 'well';
|
||||||
else if (tabId === 'tab-pipeline') type = 'pipeline';
|
else if (tabId === 'tab-pipeline') type = 'pipeline';
|
||||||
|
else if (tabId === 'tab-plan') type = 'plan';
|
||||||
|
else if (tabId === 'tab-record') type = 'record';
|
||||||
|
|
||||||
initMarkers(type);
|
console.log('确定的数据类型 type:', type);
|
||||||
|
|
||||||
|
// 加载该Tab的数据，然后更新地图
|
||||||
|
loadTabData(type).then(function() {
|
||||||
|
console.log('loadTabData 完成, type:', type);
|
||||||
|
initMarkers(type);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- jQuery -->
|
<!-- jQuery -->
|
||||||
<script src="../../node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
||||||
<!-- Bootstrap JS -->
|
<!-- Bootstrap JS -->
|
||||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<!-- Moment.js -->
|
<!-- Moment.js -->
|
||||||
<script src="../../plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
||||||
<!-- DateRangePicker -->
|
<!-- DateRangePicker -->
|
||||||
<script src="../../plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Initialize DateRangePicker for time range inputs
|
// Initialize DateRangePicker for time range inputs (移除了 company-time 相关)
|
||||||
$('#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end, #company-time-start, #company-time-end').daterangepicker({
|
$('#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end').daterangepicker({
|
||||||
singleDatePicker: true,
|
singleDatePicker: true,
|
||||||
timePicker: true,
|
timePicker: true,
|
||||||
timePicker24Hour: true,
|
timePicker24Hour: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user