728 lines
23 KiB
HTML
728 lines
23 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> -->
|
||
<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; /* 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;
|
||
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: 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 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: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
show: true,
|
||
// lineStyle: {
|
||
// color: 'rgba(255, 255, 255, 0.3)'
|
||
// }
|
||
},
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
// axisTick: {
|
||
// show: false
|
||
// }
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "长度(m)",
|
||
// nameTextStyle: {
|
||
// color: '#fff',
|
||
// padding: [0, 0, 0, 20]
|
||
// },
|
||
// axisLabel: {
|
||
// color: '#fff',
|
||
// fontSize: 14
|
||
// },
|
||
// splitLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: 'rgba(255, 255, 255, 0.1)'
|
||
// }
|
||
// },
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 18,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
dataZoom: [{ type: "inside" }],
|
||
series: [
|
||
{
|
||
data: data,
|
||
type: "bar",
|
||
barWidth: "40%",
|
||
// itemStyle: {
|
||
// color: '#FF9900',
|
||
// borderColor: '#FF9900',
|
||
// borderWidth: 1
|
||
// },
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#46F2FF" },
|
||
{ offset: 1, color: "#0B4DB5" },
|
||
]),
|
||
shadowColor: "rgba(0, 0, 0, 0.3)",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#6af8ff" },
|
||
{ offset: 1, color: "#1560d6" },
|
||
]),
|
||
},
|
||
},
|
||
// markPoint: {
|
||
// symbol: 'pin',
|
||
// symbolSize: 50,
|
||
// label: {
|
||
// show: true,
|
||
// color: '#fff',
|
||
// fontSize: 12
|
||
// },
|
||
// itemStyle: {
|
||
// color: '#FF9900'
|
||
// },
|
||
// 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: '#FF9900'
|
||
// },
|
||
// lineStyle: {
|
||
// type: 'dotted',
|
||
// color: '#FF9900'
|
||
// }
|
||
// }
|
||
},
|
||
// {
|
||
// type: 'bar',
|
||
// barGap: '-100%',
|
||
// data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
|
||
// itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
|
||
// silent: true
|
||
// }
|
||
],
|
||
};
|
||
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();
|
||
}
|
||
}
|
||
|
||
function initMap() {
|
||
// 初始化地图
|
||
map = new T.Map('map-container');
|
||
// 设置中心点和缩放级别 (金山卫区域)
|
||
map.centerAndZoom(new T.LngLat(121.340000, 30.740000), 14);
|
||
// 启用滚轮缩放
|
||
map.enableScrollWheelZoom();
|
||
|
||
// 加载转换后的 GeoJSON 数据
|
||
loadGeoJSON("pipeline_data.geojson");
|
||
}
|
||
|
||
function loadGeoJSON(url) {
|
||
$.getJSON(url, function(geojson) {
|
||
|
||
if (!geojson || !geojson.features) {
|
||
console.error("Invalid GeoJSON data");
|
||
return;
|
||
}
|
||
|
||
geojson.features.forEach(function(feature) {
|
||
var props = feature.properties;
|
||
var geometry = feature.geometry;
|
||
|
||
if (geometry.type === "LineString") {
|
||
var points = [];
|
||
geometry.coordinates.forEach(function(coord) {
|
||
// GeoJSON 通常是 [lng, lat]
|
||
points.push(new T.LngLat(coord[0], coord[1]));
|
||
});
|
||
|
||
// 根据属性设置颜色 (假设 GeoJSON 包含 type 属性)
|
||
// 如果没有 type，默认蓝色
|
||
var type = props.type || 'unknown';
|
||
var color = "#0000FF";
|
||
if (type.indexOf('雨水') > -1) color = "#00FFFF";
|
||
if (type.indexOf('污水') > -1) color = "#FF00FF";
|
||
|
||
var line = new T.Polyline(points, {
|
||
color: color,
|
||
weight: 3,
|
||
opacity: 0.9,
|
||
lineStyle: 'solid'
|
||
});
|
||
map.addOverLay(line);
|
||
|
||
// 添加标注和流向
|
||
// 构造一个模拟的 pipe 对象传给辅助函数
|
||
var pipeData = {
|
||
diameter: props.diameter || 'Unknown',
|
||
type: type
|
||
};
|
||
addPipeLabelAndArrow(map, pipeData, points, color);
|
||
}
|
||
});
|
||
}).fail(function(jqxhr, textStatus, error) {
|
||
var err = textStatus + ", " + error;
|
||
console.error("Request Failed: " + err);
|
||
// 如果加载失败，回退到模拟数据演示
|
||
console.log("Loading mock data as fallback...");
|
||
var pipelines = generateMockPipelines();
|
||
renderPipelines(pipelines);
|
||
});
|
||
}
|
||
|
||
// 提取原有的绘制逻辑为单独函数，用于回退
|
||
function renderPipelines(pipelines) {
|
||
pipelines.forEach(function(pipe) {
|
||
var points = [];
|
||
pipe.path.forEach(function(coord) {
|
||
points.push(new T.LngLat(coord[0], coord[1]));
|
||
});
|
||
|
||
var color = "#0000FF";
|
||
if (pipe.type === '雨水') color = "#00FFFF";
|
||
if (pipe.type === '污水') color = "#FF00FF";
|
||
|
||
var line = new T.Polyline(points, {
|
||
color: color,
|
||
weight: 3,
|
||
opacity: 0.9,
|
||
lineStyle: 'solid'
|
||
});
|
||
map.addOverLay(line);
|
||
addPipeLabelAndArrow(map, pipe, points, color);
|
||
});
|
||
}
|
||
|
||
function addPipeLabelAndArrow(map, pipe, points, color) {
|
||
// 计算中心点
|
||
if (points.length < 2) return;
|
||
var p1 = points[0];
|
||
var p2 = points[points.length - 1];
|
||
// 简单的取两端点中点（假设直线）
|
||
var centerLng = (p1.getLng() + p2.getLng()) / 2;
|
||
var centerLat = (p1.getLat() + p2.getLat()) / 2;
|
||
var center = new T.LngLat(centerLng, centerLat);
|
||
|
||
// 计算角度
|
||
// var angle = Math.atan2(p2.getLat() - p1.getLat(), p2.getLng() - p1.getLng()) * 180 / Math.PI;
|
||
|
||
// 添加文字标注 (DN + 材质)
|
||
var typeStr = pipe.type || '';
|
||
if (typeof pipe.type === 'string' && pipe.type.indexOf('雨水') > -1) typeStr = 'PVC';
|
||
else if (typeof pipe.type === 'string' && pipe.type.indexOf('污水') > -1) typeStr = '砼';
|
||
|
||
var labelText = "DN" + pipe.diameter + "-" + typeStr;
|
||
var label = new T.Label({
|
||
text: labelText,
|
||
position: center,
|
||
offset: new T.Point(0, -10)
|
||
});
|
||
label.setBackgroundColor("transparent");
|
||
label.setBorderColor("transparent");
|
||
label.setFontColor(color);
|
||
label.setFontSize(12);
|
||
label.setTitle(labelText);
|
||
map.addOverLay(label);
|
||
|
||
// 添加箭头
|
||
var arrowLabel = new T.Label({
|
||
text: "➤",
|
||
position: center,
|
||
offset: new T.Point(0, 0)
|
||
});
|
||
arrowLabel.setBackgroundColor("transparent");
|
||
arrowLabel.setBorderColor("transparent");
|
||
arrowLabel.setFontColor(color);
|
||
arrowLabel.setFontSize(14);
|
||
map.addOverLay(arrowLabel);
|
||
}
|
||
|
||
function generateMockPipelines() {
|
||
var pipes = [];
|
||
var centerLng = 121.340000;
|
||
var centerLat = 30.740000;
|
||
|
||
for (var i = 0; i < 100; i++) {
|
||
var startLng = centerLng + (Math.random() - 0.5) * 0.04;
|
||
var startLat = centerLat + (Math.random() - 0.5) * 0.04;
|
||
var endLng = startLng + (Math.random() - 0.5) * 0.01;
|
||
var endLat = startLat + (Math.random() - 0.5) * 0.01;
|
||
|
||
pipes.push({
|
||
id: i,
|
||
type: Math.random() > 0.5 ? '雨水' : '污水',
|
||
diameter: [300, 400, 500, 600, 800][Math.floor(Math.random() * 5)],
|
||
path: [[startLng, startLat], [endLng, endLat]]
|
||
});
|
||
}
|
||
return pipes;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|