@@ -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 | |||
); | |||