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-04 23:46:37 +08:00
parent 79a8fc11cf
commit 14c9bd8ce0
14 changed files with 2566 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
src/main/webapp/jsp/z_bigScreen/bigScreen2.html Normal file
View File

@ -0,0 +1,455 @@
<!-- <%@ 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>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.screen-container {
width: 6500px;
height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.stat-card {
position: absolute;
top: 257px;
/* left: 1910px; */
width: 200px;
height: 71px;
color: rgba(255, 255, 255, 1);
font-family: Gilroy;
font-weight: 500;
font-size: 60px;
}
.card-1 { left: 1910px; }
.card-2 { left: 2832px; }
.card-3 { left: 3754px; }
.ring-chart-wrapper {
position: absolute;
top: 563px;
left: 1880px;
width: 662px;
height: 455px;
}
.pie-chart-wrapper-2 {
position: absolute;
top: 563px;
left: 2572px;
width: 662px;
height: 455px;
}
.gauge-chart-wrapper-3 {
position: absolute;
top: 563px;
left: 3264px;
width: 662px;
height: 455px;
}
.gauge-chart-wrapper-4 {
position: absolute;
top: 563px;
left: 3956px;
width: 662px;
height: 455px;
}
.bar-chart-wrapper-5 {
position: absolute;
top: 1158px;
left: 1881px;
width: 1353px;
height: 592px;
}
.bar-chart-wrapper-6 {
position: absolute;
top: 1158px;
left: 3265px;
width: 1353px;
height: 592px;
}
.ring-chart-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
mix-blend-mode: normal;
/* border: 1px solid rgba(27, 126, 242, 1); */
box-sizing: border-box;
/* background: rgba(27, 126, 242, 0.6); */
}
#ring-chart-content, #pie-chart-content-2, #gauge-chart-content-3, #gauge-chart-content-4, #bar-chart-content-5, #bar-chart-content-6 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="screen-container">
<div class="stat-card card-1">53829.5</div>
<div class="stat-card card-2">2495</div>
<div class="stat-card card-3">2460</div>
<div class="ring-chart-wrapper">
<div class="ring-chart-bg"></div>
<div id="ring-chart-content"></div>
</div>
<div class="pie-chart-wrapper-2">
<div class="ring-chart-bg"></div>
<div id="pie-chart-content-2"></div>
</div>
<div class="gauge-chart-wrapper-3">
<div class="ring-chart-bg"></div>
<div id="gauge-chart-content-3"></div>
</div>
<div class="gauge-chart-wrapper-4">
<div class="ring-chart-bg"></div>
<div id="gauge-chart-content-4"></div>
</div>
<div class="bar-chart-wrapper-5">
<div class="ring-chart-bg"></div>
<div id="bar-chart-content-5"></div>
</div>
<div class="bar-chart-wrapper-6">
<div class="ring-chart-bg"></div>
<div id="bar-chart-content-6"></div>
</div>
</div>
<script>
$(document).ready(function() {
launchIntoFullscreen(document.documentElement);
initPieChart();
initPieChart2();
initGaugeChart('gauge-chart-content-3', 53829.5);
initGaugeChart('gauge-chart-content-4', 12345.6);
initBarChart('bar-chart-content-5', [3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000, 1000, 500, 2563, 4000]);
initBarChart('bar-chart-content-6', [2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500, 800, 400, 2000, 3000]);
// Double click to toggle fullscreen
$('body').on('dblclick', function() {
launchIntoFullscreen(document.documentElement);
});
});
function initPieChart() {
var chartDom = document.getElementById('ring-chart-content');
var myChart = echarts.init(chartDom);
var option = {
color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
],
series: [
{
name: '管线类型统计',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
formatter: '{b}',
fontSize: 14,
lineHeight: 20,
align: 'left'
},
labelLine: {
show: true,
length: 20,
length2: 30,
lineStyle: {
type: 'solid'
}
},
data: [
{ 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: '预应力钢筒混凝土管' }
]
}
]
};
myChart.setOption(option);
}
function initPieChart2() {
var chartDom = document.getElementById('pie-chart-content-2');
var myChart = echarts.init(chartDom);
var option = {
color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
],
series: [
{
name: '管线类型统计2',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
formatter: '{b}',
fontSize: 14,
lineHeight: 20,
align: 'left'
},
labelLine: {
show: true,
length: 20,
length2: 30,
lineStyle: {
type: 'solid'
}
},
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: '工业管' }
]
}
]
};
myChart.setOption(option);
}
function initGaugeChart(domId, value) {
var chartDom = document.getElementById(domId);
var myChart = echarts.init(chartDom);
var option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 300,
splitNumber: 6,
radius: '90%',
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 40,
color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(65, 108, 243, 1)' },
{ offset: 1, color: 'rgba(0, 68, 160, 1)' }
])]]
}
},
pointer: {
show: true,
length: '60%',
width: 6,
itemStyle: {
color: '#00d4ff'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: '#00d4ff',
fontSize: 14,
distance: -60,
formatter: function (value) {
return value;
}
},
detail: {
show: true,
offsetCenter: [0, '40%'],
fontSize: 30,
color: '#fff',
formatter: '{value} m'
},
data: [{
value: value,
name: ''
}]
}
]
};
// Adjust value if it exceeds max for visual representation (optional)
// For now, we just set the data value as is, but if it's large like 53829.5,
// the pointer will be pegged at max.
// If the gauge is just a visual indicator and the number is what matters:
// Let's set the gauge pointer to max if value > 300
if (value > 300) {
option.series[0].data[0].value = 300; // Pointer at max
option.series[0].detail.formatter = value + ' m'; // Show real value
}
myChart.setOption(option);
}
function initBarChart(domId, data) {
var chartDom = document.getElementById(domId);
var myChart = echarts.init(chartDom);
// Find max value for markPoint (example logic)
var maxVal = Math.max(...data);
var minVal = Math.min(...data);
var option = {
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'],
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
color: '#fff',
fontSize: 14
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: '长度(m)',
nameTextStyle: {
color: '#fff',
padding: [0, 0, 0, 20]
},
axisLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
},
series: [
{
data: data,
type: 'bar',
barWidth: '40%',
itemStyle: {
color: 'rgba(255, 170, 0, 0.4)',
borderColor: '#ffaa00',
borderWidth: 1
},
markPoint: {
symbol: 'pin',
symbolSize: 50,
label: {
show: true,
color: '#fff',
fontSize: 12
},
itemStyle: {
color: '#ffaa00'
},
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
symbol: 'none',
data: [
{ yAxis: 2563.31, name: 'Average' }
],
label: {
show: true,
position: 'end',
formatter: '{c}',
color: '#ffaa00'
},
lineStyle: {
type: 'dotted',
color: '#ffaa00'
}
}
}
]
};
myChart.setOption(option);
}
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>