管道展示
This commit is contained in:
Rue Ji
@ -1,5 +1,14 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%--<%@ page language="java" contentType="text/html; charset=UTF-8"--%>
|
||||
<%--pageEncoding="UTF-8"%>--%>
|
||||
|
||||
<%@ page language="java" pageEncoding="UTF-8" %>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||||
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
@ -296,6 +305,84 @@ pageEncoding="UTF-8"%>
|
||||
top: 1417px;
|
||||
left: 2481px;
|
||||
}
|
||||
.Middle4_val {
|
||||
position: absolute;
|
||||
left: 5134px;
|
||||
width: 100px;
|
||||
height: 31px;
|
||||
color: rgba(41, 241, 250, 1);
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/*background: #0AFA02;*/
|
||||
}
|
||||
#D_JSLL {
|
||||
top: 291px;
|
||||
}
|
||||
#D_JinSPH {
|
||||
top: 342px;
|
||||
}
|
||||
#D_JinSCOD {
|
||||
top: 393px;
|
||||
}
|
||||
#D_JinSAL {
|
||||
top: 444px;
|
||||
}
|
||||
#D_JinSWD {
|
||||
top: 497px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_JinSLJLL {
|
||||
top: 549px;
|
||||
left: 5155px;
|
||||
}
|
||||
#D_ChuSLL {
|
||||
top: 760px;
|
||||
}
|
||||
#D_ChuSPH {
|
||||
top: 812px;
|
||||
}
|
||||
#D_ChuSCOD {
|
||||
top: 867px;
|
||||
}
|
||||
#D_ChuSAL {
|
||||
top: 919px;
|
||||
}
|
||||
#D_ChuSWD {
|
||||
top: 968px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSZL {
|
||||
top: 1021px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSZLv {
|
||||
top: 1072px;
|
||||
left: 5164px;
|
||||
}
|
||||
#D_ChuSLJLL {
|
||||
top: 1124px;
|
||||
left: 5155px;
|
||||
}
|
||||
#D_FanXBCKLL {
|
||||
top: 1239px;
|
||||
}
|
||||
#D_FanXBCKYL {
|
||||
top: 1292px;
|
||||
left: 5144px;
|
||||
}
|
||||
#D_ShengYWNCKLL {
|
||||
top: 1344px;
|
||||
}
|
||||
#D_QingSCYW {
|
||||
top: 1464px;
|
||||
left: 5167px;
|
||||
}
|
||||
#D_FeiYCYW {
|
||||
top: 1516px;
|
||||
left: 5167px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -465,14 +552,38 @@ pageEncoding="UTF-8"%>
|
||||
|
||||
<div class="Middle4">
|
||||
<!-- 进水 -->
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="Middle4_val" id="D_JSLL">100</div>
|
||||
<div class="Middle4_val" id="D_JinSPH">100</div>
|
||||
<div class="Middle4_val" id="D_JinSCOD">100</div>
|
||||
<div class="Middle4_val" id="D_JinSAL">100</div>
|
||||
<div class="Middle4_val" id="D_JinSWD">100</div>
|
||||
<div class="Middle4_val" id="D_JinSLJLL">100</div>
|
||||
</div>
|
||||
|
||||
<!-- 出水 -->
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="Middle4_val" id="D_ChuSLL">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSPH">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSCOD">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSAL">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSWD">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSZL">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSZLv">100</div>
|
||||
<div class="Middle4_val" id="D_ChuSLJLL">100</div>
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="Middle4_val" id="D_FanXBCKLL">200</div>
|
||||
<div class="Middle4_val" id="D_FanXBCKYL">200</div>
|
||||
<div class="Middle4_val" id="D_ShengYWNCKLL">200</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="Middle4_val" id="D_QingSCYW">200</div>
|
||||
<div class="Middle4_val" id="D_FeiYCYW">200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -779,6 +890,69 @@ pageEncoding="UTF-8"%>
|
||||
});
|
||||
}
|
||||
|
||||
// 质量指标表格点位编码映射
|
||||
var qualityMPointMapping = {
|
||||
"COD (mg/L)": { mPointKey: "D_ChuSCOD", standard: "0.000–20.000" },
|
||||
"TP (mg/L)": { mPointKey: "D_ChuSTP", standard: "0.000–0.500" },
|
||||
"NH3–N (mg/L)": { mPointKey: "D_ChuSNH3N", standard: "0.000–5.000" },
|
||||
"TN (mg/L)": { mPointKey: "D_ChuSTN", standard: "0.000–15.000" },
|
||||
"PH (mg/L)": { mPointKey: "D_ChuSPH", standard: "6.000–9.000" },
|
||||
"SS": { mPointKey: "D_ChuSSS", standard: "0.000–10.000" },
|
||||
"温度(℃)": { mPointKey: "D_ChuSWD", standard: "0.000–40.000" },
|
||||
};
|
||||
|
||||
// 获取质量指标表格数据
|
||||
function fetchQualityTableData() {
|
||||
var companyKey = "0533JS";
|
||||
var params = Object.keys(qualityMPointMapping);
|
||||
var completedRequests = 0;
|
||||
var totalRequests = params.length;
|
||||
|
||||
params.forEach(function (paramName) {
|
||||
var mPointKey = qualityMPointMapping[paramName].mPointKey;
|
||||
var standard = qualityMPointMapping[paramName].standard;
|
||||
|
||||
$.ajax({
|
||||
url: "<%=request.getContextPath()%>/mpoint/data/getStatistics.do",
|
||||
type: "GET",
|
||||
data: {
|
||||
mPointKey: mPointKey,
|
||||
companyKey: companyKey
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
console.log("质量指标数据[" + mPointKey + "]:", response);
|
||||
if (response) {
|
||||
// 更新pageData.qualityTable中对应的数据
|
||||
for (var i = 0; i < pageData.qualityTable.length; i++) {
|
||||
if (pageData.qualityTable[i].param === paramName) {
|
||||
pageData.qualityTable[i].current = response.currentValue || 0;
|
||||
pageData.qualityTable[i].avg = response.avgValue || 0;
|
||||
pageData.qualityTable[i].max = response.maxValue || 0;
|
||||
pageData.qualityTable[i].min = response.minValue || 0;
|
||||
pageData.qualityTable[i].standard = standard;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
completedRequests++;
|
||||
// 所有请求完成后更新表格
|
||||
if (completedRequests === totalRequests) {
|
||||
updateQualityTable();
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取质量指标数据失败:", mPointKey, error);
|
||||
completedRequests++;
|
||||
// 即使失败也检查是否所有请求已完成
|
||||
if (completedRequests === totalRequests) {
|
||||
updateQualityTable();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 获取点位信息数据
|
||||
// mpcode: 点位编码
|
||||
// sdt: 开始时间 (可选，默认7天前)
|
||||
@ -818,43 +992,6 @@ pageEncoding="UTF-8"%>
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取点位实时值
|
||||
* @param unitId
|
||||
* @param mpointCode
|
||||
* @param valueId
|
||||
* @param textId
|
||||
*/
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "<%=request.getContextPath()%>/work/mpoint/getValue4Es.do?unitId=" + unitId + "&mpointCode=" + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function (res) {
|
||||
console.log("获取数据失败:", res);
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != "") {
|
||||
var data = eval("(" + data + ")");
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
// var maxvalue = data.alarmmax/0.8;
|
||||
// var minvalue = data.alarmmin/maxvalue;
|
||||
// var acvalue = data.parmvalue/maxvalue*100;
|
||||
// var data = {"processsectioncode":"28","parmname":"电动碟阀11_关到位","id":"D_PACDSYH","numtail":"0","signaltype":"AI","active":"启用","sourceType":"auto","mpointcode":"D_PACDSYH","disname":"电动碟阀11_关到位","valuetype":"sql","directtype":"1","rate":1.0000000000,"subscriptionStatus":0,"mpointid":"D_PACDSYH","triggeralarm":"1","parmvalue":106,"measuredt":"2026-02-26T05:55:14Z","bizid":"0533JS"}
|
||||
console.log('===data', data)
|
||||
$("#" + valueId).html(data.parmvalue || 9999); //赋值
|
||||
if (data.unit == undefined) {
|
||||
$("#" + textId).html(data.parmname || 9999); //赋值名称
|
||||
} else {
|
||||
$("#" + textId).html(data.parmname + " (" + data.unit + ")" + 9999); //赋值名称+单位
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD 格式
|
||||
function formatDate(date) {
|
||||
var year = date.getFullYear();
|
||||
@ -878,11 +1015,25 @@ pageEncoding="UTF-8"%>
|
||||
// 页面加载后获取水量统计数据
|
||||
fetchSlqsData();
|
||||
|
||||
// 批量获取点位数据并更新显示
|
||||
// 获取质量指标表格数据
|
||||
fetchQualityTableData();
|
||||
|
||||
<%--// 定时刷新所有数据（每分钟刷新一次）--%>
|
||||
<%--setInterval(function() {--%>
|
||||
<%-- console.log('定时刷新数据...');--%>
|
||||
<%-- fetchSlqsData();--%>
|
||||
<%-- fetchQualityTableData();--%>
|
||||
<%-- // 批量刷新点位数据--%>
|
||||
<%-- pointList.forEach(function (mpcode) {--%>
|
||||
<%-- getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');--%>
|
||||
<%-- });--%>
|
||||
<%--}, 60000); // 60000毫秒 = 1分钟--%>
|
||||
|
||||
<%--// 批量获取点位数据并更新显示--%>
|
||||
var pointList = [
|
||||
"D_PACDSYH",
|
||||
"D_YiSNDSYH",
|
||||
"D_CiLSNDSYH",
|
||||
"D_PACDSYH", // PAC吨水药耗
|
||||
"D_YiSNDSYH", // 乙酸钠吨水药耗
|
||||
"D_CiLSNDSYH", // 次氯酸钠吨水药耗
|
||||
"D_YanYCORP",
|
||||
"D_QueYCRJY1",
|
||||
"D_HaoYCRJY",
|
||||
@ -900,6 +1051,25 @@ pageEncoding="UTF-8"%>
|
||||
"D_PACJYLL",
|
||||
"D_CiLSNCGYW",
|
||||
"D_PACCGYW",
|
||||
"D_JSLL",
|
||||
"D_JinSPH",
|
||||
"D_JinSCOD",
|
||||
"D_JinSAL",
|
||||
"D_JinSWD",
|
||||
"D_JinSLJLL",
|
||||
"D_ChuSLL",
|
||||
"D_ChuSPH",
|
||||
"D_ChuSCOD",
|
||||
"D_ChuSAL",
|
||||
"D_ChuSWD",
|
||||
"D_ChuSZL",
|
||||
"D_ChuSZLv",
|
||||
"D_ChuSLJLL",
|
||||
"D_FanXBCKLL",
|
||||
"D_FanXBCKYL",
|
||||
"D_ShengYWNCKLL",
|
||||
"D_QingSCYW",
|
||||
"D_FeiYCYW",
|
||||
];
|
||||
|
||||
pointList.forEach(function (mpcode) {
|
||||
@ -913,7 +1083,7 @@ pageEncoding="UTF-8"%>
|
||||
// }).catch(function(error) {
|
||||
// console.error('点位数据获取失败:', mpcode, error);
|
||||
// });
|
||||
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`);
|
||||
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -569,6 +569,159 @@ pageEncoding="UTF-8"%>
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
// 初始化地图
|
||||
map = new T.Map('map-container');
|
||||
// 设置中心点和缩放级别 (金山卫区域)
|
||||
map.centerAndZoom(new T.LngLat(121.340000, 30.740000), 14);
|
||||
// 启用滚轮缩放
|
||||
map.enableScrollWheelZoom();
|
||||
|
||||
// 加载转换后的 GeoJSON 数据
|
||||
loadGeoJSON("pipeline_data.geojson");
|
||||
}
|
||||
|
||||
function loadGeoJSON(url) {
|
||||
$.getJSON(url, function(geojson) {
|
||||
|
||||
if (!geojson || !geojson.features) {
|
||||
console.error("Invalid GeoJSON data");
|
||||
return;
|
||||
}
|
||||
|
||||
geojson.features.forEach(function(feature) {
|
||||
var props = feature.properties;
|
||||
var geometry = feature.geometry;
|
||||
|
||||
if (geometry.type === "LineString") {
|
||||
var points = [];
|
||||
geometry.coordinates.forEach(function(coord) {
|
||||
// GeoJSON 通常是 [lng, lat]
|
||||
points.push(new T.LngLat(coord[0], coord[1]));
|
||||
});
|
||||
|
||||
// 根据属性设置颜色 (假设 GeoJSON 包含 type 属性)
|
||||
// 如果没有 type，默认蓝色
|
||||
var type = props.type || 'unknown';
|
||||
var color = "#0000FF";
|
||||
if (type.indexOf('雨水') > -1) color = "#00FFFF";
|
||||
if (type.indexOf('污水') > -1) color = "#FF00FF";
|
||||
|
||||
var line = new T.Polyline(points, {
|
||||
color: color,
|
||||
weight: 3,
|
||||
opacity: 0.9,
|
||||
lineStyle: 'solid'
|
||||
});
|
||||
map.addOverLay(line);
|
||||
|
||||
// 添加标注和流向
|
||||
// 构造一个模拟的 pipe 对象传给辅助函数
|
||||
var pipeData = {
|
||||
diameter: props.diameter || 'Unknown',
|
||||
type: type
|
||||
};
|
||||
addPipeLabelAndArrow(map, pipeData, points, color);
|
||||
}
|
||||
});
|
||||
}).fail(function(jqxhr, textStatus, error) {
|
||||
var err = textStatus + ", " + error;
|
||||
console.error("Request Failed: " + err);
|
||||
// 如果加载失败，回退到模拟数据演示
|
||||
console.log("Loading mock data as fallback...");
|
||||
var pipelines = generateMockPipelines();
|
||||
renderPipelines(pipelines);
|
||||
});
|
||||
}
|
||||
|
||||
// 提取原有的绘制逻辑为单独函数，用于回退
|
||||
function renderPipelines(pipelines) {
|
||||
pipelines.forEach(function(pipe) {
|
||||
var points = [];
|
||||
pipe.path.forEach(function(coord) {
|
||||
points.push(new T.LngLat(coord[0], coord[1]));
|
||||
});
|
||||
|
||||
var color = "#0000FF";
|
||||
if (pipe.type === '雨水') color = "#00FFFF";
|
||||
if (pipe.type === '污水') color = "#FF00FF";
|
||||
|
||||
var line = new T.Polyline(points, {
|
||||
color: color,
|
||||
weight: 3,
|
||||
opacity: 0.9,
|
||||
lineStyle: 'solid'
|
||||
});
|
||||
map.addOverLay(line);
|
||||
addPipeLabelAndArrow(map, pipe, points, color);
|
||||
});
|
||||
}
|
||||
|
||||
function addPipeLabelAndArrow(map, pipe, points, color) {
|
||||
// 计算中心点
|
||||
if (points.length < 2) return;
|
||||
var p1 = points[0];
|
||||
var p2 = points[points.length - 1];
|
||||
// 简单的取两端点中点（假设直线）
|
||||
var centerLng = (p1.getLng() + p2.getLng()) / 2;
|
||||
var centerLat = (p1.getLat() + p2.getLat()) / 2;
|
||||
var center = new T.LngLat(centerLng, centerLat);
|
||||
|
||||
// 计算角度
|
||||
// var angle = Math.atan2(p2.getLat() - p1.getLat(), p2.getLng() - p1.getLng()) * 180 / Math.PI;
|
||||
|
||||
// 添加文字标注 (DN + 材质)
|
||||
var typeStr = pipe.type || '';
|
||||
if (typeof pipe.type === 'string' && pipe.type.indexOf('雨水') > -1) typeStr = 'PVC';
|
||||
else if (typeof pipe.type === 'string' && pipe.type.indexOf('污水') > -1) typeStr = '砼';
|
||||
|
||||
var labelText = "DN" + pipe.diameter + "-" + typeStr;
|
||||
var label = new T.Label({
|
||||
text: labelText,
|
||||
position: center,
|
||||
offset: new T.Point(0, -10)
|
||||
});
|
||||
label.setBackgroundColor("transparent");
|
||||
label.setBorderColor("transparent");
|
||||
label.setFontColor(color);
|
||||
label.setFontSize(12);
|
||||
label.setTitle(labelText);
|
||||
map.addOverLay(label);
|
||||
|
||||
// 添加箭头
|
||||
var arrowLabel = new T.Label({
|
||||
text: "➤",
|
||||
position: center,
|
||||
offset: new T.Point(0, 0)
|
||||
});
|
||||
arrowLabel.setBackgroundColor("transparent");
|
||||
arrowLabel.setBorderColor("transparent");
|
||||
arrowLabel.setFontColor(color);
|
||||
arrowLabel.setFontSize(14);
|
||||
map.addOverLay(arrowLabel);
|
||||
}
|
||||
|
||||
function generateMockPipelines() {
|
||||
var pipes = [];
|
||||
var centerLng = 121.340000;
|
||||
var centerLat = 30.740000;
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var startLng = centerLng + (Math.random() - 0.5) * 0.04;
|
||||
var startLat = centerLat + (Math.random() - 0.5) * 0.04;
|
||||
var endLng = startLng + (Math.random() - 0.5) * 0.01;
|
||||
var endLat = startLat + (Math.random() - 0.5) * 0.01;
|
||||
|
||||
pipes.push({
|
||||
id: i,
|
||||
type: Math.random() > 0.5 ? '雨水' : '污水',
|
||||
diameter: [300, 400, 500, 600, 800][Math.floor(Math.random() * 5)],
|
||||
path: [[startLng, startLat], [endLng, endLat]]
|
||||
});
|
||||
}
|
||||
return pipes;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
23296
src/main/webapp/jsp/z_bigScreen/geo.json
Normal file
23296
src/main/webapp/jsp/z_bigScreen/geo.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user