1982 lines
69 KiB
Plaintext
1982 lines
69 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
pageEncoding="UTF-8"%>
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>源头GIS管理</title>
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="<%=request.getContextPath()%>/node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||
/>
|
||
<!-- DateRangePicker CSS -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"
|
||
/>
|
||
|
||
<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;
|
||
z-index: 999;
|
||
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;
|
||
}
|
||
80%,
|
||
100% {
|
||
transform: scale(2.5);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Right Drawer -->
|
||
<div class="drawer-container" id="rightDrawer">
|
||
<div class="drawer-resizer" id="drawerResizer"></div>
|
||
<div class="drawer-toggle" onclick="toggleDrawer()" title="收起/展开">
|
||
<span id="drawer-toggle-icon">></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"
|
||
/>污水厂
|
||
</div>
|
||
<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>
|
||
</div>
|
||
<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>
|
||
</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>
|
||
<button
|
||
class="btn btn-default"
|
||
type="button"
|
||
style="margin-left: 5px"
|
||
>
|
||
校准
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
|
||
<!-- 泵站 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>
|
||
</div>
|
||
<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>
|
||
|
||
<!-- Company Content -->
|
||
<div id="tab-company" 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: 10px;
|
||
margin-bottom: 10px;
|
||
"
|
||
>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
|
||
<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>合同编号</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>
|
||
|
||
<!-- 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="管道名称"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</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="管道管长"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</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="起点埋深"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
<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>管径(mm)</th>
|
||
<th>管长(m)</th>
|
||
<th>起点埋深(m)</th>
|
||
<th>终点埋深(m)</th>
|
||
<th>高程(m)</th>
|
||
<th>终点高程(m)</th>
|
||
<th>图层</th>
|
||
</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>
|
||
|
||
<!-- 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="管井名称"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</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="管井埋深"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</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="地面高程"
|
||
/>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
|
||
<div id="map-container"></div>
|
||
|
||
<!-- Scripts -->
|
||
<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>
|
||
|
||
<!-- Tianditu Map API -->
|
||
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
||
<script
|
||
type="text/javascript"
|
||
src="http://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"
|
||
></script>
|
||
|
||
<script type="text/javascript">
|
||
// 坐标转换工具 (百度 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);
|
||
if (newZoom < minZoomLevel) {
|
||
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);
|
||
|
||
// ==================== 统一数据管理 ====================
|
||
var contextPath = "<%=request.getContextPath()%>";
|
||
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,
|
||
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' }
|
||
},
|
||
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]);
|
||
}
|
||
}
|
||
if ((!lng || !lat) && item.company) {
|
||
lng = lng || item.company.longitude;
|
||
lat = lat || item.company.latitude;
|
||
}
|
||
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
|
||
};
|
||
}
|
||
}
|
||
};
|
||
|
||
// ==================== 统一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([]);
|
||
}
|
||
}, 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);
|
||
}
|
||
});
|
||
} 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);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// ==================== 统一数据加载 ====================
|
||
function loadData(type) {
|
||
var config = dataConfig[type];
|
||
if (!config || config.loaded) return Promise.resolve(config.data);
|
||
|
||
var api = config.api;
|
||
// 支持动态参数获取（用于企业查询）
|
||
var params = api.getParams ? api.getParams() : api.params;
|
||
return apiRequest(api.url, params, api.mock, api.isStatic).then(function(res) {
|
||
// 根据数据源类型提取数据列表
|
||
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 [];
|
||
});
|
||
}
|
||
|
||
// ==================== 统一表格渲染 ====================
|
||
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;
|
||
}
|
||
};
|
||
|
||
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);
|
||
}
|
||
}
|
||
|
||
// ==================== 初始化入口 ====================
|
||
function initPage() {
|
||
// 加载默认Tab数据
|
||
loadData('sewage').then(function() {
|
||
renderTable('sewage');
|
||
initMarkers('sewage');
|
||
});
|
||
}
|
||
initPage();
|
||
|
||
// ==================== 统一地图标记管理 ====================
|
||
function initMarkers(type) {
|
||
map.closeInfoWindow();
|
||
// 清除现有标记
|
||
markers.forEach(function(m) {
|
||
if (m.marker) map.removeOverLay(m.marker);
|
||
if (m.label) map.removeOverLay(m.label);
|
||
});
|
||
markers = [];
|
||
if (currentPulse) {
|
||
map.removeOverLay(currentPulse);
|
||
currentPulse = null;
|
||
}
|
||
// 清除管线覆盖物
|
||
clearPipelines();
|
||
|
||
var config = dataConfig[type];
|
||
if (!config || !config.data.length) return;
|
||
|
||
// 管线类型使用 Polyline 渲染
|
||
if (type === 'pipeline') {
|
||
renderPipelines(config.data);
|
||
return;
|
||
}
|
||
|
||
// 其他类型使用 Marker 渲染
|
||
config.data.forEach(function(item) {
|
||
if (!item.lng || !item.lat) return;
|
||
|
||
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>';
|
||
|
||
var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
|
||
marker.addEventListener('click', function() { this.openInfoWindow(infoWindow); });
|
||
|
||
markers.push({ marker: marker, label: label, data: item, infoWindow: infoWindow });
|
||
});
|
||
}
|
||
|
||
// ==================== 管线渲染（参考 geocopy.html）====================
|
||
// 存储管线覆盖物，用于清除
|
||
var pipelineOverlays = [];
|
||
var pipelineDataLoaded = false; // 标记管线数据是否已加载
|
||
|
||
function clearPipelines() {
|
||
pipelineOverlays.forEach(function(overlay) {
|
||
map.removeOverLay(overlay);
|
||
});
|
||
pipelineOverlays = [];
|
||
}
|
||
|
||
function renderPipelines(pipelines) {
|
||
// 先清除之前的管线
|
||
clearPipelines();
|
||
|
||
pipelines.forEach(function(item) {
|
||
if (!item.paths || !item.paths.length) return;
|
||
|
||
// ArcGIS JSON 格式: paths 是数组，每个元素是一条路径 [[lng,lat], [lng,lat], ...]
|
||
// 一条管线可能有多条路径（分支）
|
||
var pathsArray = item.paths;
|
||
|
||
// 如果 paths 的第一个元素不是数组，说明是单路径格式，需要包装
|
||
if (!Array.isArray(pathsArray[0]) || !Array.isArray(pathsArray[0][0])) {
|
||
pathsArray = [pathsArray];
|
||
}
|
||
|
||
// 按颜色区分管线（参考 geocopy.html 的颜色逻辑）
|
||
// Color === 6 为蓝色，其他为红色
|
||
var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
|
||
|
||
// 渲染每条路径
|
||
pathsArray.forEach(function(pathCoords) {
|
||
if (!pathCoords || pathCoords.length < 2) return;
|
||
|
||
var points = pathCoords.map(function(p) {
|
||
return new T.LngLat(p[0], p[1]);
|
||
});
|
||
|
||
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);
|
||
});
|
||
|
||
markers.push({ marker: polyline, label: null, data: item, infoWindow: infoWindow });
|
||
});
|
||
});
|
||
|
||
console.log('[管线渲染] 完成，共渲染 ' + pipelineOverlays.length + ' 条管线段');
|
||
}
|
||
|
||
// ==================== 标记选择 ====================
|
||
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)
|
||
});
|
||
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');
|
||
}
|
||
|
||
// ==================== 企业查询功能 ====================
|
||
// 初始化企业查询下拉选项
|
||
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();
|
||
}
|
||
|
||
// 选择管道并定位
|
||
function selectPipeline(index) {
|
||
var item = dataConfig.pipeline.data[index];
|
||
if (!item || !item.paths || !item.paths.length) {
|
||
console.warn('管道数据无效:', index);
|
||
return;
|
||
}
|
||
|
||
// 计算管道中心点
|
||
var paths = item.paths;
|
||
// 如果是 ArcGIS JSON 格式，paths 是三维数组
|
||
if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
|
||
paths = paths[0];
|
||
}
|
||
|
||
// 计算所有点的中心
|
||
var sumLng = 0, sumLat = 0, count = 0;
|
||
paths.forEach(function(p) {
|
||
sumLng += p[0];
|
||
sumLat += p[1];
|
||
count++;
|
||
});
|
||
|
||
if (count === 0) return;
|
||
|
||
var centerLng = sumLng / count;
|
||
var centerLat = sumLat / count;
|
||
|
||
// 定位到管道中心
|
||
map.panTo(new T.LngLat(centerLng, centerLat));
|
||
map.setZoom(16);
|
||
|
||
// 高亮显示选中的管道
|
||
highlightPipeline(item);
|
||
|
||
console.log('[管道定位] ' + item.name + ', 中心: (' + centerLng.toFixed(6) + ', ' + centerLat.toFixed(6) + ')');
|
||
}
|
||
|
||
// 高亮显示管道
|
||
var highlightedPipeline = null;
|
||
function highlightPipeline(item) {
|
||
// 移除之前的高亮
|
||
if (highlightedPipeline) {
|
||
map.removeOverLay(highlightedPipeline);
|
||
highlightedPipeline = null;
|
||
}
|
||
|
||
if (!item.paths || !item.paths.length) return;
|
||
|
||
var paths = item.paths;
|
||
if (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) {
|
||
paths = paths[0];
|
||
}
|
||
|
||
var points = paths.map(function(p) {
|
||
return new T.LngLat(p[0], p[1]);
|
||
});
|
||
|
||
// 创建高亮管道（更粗、更亮）
|
||
var lineColor = item.color === 6 ? '#0099ff' : '#ff3300';
|
||
highlightedPipeline = new T.Polyline(points, {
|
||
color: lineColor,
|
||
weight: 6,
|
||
opacity: 1
|
||
});
|
||
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));
|
||
}
|
||
|
||
// ==================== 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);
|
||
});
|
||
|
||
// 企业 Tab 初始化查询下拉选项
|
||
if (type === 'company') {
|
||
initCompanySearchOptions();
|
||
}
|
||
}
|
||
|
||
// ==================== 抽屉和调整大小逻辑 ====================
|
||
function toggleDrawer() {
|
||
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 = '>';
|
||
} else {
|
||
drawer.classList.add('drawer-collapsed');
|
||
icon.innerHTML = '<';
|
||
}
|
||
}
|
||
|
||
// 抽屉调整大小
|
||
(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();
|
||
});
|
||
|
||
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);
|
||
}
|
||
})();
|
||
</script>
|
||
<!-- jQuery -->
|
||
<script src="<%=request.getContextPath()%>/node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
||
<!-- Bootstrap JS -->
|
||
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
<!-- Moment.js -->
|
||
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
||
<!-- DateRangePicker -->
|
||
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||
|
||
<script>
|
||
$(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,
|
||
},
|
||
});
|
||
|
||
// 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,
|
||
},
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|