2026-03-05 00:35:31 +08:00
|
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
|
|
|
pageEncoding="UTF-8"%>
|
|
|
|
|
|
<!doctype html>
|
2026-02-04 23:46:37 +08:00
|
|
|
|
<html>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
2026-02-04 23:46:37 +08:00
|
|
|
|
<title>区域管线大屏展示</title>
|
2026-02-06 16:30:47 +08:00
|
|
|
|
<!-- <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> -->
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<script
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
src="../../node_modules/jquery/dist/jquery.min.js"
|
|
|
|
|
|
></script>
|
2026-02-06 16:30:47 +08:00
|
|
|
|
<script type="text/javascript" src="../../JS/echarts3.0.js"></script>
|
2026-02-04 23:46:37 +08:00
|
|
|
|
<style>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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%;
|
|
|
|
|
|
}
|
2026-02-04 23:46:37 +08:00
|
|
|
|
</style>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2026-02-04 23:46:37 +08:00
|
|
|
|
<div class="screen-container">
|
2026-03-05 00:35:31 +08:00
|
|
|
|
<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>
|
2026-02-04 23:46:37 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
$(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);
|
2026-02-04 23:46:37 +08:00
|
|
|
|
});
|
2026-03-05 00:35:31 +08:00
|
|
|
|
});
|
2026-02-04 23:46:37 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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);
|
|
|
|
|
|
}
|
2026-02-04 23:46:37 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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
|
2026-02-04 23:46:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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);
|
2026-02-04 23:46:37 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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);
|
|
|
|
|
|
}
|
2026-02-04 23:46:37 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
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();
|
2026-02-04 23:46:37 +08:00
|
|
|
|
}
|
2026-03-05 00:35:31 +08:00
|
|
|
|
}
|
2026-02-04 23:46:37 +08:00
|
|
|
|
|
2026-03-05 00:35:31 +08:00
|
|
|
|
function exitFullscreen() {
|
|
|
|
|
|
if (document.exitFullscreen) {
|
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
|
|
|
document.mozCancelFullScreen();
|
|
|
|
|
|
} else if (document.webkitExitFullscreen) {
|
|
|
|
|
|
document.webkitExitFullscreen();
|
2026-02-04 23:46:37 +08:00
|
|
|
|
}
|
2026-03-05 00:35:31 +08:00
|
|
|
|
}
|
2026-03-10 21:51:19 +08:00
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
2026-02-04 23:46:37 +08:00
|
|
|
|
</script>
|
2026-03-05 00:35:31 +08:00
|
|
|
|
</body>
|
2026-02-04 23:46:37 +08:00
|
|
|
|
</html>
|
