xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1c8f1f98d5768fcb62e34850e5d73028ee1591dc
SIPAIIS_WMS_JSSW/src/main/webapp/jsp/visual/newSourceGISPage.jsp

1982 lines
69 KiB
Plaintext
Raw Normal View History

GIS
2026-03-07 19:48:01 +08:00
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
大屏
2026-03-01 23:40:06 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
GIS
2026-03-07 19:48:01 +08:00
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
大屏
2026-03-01 23:40:06 +08:00
<title>源头GIS管理</title>
GIS
2026-03-07 19:48:01 +08:00
大屏
2026-03-01 23:40:06 +08:00
<!-- Bootstrap CSS -->
GIS
2026-03-07 19:48:01 +08:00
<link
rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
大屏
2026-03-01 23:40:06 +08:00
<!-- DateRangePicker CSS -->
GIS
2026-03-07 19:48:01 +08:00
<link
rel="stylesheet"
href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"
/>
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map-container {
width: 100%;
height: 100%;
}
.control-panel {
position: absolute;
top: 20px;
left: 20px;
管道展示
2026-03-10 21:51:19 +08:00
z-index: 999;
GIS
2026-03-07 19:48:01 +08:00
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
width: 250px;
}
.legend-item {
margin-bottom: 5px;
display: flex;
align-items: center;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
}
.status-normal {
background-color: green;
}
.status-warning {
background-color: #ffcc00;
}
.status-alarm {
background-color: red;
}
/* Right Drawer Styles */
.drawer-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 480px;
background-color: #fff;
z-index: 2000;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
display: flex;
transition: transform 0.3s ease;
}
.drawer-collapsed {
transform: translateX(100%);
}
.drawer-resizer {
width: 5px;
cursor: col-resize;
background-color: transparent;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 2001;
}
.drawer-resizer:hover {
background-color: #007bff;
}
.drawer-toggle {
position: absolute;
left: -20px;
top: 50%;
width: 20px;
height: 60px;
margin-top: -30px;
background: #fff;
border: 1px solid #ddd;
border-right: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px 0 0 4px;
color: #007bff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
}
.drawer-sidebar {
width: 80px;
background-color: #f0f4f7;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.drawer-nav-item {
padding: 15px 5px;
text-align: center;
cursor: pointer;
font-size: 13px;
border-bottom: 1px solid #e1e4e8;
color: #666;
transition: all 0.2s;
}
.drawer-nav-item:hover {
background-color: #e1e8ed;
color: #007bff;
}
.drawer-nav-item.active {
background-color: #fff;
color: #007bff;
border-left: 3px solid #007bff;
font-weight: bold;
margin-right: -1px; /* Cover border */
}
.drawer-nav-icon {
width: 15px;
height: 15px;
margin: 0 auto 5px auto;
display: block;
}
.drawer-content {
flex: 1;
padding: 15px;
overflow-y: auto;
background: #fff;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* Table Styles */
.table-custom th {
background-color: #f8f9fa;
font-weight: 600;
}
.table-custom td {
vertical-align: middle;
}
.query-form-group {
margin-bottom: 15px;
}
.query-form-group label {
font-weight: normal;
margin-bottom: 5px;
display: block;
}
/* Pulse Animation for Map Marker */
@keyframes pulse-ring {
0% {
transform: scale(0.33);
opacity: 1;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
80%,
100% {
transform: scale(2.5);
opacity: 0;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}
.pulse-ring {
position: relative;
width: 30px;
height: 30px;
}
.pulse-ring::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 123, 255, 0.7);
border-radius: 50%;
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
大屏
2026-03-01 23:40:06 +08:00
</style>
GIS
2026-03-07 19:48:01 +08:00
</head>
<body>
大屏
2026-03-01 23:40:06 +08:00
<!-- Right Drawer -->
<div class="drawer-container" id="rightDrawer">
GIS
2026-03-07 19:48:01 +08:00
<div class="drawer-resizer" id="drawerResizer"></div>
<div class="drawer-toggle" onclick="toggleDrawer()" title="收起/展开">
<span id="drawer-toggle-icon">&gt;</span>
</div>
<div class="drawer-sidebar">
<div
class="drawer-nav-item active"
onclick="switchTab('tab-sewage', this)"
>
<img
src="<%=request.getContextPath()%>/IMG/icon_wsc.png"
class="drawer-nav-icon"
/>污水厂
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_bz.png"
class="drawer-nav-icon"
/>泵站
</div>
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_qy.png"
class="drawer-nav-icon"
/>企业
</div>
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_gd.png"
class="drawer-nav-icon"
/>管道
</div>
<!-- <div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_gj.png"
class="drawer-nav-icon"
/>管井
</div>
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_jh.png"
class="drawer-nav-icon"
/>巡检计划
</div>
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
<img
src="<%=request.getContextPath()%>/IMG/icon_jl.png"
class="drawer-nav-icon"
/>巡检记录
</div> -->
</div>
<div class="drawer-content">
<!-- 污水厂 Content -->
<div id="tab-sewage" class="tab-pane active">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
污水厂查询
</h5>
<!-- <div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="query-form-group">
<label>时间范围</label>
<div style="display: flex; align-items: center">
<div class="input-group date">
<input
type="text"
class="form-control input-sm"
id="sewage-time-start"
value="2026-02-02 16:47"
/>
<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="sewage-time-end"
value="2026-02-09 16:47"
/>
<span class="input-group-addon"
><i class="glyphicon glyphicon-calendar"></i
></span>
</div>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="query-form-group">
<label>流量范围 (m³/h)</label>
<div style="display: flex; align-items: center">
<input
type="number"
class="form-control input-sm"
placeholder="最小值"
/>
<span style="margin: 0 5px">~</span>
<input
type="number"
class="form-control input-sm"
placeholder="最大值"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="query-form-group">
<label>厂站名称</label>
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="请输入厂站名称"
/>
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
<button
class="btn btn-default"
type="button"
style="margin-left: 5px"
>
校准
</button>
</span>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div> -->
<!-- <div style="margin-bottom: 10px">
<label><input type="checkbox" checked /> 显示标注</label>
</div> -->
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px"
>
<thead>
<tr>
<th width="40">序号</th>
<th width="40">选择</th>
<th>名称</th>
<th>出口流量<br />(m³/h)</th>
<th>入口流量<br />(m³/h)</th>
<th>状态</th>
<th>设计能力<br />(万吨/天)</th>
<th>详细地址</th>
<th>监测时间</th>
</tr>
</thead>
<tbody id="sewage-table-body">
<!-- Populated by initSewageTable -->
</tbody>
</table>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<!-- 泵站 Content -->
<div id="tab-pump" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
泵站查询
</h5>
<!-- <div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="query-form-group">
<label>时间范围</label>
<div style="display: flex; align-items: center">
<div class="input-group date">
<input
type="text"
class="form-control input-sm"
id="pump-time-start"
value="2026-01-09 00:00"
/>
<span class="input-group-addon"
><i class="glyphicon glyphicon-calendar"></i
></span>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<span style="margin: 0 5px">~</span>
<div class="input-group date">
<input
type="text"
class="form-control input-sm"
id="pump-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">
<input
type="text"
class="form-control"
placeholder="请输入泵站名称"
/>
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</span>
</div>
</div>
</div> -->
<!-- <div style="margin-bottom: 10px">
<label><input type="checkbox" checked /> 显示标注</label>
</div> -->
<div style="max-height: 500px; overflow-y: auto">
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px"
>
<thead>
<tr>
<th width="40">序号</th>
<th>泵站名称</th>
<th>液位(m)</th>
<th>流量(m³/h)</th>
<th>状态</th>
<th>监测时间</th>
</tr>
</thead>
<tbody id="pump-table-body">
<!-- Mock Data populated by JS -->
</tbody>
</table>
</div>
</div>
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
<!-- Company Content -->
<div id="tab-company" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
企业查询
</h5>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<!-- 查询条件 -->
<div
GIS
2026-03-07 19:48:01 +08:00
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
padding: 10px;
margin-bottom: 10px;
GIS
2026-03-07 19:48:01 +08:00
"
>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<div class="row" style="margin-bottom: 8px;">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 12px; margin-bottom: 3px; display: block;">所属泵站</label>
<select id="company-processSection" class="form-control input-sm" style="width: 100%;">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 12px; margin-bottom: 3px; display: block;">管网所有权单位</label>
<select id="company-city" class="form-control input-sm" style="width: 100%;">
<option value="">请选择</option>
</select>
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<div class="row" style="margin-bottom: 8px;">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 12px; margin-bottom: 3px; display: block;">是否关联点位</label>
<select id="company-point" class="form-control input-sm" style="width: 100%;">
<option value="">请选择</option>
<option value="true">是</option>
<option value="false">否</option>
</select>
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 12px; margin-bottom: 3px; display: block;">是否录入数据</label>
<select id="company-input" class="form-control input-sm" style="width: 100%;">
<option value="">请选择</option>
<option value="true">是</option>
<option value="false">否</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-sm">
<input type="text" id="company-search-name" class="form-control" placeholder="合同编号/单位名称">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" onclick="searchCompany()">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
<button class="btn btn-default" type="button" onclick="resetCompanySearch()" style="margin-left: 5px;">
<i class="glyphicon glyphicon-refresh"></i> 重置
</button>
</span>
</div>
</div>
</div>
</div>
GIS
2026-03-07 19:48:01 +08:00
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
<div style="max-height: 400px; overflow-y: auto">
GIS
2026-03-07 19:48:01 +08:00
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap"
>
<thead>
<tr>
<th width="40">序号</th>
<th>合同编号</th>
<th>公司名称</th>
<th>地址</th>
<th>所属区域</th>
<th>所属泵站</th>
<th>排污许可证编号</th>
<th>所属行业</th>
<th>实际日排量</th>
<th>已关联点位</th>
<th>已录入数据</th>
</tr>
</thead>
<tbody id="company-table-body"></tbody>
</table>
</div>
</div>
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
<!-- Pipeline Content -->
<div id="tab-pipeline" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
管道查询
</h5>
<!-- <div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管道名称"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管道材质"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管道管长"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管道管径"
/>
</div>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="起点埋深"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="终点埋深"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option>所属厂站: 全部</option>
</select>
</div>
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
<div style="margin-top: 10px">
<button class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div> -->
<div style="max-height: 400px; overflow-y: auto; overflow-x: auto">
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap; min-width: 800px"
>
<thead>
<tr>
<th width="40">选择</th>
<th width="40">序号</th>
<th>管道名称</th>
<th>管径(mm)</th>
<th>管长(m)</th>
<th>起点埋深(m)</th>
<th>终点埋深(m)</th>
管道展示
2026-03-10 21:51:19 +08:00
<th>高程(m)</th>
<th>终点高程(m)</th>
<th>图层</th>
GIS
2026-03-07 19:48:01 +08:00
</tr>
</thead>
<tbody id="pipeline-table-body"></tbody>
<tfoot>
<tr
style="
background-color: #e9ecef;
font-weight: bold;
color: blue;
"
>
<td colspan="2">汇总:</td>
<td>--</td>
<td id="pipe-total-diameter">--</td>
<td id="pipe-total-length">--</td>
<td colspan="5">--</td>
</tr>
</tfoot>
</table>
</div>
</div>
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
<!-- Well Content -->
<!-- <div id="tab-well" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
管井查询
</h5>
<div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管井名称"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管井材质"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管井埋深"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="井底高程"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="row">
<div class="col-xs-6" style="padding-right: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="地面高程"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-xs-6" style="padding-left: 5px">
<div class="form-group">
<input
type="text"
class="form-control input-sm"
placeholder="管井规格"
/>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="form-group">
<select class="form-control input-sm">
<option>所属厂站: 全部</option>
</select>
</div>
<div style="margin-top: 10px">
<button class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</div>
</div>
<div style="max-height: 400px; overflow-y: auto; overflow-x: auto">
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap; min-width: 800px"
>
<thead>
<tr>
<th width="40">选择</th>
<th width="40">序号</th>
<th>管井名称</th>
<th>埋深(m)</th>
<th>井底标高(m)</th>
<th>地面高程(m)</th>
<th>规格(mm)</th>
<th>经度</th>
<th>纬度</th>
</tr>
</thead>
<tbody id="well-table-body"></tbody>
</table>
</div>
</div> -->
<!-- 巡检计划 -->
<!-- <div id="tab-plan" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
巡检计划
</h5>
<div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="form-group form-inline" style="margin-bottom: 10px">
<label>所属厂站 </label>
<select class="form-control input-sm" style="width: 150px">
<option>金山排海一车间</option>
<option>金山排海二车间</option>
</select>
</div>
<div style="margin-bottom: 5px">
<button class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</div>
</div>
<div style="max-height: 400px; overflow-y: auto">
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap"
>
<thead>
<tr>
<th width="40">选择</th>
<th width="40">序号</th>
<th>任务名称</th>
<th>启用状态</th>
<th>巡检时长</th>
<th>巡检间隔</th>
<th>开始时间</th>
<th>结束时间</th>
</tr>
</thead>
<tbody id="plan-table-body"></tbody>
</table>
</div>
</div> -->
<!-- 巡检记录 -->
<!-- <div id="tab-record" class="tab-pane">
<h5
style="
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 0;
"
>
巡检记录
</h5>
<div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="row" style="margin-bottom: 10px">
<div class="col-xs-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<label>所属厂站</label>
<select class="form-control input-sm" style="width: 150px">
<option>金山排海一车间</option>
<option>金山排海二车间</option>
</select>
</div>
<div class="form-group">
<label>巡检日期</label>
<div class="input-group date">
<input
type="text"
class="form-control input-sm"
id="record-date"
value="2026-02-11"
style="width: 120px"
/>
<span class="input-group-addon"
><i class="glyphicon glyphicon-calendar"></i
></span>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</form>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="row" style="margin-bottom: 5px">
<div class="col-xs-12">
<button
class="btn btn-primary btn-sm"
style="background-color: #0099ff; border-color: #0099ff"
>
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</div>
</div>
</div>
<div
style="
max-height: 400px;
overflow-y: auto;
position: relative;
min-height: 300px;
"
>
<div
id="record-loading"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none;
"
>
<i
class="glyphicon glyphicon-refresh"
style="
font-size: 32px;
color: #ccc;
animation: spin 1s infinite linear;
"
></i>
<p style="margin-top: 10px; color: #666; font-size: 12px">
数据载入中，请稍后......
</p>
<style>
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</div>
<table
class="table table-bordered table-hover table-condensed table-custom"
style="font-size: 12px; white-space: nowrap"
>
<thead>
<tr style="background-color: #f0f0f0">
<th width="40">选择</th>
<th width="40">序号</th>
<th>任务名称</th>
<th>完成状态</th>
<th>计划开始时间</th>
<th>计划结束时间</th>
<th>实际完成时间</th>
</tr>
</thead>
<tbody id="record-table-body"></tbody>
</table>
</div>
</div> -->
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
<div id="map-container"></div>
<!-- Scripts -->
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
GIS
2026-03-07 19:48:01 +08:00
大屏
2026-03-01 23:40:06 +08:00
<!-- Tianditu Map API -->
GIS
2026-03-07 19:48:01 +08:00
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
<script
type="text/javascript"
src="http://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"
></script>
大屏
2026-03-01 23:40:06 +08:00
<script type="text/javascript">
GIS
2026-03-07 19:48:01 +08:00
// 坐标转换工具 (百度 BD-09 <-> 火星 GCJ-02 <-> 天地图/GPS WGS-84)
var CoordTransform = {
x_pi: (3.14159265358979324 * 3000.0) / 180.0,
pi: 3.1415926535897932384626,
a: 6378245.0,
ee: 0.00669342162296594323,
// 百度坐标 (BD-09) 转 火星坐标 (GCJ-02)
bd09_to_gcj02: function (bd_lon, bd_lat) {
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat];
},
// 火星坐标 (GCJ-02) 转 GPS 坐标 (WGS-84)
gcj02_to_wgs84: function (lng, lat) {
if (this.out_of_china(lng, lat)) {
return [lng, lat];
}
var dlat = this.transformlat(lng - 105.0, lat - 35.0);
var dlng = this.transformlng(lng - 105.0, lat - 35.0);
var radlat = (lat / 180.0) * this.pi;
var magic = Math.sin(radlat);
magic = 1 - this.ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat =
(dlat * 180.0) /
(((this.a * (1 - this.ee)) / (magic * sqrtmagic)) * this.pi);
dlng =
(dlng * 180.0) /
((this.a / sqrtmagic) * Math.cos(radlat) * this.pi);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat];
},
// 百度坐标 (BD-09) 直接转 天地图/GPS 坐标 (WGS-84)
bd09_to_wgs84: function (bd_lon, bd_lat) {
var gcj = this.bd09_to_gcj02(bd_lon, bd_lat);
var wgs = this.gcj02_to_wgs84(gcj[0], gcj[1]);
return wgs;
},
transformlat: function (lng, lat) {
var ret =
-100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * this.pi) +
20.0 * Math.sin(2.0 * lng * this.pi)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * this.pi) +
40.0 * Math.sin((lat / 3.0) * this.pi)) *
2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * this.pi) +
320 * Math.sin((lat * this.pi) / 30.0)) *
2.0) /
3.0;
return ret;
},
transformlng: function (lng, lat) {
var ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * this.pi) +
20.0 * Math.sin(2.0 * lng * this.pi)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * this.pi) +
40.0 * Math.sin((lng / 3.0) * this.pi)) *
2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * this.pi) +
300.0 * Math.sin((lng / 30.0) * this.pi)) *
2.0) /
3.0;
return ret;
},
out_of_china: function (lng, lat) {
return (
lng < 72.004 ||
lng > 137.8347 ||
lat < 0.8293 ||
lat > 55.8271 ||
false
);
},
};
// Initialize Map
// Tianditu uses CGCS2000/WGS84 coordinates.
// Center on Shanghai Jinshan District
console.log("=== newSourceGISPage.jsp 页面已加载 ===");
var map = new T.Map("map-container");
map.centerAndZoom(new T.LngLat(121.34, 30.74), 13);
map.enableScrollWheelZoom();
// 记录当前缩放级别，用于限制只能放大不能缩小
var currentZoomLevel = 13;
var minZoomLevel = 13; // 最小缩放级别
// 监听缩放开始事件，阻止缩小操作
map.addEventListener("zoomstart", function(e) {
var newZoom = e.zoom;
console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
if (newZoom < minZoomLevel) {
GIS
2026-03-07 19:48:01 +08:00
console.log("[地图缩放] 阻止缩小操作，最小级别:", minZoomLevel);
map.setZoom(minZoomLevel);
return false;
}
});
// 监听缩放结束事件，更新当前缩放级别
map.addEventListener("zoomend", function(e) {
currentZoomLevel = map.getZoom();
console.log("[地图缩放] 缩放完成，当前级别:", currentZoomLevel);
});
// 禁用双击缩小
map.disableDoubleClickZoom();
// Controls
var scale = new T.Control.Scale();
map.addControl(scale);
var zoom = new T.Control.Zoom();
map.addControl(zoom);
var mapType = new T.Control.MapType();
map.addControl(mapType);
// 隐藏缩小按钮，只保留放大按钮
setTimeout(function() {
var zoomOutBtn = document.querySelector(".TMAP_zoom_button");
if (zoomOutBtn) {
// 隐藏所有缩放按钮中的缩小按钮
var zoomButtons = document.querySelectorAll(".TMAP_zoom_button");
if (zoomButtons.length > 0) {
zoomButtons[0].style.display = "none"; // 隐藏缩小按钮
}
}
console.log("[地图控制] 已隐藏缩小按钮");
}, 500);
// var mousePosition = new T.Control.MousePosition({position: T_ANCHOR_BOTTOM_RIGHT});
// map.addControl(mousePosition);
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 统一数据管理 ====================
GIS
2026-03-07 19:48:01 +08:00
var contextPath = "<%=request.getContextPath()%>";
管道展示
2026-03-10 21:51:19 +08:00
var markers = [];
var currentPulse = null;
// 数据配置：统一管理所有Tab的数据源、表格、转换逻辑
var dataConfig = {
sewage: {
data: [],
loaded: false,
api: { url: '/api/sewage/list', mock: true },
tableBody: 'sewage-table-body',
icon: 'icon_wsc.png',
transform: function(item, idx) {
return {
id: item.id,
name: item.name,
lng: item.lng,
lat: item.lat,
status: item.status,
address: item.address,
inFlow: item.inFlow,
outFlow: item.outFlow,
designCapacity: item.designCapacity,
time: item.time
};
}
},
pump: {
data: [],
loaded: false,
api: { url: '/user/processSection/getProcessSection4Select.do', mock: false, params: { companyId: 'JSBZ' } },
tableBody: 'pump-table-body',
icon: 'icon_bz.png',
transform: function(item, idx) {
return {
id: item.id || 'pump_' + idx,
name: item.text || item.name || '',
code: item.id || '',
level: '-',
flow: '-',
status: '-',
time: '-',
lng: 121.32 + idx * 0.01,
lat: 30.76 - idx * 0.005
};
}
},
company: {
data: [],
loaded: false,
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
api: {
url: '/sparepart/sewage/getList.do',
mock: false,
// 动态获取查询参数
getParams: function() {
return {
page: 1,
rows: 1000,
sort: 'id',
order: 'asc',
unitId: '0533JS',
search_name: $('#company-search-name').val() || '',
processSectionId: $('#company-processSection').val() || '',
city: $('#company-city').val() || '',
_point: $('#company-point').val() || '',
_input: $('#company-input').val() || ''
};
},
params: { page: 1, rows: 1000, sort: 'id', order: 'asc', unitId: '0533JS' }
},
管道展示
2026-03-10 21:51:19 +08:00
tableBody: 'company-table-body',
icon: 'icon_qy.png',
transform: function(item, idx) {
var lng = null, lat = null;
if (item.longitudeLatitude) {
var coords = String(item.longitudeLatitude).split(',');
if (coords.length >= 2) {
lng = parseFloat(coords[0]);
lat = parseFloat(coords[1]);
} else if (coords.length === 1) {
lng = parseFloat(coords[0]);
GIS
2026-03-07 19:48:01 +08:00
}
}
管道展示
2026-03-10 21:51:19 +08:00
if ((!lng || !lat) && item.company) {
lng = lng || item.company.longitude;
lat = lat || item.company.latitude;
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
if (!lng || !lat) {
lng = 121.3 + idx * 0.01;
lat = 30.7 + idx * 0.005;
}
return {
id: item.id,
contractNumber: item.contractNumber || '',
name: item.name || '',
address: item.address || '',
areaName: item.company ? item.company.name || '' : '',
processSectionId: item.processSectionId || '',
processSectionName: item.processSection ? item.processSection.name || '' : '',
permitNum: item.permitNum || '',
trade: item.trade || '',
displacement: item.displacement ? item.displacement + '吨/天' : '-',
point: item._point ? '是' : '否',
input: item._input ? '是' : '否',
lng: lng,
lat: lat
};
}
},
pipeline: {
data: [],
loaded: false,
// 使用 geo.json 静态文件（ArcGIS JSON 格式）
api: { url: '/jsp/z_bigScreen/geo.json', isStatic: true },
tableBody: 'pipeline-table-body',
icon: 'icon_gd.png',
// 管线数据转换：适配 geo.json 的 ArcGIS JSON 格式
// geo.json 结构: { features: [{ attributes: {...}, geometry: { paths: [...] } }] }
transform: function(feature) {
var attr = feature.attributes || {};
var geom = feature.geometry || {};
var paths = geom.paths || null;
// 计算管线长度（Shape_Leng 是经纬度差值，转换为米约乘以 111000）
var lengthM = attr.Shape_Leng ? (attr.Shape_Leng * 111000).toFixed(2) : '-';
return {
id: attr.FID,
name: '管线-' + attr.FID,
diameter: '-',
length: lengthM,
startDepth: '-',
endDepth: '-',
startElev: '-',
endElev: '-',
invertElev: '-',
elevation: attr.Elevation || 0,
color: attr.Color || 6,
layer: attr.Layer || 'WS_LINE',
paths: paths,
handle: attr.Handle,
lineWt: attr.LineWt,
shapeLeng: attr.Shape_Leng
};
}
}
};
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 统一API请求 ====================
function apiRequest(url, params, isMock, isStatic) {
return new Promise(function(resolve, reject) {
if (isMock) {
// Mock数据
setTimeout(function() {
if (url === '/api/sewage/list') {
resolve([{
id: 1, name: '金山水卫污水厂', lng: 121.345, lat: 30.725,
status: 0, address: '上海金山区金山水卫污水厂',
inFlow: 4774, outFlow: 4536, designCapacity: 10, time: '02-25 17:24'
}]);
} else {
resolve([]);
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
}, 100);
} else if (isStatic) {
// 静态 JSON 文件请求（GET）
$.ajax({
url: contextPath + url,
type: 'GET',
dataType: 'json',
success: function(data) {
resolve(data);
},
error: function(xhr, status, error) {
console.error('静态文件加载失败:', url, error);
reject(error);
GIS
2026-03-07 19:48:01 +08:00
}
});
管道展示
2026-03-10 21:51:19 +08:00
} else {
// 后端 API 请求（POST）
$.ajax({
url: contextPath + url,
type: 'POST',
data: params || {},
success: function(data) {
var result = data;
if (typeof data === 'string') {
try { result = JSON.parse(data); } catch(e) { result = {}; }
}
resolve(result);
},
error: function(xhr, status, error) {
console.error('API Error:', url, error);
reject(error);
GIS
2026-03-07 19:48:01 +08:00
}
大屏
2026-03-01 23:40:06 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
}
});
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 统一数据加载 ====================
function loadData(type) {
var config = dataConfig[type];
if (!config || config.loaded) return Promise.resolve(config.data);
var api = config.api;
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 支持动态参数获取（用于企业查询）
var params = api.getParams ? api.getParams() : api.params;
return apiRequest(api.url, params, api.mock, api.isStatic).then(function(res) {
管道展示
2026-03-10 21:51:19 +08:00
// 根据数据源类型提取数据列表
var list = [];
if (api.isStatic && res.features) {
// 静态 JSON 文件（ArcGIS JSON 格式）
list = res.features;
} else if (res.rows) {
// 后端 API 返回格式
list = res.rows;
} else if (Array.isArray(res)) {
// 直接返回数组
list = res;
}
config.data = list.map(config.transform);
config.loaded = true;
console.log('[' + type + '] 加载完成:', config.data.length, '条');
return config.data;
}).catch(function(err) {
console.error('[' + type + '] 加载失败:', err);
return [];
});
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 统一表格渲染 ====================
var tableRenderers = {
sewage: function(data) {
if (!data.length) return '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
var html = '';
data.forEach(function(item, i) {
var statusText = item.status === 0 ? '在线' : item.status === 1 ? '告警' : '离线';
html += '<tr class="' + (i % 2 === 0 ? '' : 'info') + '" onclick="selectMarker(\'' + item.name + '\',\'sewage\')" style="cursor:pointer;">' +
'<td class="text-center">' + (i+1) + '</td>' +
'<td class="text-center"><input type="radio" name="sewage-select" value="' + item.name + '"></td>' +
'<td><a href="javascript:void(0);" style="color:#007bff;">' + item.name + '</a></td>' +
'<td class="text-right">' + (item.outFlow || 0) + 'm³/h</td>' +
'<td class="text-right">' + (item.inFlow || 0) + 'm³/h</td>' +
'<td class="text-center">' + statusText + '</td>' +
'<td class="text-center">' + (item.designCapacity || '-') + '</td>' +
'<td>' + (item.address || '-') + '</td>' +
'<td class="text-center">' + (item.time || '-') + '</td></tr>';
});
return html;
},
pump: function(data) {
if (!data.length) return '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
var html = '';
data.forEach(function(item, i) {
html += '<tr class="' + (i % 2 === 0 ? '' : 'info') + '" onclick="selectMarker(\'' + item.name + '\',\'pump\')" style="cursor:pointer;">' +
'<td class="text-center">' + (i+1) + '</td>' +
'<td style="font-weight:bold;">' + (item.name || '-') + '</td>' +
'<td class="text-right">' + (item.level || '-') + '</td>' +
'<td class="text-right">' + (item.flow || '-') + '</td>' +
'<td class="text-center">' + (item.status || '-') + '</td>' +
'<td class="text-center">' + (item.time || '-') + '</td></tr>';
});
return html;
},
company: function(data) {
if (!data.length) return '<tr><td colspan="11" class="text-center">暂无数据</td></tr>';
var html = '';
data.forEach(function(item, i) {
html += '<tr class="' + (i % 2 === 0 ? '' : 'info') + '" onclick="selectCompany(' + i + ')" style="cursor:pointer;">' +
'<td class="text-center">' + (i+1) + '</td>' +
'<td>' + (item.contractNumber || '-') + '</td>' +
'<td>' + (item.name || '-') + '</td>' +
'<td>' + (item.address || '-') + '</td>' +
'<td class="text-center">' + (item.areaName || '-') + '</td>' +
'<td class="text-center">' + (item.processSectionName || '-') + '</td>' +
'<td class="text-center">' + (item.permitNum || '-') + '</td>' +
'<td class="text-center">' + (item.trade || '-') + '</td>' +
'<td class="text-right">' + (item.displacement || '-') + '</td>' +
'<td class="text-center">' + (item.point || '-') + '</td>' +
'<td class="text-center">' + (item.input || '-') + '</td></tr>';
});
return html;
},
pipeline: function(data) {
if (!data.length) return '<tr><td colspan="10" class="text-center">暂无数据</td></tr>';
var html = '', totalLength = 0;
data.forEach(function(item, i) {
html += '<tr class="' + (i % 2 === 0 ? '' : 'info') + '" onclick="selectPipeline(' + i + ')" style="cursor:pointer;">' +
'<td class="text-center"><input type="radio" name="pipe-select" value="' + item.id + '"></td>' +
'<td class="text-center">' + (i+1) + '</td>' +
'<td>' + (item.name || '-') + '</td>' +
'<td class="text-center">' + (item.diameter || '-') + '</td>' +
'<td class="text-right">' + (item.length || '-') + '</td>' +
'<td class="text-right">' + (item.startDepth || '-') + '</td>' +
'<td class="text-right">' + (item.endDepth || '-') + '</td>' +
'<td class="text-right">' + (item.elevation || 0).toFixed(2) + '</td>' +
'<td class="text-right">-</td>' +
'<td class="text-right">' + (item.layer || '-') + '</td></tr>';
totalLength += parseFloat(item.length) || 0;
});
setTimeout(function() {
var d = document.getElementById('pipe-total-diameter');
var l = document.getElementById('pipe-total-length');
if (d) d.innerText = '--';
if (l) l.innerText = totalLength.toFixed(2);
}, 0);
return html;
大屏
2026-03-01 23:40:06 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
};
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
function renderTable(type) {
var config = dataConfig[type];
var tbody = document.getElementById(config.tableBody);
if (!tbody) return;
var renderer = tableRenderers[type];
if (renderer) {
tbody.innerHTML = renderer(config.data);
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
}
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 初始化入口 ====================
function initPage() {
// 加载默认Tab数据
loadData('sewage').then(function() {
renderTable('sewage');
initMarkers('sewage');
GIS
2026-03-07 19:48:01 +08:00
});
}
管道展示
2026-03-10 21:51:19 +08:00
initPage();
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 统一地图标记管理 ====================
function initMarkers(type) {
GIS
2026-03-07 19:48:01 +08:00
map.closeInfoWindow();
管道展示
2026-03-10 21:51:19 +08:00
// 清除现有标记
markers.forEach(function(m) {
GIS
2026-03-07 19:48:01 +08:00
if (m.marker) map.removeOverLay(m.marker);
if (m.label) map.removeOverLay(m.label);
});
markers = [];
if (currentPulse) {
map.removeOverLay(currentPulse);
currentPulse = null;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// 清除管线覆盖物
clearPipelines();
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var config = dataConfig[type];
if (!config || !config.data.length) return;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 管线类型使用 Polyline 渲染
if (type === 'pipeline') {
renderPipelines(config.data);
return;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 其他类型使用 Marker 渲染
config.data.forEach(function(item) {
if (!item.lng || !item.lat) return;
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var point = new T.LngLat(item.lng, item.lat);
var icon = new T.Icon({
iconUrl: contextPath + '/IMG/' + config.icon,
iconSize: new T.Point(18, 18),
iconAnchor: new T.Point(15, 15)
});
var marker = new T.Marker(point, { icon: icon });
map.addOverLay(marker);
// 标签
var labelColor = type === 'sewage' ? (item.status === 1 ? '#FFCC00' : item.status === 2 ? 'red' : 'green') :
type === 'pump' ? 'blue' : type === 'company' ? '#9932CC' : '#666';
var labelContent = type === 'company' ?
'<div style="border:1px solid #ccc;border-radius:4px;padding:5px 10px;font-size:13px;background-color:white;line-height:1.4;">' +
'<div style="color:' + labelColor + ';font-weight:bold;">' + (item.contractNumber || '-') + '</div>' +
'<div style="color:#666;">' + (item.name || '-') + '</div>' +
'<div style="color:#333;">' + (item.displacement || '-') + '</div></div>' :
'<div style="border:1px solid #ccc;border-radius:4px;padding:2px 5px;font-size:12px;background-color:white;font-weight:bold;color:' + labelColor + ';">' + item.name + '</div>';
var label = new T.Label({ text: labelContent, position: point, offset: new T.Point(-30, -30) });
label.setBackgroundColor('transparent');
label.setBorderLine(0);
map.addOverLay(label);
// 信息窗口
var infoHtml = '<div style="font-size:13px;line-height:1.5;"><strong style="color:#007bff;font-size:14px;">' + item.name + '</strong><br>';
if (type === 'sewage') {
infoHtml += '出口流量: ' + (item.outFlow || 0) + 'm³/h<br>入口流量: ' + (item.inFlow || 0) + 'm³/h<br>状态: ' + (item.status === 0 ? '在线' : item.status === 1 ? '告警' : '离线') + '<br>设计能力: ' + (item.designCapacity || '-') + '万吨/天';
} else if (type === 'company') {
infoHtml += '合同编号: ' + (item.contractNumber || '-') + '<br>企业名称: ' + (item.name || '-') + '<br>日排放量: ' + (item.displacement || '-');
} else if (type === 'pump') {
infoHtml += '流量: ' + (item.flow || '-') + 'm³/h';
}
infoHtml += '</div>';
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
marker.addEventListener('click', function() { this.openInfoWindow(infoWindow); });
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
markers.push({ marker: marker, label: label, data: item, infoWindow: infoWindow });
});
}
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 管线渲染（参考 geocopy.html）====================
// 存储管线覆盖物，用于清除
var pipelineOverlays = [];
var pipelineDataLoaded = false; // 标记管线数据是否已加载
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
function clearPipelines() {
pipelineOverlays.forEach(function(overlay) {
map.removeOverLay(overlay);
GIS
2026-03-07 19:48:01 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
pipelineOverlays = [];
GIS
2026-03-07 19:48:01 +08:00
}
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
function renderPipelines(pipelines) {
// 先清除之前的管线
clearPipelines();
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
pipelines.forEach(function(item) {
if (!item.paths || !item.paths.length) return;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// ArcGIS JSON 格式: paths 是数组，每个元素是一条路径 [[lng,lat], [lng,lat], ...]
// 一条管线可能有多条路径（分支）
var pathsArray = item.paths;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 如果 paths 的第一个元素不是数组，说明是单路径格式，需要包装
if (!Array.isArray(pathsArray[0]) || !Array.isArray(pathsArray[0][0])) {
pathsArray = [pathsArray];
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// 按颜色区分管线（参考 geocopy.html 的颜色逻辑）
// Color === 6 为蓝色，其他为红色
var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 渲染每条路径
pathsArray.forEach(function(pathCoords) {
if (!pathCoords || pathCoords.length < 2) return;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var points = pathCoords.map(function(p) {
return new T.LngLat(p[0], p[1]);
});
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var polyline = new T.Polyline(points, {
color: lineColor,
weight: 3,
opacity: 0.8
});
map.addOverLay(polyline);
pipelineOverlays.push(polyline);
// 信息窗口
var infoHtml = '<div style="font-size:13px;line-height:1.5;">' +
'<strong style="color:#007bff;">管线 #' + item.id + '</strong><br>' +
'名称: ' + (item.name || '-') + '<br>' +
'管长: ' + (item.length || '-') + ' m<br>' +
'高程: ' + (item.elevation || 0).toFixed(2) + ' m<br>' +
// '图层: ' + (item.layer || '-') + '<br>' +
// '颜色: ' + (item.color === 6 ? '蓝色' : '红色') +
'</div>';
var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
polyline.addEventListener('click', function(e) {
map.openInfoWindow(infoWindow, e.lnglat);
});
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
markers.push({ marker: polyline, label: null, data: item, infoWindow: infoWindow });
GIS
2026-03-07 19:48:01 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
});
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
console.log('[管线渲染] 完成，共渲染 ' + pipelineOverlays.length + ' 条管线段');
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 标记选择 ====================
function selectMarker(name, type) {
var target = markers.find(function(m) { return m.data.name === name; });
if (!target) { console.warn('未找到标记:', name); return; }
map.panTo(target.marker.getLngLat());
target.marker.openInfoWindow(target.infoWindow);
if (currentPulse) map.removeOverLay(currentPulse);
var pulseLabel = new T.Label({
text: '<div class="pulse-ring"></div>',
position: target.marker.getLngLat(),
offset: new T.Point(-15, -15)
GIS
2026-03-07 19:48:01 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
pulseLabel.setBackgroundColor('transparent');
pulseLabel.setBorderLine(0);
map.addOverLay(pulseLabel);
currentPulse = pulseLabel;
}
function selectCompany(index) {
var item = dataConfig.company.data[index];
if (!item || !item.lng || !item.lat) return;
map.panTo(new T.LngLat(item.lng, item.lat));
map.setZoom(15);
selectMarker(item.name, 'company');
GIS
2026-03-07 19:48:01 +08:00
}
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// ==================== 企业查询功能 ====================
// 初始化企业查询下拉选项
function initCompanySearchOptions() {
// 加载所属泵站选项
$.ajax({
url: contextPath + '/sparepart/sewage/getProcessSectionId4Select.do',
type: 'POST',
data: { companyId: 'JSBZ' },
success: function(data) {
if (typeof data === 'string') {
try { data = JSON.parse(data); } catch(e) { data = []; }
}
var $select = $('#company-processSection');
$select.empty().append('<option value="">请选择</option>');
(data || []).forEach(function(item) {
$select.append('<option value="' + item.id + '">' + item.text + '</option>');
});
},
error: function() {
console.error('[企业查询] 加载泵站选项失败');
}
});
// 加载管网所有权单位选项
$.ajax({
url: contextPath + '/sparepart/sewage/getSewageCity4Select.do',
type: 'POST',
data: { unitId: '0533JS' },
success: function(data) {
if (typeof data === 'string') {
try { data = JSON.parse(data); } catch(e) { data = []; }
}
var $select = $('#company-city');
$select.empty().append('<option value="">请选择</option>');
(data || []).forEach(function(item) {
$select.append('<option value="' + item.id + '">' + item.text + '</option>');
});
},
error: function() {
console.error('[企业查询] 加载管网所有权单位选项失败');
}
});
}
// 企业查询
function searchCompany() {
var config = dataConfig.company;
// 重置已加载状态，强制重新加载
config.loaded = false;
config.data = [];
// 获取动态参数
var params = config.api.getParams();
console.log('[企业查询] 查询参数:', params);
// 重新加载数据
loadData('company').then(function() {
renderTable('company');
initMarkers('company');
});
}
// 重置企业查询条件
function resetCompanySearch() {
$('#company-search-name').val('');
$('#company-processSection').val('');
$('#company-city').val('');
$('#company-point').val('');
$('#company-input').val('');
// 重新加载数据
searchCompany();
}
管道展示
2026-03-10 21:51:19 +08:00
// 选择管道并定位
function selectPipeline(index) {
var item = dataConfig.pipeline.data[index];
if (!item || !item.paths || !item.paths.length) {
console.warn('管道数据无效:', index);
GIS
2026-03-07 19:48:01 +08:00
return;
大屏
2026-03-01 23:40:06 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// 计算管道中心点
var paths = item.paths;
// 如果是 ArcGIS JSON 格式，paths 是三维数组
if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
paths = paths[0];
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 计算所有点的中心
var sumLng = 0, sumLat = 0, count = 0;
paths.forEach(function(p) {
sumLng += p[0];
sumLat += p[1];
count++;
GIS
2026-03-07 19:48:01 +08:00
});
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
管道展示
2026-03-10 21:51:19 +08:00
if (count === 0) return;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var centerLng = sumLng / count;
var centerLat = sumLat / count;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 定位到管道中心
map.panTo(new T.LngLat(centerLng, centerLat));
map.setZoom(16);
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 高亮显示选中的管道
highlightPipeline(item);
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
console.log('[管道定位] ' + item.name + ', 中心: (' + centerLng.toFixed(6) + ', ' + centerLat.toFixed(6) + ')');
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// 高亮显示管道
var highlightedPipeline = null;
function highlightPipeline(item) {
// 移除之前的高亮
if (highlightedPipeline) {
map.removeOverLay(highlightedPipeline);
highlightedPipeline = null;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
if (!item.paths || !item.paths.length) return;
GIS
2026-03-07 19:48:01 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var paths = item.paths;
if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
paths = paths[0];
GIS
2026-03-07 19:48:01 +08:00
}
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
var points = paths.map(function(p) {
return new T.LngLat(p[0], p[1]);
});
大屏
2026-03-01 23:40:06 +08:00
管道展示
2026-03-10 21:51:19 +08:00
// 创建高亮管道（更粗、更亮）
var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
highlightedPipeline = new T.Polyline(points, {
color: lineColor,
weight: 6,
opacity: 1
大屏
2026-03-01 23:40:06 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
map.addOverLay(highlightedPipeline);
// 显示信息窗口
var infoHtml = '<div style="font-size:13px;line-height:1.5;">' +
'<strong style="color:#007bff;">管线 #' + item.id + '</strong><br>' +
'名称: ' + (item.name || '-') + '<br>' +
'管长: ' + (item.length || '-') + ' m<br>' +
'高程: ' + (item.elevation || 0).toFixed(2) + ' m<br>' +
'</div>';
var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, -10) });
map.openInfoWindow(infoWindow, new T.LngLat(points[0].lng, points[0].lat));
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// ==================== Tab切换 ====================
function switchTab(tabId, navItem) {
// 更新导航样式
document.querySelectorAll('.drawer-nav-item').forEach(function(item) { item.classList.remove('active'); });
navItem.classList.add('active');
// 更新内容面板
document.querySelectorAll('.tab-pane').forEach(function(pane) { pane.classList.remove('active'); });
document.getElementById(tabId).classList.add('active');
// 确定数据类型并加载
var typeMap = {
'tab-sewage': 'sewage', 'tab-pump': 'pump',
'tab-company': 'company', 'tab-pipeline': 'pipeline'
};
var type = typeMap[tabId] || 'sewage';
loadData(type).then(function() {
renderTable(type);
initMarkers(type);
GIS
2026-03-07 19:48:01 +08:00
});
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 企业 Tab 初始化查询下拉选项
if (type === 'company') {
initCompanySearchOptions();
}
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// ==================== 抽屉和调整大小逻辑 ====================
GIS
2026-03-07 19:48:01 +08:00
function toggleDrawer() {
管道展示
2026-03-10 21:51:19 +08:00
var drawer = document.getElementById('rightDrawer');
var icon = document.getElementById('drawer-toggle-icon');
if (drawer.classList.contains('drawer-collapsed')) {
drawer.classList.remove('drawer-collapsed');
icon.innerHTML = '&gt;';
GIS
2026-03-07 19:48:01 +08:00
} else {
管道展示
2026-03-10 21:51:19 +08:00
drawer.classList.add('drawer-collapsed');
icon.innerHTML = '&lt;';
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}
管道展示
2026-03-10 21:51:19 +08:00
// 抽屉调整大小
(function() {
var resizer = document.getElementById('drawerResizer');
var drawer = document.getElementById('rightDrawer');
var startX, startWidth;
resizer.addEventListener('mousedown', function(e) {
startX = e.clientX;
startWidth = parseInt(document.defaultView.getComputedStyle(drawer).width, 10);
drawer.style.transition = 'none';
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
e.preventDefault();
GIS
2026-03-07 19:48:01 +08:00
});
管道展示
2026-03-10 21:51:19 +08:00
function doDrag(e) {
var newWidth = startWidth + (startX - e.clientX);
if (newWidth < 300) newWidth = 300;
if (newWidth > 1000) newWidth = 1000;
drawer.style.width = newWidth + 'px';
}
function stopDrag(e) {
drawer.style.transition = 'transform 0.3s ease';
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
})();
大屏
2026-03-01 23:40:06 +08:00
</script>
<!-- jQuery -->
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<script src="<%=request.getContextPath()%>/node_modules/jquery-ui/external/jquery/jquery.js"></script>
大屏
2026-03-01 23:40:06 +08:00
<!-- Bootstrap JS -->
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
大屏
2026-03-01 23:40:06 +08:00
<!-- Moment.js -->
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"></script>
大屏
2026-03-01 23:40:06 +08:00
<!-- DateRangePicker -->
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
GIS
2026-03-07 19:48:01 +08:00
大屏
2026-03-01 23:40:06 +08:00
<script>
GIS
2026-03-07 19:48:01 +08:00
$(document).ready(function () {
// Initialize DateRangePicker for time range inputs (移除了 company-time 相关)
$(
"#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end",
).daterangepicker({
singleDatePicker: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 1,
locale: {
format: "YYYY-MM-DD HH:mm",
applyLabel: "确定",
cancelLabel: "取消",
fromLabel: "从",
toLabel: "到",
weekLabel: "W",
customRangeLabel: "Custom Range",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
firstDay: 1,
},
});
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
// Initialize DateRangePicker for Record Date (Single Date, No Time)
$("#record-date").daterangepicker({
singleDatePicker: true,
showDropdowns: true,
locale: {
format: "YYYY-MM-DD",
applyLabel: "确定",
cancelLabel: "取消",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
firstDay: 1,
},
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
});
大屏
2026-03-01 23:40:06 +08:00
</script>
GIS
2026-03-07 19:48:01 +08:00
</body>
大屏
2026-03-01 23:40:06 +08:00
</html>
Reference in New Issue Copy Permalink