2026-02-02 14:44:36 +08:00
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>区域管线大屏展示</title>
|
2026-02-02 23:52:49 +08:00
|
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
|
2026-02-02 14:44:36 +08:00
|
|
|
<style>
|
|
|
|
|
body, html {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: auto;
|
2026-02-02 23:52:49 +08:00
|
|
|
background-color: #030829;
|
|
|
|
|
font-family: "Microsoft YaHei", sans-serif;
|
2026-02-02 14:44:36 +08:00
|
|
|
}
|
|
|
|
|
.screen-container {
|
|
|
|
|
width: 6500px;
|
|
|
|
|
height: 1800px;
|
|
|
|
|
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2026-02-02 23:52:49 +08:00
|
|
|
|
|
|
|
|
/* Module Container */
|
|
|
|
|
.rank-module-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 356px;
|
|
|
|
|
left: 198px;
|
|
|
|
|
width: 1900px;
|
|
|
|
|
height: 1400px;
|
|
|
|
|
/* background: rgba(255, 0, 0, 0.1); Debugging background */
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Statistics Header */
|
|
|
|
|
.stats-header {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 180px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: rgba(0, 20, 50, 0.3);
|
|
|
|
|
border: 1px solid rgba(0, 234, 255, 0.2);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-item {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-label {
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
color: #00eaff;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
|
|
|
|
font-size: 64px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
|
|
|
|
|
text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-unit {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #aaaaaa;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Charts Area */
|
|
|
|
|
.charts-wrapper {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart-box {
|
|
|
|
|
flex: 1;
|
|
|
|
|
background: rgba(0, 20, 50, 0.3);
|
|
|
|
|
border: 1px solid rgba(0, 234, 255, 0.2);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart-title {
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding-bottom: 15px;
|
|
|
|
|
border-bottom: 1px solid rgba(0, 234, 255, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2026-02-02 14:44:36 +08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="screen-container">
|
2026-02-02 23:52:49 +08:00
|
|
|
<div class="rank-module-container">
|
|
|
|
|
<!-- Statistics -->
|
|
|
|
|
<div class="stats-header">
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-label">辖区排污企业总数</div>
|
|
|
|
|
<div class="stat-value" id="totalCount">0<span class="stat-unit">家</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-label">已接入监控</div>
|
|
|
|
|
<div class="stat-value" style="color: #00ff00;" id="connectedCount">0<span class="stat-unit">家</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-label">正在接入中</div>
|
|
|
|
|
<div class="stat-value" style="color: #ffaa00;" id="connectingCount">0<span class="stat-unit">家</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Charts -->
|
|
|
|
|
<div class="charts-wrapper">
|
|
|
|
|
<div class="chart-box">
|
|
|
|
|
<div class="chart-title">近30日排污量 TOP 10 (最大)</div>
|
|
|
|
|
<div id="chartMax" class="chart-content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart-box">
|
|
|
|
|
<div class="chart-title">近30日排污量 TOP 10 (最小)</div>
|
|
|
|
|
<div id="chartMin" class="chart-content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-02-02 14:44:36 +08:00
|
|
|
</div>
|
2026-02-02 23:52:49 +08:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
initData();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function initData() {
|
|
|
|
|
// Mock Data Generation
|
|
|
|
|
var enterprises = [];
|
|
|
|
|
var total = 158;
|
|
|
|
|
var connected = 124;
|
|
|
|
|
var connecting = 34;
|
|
|
|
|
|
|
|
|
|
// Update Stats
|
|
|
|
|
$('#totalCount').html(total + '<span class="stat-unit">家</span>');
|
|
|
|
|
$('#connectedCount').html(connected + '<span class="stat-unit">家</span>');
|
|
|
|
|
$('#connectingCount').html(connecting + '<span class="stat-unit">家</span>');
|
|
|
|
|
|
|
|
|
|
// Generate random enterprise data
|
|
|
|
|
for (var i = 1; i <= 50; i++) {
|
|
|
|
|
enterprises.push({
|
|
|
|
|
name: '企业-' + i,
|
|
|
|
|
value: Math.floor(Math.random() * 10000) + 500
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Sort for Max
|
|
|
|
|
var sortedMax = [...enterprises].sort((a, b) => b.value - a.value).slice(0, 10);
|
|
|
|
|
|
|
|
|
|
// Sort for Min
|
|
|
|
|
var sortedMin = [...enterprises].sort((a, b) => a.value - b.value).slice(0, 10);
|
|
|
|
|
|
|
|
|
|
renderCharts(sortedMax, sortedMin);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderCharts(maxData, minData) {
|
|
|
|
|
var chartMax = echarts.init(document.getElementById('chartMax'));
|
|
|
|
|
var chartMin = echarts.init(document.getElementById('chartMin'));
|
|
|
|
|
|
|
|
|
|
// Max Option
|
|
|
|
|
var optionMax = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: { type: 'shadow' }
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: { color: '#fff', fontSize: 16 },
|
|
|
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: maxData.map(item => item.name).reverse(),
|
|
|
|
|
axisLabel: { color: '#fff', fontSize: 18 },
|
|
|
|
|
axisLine: { lineStyle: { color: '#00eaff' } }
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
name: '排污量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: maxData.map(item => item.value).reverse(),
|
|
|
|
|
label: { show: true, position: 'right', color: '#fff', fontSize: 16 },
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
|
|
offset: 0, color: '#ff5500'
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1, color: '#ffbb00'
|
|
|
|
|
}]),
|
|
|
|
|
barBorderRadius: [0, 10, 10, 0]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
barWidth: 40,
|
|
|
|
|
animationDuration: 2000,
|
|
|
|
|
animationEasing: 'cubicOut'
|
|
|
|
|
}]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Min Option
|
|
|
|
|
var optionMin = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: { type: 'shadow' }
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: { color: '#fff', fontSize: 16 },
|
|
|
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: minData.map(item => item.name).reverse(),
|
|
|
|
|
axisLabel: { color: '#fff', fontSize: 18 },
|
|
|
|
|
axisLine: { lineStyle: { color: '#00eaff' } }
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
name: '排污量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: minData.map(item => item.value).reverse(),
|
|
|
|
|
label: { show: true, position: 'right', color: '#fff', fontSize: 16 },
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
|
|
offset: 0, color: '#00aa00'
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1, color: '#00ff00'
|
|
|
|
|
}]),
|
|
|
|
|
barBorderRadius: [0, 10, 10, 0]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
barWidth: 40,
|
|
|
|
|
animationDuration: 2000,
|
|
|
|
|
animationEasing: 'cubicOut'
|
|
|
|
|
}]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chartMax.setOption(optionMax);
|
|
|
|
|
chartMin.setOption(optionMin);
|
|
|
|
|
|
|
|
|
|
// Dynamic Sort Simulation (Update every 3 seconds)
|
|
|
|
|
setInterval(function() {
|
|
|
|
|
// Randomly change values slightly
|
|
|
|
|
maxData.forEach(item => {
|
|
|
|
|
item.value += Math.floor(Math.random() * 200) - 100;
|
|
|
|
|
if(item.value < 0) item.value = 0;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Re-sort
|
|
|
|
|
maxData.sort((a, b) => a.value - b.value); // For horizontal bar, small index is bottom. ECharts draws category 0 at bottom.
|
|
|
|
|
// Actually in my code I used reverse() so data is Top to Bottom visually if array is Descending.
|
|
|
|
|
// Let's keep data array as Ascending (Small -> Large) so index 0 is at bottom (or top depending on axis inverse).
|
|
|
|
|
// Default category axis: index 0 at bottom.
|
|
|
|
|
// If I want Top 1 at top, I need index 0 to be the smallest value (if not inverse) or configure axis.
|
|
|
|
|
// In previous code: data: maxData.map(item => item.name).reverse()
|
|
|
|
|
// If maxData was sorted Descending (Large -> Small), then reverse makes it Small -> Large.
|
|
|
|
|
// So index 0 (bottom) is Smallest of the top 10. Index 9 (top) is Largest. Correct.
|
|
|
|
|
|
|
|
|
|
// Let's just re-sort the source array Descending
|
|
|
|
|
maxData.sort((a, b) => b.value - a.value);
|
|
|
|
|
|
|
|
|
|
// Update chart
|
|
|
|
|
chartMax.setOption({
|
|
|
|
|
yAxis: {
|
|
|
|
|
data: maxData.map(item => item.name).reverse()
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
data: maxData.map(item => item.value).reverse()
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Do same for Min? Min usually doesn't fluctuate as much to swap "Top Min", but let's simulate.
|
|
|
|
|
minData.forEach(item => {
|
|
|
|
|
item.value += Math.floor(Math.random() * 50) - 25;
|
|
|
|
|
if(item.value < 0) item.value = 0;
|
|
|
|
|
});
|
|
|
|
|
minData.sort((a, b) => a.value - b.value); // Small -> Large.
|
|
|
|
|
// Display: I want Smallest at Top? Or Largest of the Smallest at Top?
|
|
|
|
|
// Usually "Top 10 Min" means the 10 smallest values.
|
|
|
|
|
// Visualizing: Smallest bar at Top.
|
|
|
|
|
// If data is [1, 2, 3...], and I reverse it -> [..., 3, 2, 1].
|
|
|
|
|
// Index 0 (bottom) = 10. Index 9 (top) = 1.
|
|
|
|
|
// So I need the array to be sorted Small -> Large.
|
|
|
|
|
// Then reverse it -> Large -> Small.
|
|
|
|
|
// Then bottom (index 0) is Large. Top (index 9) is Small.
|
|
|
|
|
// Correct.
|
|
|
|
|
|
|
|
|
|
chartMin.setOption({
|
|
|
|
|
yAxis: {
|
|
|
|
|
data: minData.map(item => item.name).reverse()
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
data: minData.map(item => item.value).reverse()
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}, 3000);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2026-02-02 14:44:36 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
