From 15d05c26d8e7fb4e1917132b35dab82842b45410 Mon Sep 17 00:00:00 2001 From: lb Date: Tue, 2 Jan 2024 17:00:35 +0800 Subject: [PATCH] update energe layout --- src/components/Common/GraphBase/index.jsx | 2 +- .../Common/GraphBase/index.module.css | 5 +- .../EnergyCostAnalysis/BadGas/index.jsx | 14 +-- .../ElectricityCost/index.jsx | 2 +- .../EnergyCostAnalysis/Energy/index.jsx | 22 ++-- .../Energy/index.module.css | 35 ++++-- .../Modules/EnergyCostAnalysis/NO/index.jsx | 2 +- .../Modules/EnergyCostAnalysis/NO2/index.jsx | 2 +- .../EnergyCostAnalysis/NatGas/index.jsx | 14 +-- .../Modules/EnergyCostAnalysis/O/index.jsx | 4 +- .../Modules/EnergyCostAnalysis/SO2/index.jsx | 2 +- .../EnergyCostAnalysis/SmokeHandle/index.jsx | 20 ++- .../SmokeHandle/index.module.css | 36 ++++-- src/pages/EnergyCostAnalysis/index.jsx | 114 +++++++++--------- src/pages/EnergyCostAnalysis/index.module.css | 13 +- src/utils/index.ts | 1 + 16 files changed, 161 insertions(+), 127 deletions(-) diff --git a/src/components/Common/GraphBase/index.jsx b/src/components/Common/GraphBase/index.jsx index 409a543..7c491df 100644 --- a/src/components/Common/GraphBase/index.jsx +++ b/src/components/Common/GraphBase/index.jsx @@ -83,9 +83,9 @@ function GraphBase(props) {
#

{title}

+ {desc &&
{desc}
}
- {desc &&
{desc}
} {switchOptions && (
diff --git a/src/components/Common/GraphBase/index.module.css b/src/components/Common/GraphBase/index.module.css index 0d1b914..46d744f 100644 --- a/src/components/Common/GraphBase/index.module.css +++ b/src/components/Common/GraphBase/index.module.css @@ -85,9 +85,10 @@ } .graphBaseDesc { - position: absolute; + margin-left: 8px; + /* position: absolute; top: 25px; - left: 150px; + left: 150px; */ font-size: 19px; color: #76fff9; } diff --git a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx index d08a121..1a3512c 100644 --- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx @@ -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: { diff --git a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx index 867ca58..15249a8 100644 --- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx @@ -33,7 +33,7 @@ function ElecCost(props) { dateOptions={["周", "月", "年"]} // legend={["总量"]} onDateChange={handleDateChange} - size={["long", "short"]} + size={["long", "middle"]} > {/* real echarts here */} { options && @@ -21,25 +21,29 @@ function Energy(props) { className={cls.shadowBorder + " " + cls.infoText} style={{ fontSize: "22px", - lineHeight: "2.5", + lineHeight: "1.5", gridRow: "1 / 3", }} > - 余热发电 - {energyInfo?.elecQty1 || 0}kWh + 余 热 发 电 + {energyInfo?.elecQty1 || 0}kWh - 水耗量: {energyInfo?.waterQty || 0}Km³ + 水 耗 量{" "} + {energyInfo?.waterQty || 0}Km³ - 天然气I: {energyInfo?.ngQty1 || 0} + 天 然 气 I{" "} + {energyInfo?.ngQty1 || 0} - 电耗量: {energyInfo?.elecQty2 || 0}kWh + 电 耗 量{" "} + {energyInfo?.elecQty2 || 0}kWh - 天然气II: {energyInfo?.ngQty2 || 0} + 天 然 气 II{" "} + {energyInfo?.ngQty2 || 0}
); diff --git a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css index 19cbe76..ab1051c 100644 --- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css +++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css @@ -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; } diff --git a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx index 96eaa52..1705f2d 100644 --- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx @@ -34,7 +34,7 @@ function NO(props) { return ( {/* 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: { diff --git a/src/components/Modules/EnergyCostAnalysis/O/index.jsx b/src/components/Modules/EnergyCostAnalysis/O/index.jsx index 11d320d..90ed417 100644 --- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx @@ -34,7 +34,7 @@ function Oxygen(props) { return ( 暂无数据 diff --git a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx index d10edbc..871da30 100644 --- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx @@ -33,7 +33,7 @@ function SO2(props) { } return ( - 氧气含量: {smokeInfo?.O2_float || 0}% + 氧 气 含 量{" "} + {smokeInfo?.O2_float || 0}% - 氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³ + 氮 氧 化 物 浓 度{" "} + + {smokeInfo?.NOX_float || 0}mg/m³ + - 二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³ + 二 氧 化 硫 浓 度{" "} + + {smokeInfo?.SO2_float || 0}mg/m³ + - 颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³ + 颗 粒 物 浓 度:{" "} + + {smokeInfo?.dust_float || 0}mg/m³ +
); diff --git a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css index d984658..2de665b 100644 --- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css +++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css @@ -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; } diff --git a/src/pages/EnergyCostAnalysis/index.jsx b/src/pages/EnergyCostAnalysis/index.jsx index 43f0af9..e4a093e 100644 --- a/src/pages/EnergyCostAnalysis/index.jsx +++ b/src/pages/EnergyCostAnalysis/index.jsx @@ -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 ( -
-
-
- - - -
+ return ( +
+
+
+ {/* */} +
+ +
+
+ +
+
-
-
- -
-
- -
-
+
+
+ +
+
+ +
+
-
+ {/*
*/} -
-
- -
-
- -
-
+
+
+ {/* */} + +
+
+ {/* */} + +
+
-
- {/*
*/} - -
-
- -
-
- -
-
- -
-
-
-
- ); +
+ {/*
*/} + {/* */} +
+ +
+
+ {/* */} + +
+
+ + {/* */} +
+
+
+ ); } export default EnergyAnalysis; diff --git a/src/pages/EnergyCostAnalysis/index.module.css b/src/pages/EnergyCostAnalysis/index.module.css index 009a769..09cc541 100644 --- a/src/pages/EnergyCostAnalysis/index.module.css +++ b/src/pages/EnergyCostAnalysis/index.module.css @@ -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 { -} +} \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts index 0e9c6f9..dd3d960 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -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 );