排污户大屏企业对接
This commit is contained in:
Rue Ji
@ -151,25 +151,24 @@
|
||||
.yaohao {
|
||||
position: absolute;
|
||||
top: 343px;
|
||||
width: 94px;
|
||||
width: 150px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: Gilroy;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.yaohao1 {
|
||||
left: 1317px;
|
||||
.D_PACDSYH {
|
||||
left: 1256px;
|
||||
}
|
||||
.yaohao2 {
|
||||
left: 1652px;
|
||||
.D_YiSNDSYH {
|
||||
left: 1591px;
|
||||
}
|
||||
.yaohao3 {
|
||||
left: 2056px;
|
||||
.D_CiLSNDSYH {
|
||||
left: 1924px;
|
||||
}
|
||||
|
||||
.Middle3 {
|
||||
@ -213,13 +212,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- 全屏提示遮罩 -->
|
||||
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||
<!-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||
<div class="tip-content">
|
||||
<div class="icon">🖥️</div>
|
||||
<h2>点击进入全屏展示</h2>
|
||||
<p>按 ESC 键可退出全屏</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="screen-container">
|
||||
<div class="left">
|
||||
<div>
|
||||
@ -249,9 +248,9 @@
|
||||
<div class="Middle1">
|
||||
<!-- 药耗 -->
|
||||
<div>
|
||||
<div class="yaohao yaohao1">300</div>
|
||||
<div class="yaohao yaohao2">200</div>
|
||||
<div class="yaohao yaohao3">1</div>
|
||||
<div class="yaohao D_PACDSYH"></div>
|
||||
<div class="yaohao D_YiSNDSYH"></div>
|
||||
<div class="yaohao D_CiLSNDSYH"></div>
|
||||
</div>
|
||||
|
||||
<!-- 质量指标 表格 -->
|
||||
@ -365,6 +364,143 @@
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<script>
|
||||
// ==================== 数据统一管理 ====================
|
||||
var pageData = {
|
||||
// 水量数据 (slqs)
|
||||
slqs: {
|
||||
jinri: 6040, // 今日水量
|
||||
zuori: 4197, // 昨日水量
|
||||
benyue: 12356 // 本月水量
|
||||
},
|
||||
|
||||
// 泥处理指标 (ncl)
|
||||
ncl: {
|
||||
val1: 0, // 泥处理指标1
|
||||
val2: 200, // 泥处理指标2
|
||||
val3: 4.89 // 泥处理指标3
|
||||
},
|
||||
|
||||
// 药耗数据 (yaohao)
|
||||
yaohao: {
|
||||
D_PACDSYH: 19800,
|
||||
D_YiSNDSYH: 2090,
|
||||
D_CiLSNDSYH: 1092,
|
||||
},
|
||||
|
||||
// 质量指标表格数据
|
||||
qualityTable: [
|
||||
{ param: "COD (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "TP (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "NH3–N (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "TN (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "PH (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "SS", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "温度(℃)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }
|
||||
],
|
||||
|
||||
// 七日水量图表数据
|
||||
sevenDaysChart: {
|
||||
xAxis: ["11-10", "11-11", "11-12", "11-13", "11-14", "11-15", "11-16", "11-17"],
|
||||
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600]
|
||||
},
|
||||
|
||||
// 泥处理图表数据
|
||||
nclChart: {
|
||||
xAxis: ["2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"],
|
||||
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260]
|
||||
},
|
||||
|
||||
// 质量图表数据
|
||||
qualityChart: {
|
||||
xAxis: ["11", "12", "13", "14", "15", "16", "17"],
|
||||
data: [8, 13, 9, 14, 21, 14, 18]
|
||||
}
|
||||
};
|
||||
|
||||
// 更新水量显示
|
||||
function updateSlqs() {
|
||||
$(".slqs-jinri").text(pageData.slqs.jinri);
|
||||
$(".slqs-zuori").text(pageData.slqs.zuori);
|
||||
$(".slqs-benyue").text(pageData.slqs.benyue);
|
||||
}
|
||||
|
||||
// 更新泥处理指标显示
|
||||
function updateNcl() {
|
||||
$(".ncl-val1").text(pageData.ncl.val1);
|
||||
$(".ncl-val2").text(pageData.ncl.val2);
|
||||
$(".ncl-val3").text(pageData.ncl.val3);
|
||||
}
|
||||
|
||||
// 更新药耗显示
|
||||
function updateYaohao() {
|
||||
$(".D_PACDSYH").text(pageData.yaohao.D_PACDSYH);
|
||||
$(".D_YiSNDSYH").text(pageData.yaohao.D_YiSNDSYH);
|
||||
$(".D_CiLSNDSYH").text(pageData.yaohao.D_CiLSNDSYH);
|
||||
}
|
||||
|
||||
// 更新质量指标表格
|
||||
function updateQualityTable() {
|
||||
var tbody = $(".quality-table tbody");
|
||||
tbody.empty();
|
||||
pageData.qualityTable.forEach(function(item) {
|
||||
var row = "<tr>" +
|
||||
"<td>" + item.param + "</td>" +
|
||||
"<td>" + item.current + "</td>" +
|
||||
"<td>" + item.avg + "</td>" +
|
||||
"<td>" + item.max + "</td>" +
|
||||
"<td>" + item.min + "</td>" +
|
||||
"<td>" + item.standard + "</td>" +
|
||||
"</tr>";
|
||||
tbody.append(row);
|
||||
});
|
||||
}
|
||||
|
||||
// 从接口获取数据并更新页面（示例方法，供后期调用）
|
||||
function fetchDataFromApi(apiUrl) {
|
||||
$.ajax({
|
||||
url: apiUrl,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
// 假设接口返回的数据格式如下：
|
||||
// {
|
||||
// slqs: { jinri: xxx, zuori: xxx, benyue: xxx },
|
||||
// ncl: { val1: xxx, val2: xxx, val3: xxx },
|
||||
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
|
||||
// qualityTable: [...],
|
||||
// sevenDaysChart: { xAxis: [...], data: [...] },
|
||||
// nclChart: { xAxis: [...], data: [...] },
|
||||
// qualityChart: { xAxis: [...], data: [...] }
|
||||
// }
|
||||
if (response) {
|
||||
if (response.slqs) pageData.slqs = response.slqs;
|
||||
if (response.ncl) pageData.ncl = response.ncl;
|
||||
if (response.yaohao) pageData.yaohao = response.yaohao;
|
||||
if (response.qualityTable) pageData.qualityTable = response.qualityTable;
|
||||
if (response.sevenDaysChart) pageData.sevenDaysChart = response.sevenDaysChart;
|
||||
if (response.nclChart) pageData.nclChart = response.nclChart;
|
||||
if (response.qualityChart) pageData.qualityChart = response.qualityChart;
|
||||
|
||||
refreshPage();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("获取数据失败:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新页面所有数据
|
||||
function refreshPage() {
|
||||
updateSlqs();
|
||||
updateNcl();
|
||||
updateYaohao();
|
||||
updateQualityTable();
|
||||
initSevenDaysChart();
|
||||
initNclChart();
|
||||
initQualityChart();
|
||||
}
|
||||
|
||||
// 进入全屏函数
|
||||
function enterFullscreen() {
|
||||
var elem = document.documentElement;
|
||||
@ -395,20 +531,25 @@
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// 初始化数据显示
|
||||
updateSlqs();
|
||||
updateNcl();
|
||||
updateYaohao();
|
||||
updateQualityTable();
|
||||
|
||||
// 初始化图表
|
||||
initSevenDaysChart();
|
||||
initNclChart();
|
||||
initQualityChart();
|
||||
});
|
||||
|
||||
// 七日水量图表
|
||||
function initSevenDaysChart() {
|
||||
var chartDom = document.getElementById("seven-days-chart");
|
||||
if (!chartDom) return;
|
||||
var myChart = echarts.init(chartDom);
|
||||
var dataAxis = [
|
||||
"11-10",
|
||||
"11-11",
|
||||
"11-12",
|
||||
"11-13",
|
||||
"11-14",
|
||||
"11-15",
|
||||
"11-16",
|
||||
"11-17",
|
||||
];
|
||||
var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
|
||||
var dataAxis = pageData.sevenDaysChart.xAxis;
|
||||
var data = pageData.sevenDaysChart.data;
|
||||
var option = {
|
||||
backgroundColor: "transparent",
|
||||
grid: {
|
||||
@ -514,10 +655,17 @@
|
||||
endValue: dataAxis[endIndex],
|
||||
});
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 泥处理图表
|
||||
function initNclChart() {
|
||||
var nclDom = document.getElementById("ncl-chart");
|
||||
if (nclDom) {
|
||||
var nclChart = echarts.init(nclDom, "dark");
|
||||
var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
|
||||
if (!nclDom) return;
|
||||
var nclChart = echarts.init(nclDom, "dark");
|
||||
var nclData = pageData.nclChart.data;
|
||||
var nclOption = {
|
||||
backgroundColor: "transparent",
|
||||
grid: {
|
||||
@ -537,18 +685,7 @@
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"2:00",
|
||||
"4:00",
|
||||
"6:00",
|
||||
"8:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
],
|
||||
data: pageData.nclChart.xAxis,
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: { color: "#2C3E50" },
|
||||
@ -601,14 +738,14 @@
|
||||
window.addEventListener("resize", function () {
|
||||
nclChart.resize();
|
||||
});
|
||||
}
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 质量图表
|
||||
function initQualityChart() {
|
||||
var qualityDom = document.getElementById("quality-chart");
|
||||
if (qualityDom) {
|
||||
var qualityChart = echarts.init(qualityDom);
|
||||
var qualityData = [8, 13, 9, 14, 21, 14, 18];
|
||||
if (!qualityDom) return;
|
||||
var qualityChart = echarts.init(qualityDom);
|
||||
var qualityData = pageData.qualityChart.data;
|
||||
var qualityOption = {
|
||||
backgroundColor: "transparent",
|
||||
grid: {
|
||||
@ -628,7 +765,7 @@
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["11", "12", "13", "14", "15", "16", "17"],
|
||||
data: pageData.qualityChart.xAxis,
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: { color: "#2C3E50" },
|
||||
@ -681,8 +818,7 @@
|
||||
window.addEventListener("resize", function () {
|
||||
qualityChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -304,13 +304,14 @@ 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="rank-module-container">
|
||||
<!-- Statistics -->
|
||||
@ -574,8 +575,7 @@ pageEncoding="UTF-8"%>
|
||||
areaName: item.company ? item.company.name || "" : "",
|
||||
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
||||
permitNum: item.permitNum || "",
|
||||
// ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
ventNum: 'DEV067' || "", // 排放编号，用于流量接口
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
trade: item.trade || "",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
||||
@ -624,7 +624,7 @@ pageEncoding="UTF-8"%>
|
||||
|
||||
var mpcode, days;
|
||||
if (type === 'instant') {
|
||||
mpcode = ventNum + '_LJLL'; // 瞬时流量
|
||||
mpcode = ventNum + '_SSLL'; // 瞬时流量
|
||||
days = 3;
|
||||
} else {
|
||||
mpcode = ventNum + '_LJLL'; // 累计流量
|
||||
@ -730,7 +730,7 @@ pageEncoding="UTF-8"%>
|
||||
allEnterprises = enterprises;
|
||||
|
||||
// 渲染地图点位
|
||||
// renderMapPoints();
|
||||
renderMapPoints();
|
||||
|
||||
// Start Loops - 每10秒刷新排行数据
|
||||
startDataSimulation();
|
||||
@ -775,9 +775,10 @@ pageEncoding="UTF-8"%>
|
||||
|
||||
function generateHistoryData(count) {
|
||||
var data = [];
|
||||
for (var k = 0; k < count; k++) {
|
||||
data.push(Math.floor(Math.random() * 500) + 50);
|
||||
}
|
||||
// for (var k = 0; k < count; k++) {
|
||||
// data.push(Math.floor(Math.random() * 500) + 50);
|
||||
// }
|
||||
console.log('======data', data)
|
||||
return data;
|
||||
}
|
||||
|
||||
@ -793,6 +794,7 @@ pageEncoding="UTF-8"%>
|
||||
.slice(0, 10);
|
||||
}
|
||||
|
||||
// 渲染排行图表
|
||||
function renderRankingChart() {
|
||||
var maxNames = [];
|
||||
var maxValues = [];
|
||||
@ -960,6 +962,7 @@ pageEncoding="UTF-8"%>
|
||||
myChartRanking.setOption(option);
|
||||
}
|
||||
|
||||
// 渲染地图点位
|
||||
function renderMapPoints() {
|
||||
var html = "";
|
||||
allEnterprises.forEach((item) => {
|
||||
@ -1000,12 +1003,14 @@ pageEncoding="UTF-8"%>
|
||||
$("#mapContainer").html(html);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
$("#historyModal").fadeOut();
|
||||
}
|
||||
|
||||
var modalChartInstance = null;
|
||||
|
||||
// 显示弹窗
|
||||
function showHistoryModal(type, id) {
|
||||
var ent = allEnterprises.find((e) => e.id === id);
|
||||
if (!ent) return;
|
||||
@ -1090,6 +1095,7 @@ pageEncoding="UTF-8"%>
|
||||
modalChartInstance.setOption(option);
|
||||
}
|
||||
|
||||
// 处理地图点击事件
|
||||
function handleMapClick(id) {
|
||||
// Find if this enterprise is in currentMaxData
|
||||
var index = currentMaxData.findIndex((e) => e.id === id);
|
||||
|
||||
Reference in New Issue
Block a user