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

3001 lines
106 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;
z-index: 1000;
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>
<!-- <div
class="well well-sm"
style="
background: white;
border: none;
box-shadow: none;
padding: 0;
"
>
<div class="query-form-group">
<label>企业名称/合同编号</label>
<div class="input-group">
<input
type="text"
class="form-control"
id="company-search-name"
placeholder="请输入企业名称或合同编号"
/>
<span class="input-group-btn">
<button
class="btn btn-primary"
type="button"
onclick="searchCompany()"
>
<i class="glyphicon glyphicon-search"></i> 查询
</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 id="company-show-label" />
显示标注</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; 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>
<th>起点地面高程(m)</th>
<th>终点地面高程(m)</th>
<th>管线内底标高(m)</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>
大屏
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);
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);
// Data Containers
var sources = [];
var pumpStations = [];
var companies = [];
var wells = [];
var pipelines = [];
var plans = [];
var records = [];
var markers = [];
// 获取上下文路径
var contextPath = "<%=request.getContextPath()%>";
// 真实API请求函数
function apiRequest(url, params) {
console.log("API Request:", contextPath + url, params);
return new Promise(function (resolve, reject) {
$.ajax({
url: contextPath + url,
type: "POST",
data: params || {},
success: function (data) {
console.log("API Response:", url, data);
resolve(data);
大屏
2026-03-01 23:40:06 +08:00
},
GIS
2026-03-07 19:48:01 +08:00
error: function (xhr, status, error) {
console.error("API Request Error:", url, error);
reject(error);
大屏
2026-03-01 23:40:06 +08:00
},
GIS
2026-03-07 19:48:01 +08:00
});
});
}
// Mock API Function (保留用于没有真实接口的数据)
function mockApiRequest(url, params) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("API Request:", url, params);
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 if (url === "/api/pump/list") {
resolve([])} else if (url === "/api/company/list") {
// Re-generate companies data here or move it inside
var comps = [];
// for (var i = 1; i <= 10; i++) {
// comps.push({
// id: i,
// code: "C" + (1000 + i),
// name: "企业" + i,
// address: "金山区某工业园路" + i + "号",
// plantCode: "P" + (Math.floor(Math.random() * 2) + 1),
// dischargeCode: "D" + (100 + i),
// discharge: (Math.random() * 500 + 100).toFixed(2),
// dischargePoint: "点位" + i,
// lng: 121.3 + Math.random() * 0.1,
// lat: 30.7 + Math.random() * 0.1,
// });
// }
resolve(comps);
} else if (url === "/api/well/list") {
var wls = [];
// wls = wls.map(function (item) {
// return {
// id: item.id,
// name: item.name,
// code: item.name,
// pipeName: "",
// pipeCode: "",
// depth: item.depth,
// nature: "",
// attachment: "",
// bottomElev: item.bottomElev,
// lng: item.lng,
// lat: item.lat,
// mapLng: item.mapLng,
// mapLat: item.mapLat,
// road: "",
// town: "",
// zone: "",
// surveyor: "",
// angle: "",
// calLng: "",
// calLat: "",
// spec: item.spec,
// groundElev: item.groundElev,
// };
// });
resolve(wls);
} else if (url === "/api/plan/list") {
resolve([])
}else if (url === "/api/record/list") {
resolve([])
} else {
reject("Unknown API Endpoint");
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}, 500); // Simulate network delay
});
}
// 加载企业数据（排污源）
// 接口字段参考 Sewage 实体类和 sewageList.jsp
function loadCompanyData() {
console.log("=== loadCompanyData 函数开始执行 ===");
return apiRequest("/sparepart/sewage/getList.do", {
page: 1,
rows: 50,
sort: "id",
order: "asc",
unitId:'0533JS',
// int=&unitId=0533JS&processSectionId=&_=1772719506160
})
.then(function (data) {
console.log("=== loadCompanyData then 回调执行, data:", data);
var dataList = data;
if (typeof data === "string") {
try {
dataList = JSON.parse(data);
} catch (e) {
console.error("解析泵站数据失败:", e);
dataList = {};
}
}
// 接口返回格式: {total: xxx, rows: [...]}
// 每行数据结构: {id, name, address, company: {...}, processSection: {...}, ...}
var list = dataList.rows || [];
console.log(
"企业接口返回数据条数:",
list.length,
"第一条数据:",
list[0],
);
if (!list || list.length === 0) {
console.error("!!! 企业接口返回数据为空!");
return [];
}
companies = list.map(function (item, idx) {
// item 是每行数据本身，包含 name, address, contractNumber 等
// item.company 是所属区域信息
// item.processSection 是所属泵站信息
// 解析经纬度 (格式: "经度" 或 "经度,纬度")
var lng = null,
lat = null;
console.log("[企业" + idx + "] " + item.name + " 经纬度原始值:", item.longitudeLatitude);
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]);
}
}
// 如果经纬度不完整，从 company 对象获取
if ((!lng || !lat) && item.company) {
lng = lng || item.company.longitude;
lat = lat || item.company.latitude;
console.log("[企业" + idx + "] 从 company 对象获取经纬度:", lng, lat);
}
console.log("[企业" + idx + "] 最终经纬度:", lng, lat);
// 如果经纬度仍然为空，使用默认位置（金山区范围）
if (!lng || !lat) {
lng = 121.3 + idx * 0.01;
lat = 30.7 + idx * 0.005;
console.warn("[企业" + idx + "] " + item.name + " 缺少经纬度，使用默认位置:", lng, lat);
}
return {
id: item.id,
// 合同编号
contractNumber: item.contractNumber || "",
// 公司名称
name: item.name || "",
// 地址
address: item.address || "",
// 所属区域 (company.name)
areaName: item.company ? item.company.name || "" : "",
// 所属泵站ID
processSectionId: item.processSectionId || "",
// 所属泵站名称 (processSection为null时显示空)
processSectionName: item.processSection
? item.processSection.name || ""
: "",
// 排污许可证编号
permitNum: item.permitNum || "",
// 排放编号
ventNum: item.ventNum || "",
// 所属行业
trade: item.trade || "",
// 实际日排量(吨/天)
displacement: item.displacement
? item.displacement + "吨/天"
: "-",
// 统一社会信用代码
societyNumber: item.societyNumber || "",
// 管网所有权单位
city: item.city || "",
// 联系人
username: item.username || "",
// 电话
phone: item.phone || "",
// 经纬度
longitudeLatitude: item.longitudeLatitude || "",
// 已关联点位
point: item._point ? "是" : "否",
// 已录入数据
input: item._input ? "是" : "否",
// 地图坐标
lng: lng,
lat: lat,
// 保留原始数据
_raw: item,
};
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
console.log("企业数据处理后条数:", companies.length);
return companies;
})
.catch(function(err) {
console.error('加载企业数据失败:', err);
return [];
});
}
// 加载管道数据
function loadPipelineData() {
console.log("=== loadPipelineData 函数开始执行 ===");
return apiRequest("/pipeline/pipelineData/getList.do", {
page: 1,
rows: 1000,
sort: "id",
order: "desc",
})
.then(function (data) {
console.log("管道接口返回数据:", data);
var dataList = data;
if (typeof data === "string") {
try {
dataList = JSON.parse(data);
} catch (e) {
console.error("解析泵站数据失败:", e);
dataList = {};
}
}
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
GIS
2026-03-07 19:48:01 +08:00
var list = dataList.rows || [];
pipelines = list.map(function (item) {
return {
id: item.id,
name: item.pipelineName || "-",
diameter: item.diameterMm || "-",
length: item.lengthM || "-",
startDepth: item.startBurialDepthM || "-",
endDepth: item.endBurialDepthM || "-",
startElev: item.startGroundElevationM || "-",
endElev: item.endGroundElevationM || "-",
invertElev: item.pipelineInvertElevationM || "-",
// 管道暂无坐标信息
path: null,
};
});
console.log("管道数据处理后条数:", pipelines.length);
return pipelines;
})
.catch(function (err) {
console.error("加载管道数据失败:", err);
return [];
});
}
// 加载泵站数据（工艺段）
function loadPumpData() {
return apiRequest("/user/processSection/getProcessSection4Select.do", {
companyId: "JSBZ", // 根据排污源信息页面传参
})
.then(function (data) {
console.log("泵站接口返回原始数据:", data, "类型:", typeof data);
// 确保data是数组
var dataList = data;
if (typeof data === "string") {
try {
dataList = JSON.parse(data);
} catch (e) {
console.error("解析泵站数据失败:", e);
dataList = [];
}
}
// 接口返回格式: [{id: xxx, text: xxx}, ...] 或 [{text: xxx}, ...]
pumpStations = (dataList || []).map(function (item, index) {
return {
id: item.id || "pump_" + index,
name: item.text || item.name || "",
code: item.id || "",
level: "-",
flow: "-",
status: "-",
time: "-",
// 泵站暂无坐标信息，使用默认位置
lng: 121.32 + index * 0.01,
lat: 30.76 - index * 0.005,
};
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
console.log("泵站数据处理后:", pumpStations);
return pumpStations;
})
.catch(function (err) {
console.error("加载泵站数据失败:", err);
return [];
});
}
// Initialize Data - 只加载默认Tab(污水厂)的数据
function loadData() {
// 初始加载污水厂数据
mockApiRequest("/api/sewage/list")
.then(function (data) {
sources = data;
initSewageTable();
initMarkers("sewage");
})
.catch(function (err) {
console.error("Failed to load sewage data:", err);
});
}
// 数据加载状态标记
var dataLoaded = {
sewage: true, // 初始已加载
pump: false,
company: false,
pipeline: false,
well: false,
plan: false,
record: false,
};
// 按Tab类型加载数据
function loadTabData(type) {
// 如果数据已加载，直接返回
if (dataLoaded[type]) {
return Promise.resolve();
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var loadPromise;
switch (type) {
case "pump":
loadPromise = loadPumpData().then(function (data) {
console.log("loadTabData pump 接收数据:", data);
pumpStations = data;
console.log("pumpStations 赋值后:", pumpStations);
initPumpTable();
dataLoaded.pump = true;
});
break;
case "company":
loadPromise = loadCompanyData().then(function (data) {
console.log("loadTabData company 接收数据:", data);
companies = data;
console.log("companies 赋值后:", companies);
initCompanyTable();
dataLoaded.company = true;
});
break;
case "pipeline":
loadPromise = loadPipelineData().then(function (data) {
console.log("loadTabData pipeline 接收数据:", data);
pipelines = data;
initPipelineTable();
dataLoaded.pipeline = true;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
break;
case "well":
loadPromise = mockApiRequest("/api/well/list").then(
function (data) {
wells = data;
initWellTable();
dataLoaded.well = true;
},
);
break;
case "plan":
loadPromise = mockApiRequest("/api/plan/list").then(
function (data) {
plans = data;
initPlanTable();
dataLoaded.plan = true;
},
);
break;
case "record":
loadPromise = mockApiRequest("/api/record/list").then(
function (data) {
records = data;
initRecordTable();
dataLoaded.record = true;
},
);
break;
default:
return Promise.resolve();
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
return loadPromise.catch(function (err) {
console.error("加载" + type + "数据失败:", err);
});
}
// Call loadData for initial tab
loadData();
function initMarkers(dataType) {
// Close any open info window on the map
map.closeInfoWindow();
// Clear existing markers
markers.forEach(function (m) {
if (m.marker) map.removeOverLay(m.marker);
if (m.label) map.removeOverLay(m.label);
if (m.infoWindow) {
if (m.marker.closeInfoWindow) m.marker.closeInfoWindow();
}
});
markers = [];
if (currentPulse) {
map.removeOverLay(currentPulse);
currentPulse = null;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var type = dataType || "sewage";
var layers = [];
if (type === "sewage") layers.push({ type: "sewage", data: sources });
else if (type === "pump")
layers.push({ type: "pump", data: pumpStations });
else if (type === "company") {
console.log("[initMarkers] 准备创建企业标记, companies 数据:", companies);
layers.push({ type: "company", data: companies });
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
else if (type === "well") layers.push({ type: "well", data: wells });
else if (type === "pipeline") {
layers.push({ type: "pipeline", data: pipelines });
layers.push({ type: "well", data: wells });
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
console.log("[initMarkers] type:", type, "layers:", layers);
layers.forEach(function (layer) {
var currentType = layer.type;
console.log("currentType", currentType);
if (layer.data && layer.data.length > 0) {
layer.data.forEach(function (item) {
// Handle Pipelines (Polyline)
if (currentType === "pipeline") {
if (!item.path || item.path.length < 2) return;
var points = item.path.map(function (p) {
return new T.LngLat(p[0], p[1]);
});
var polyline = new T.Polyline(points, {
color: "blue",
weight: 4,
opacity: 0.8,
});
map.addOverLay(polyline);
var infoContent =
"<div style='font-size:13px; line-height:1.5;'>";
infoContent +=
"<strong style='color:#007bff; font-size:14px;'>管线 #" +
item.id +
"</strong><br>";
infoContent += "管径: " + item.diameter + "mm<br>";
infoContent += "长度: " + item.length + "m<br>";
infoContent += "</div>";
var infoWindow = new T.InfoWindow(infoContent, {
offset: new T.Point(0, 0),
});
polyline.addEventListener("click", function (e) {
var point = e.lnglat; // Get click position
map.openInfoWindow(infoWindow, point);
});
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
markers.push({
marker: polyline,
data: item,
infoWindow: infoWindow,
label: null,
});
return;
}
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
// Use mapLng/mapLat if available (for wells with projected coords in table), otherwise standard lng/lat
var lng = item.mapLng || item.lng;
var lat = item.mapLat || item.lat;
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
console.log("[initMarkers] " + currentType + " - " + item.name + " 经纬度:", lng, lat);
if (!lng || !lat) {
console.warn("[initMarkers] 跳过 " + item.name + " 无有效经纬度");
return;
}
var point = new T.LngLat(lng, lat);
// Create Marker
var marker;
console.log("currentType", currentType);
if (currentType === "well") {
var icon = new T.Icon({
iconUrl: "<%=request.getContextPath()%>/IMG/wsgj.png",
iconSize: new T.Point(10, 10),
iconAnchor: new T.Point(15, 15),
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
marker = new T.Marker(point, { icon: icon });
} else if (currentType === "pipeline-node") {
var icon = new T.Icon({
iconUrl: "<%=request.getContextPath()%>/IMG/icon_gd.png",
iconSize: new T.Point(18, 18),
iconAnchor: new T.Point(15, 15),
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
marker = new T.Marker(point, { icon: icon });
} else if (currentType === "pump") {
var icon = new T.Icon({
iconUrl: "<%=request.getContextPath()%>/IMG/icon_bz.png",
iconSize: new T.Point(18, 18),
iconAnchor: new T.Point(15, 15),
});
marker = new T.Marker(point, { icon: icon });
} else if (currentType === "company") {
var icon = new T.Icon({
iconUrl: "<%=request.getContextPath()%>/IMG/icon_qy.png",
iconSize: new T.Point(18, 18),
iconAnchor: new T.Point(15, 15),
});
marker = new T.Marker(point, { icon: icon });
console.log("[initMarkers] 创建企业标记成功:", item.name, "位置:", lng, lat);
} else if (currentType === "sewage") {
var icon = new T.Icon({
iconUrl: "<%=request.getContextPath()%>/IMG/icon_wsc.png",
iconSize: new T.Point(18, 18),
iconAnchor: new T.Point(15, 15),
});
marker = new T.Marker(point, { icon: icon });
} else {
marker = new T.Marker(point);
}
map.addOverLay(marker);
var labelColor = "green";
// Simple status logic for demo
if (currentType === "sewage") {
if (item.status === 1) labelColor = "#FFCC00";
else if (item.status === 2) labelColor = "red";
} else if (currentType === "pump") {
labelColor = "blue";
} else if (currentType === "company") {
labelColor = "#9932CC";
} else if (currentType === "well") {
labelColor = "#666";
}
if (currentType !== "well") {
// Set label
var labelContent;
if (currentType === "company") {
// 企业标签显示：编号、名称、日排放量
labelContent =
"<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>";
} else {
labelContent =
"<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>";
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var label = new T.Label({
text: labelContent,
position: point,
offset: new T.Point(-30, -30),
// offset: new T.Point(0, 0),
});
label.setBackgroundColor("transparent");
label.setBorderLine(0);
map.addOverLay(label);
}
// InfoWindow Content Construction
var infoContent =
"<div style='font-size:13px; line-height:1.5;'>";
infoContent +=
"<strong style='color:#007bff; font-size:14px;'>" +
item.name +
"</strong><br>";
if (currentType === "sewage") {
var sewageStatusText =
item.status === 0
? "在线"
: item.status === 1
? "告警"
: "离线";
infoContent += "出口流量: " + (item.outFlow || 0) + "m³/h<br>";
infoContent += "入口流量: " + (item.inFlow || 0) + "m³/h<br>";
infoContent += "状态: " + sewageStatusText + "<br>";
infoContent +=
"设计能力: " + (item.designCapacity || "-") + "万吨/天<br>";
// infoContent += "详细地址: " + (item.address || "-") + "<br>";
// infoContent += "监测时间: " + (item.time || "-") + "<br>";
} else if (currentType === "pump") {
infoContent += "泵站名称: " + item.name + "<br>";
infoContent += "流量: " + item.flow + "m³/h<br>";
infoContent += "监测时间: " + item.time + "<br>";
} else if (currentType === "company") {
infoContent += "合同编号: " + (item.contractNumber || "-") + "<br>";
infoContent += "企业名称: " + (item.name || "-") + "<br>";
infoContent += "日排放量: " + (item.displacement || "-") + "<br>";
} else if (currentType === "well") {
infoContent += "深度: " + item.depth + "<br>";
infoContent += "规格: " + item.spec + "<br>";
}
infoContent += "</div>";
var infoWindow = new T.InfoWindow(infoContent, {
offset: new T.Point(0, 0),
});
// if (currentType === 'well') {
// marker.addEventListener('click', function() {
// document.getElementById('well_id').value = item.id;
// document.getElementById('well_name').value = item.name || '';
// document.getElementById('well_code').value = item.code || '';
// document.getElementById('well_pipe_name').value = item.pipeName || '';
// document.getElementById('well_pipe_code').value = item.pipeCode || '';
// document.getElementById('well_depth').value = item.depth || '';
// document.getElementById('well_nature').value = item.nature || '';
// document.getElementById('well_attachment').value = item.attachment || '';
// document.getElementById('well_bottom_elev').value = item.bottomElev || '';
// document.getElementById('well_lng').value = item.lng || '';
// document.getElementById('well_lat').value = item.lat || '';
// document.getElementById('well_road').value = item.road || '';
// document.getElementById('well_town').value = item.town || '';
// document.getElementById('well_zone').value = item.zone || '';
// document.getElementById('well_surveyor').value = item.surveyor || '';
// document.getElementById('well_angle').value = item.angle || '';
// document.getElementById('well_cal_lng').value = item.calLng || '';
// document.getElementById('well_cal_lat').value = item.calLat || '';
// document.getElementById('well_spec').value = item.spec || '';
// document.getElementById('well_ground_elev').value = item.groundElev || '';
// $('#wellEditModal').modal('show');
// });
// } else {
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
// }
markers.push({
marker: marker,
data: item,
infoWindow: infoWindow,
label: label,
});
大屏
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
GIS
2026-03-07 19:48:01 +08:00
// Selection Logic
var currentPulse = null; // Track the pulse overlay
// 通用的选择标记函数（带脉冲动画效果）
function selectMarker(name, type) {
var target = markers.find(function (m) {
return m.data.name === name && (type ? m.data.type === type || m.marker._type === type : true);
});
if (target) {
// 1. Center Map (Pan to target)
map.panTo(target.marker.getLngLat());
// 2. Open InfoWindow
target.marker.openInfoWindow(target.infoWindow);
// 3. Selection Effect - Dynamic Blue Pulse Circle at Marker Location
if (currentPulse) {
map.removeOverLay(currentPulse);
}
var pulseContent = "<div class='pulse-ring'></div>";
var pulseLabel = new T.Label({
text: pulseContent,
position: target.marker.getLngLat(),
offset: new T.Point(-15, -15), // Half of width/height (30px)
});
pulseLabel.setBackgroundColor("transparent");
pulseLabel.setBorderLine(0);
map.addOverLay(pulseLabel);
currentPulse = pulseLabel;
console.log("[selectMarker] 已定位到:", name, "类型:", type);
} else {
console.warn("[selectMarker] 未找到标记:", name, "类型:", type);
}
}
// 污水厂选择（保持兼容）
function selectSource(name) {
selectMarker(name, 'sewage');
// Update Radio Button in List
var radios = document.getElementsByName("sewage-select");
if (radios.length > 0) {
for (var i = 0; i < radios.length; i++) {
if (radios[i].value === name) {
radios[i].checked = true;
break;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}
// 泵站选择
function selectPump(name) {
selectMarker(name, 'pump');
}
// 企业选择
function selectCompany(index) {
var item = companies[index];
if (item && item.lng && item.lat) {
// 先定位地图
map.panTo(new T.LngLat(item.lng, item.lat));
map.setZoom(15);
// 查找并打开信息窗口
var target = markers.find(function (m) {
return m.data.name === item.name;
});
if (target) {
// 打开信息窗口
target.marker.openInfoWindow(target.infoWindow);
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
// 显示脉冲动画效果
if (currentPulse) {
map.removeOverLay(currentPulse);
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var pulseContent = "<div class='pulse-ring'></div>";
var pulseLabel = new T.Label({
text: pulseContent,
position: target.marker.getLngLat(),
offset: new T.Point(-15, -15),
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
pulseLabel.setBackgroundColor("transparent");
pulseLabel.setBorderLine(0);
map.addOverLay(pulseLabel);
currentPulse = pulseLabel;
}
console.log("[selectCompany] 已定位到企业:", item.name);
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
}
function initSewageTable() {
var sewagePlants = sources;
var tbody = document.getElementById("sewage-table-body");
var html = "";
sewagePlants.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
var statusText =
item.status === 0 ? "在线" : item.status === 1 ? "告警" : "离线";
html +=
'<tr class="' +
rowClass +
'" onclick="selectSource(\'' +
item.name +
'\')" style="cursor: pointer;">';
html += '<td class="text-center">' + (index + 1) + "</td>";
html +=
'<td class="text-center"><input type="radio" name="sewage-select" value="' +
item.name +
'"></td>';
html +=
'<td><a href="javascript:void(0);" style="color: #007bff;">' +
item.name +
"</a></td>";
html += '<td class="text-right">' + (item.outFlow || 0) + "m³/h</td>";
html += '<td class="text-right">' + (item.inFlow || 0) + "m³/h</td>";
html += '<td class="text-center">' + statusText + "</td>";
html +=
'<td class="text-center">' + (item.designCapacity || "-") + "</td>";
html += "<td>" + (item.address || "-") + "</td>";
html += '<td class="text-center">' + (item.time || "-") + "</td>";
html += "</tr>";
});
tbody.innerHTML = html;
}
function initPumpTable() {
console.log("initPumpTable 被调用, pumpStations:", pumpStations);
var tbody = document.getElementById("pump-table-body");
console.log("tbody 元素:", tbody);
if (!tbody) {
console.error("找不到 pump-table-body 元素!");
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var html = "";
if (!pumpStations || pumpStations.length === 0) {
console.warn("pumpStations 为空或长度为0");
tbody.innerHTML =
'<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
return;
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
pumpStations.forEach(function (station, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html += '<tr class="' + rowClass + '" onclick="selectPump(\'' + station.name + '\')" style="cursor: pointer;">';
html += '<td class="text-center">' + (index + 1) + "</td>";
html +=
'<td style="font-weight:bold;">' + (station.name || "-") + "</td>";
html += '<td class="text-right">' + (station.level || "-") + "</td>";
html += '<td class="text-right">' + (station.flow || "-") + "</td>";
html +=
'<td class="text-center">' + (station.status || "-") + "</td>";
html += '<td class="text-center">' + (station.time || "-") + "</td>";
html += "</tr>";
});
console.log("生成的表格HTML长度:", html.length);
tbody.innerHTML = html;
}
function saveWellData() {
var id = document.getElementById("well_id").value;
var wellIndex = wells.findIndex(function (w) {
return w.id == id;
});
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
GIS
2026-03-07 19:48:01 +08:00
if (wellIndex > -1) {
// Update properties
wells[wellIndex].name = document.getElementById("well_name").value;
wells[wellIndex].code = document.getElementById("well_code").value;
wells[wellIndex].pipeName =
document.getElementById("well_pipe_name").value;
wells[wellIndex].pipeCode =
document.getElementById("well_pipe_code").value;
wells[wellIndex].depth = document.getElementById("well_depth").value;
wells[wellIndex].nature =
document.getElementById("well_nature").value;
wells[wellIndex].attachment =
document.getElementById("well_attachment").value;
wells[wellIndex].bottomElev =
document.getElementById("well_bottom_elev").value;
wells[wellIndex].lng = document.getElementById("well_lng").value;
wells[wellIndex].lat = document.getElementById("well_lat").value;
wells[wellIndex].road = document.getElementById("well_road").value;
wells[wellIndex].town = document.getElementById("well_town").value;
wells[wellIndex].zone = document.getElementById("well_zone").value;
wells[wellIndex].surveyor =
document.getElementById("well_surveyor").value;
wells[wellIndex].angle = document.getElementById("well_angle").value;
wells[wellIndex].calLng =
document.getElementById("well_cal_lng").value;
wells[wellIndex].calLat =
document.getElementById("well_cal_lat").value;
wells[wellIndex].spec = document.getElementById("well_spec").value;
wells[wellIndex].groundElev =
document.getElementById("well_ground_elev").value;
// Update map coordinates if calibration values are provided
var calLng = document.getElementById("well_cal_lng").value;
var calLat = document.getElementById("well_cal_lat").value;
if (calLng && calLat) {
wells[wellIndex].mapLng = calLng;
wells[wellIndex].mapLat = calLat;
}
// Re-render markers if currently on well tab
// Check if current active tab is well tab
if (
document.getElementById("tab-well").classList.contains("active")
) {
initMarkers("well");
}
$("#wellEditModal").modal("hide");
// Optional: Show success message
// alert('保存成功！');
}
}
// initMarkers() 和表格初始化在 loadData() 完成后调用
// 不要在这里单独调用，否则会使用空数据
// 数据定义 (pipelines 和 wells) 已在 loadData() 中加载
// 如果需要默认数据，请在 loadData() 的 mockApiRequest 中配置
// ---------------------------------------------------------
// 坐标转换处理
// 如果源数据是百度坐标(BD-09)，需要转换为天地图坐标(WGS-84)
// ---------------------------------------------------------
// 默认不转换 (false)，如果您确认源数据是百度坐标，请将此变量设置为 true
var IS_SOURCE_BAIDU = false;
if (IS_SOURCE_BAIDU) {
console.log("正在将百度坐标转换为天地图坐标...");
pipelines.forEach(function (p) {
if (p.path) {
p.path = p.path.map(function (pt) {
return CoordTransform.bd09_to_wgs84(pt[0], pt[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
GIS
2026-03-07 19:48:01 +08:00
wells.forEach(function (w) {
if (w.mapLng && w.mapLat) {
var converted = CoordTransform.bd09_to_wgs84(
parseFloat(w.mapLng),
parseFloat(w.mapLat),
);
w.mapLng = converted[0];
w.mapLat = converted[1];
}
});
}
function initCompanyTable() {
console.log("initCompanyTable 被调用, companies:", companies);
var tbody = document.getElementById("company-table-body");
console.log("company-table-body 元素:", tbody);
if (!tbody) {
console.error("找不到 company-table-body 元素!");
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var html = "";
if (!companies || companies.length === 0) {
console.warn("companies 为空或长度为0");
tbody.innerHTML =
'<tr><td colspan="11" class="text-center">暂无数据</td></tr>';
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
companies.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html +=
'<tr class="' +
rowClass +
'" onclick="selectCompany(' +
index +
')" style="cursor: pointer;">';
html += '<td class="text-center">' + (index + 1) + "</td>";
html += "<td>" + (item.contractNumber || "-") + "</td>";
html += "<td>" + (item.name || "-") + "</td>";
html += "<td>" + (item.address || "-") + "</td>";
html += '<td class="text-center">' + (item.areaName || "-") + "</td>";
html +=
'<td class="text-center">' +
(item.processSectionName || "-") +
"</td>";
html +=
'<td class="text-center">' + (item.permitNum || "-") + "</td>";
html += '<td class="text-center">' + (item.trade || "-") + "</td>";
html +=
'<td class="text-right">' + (item.displacement || "-") + "</td>";
html += '<td class="text-center">' + (item.point || "-") + "</td>";
html += '<td class="text-center">' + (item.input || "-") + "</td>";
html += "</tr>";
});
console.log("生成的企业表格HTML长度:", html.length);
tbody.innerHTML = html;
}
function initPipelineTable() {
console.log("initPipelineTable 被调用, pipelines:", pipelines);
var tbody = document.getElementById("pipeline-table-body");
console.log("pipeline-table-body 元素:", tbody);
if (!tbody) {
console.error("找不到 pipeline-table-body 元素!");
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var html = "";
if (!pipelines || pipelines.length === 0) {
console.warn("pipelines 为空或长度为0");
tbody.innerHTML =
'<tr><td colspan="10" class="text-center">暂无数据</td></tr>';
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var totalDiameter = 0;
var totalLength = 0;
pipelines.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html += '<tr class="' + rowClass + '">';
html +=
'<td class="text-center"><input type="radio" name="pipe-select"></td>';
html += '<td class="text-center">' + (index + 1) + "</td>";
html += "<td>" + (item.name || "-") + "</td>";
html += '<td class="text-center">' + (item.diameter || "-") + "</td>";
html += '<td class="text-right">' + (item.length || "-") + "</td>";
html += '<td class="text-right">' + (item.startDepth || "-") + "</td>";
html += '<td class="text-right">' + (item.endDepth || "-") + "</td>";
html += '<td class="text-right">' + (item.startElev || "-") + "</td>";
html += '<td class="text-right">' + (item.endElev || "-") + "</td>";
html += '<td class="text-right">' + (item.invertElev || "-") + "</td>";
html += "</tr>";
// Calculate totals
var d = parseFloat(item.diameter) || 0;
var l = parseFloat(item.length) || 0;
totalDiameter += d;
totalLength += l;
});
console.log("生成的管道表格HTML长度:", html.length);
tbody.innerHTML = html;
// Update Summary
var diamElem = document.getElementById("pipe-total-diameter");
var lenElem = document.getElementById("pipe-total-length");
if (diamElem) diamElem.innerText = totalDiameter.toFixed(2);
if (lenElem) lenElem.innerText = totalLength.toFixed(2);
}
function initWellTable() {
var tbody = document.getElementById("well-table-body");
if (!tbody) {
console.error("找不到 well-table-body 元素!");
return;
}
if (!wells || wells.length === 0) {
tbody.innerHTML = '<tr><td colspan="9" class="text-center" style="color:#999; padding:20px;">暂无数据</td></tr>';
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var html = "";
wells.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html += '<tr class="' + rowClass + '">';
html +=
'<td class="text-center"><input type="radio" name="well-select"></td>';
html += '<td class="text-center">' + (index + 1) + "</td>";
html += "<td>" + item.name + "</td>";
html += '<td class="text-right">' + item.depth + "</td>";
html += '<td class="text-right">' + item.bottomElev + "</td>";
html += '<td class="text-right">' + item.groundElev + "</td>";
html += '<td class="text-center">' + item.spec + "</td>";
html += '<td class="text-right">' + item.lng + "</td>";
html += '<td class="text-right">' + item.lat + "</td>";
html += "</tr>";
});
tbody.innerHTML = html;
}
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
// initCompanyTable(), initPipelineTable(), initWellTable() 已在 loadData() 完成后调用
// 不要在这里重复调用
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
// plans 和 records 数据已在 loadData() 中通过 mockApiRequest 加载
// 不要在这里重复定义，否则会覆盖已加载的数据
大屏
2026-03-01 23:40:06 +08:00
GIS
2026-03-07 19:48:01 +08:00
function initPlanTable() {
var tbody = document.getElementById("plan-table-body");
if (!tbody) {
console.error("找不到 plan-table-body 元素!");
return;
}
if (!plans || plans.length === 0) {
tbody.innerHTML = '<tr><td colspan="8" class="text-center" style="color:#999; padding:20px;">暂无数据</td></tr>';
return;
}
var html = "";
plans.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html += '<tr class="' + rowClass + '">';
html +=
'<td class="text-center"><input type="checkbox" name="plan-select"></td>';
html += '<td class="text-center">' + (index + 1) + "</td>";
html += "<td>" + item.name + "</td>";
var statusColor = item.status === "启用" ? "green" : "red";
html +=
'<td class="text-center" style="color:' +
statusColor +
';">' +
item.status +
"</td>";
html += '<td class="text-center">' + item.duration + "</td>";
html += '<td class="text-center">' + item.interval + "</td>";
html += '<td class="text-center">' + item.startTime + "</td>";
html += '<td class="text-center">' + item.endTime + "</td>";
html += "</tr>";
大屏
2026-03-01 23:40:06 +08:00
});
GIS
2026-03-07 19:48:01 +08:00
tbody.innerHTML = html;
}
function initRecordTable() {
var tbody = document.getElementById("record-table-body");
if (!tbody) {
console.error("找不到 record-table-body 元素!");
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
if (!records || records.length === 0) {
tbody.innerHTML = '<tr><td colspan="7" class="text-center" style="color:#999; padding:20px;">暂无数据</td></tr>';
return;
大屏
2026-03-01 23:40:06 +08:00
}
GIS
2026-03-07 19:48:01 +08:00
var html = "";
records.forEach(function (item, index) {
var rowClass = index % 2 === 0 ? "" : "info";
html += '<tr class="' + rowClass + '">';
html +=
'<td class="text-center"><input type="checkbox" name="record-select"></td>';
html += '<td class="text-center">' + (index + 1) + "</td>";
html += "<td>" + item.taskName + "</td>";
var statusColor = "black";
if (item.status === "已完成") statusColor = "green";
else if (item.status === "未完成") statusColor = "red";
else if (item.status === "进行中") statusColor = "blue";
html +=
'<td class="text-center" style="color:' +
statusColor +
';">' +
item.status +
"</td>";
html += '<td class="text-center">' + item.planStartTime + "</td>";
html += '<td class="text-center">' + item.planEndTime + "</td>";
html += '<td class="text-center">' + item.actualTime + "</td>";
html += "</tr>";
});
tbody.innerHTML = html;
}
// initPlanTable() 和 initRecordTable() 已在 loadData() 完成后调用
// 不要在这里重复调用
// Drawer Logic
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 = "&gt;";
} else {
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
}
// Drawer Resizer Logic
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,
);
// Disable transition during drag
drawer.style.transition = "none";
document.documentElement.addEventListener("mousemove", doDrag, false);
document.documentElement.addEventListener("mouseup", stopDrag, false);
// Prevent text selection
e.preventDefault();
});
function doDrag(e) {
// Calculate new width (dragging left increases width)
var newWidth = startWidth + (startX - e.clientX);
// Min/Max width constraints
if (newWidth < 300) newWidth = 300;
if (newWidth > 1000) newWidth = 1000;
drawer.style.width = newWidth + "px";
}
function stopDrag(e) {
// Restore transition
drawer.style.transition = "transform 0.3s ease";
document.documentElement.removeEventListener(
"mousemove",
doDrag,
false,
);
document.documentElement.removeEventListener(
"mouseup",
stopDrag,
false,
);
}
function switchTab(tabId, navItem) {
console.log("switchTab 被调用, tabId:", tabId);
// Update Nav Items
var navItems = document.querySelectorAll(".drawer-nav-item");
navItems.forEach(function (item) {
item.classList.remove("active");
});
navItem.classList.add("active");
// Update Content Panes
var panes = document.querySelectorAll(".tab-pane");
panes.forEach(function (pane) {
pane.classList.remove("active");
});
document.getElementById(tabId).classList.add("active");
// 根据Tab ID确定数据类型
var type = "sewage";
if (tabId === "tab-pump") type = "pump";
else if (tabId === "tab-company") type = "company";
else if (tabId === "tab-well") type = "well";
else if (tabId === "tab-pipeline") type = "pipeline";
else if (tabId === "tab-plan") type = "plan";
else if (tabId === "tab-record") type = "record";
console.log("确定的数据类型 type:", type);
// 加载该Tab的数据，然后更新地图
loadTabData(type).then(function () {
console.log("loadTabData 完成, type:", type);
initMarkers(type);
});
}
大屏
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>
<!-- Well Edit Modal -->
GIS
2026-03-07 19:48:01 +08:00
<div
class="modal fade"
id="wellEditModal"
tabindex="-1"
role="dialog"
aria-labelledby="wellEditModalLabel"
data-backdrop="static"
>
<div class="modal-dialog modal-lg" role="document" style="width: 1000px">
大屏
2026-03-01 23:40:06 +08:00
<div class="modal-content">
GIS
2026-03-07 19:48:01 +08:00
<div
class="modal-header"
style="
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
padding: 15px;
"
>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true" style="color: #007bff; font-size: 24px"
>&times;</span
>
</button>
<h4
class="modal-title"
id="wellEditModalLabel"
style="
font-weight: bold;
border-left: 4px solid #007bff;
padding-left: 10px;
font-size: 16px;
"
>
管井编辑
</h4>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
<div class="modal-body" style="padding: 30px">
大屏
2026-03-01 23:40:06 +08:00
<form id="wellEditForm" class="form-horizontal">
GIS
2026-03-07 19:48:01 +08:00
<input type="hidden" id="well_id" name="id" />
<div class="container-fluid">
<!-- Row 1 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井名称:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_name"
name="name"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井编码:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_code"
name="code"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管道名称:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_pipe_name"
name="pipeName"
placeholder="请输入管道名称"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</div>
<!-- Row 2 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管道编码:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_pipe_code"
name="pipeCode"
placeholder="请输入管道编码"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井埋深:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_depth"
name="depth"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井性质:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_nature"
name="nature"
placeholder="请输入管井性质"
/>
</div>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井附属物:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_attachment"
name="attachment"
placeholder="请输入附属物"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>井底标高:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_bottom_elev"
name="bottomElev"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井经度:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_lng"
name="lng"
/>
</div>
</div>
</div>
</div>
<!-- Row 4 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井纬度:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_lat"
name="lat"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>所在路名:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_road"
name="road"
placeholder="请输入所在路名"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>所在乡镇:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_town"
name="town"
placeholder="请输入所在乡镇"
/>
</div>
</div>
</div>
</div>
<!-- Row 5 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>所属分区:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_zone"
name="zone"
placeholder="请输入所属分区"
/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>探测人员:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_surveyor"
name="surveyor"
placeholder="请输入探测人员"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井角度:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_angle"
name="angle"
placeholder="请输入角度"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</div>
<!-- Row 6 -->
<div class="row" style="margin-bottom: 20px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>经度校准:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_cal_lng"
name="calLng"
placeholder="请输入需要校准的经度值"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>纬度校准:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_cal_lat"
name="calLat"
placeholder="请输入需要校准的纬度值"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>管井规格:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_spec"
name="spec"
placeholder="请输入规格"
/>
</div>
大屏
2026-03-01 23:40:06 +08:00
</div>
GIS
2026-03-07 19:48:01 +08:00
</div>
</div>
<!-- Row 7 -->
<div class="row" style="margin-bottom: 0px">
<div class="col-md-4">
<div class="form-group" style="margin-bottom: 0">
<label
class="col-sm-4 control-label"
style="
text-align: right;
font-weight: normal;
color: #333;
"
>地面高程:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="well_ground_elev"
name="groundElev"
/>
</div>
大屏
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>
大屏
2026-03-01 23:40:06 +08:00
</form>
</div>
GIS
2026-03-07 19:48:01 +08:00
<div
class="modal-footer"
style="text-align: center; border-top: none; padding-bottom: 30px"
>
<button
type="button"
class="btn btn-primary"
style="
width: 150px;
height: 40px;
background-color: #0099ff;
border-color: #0099ff;
"
onclick="saveWellData()"
>
确定
</button>
<button
type="button"
class="btn btn-default"
style="
width: 150px;
height: 40px;
background-color: #aebdc6;
color: white;
border: none;
"
data-dismiss="modal"
>
取消
</button>
大屏
2026-03-01 23:40:06 +08:00
</div>
</div>
</div>
</div>
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