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

update rightbar

Browse Source
This commit is contained in:
lb 2024-01-25 10:24:08 +08:00
parent be5fbe1c01
commit b27a20f3cf
8 changed files with 77 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Common/Energy/EnergeCostRealtime/index.jsx
View File

@ -6,22 +6,36 @@ const EnergyCostRealtime = () => {
return ( return (
<div className={`${cls.cost__info} flex`}> <div className={`${cls.cost__info} flex`}>
<div <div className={`${cls.info__item_groups_col1}`}>
className={`${cls.info__item} flex flex-col justify-center items-center`} <div className={cls.info__item}>
style={{ width: "112px", padding: 0 }} <i
> style={{
<span fontSize: "18px",
style={{ fontStyle: "normal",
fontSize: "20px", paddingRight: "6px",
letterSpacing: "2px", }}
lineHeight: 1.5, >
}} 余热发电(实时)
> </i>
余热发电 <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
</span> {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
<span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}> </span>
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh </div>
</span>
<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>
<div className={cls.info__item_groups}> <div className={cls.info__item_groups}>
<div className={cls.info__item}> <div className={cls.info__item}>

22
src/components/Common/Energy/EnergeCostRealtime/index.module.scss
View File

@ -1,24 +1,20 @@
.cost__info { .cost__info {
margin-top: 4px; margin-top: 4px;
margin-bottom: 12px; margin-bottom: 12px;
div {
flex-grow: 1;
}
} }
.info__item { .info__item {
border-radius: 2px; border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9); color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// min-width: 190px;
// height: 43px;
font-size: 14px; font-size: 14px;
// letter-spacing: 1.43px; line-height: 28px;
line-height: 40px;
padding-left: 12px; padding-left: 12px;
// text-align: center; padding: 8px 0;
user-select: none; user-select: none;
display: flex;
flex-direction: column;
align-items: center;
} }
.hAuto { .hAuto {
@ -26,8 +22,16 @@
} }
.info__item_groups { .info__item_groups {
flex: 2;
margin-left: 8px; margin-left: 8px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 8px;
} }
.info__item_groups_col1 {
flex: 1;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 8px;
}

6
src/components/Common/Energy/index.module.scss
View File

@ -2,7 +2,7 @@
background: url(../../../assets/energy.png) no-repeat; background: url(../../../assets/energy.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 626px; width: 626px;
height: 400px; height: 460px;
} }
.cost__info { .cost__info {
@ -18,13 +18,9 @@
border-radius: 2px; border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9); color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// min-width: 190px;
// height: 43px;
font-size: 14px; font-size: 14px;
// letter-spacing: 1.43px;
line-height: 40px; line-height: 40px;
padding-left: 12px; padding-left: 12px;
// text-align: center;
user-select: none; user-select: none;
} }

24
src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx Normal file
View 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;

9
src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
View File

@ -1,7 +1,6 @@
import cls from "./index.module.css"; import cls from "./index.module.css";
import { randomInt } from "../../../../utils";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Radio, Select } from "antd"; import { Select } from "antd";
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -194,7 +193,7 @@ const SmokeTrendChart = (props) => {
onChange={(value, option) => handleDateChange(value)} onChange={(value, option) => handleDateChange(value)}
/> />
</div> </div>
{options && <ReactECharts option={options} style={{ height: "240px" }} />} {options && <ReactECharts option={options} style={{ height: "220px" }} />}
{!options && ( {!options && (
<p <p
style={{ style={{
@ -278,9 +277,6 @@ function getOptions(source, period, trend) {
color: "#213259a0", color: "#213259a0",
}, },
}, },
// interval: 10,
// min: 0,
// max: 100,
}, },
series: [ series: [
{ {
@ -338,7 +334,6 @@ function getOptions(source, period, trend) {
type: "shadow", type: "shadow",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

1
src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
View File

@ -93,6 +93,7 @@
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked { .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
background: #02457e !important; background: #02457e !important;
} }
.graphBaseDesc { .graphBaseDesc {
margin: 0 12px; margin: 0 12px;
line-height: 1; line-height: 1;

19
src/components/Common/SmokeHandle/index.jsx
View File

@ -2,28 +2,13 @@ import cls from "./index.module.scss";
import Container from "../../Container"; import Container from "../../Container";
import TechSplitline from "../TechSplitline"; import TechSplitline from "../TechSplitline";
import SmokeTrendChart from "./SmokeTrendChart"; import SmokeTrendChart from "./SmokeTrendChart";
import { useSelector } from "react-redux"; import SmokeHandleTable from "./SmokeHandleTable";
function SmokeHandle(props) { function SmokeHandle(props) {
const smokeInfo = useSelector((state) => state.smoke?.info);
return ( return (
<Container title="烟气处理" icon="smoke" className={cls.smokeHandle}> <Container title="烟气处理" icon="smoke" className={cls.smokeHandle}>
<div className={`${cls.smokeHandle__content} flex flex-col`}> <div className={`${cls.smokeHandle__content} flex flex-col`}>
<div className={cls.info__item_groups}> <SmokeHandleTable />
<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>
<TechSplitline /> <TechSplitline />
<SmokeTrendChart /> <SmokeTrendChart />
</div> </div>

10
src/components/Common/SmokeHandle/index.module.scss
View File

@ -3,7 +3,7 @@
background: url(../../../assets/smoke.png) no-repeat; background: url(../../../assets/smoke.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 626px; width: 626px;
height: 540px; height: 490px;
.smokeHandle__content { .smokeHandle__content {
margin-top: 8px; margin-top: 8px;
} }
@ -13,19 +13,17 @@
border-radius: 2px; border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9); color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px; height: 32px;
height: 56px;
font-size: 16px; font-size: 16px;
letter-spacing: 1.43px; letter-spacing: 1.43px;
line-height: 56px; line-height: 32px;
text-align: center; text-align: center;
user-select: none; user-select: none;
} }
.info__item_groups { .info__item_groups {
margin-bottom: 12px; margin-bottom: 12px;
margin-left: 8px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 4px;
} }