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

fix ui

Browse Source
This commit is contained in:
lb
2024-01-04 10:58:20 +08:00
parent 0b1d3aa4b3
commit ac772e2caf
15 changed files with 241 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,7 +93,7 @@ function getOptions(period, trend) {
];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 80 },
grid: { top: 40, right: 12, bottom: 20, left: 80 },
legend: {
show: false,
icon: "roundRect",
@@ -139,7 +139,7 @@ function getOptions(period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位/Nm³",
nameTextStyle: {
color: "#fff",
fontSize: 16,
@@ -164,7 +164,7 @@ function getOptions(period, trend) {
},
},
series: {
data: trend[period],
data: trend[period].map(item => item.toFixed(2)),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@@ -80,7 +80,7 @@ function getOptions(period, trend) {
];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 },
grid: { top: 40, right: 12, bottom: 20, left: 80 },
legend: {
show: false,
icon: "roundRect",
@@ -93,7 +93,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: {
@@ -122,16 +122,16 @@ function getOptions(period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位/kWh",
nameTextStyle: {
color: "#fff",
fontSize: 10,
fontSize: 16,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
fontSize: 14,
formatter: "{value}",
},
axisLine: {

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

@@ -25,25 +25,35 @@ function Energy(props) {
gridRow: "1 / 3",
}}
>
<span style={{ lineHeight: 1.5 }}>余 热 发 电</span>
<span style={{ lineHeight: 1.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
<span style={{ lineHeight: 1.5 }}>余热发电/kWh</span>
<span style={{ lineHeight: 1.5, width: '180px', wordWrap: 'break-word' }}>
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>水 耗 量</span>{" "}
<span style={{ lineHeight: 1.5 }}>{energyInfo?.waterQty || 0}Km³</span>
<span style={{ lineHeight: 1.5 }}>水耗量/Km³</span>
<span style={{ lineHeight: 1.5 }}>
{(+energyInfo?.waterQty)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>天 然 气 I</span>{" "}
<span style={{ lineHeight: 1.5 }}>{energyInfo?.ngQty1 || 0}</span>
<span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span>
<span style={{ lineHeight: 1.5 }}>
{energyInfo?.ngQty1?.replace("Nm³", "") || "0"}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>电 耗 量</span>{" "}
<span style={{ lineHeight: 1.5 }}>{energyInfo?.elecQty2 || 0}kWh</span>
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
<span style={{ lineHeight: 1.5 }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>天 然 气 II</span>{" "}
<span style={{ lineHeight: 1.5 }}>{energyInfo?.ngQty2 || 0}</span>
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
<span style={{ lineHeight: 1.5 }}>
{energyInfo?.ngQty2?.replace("Nm³", "") || "0"}
</span>
</span>
</div>
);

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

@@ -1,7 +1,8 @@
.layout {
display: grid;
gap: 6px;
grid-template-columns: 133px 158px 292px 292px;
/* grid-template-columns: 133px 158px 292px 292px; */
grid-template-columns: 133px 210px 266px 266px;
/* grid-template-rows: 60px 60px; */
grid-template-rows: 129px 129px;
}

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

@@ -85,7 +85,7 @@ function getOptions(source, period, trend) {
if (trend[source].length == 0) return null;
return {
color: ["#FFD160", "#12FFF5", "#2760FF"],
grid: { top: 38, right: 12, bottom: 20, left: 48 },
grid: { top: 40, right: 12, bottom: 20, left: 56 },
xAxis: {
type: "category",
// data: Array(7)
@@ -112,17 +112,17 @@ function getOptions(source, period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位mg/m³",
nameTextStyle: {
color: "#fff",
fontSize: 10,
fontSize: 12,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value} %",
formatter: "{value}",
},
axisLine: {
show: true,
@@ -141,7 +141,7 @@ function getOptions(source, period, trend) {
},
series: [
{
data: trend[source].map((item) => item.value),
data: trend[source].map((item) => !(item.value == null || isNaN(+item.value)) ? (+item.value).toFixed(2) : null),
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -187,6 +187,11 @@ function getOptions(source, period, trend) {
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
},
};
}

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

@@ -85,7 +85,7 @@ function getOptions(source, period, trend) {
if (trend[source].length == 0) return null;
return {
color: ["#FFD160", "#12FFF5", "#2760FF"],
grid: { top: 38, right: 12, bottom: 20, left: 48 },
grid: { top: 40, right: 12, bottom: 20, left: 56 },
xAxis: {
type: "category",
// data: Array(7)
@@ -112,17 +112,17 @@ function getOptions(source, period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位mg/m³",
nameTextStyle: {
color: "#fff",
fontSize: 10,
fontSize: 12,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value} %",
formatter: "{value}",
},
axisLine: {
show: true,
@@ -141,7 +141,8 @@ function getOptions(source, period, trend) {
},
series: [
{
data: trend[source].map((item) => item.value),
// (isNaN((+"f")) ? 0 : (+"f")).toFixed(2)
data: trend[source].map((item) => !(item.value == null || isNaN(+item.value)) ? (+item.value).toFixed(2) : null),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@@ -92,7 +92,7 @@ function getOptions(period, trend) {
];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 80 },
grid: { top: 40, right: 12, bottom: 20, left: 80 },
legend: {
show: false,
icon: "roundRect",
@@ -138,10 +138,10 @@ function getOptions(period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位/Nm³",
nameTextStyle: {
color: "#fff",
fontSize: 14,
fontSize: 16,
align: "right",
},
type: "value",
@@ -163,7 +163,7 @@ function getOptions(period, trend) {
},
},
series: {
data: trend[period],
data: trend[period].map(item => item.toFixed(3)),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@@ -85,7 +85,7 @@ function getOptions(source, period, trend) {
if (trend[source].length == 0) return null;
return {
color: ["#FFD160", "#12FFF5", "#2760FF"],
grid: { top: 38, right: 12, bottom: 20, left: 48 },
grid: { top: 40, right: 12, bottom: 20, left: 80 },
xAxis: {
type: "category",
// data: Array(7)
@@ -112,18 +112,20 @@ function getOptions(source, period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 10,
fontSize: 16,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
fontSize: 16,
formatter: "{value} %",
},
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
@@ -141,7 +143,7 @@ function getOptions(source, period, trend) {
},
series: [
{
data: trend[source].map((item) => item.value),
data: trend[source].map((item) => !(item.value == null || isNaN(+item.value)) ? (+item.value).toFixed(2) : null),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@@ -84,7 +84,7 @@ function getOptions(source, period, trend) {
if (trend[source].length == 0) return null;
return {
color: ["#FFD160", "#12FFF5", "#2760FF"],
grid: { top: 38, right: 12, bottom: 20, left: 48 },
grid: { top: 40, right: 12, bottom: 20, left: 56 },
xAxis: {
type: "category",
// data: Array(7)
@@ -111,17 +111,17 @@ function getOptions(source, period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: "单位mg/m³",
nameTextStyle: {
color: "#fff",
fontSize: 10,
fontSize: 12,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value} %",
formatter: "{value}",
},
axisLine: {
show: true,
@@ -140,7 +140,11 @@ function getOptions(source, period, trend) {
},
series: [
{
data: trend[source].map((item) => item.value),
data: trend[source].map((item) =>
!(item.value == null || isNaN(+item.value))
? (+item.value).toFixed(2)
: null
),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@@ -19,27 +19,29 @@ function SmokeHandle(props) {
</span>
<span
className={cls.shadowBorder + " " + cls.infoText}
style={{ letterSpacing: "12px" }}
style={{ letterSpacing: "2px" }}
>
<span style={{ lineHeight: 1.5 }}>氧 气 含 量</span>{" "}
<span style={{ lineHeight: 1.5 }}>{smokeInfo?.O2_float || 0}%</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>氮 氧 化 物 浓 度</span>{" "}
<span style={{ lineHeight: 1.5 }}>氧气含量 %</span>
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.NOX_float || 0}mg/m³
{(+smokeInfo?.O2_float)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>二 氧 化 硫 浓 度</span>{" "}
<span style={{ lineHeight: 1.5 }}>氮氧化物浓度 mg/m³</span>
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.SO2_float || 0}mg/m³
{(+smokeInfo?.NOX_float)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度</span>{" "}
<span style={{ lineHeight: 1.5 }}>二氧化硫浓度 mg/m³</span>
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.dust_float || 0}mg/m³
{(+smokeInfo?.SO2_float)?.toFixed(2) || 0}
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
<span style={{ lineHeight: 1.5 }}>颗粒物浓度 mg/m³</span>
<span style={{ lineHeight: 1.5 }}>
{(+smokeInfo?.dust_float)?.toFixed(2) || 0}
</span>
</span>
</div>