update energe layout
Este cometimento está contido em:
lb
ascendente
c9829d4f5a
cometimento
15d05c26d8
@ -83,9 +83,9 @@ function GraphBase(props) {
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
<h2>{title}</h2>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
</div>
|
||||
<div className={cls.graphBaseContent}>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
{switchOptions && (
|
||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
|
||||
@ -85,9 +85,10 @@
|
||||
}
|
||||
|
||||
.graphBaseDesc {
|
||||
position: absolute;
|
||||
margin-left: 8px;
|
||||
/* position: absolute;
|
||||
top: 25px;
|
||||
left: 150px;
|
||||
left: 150px; */
|
||||
font-size: 19px;
|
||||
color: #76fff9;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ function Gas(props) {
|
||||
dateOptions={["周", "月", "年"]}
|
||||
// legend={["总量"]}
|
||||
onDateChange={handleDateChange}
|
||||
size={["long", "short"]}
|
||||
size={["long", "middle"]}
|
||||
>
|
||||
{/* real echarts here */}
|
||||
{options && (
|
||||
@ -52,7 +52,7 @@ function Gas(props) {
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "48px",
|
||||
paddingTop: "88px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
@ -81,7 +81,7 @@ function getOptions(period, trend) {
|
||||
];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 80 },
|
||||
legend: {
|
||||
show: false,
|
||||
icon: "roundRect",
|
||||
@ -94,7 +94,7 @@ function getOptions(period, trend) {
|
||||
height: 8,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 10,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -111,7 +111,7 @@ function getOptions(period, trend) {
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
@ -125,13 +125,13 @@ function getOptions(period, trend) {
|
||||
name: "单位m³/h",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
fontSize: 16,
|
||||
align: "right",
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
|
||||
@ -33,7 +33,7 @@ function ElecCost(props) {
|
||||
dateOptions={["周", "月", "年"]}
|
||||
// legend={["总量"]}
|
||||
onDateChange={handleDateChange}
|
||||
size={["long", "short"]}
|
||||
size={["long", "middle"]}
|
||||
>
|
||||
{/* real echarts here */}
|
||||
{ options && <ReactECharts
|
||||
|
||||
@ -10,8 +10,8 @@ function Energy(props) {
|
||||
className={cls.shadowBorder}
|
||||
style={{
|
||||
gridRow: "1 / 3",
|
||||
paddingTop: "38px",
|
||||
paddingLeft: "32px",
|
||||
paddingTop: "104px",
|
||||
paddingLeft: "38px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
@ -21,25 +21,29 @@ function Energy(props) {
|
||||
className={cls.shadowBorder + " " + cls.infoText}
|
||||
style={{
|
||||
fontSize: "22px",
|
||||
lineHeight: "2.5",
|
||||
lineHeight: "1.5",
|
||||
gridRow: "1 / 3",
|
||||
}}
|
||||
>
|
||||
<span style={{ lineHeight: 2.5 }}>余热发电</span>
|
||||
<span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
|
||||
<span style={{ lineHeight: 1.5 }}>余 热 发 电</span>
|
||||
<span style={{ lineHeight: 1.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
|
||||
</span>
|
||||
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
水耗量: {energyInfo?.waterQty || 0}Km³
|
||||
<span style={{ lineHeight: 1.5 }}>水 耗 量</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>{energyInfo?.waterQty || 0}Km³</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
天然气I: {energyInfo?.ngQty1 || 0}
|
||||
<span style={{ lineHeight: 1.5 }}>天 然 气 I</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>{energyInfo?.ngQty1 || 0}</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
电耗量: {energyInfo?.elecQty2 || 0}kWh
|
||||
<span style={{ lineHeight: 1.5 }}>电 耗 量</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>{energyInfo?.elecQty2 || 0}kWh</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
天然气II: {energyInfo?.ngQty2 || 0}
|
||||
<span style={{ lineHeight: 1.5 }}>天 然 气 II</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>{energyInfo?.ngQty2 || 0}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,21 +1,30 @@
|
||||
.layout {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: 133px 158px 292px 292px ;
|
||||
grid-template-rows: 60px 60px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: 133px 158px 292px 292px;
|
||||
/* grid-template-rows: 60px 60px; */
|
||||
grid-template-rows: 129px 129px;
|
||||
}
|
||||
|
||||
.shadowBorder {
|
||||
box-shadow: inset 0 0 12px 3px #fff3;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: inset 0 0 12px 3px #fff2;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 2.5;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 2.5;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.infoText > span:last-child {
|
||||
color: #00FFF7;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ function NO(props) {
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
icon="smoke"
|
||||
title="氮氧化物"
|
||||
desc="能耗趋势图"
|
||||
switchOptions={false}
|
||||
|
||||
@ -34,7 +34,7 @@ function Dust(props) {
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
icon="smoke"
|
||||
title="颗粒物"
|
||||
desc="能耗趋势图"
|
||||
switchOptions={false}
|
||||
|
||||
@ -34,7 +34,7 @@ function NatGas(props) {
|
||||
dateOptions={["周", "月", "年"]}
|
||||
// legend={["总量"]}
|
||||
onDateChange={handleDateChange}
|
||||
size={["long", "short"]}
|
||||
size={["long", "middle"]}
|
||||
>
|
||||
{/* real echarts here */}
|
||||
{options && (
|
||||
@ -52,7 +52,7 @@ function NatGas(props) {
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "48px",
|
||||
paddingTop: "88px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
@ -81,7 +81,7 @@ function getOptions(period, trend) {
|
||||
];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 80 },
|
||||
legend: {
|
||||
show: false,
|
||||
icon: "roundRect",
|
||||
@ -94,7 +94,7 @@ function getOptions(period, trend) {
|
||||
height: 8,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 10,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -111,7 +111,7 @@ function getOptions(period, trend) {
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
@ -125,13 +125,13 @@ function getOptions(period, trend) {
|
||||
name: "单位m³/h",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
fontSize: 14,
|
||||
align: "right",
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
|
||||
@ -34,7 +34,7 @@ function Oxygen(props) {
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
icon="smoke"
|
||||
title="氧气含量"
|
||||
desc="能耗趋势图"
|
||||
switchOptions={false}
|
||||
@ -68,7 +68,7 @@ function Oxygen(props) {
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "96px",
|
||||
paddingTop: "160px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
|
||||
@ -33,7 +33,7 @@ function SO2(props) {
|
||||
}
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
icon="smoke"
|
||||
title="二氧化硫"
|
||||
desc="能耗趋势图"
|
||||
switchOptions={false}
|
||||
|
||||
@ -10,7 +10,7 @@ function SmokeHandle(props) {
|
||||
className={cls.shadowBorder}
|
||||
style={{
|
||||
gridRow: "1 / 3",
|
||||
paddingTop: "38px",
|
||||
paddingTop: "96px",
|
||||
paddingLeft: "32px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
@ -21,16 +21,26 @@ function SmokeHandle(props) {
|
||||
className={cls.shadowBorder + " " + cls.infoText}
|
||||
style={{ letterSpacing: "12px" }}
|
||||
>
|
||||
氧气含量: {smokeInfo?.O2_float || 0}%
|
||||
<span style={{ lineHeight: 1.5 }}>氧 气 含 量</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>{smokeInfo?.O2_float || 0}%</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³
|
||||
<span style={{ lineHeight: 1.5 }}>氮 氧 化 物 浓 度</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{smokeInfo?.NOX_float || 0}mg/m³
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³
|
||||
<span style={{ lineHeight: 1.5 }}>二 氧 化 硫 浓 度</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{smokeInfo?.SO2_float || 0}mg/m³
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³
|
||||
<span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度:</span>{" "}
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{smokeInfo?.dust_float || 0}mg/m³
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,21 +1,31 @@
|
||||
.smoke {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: 187px 347px 347px ;
|
||||
grid-template-rows: 60px 60px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: 187px 347px 347px;
|
||||
/* grid-template-rows: 60px 60px; */
|
||||
grid-template-rows: 129px 129px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shadowBorder {
|
||||
box-shadow: inset 0 0 12px 3px #fff3;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: inset 0 0 12px 3px #fff2;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 2.5;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 2.5;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.infoText > span:last-child {
|
||||
color: #00fff7;
|
||||
}
|
||||
|
||||
@ -1,63 +1,69 @@
|
||||
import cls from './index.module.css';
|
||||
import SmokeHandle from '../../components/Modules/EnergyCostAnalysis/SmokeHandle';
|
||||
import Energy from '../../components/Modules/EnergyCostAnalysis/Energy';
|
||||
import NO from '../../components/Modules/EnergyCostAnalysis/NO';
|
||||
import NO2 from '../../components/Modules/EnergyCostAnalysis/NO2';
|
||||
import SO2 from '../../components/Modules/EnergyCostAnalysis/SO2';
|
||||
import Oxygen from '../../components/Modules/EnergyCostAnalysis/O';
|
||||
import NatGas from '../../components/Modules/EnergyCostAnalysis/NatGas';
|
||||
import ElecCost from '../../components/Modules/EnergyCostAnalysis/ElectricityCost';
|
||||
import WaterCost from '../../components/Modules/EnergyCostAnalysis/WaterCost';
|
||||
import RestHeat from '../../components/Modules/EnergyCostAnalysis/RestHeat';
|
||||
import Gas from '../../components/Modules/EnergyCostAnalysis/BadGas';
|
||||
import cls from "./index.module.css";
|
||||
import SmokeHandle from "../../components/Modules/EnergyCostAnalysis/SmokeHandle";
|
||||
import Energy from "../../components/Modules/EnergyCostAnalysis/Energy";
|
||||
import NO from "../../components/Modules/EnergyCostAnalysis/NO";
|
||||
import NO2 from "../../components/Modules/EnergyCostAnalysis/NO2";
|
||||
import SO2 from "../../components/Modules/EnergyCostAnalysis/SO2";
|
||||
import Oxygen from "../../components/Modules/EnergyCostAnalysis/O";
|
||||
import NatGas from "../../components/Modules/EnergyCostAnalysis/NatGas";
|
||||
import ElecCost from "../../components/Modules/EnergyCostAnalysis/ElectricityCost";
|
||||
import WaterCost from "../../components/Modules/EnergyCostAnalysis/WaterCost";
|
||||
import RestHeat from "../../components/Modules/EnergyCostAnalysis/RestHeat";
|
||||
import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
|
||||
|
||||
function EnergyAnalysis(props) {
|
||||
return (
|
||||
<div className={cls.grid}>
|
||||
<div className={cls.bgDitu}></div>
|
||||
<div className={cls.vgrid + ' col-1'}>
|
||||
<SmokeHandle />
|
||||
<Oxygen />
|
||||
<NO />
|
||||
</div>
|
||||
return (
|
||||
<div className={cls.grid}>
|
||||
<div className={cls.bgDitu}></div>
|
||||
<div className={cls.vgrid + " col-1"}>
|
||||
{/* <SmokeHandle /> */}
|
||||
<div style={{ gridRow: "1 / 3" }}>
|
||||
<Oxygen />
|
||||
</div>
|
||||
<div style={{ gridRow: "3 / 4" }}>
|
||||
<NO />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.vgrid + ' col-2'}>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
<NO2 />
|
||||
</div>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
<SO2 />
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls.vgrid + " col-2"}>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
<NO2 />
|
||||
</div>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
<SO2 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={' ' + cls.line}></div>
|
||||
{/* <div className={" " + cls.line}></div> */}
|
||||
|
||||
<div className={cls.vgrid + ' col-3'}>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
<RestHeat />
|
||||
</div>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
<WaterCost />
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls.vgrid + " col-3"}>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
{/* <RestHeat /> */}
|
||||
<NatGas />
|
||||
</div>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
{/* <WaterCost /> */}
|
||||
<Gas />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.vgrid + ' col-4'}>
|
||||
{/* <div className="bgray energy"></div> */}
|
||||
<Energy />
|
||||
<div className={cls.vvgrid}>
|
||||
<div className=" electronic">
|
||||
<ElecCost />
|
||||
</div>
|
||||
<div className=" gas">
|
||||
<NatGas />
|
||||
</div>
|
||||
<div className=" mgas">
|
||||
<Gas />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className={cls.vvgrid + " col-4"}>
|
||||
{/* <div className="bgray energy"></div> */}
|
||||
{/* <Energy /> */}
|
||||
<div className=" electronic">
|
||||
<Energy />
|
||||
</div>
|
||||
<div className=" gas">
|
||||
{/* <NatGas /> */}
|
||||
<SmokeHandle />
|
||||
</div>
|
||||
<div style={{ height: "100%" }}>
|
||||
<ElecCost />
|
||||
{/* <Gas /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnergyAnalysis;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
grid-template-columns: 900px 900px 16px 900px 900px;
|
||||
grid-template-columns: 900px 900px 900px 900px;
|
||||
/* grid-template-rows: 128px 389px 389px; */
|
||||
/* height: 100%; */
|
||||
/* overflow: hidden; */
|
||||
@ -26,11 +26,10 @@
|
||||
gap: 24px;
|
||||
grid-template-rows: 128px 389px 389px;
|
||||
}
|
||||
|
||||
.vvgrid {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-rows: repeat(3, 253px);
|
||||
grid-template-rows: 258px 258px 389px;
|
||||
}
|
||||
|
||||
.shadowBorder {
|
||||
@ -50,10 +49,4 @@
|
||||
|
||||
.line {
|
||||
background: url(../../assets/line.png) 0 60% no-repeat;
|
||||
}
|
||||
|
||||
.oxygen {
|
||||
}
|
||||
|
||||
.no {
|
||||
}
|
||||
}
|
||||
@ -63,6 +63,7 @@ new XClient(
|
||||
new XClient(
|
||||
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
|
||||
"ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
|
||||
// "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser,
|
||||
"CUTTING_DATA",
|
||||
cuttingHandler
|
||||
);
|
||||
|
||||
Carregando…
Criar uma nova questão referindo esta
Bloquear um utilizador