xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

排污户大屏

Browse Source
This commit is contained in:
Rue Ji
2026-03-07 22:50:45 +08:00
parent 73c02fa365
commit cd15aa75c3
1 changed files with 290 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
src/main/webapp/jsp/bigScreen3.jsp
View File

@ -360,7 +360,7 @@ pageEncoding="UTF-8"%>
污水特性: <span id="sewageType">--</span>
</div>
<div class="info-item">
当前排污量: <span id="dischargeVolume">--</span>
日排量: <span id="dischargeVolume">--</span>
</div>
<div class="info-item">
接入状态: <span id="connectionStatus">--</span>
@ -405,6 +405,9 @@ pageEncoding="UTF-8"%>
var allEnterprises = []; // All data for map
var currentFocusIndex = 0;
var rotationTimer = null;
// 获取上下文路径
var contextPath = "<%=request.getContextPath()%>";
// 进入全屏函数
function enterFullscreen() {
@ -464,20 +467,191 @@ pageEncoding="UTF-8"%>
}
}
// 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);
},
});
});
}
// 加载企业数据（排污源）
function loadEnterpriseData() {
console.log("=== loadEnterpriseData 函数开始执行 ===");
return apiRequest("/sparepart/sewage/getList.do", {
page: 1,
rows: 10,
sort: "displacement",
order: "asc",
unitId: '0533JS',
})
.then(function (data) {
console.log("=== loadEnterpriseData 接口返回数据:", data);
var dataList = data;
if (typeof data === "string") {
try {
dataList = JSON.parse(data);
} catch (e) {
console.error("解析企业数据失败:", e);
dataList = {};
}
}
var list = dataList.rows || [];
console.log("企业接口返回数据条数:", list.length);
if (!list || list.length === 0) {
console.error("!!! 企业接口返回数据为空!");
return [];
}
// 统计接入状态
var total = dataList.total;
var connected = 0;
var connecting = 0;
var enterprises = list.map(function (item, idx) {
// 解析经纬度
var lng = null, lat = null;
if (item.longitudeLatitude) {
var coords = String(item.longitudeLatitude).split(",");
if (coords.length >= 2) {
lng = parseFloat(coords[0]);
lat = parseFloat(coords[1]);
} else if (coords.length === 1) {
lng = parseFloat(coords[0]);
}
}
// 从 company 对象获取经纬度
if ((!lng || !lat) && item.company) {
lng = lng || item.company.longitude;
lat = lat || item.company.latitude;
}
// 默认位置
if (!lng || !lat) {
lng = 121.3 + idx * 0.01;
lat = 30.7 + idx * 0.005;
}
// 解析日排量数值
var dischargeValue = 0;
if (item.displacement) {
dischargeValue = parseFloat(item.displacement) || 0;
}
// 接入状态判断（根据已关联点位和已录入数据）
var hasPoint = item._point ? true : false;
var hasInput = item._input ? true : false;
var connectionStatus = "接入中";
if (hasPoint || hasInput) {
connectionStatus = "已接入";
connected++;
} else {
connecting++;
}
// 所属行业作为污水特性
var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
var sewageType = item.trade || sewageTypes[idx % sewageTypes.length];
return {
id: item.id,
contractNumber: item.contractNumber || "",
name: item.name || "企业-" + (idx + 1),
value: dischargeValue,
sewageType: sewageType,
connectionStatus: connectionStatus,
address: item.address || "",
areaName: item.company ? item.company.name || "" : "",
processSectionName: item.processSection ? item.processSection.name || "" : "",
permitNum: item.permitNum || "",
trade: item.trade || "",
displacement: item.displacement ? item.displacement + "吨/天" : "-",
indicator: dischargeValue > 8000 ? "超级" : "普通",
photo: contextPath + "/IMG/login/company.png",
x: Math.random() * 90 + 5,
y: Math.random() * 80 + 10,
lng: lng,
lat: lat,
instantHistory: generateHistoryData(72),
cumulativeHistory: generateHistoryData(14),
};
});
console.log("企业数据处理后条数:", enterprises.length, "已接入:", connected, "接入中:", connecting);
// 更新统计数字
$("#totalCount").html(total + '<span class="stat-unit">家</span>');
$("#connectedCount").html(connected + '<span class="stat-unit">家</span>');
$("#connectingCount").html(connecting + '<span class="stat-unit">家</span>');
return enterprises;
})
.catch(function (err) {
console.error("加载企业数据失败:", err);
return [];
});
}
function initData() {
// Stats
// Init Charts first
myChartInstant = echarts.init(document.getElementById("chartInstant"));
myChartCumulative = echarts.init(
document.getElementById("chartCumulative"),
);
myChartRanking = echarts.init(document.getElementById("chartRanking"));
// 并行加载企业数据（用于统计和地图）和排行数据
Promise.all([
loadEnterpriseData(),
loadRankingData()
])
.then(function (results) {
var enterprises = results[0];
var rankingData = results[1];
if (!enterprises || enterprises.length === 0) {
console.warn("企业数据为空，使用默认模拟数据");
// enterprises = generateMockData();
enterprises = []
}
allEnterprises = enterprises;
// 渲染地图点位
renderMapPoints();
// Start Loops - 每10秒刷新排行数据
startDataSimulation();
startRotation();
})
.catch(function (err) {
console.error("初始化数据失败:", err);
});
}
// 生成模拟数据（作为备用）
function generateMockData() {
var total = 158;
var connected = 124;
var connecting = 34;
$("#totalCount").html(total + '<span class="stat-unit">家</span>');
$("#connectedCount").html(
connected + '<span class="stat-unit">家</span>',
);
$("#connectingCount").html(
connecting + '<span class="stat-unit">家</span>',
);
$("#connectedCount").html(connected + '<span class="stat-unit">家</span>');
$("#connectingCount").html(connecting + '<span class="stat-unit">家</span>');
// Generate Enterprises with Details
var enterprises = [];
var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
var connectionStatuses = ["已接入", "接入中"];
@ -488,47 +662,17 @@ pageEncoding="UTF-8"%>
id: i,
name: "企业-" + i,
value: val,
// Details
sewageType:
sewageTypes[Math.floor(Math.random() * sewageTypes.length)],
connectionStatus:
connectionStatuses[
Math.floor(Math.random() * connectionStatuses.length)
],
sewageType: sewageTypes[Math.floor(Math.random() * sewageTypes.length)],
connectionStatus: connectionStatuses[Math.floor(Math.random() * connectionStatuses.length)],
indicator: val > 8000 ? "超级" : "普通",
photo: "<%=request.getContextPath()%>/IMG/login/company.png", // Placeholder
// Map Coordinates (Relative % in map container)
x: Math.random() * 90 + 5, // 5% to 95%
y: Math.random() * 80 + 10, // 10% to 90%
// History Data
instantHistory: generateHistoryData(72), // 3 days * 24 hours
cumulativeHistory: generateHistoryData(14), // 14 days
photo: contextPath + "/IMG/login/company.png",
x: Math.random() * 90 + 5,
y: Math.random() * 80 + 10,
instantHistory: generateHistoryData(72),
cumulativeHistory: generateHistoryData(14),
});
}
allEnterprises = enterprises;
// Init Charts
myChartInstant = echarts.init(document.getElementById("chartInstant"));
myChartCumulative = echarts.init(
document.getElementById("chartCumulative"),
);
myChartRanking = echarts.init(document.getElementById("chartRanking"));
// myNewBarChart = echarts.init(document.getElementById('newBarChart'));
// renderNewBarChart();
// Initial Sort
updateSortedData(enterprises);
// Render Lists & Map
renderRankingChart();
renderMapPoints();
updateDetailView();
// Start Loops
startDataSimulation(enterprises);
startRotation();
return enterprises;
}
function generateHistoryData(count) {
@ -872,37 +1016,103 @@ pageEncoding="UTF-8"%>
}
}
function startDataSimulation(enterprises) {
setInterval(function () {
// Randomize values
enterprises.forEach((item) => {
item.value += Math.floor(Math.random() * 200) - 100;
if (item.value < 0) item.value = 0;
item.indicator = item.value > 8000 ? "超级" : "普通";
// Update Map Point Style
var el = $("#point-" + item.id);
if (item.value > 8000) {
el.addClass("super");
} else {
el.removeClass("super");
// 加载排行数据（最大和最小分别调用接口）
function loadRankingData() {
console.log("=== loadRankingData 开始加载排行数据 ===");
// 并行请求最大和最小排行数据
var maxPromise = apiRequest("/sparepart/sewage/getList.do", {
page: 1,
rows: 10,
sort: "displacement",
order: "desc",
unitId: '0533JS',
});
var minPromise = apiRequest("/sparepart/sewage/getList.do", {
page: 1,
rows: 10,
sort: "displacement",
order: "asc",
unitId: '0533JS',
});
return Promise.all([maxPromise, minPromise])
.then(function (results) {
console.log("=== loadRankingData 接口返回 ===");
console.log("[最大排行数据]:", results[0]);
console.log("[最小排行数据]:", results[1]);
var maxData = results[0];
var minData = results[1];
// 解析最大排行数据
if (typeof maxData === "string") {
try { maxData = JSON.parse(maxData); } catch (e) { maxData = {}; }
}
el.find(".map-tooltip").html(
item.name + "<br>排污量: " + item.value,
);
var maxList = maxData.rows || [];
// 解析最小排行数据
if (typeof minData === "string") {
try { minData = JSON.parse(minData); } catch (e) { minData = {}; }
}
var minList = minData.rows || [];
console.log("最大排行条数:", maxList.length, "最小排行条数:", minList.length);
// 转换最大排行数据
currentMaxData = maxList.map(function (item, idx) {
var dischargeValue = parseFloat(item.displacement) || 0;
return {
id: item.id,
name: item.name || "企业-" + (idx + 1),
value: dischargeValue,
sewageType: item.trade || "-",
connectionStatus: item._point || item._input ? "已接入" : "接入中",
displacement: item.displacement ? item.displacement + "吨/天" : "-",
instantHistory: generateHistoryData(72),
cumulativeHistory: generateHistoryData(14),
};
});
// 转换最小排行数据
currentMinData = minList.map(function (item, idx) {
var dischargeValue = parseFloat(item.displacement) || 0;
return {
id: item.id,
name: item.name || "企业-" + (idx + 1),
value: dischargeValue,
sewageType: item.trade || "-",
connectionStatus: item._point || item._input ? "已接入" : "接入中",
displacement: item.displacement ? item.displacement + "吨/天" : "-",
instantHistory: generateHistoryData(72),
cumulativeHistory: generateHistoryData(14),
};
});
console.log("[loadRankingData] 最大排行处理完成:", currentMaxData.length, "条");
console.log("[loadRankingData] 最小排行处理完成:", currentMinData.length, "条");
// 更新排行图表
renderRankingChart();
// 更新详情视图
if (currentMaxData.length > 0) {
updateDetailView();
}
return { max: currentMaxData, min: currentMinData };
})
.catch(function (err) {
console.error("加载排行数据失败:", err);
});
}
updateSortedData(enterprises);
renderRankingChart();
// Update map tooltips if needed? Or just let them be static until hover re-render?
// Re-rendering map points entirely is heavy if DOM is large, but 50 is fine.
// However, re-rendering loses hover state. Better to update text.
// For demo simplicity, we skip real-time map value update or do it simply:
/*
enterprises.forEach(item => {
$('#point-' + item.id + ' .map-tooltip').html(item.name + '<br>排污量: ' + item.value);
});
*/
function startDataSimulation() {
// 每10秒调用接口更新排行数据
setInterval(function () {
console.log("[定时刷新] 开始刷新排行数据...");
loadRankingData();
}, 10000);
}
@ -934,11 +1144,13 @@ pageEncoding="UTF-8"%>
}
function renderDetailContent(enterprise) {
console.log("[renderDetailContent] 渲染企业详情:", enterprise.name, enterprise);
// Update DOM
$("#detailTitle").text(enterprise.name);
$("#sewageType").text(enterprise.sewageType);
$("#dischargeVolume").text(enterprise.value + " m³");
$("#connectionStatus").text(enterprise.connectionStatus);
$("#sewageType").text(enterprise.sewageType || "-");
// 使用日排量字段，如果有 displacement 显示 displacement，否则显示 value
$("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天"));
$("#connectionStatus").text(enterprise.connectionStatus || "-");
renderDetailCharts(enterprise);
}