排污户大屏企业对接
This commit is contained in:
Rue Ji
@ -154,13 +154,13 @@ pageEncoding="UTF-8"%>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 全屏提示遮罩 -->
|
||||
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||
<div class="tip-content">
|
||||
<div class="icon">🖥️</div>
|
||||
<h2>点击进入全屏展示</h2>
|
||||
<p>按 ESC 键可退出全屏</p>
|
||||
</div>
|
||||
</div>
|
||||
<%-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">--%>
|
||||
<%-- <div class="tip-content">--%>
|
||||
<%-- <div class="icon">🖥️</div>--%>
|
||||
<%-- <h2>点击进入全屏展示</h2>--%>
|
||||
<%-- <p>按 ESC 键可退出全屏</p>--%>
|
||||
<%-- </div>--%>
|
||||
<%-- </div>--%>
|
||||
<div class="screen-container">
|
||||
<div class="stat-card card-1">53829.5</div>
|
||||
<div class="stat-card card-2">2495</div>
|
||||
@ -198,6 +198,119 @@ pageEncoding="UTF-8"%>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ==================== 数据统一管理 ====================
|
||||
var pageData = {
|
||||
// 统计卡片数据
|
||||
statCards: {
|
||||
card1: 100,
|
||||
card2: 200,
|
||||
card3: 400,
|
||||
},
|
||||
|
||||
// 饼图1数据 - 管线类型统计
|
||||
pieChart1: [
|
||||
{ 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: "预应力钢筒混凝土管" }
|
||||
],
|
||||
|
||||
// 饼图2数据 - 管线类型统计2
|
||||
pieChart2: [
|
||||
{ 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: "预应力钢筒混凝土管" }
|
||||
],
|
||||
|
||||
// 仪表盘数据
|
||||
gaugeCharts: {
|
||||
gauge3: 53829.5,
|
||||
gauge4: 12345.6
|
||||
},
|
||||
|
||||
// 柱状图数据
|
||||
barCharts: {
|
||||
bar5: [
|
||||
3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
|
||||
1000, 500, 2563, 4000
|
||||
],
|
||||
bar6: [
|
||||
2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
|
||||
800, 400, 2000, 3000
|
||||
]
|
||||
},
|
||||
|
||||
// 柱状图X轴数据
|
||||
barXAxis: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15"]
|
||||
};
|
||||
|
||||
// 更新统计卡片显示
|
||||
function updateStatCards() {
|
||||
$(".card-1").text(pageData.statCards.card1);
|
||||
$(".card-2").text(pageData.statCards.card2);
|
||||
$(".card-3").text(pageData.statCards.card3);
|
||||
}
|
||||
|
||||
// 从接口获取数据并更新页面（示例方法，供后期调用）
|
||||
function fetchDataFromApi(apiUrl) {
|
||||
$.ajax({
|
||||
url: apiUrl,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
// 假设接口返回的数据格式如下：
|
||||
// {
|
||||
// statCards: { card1: xxx, card2: xxx, card3: xxx },
|
||||
// pieChart1: [...],
|
||||
// pieChart2: [...],
|
||||
// gaugeCharts: { gauge3: xxx, gauge4: xxx },
|
||||
// barCharts: { bar5: [...], bar6: [...] }
|
||||
// }
|
||||
if (response) {
|
||||
// 更新数据
|
||||
if (response.statCards) pageData.statCards = response.statCards;
|
||||
if (response.pieChart1) pageData.pieChart1 = response.pieChart1;
|
||||
if (response.pieChart2) pageData.pieChart2 = response.pieChart2;
|
||||
if (response.gaugeCharts) pageData.gaugeCharts = response.gaugeCharts;
|
||||
if (response.barCharts) pageData.barCharts = response.barCharts;
|
||||
if (response.barXAxis) pageData.barXAxis = response.barXAxis;
|
||||
|
||||
// 刷新页面
|
||||
refreshPage();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("获取数据失败:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新页面所有图表
|
||||
function refreshPage() {
|
||||
updateStatCards();
|
||||
initPieChart();
|
||||
initPieChart2();
|
||||
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
|
||||
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
|
||||
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
|
||||
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
|
||||
}
|
||||
|
||||
// 进入全屏函数
|
||||
function enterFullscreen() {
|
||||
var elem = document.documentElement;
|
||||
@ -226,24 +339,16 @@ pageEncoding="UTF-8"%>
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
// 初始化统计数据
|
||||
updateStatCards();
|
||||
|
||||
// 初始化图表
|
||||
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,
|
||||
],
|
||||
);
|
||||
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
|
||||
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
|
||||
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
|
||||
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
|
||||
|
||||
// Double click to toggle fullscreen
|
||||
$("body").on("dblclick", function () {
|
||||
@ -294,19 +399,7 @@ pageEncoding="UTF-8"%>
|
||||
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: "预应力钢筒混凝土管" },
|
||||
],
|
||||
data: pageData.pieChart1,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -356,19 +449,7 @@ pageEncoding="UTF-8"%>
|
||||
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: "预应力钢筒混凝土管" },
|
||||
],
|
||||
data: pageData.pieChart2,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -476,23 +557,7 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
],
|
||||
data: pageData.barXAxis,
|
||||
axisLine: {
|
||||
lineStyle: { color: "#2C3E50" },
|
||||
show: true,
|
||||
|
||||
Reference in New Issue
Block a user