update rightbar
This commit is contained in:
rodzic
be5fbe1c01
commit
b27a20f3cf
@ -6,22 +6,36 @@ const EnergyCostRealtime = () => {
|
||||
|
||||
return (
|
||||
<div className={`${cls.cost__info} flex`}>
|
||||
<div
|
||||
className={`${cls.info__item} flex flex-col justify-center items-center`}
|
||||
style={{ width: "112px", padding: 0 }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "2px",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
余热发电
|
||||
</span>
|
||||
<span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
|
||||
</span>
|
||||
<div className={`${cls.info__item_groups_col1}`}>
|
||||
<div className={cls.info__item}>
|
||||
<i
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontStyle: "normal",
|
||||
paddingRight: "6px",
|
||||
}}
|
||||
>
|
||||
余热发电(实时)
|
||||
</i>
|
||||
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={cls.info__item}>
|
||||
<i
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontStyle: "normal",
|
||||
paddingRight: "6px",
|
||||
}}
|
||||
>
|
||||
余热发电(总量)
|
||||
</i>
|
||||
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls.info__item_groups}>
|
||||
<div className={cls.info__item}>
|
||||
|
@ -1,24 +1,20 @@
|
||||
.cost__info {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.info__item {
|
||||
border-radius: 2px;
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// min-width: 190px;
|
||||
// height: 43px;
|
||||
font-size: 14px;
|
||||
// letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
line-height: 28px;
|
||||
padding-left: 12px;
|
||||
// text-align: center;
|
||||
padding: 8px 0;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hAuto {
|
||||
@ -26,8 +22,16 @@
|
||||
}
|
||||
|
||||
.info__item_groups {
|
||||
flex: 2;
|
||||
margin-left: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info__item_groups_col1 {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
background: url(../../../assets/energy.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 626px;
|
||||
height: 400px;
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
.cost__info {
|
||||
@ -18,13 +18,9 @@
|
||||
border-radius: 2px;
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// min-width: 190px;
|
||||
// height: 43px;
|
||||
font-size: 14px;
|
||||
// letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
padding-left: 12px;
|
||||
// text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
24
src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx
Normal file
24
src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import cls from "../index.module.scss";
|
||||
|
||||
const SmokeHandleTable = () => {
|
||||
const smokeInfo = useSelector((state) => state.smoke?.info);
|
||||
return (
|
||||
<div className={cls.info__item_groups}>
|
||||
<div className={cls.info__item}>
|
||||
氧 气 含 量 : {(+smokeInfo?.O2_float)?.toFixed(2) || 0}%
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
氮氧化物浓度: {(+smokeInfo?.NOX_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
二氧化硫浓度: {(+smokeInfo?.SO2_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
颗粒物浓度: {(+smokeInfo?.dust_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SmokeHandleTable;
|
@ -1,7 +1,6 @@
|
||||
import cls from "./index.module.css";
|
||||
import { randomInt } from "../../../../utils";
|
||||
import * as echarts from "echarts";
|
||||
import { Radio, Select } from "antd";
|
||||
import { Select } from "antd";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
@ -194,7 +193,7 @@ const SmokeTrendChart = (props) => {
|
||||
onChange={(value, option) => handleDateChange(value)}
|
||||
/>
|
||||
</div>
|
||||
{options && <ReactECharts option={options} style={{ height: "240px" }} />}
|
||||
{options && <ReactECharts option={options} style={{ height: "220px" }} />}
|
||||
{!options && (
|
||||
<p
|
||||
style={{
|
||||
@ -278,9 +277,6 @@ function getOptions(source, period, trend) {
|
||||
color: "#213259a0",
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -338,7 +334,6 @@ function getOptions(source, period, trend) {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "xc-chart-tooltip",
|
||||
// backgroundColor: ''
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -93,6 +93,7 @@
|
||||
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
|
||||
background: #02457e !important;
|
||||
}
|
||||
|
||||
.graphBaseDesc {
|
||||
margin: 0 12px;
|
||||
line-height: 1;
|
||||
|
@ -2,28 +2,13 @@ import cls from "./index.module.scss";
|
||||
import Container from "../../Container";
|
||||
import TechSplitline from "../TechSplitline";
|
||||
import SmokeTrendChart from "./SmokeTrendChart";
|
||||
import { useSelector } from "react-redux";
|
||||
import SmokeHandleTable from "./SmokeHandleTable";
|
||||
|
||||
function SmokeHandle(props) {
|
||||
const smokeInfo = useSelector((state) => state.smoke?.info);
|
||||
|
||||
return (
|
||||
<Container title="烟气处理" icon="smoke" className={cls.smokeHandle}>
|
||||
<div className={`${cls.smokeHandle__content} flex flex-col`}>
|
||||
<div className={cls.info__item_groups}>
|
||||
<div className={cls.info__item}>
|
||||
氧 气 含 量 : {(+smokeInfo?.O2_float)?.toFixed(2) || 0}%
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
氮氧化物浓度: {(+smokeInfo?.NOX_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
二氧化硫浓度: {(+smokeInfo?.SO2_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
<div className={cls.info__item}>
|
||||
颗粒物浓度: {(+smokeInfo?.dust_float)?.toFixed(2) || 0}mg/m³
|
||||
</div>
|
||||
</div>
|
||||
<SmokeHandleTable />
|
||||
<TechSplitline />
|
||||
<SmokeTrendChart />
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@
|
||||
background: url(../../../assets/smoke.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 626px;
|
||||
height: 540px;
|
||||
height: 490px;
|
||||
.smokeHandle__content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -13,19 +13,17 @@
|
||||
border-radius: 2px;
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// width: 288px;
|
||||
height: 56px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 56px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.info__item_groups {
|
||||
margin-bottom: 12px;
|
||||
margin-left: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
Ładowanie…
Reference in New Issue
Block a user