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

git

Browse Source
This commit is contained in:
Rue Ji
2026-02-02 23:52:49 +08:00
parent b2973c6d28
commit 5133e4f983
15 changed files with 983 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
src/main/webapp/jsp/bigScreen2.jsp
View File

@ -4,6 +4,8 @@
<head>
<meta charset="UTF-8">
<title>区域管线大屏展示</title>
<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>
<style>
body, html {
margin: 0;
@ -11,6 +13,8 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: #030829;
font-family: "Microsoft YaHei", sans-serif;
}
.screen-container {
width: 6500px;
@ -20,10 +24,312 @@
background-repeat: no-repeat;
position: relative;
}
/* 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%;
}
</style>
</head>
<body>
<div class="screen-container">
<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>
</div>
<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>
</body>
</html>