Kabelüberwachungsseite responsive in 2xl, xl und laptop
This commit is contained in:
ISA
@@ -433,25 +433,29 @@ function Kue705FO({
|
||||
//---------------------------------------------------
|
||||
return (
|
||||
<div
|
||||
className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400
|
||||
className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
|
||||
scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3
|
||||
"
|
||||
>
|
||||
{kueOnline === 1 ? (
|
||||
<>
|
||||
<div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
|
||||
<div className="flex items-start justify-between h-[30px]">
|
||||
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
|
||||
<span className="text-white text-[10px]">{slotIndex + 1}</span>
|
||||
<div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
|
||||
<div className="flex items-start justify-between h-[1.875rem]">
|
||||
<div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
|
||||
<span className="text-white text-[0.625rem]">
|
||||
{slotIndex + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
|
||||
<h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
|
||||
KÜ705-FO
|
||||
</h3>
|
||||
|
||||
<button
|
||||
onClick={handleOpenModal}
|
||||
className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
|
||||
className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
|
||||
>
|
||||
<span className="text-white text-[20px]">⚙</span>
|
||||
<span className="text-white text-[1.25rem]">⚙</span>
|
||||
</button>
|
||||
</div>
|
||||
{}
|
||||
@@ -461,16 +465,16 @@ function Kue705FO({
|
||||
slot={slotIndex}
|
||||
onModulNameChange={setCurrentModulName}
|
||||
/>
|
||||
<div className="flex flex-col mt-[10px] ml-[10px]">
|
||||
<div className="flex items-center space-x-4 mt-[10px]">
|
||||
<div className="flex flex-col items-start space-y-1 mr-1">
|
||||
<span className="text-white text-[10px]">Betrieb</span>
|
||||
<span className="text-white text-[10px]">Alarm</span>
|
||||
<div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
|
||||
<div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
|
||||
<div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
|
||||
<span className="text-white text-[0.625rem]">Betrieb</span>
|
||||
<span className="text-white text-[0.625rem]">Alarm</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
<div className="w-[10px] h-[10px] bg-green-500 rounded-full"></div>
|
||||
<div className="flex flex-col items-center space-y-[0.188rem]">
|
||||
<div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
|
||||
<div
|
||||
className={`w-[10px] h-[10px] rounded-full ${
|
||||
className={`w-[0.625rem] h-[0.625rem] rounded-full ${
|
||||
currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
|
||||
}`}
|
||||
></div>
|
||||
@@ -479,7 +483,7 @@ function Kue705FO({
|
||||
</div>
|
||||
|
||||
{/* Anzeige des Isolation */}
|
||||
<div className="relative mt-[50px] mx-auto bg-black text-white w-[100px] h-[40px] flex items-center justify-center text-[18px] z-10">
|
||||
<div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
|
||||
<div className="text-center">
|
||||
<span
|
||||
className={
|
||||
@@ -488,9 +492,9 @@ function Kue705FO({
|
||||
kueGroundFault?.[slotIndex] === 1 ||
|
||||
kueAlarm1?.[slotIndex] === 1 ||
|
||||
kueAlarm2?.[slotIndex] === 1
|
||||
? "text-red-500 text-[14px]"
|
||||
? "text-red-500 text-[0.875rem]"
|
||||
: kueOverflow?.[slotIndex] === 1
|
||||
? "text-white text-[14px]"
|
||||
? "text-white text-[0.875rem]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
@@ -503,40 +507,40 @@ function Kue705FO({
|
||||
kueAlarm1?.[slotIndex] !== 1 &&
|
||||
kueAlarm2?.[slotIndex] !== 1 &&
|
||||
kueOverflow?.[slotIndex] !== 1 && (
|
||||
<div className="text-[8px]">ISO MOhm</div>
|
||||
<div className="text-[0.5rem]">ISO MOhm</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
|
||||
<div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
|
||||
<div className="absolute top-0 left-[4.688rem] w-[0.188rem] h-full bg-white z-0"></div>
|
||||
<div className="absolute top-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>
|
||||
|
||||
<div className="absolute bottom-[20px] left-0 right-0 text-black text-[10px] bg-gray-300 p-1 text-center">
|
||||
<div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
|
||||
{currentModulName || `Modul ${slotIndex + 1}`}
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-1 right-1 text-black text-[8px]">
|
||||
<div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
|
||||
{kueVersion}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
|
||||
<div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
|
||||
<span className="text-black text-[7px] absolute top-[2px] left-1 mt-1">
|
||||
<div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[8.125rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
|
||||
<span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-[0.063rem]">
|
||||
{loopTitleText}
|
||||
</span>
|
||||
|
||||
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
|
||||
<div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-[0.188rem]">
|
||||
<button
|
||||
onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
|
||||
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
|
||||
className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
|
||||
disabled={loading} // Disable button while loading
|
||||
>
|
||||
<span className="text-white text-[18px]">⟳</span>
|
||||
<span className="text-white text-[1.125rem]">⟳</span>
|
||||
</button>
|
||||
|
||||
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2 w-[100px] flex justify-center items-center">
|
||||
<div className="text-center text-black text-[10px]">
|
||||
<div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
|
||||
<div className="text-center text-black text-[0.625rem]">
|
||||
<p>
|
||||
{loopDisplayValue +
|
||||
(activeButton === "Schleife" ? " KOhm" : " Km")}
|
||||
@@ -545,10 +549,10 @@ function Kue705FO({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex mt-2 space-x-1">
|
||||
<div className="flex mt-[0.125rem] space-x-[0.063rem]">
|
||||
<button
|
||||
onClick={() => handleButtonClick("Schleife")}
|
||||
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
|
||||
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
|
||||
activeButton === "Schleife"
|
||||
? "bg-littwin-blue"
|
||||
: "bg-gray-400"
|
||||
@@ -558,7 +562,7 @@ function Kue705FO({
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleButtonClick("TDR")}
|
||||
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
|
||||
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
|
||||
tdrActive[slotIndex] === 0
|
||||
? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
|
||||
: activeButton === "TDR"
|
||||
@@ -573,7 +577,7 @@ function Kue705FO({
|
||||
|
||||
<button
|
||||
onClick={handleOpenChartModal} // Öffnet das Chart-Modal
|
||||
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
|
||||
className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
|
||||
>
|
||||
Messkurve
|
||||
</button>
|
||||
@@ -595,9 +599,9 @@ function Kue705FO({
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "95%",
|
||||
maxWidth: "1200px",
|
||||
height: "650px",
|
||||
padding: "10px",
|
||||
maxWidth: "75rem",
|
||||
height: "40.625rem",
|
||||
padding: "0.625rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -605,11 +609,11 @@ function Kue705FO({
|
||||
onClick={handleCloseChartModal}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
top: "0.625rem",
|
||||
right: "0.625rem",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "24px",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
@@ -620,7 +624,7 @@ function Kue705FO({
|
||||
<canvas
|
||||
id="myChart"
|
||||
ref={chartRef}
|
||||
style={{ width: "100%", height: "600px" }}
|
||||
style={{ width: "100%", height: "37.5rem" }}
|
||||
></canvas>
|
||||
</ReactModal>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user