排污户大屏
This commit is contained in:
Rue Ji
@ -304,13 +304,13 @@ pageEncoding="UTF-8"%>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 全屏提示遮罩 -->
|
||||
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||
<!-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||
<div class="tip-content">
|
||||
<div class="icon">🖥️</div>
|
||||
<h2>点击进入全屏展示</h2>
|
||||
<p>按 ESC 键可退出全屏</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="screen-container">
|
||||
<div class="rank-module-container">
|
||||
<!-- Statistics -->
|
||||
@ -382,7 +382,7 @@ pageEncoding="UTF-8"%>
|
||||
<div id="chartInstant" class="chart-content"></div>
|
||||
</div>
|
||||
<div class="detail-chart-box">
|
||||
<div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
|
||||
<div class="chart-subtitle">累计流量历史曲线 (近14天)</div>
|
||||
<div id="chartCumulative" class="chart-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -476,7 +476,6 @@ pageEncoding="UTF-8"%>
|
||||
type: "POST",
|
||||
data: params || {},
|
||||
success: function (data) {
|
||||
console.log("API Response:", url, data);
|
||||
resolve(data);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
@ -489,7 +488,6 @@ pageEncoding="UTF-8"%>
|
||||
|
||||
// 加载企业数据（排污源）
|
||||
function loadEnterpriseData() {
|
||||
console.log("=== loadEnterpriseData 函数开始执行 ===");
|
||||
return apiRequest("/sparepart/sewage/getList.do", {
|
||||
page: 1,
|
||||
rows: 10,
|
||||
@ -498,8 +496,6 @@ pageEncoding="UTF-8"%>
|
||||
unitId: '0533JS',
|
||||
})
|
||||
.then(function (data) {
|
||||
console.log("=== loadEnterpriseData 接口返回数据:", data);
|
||||
|
||||
var dataList = data;
|
||||
if (typeof data === "string") {
|
||||
try {
|
||||
@ -578,6 +574,8 @@ pageEncoding="UTF-8"%>
|
||||
areaName: item.company ? item.company.name || "" : "",
|
||||
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
||||
permitNum: item.permitNum || "",
|
||||
// ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
ventNum: 'DEV067' || "", // 排放编号，用于流量接口
|
||||
trade: item.trade || "",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
||||
@ -586,8 +584,8 @@ pageEncoding="UTF-8"%>
|
||||
y: Math.random() * 80 + 10,
|
||||
lng: lng,
|
||||
lat: lat,
|
||||
instantHistory: generateHistoryData(72),
|
||||
cumulativeHistory: generateHistoryData(14),
|
||||
instantHistory: [], // 瞬时流量历史数据，后续通过接口获取
|
||||
cumulativeHistory: [], // 累计流量历史数据，后续通过接口获取
|
||||
};
|
||||
});
|
||||
|
||||
@ -606,6 +604,106 @@ pageEncoding="UTF-8"%>
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化日期时间 yyyy-MM-dd HH:mm
|
||||
function formatDateTime(date) {
|
||||
var year = date.getFullYear();
|
||||
var month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(date.getDate()).padStart(2, '0');
|
||||
var hours = String(date.getHours()).padStart(2, '0');
|
||||
var minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
||||
}
|
||||
|
||||
// 加载流量数据
|
||||
// type: 'instant' 瞬时流量(近3天), 'cumulative' 累计流量(近14天)
|
||||
function loadFlowData(ventNum, type) {
|
||||
if (!ventNum) {
|
||||
console.warn("[loadFlowData] ventNum 为空，无法加载流量数据");
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
|
||||
var mpcode, days;
|
||||
if (type === 'instant') {
|
||||
mpcode = ventNum + '_LJLL'; // 瞬时流量
|
||||
days = 3;
|
||||
} else {
|
||||
mpcode = ventNum + '_LJLL'; // 累计流量
|
||||
days = 14;
|
||||
}
|
||||
|
||||
// 计算日期范围
|
||||
var now = new Date();
|
||||
var edt = formatDateTime(now);
|
||||
var startDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
|
||||
var sdt = formatDateTime(startDate);
|
||||
|
||||
console.log("[loadFlowData] mpcode:", mpcode, "sdt:", sdt, "edt:", edt, "type:", type);
|
||||
|
||||
return apiRequest("/data/getDetailData.do", {
|
||||
mpcode: mpcode,
|
||||
sdt: sdt,
|
||||
edt: edt
|
||||
})
|
||||
.then(function (data) {
|
||||
console.log("[loadFlowData] 接口返回数据:", mpcode, data);
|
||||
|
||||
var dataList = data;
|
||||
if (typeof data === 'string') {
|
||||
try {
|
||||
dataList = JSON.parse(data);
|
||||
} catch (e) {
|
||||
console.error("[loadFlowData] 解析数据失败:", e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// 提取数值数组
|
||||
var values = [];
|
||||
if (Array.isArray(dataList)) {
|
||||
dataList.forEach(function (item) {
|
||||
// 假设返回数据格式为 [{time: xxx, value: xxx}, ...]
|
||||
// 或者 [value1, value2, ...]
|
||||
if (item.value !== undefined) {
|
||||
values.push(parseFloat(item.value) || 0);
|
||||
} else if (typeof item === 'number') {
|
||||
values.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log("[loadFlowData] 解析后数据条数:", values.length);
|
||||
return values;
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error("[loadFlowData] 请求失败:", mpcode, err);
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
// 并行加载企业的瞬时和累计流量数据
|
||||
function loadEnterpriseFlowData(enterprise) {
|
||||
console.log("[loadEnterpriseFlowData] 加载企业流量数据:", enterprise.name, "ventNum:", enterprise.ventNum);
|
||||
|
||||
if (!enterprise.ventNum) {
|
||||
console.warn("[loadEnterpriseFlowData] 企业 ventNum 为空，使用模拟数据");
|
||||
enterprise.instantHistory = generateHistoryData(72); // 近3天小时数据
|
||||
enterprise.cumulativeHistory = generateHistoryData(14); // 近14天数据
|
||||
return Promise.resolve(enterprise);
|
||||
}
|
||||
|
||||
return Promise.all([
|
||||
loadFlowData(enterprise.ventNum, 'instant'),
|
||||
loadFlowData(enterprise.ventNum, 'cumulative')
|
||||
])
|
||||
.then(function (results) {
|
||||
enterprise.instantHistory = results[0].length > 0 ? results[0] : generateHistoryData(72); // 近3天小时数据
|
||||
enterprise.cumulativeHistory = results[1].length > 0 ? results[1] : generateHistoryData(14); // 近14天数据
|
||||
console.log("[loadEnterpriseFlowData] 流量数据加载完成:", enterprise.name,
|
||||
"瞬时:", enterprise.instantHistory.length, "累计:", enterprise.cumulativeHistory.length);
|
||||
return enterprise;
|
||||
});
|
||||
}
|
||||
|
||||
function initData() {
|
||||
// Init Charts first
|
||||
myChartInstant = echarts.init(document.getElementById("chartInstant"));
|
||||
@ -632,7 +730,7 @@ pageEncoding="UTF-8"%>
|
||||
allEnterprises = enterprises;
|
||||
|
||||
// 渲染地图点位
|
||||
renderMapPoints();
|
||||
// renderMapPoints();
|
||||
|
||||
// Start Loops - 每10秒刷新排行数据
|
||||
startDataSimulation();
|
||||
@ -1067,11 +1165,12 @@ pageEncoding="UTF-8"%>
|
||||
id: item.id,
|
||||
name: item.name || "企业-" + (idx + 1),
|
||||
value: dischargeValue,
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
sewageType: item.trade || "-",
|
||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
instantHistory: generateHistoryData(72),
|
||||
cumulativeHistory: generateHistoryData(14),
|
||||
instantHistory: [],
|
||||
cumulativeHistory: [],
|
||||
};
|
||||
});
|
||||
|
||||
@ -1082,11 +1181,12 @@ pageEncoding="UTF-8"%>
|
||||
id: item.id,
|
||||
name: item.name || "企业-" + (idx + 1),
|
||||
value: dischargeValue,
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
sewageType: item.trade || "-",
|
||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
instantHistory: generateHistoryData(72),
|
||||
cumulativeHistory: generateHistoryData(14),
|
||||
instantHistory: [],
|
||||
cumulativeHistory: [],
|
||||
};
|
||||
});
|
||||
|
||||
@ -1113,7 +1213,7 @@ pageEncoding="UTF-8"%>
|
||||
setInterval(function () {
|
||||
console.log("[定时刷新] 开始刷新排行数据...");
|
||||
loadRankingData();
|
||||
}, 10000);
|
||||
}, 100000);
|
||||
}
|
||||
|
||||
function startRotation() {
|
||||
@ -1152,16 +1252,38 @@ pageEncoding="UTF-8"%>
|
||||
$("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天"));
|
||||
$("#connectionStatus").text(enterprise.connectionStatus || "-");
|
||||
|
||||
renderDetailCharts(enterprise);
|
||||
// 加载流量数据并渲染图表
|
||||
loadEnterpriseFlowData(enterprise).then(function (ent) {
|
||||
renderDetailCharts(ent);
|
||||
});
|
||||
}
|
||||
|
||||
function renderDetailCharts(enterprise) {
|
||||
// Generate X labels
|
||||
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.length, "累计数据:", enterprise.cumulativeHistory?.length);
|
||||
|
||||
// 根据实际数据长度动态生成 X 轴标签
|
||||
var instantData = enterprise.instantHistory || [];
|
||||
var cumulativeData = enterprise.cumulativeHistory || [];
|
||||
|
||||
// 瞬时流量 X 轴标签（按小时）
|
||||
var hours = [];
|
||||
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
||||
for (var i = 0; i < instantData.length; i++) {
|
||||
hours.push(i + "h");
|
||||
}
|
||||
// 如果没有数据，默认显示 3 天（近3天小时数据）
|
||||
if (hours.length === 0) {
|
||||
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
||||
}
|
||||
|
||||
// 累计流量 X 轴标签（按天）
|
||||
var days = [];
|
||||
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
||||
for (var j = 0; j < cumulativeData.length; j++) {
|
||||
days.push("D" + (j + 1));
|
||||
}
|
||||
// 如果没有数据，默认显示 14 天
|
||||
if (days.length === 0) {
|
||||
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
||||
}
|
||||
|
||||
// Instant Chart (Line)
|
||||
var optionInstant = {
|
||||
@ -1201,7 +1323,7 @@ pageEncoding="UTF-8"%>
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: enterprise.instantHistory,
|
||||
data: instantData.length > 0 ? instantData : generateHistoryData(72),
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1234,7 +1356,7 @@ pageEncoding="UTF-8"%>
|
||||
itemStyle: {
|
||||
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
||||
},
|
||||
data: enterprise.cumulativeHistory,
|
||||
data: cumulativeData.length > 0 ? cumulativeData : generateHistoryData(14),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
186
src/main/webapp/jsp/z_bigScreen/geo.html
Normal file
186
src/main/webapp/jsp/z_bigScreen/geo.html
Normal file
@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>天地图-金山卫雨污水管可视化（GeoJSON版）</title>
|
||||
<!-- 引入天地图4.0 API（替换成你的Key） -->
|
||||
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"></script>
|
||||
<style>
|
||||
/* 地图容器 */
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* 图例样式 */
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #ffffff;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
.legend-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.legend-color {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- 图例 -->
|
||||
<div class="legend">
|
||||
<div class="legend-title">雨污水管图例</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color" style="background: #8B4513; width: 6px;"></span>DN300 污水管
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color" style="background: #8B4513; width: 8px;"></span>DN500 污水管
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color" style="background: #1E90FF; width: 5px;"></span>DN200 雨水管
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color" style="background: #1E90FF; width: 7px;"></span>DN400 雨水管
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===================== 基础配置 =====================
|
||||
// 天地图中心点（金山卫区域）
|
||||
const MAP_CENTER = [121.357888, 30.813165];
|
||||
// 地图缩放级别（16为厂区级，可调整）
|
||||
const MAP_ZOOM = 16;
|
||||
// GeoJSON文件路径（本地/服务器路径，重点！）
|
||||
const GEOJSON_PATH = "pipeline_data.geojson"; // 替换为你的GeoJSON文件路径
|
||||
|
||||
// ===================== 初始化地图 =====================
|
||||
// 创建地图实例
|
||||
var map = new T.Map('map');
|
||||
// 设置中心点和缩放级别
|
||||
map.centerAndZoom(new T.LngLat(MAP_CENTER[0], MAP_CENTER[1]), MAP_ZOOM);
|
||||
// 开启鼠标滚轮缩放
|
||||
map.enableScrollWheelZoom(true);
|
||||
// 添加天地图底图（矢量+注记）
|
||||
var vecLayer = new T.TileLayer("vec_w", {minZoom: 1, maxZoom: 18});
|
||||
var cvaLayer = new T.TileLayer("cva_w", {minZoom: 1, maxZoom: 18});
|
||||
map.addLayer(vecLayer);
|
||||
map.addLayer(cvaLayer);
|
||||
|
||||
// ===================== 加载GeoJSON并渲染 =====================
|
||||
// 加载本地GeoJSON文件
|
||||
fetch(GEOJSON_PATH)
|
||||
.then(response => {
|
||||
// 检查文件加载是否成功
|
||||
if (!response.ok) {
|
||||
throw new Error(`GeoJSON文件加载失败：${response.status} ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(geoJsonData => {
|
||||
console.log("✅ GeoJSON数据加载成功", geoJsonData);
|
||||
|
||||
// 创建GeoJSON图层
|
||||
var geoJsonLayer = new T.GeoJSONLayer(geoJsonData, {
|
||||
// 自定义管道样式
|
||||
style: function(feature) {
|
||||
// 获取管道属性（根据你的GeoJSON字段调整）
|
||||
var layerName = (feature.properties.LAYER || feature.properties.layer || "").toLowerCase();
|
||||
var pipeSize = feature.properties.SIZE || feature.properties.pipe_size || "DN300";
|
||||
|
||||
// 按类型设置颜色：污水管-棕色，雨水管-蓝色
|
||||
var color = "#8B4513"; // 默认污水管颜色
|
||||
if (layerName.includes("雨水") || layerName.includes("rain")) {
|
||||
color = "#1E90FF"; // 雨水管颜色
|
||||
}
|
||||
|
||||
// 按管径设置线宽
|
||||
var weight = 6; // 默认DN300线宽
|
||||
switch (pipeSize) {
|
||||
case "DN200": weight = 5; break;
|
||||
case "DN400": weight = 7; break;
|
||||
case "DN500": weight = 8; break;
|
||||
default: weight = 6;
|
||||
}
|
||||
|
||||
return {
|
||||
color: color, // 管道颜色
|
||||
weight: weight, // 线宽（对应管径）
|
||||
opacity: 0.8, // 透明度
|
||||
lineJoin: "round" // 折线拐角圆角
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 将GeoJSON图层添加到地图
|
||||
map.addOverLay(geoJsonLayer);
|
||||
|
||||
// ===================== 交互功能 =====================
|
||||
// 1. 点击管道显示详情弹窗
|
||||
geoJsonLayer.addEventListener("click", function(e) {
|
||||
// 获取管道属性
|
||||
var props = e.feature.properties;
|
||||
var layerName = props.LAYER || props.layer || "未知图层";
|
||||
var pipeSize = props.SIZE || props.pipe_size || "未知管径";
|
||||
var pipeId = props.pipe_id || props.id || "未知ID";
|
||||
var coord = `${e.lnglat.getLng().toFixed(6)}, ${e.lnglat.getLat().toFixed(6)}`;
|
||||
|
||||
// 创建弹窗
|
||||
var infoWindow = new T.InfoWindow();
|
||||
infoWindow.setContent(`
|
||||
<div style="padding: 10px; min-width: 200px; font-size: 14px;">
|
||||
<strong style="font-size: 15px;">管道详情</strong><hr style="margin: 5px 0; border: 0; border-top: 1px solid #eee;">
|
||||
<div>管道ID：${pipeId}</div>
|
||||
<div>图层名称：${layerName}</div>
|
||||
<div>管径规格：${pipeSize}</div>
|
||||
<div>坐标：${coord}</div>
|
||||
<div>类型：${layerName.toLowerCase().includes("雨水") ? "雨水管" : "污水管"}</div>
|
||||
</div>
|
||||
`);
|
||||
// 打开弹窗
|
||||
infoWindow.openOnMap(e.lnglat);
|
||||
});
|
||||
|
||||
// 2. 鼠标悬浮管道高亮
|
||||
geoJsonLayer.addEventListener("mouseover", function(e) {
|
||||
// 保存原始样式
|
||||
e.target.originalStyle = e.target.getStyle();
|
||||
// 设置高亮样式
|
||||
e.target.setStyle({
|
||||
opacity: 1,
|
||||
weight: e.target.originalStyle.weight + 1
|
||||
});
|
||||
});
|
||||
// 鼠标离开恢复原始样式
|
||||
geoJsonLayer.addEventListener("mouseout", function(e) {
|
||||
if (e.target.originalStyle) {
|
||||
e.target.setStyle(e.target.originalStyle);
|
||||
}
|
||||
});
|
||||
|
||||
console.log("✅ 管道图层渲染完成");
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("❌ GeoJSON加载/渲染失败：", error);
|
||||
alert(`加载失败：${error.message}\n请检查GeoJSON文件路径是否正确！`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2147
src/main/webapp/jsp/z_bigScreen/pipeline_data.geojson
Normal file
2147
src/main/webapp/jsp/z_bigScreen/pipeline_data.geojson
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user