mt-fe-group/xuchang-new
9
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: {

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

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

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

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

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

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

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

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

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

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

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

@@ -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: {

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

@@ -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",
}}
>
暂无数据

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

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

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

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

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

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