大屏更新、源头管理
This commit is contained in:
Rue Ji
@ -7,9 +7,9 @@
|
||||
<title>源头GIS管理</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<!-- DateRangePicker CSS -->
|
||||
<link rel="stylesheet" href="../../plugins/bootstrap-daterangepicker/daterangepicker.css">
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
@ -198,25 +198,25 @@
|
||||
</div>
|
||||
<div class="drawer-sidebar">
|
||||
<div class="drawer-nav-item active" onclick="switchTab('tab-sewage', this)">
|
||||
<img src="../../IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
|
||||
<img src="../../IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
|
||||
<img src="../../IMG/icon_qy.png" class="drawer-nav-icon">企业
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_qy.png" class="drawer-nav-icon">企业
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
|
||||
<img src="../../IMG/icon_gd.png" class="drawer-nav-icon">管道
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_gd.png" class="drawer-nav-icon">管道
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
|
||||
<img src="../../IMG/icon_gj.png" class="drawer-nav-icon">管井
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_gj.png" class="drawer-nav-icon">管井
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
|
||||
<img src="../../IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
||||
</div>
|
||||
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
|
||||
<img src="../../IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
||||
<img src="<%=request.getContextPath()%>/IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-content">
|
||||
@ -342,32 +342,18 @@
|
||||
|
||||
<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="company-time-start" value="2026-01-09 00:00">
|
||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
||||
</div>
|
||||
<span style="margin: 0 5px;">~</span>
|
||||
<div class="input-group date">
|
||||
<input type="text" class="form-control input-sm" id="company-time-end" value="2026-02-09 17:15">
|
||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="query-form-group">
|
||||
<label>企业名称</label>
|
||||
<label>企业名称/合同编号</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="请输入企业名称">
|
||||
<input type="text" class="form-control" id="company-search-name" placeholder="请输入企业名称或合同编号">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
||||
<button class="btn btn-primary" type="button" onclick="searchCompany()"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label><input type="checkbox" checked> 显示标注</label>
|
||||
<label><input type="checkbox" checked id="company-show-label"> 显示标注</label>
|
||||
</div>
|
||||
|
||||
<div style="max-height: 500px; overflow-y: auto;">
|
||||
@ -375,13 +361,16 @@
|
||||
<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>
|
||||
<th>所属泵站</th>
|
||||
<th>排污许可证编号</th>
|
||||
<th>所属行业</th>
|
||||
<th>实际日排量</th>
|
||||
<th>已关联点位</th>
|
||||
<th>已录入数据</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="company-table-body">
|
||||
@ -636,8 +625,8 @@
|
||||
<div id="map-container"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Tianditu Map API -->
|
||||
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
||||
@ -735,7 +724,30 @@
|
||||
var records = [];
|
||||
var markers = [];
|
||||
|
||||
// Mock API Function
|
||||
// 获取上下文路径
|
||||
var contextPath = '<%=request.getContextPath()%>';
|
||||
|
||||
// 真实API请求函数
|
||||
function apiRequest(url, params) {
|
||||
console.log('API Request:', contextPath + url, params);
|
||||
return new Promise(function(resolve, reject) {
|
||||
$.ajax({
|
||||
url: contextPath + url,
|
||||
type: 'POST',
|
||||
data: params || {},
|
||||
success: function(data) {
|
||||
console.log('API Response:', url, data);
|
||||
resolve(data);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('API Request Error:', url, error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Mock API Function (保留用于没有真实接口的数据)
|
||||
function mockApiRequest(url, params) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
setTimeout(function() {
|
||||
@ -826,15 +838,15 @@
|
||||
resolve(wls);
|
||||
} else if (url === '/api/plan/list') {
|
||||
resolve([
|
||||
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", start: "2026-02-01", end: "2026-12-31" },
|
||||
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", start: "2026-02-01", end: "2026-12-31" },
|
||||
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", start: "2026-01-01", end: "2026-03-31" }
|
||||
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", startTime: "2026-01-01", endTime: "2026-03-31" }
|
||||
]);
|
||||
} else if (url === '/api/record/list') {
|
||||
resolve([
|
||||
{ id: 1, name: "金山一车间周检", status: "已完成", planStart: "2026-02-03 09:00", planEnd: "2026-02-03 11:00", actualEnd: "2026-02-03 10:45" },
|
||||
{ id: 2, name: "泵站日常巡检", status: "已完成", planStart: "2026-02-08 08:00", planEnd: "2026-02-08 12:00", actualEnd: "2026-02-08 11:30" },
|
||||
{ id: 3, name: "泵站日常巡检", status: "进行中", planStart: "2026-02-11 08:00", planEnd: "2026-02-11 12:00", actualEnd: "-" }
|
||||
{ id: 1, taskName: "金山一车间周检", status: "已完成", planStartTime: "2026-02-03 09:00", planEndTime: "2026-02-03 11:00", actualTime: "2026-02-03 10:45" },
|
||||
{ id: 2, taskName: "泵站日常巡检", status: "已完成", planStartTime: "2026-02-08 08:00", planEndTime: "2026-02-08 12:00", actualTime: "2026-02-08 11:30" },
|
||||
{ id: 3, taskName: "泵站日常巡检", status: "进行中", planStartTime: "2026-02-11 08:00", planEndTime: "2026-02-11 12:00", actualTime: "-" }
|
||||
]);
|
||||
} else {
|
||||
reject("Unknown API Endpoint");
|
||||
@ -843,44 +855,220 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize Data
|
||||
// 加载企业数据（排污源）
|
||||
// 接口字段参考 Sewage 实体类和 sewageList.jsp
|
||||
function loadCompanyData() {
|
||||
return apiRequest('/sparepart/sewage/getList.do', {
|
||||
page: 1,
|
||||
rows: 1000,
|
||||
sort: 'contract_order',
|
||||
order: 'asc'
|
||||
}).then(function(data) {
|
||||
// 接口返回格式: {total: xxx, rows: [...]}
|
||||
var list = data.rows || [];
|
||||
console.log('企业接口返回数据条数:', list.length);
|
||||
companies = list.map(function(items) {
|
||||
const item = items.company;
|
||||
// 解析经纬度 (格式: "经度" 或 "经度,纬度")
|
||||
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]);
|
||||
}
|
||||
}
|
||||
// 如果经纬度不完整，从 company 对象获取
|
||||
if ((!lng || !lat) && item.company) {
|
||||
lng = lng || item.company.longitude;
|
||||
lat = lat || item.company.latitude;
|
||||
}
|
||||
return {
|
||||
id: item.id,
|
||||
// 合同编号
|
||||
contractNumber: item.contractNumber || '',
|
||||
// 公司名称
|
||||
name: item.name || '',
|
||||
// 地址
|
||||
address: item.address || '',
|
||||
// 所属区域 (company.name)
|
||||
areaName: item.company ? (item.company.name || '') : '',
|
||||
// 所属泵站ID
|
||||
processSectionId: item.processSectionId || '',
|
||||
// 所属泵站名称 (processSection为null时显示空)
|
||||
processSectionName: item.processSection ? (item.processSection.name || '') : '',
|
||||
// 排污许可证编号
|
||||
permitNum: item.permitNum || '',
|
||||
// 排放编号
|
||||
ventNum: item.ventNum || '',
|
||||
// 所属行业
|
||||
trade: item.trade || '',
|
||||
// 实际日排量(吨/天)
|
||||
displacement: item.displacement ? (item.displacement + '吨/天') : '-',
|
||||
// 统一社会信用代码
|
||||
societyNumber: item.societyNumber || '',
|
||||
// 管网所有权单位
|
||||
city: item.city || '',
|
||||
// 联系人
|
||||
username: item.username || '',
|
||||
// 电话
|
||||
phone: item.phone || '',
|
||||
// 经纬度
|
||||
longitudeLatitude: item.longitudeLatitude || '',
|
||||
// 已关联点位
|
||||
point: item._point ? '是' : '否',
|
||||
// 已录入数据
|
||||
input: item._input ? '是' : '否',
|
||||
// 地图坐标
|
||||
lng: lng,
|
||||
lat: lat,
|
||||
// 保留原始数据
|
||||
_raw: item
|
||||
};
|
||||
});
|
||||
return companies;
|
||||
}).catch(function(err) {
|
||||
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.320000 + index * 0.01,
|
||||
lat: 30.760000 - index * 0.005
|
||||
};
|
||||
});
|
||||
console.log('泵站数据处理后:', pumpStations);
|
||||
return pumpStations;
|
||||
}).catch(function(err) {
|
||||
console.error('加载泵站数据失败:', err);
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize Data - 只加载默认Tab(污水厂)的数据
|
||||
function loadData() {
|
||||
Promise.all([
|
||||
mockApiRequest('/api/sewage/list'),
|
||||
mockApiRequest('/api/pump/list'),
|
||||
mockApiRequest('/api/company/list'),
|
||||
mockApiRequest('/api/pipeline/list'),
|
||||
mockApiRequest('/api/well/list'),
|
||||
mockApiRequest('/api/plan/list'),
|
||||
mockApiRequest('/api/record/list'),
|
||||
]).then(function(results) {
|
||||
sources = results[0];
|
||||
pumpStations = results[1];
|
||||
companies = results[2];
|
||||
pipelines = results[3];
|
||||
wells = results[4];
|
||||
plans = results[5];
|
||||
records = results[6];
|
||||
|
||||
// Initialize View with default tab (Sewage)
|
||||
// 初始加载污水厂数据
|
||||
mockApiRequest('/api/sewage/list').then(function(data) {
|
||||
sources = data;
|
||||
initSewageTable();
|
||||
initMarkers('sewage');
|
||||
|
||||
// Initialize other tables but they are hidden
|
||||
initPumpTable();
|
||||
initCompanyTable();
|
||||
initPipelineTable();
|
||||
initWellTable();
|
||||
initPlanTable();
|
||||
initRecordTable();
|
||||
|
||||
}).catch(function(err) {
|
||||
console.error("Failed to load data:", err);
|
||||
alert("数据加载失败，请重试");
|
||||
console.error("Failed to load sewage data:", err);
|
||||
});
|
||||
}
|
||||
|
||||
// Call loadData instead of inline data definitions
|
||||
// 数据加载状态标记
|
||||
var dataLoaded = {
|
||||
sewage: true, // 初始已加载
|
||||
pump: false,
|
||||
company: false,
|
||||
pipeline: false,
|
||||
well: false,
|
||||
plan: false,
|
||||
record: false
|
||||
};
|
||||
|
||||
// 按Tab类型加载数据
|
||||
function loadTabData(type) {
|
||||
// 如果数据已加载，直接返回
|
||||
if (dataLoaded[type]) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
var loadPromise;
|
||||
|
||||
switch(type) {
|
||||
case 'pump':
|
||||
loadPromise = loadPumpData().then(function(data) {
|
||||
console.log('loadTabData pump 接收数据:', data);
|
||||
pumpStations = data;
|
||||
console.log('pumpStations 赋值后:', pumpStations);
|
||||
initPumpTable();
|
||||
dataLoaded.pump = true;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'company':
|
||||
loadPromise = loadCompanyData().then(function(data) {
|
||||
console.log('loadTabData company 接收数据:', data);
|
||||
companies = data;
|
||||
console.log('companies 赋值后:', companies);
|
||||
initCompanyTable();
|
||||
dataLoaded.company = true;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'pipeline':
|
||||
loadPromise = mockApiRequest('/api/pipeline/list').then(function(data) {
|
||||
pipelines = data;
|
||||
initPipelineTable();
|
||||
dataLoaded.pipeline = true;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'well':
|
||||
loadPromise = mockApiRequest('/api/well/list').then(function(data) {
|
||||
wells = data;
|
||||
initWellTable();
|
||||
dataLoaded.well = true;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'plan':
|
||||
loadPromise = mockApiRequest('/api/plan/list').then(function(data) {
|
||||
plans = data;
|
||||
initPlanTable();
|
||||
dataLoaded.plan = true;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'record':
|
||||
loadPromise = mockApiRequest('/api/record/list').then(function(data) {
|
||||
records = data;
|
||||
initRecordTable();
|
||||
dataLoaded.record = true;
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return loadPromise.catch(function(err) {
|
||||
console.error('加载' + type + '数据失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// Call loadData for initial tab
|
||||
loadData();
|
||||
|
||||
function initMarkers(dataType) {
|
||||
@ -954,35 +1142,35 @@
|
||||
console.log('currentType', currentType)
|
||||
if (currentType === 'well') {
|
||||
var icon = new T.Icon({
|
||||
iconUrl: "../../IMG/wsgj.png",
|
||||
iconUrl: "<%=request.getContextPath()%>/IMG/wsgj.png",
|
||||
iconSize: new T.Point(10, 10),
|
||||
iconAnchor: new T.Point(15, 15)
|
||||
});
|
||||
marker = new T.Marker(point, {icon: icon});
|
||||
} else if (currentType === 'pipeline-node') {
|
||||
var icon = new T.Icon({
|
||||
iconUrl: "../../IMG/icon_gd.png",
|
||||
iconUrl: "<%=request.getContextPath()%>/IMG/icon_gd.png",
|
||||
iconSize: new T.Point(18, 18),
|
||||
iconAnchor: new T.Point(15, 15)
|
||||
});
|
||||
marker = new T.Marker(point, {icon: icon});
|
||||
} else if (currentType === 'pump') {
|
||||
var icon = new T.Icon({
|
||||
iconUrl: "../../IMG/icon_bz.png",
|
||||
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: "../../IMG/icon_qy.png",
|
||||
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});
|
||||
} else if (currentType === 'sewage') {
|
||||
var icon = new T.Icon({
|
||||
iconUrl: "../../IMG/icon_wsc.png",
|
||||
iconUrl: "<%=request.getContextPath()%>/IMG/icon_wsc.png",
|
||||
iconSize: new T.Point(18, 18),
|
||||
iconAnchor: new T.Point(15, 15)
|
||||
});
|
||||
@ -1151,27 +1339,32 @@
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
var html = '';
|
||||
if (!pumpStations || pumpStations.length === 0) {
|
||||
console.warn('pumpStations 为空或长度为0');
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
pumpStations.forEach(function(station, index) {
|
||||
var rowClass = index % 2 === 0 ? '' : 'active'; // stripe effect
|
||||
// Add soft blue background for some rows as in screenshot
|
||||
if (index % 2 !== 0) {
|
||||
// bootstrap 'active' class adds a grey background, let's use custom style if needed,
|
||||
// but 'active' or 'info' class is standard bootstrap.
|
||||
// The screenshot shows light blue stripes.
|
||||
rowClass = 'info';
|
||||
}
|
||||
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||
|
||||
html += '<tr class="' + rowClass + '">';
|
||||
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 += '<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;
|
||||
}
|
||||
|
||||
@ -1222,29 +1415,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
initMarkers();
|
||||
initPumpTable();
|
||||
initSewageTable();
|
||||
// initMarkers() 和表格初始化在 loadData() 完成后调用
|
||||
// 不要在这里单独调用，否则会使用空数据
|
||||
|
||||
// Mock Data for Companies
|
||||
var companies = [
|
||||
{ id: 1, code: "JSALQY01", name: "福达（上海）食品有限公司", address: "上海市金山区工业区金...", sewageNo: "JS2C", dischargeNo: "AL9654501", discharge: "717m³", point: "AL9654501_CSLL", lng: 121.320000, lat: 30.730000 },
|
||||
{ id: 2, code: "JSALQY02", name: "上海嘉乐股份有限公司", address: "上海市金山区亭林镇...", sewageNo: "MM_AL11_C", dischargeNo: "AL9654502", discharge: "1010m³", point: "AL9654502_CSLL", lng: 121.330000, lat: 30.740000 },
|
||||
];
|
||||
|
||||
// Mock Data for Pipelines
|
||||
var pipelines = [
|
||||
{ id: 1, name: "", diameter: "0", length: "0", startDepth: "0", endDepth: "0", startElev: "0", endElev: "0", invertElev: "0", path: [[121.3400, 30.7400], [121.3410, 30.7410]] },
|
||||
{ id: 2, name: "", diameter: "1600", length: "72.0223546", startDepth: "0.149", endDepth: "0.251", startElev: "5.649", endElev: "5.451", invertElev: "0.2", path: [[121.3410, 30.7410], [121.3430, 30.7430]] },
|
||||
{ id: 3, name: "", diameter: "200", length: "11.1513874", startDepth: "0.251", endDepth: "3.035", startElev: "5.451", endElev: "5.335", invertElev: "1.643", path: [[121.3430, 30.7430], [121.3440, 30.7440]] },
|
||||
];
|
||||
|
||||
// Mock Data for Wells
|
||||
var wells = [
|
||||
{ id: 1, name: "BWS1", depth: "8.15", bottomElev: "-3.963", groundElev: "0", spec: "", lng: "3420414.23109246", lat: "340424.84811152", mapLng: "121.3410", mapLat: "30.7410" },
|
||||
{ id: 2, name: "BWS2", depth: "8.15", bottomElev: "-3.619", groundElev: "0", spec: "", lng: "3420475.77946245", lat: "340408.18952986", mapLng: "121.3420", mapLat: "30.7420" },
|
||||
{ id: 3, name: "BWS3", depth: "7.15", bottomElev: "-2.414", groundElev: "0", spec: "", lng: "3420467.51573462", lat: "340548.72770082", mapLng: "121.3430", mapLat: "30.7430" },
|
||||
];
|
||||
// 数据定义 (pipelines 和 wells) 已在 loadData() 中加载
|
||||
// 如果需要默认数据，请在 loadData() 的 mockApiRequest 中配置
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 坐标转换处理
|
||||
@ -1273,26 +1448,49 @@
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
var html = '';
|
||||
if (!companies || companies.length === 0) {
|
||||
console.warn('companies 为空或长度为0');
|
||||
tbody.innerHTML = '<tr><td colspan="11" class="text-center">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
companies.forEach(function(item, index) {
|
||||
var rowClass = index % 2 === 0 ? '' : 'active';
|
||||
if (index % 2 !== 0) rowClass = 'info';
|
||||
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||
|
||||
html += '<tr class="' + rowClass + '">';
|
||||
html += '<tr class="' + rowClass + '" onclick="selectCompany(' + index + ')" style="cursor: pointer;">';
|
||||
html += '<td class="text-center">' + (index + 1) + '</td>';
|
||||
html += '<td>' + item.code + '</td>';
|
||||
html += '<td>' + item.name + '</td>';
|
||||
html += '<td>' + item.address + '</td>';
|
||||
html += '<td class="text-center">' + item.sewageNo + '</td>';
|
||||
html += '<td class="text-center">' + item.dischargeNo + '</td>';
|
||||
html += '<td class="text-right">' + item.discharge + '</td>';
|
||||
html += '<td>' + item.point + '</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 selectCompany(index) {
|
||||
var item = companies[index];
|
||||
if (item && item.lng && item.lat) {
|
||||
map.panTo(new T.LngLat(item.lng, item.lat));
|
||||
map.setZoom(15);
|
||||
}
|
||||
}
|
||||
|
||||
function initPipelineTable() {
|
||||
var tbody = document.getElementById('pipeline-table-body');
|
||||
var html = '';
|
||||
@ -1351,25 +1549,11 @@
|
||||
tbody.innerHTML = html;
|
||||
}
|
||||
|
||||
initCompanyTable();
|
||||
initPipelineTable();
|
||||
initWellTable();
|
||||
// initCompanyTable(), initPipelineTable(), initWellTable() 已在 loadData() 完成后调用
|
||||
// 不要在这里重复调用
|
||||
|
||||
// Mock Data for Plans
|
||||
var plans = [
|
||||
{ id: 1, name: "金山一车间日常巡检", status: "启用", duration: "2小时", interval: "1天", startTime: "2026-01-01", endTime: "2026-12-31" },
|
||||
{ id: 2, name: "泵站设备专项检查", status: "启用", duration: "4小时", interval: "7天", startTime: "2026-02-01", endTime: "2026-06-30" },
|
||||
{ id: 3, name: "管网防汛排查", status: "停用", duration: "8小时", interval: "30天", startTime: "2026-05-01", endTime: "2026-09-30" },
|
||||
{ id: 4, name: "排污口突击检查", status: "启用", duration: "3小时", interval: "15天", startTime: "2026-03-15", endTime: "2026-09-15" }
|
||||
];
|
||||
|
||||
// Mock Data for Records
|
||||
var records = [
|
||||
{ id: 1, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "11:00", actualTime: "10:45" },
|
||||
{ id: 2, taskName: "泵站设备专项检查", status: "未完成", planStartTime: "14:00", planEndTime: "17:30", actualTime: "--" },
|
||||
{ id: 3, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "10:50", actualTime: "10:30" },
|
||||
{ id: 4, taskName: "管网防汛排查", status: "进行中", planStartTime: "10:00", planEndTime: "16:00", actualTime: "--" }
|
||||
];
|
||||
// plans 和 records 数据已在 loadData() 中通过 mockApiRequest 加载
|
||||
// 不要在这里重复定义，否则会覆盖已加载的数据
|
||||
|
||||
function initPlanTable() {
|
||||
var tbody = document.getElementById('plan-table-body');
|
||||
@ -1419,8 +1603,8 @@
|
||||
tbody.innerHTML = html;
|
||||
}
|
||||
|
||||
initPlanTable();
|
||||
initRecordTable();
|
||||
// initPlanTable() 和 initRecordTable() 已在 loadData() 完成后调用
|
||||
// 不要在这里重复调用
|
||||
|
||||
// Drawer Logic
|
||||
function toggleDrawer() {
|
||||
@ -1474,6 +1658,7 @@
|
||||
}
|
||||
|
||||
function switchTab(tabId, navItem) {
|
||||
console.log('switchTab 被调用, tabId:', tabId);
|
||||
// Update Nav Items
|
||||
var navItems = document.querySelectorAll('.drawer-nav-item');
|
||||
navItems.forEach(function(item) {
|
||||
@ -1488,29 +1673,37 @@
|
||||
});
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
|
||||
// Update Map Markers based on Tab ID
|
||||
// 根据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);
|
||||
|
||||
initMarkers(type);
|
||||
// 加载该Tab的数据，然后更新地图
|
||||
loadTabData(type).then(function() {
|
||||
console.log('loadTabData 完成, type:', type);
|
||||
initMarkers(type);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<!-- jQuery -->
|
||||
<script src="../../node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<!-- Moment.js -->
|
||||
<script src="../../plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
||||
<!-- DateRangePicker -->
|
||||
<script src="../../plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Initialize DateRangePicker for time range inputs
|
||||
$('#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end, #company-time-start, #company-time-end').daterangepicker({
|
||||
// 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,
|
||||
|
||||
Reference in New Issue
Block a user