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%;
height: 100%;
overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
}
.screen-container {
width: 6500px;
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-repeat: no-repeat;
position: relative;
@ -60,9 +62,9 @@
</head>
<body>
<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-12356">12356</div>
<div class="val-12356">12356</div> -->
</div>
</body>
</html>

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

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

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

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

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>
<html>
<head>
@ -10,11 +11,13 @@
width: 100%;
height: 100%;
overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
}
.screen-container {
width: 6500px;
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-repeat: no-repeat;
position: relative;
@ -59,9 +62,9 @@
</head>
<body>
<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-12356">12356</div>
<div class="val-12356">12356</div> -->
</div>
</body>
</html>

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

@ -4,8 +4,10 @@
<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>
<!-- <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="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<style>
body, html {
margin: 0;
@ -13,11 +15,13 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: #030829;
}
.screen-container {
width: 6500px;
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-repeat: no-repeat;
position: relative;
@ -236,14 +240,17 @@
}
},
data: [
{ value: 200, name: '雨水管' },
{ value: 180, name: '污水管' },
{ value: 150, name: '给水管' },
{ value: 120, name: '电力管' },
{ value: 100, name: '燃气管' },
{ value: 80, name: '通信管' },
{ value: 60, name: '热力管' },
{ value: 40, name: '工业管' }
{ value: 335, name: 'II级钢筋混凝土管 承插接口' },
{ value: 310, name: '焊接钢管 焊接接口' },
{ value: 274, name: '高密度聚乙烯双壁波纹管' },
{ value: 235, name: '聚乙烯PE管' },
{ value: 200, name: 'II级钢筋混凝土管' },
{ value: 180, name: '高密度聚乙烯缠绕管' },
{ value: 150, 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>
<html>
<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>
<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()%>/JS/echarts3.0.js"></script> -->
<style>
body, html {
margin: 0;
@ -18,7 +21,8 @@
.screen-container {
width: 6500px;
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-repeat: no-repeat;
position: relative;
@ -445,18 +449,15 @@
// Process Max Data (Top 10 High)
currentMaxData.forEach((item, index) => {
maxNames.push(item.name);
var isHighlighted = (index === currentFocusIndex);
var colorStart = isHighlighted ? '#ffffff' : '#ffaa00';
var colorEnd = isHighlighted ? '#cccccc' : '#ff5500';
maxValues.push({
value: item.value,
itemStyle: {
normal: {
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: {
normal: {
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 = {
title: [{
text: '近30天排污量最大 Top 10',
left: 'center',
text: '近30日排污量 TOP 10 (最大)',
left: '25%',
top: '2%',
textStyle: { color: '#ffaa00', fontSize: 24, fontWeight: 'bold' }
textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}, {
text: '近30天排污量最小 Top 10',
left: 'center',
top: '52%',
textStyle: { color: '#00eaff', fontSize: 24, fontWeight: 'bold' }
text: '近30日排污量 TOP 10 (最小)',
left: '75%',
top: '2%',
textAlign: 'center',
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
}],
grid: [{
top: '10%',
left: '5%',
right: '10%',
bottom: '53%',
top: '12%',
left: '2%',
right: '52%',
bottom: '5%',
containLabel: true
}, {
top: '60%',
left: '5%',
right: '10%',
top: '12%',
left: '52%',
right: '2%',
bottom: '5%',
containLabel: true
}],
@ -518,7 +521,7 @@
type: 'category',
data: maxNames,
inverse: true,
axisLabel: { color: '#fff', fontSize: 18 },
axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false },
axisTick: { show: false },
gridIndex: 0
@ -526,7 +529,7 @@
type: 'category',
data: minNames,
inverse: true,
axisLabel: { color: '#fff', fontSize: 18 },
axisLabel: { color: '#fff', fontSize: 20 },
axisLine: { show: false },
axisTick: { show: false },
gridIndex: 1
@ -537,36 +540,32 @@
xAxisIndex: 0,
yAxisIndex: 0,
data: maxValues,
barWidth: 30,
barWidth: 45,
label: {
normal: {
show: true,
position: 'right',
textStyle: { color: '#ffaa00', fontSize: 18, fontWeight: 'bold' },
formatter: '{c} m³'
textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c}'
}
},
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}, {
name: 'Min',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: minValues,
barWidth: 30,
barWidth: 45,
label: {
normal: {
show: true,
position: 'right',
textStyle: { color: '#00eaff', fontSize: 18, fontWeight: 'bold' },
formatter: '{c} m³'
textStyle: { color: '#ffffff', fontSize: 20 },
formatter: '{c}'
}
},
itemStyle: { normal: { barBorderRadius: [0, 15, 15, 0] } },
animationDuration: 1000,
animationDurationUpdate: 1000
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}]
};
@ -708,14 +707,14 @@
$('#point-' + item.id + ' .map-tooltip').html(item.name + '<br>排污量: ' + item.value);
});
*/
}, 3000);
}, 10000);
}
function startRotation() {
rotationTimer = setInterval(function() {
currentFocusIndex = (currentFocusIndex + 1) % 10;
updateDetailView();
}, 5000); // Rotate every 5 seconds
}, 10000); // Rotate every 5 seconds
}
function updateDetailView() {
@ -813,3 +812,4 @@
</script>
</body>