310 lines
12 KiB
HTML
310 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Live Monitoring Dashboard</title>
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
.plot-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
.large-plot {
|
|
width: 45%;
|
|
height: 300px;
|
|
}
|
|
.small-plot {
|
|
width: 30%;
|
|
height: 250px;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
#recordButton {
|
|
background-color: #ff4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
margin: 10px;
|
|
}
|
|
.status-container {
|
|
background-color: #f0f0f0;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="pageTitle">Live Monitoring Dashboard</h1>
|
|
<div class="status-container">
|
|
<p>Current Status: <span id="currentStatus">Loading...</span></p>
|
|
</div>
|
|
<button id="recordButton" onclick="toggleRecording()">Record</button>
|
|
<div class="plot-container">
|
|
<div id="flow-plot-1" class="large-plot"></div>
|
|
<div id="pressure-plot-1" class="large-plot"></div>
|
|
<div id="flow-plot-2" class="large-plot"></div>
|
|
<div id="pressure-plot-2" class="large-plot"></div>
|
|
<div id="MV02_sp-plot" class="small-plot"></div>
|
|
<div id="MV03_sp-plot" class="small-plot"></div>
|
|
<div id="MV04_sp-05-plot" class="small-plot"></div>
|
|
<div id="MV06_sp-plot" class="small-plot"></div>
|
|
<div id="MV07_sp-plot" class="small-plot"></div>
|
|
<div id="MV08_sp-plot" class="small-plot"></div>
|
|
</div>
|
|
<script>
|
|
// Extract PU number from URL
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const puNumber = urlParams.get('pu_number') || '1'; // Default to PU 1 if not specified
|
|
document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
|
|
|
|
let isRecording = false;
|
|
let recordedData = [];
|
|
let recordingInterval;
|
|
let csvFileName = '';
|
|
|
|
async function toggleRecording() {
|
|
const recordButton = document.getElementById('recordButton');
|
|
if (!isRecording) {
|
|
isRecording = true;
|
|
recordButton.style.backgroundColor = '#ff0000';
|
|
recordButton.textContent = 'Stop Recording';
|
|
recordedData = [];
|
|
csvFileName = `monitoring_data_PU${puNumber}_${new Date().toISOString().replace(/[:.]/g, '-')}.csv`;
|
|
startRecording();
|
|
} else {
|
|
isRecording = false;
|
|
recordButton.style.backgroundColor = '#ff4444';
|
|
recordButton.textContent = 'Record';
|
|
stopRecording();
|
|
}
|
|
}
|
|
|
|
function startRecording() {
|
|
recordingInterval = setInterval(async () => {
|
|
const response = await fetch('/monitor');
|
|
if (!response.ok) {
|
|
console.error(`HTTP error! status: ${response.status}`);
|
|
return;
|
|
}
|
|
const allData = await response.json();
|
|
const puData = allData[`PU_${puNumber}`];
|
|
const SkidData = allData[`PatientSkid`];
|
|
recordedData.push({
|
|
timestamp: new Date().toISOString(),
|
|
Qperm: puData.Qperm,
|
|
Qdilute: puData.Qdilute,
|
|
Qdrain: puData.Qdrain,
|
|
Qrecirc: puData.Qrecirc,
|
|
QdrainEDI: puData.QdrainEDI,
|
|
Pro: puData.Pro,
|
|
Pdilute: puData.Pdilute,
|
|
Pretentate: puData.Pretentate,
|
|
MV02_sp: puData.MV02_sp,
|
|
MV03_sp: puData.MV03_sp,
|
|
MV04_sp: puData.MV04_sp,
|
|
MV05_sp: puData.MV05_sp,
|
|
MV06_sp: puData.MV06_sp,
|
|
MV07_sp: puData.MV07_sp,
|
|
MV08_sp: puData.MV08_sp,
|
|
QSkid: SkidData.QSkid,
|
|
});
|
|
}, 100);
|
|
}
|
|
|
|
async function stopRecording() {
|
|
clearInterval(recordingInterval);
|
|
if (recordedData.length > 0) {
|
|
const csvContent = "data:text/csv;charset=utf-8," +
|
|
"Timestamp,Qperm,Qdilute,Qdrain,Qrecirc,QdrainEDI,Pro,Pdilute,Pretentate,MV02_sp,MV03_sp,MV04_sp,MV05_sp,MV06_sp,MV07_sp,MV08_sp,QSkid\n" +
|
|
recordedData.map(row =>
|
|
`${row.timestamp},${row.Qperm},${row.Qdilute},${row.Qdrain},${row.Qrecirc},${row.QdrainEDI},${row.Pro},${row.Pdilute},${row.Pretentate},${row.MV02_sp},${row.MV03_sp},${row.MV04_sp},${row.MV05_sp},${row.MV06_sp},${row.MV07_sp},${row.MV08_sp},${row.QSkid}`
|
|
).join("\n");
|
|
const encodedUri = encodeURI(csvContent);
|
|
const link = document.createElement("a");
|
|
link.setAttribute("href", encodedUri);
|
|
link.setAttribute("download", csvFileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
}
|
|
}
|
|
|
|
window.onbeforeunload = function() {
|
|
if (isRecording) {
|
|
stopRecording();
|
|
}
|
|
};
|
|
|
|
const maxPoints = 100;
|
|
|
|
function getLastMinuteRange() {
|
|
const now = new Date();
|
|
const oneMinuteAgo = new Date(now.getTime() - 60 * 1000);
|
|
return [oneMinuteAgo, now];
|
|
}
|
|
|
|
async function updatePlots() {
|
|
try {
|
|
const response = await fetch('/monitor');
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
const allData = await response.json();
|
|
const puData = allData[`PU_${puNumber}`];
|
|
const SkidData = allData[`PatientSkid`];
|
|
|
|
const timestamp = new Date(puData.timestamp);
|
|
Plotly.extendTraces('flow-plot-1', {
|
|
x: [[timestamp], [timestamp]],
|
|
y: [[puData.Qperm], [puData.Qdilute]]
|
|
}, [0, 1], maxPoints);
|
|
|
|
Plotly.extendTraces('flow-plot-2', {
|
|
x: [[timestamp], [timestamp], [timestamp], [timestamp]],
|
|
y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
|
|
}, [0, 1, 2, 3], maxPoints);
|
|
|
|
Plotly.extendTraces('pressure-plot-1', {
|
|
x: [[timestamp], [timestamp]],
|
|
y: [[puData.Pro], [puData.Pretentate]]
|
|
}, [0, 1], maxPoints);
|
|
|
|
Plotly.extendTraces('pressure-plot-2', {
|
|
x: [[timestamp]],
|
|
y: [[puData.Pdilute]]
|
|
}, [0], maxPoints);
|
|
|
|
Plotly.extendTraces('MV02_sp-plot', { x: [[timestamp]], y: [[puData.MV02_sp]] }, [0], maxPoints);
|
|
Plotly.extendTraces('MV03_sp-plot', { x: [[timestamp]], y: [[puData.MV03_sp]] }, [0], maxPoints);
|
|
Plotly.extendTraces('MV04_sp-05-plot', {
|
|
x: [[timestamp], [timestamp]],
|
|
y: [[puData.MV04_sp], [puData.MV05_sp]]
|
|
}, [0, 1], maxPoints);
|
|
Plotly.extendTraces('MV06_sp-plot', { x: [[timestamp]], y: [[puData.MV06_sp]] }, [0], maxPoints);
|
|
Plotly.extendTraces('MV07_sp-plot', { x: [[timestamp]], y: [[puData.MV07_sp]] }, [0], maxPoints);
|
|
Plotly.extendTraces('MV08_sp-plot', { x: [[timestamp]], y: [[puData.MV08_sp]] }, [0], maxPoints);
|
|
|
|
const range = getLastMinuteRange();
|
|
const plotIds = ['flow-plot-1', 'flow-plot-2', 'pressure-plot-1', 'pressure-plot-2', 'MV02_sp-plot', 'MV03_sp-plot', 'MV04_sp-05-plot', 'MV06_sp-plot', 'MV07_sp-plot', 'MV08_sp-plot'];
|
|
// plotIds.forEach(id => {
|
|
// Plotly.relayout(id, { 'xaxis.range': range });
|
|
// });
|
|
} catch (error) {
|
|
console.error("Error updating plots:", error);
|
|
}
|
|
}
|
|
|
|
async function fetchPUStatus() {
|
|
try {
|
|
const response = await fetch("/api/pu_status");
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
const data = await response.json();
|
|
const status = data[`PU${puNumber}`] || "Unknown";
|
|
document.getElementById("currentStatus").textContent = status;
|
|
} catch (error) {
|
|
console.error("Error fetching PU status:", error);
|
|
document.getElementById("currentStatus").textContent = "Error fetching status";
|
|
}
|
|
}
|
|
|
|
function initPlots() {
|
|
const time0 = [new Date()];
|
|
|
|
Plotly.newPlot('flow-plot-1', [
|
|
{ x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } },
|
|
{ x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } }
|
|
], {
|
|
title: 'Qperm and Qdilute Flow Rates Over Time',
|
|
xaxis: { title: 'Time', type: 'date' },
|
|
yaxis: { title: 'Flow (L/h)' }
|
|
});
|
|
|
|
Plotly.newPlot('flow-plot-2', [
|
|
{ x: time0, y: [0], name: 'Qdrain', mode: 'lines', line: { color: 'red' } },
|
|
{ x: time0, y: [0], name: 'Qrecirc', mode: 'lines', line: { color: 'orange' } },
|
|
{ x: time0, y: [0], name: 'QSkid', mode: 'lines', line: { color: 'green' } },
|
|
{ x: time0, y: [0], name: 'QdrainEDI', mode: 'lines', line: { color: 'blue' } }
|
|
], {
|
|
title: 'Qdrain, Qrecirc, Qskid and QdrainEDI Flow Rates Over Time',
|
|
xaxis: { title: 'Time', type: 'date' },
|
|
yaxis: { title: 'Flow (L/h)' }
|
|
});
|
|
|
|
Plotly.newPlot('pressure-plot-1', [
|
|
{ x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } },
|
|
{ x: time0, y: [0], name: 'Pretentate', mode: 'lines', line: { color: 'gray' } }
|
|
], {
|
|
title: 'Pro and Pretentate Pressure Over Time',
|
|
xaxis: { title: 'Time', type: 'date' },
|
|
yaxis: { title: 'Pressure (bar)' }
|
|
});
|
|
|
|
Plotly.newPlot('pressure-plot-2', [
|
|
{ x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } }
|
|
], {
|
|
title: 'Pdilute Pressure Over Time',
|
|
xaxis: { title: 'Time', type: 'date' },
|
|
yaxis: { title: 'Pressure (bar)' }
|
|
});
|
|
|
|
Plotly.newPlot('MV02_sp-plot', [{
|
|
x: time0, y: [0], name: 'MV02_sp', mode: 'lines'
|
|
}], {
|
|
title: 'MV02_sp (%)', yaxis: { }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
Plotly.newPlot('MV03_sp-plot', [{
|
|
x: time0, y: [0], name: 'MV03_sp', mode: 'lines'
|
|
}], {
|
|
title: 'MV03_sp (%)', yaxis: { }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
Plotly.newPlot('MV04_sp-05-plot', [
|
|
{ x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
|
|
{ x: time0, y: [0], name: 'MV05_sp', mode: 'lines' }
|
|
], {
|
|
title: 'MV04_sp + MV05_sp (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
Plotly.newPlot('MV06_sp-plot', [{
|
|
x: time0, y: [0], name: 'MV06_sp', mode: 'lines'
|
|
}], {
|
|
title: 'MV06_sp (%)', yaxis: { }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
Plotly.newPlot('MV07_sp-plot', [{
|
|
x: time0, y: [0], name: 'MV07_sp', mode: 'lines'
|
|
}], {
|
|
title: 'MV07_sp (%)', yaxis: { }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
Plotly.newPlot('MV08_sp-plot', [{
|
|
x: time0, y: [0], name: 'MV08_sp', mode: 'lines'
|
|
}], {
|
|
title: 'MV08_sp (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
|
});
|
|
|
|
setInterval(updatePlots, 500);
|
|
}
|
|
|
|
window.onload = function() {
|
|
initPlots();
|
|
fetchPUStatus();
|
|
setInterval(fetchPUStatus, 5000); // Update status every 5 seconds
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|