xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

水厂大屏数据ES查询

Browse Source
This commit is contained in:
Rue Ji
2026-03-10 00:49:24 +08:00
parent 29a836ce68
commit 2a8318599a
1 changed files with 478 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

683
src/main/webapp/jsp/bigScreen.jsp
View File

@ -1,11 +1,23 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>水厂大屏展示</title> <title>水厂大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <script
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></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="<%=request.getContextPath()%>/JS/main/main_js.js"
charset="utf-8"
></script>
<!-- <script <!-- <script
type="text/javascript" type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js" src="../../node_modules/jquery/dist/jquery.min.js"
@ -24,7 +36,7 @@
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png'); background-image: url("<%=request.getContextPath()%>/IMG/screen1.png");
/* background-image: url("../../IMG/screen1.png"); */ /* background-image: url("../../IMG/screen1.png"); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -196,7 +208,7 @@
.fullscreen-overlay .tip-content h2 { .fullscreen-overlay .tip-content h2 {
font-size: 48px; font-size: 48px;
margin-bottom: 20px; margin-bottom: 20px;
color: #46F2FF; color: #46f2ff;
} }
.fullscreen-overlay .tip-content p { .fullscreen-overlay .tip-content p {
font-size: 24px; font-size: 24px;
@ -208,6 +220,7 @@
} }
.Middle2-value { .Middle2-value {
position: absolute; position: absolute;
left: 2450px;
width: 100px; width: 100px;
height: 31px; height: 31px;
color: rgba(41, 241, 250, 1); color: rgba(41, 241, 250, 1);
@ -220,6 +233,69 @@
top: 190.5px; top: 190.5px;
left: 2470px; left: 2470px;
} }
#D_QueYCRJY1 {
top: 242.5px;
}
#D_HaoYCRJY {
top: 294.5px;
}
#D_HaoYCRJY2 {
top: 346.5px;
}
#D_HaoYCWNND {
top: 398.5px;
}
#D_MoCWNND {
top: 450.5px;
}
#D_BengZYW {
top: 571px;
left: 2470px;
}
#D_TiSB101DL {
top: 622px;
left: 2487px;
}
#D_TiSB102DL {
top: 673px;
left: 2487px;
}
#D_TiSB103DL {
top: 724px;
left: 2487px;
}
#D_NingMSJYLL {
top: 846px;
left: 2465px;
}
#D_YaLSQNLL {
top: 898px;
left: 2465px;
}
#D_NingMSCGYW {
top: 1020px;
left: 2481px;
}
#D_YaLSQNLL {
top: 1071px;
left: 2481px;
}
#D_CiLSNJYLL {
top: 1190px;
left: 2466px;
}
#D_PACJYLL {
top: 1241px;
left: 2466px;
}
#D_CiLSNCGYW {
top: 1364px;
left: 2481px;
}
#D_PACCGYW {
top: 1417px;
left: 2481px;
}
</style> </style>
</head> </head>
<body> <body>
@ -378,11 +454,13 @@
</div> </div>
</div> </div>
<!-- 中间图表 --> <!-- 中间图表 -->
<div class="Middle3"> <div class="Middle3">
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> --> <!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" /> <img
src="<%=request.getContextPath()%>/IMG/monitor.png"
style="width: 100%; height: 100%"
/>
</div> </div>
<div class="Middle4"> <div class="Middle4">
@ -406,16 +484,16 @@
var pageData = { var pageData = {
// 水量数据 (slqs) // 水量数据 (slqs)
slqs: { slqs: {
todayTotal: 6040, // 今日水量 todayTotal: 6040, // 今日水量
yesterdayTotal: 4197, // 昨日水量 yesterdayTotal: 4197, // 昨日水量
monthTotal: 12356 // 本月水量 monthTotal: 12356, // 本月水量
}, },
// 泥处理指标 (ncl) // 泥处理指标 (ncl)
ncl: { ncl: {
val1: 0, // 泥处理指标1 val1: 0, // 泥处理指标1
val2: 200, // 泥处理指标2 val2: 200, // 泥处理指标2
val3: 4.89 // 泥处理指标3 val3: 4.89, // 泥处理指标3
}, },
// 药耗数据 (yaohao) // 药耗数据 (yaohao)
@ -427,32 +505,101 @@
// 质量指标表格数据 // 质量指标表格数据
qualityTable: [ 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: "COD (mg/L)",
{ param: "NH3–N (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }, current: 13.186,
{ param: "TN (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }, avg: 12.996,
{ param: "PH (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }, max: 14.666,
{ param: "SS", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }, min: 11.92,
{ param: "温度(℃)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" } 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: { sevenDaysChart: {
xAxis: ["11-10", "11-11", "11-12", "11-13", "11-14", "11-15", "11-16", "11-17"], xAxis: [
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600] "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: { nclChart: {
xAxis: ["2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"], xAxis: [
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260] "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: { qualityChart: {
xAxis: ["11", "12", "13", "14", "15", "16", "17"], xAxis: ["11", "12", "13", "14", "15", "16", "17"],
data: [8, 13, 9, 14, 21, 14, 18] data: [8, 13, 9, 14, 21, 14, 18],
} },
}; };
// 更新水量显示 // 更新水量显示
@ -480,14 +627,27 @@
function updateQualityTable() { function updateQualityTable() {
var tbody = $(".quality-table tbody"); var tbody = $(".quality-table tbody");
tbody.empty(); tbody.empty();
pageData.qualityTable.forEach(function(item) { pageData.qualityTable.forEach(function (item) {
var row = "<tr>" + var row =
"<td>" + item.param + "</td>" + "<tr>" +
"<td>" + item.current + "</td>" + "<td>" +
"<td>" + item.avg + "</td>" + item.param +
"<td>" + item.max + "</td>" + "</td>" +
"<td>" + item.min + "</td>" + "<td>" +
"<td>" + item.standard + "</td>" + item.current +
"</td>" +
"<td>" +
item.avg +
"</td>" +
"<td>" +
item.max +
"</td>" +
"<td>" +
item.min +
"</td>" +
"<td>" +
item.standard +
"</td>" +
"</tr>"; "</tr>";
tbody.append(row); tbody.append(row);
}); });
@ -499,7 +659,7 @@
url: apiUrl, url: apiUrl,
type: "GET", type: "GET",
dataType: "json", dataType: "json",
success: function(response) { success: function (response) {
// 假设接口返回的数据格式如下： // 假设接口返回的数据格式如下：
// { // {
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx }, // slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
@ -514,17 +674,20 @@
if (response.slqs) pageData.slqs = response.slqs; if (response.slqs) pageData.slqs = response.slqs;
if (response.ncl) pageData.ncl = response.ncl; if (response.ncl) pageData.ncl = response.ncl;
if (response.yaohao) pageData.yaohao = response.yaohao; if (response.yaohao) pageData.yaohao = response.yaohao;
if (response.qualityTable) pageData.qualityTable = response.qualityTable; if (response.qualityTable)
if (response.sevenDaysChart) pageData.sevenDaysChart = response.sevenDaysChart; pageData.qualityTable = response.qualityTable;
if (response.sevenDaysChart)
pageData.sevenDaysChart = response.sevenDaysChart;
if (response.nclChart) pageData.nclChart = response.nclChart; if (response.nclChart) pageData.nclChart = response.nclChart;
if (response.qualityChart) pageData.qualityChart = response.qualityChart; if (response.qualityChart)
pageData.qualityChart = response.qualityChart;
refreshPage(); refreshPage();
} }
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error("获取数据失败:", error); console.error("获取数据失败:", error);
} },
}); });
} }
@ -544,39 +707,41 @@
var elem = document.documentElement; var elem = document.documentElement;
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
elem.requestFullscreen(); elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */ } else if (elem.webkitRequestFullscreen) {
/* Safari */
elem.webkitRequestFullscreen(); elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */ } else if (elem.msRequestFullscreen) {
/* IE11 */
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} }
// 隐藏提示遮罩 // 隐藏提示遮罩
document.getElementById('fullscreenOverlay').style.display = 'none'; document.getElementById("fullscreenOverlay").style.display = "none";
} }
// 监听全屏状态变化 // 监听全屏状态变化
document.addEventListener('fullscreenchange', function() { document.addEventListener("fullscreenchange", function () {
var overlay = document.getElementById('fullscreenOverlay'); var overlay = document.getElementById("fullscreenOverlay");
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
// 退出全屏时显示提示 // 退出全屏时显示提示
overlay.style.display = 'flex'; overlay.style.display = "flex";
} }
}); });
document.addEventListener('webkitfullscreenchange', function() { document.addEventListener("webkitfullscreenchange", function () {
var overlay = document.getElementById('fullscreenOverlay'); var overlay = document.getElementById("fullscreenOverlay");
if (!document.webkitFullscreenElement) { if (!document.webkitFullscreenElement) {
overlay.style.display = 'flex'; overlay.style.display = "flex";
} }
}); });
// 获取水量统计数据 // 获取水量统计数据
function fetchSlqsData() { function fetchSlqsData() {
$.ajax({ $.ajax({
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do', url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
type: 'GET', type: "GET",
data: { companyKey: 'DEV067' }, data: { companyKey: "DEV067" },
dataType: 'json', dataType: "json",
success: function(response) { success: function (response) {
console.log('水量统计数据:', response); console.log("水量统计数据:", response);
if (response) { if (response) {
// 兼容不同的返回字段名 // 兼容不同的返回字段名
pageData.slqs.todayTotal = response.todayTotal || 0; pageData.slqs.todayTotal = response.todayTotal || 0;
@ -585,14 +750,17 @@
updateSlqs(); updateSlqs();
// 解析七日水量数据 sevenDaysTotal // 解析七日水量数据 sevenDaysTotal
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) { if (
response.sevenDaysTotal &&
Array.isArray(response.sevenDaysTotal)
) {
var xAxis = []; var xAxis = [];
var data = []; var data = [];
response.sevenDaysTotal.forEach(function(item) { response.sevenDaysTotal.forEach(function (item) {
// 日期格式: "2026-03-07" -> "03-07" // 日期格式: "2026-03-07" -> "03-07"
var dateStr = item.date || ''; var dateStr = item.date || "";
if (dateStr.length >= 10) { if (dateStr.length >= 10) {
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分 xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
} else { } else {
xAxis.push(dateStr); xAxis.push(dateStr);
} }
@ -601,13 +769,13 @@
}); });
pageData.sevenDaysChart.xAxis = xAxis; pageData.sevenDaysChart.xAxis = xAxis;
pageData.sevenDaysChart.data = data; pageData.sevenDaysChart.data = data;
initSevenDaysChart(); // 重新渲染图表 initSevenDaysChart(); // 重新渲染图表
} }
} }
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('获取水量统计数据失败:', error); console.error("获取水量统计数据失败:", error);
} },
}); });
} }
@ -616,7 +784,7 @@
// sdt: 开始时间 (可选，默认7天前) // sdt: 开始时间 (可选，默认7天前)
// edt: 结束时间 (可选，默认当前时间) // edt: 结束时间 (可选，默认当前时间)
// 返回: Promise对象 // 返回: Promise对象
function fetchPointData(mpcode, sdt, edt) { function fetchPointData(mpcode, sdt, edt) {
// 默认时间范围：近7天 // 默认时间范围：近7天
if (!edt) { if (!edt) {
var now = new Date(); var now = new Date();
@ -650,12 +818,49 @@
}); });
} }
/**
* 获取点位实时值
* @param unitId
* @param mpointCode
* @param valueId
* @param textId
*/
function getValue(unitId, mpointCode, valueId, textId) {
$.ajax({
type: "GET",
url: "<%=request.getContextPath()%>/work/mpoint/getValue4Es.do?unitId=" + unitId + "&mpointCode=" + mpointCode,
async: true,
globle: false,
error: function (res) {
console.log("获取数据失败:", res);
return false;
},
success: function (data) {
if (data != null && data != "") {
var data = eval("(" + data + ")");
//只限制上限为0.8 下限根据设定值自己设
// var maxvalue = data.alarmmax/0.8;
// var minvalue = data.alarmmin/maxvalue;
// var acvalue = data.parmvalue/maxvalue*100;
// var data = {"processsectioncode":"28","parmname":"电动碟阀11_关到位","id":"D_PACDSYH","numtail":"0","signaltype":"AI","active":"启用","sourceType":"auto","mpointcode":"D_PACDSYH","disname":"电动碟阀11_关到位","valuetype":"sql","directtype":"1","rate":1.0000000000,"subscriptionStatus":0,"mpointid":"D_PACDSYH","triggeralarm":"1","parmvalue":106,"measuredt":"2026-02-26T05:55:14Z","bizid":"0533JS"}
console.log('===data', data)
$("#" + valueId).html(data.parmvalue || 9999); //赋值
if (data.unit == undefined) {
$("#" + textId).html(data.parmname || 9999); //赋值名称
} else {
$("#" + textId).html(data.parmname + " (" + data.unit + ")" + 9999); //赋值名称+单位
}
}
},
});
}
// 格式化日期为 YYYY-MM-DD 格式 // 格式化日期为 YYYY-MM-DD 格式
function formatDate(date) { function formatDate(date) {
var year = date.getFullYear(); var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2, '0'); var month = (date.getMonth() + 1).toString().padStart(2, "0");
var day = date.getDate().toString().padStart(2, '0'); var day = date.getDate().toString().padStart(2, "0");
return year + '-' + month + '-' + day; return year + "-" + month + "-" + day;
} }
$(function () { $(function () {
@ -675,36 +880,40 @@
// 批量获取点位数据并更新显示 // 批量获取点位数据并更新显示
var pointList = [ var pointList = [
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH', "D_PACDSYH",
'D_YanYCORP', "D_YiSNDSYH",
'D_QueYCRJY1', "D_CiLSNDSYH",
'D_HaoYCRJY', "D_YanYCORP",
'D_HaoYCRJY2', "D_QueYCRJY1",
'D_HaoYCWNND', "D_HaoYCRJY",
'D_MoCWNND', "D_HaoYCRJY2",
'D_BengZYW', "D_HaoYCWNND",
'D_TiSB101DL', "D_MoCWNND",
'D_TiSB102DL', "D_BengZYW",
'D_TiSB103DL', "D_TiSB101DL",
'D_NingMSJYLL', "D_TiSB102DL",
'D_YaLSQNLL', "D_TiSB103DL",
'D_NingMSCGYW', "D_NingMSJYLL",
'D_CiLSNJYLL', "D_YaLSQNLL",
'D_PACJYLL', "D_NingMSCGYW",
'D_CiLSNCGYW', "D_CiLSNJYLL",
'D_PACCGYW' "D_PACJYLL",
"D_CiLSNCGYW",
"D_PACCGYW",
]; ];
pointList.forEach(function(mpcode) { pointList.forEach(function (mpcode) {
fetchPointData(mpcode).then(function(res) { // fetchPointData(mpcode).then(function(res) {
if (res && res[0] && res[0].data && res[0].data.length > 0) { // $('#' + mpcode).text(1000 || 0);
var lastData = res[0].data[res[0].data.length - 1]; // // if (res && res[0] && res[0].data && res[0].data.length > 0) {
var value = lastData[1]; // 取最后一个数据点的值 // // var lastData = res[0].data[res[0].data.length - 1];
$('#' + mpcode).text(value || 0); // // var value = lastData[1]; // 取最后一个数据点的值
} // // $('#' + mpcode).text(1000 || 0);
}).catch(function(error) { // // }
console.error('点位数据获取失败:', mpcode, error); // }).catch(function(error) {
}); // console.error('点位数据获取失败:', mpcode, error);
// });
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`);
}); });
}); });
@ -717,12 +926,12 @@
var data = pageData.sevenDaysChart.data; var data = pageData.sevenDaysChart.data;
// 根据数据动态计算Y轴最大值 // 根据数据动态计算Y轴最大值
var yMax = 10000; // 默认值 var yMax = 10000; // 默认值
if (data && data.length > 0) { if (data && data.length > 0) {
var dataMax = Math.max.apply(null, data); var dataMax = Math.max.apply(null, data);
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万） // 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000; yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
if (yMax < 10000) yMax = 10000; // 最小值1万 if (yMax < 10000) yMax = 10000; // 最小值1万
} }
var option = { var option = {
@ -734,12 +943,18 @@
borderWidth: 1, borderWidth: 1,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 18 fontSize: 18,
}, },
formatter: function(params) { formatter: function (params) {
var data = params[0]; var data = params[0];
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString(); return (
} data.name +
"<br/>" +
data.seriesName +
": " +
data.value.toLocaleString()
);
},
}, },
grid: { grid: {
// left: 60, // left: 60,
@ -855,78 +1070,78 @@
if (!nclDom) return; if (!nclDom) return;
var nclChart = echarts.init(nclDom, "dark"); var nclChart = echarts.init(nclDom, "dark");
var nclData = pageData.nclChart.data; var nclData = pageData.nclChart.data;
var nclOption = { var nclOption = {
backgroundColor: "transparent", backgroundColor: "transparent",
grid: { grid: {
left: 60, left: 60,
right: 40, right: 40,
top: 40, top: 40,
bottom: 40, bottom: 40,
},
legend: {
data: ["实际小时排泥量"],
right: 10,
top: 0,
textStyle: {
color: "#9BE8FF",
fontSize: 25,
}, },
legend: { },
data: ["实际小时排泥量"], xAxis: {
right: 10, type: "category",
top: 0, data: pageData.nclChart.xAxis,
textStyle: { boundaryGap: false,
color: "#9BE8FF", axisLine: {
fontSize: 25, lineStyle: { color: "#2C3E50" },
},
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
},
yAxis: {
type: "value",
max: 500,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
}, },
}, },
xAxis: { },
type: "category", series: [
data: pageData.nclChart.xAxis, {
boundaryGap: false, name: "实际小时排泥量",
axisLine: { type: "line",
lineStyle: { color: "#2C3E50" }, smooth: true,
}, symbol: "none",
axisTick: { show: false }, lineStyle: { normal: { width: 2 } },
axisLabel: { itemStyle: { normal: { color: "#46F2FF" } },
color: "#B7C9E2", areaStyle: {
fontSize: 25, normal: {
}, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
}, { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
yAxis: { { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
type: "value", ]),
max: 500, opacity: 1,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
}, },
}, },
data: nclData,
}, },
series: [ ],
{ };
name: "实际小时排泥量", nclChart.setOption(nclOption);
type: "line", window.addEventListener("resize", function () {
smooth: true, nclChart.resize();
symbol: "none", });
lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]),
opacity: 1,
},
},
data: nclData,
},
],
};
nclChart.setOption(nclOption);
window.addEventListener("resize", function () {
nclChart.resize();
});
} }
// 质量图表 // 质量图表
@ -935,78 +1150,78 @@
if (!qualityDom) return; if (!qualityDom) return;
var qualityChart = echarts.init(qualityDom); var qualityChart = echarts.init(qualityDom);
var qualityData = pageData.qualityChart.data; var qualityData = pageData.qualityChart.data;
var qualityOption = { var qualityOption = {
backgroundColor: "transparent", backgroundColor: "transparent",
grid: { grid: {
left: 60, left: 60,
right: 40, right: 40,
top: 40, top: 40,
bottom: 40, bottom: 40,
},
legend: {
data: ["水质量"],
right: 10,
top: 0,
textStyle: {
color: "#9BE8FF",
fontSize: 25,
}, },
legend: { },
data: ["水质量"], xAxis: {
right: 10, type: "category",
top: 0, data: pageData.qualityChart.xAxis,
textStyle: { boundaryGap: false,
color: "#9BE8FF", axisLine: {
fontSize: 25, lineStyle: { color: "#2C3E50" },
},
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
},
yAxis: {
type: "value",
max: 25,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
}, },
}, },
xAxis: { },
type: "category", series: [
data: pageData.qualityChart.xAxis, {
boundaryGap: false, name: "水质量",
axisLine: { type: "line",
lineStyle: { color: "#2C3E50" }, smooth: true,
}, symbol: "none",
axisTick: { show: false }, lineStyle: { normal: { width: 2 } },
axisLabel: { itemStyle: { normal: { color: "#46F2FF" } },
color: "#B7C9E2", areaStyle: {
fontSize: 25, normal: {
}, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
}, { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
yAxis: { { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
type: "value", ]),
max: 25, opacity: 1,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
}, },
}, },
data: qualityData,
}, },
series: [ ],
{ };
name: "水质量", qualityChart.setOption(qualityOption);
type: "line", window.addEventListener("resize", function () {
smooth: true, qualityChart.resize();
symbol: "none", });
lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]),
opacity: 1,
},
},
data: qualityData,
},
],
};
qualityChart.setOption(qualityOption);
window.addEventListener("resize", function () {
qualityChart.resize();
});
} }
</script> </script>
</body> </body>