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-02-06 16:30:47 +08:00
parent 14c9bd8ce0
commit 580606c267
8 changed files with 117 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/webapp/IMG/screen1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 MiB

BIN
src/main/webapp/IMG/screen3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 MiB

After

Width:  |  Height:  |  Size: 13 MiB

8
src/main/webapp/jsp/bigScreen.jsp
View File

@ -11,11 +11,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; /* Allow scrolling if window is smaller */ overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
} }
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
/* background-image: url('../../IMG/screen1-1.png'); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -60,9 +62,9 @@
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="val-6040">6040</div> <!-- <div class="val-6040">6040</div>
<div class="val-4197">4197</div> <div class="val-4197">4197</div>
<div class="val-12356">12356</div> <div class="val-12356">12356</div> -->
</div> </div>
</body> </body>
</html> </html>

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

@ -6,17 +6,21 @@
<title>区域管线大屏展示</title> <title>区域管线大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <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> <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
<!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
<style> <style>
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
} }
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
/* background-image: url('../../IMG/screen2.png'); */
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;

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

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>排污户大屏展示</title> <title>排污户大屏展示</title>
<!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <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> <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
<style> <style>
@ -20,6 +22,7 @@
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen3.png');
/* background-image: url('../../IMG/screen3.png'); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -446,18 +449,15 @@
// Process Max Data (Top 10 High) // Process Max Data (Top 10 High)
currentMaxData.forEach((item, index) => { currentMaxData.forEach((item, index) => {
maxNames.push(item.name); maxNames.push(item.name);
var isHighlighted = (index === currentFocusIndex);
var colorStart = isHighlighted ? '#ffffff' : '#ffaa00';
var colorEnd = isHighlighted ? '#cccccc' : '#ff5500';
maxValues.push({ maxValues.push({
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0, color: colorStart offset: 0, color: '#ff5500'
}, { }, {
offset: 1, color: colorEnd offset: 1, color: '#ffb700'
}]) }])
} }
} }
@ -472,9 +472,9 @@
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0, color: '#00eaff' offset: 0, color: '#00aa00'
}, { }, {
offset: 1, color: '#0055ff' offset: 1, color: '#00ff00'
}]) }])
} }
} }
@ -483,26 +483,28 @@
var option = { var option = {
title: [{ title: [{
text: '近30天排污量最大 Top 10', text: '近30日排污量 TOP 10 (最大)',
left: 'center', left: '25%',
top: '2%', top: '2%',
textStyle: { color: '#ffaa00', fontSize: 24, fontWeight: 'bold' } textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}, { }, {
text: '近30天排污量最小 Top 10', text: '近30日排污量 TOP 10 (最小)',
left: 'center', left: '75%',
top: '52%', top: '2%',
textStyle: { color: '#00eaff', fontSize: 24, fontWeight: 'bold' } textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}], }],
grid: [{ grid: [{
top: '10%', top: '12%',
left: '5%', left: '2%',
right: '10%', right: '52%',
bottom: '53%', bottom: '5%',
containLabel: true containLabel: true
}, { }, {
top: '60%', top: '12%',
left: '5%', left: '52%',
right: '10%', right: '2%',
bottom: '5%', bottom: '5%',
containLabel: true containLabel: true
}], }],
@ -519,7 +521,7 @@
type: 'category', type: 'category',
data: maxNames, data: maxNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 18 }, axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 0 gridIndex: 0
@ -527,7 +529,7 @@
type: 'category', type: 'category',
data: minNames, data: minNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 18 }, axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 1 gridIndex: 1
@ -538,36 +540,42 @@
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
data: maxValues, data: maxValues,
barWidth: 30, barWidth: 45,
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)',
barBorderRadius: [0, 22, 22, 0]
},
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: 'right',
textStyle: { color: '#ffaa00', fontSize: 18, fontWeight: 'bold' }, textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c} m³' formatter: '{c}'
} }
}, },
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
}, { }, {
name: 'Min', name: 'Min',
type: 'bar', type: 'bar',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: minValues, data: minValues,
barWidth: 30, barWidth: 45,
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)',
barBorderRadius: [0, 22, 22, 0]
},
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: 'right',
textStyle: { color: '#00eaff', fontSize: 18, fontWeight: 'bold' }, textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c} m³' formatter: '{c}'
} }
}, },
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
}] }]
}; };

9
src/main/webapp/jsp/z_bigScreen/bigScreen1.html
View File

@ -1,3 +1,4 @@
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -10,11 +11,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; /* Allow scrolling if window is smaller */ overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
} }
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('../../IMG/screen1.png'); /* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
background-image: url('../../IMG/screen1-1.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -59,9 +62,9 @@
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="val-6040">6040</div> <!-- <div class="val-6040">6040</div>
<div class="val-4197">4197</div> <div class="val-4197">4197</div>
<div class="val-12356">12356</div> <div class="val-12356">12356</div> -->
</div> </div>
</body> </body>
</html> </html>

29
src/main/webapp/jsp/z_bigScreen/bigScreen2.html
View File

@ -4,8 +4,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>区域管线大屏展示</title> <title>区域管线大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <!-- <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> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> -->
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<style> <style>
body, html { body, html {
margin: 0; margin: 0;
@ -13,11 +15,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: #030829;
} }
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); background-image: url('../../IMG/screen2.png');
/* background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -236,14 +240,17 @@
} }
}, },
data: [ data: [
{ value: 200, name: '雨水管' }, { value: 335, name: 'II级钢筋混凝土管 承插接口' },
{ value: 180, name: '污水管' }, { value: 310, name: '焊接钢管 焊接接口' },
{ value: 150, name: '给水管' }, { value: 274, name: '高密度聚乙烯双壁波纹管' },
{ value: 120, name: '电力管' }, { value: 235, name: '聚乙烯PE管' },
{ value: 100, name: '燃气管' }, { value: 200, name: 'II级钢筋混凝土管' },
{ value: 80, name: '通信管' }, { value: 180, name: '高密度聚乙烯缠绕管' },
{ value: 60, name: '热力管' }, { value: 150, name: '焊接钢管 焊接连接' },
{ value: 40, name: '工业管' } { value: 140, name: '高密度聚乙烯中空壁缠绕管' },
{ value: 130, name: '钢筋混凝土管' },
{ value: 110, name: '球墨铸铁管' },
{ value: 100, name: '预应力钢筒混凝土管' }
] ]
} }
] ]

80
src/main/webapp/jsp/z_bigScreen/bigScreen3.html
View File

@ -1,10 +1,13 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>排污户大屏展示</title> <title>排污户大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<!-- <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> <style>
body, html { body, html {
margin: 0; margin: 0;
@ -18,7 +21,8 @@
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('./screen3.png'); /* background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); */
background-image: url('../../IMG/screen3.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -445,18 +449,15 @@
// Process Max Data (Top 10 High) // Process Max Data (Top 10 High)
currentMaxData.forEach((item, index) => { currentMaxData.forEach((item, index) => {
maxNames.push(item.name); maxNames.push(item.name);
var isHighlighted = (index === currentFocusIndex);
var colorStart = isHighlighted ? '#ffffff' : '#ffaa00';
var colorEnd = isHighlighted ? '#cccccc' : '#ff5500';
maxValues.push({ maxValues.push({
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0, color: colorStart offset: 0, color: '#ff5500'
}, { }, {
offset: 1, color: colorEnd offset: 1, color: '#ffb700'
}]) }])
} }
} }
@ -471,9 +472,9 @@
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0, color: '#00eaff' offset: 0, color: '#00aa00'
}, { }, {
offset: 1, color: '#0055ff' offset: 1, color: '#00ff00'
}]) }])
} }
} }
@ -482,26 +483,28 @@
var option = { var option = {
title: [{ title: [{
text: '近30天排污量最大 Top 10', text: '近30日排污量 TOP 10 (最大)',
left: 'center', left: '25%',
top: '2%', top: '2%',
textStyle: { color: '#ffaa00', fontSize: 24, fontWeight: 'bold' } textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}, { }, {
text: '近30天排污量最小 Top 10', text: '近30日排污量 TOP 10 (最小)',
left: 'center', left: '75%',
top: '52%', top: '2%',
textStyle: { color: '#00eaff', fontSize: 24, fontWeight: 'bold' } textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}], }],
grid: [{ grid: [{
top: '10%', top: '12%',
left: '5%', left: '2%',
right: '10%', right: '52%',
bottom: '53%', bottom: '5%',
containLabel: true containLabel: true
}, { }, {
top: '60%', top: '12%',
left: '5%', left: '52%',
right: '10%', right: '2%',
bottom: '5%', bottom: '5%',
containLabel: true containLabel: true
}], }],
@ -518,7 +521,7 @@
type: 'category', type: 'category',
data: maxNames, data: maxNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 18 }, axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 0 gridIndex: 0
@ -526,7 +529,7 @@
type: 'category', type: 'category',
data: minNames, data: minNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 18 }, axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 1 gridIndex: 1
@ -537,36 +540,32 @@
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
data: maxValues, data: maxValues,
barWidth: 30, barWidth: 45,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: 'right',
textStyle: { color: '#ffaa00', fontSize: 18, fontWeight: 'bold' }, textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c} m³' formatter: '{c}'
} }
}, },
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
}, { }, {
name: 'Min', name: 'Min',
type: 'bar', type: 'bar',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: minValues, data: minValues,
barWidth: 30, barWidth: 45,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: 'right',
textStyle: { color: '#00eaff', fontSize: 18, fontWeight: 'bold' }, textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c} m³' formatter: '{c}'
} }
}, },
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
}] }]
}; };
@ -708,14 +707,14 @@
$('#point-' + item.id + ' .map-tooltip').html(item.name + '<br>排污量: ' + item.value); $('#point-' + item.id + ' .map-tooltip').html(item.name + '<br>排污量: ' + item.value);
}); });
*/ */
}, 3000); }, 10000);
} }
function startRotation() { function startRotation() {
rotationTimer = setInterval(function() { rotationTimer = setInterval(function() {
currentFocusIndex = (currentFocusIndex + 1) % 10; currentFocusIndex = (currentFocusIndex + 1) % 10;
updateDetailView(); updateDetailView();
}, 5000); // Rotate every 5 seconds }, 10000); // Rotate every 5 seconds
} }
function updateDetailView() { function updateDetailView() {
@ -813,3 +812,4 @@
</script> </script>
</body> </body>