mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update energe layout

Browse Source
This commit is contained in:
lb 2024-01-02 17:00:35 +08:00
parent c9829d4f5a
commit 15d05c26d8
16 changed files with 161 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/GraphBase/index.jsx
View File

@ -83,9 +83,9 @@ function GraphBase(props) {
<div className={cls.graphBaseTitle}> <div className={cls.graphBaseTitle}>
<img src={iconSrc} alt="#" /> <img src={iconSrc} alt="#" />
<h2>{title}</h2> <h2>{title}</h2>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
</div> </div>
<div className={cls.graphBaseContent}> <div className={cls.graphBaseContent}>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
{switchOptions && ( {switchOptions && (
<div className={cls.graphBaseSwitch} style={switchStyle}> <div className={cls.graphBaseSwitch} style={switchStyle}>
<Switch size="small" defaultChecked onChange={handleSwitchChange} /> <Switch size="small" defaultChecked onChange={handleSwitchChange} />

5
src/components/Common/GraphBase/index.module.css
View File

@ -85,9 +85,10 @@
} }
.graphBaseDesc { .graphBaseDesc {
position: absolute; margin-left: 8px;
/* position: absolute;
top: 25px; top: 25px;
left: 150px; left: 150px; */
font-size: 19px; font-size: 19px;
color: #76fff9; color: #76fff9;
} }

14
src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
View File

@ -34,7 +34,7 @@ function Gas(props) {
dateOptions={["周", "月", "年"]} dateOptions={["周", "月", "年"]}
// legend={["总量"]} // legend={["总量"]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "short"]} size={["long", "middle"]}
> >
{/* real echarts here */} {/* real echarts here */}
{options && ( {options && (
@ -52,7 +52,7 @@ function Gas(props) {
fontSize: "24px", fontSize: "24px",
userSelect: "none", userSelect: "none",
textAlign: "center", textAlign: "center",
paddingTop: "48px", paddingTop: "88px",
}} }}
> >
暂无数据 暂无数据
@ -81,7 +81,7 @@ function getOptions(period, trend) {
]; ];
return { return {
color: colors, color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 38, right: 12, bottom: 20, left: 80 },
legend: { legend: {
show: false, show: false,
icon: "roundRect", icon: "roundRect",
@ -94,7 +94,7 @@ function getOptions(period, trend) {
height: 8, height: 8,
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 10, fontSize: 12,
}, },
}, },
xAxis: { xAxis: {
@ -111,7 +111,7 @@ function getOptions(period, trend) {
.reverse(), .reverse(),
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
@ -125,13 +125,13 @@ function getOptions(period, trend) {
name: "单位m³/h", name: "单位m³/h",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 16,
align: "right", align: "right",
}, },
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
formatter: "{value}", formatter: "{value}",
}, },
axisLine: { axisLine: {

2
src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
View File

@ -33,7 +33,7 @@ function ElecCost(props) {
dateOptions={["周", "月", "年"]} dateOptions={["周", "月", "年"]}
// legend={["总量"]} // legend={["总量"]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "short"]} size={["long", "middle"]}
> >
{/* real echarts here */} {/* real echarts here */}
{ options && <ReactECharts { options && <ReactECharts

22
src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
View File

@ -10,8 +10,8 @@ function Energy(props) {
className={cls.shadowBorder} className={cls.shadowBorder}
style={{ style={{
gridRow: "1 / 3", gridRow: "1 / 3",
paddingTop: "38px", paddingTop: "104px",
paddingLeft: "32px", paddingLeft: "38px",
userSelect: "none", userSelect: "none",
}} }}
> >
@ -21,25 +21,29 @@ function Energy(props) {
className={cls.shadowBorder + " " + cls.infoText} className={cls.shadowBorder + " " + cls.infoText}
style={{ style={{
fontSize: "22px", fontSize: "22px",
lineHeight: "2.5", lineHeight: "1.5",
gridRow: "1 / 3", gridRow: "1 / 3",
}} }}
> >
<span style={{ lineHeight: 2.5 }}>余热发电</span> <span style={{ lineHeight: 1.5 }}>余 热 发 电</span>
<span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span> <span style={{ lineHeight: 1.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
</span> </span>
<span className={cls.shadowBorder + " " + cls.infoText}> <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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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> </span>
</div> </div>
); );

35
src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
View File

@ -1,21 +1,30 @@
.layout { .layout {
display: grid; display: grid;
gap: 6px; gap: 6px;
grid-template-columns: 133px 158px 292px 292px ; grid-template-columns: 133px 158px 292px 292px;
grid-template-rows: 60px 60px; /* grid-template-rows: 60px 60px; */
grid-template-rows: 129px 129px;
} }
.shadowBorder { .shadowBorder {
box-shadow: inset 0 0 12px 3px #fff3; box-shadow: inset 0 0 12px 3px #fff2;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
} }
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
line-height: 2.5; line-height: 2.5;
/* line-height: 20px; */ /* line-height: 20px; */
letter-spacing: 1px; letter-spacing: 1px;
user-select: none; user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.infoText > span:last-child {
color: #00FFF7;
} }

2
src/components/Modules/EnergyCostAnalysis/NO/index.jsx
View File

@ -34,7 +34,7 @@ function NO(props) {
return ( return (
<GraphBase <GraphBase
icon="battery" icon="smoke"
title="氮氧化物" title="氮氧化物"
desc="能耗趋势图" desc="能耗趋势图"
switchOptions={false} switchOptions={false}

2
src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
View File

@ -34,7 +34,7 @@ function Dust(props) {
return ( return (
<GraphBase <GraphBase
icon="battery" icon="smoke"
title="颗粒物" title="颗粒物"
desc="能耗趋势图" desc="能耗趋势图"
switchOptions={false} switchOptions={false}

14
src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
View File

@ -34,7 +34,7 @@ function NatGas(props) {
dateOptions={["周", "月", "年"]} dateOptions={["周", "月", "年"]}
// legend={["总量"]} // legend={["总量"]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "short"]} size={["long", "middle"]}
> >
{/* real echarts here */} {/* real echarts here */}
{options && ( {options && (
@ -52,7 +52,7 @@ function NatGas(props) {
fontSize: "24px", fontSize: "24px",
userSelect: "none", userSelect: "none",
textAlign: "center", textAlign: "center",
paddingTop: "48px", paddingTop: "88px",
}} }}
> >
暂无数据 暂无数据
@ -81,7 +81,7 @@ function getOptions(period, trend) {
]; ];
return { return {
color: colors, color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 38, right: 12, bottom: 20, left: 80 },
legend: { legend: {
show: false, show: false,
icon: "roundRect", icon: "roundRect",
@ -94,7 +94,7 @@ function getOptions(period, trend) {
height: 8, height: 8,
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 10, fontSize: 12,
}, },
}, },
xAxis: { xAxis: {
@ -111,7 +111,7 @@ function getOptions(period, trend) {
.reverse(), .reverse(),
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
@ -125,13 +125,13 @@ function getOptions(period, trend) {
name: "单位m³/h", name: "单位m³/h",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 14,
align: "right", align: "right",
}, },
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
formatter: "{value}", formatter: "{value}",
}, },
axisLine: { axisLine: {

4
src/components/Modules/EnergyCostAnalysis/O/index.jsx
View File

@ -34,7 +34,7 @@ function Oxygen(props) {
return ( return (
<GraphBase <GraphBase
icon="battery" icon="smoke"
title="氧气含量" title="氧气含量"
desc="能耗趋势图" desc="能耗趋势图"
switchOptions={false} switchOptions={false}
@ -68,7 +68,7 @@ function Oxygen(props) {
fontSize: "24px", fontSize: "24px",
userSelect: "none", userSelect: "none",
textAlign: "center", textAlign: "center",
paddingTop: "96px", paddingTop: "160px",
}} }}
> >
暂无数据 暂无数据

2
src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
View File

@ -33,7 +33,7 @@ function SO2(props) {
} }
return ( return (
<GraphBase <GraphBase
icon="battery" icon="smoke"
title="二氧化硫" title="二氧化硫"
desc="能耗趋势图" desc="能耗趋势图"
switchOptions={false} switchOptions={false}

20
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
View File

@ -10,7 +10,7 @@ function SmokeHandle(props) {
className={cls.shadowBorder} className={cls.shadowBorder}
style={{ style={{
gridRow: "1 / 3", gridRow: "1 / 3",
paddingTop: "38px", paddingTop: "96px",
paddingLeft: "32px", paddingLeft: "32px",
userSelect: "none", userSelect: "none",
}} }}
@ -21,16 +21,26 @@ function SmokeHandle(props) {
className={cls.shadowBorder + " " + cls.infoText} className={cls.shadowBorder + " " + cls.infoText}
style={{ letterSpacing: "12px" }} 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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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>
<span className={cls.shadowBorder + " " + cls.infoText}> <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> </span>
</div> </div>
); );

36
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
View File

@ -1,21 +1,31 @@
.smoke { .smoke {
display: grid; display: grid;
gap: 6px; gap: 6px;
grid-template-columns: 187px 347px 347px ; grid-template-columns: 187px 347px 347px;
grid-template-rows: 60px 60px; /* grid-template-rows: 60px 60px; */
grid-template-rows: 129px 129px;
height: 100%;
} }
.shadowBorder { .shadowBorder {
box-shadow: inset 0 0 12px 3px #fff3; box-shadow: inset 0 0 12px 3px #fff2;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
} }
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
line-height: 2.5; line-height: 2.5;
/* line-height: 20px; */ /* line-height: 20px; */
letter-spacing: 1px; letter-spacing: 1px;
user-select: none; user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.infoText > span:last-child {
color: #00fff7;
} }

114
src/pages/EnergyCostAnalysis/index.jsx
View File

@ -1,63 +1,69 @@
import cls from './index.module.css'; import cls from "./index.module.css";
import SmokeHandle from '../../components/Modules/EnergyCostAnalysis/SmokeHandle'; import SmokeHandle from "../../components/Modules/EnergyCostAnalysis/SmokeHandle";
import Energy from '../../components/Modules/EnergyCostAnalysis/Energy'; import Energy from "../../components/Modules/EnergyCostAnalysis/Energy";
import NO from '../../components/Modules/EnergyCostAnalysis/NO'; import NO from "../../components/Modules/EnergyCostAnalysis/NO";
import NO2 from '../../components/Modules/EnergyCostAnalysis/NO2'; import NO2 from "../../components/Modules/EnergyCostAnalysis/NO2";
import SO2 from '../../components/Modules/EnergyCostAnalysis/SO2'; import SO2 from "../../components/Modules/EnergyCostAnalysis/SO2";
import Oxygen from '../../components/Modules/EnergyCostAnalysis/O'; import Oxygen from "../../components/Modules/EnergyCostAnalysis/O";
import NatGas from '../../components/Modules/EnergyCostAnalysis/NatGas'; import NatGas from "../../components/Modules/EnergyCostAnalysis/NatGas";
import ElecCost from '../../components/Modules/EnergyCostAnalysis/ElectricityCost'; import ElecCost from "../../components/Modules/EnergyCostAnalysis/ElectricityCost";
import WaterCost from '../../components/Modules/EnergyCostAnalysis/WaterCost'; import WaterCost from "../../components/Modules/EnergyCostAnalysis/WaterCost";
import RestHeat from '../../components/Modules/EnergyCostAnalysis/RestHeat'; import RestHeat from "../../components/Modules/EnergyCostAnalysis/RestHeat";
import Gas from '../../components/Modules/EnergyCostAnalysis/BadGas'; import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
function EnergyAnalysis(props) { function EnergyAnalysis(props) {
return ( return (
<div className={cls.grid}> <div className={cls.grid}>
<div className={cls.bgDitu}></div> <div className={cls.bgDitu}></div>
<div className={cls.vgrid + ' col-1'}> <div className={cls.vgrid + " col-1"}>
<SmokeHandle /> {/* <SmokeHandle /> */}
<Oxygen /> <div style={{ gridRow: "1 / 3" }}>
<NO /> <Oxygen />
</div> </div>
<div style={{ gridRow: "3 / 4" }}>
<NO />
</div>
</div>
<div className={cls.vgrid + ' col-2'}> <div className={cls.vgrid + " col-2"}>
<div style={{ gridRow: 3 }}> <div style={{ gridRow: 3 }}>
<NO2 /> <NO2 />
</div> </div>
<div style={{ gridRow: 2 }}> <div style={{ gridRow: 2 }}>
<SO2 /> <SO2 />
</div> </div>
</div> </div>
<div className={' ' + cls.line}></div> {/* <div className={" " + cls.line}></div> */}
<div className={cls.vgrid + ' col-3'}> <div className={cls.vgrid + " col-3"}>
<div style={{ gridRow: 2 }}> <div style={{ gridRow: 2 }}>
<RestHeat /> {/* <RestHeat /> */}
</div> <NatGas />
<div style={{ gridRow: 3 }}> </div>
<WaterCost /> <div style={{ gridRow: 3 }}>
</div> {/* <WaterCost /> */}
</div> <Gas />
</div>
</div>
<div className={cls.vgrid + ' col-4'}> <div className={cls.vvgrid + " col-4"}>
{/* <div className="bgray energy"></div> */} {/* <div className="bgray energy"></div> */}
<Energy /> {/* <Energy /> */}
<div className={cls.vvgrid}> <div className=" electronic">
<div className=" electronic"> <Energy />
<ElecCost /> </div>
</div> <div className=" gas">
<div className=" gas"> {/* <NatGas /> */}
<NatGas /> <SmokeHandle />
</div> </div>
<div className=" mgas"> <div style={{ height: "100%" }}>
<Gas /> <ElecCost />
</div> {/* <Gas /> */}
</div> </div>
</div> </div>
</div> </div>
); );
} }
export default EnergyAnalysis; export default EnergyAnalysis;

13
src/pages/EnergyCostAnalysis/index.module.css
View File

@ -2,7 +2,7 @@
display: grid; display: grid;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
grid-template-columns: 900px 900px 16px 900px 900px; grid-template-columns: 900px 900px 900px 900px;
/* grid-template-rows: 128px 389px 389px; */ /* grid-template-rows: 128px 389px 389px; */
/* height: 100%; */ /* height: 100%; */
/* overflow: hidden; */ /* overflow: hidden; */
@ -26,11 +26,10 @@
gap: 24px; gap: 24px;
grid-template-rows: 128px 389px 389px; grid-template-rows: 128px 389px 389px;
} }
.vvgrid { .vvgrid {
display: grid; display: grid;
gap: 24px; gap: 24px;
grid-template-rows: repeat(3, 253px); grid-template-rows: 258px 258px 389px;
} }
.shadowBorder { .shadowBorder {
@ -50,10 +49,4 @@
.line { .line {
background: url(../../assets/line.png) 0 60% no-repeat; background: url(../../assets/line.png) 0 60% no-repeat;
} }
.oxygen {
}
.no {
}

1
src/utils/index.ts
View File

@ -63,6 +63,7 @@ new XClient(
new XClient( new XClient(
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
"ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser, "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
// "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser,
"CUTTING_DATA", "CUTTING_DATA",
cuttingHandler cuttingHandler
); );