update energe layout

src/components/Common/GraphBase/index.jsx

@@ -83,9 +83,9 @@ function GraphBase(props) {
 			<div className={cls.graphBaseTitle}>
 				<img src={iconSrc} alt="#" />
 				<h2>{title}</h2>
+				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
 			</div>
 			<div className={cls.graphBaseContent}>
-				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
 				{switchOptions && (
 					<div className={cls.graphBaseSwitch} style={switchStyle}>
 						<Switch size="small" defaultChecked onChange={handleSwitchChange} />

src/components/Common/GraphBase/index.module.css

@@ -85,9 +85,10 @@
 }
 
 .graphBaseDesc {
-	position: absolute;
+	margin-left: 8px;
+	/* position: absolute;
 	top: 25px;
-	left: 150px;
+	left: 150px; */
 	font-size: 19px;
 	color: #76fff9;
 }

src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx

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

src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx

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

src/components/Modules/EnergyCostAnalysis/Energy/index.jsx

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

src/components/Modules/EnergyCostAnalysis/Energy/index.module.css

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

src/components/Modules/EnergyCostAnalysis/NO/index.jsx

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

src/components/Modules/EnergyCostAnalysis/NO2/index.jsx

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

src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx

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

src/components/Modules/EnergyCostAnalysis/O/index.jsx

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

src/components/Modules/EnergyCostAnalysis/SO2/index.jsx

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

src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx

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

src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css

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

src/pages/EnergyCostAnalysis/index.jsx

@@ -1,63 +1,69 @@
-import cls from './index.module.css';
-import SmokeHandle from '../../components/Modules/EnergyCostAnalysis/SmokeHandle';
-import Energy from '../../components/Modules/EnergyCostAnalysis/Energy';
-import NO from '../../components/Modules/EnergyCostAnalysis/NO';
-import NO2 from '../../components/Modules/EnergyCostAnalysis/NO2';
-import SO2 from '../../components/Modules/EnergyCostAnalysis/SO2';
-import Oxygen from '../../components/Modules/EnergyCostAnalysis/O';
-import NatGas from '../../components/Modules/EnergyCostAnalysis/NatGas';
-import ElecCost from '../../components/Modules/EnergyCostAnalysis/ElectricityCost';
-import WaterCost from '../../components/Modules/EnergyCostAnalysis/WaterCost';
-import RestHeat from '../../components/Modules/EnergyCostAnalysis/RestHeat';
-import Gas from '../../components/Modules/EnergyCostAnalysis/BadGas';
+import cls from "./index.module.css";
+import SmokeHandle from "../../components/Modules/EnergyCostAnalysis/SmokeHandle";
+import Energy from "../../components/Modules/EnergyCostAnalysis/Energy";
+import NO from "../../components/Modules/EnergyCostAnalysis/NO";
+import NO2 from "../../components/Modules/EnergyCostAnalysis/NO2";
+import SO2 from "../../components/Modules/EnergyCostAnalysis/SO2";
+import Oxygen from "../../components/Modules/EnergyCostAnalysis/O";
+import NatGas from "../../components/Modules/EnergyCostAnalysis/NatGas";
+import ElecCost from "../../components/Modules/EnergyCostAnalysis/ElectricityCost";
+import WaterCost from "../../components/Modules/EnergyCostAnalysis/WaterCost";
+import RestHeat from "../../components/Modules/EnergyCostAnalysis/RestHeat";
+import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
 
 function EnergyAnalysis(props) {
-	return (
-		<div className={cls.grid}>
-			<div className={cls.bgDitu}></div>
-			<div className={cls.vgrid + ' col-1'}>
-				<SmokeHandle />
-				<Oxygen />
-				<NO />
-			</div>
+  return (
+    <div className={cls.grid}>
+      <div className={cls.bgDitu}></div>
+      <div className={cls.vgrid + " col-1"}>
+        {/* <SmokeHandle /> */}
+        <div style={{ gridRow: "1 / 3" }}>
+          <Oxygen />
+        </div>
+        <div style={{ gridRow: "3 / 4" }}>
+          <NO />
+        </div>
+      </div>
 
-			<div className={cls.vgrid + ' col-2'}>
-				<div style={{ gridRow: 3 }}>
-					<NO2 />
-				</div>
-				<div style={{ gridRow: 2 }}>
-					<SO2 />
-				</div>
-			</div>
+      <div className={cls.vgrid + " col-2"}>
+        <div style={{ gridRow: 3 }}>
+          <NO2 />
+        </div>
+        <div style={{ gridRow: 2 }}>
+          <SO2 />
+        </div>
+      </div>
 
-			<div className={' ' + cls.line}></div>
+      {/* <div className={" " + cls.line}></div> */}
 
-			<div className={cls.vgrid + ' col-3'}>
-				<div style={{ gridRow: 2 }}>
-					<RestHeat />
-				</div>
-				<div style={{ gridRow: 3 }}>
-					<WaterCost />
-				</div>
-			</div>
+      <div className={cls.vgrid + " col-3"}>
+        <div style={{ gridRow: 2 }}>
+          {/* <RestHeat /> */}
+          <NatGas />
+        </div>
+        <div style={{ gridRow: 3 }}>
+          {/* <WaterCost /> */}
+          <Gas />
+        </div>
+      </div>
 
-			<div className={cls.vgrid + ' col-4'}>
-				{/* <div className="bgray energy"></div> */}
-				<Energy />
-				<div className={cls.vvgrid}>
-					<div className=" electronic">
-						<ElecCost />
-					</div>
-					<div className=" gas">
-						<NatGas />
-					</div>
-					<div className=" mgas">
-						<Gas />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+      <div className={cls.vvgrid + " col-4"}>
+        {/* <div className="bgray energy"></div> */}
+        {/* <Energy /> */}
+        <div className=" electronic">
+          <Energy />
+        </div>
+        <div className=" gas">
+          {/* <NatGas /> */}
+          <SmokeHandle />
+        </div>
+        <div style={{ height: "100%" }}>
+          <ElecCost />
+          {/* <Gas /> */}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default EnergyAnalysis;

src/pages/EnergyCostAnalysis/index.module.css

@@ -2,7 +2,7 @@
 	display: grid;
 	justify-content: center;
 	gap: 24px;
-	grid-template-columns: 900px 900px 16px 900px 900px;
+	grid-template-columns: 900px 900px 900px 900px;
 	/* grid-template-rows: 128px 389px 389px; */
 	/* height: 100%; */
 	/* overflow: hidden; */
@@ -26,11 +26,10 @@
 	gap: 24px;
 	grid-template-rows: 128px 389px 389px;
 }
-
 .vvgrid {
 	display: grid;
 	gap: 24px;
-	grid-template-rows: repeat(3, 253px);
+	grid-template-rows: 258px 258px 389px;
 }
 
 .shadowBorder {
@@ -50,10 +49,4 @@
 
 .line {
 	background: url(../../assets/line.png) 0 60% no-repeat;
-}
-
-.oxygen {
-}
-
-.no {
-}
+}

src/utils/index.ts

@@ -63,6 +63,7 @@ new XClient(
 new XClient(
   // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
   "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
+  // "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser,
   "CUTTING_DATA",   
   cuttingHandler
 );