update rightbar

2024-01-25 10:24:08 +08:00
parent be5fbe1c01
commit b27a20f3cf
8 changed files with 77 additions and 60 deletions
--- a/src/components/Common/Energy/EnergeCostRealtime/index.jsx
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
@@ -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}>
--- a/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
@@ -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;
+}
--- a/src/components/Common/Energy/index.module.scss
+++ b/src/components/Common/Energy/index.module.scss
@@ -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;
 }

--- a/src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx
+++ b/src/components/Common/SmokeHandle/SmokeHandleTable/index.jsx
@@ -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;
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
+++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
@@ -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: ''
    },
  };
 }
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
+++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
@@ -93,6 +93,7 @@
 .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
  background: #02457e !important;
 }
+
 .graphBaseDesc {
  margin: 0 12px;
  line-height: 1;
--- a/src/components/Common/SmokeHandle/index.jsx
+++ b/src/components/Common/SmokeHandle/index.jsx
@@ -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>
--- a/src/components/Common/SmokeHandle/index.module.scss
+++ b/src/components/Common/SmokeHandle/index.module.scss
@@ -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;
 }