456 lines
17 KiB
HTML
456 lines
17 KiB
HTML
|
<!-- <%@ 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>
|