update energe layout

2024-01-02 17:00:35 +08:00
parent c9829d4f5a
commit 15d05c26d8
16 changed files with 161 additions and 127 deletions
--- a/src/components/Common/GraphBase/index.jsx
+++ b/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} />
--- a/src/components/Common/GraphBase/index.module.css
+++ b/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;
 }
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
+++ b/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: {
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/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
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
+++ b/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>
  );
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
+++ b/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;
 }
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
@@ -34,7 +34,7 @@ function NO(props) {

  return (
    <GraphBase
-      icon="battery"
+      icon="smoke"
      title="氮氧化物"
      desc="能耗趋势图"
      switchOptions={false}
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -34,7 +34,7 @@ function Dust(props) {

  return (
    <GraphBase
-      icon="battery"
+      icon="smoke"
      title="颗粒物"
      desc="能耗趋势图"
      switchOptions={false}
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/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: {
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/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",
          }}
        >
          暂无数据
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -33,7 +33,7 @@ function SO2(props) {
  }
  return (
    <GraphBase
-      icon="battery"
+      icon="smoke"
      title="二氧化硫"
      desc="能耗趋势图"
      switchOptions={false}
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
+++ b/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>
  );
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
+++ b/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;
 }
--- a/src/pages/EnergyCostAnalysis/index.jsx
+++ b/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;
--- a/src/pages/EnergyCostAnalysis/index.module.css
+++ b/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 {
-}
+}
--- a/src/utils/index.ts
+++ b/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
 );