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

水厂大屏数据

Browse Source
This commit is contained in:
Rue Ji
2026-03-08 23:52:11 +08:00
parent 3fffc91cc1
commit 4b7e269c3a
2 changed files with 398 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,27 +33,25 @@
/* Specific Position for Data 6040 */
.slqs {
position: absolute;
width: 121px;
width: 210px;
height: 62px;
color: rgba(255, 255, 255, 1);
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
font-weight: 900;
font-size: 50px;
z-index: 10;
text-align: center;
line-height: 62px;
display: flex;
justify-content: flex-end;
}
.slqs-jinri {
.slqs-todayTotal {
top: 335px;
left: 209px;
}
.slqs-zuori {
.slqs-yesterdayTotal {
top: 335px;
left: 592px;
}
.slqs-benyue {
.slqs-monthTotal {
top: 335px;
left: 975px;
left: 947px;
}
.ncl-val {
@ -208,6 +206,20 @@
font-size: 80px;
margin-bottom: 20px;
}
.Middle2-value {
position: absolute;
width: 100px;
height: 31px;
color: rgba(41, 241, 250, 1);
font-weight: 500;
font-size: 26px;
display: flex;
justify-content: flex-end;
}
#D_YanYCORP {
top: 190.5px;
left: 2470px;
}
</style>
</head>
<body>
@ -222,9 +234,9 @@
<div class="screen-container">
<div class="left">
<div>
<div class="slqs slqs-jinri">6040</div>
<div class="slqs slqs-zuori">4197</div>
<div class="slqs slqs-benyue">12356</div>
<div class="slqs slqs-todayTotal">60400</div>
<div class="slqs slqs-yesterdayTotal">4197</div>
<div class="slqs slqs-monthTotal">12356</div>
</div>
<!-- 七日水量 -->
@ -333,12 +345,37 @@
</div>
<div class="Middle2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<span class="Middle2-value" id="D_YanYCORP"></span>
<span class="Middle2-value" id="D_QueYCRJY1"></span>
<span class="Middle2-value" id="D_HaoYCRJY"></span>
<span class="Middle2-value" id="D_HaoYCRJY2"></span>
<span class="Middle2-value" id="D_HaoYCWNND"></span>
<span class="Middle2-value" id="D_MoCWNND"></span>
</div>
<div>
<span class="Middle2-value" id="D_BengZYW"></span>
<span class="Middle2-value" id="D_TiSB101DL"></span>
<span class="Middle2-value" id="D_TiSB102DL"></span>
<span class="Middle2-value" id="D_TiSB103DL"></span>
</div>
<div>
<span class="Middle2-value" id="D_NingMSJYLL"></span>
<span class="Middle2-value" id="D_YaLSQNLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_NingMSCGYW"></span>
<span class="Middle2-value" id="D_YaLSQNLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_CiLSNJYLL"></span>
<span class="Middle2-value" id="D_PACJYLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_CiLSNCGYW"></span>
<span class="Middle2-value" id="D_PACCGYW"></span>
</div>
</div>
<!-- 中间图表 -->
@ -368,9 +405,9 @@
var pageData = {
// 水量数据 (slqs)
slqs: {
jinri: 6040, // 今日水量
zuori: 4197, // 昨日水量
benyue: 12356 // 本月水量
todayTotal: 6040, // 今日水量
yesterdayTotal: 4197, // 昨日水量
monthTotal: 12356 // 本月水量
},
// 泥处理指标 (ncl)
@ -419,9 +456,9 @@
// 更新水量显示
function updateSlqs() {
$(".slqs-jinri").text(pageData.slqs.jinri);
$(".slqs-zuori").text(pageData.slqs.zuori);
$(".slqs-benyue").text(pageData.slqs.benyue);
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
$(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal);
$(".slqs-monthTotal").text(pageData.slqs.monthTotal);
}
// 更新泥处理指标显示
@ -464,7 +501,7 @@
success: function(response) {
// 假设接口返回的数据格式如下：
// {
// slqs: { jinri: xxx, zuori: xxx, benyue: xxx },
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
// ncl: { val1: xxx, val2: xxx, val3: xxx },
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
// qualityTable: [...],
@ -530,6 +567,96 @@
}
});
// 获取水量统计数据
function fetchSlqsData() {
$.ajax({
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do',
type: 'GET',
data: { companyKey: 'DEV067' },
dataType: 'json',
success: function(response) {
console.log('水量统计数据:', response);
if (response) {
// 兼容不同的返回字段名
pageData.slqs.todayTotal = response.todayTotal || 0;
pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0;
pageData.slqs.monthTotal = response.monthTotal || 0;
updateSlqs();
// 解析七日水量数据 sevenDaysTotal
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) {
var xAxis = [];
var data = [];
response.sevenDaysTotal.forEach(function(item) {
// 日期格式: "2026-03-07" -> "03-07"
var dateStr = item.date || '';
if (dateStr.length >= 10) {
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
} else {
xAxis.push(dateStr);
}
// total 可能是字符串，转为数字
data.push(parseFloat(item.total) || 0);
});
pageData.sevenDaysChart.xAxis = xAxis;
pageData.sevenDaysChart.data = data;
initSevenDaysChart(); // 重新渲染图表
}
}
},
error: function(xhr, status, error) {
console.error('获取水量统计数据失败:', error);
}
});
}
// 获取点位信息数据
// mpcode: 点位编码
// sdt: 开始时间 (可选，默认7天前)
// edt: 结束时间 (可选，默认当前时间)
// 返回: Promise对象
function fetchPointData(mpcode, sdt, edt) {
// 默认时间范围：近7天
if (!edt) {
var now = new Date();
edt = formatDate(now);
}
if (!sdt) {
var sevenDaysAgo = new Date();
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
sdt = formatDate(sevenDaysAgo);
}
return new Promise(function(resolve, reject) {
$.ajax({
url: '<%=request.getContextPath()%>/data/getDetailData.do',
type: 'GET',
data: {
mpcode: mpcode,
sdt: sdt,
edt: edt
},
dataType: 'json',
success: function(response) {
console.log('点位数据[' + mpcode + ']:', response);
resolve(response);
},
error: function(xhr, status, error) {
console.error('获取点位数据失败:', mpcode, error);
reject(error);
}
});
});
}
// 格式化日期为 YYYY-MM-DD 格式
function formatDate(date) {
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2, '0');
var day = date.getDate().toString().padStart(2, '0');
return year + '-' + month + '-' + day;
}
$(function () {
// 初始化数据显示
updateSlqs();
@ -541,6 +668,43 @@
initSevenDaysChart();
initNclChart();
initQualityChart();
// 页面加载后获取水量统计数据
fetchSlqsData();
// 批量获取点位数据并更新显示
var pointList = [
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH',
'D_YanYCORP',
'D_QueYCRJY1',
'D_HaoYCRJY',
'D_HaoYCRJY2',
'D_HaoYCWNND',
'D_MoCWNND',
'D_BengZYW',
'D_TiSB101DL',
'D_TiSB102DL',
'D_TiSB103DL',
'D_NingMSJYLL',
'D_YaLSQNLL',
'D_NingMSCGYW',
'D_CiLSNJYLL',
'D_PACJYLL',
'D_CiLSNCGYW',
'D_PACCGYW'
];
pointList.forEach(function(mpcode) {
fetchPointData(mpcode).then(function(res) {
if (res && res[0] && res[0].data && res[0].data.length > 0) {
var lastData = res[0].data[res[0].data.length - 1];
var value = lastData[1]; // 取最后一个数据点的值
$('#' + mpcode).text(value || 0);
}
}).catch(function(error) {
console.error('点位数据获取失败:', mpcode, error);
});
});
});
// 七日水量图表
@ -550,10 +714,34 @@
var myChart = echarts.init(chartDom);
var dataAxis = pageData.sevenDaysChart.xAxis;
var data = pageData.sevenDaysChart.data;
// 根据数据动态计算Y轴最大值
var yMax = 10000; // 默认值
if (data && data.length > 0) {
var dataMax = Math.max.apply(null, data);
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
if (yMax < 10000) yMax = 10000; // 最小值1万
}
var option = {
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#46F2FF",
borderWidth: 1,
textStyle: {
color: "#fff",
fontSize: 18
},
formatter: function(params) {
var data = params[0];
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString();
}
},
grid: {
left: 60,
// left: 60,
right: 40,
top: 40,
bottom: 40,
@ -581,8 +769,8 @@
},
yAxis: {
type: "value",
max: 10000,
splitNumber: 5,
max: yMax,
splitNumber: 7,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
@ -601,7 +789,7 @@
{
name: "处理水量",
type: "bar",
barWidth: 20,
barMaxWidth: 60,
data: data,
itemStyle: {
normal: {
@ -625,8 +813,8 @@
{
type: "bar",
barGap: "-100%",
barMaxWidth: 60,
data: (function () {
var yMax = 10000;
var shadow = [];
for (var i = 0; i < data.length; i++) {
shadow.push(yMax);