merge bugfix

2024-04-22 16:58:15 +08:00
parent 9894aeca50
commit 2996c061dc
26 changed files with 345 additions and 186 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ import { Switch } from "antd";
 import { createPortal } from "react-dom";

 const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
-
+const LUNBO_INTERVAL = 60 * 1000;
 function App() {
  const { styles, value, setValue } = useSlider(100);
  const [navActive, setNavActive] = useState("窑炉总览");
@@ -22,7 +22,7 @@ function App() {
    if (lunbo) {
      timer = setInterval(() => {
        handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]);
-      }, 5000);
+      }, LUNBO_INTERVAL);
    }
    return () => {
      clearInterval(timer);
--- a/src/assets/Icon/dontknowwhatitis.png
+++ b/src/assets/Icon/dontknowwhatitis.png
--- a/src/assets/Icon/lightnen.png
+++ b/src/assets/Icon/lightnen.png
--- a/src/assets/Icon/oilstation.png
+++ b/src/assets/Icon/oilstation.png
--- a/src/components/Common/AnnealFanRunFrequence/index.jsx
+++ b/src/components/Common/AnnealFanRunFrequence/index.jsx
@@ -109,6 +109,7 @@ function WindFrequence(props) {
      },
    };
  } else {
+    console.log('runstate changeD!......')
    dataList =
      runState != null
        ? Object.keys(runState).map((fan) => ({
--- a/src/components/Common/CurrentTemp/index.jsx
+++ b/src/components/Common/CurrentTemp/index.jsx
@@ -57,7 +57,7 @@ function WindFrequence(props) {
        currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
        []
    );
-  }, [dataSource]);
+  }, [dataSource, currentTempList]);

  return (
    <GraphBase
--- a/src/components/Common/GraphBase/index.jsx
+++ b/src/components/Common/GraphBase/index.jsx
@@ -44,6 +44,7 @@ function GraphBase(props) {
    selectWidth,
    legend,
  } = props;
+  const descSmall = props.descSmall || false;
  const iconSrc = useIcon(icon);
  const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
  const [showChart, setShowChart] = useState(true);
@@ -72,9 +73,9 @@ function GraphBase(props) {
          <span
            style={{
              color: "#fff",
-              fontSize: "14px",
+              fontSize: "calc(14px * var(--scale))",
              lineHeight: 1,
-              paddingLeft: "12px",
+              paddingLeft: "calc(12px * var(--scale))",
            }}
          >
            - 无 -
@@ -105,7 +106,7 @@ function GraphBase(props) {
      <div className={cls.graphBaseTitle}>
        <img src={iconSrc} alt="#" />
        <h2>{title}</h2>
-        {desc && <div className={cls.graphBaseDesc}>{desc}</div>}
+        {desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>}
      </div>
      <div className={cls.graphBaseContent}>
        {switchOptions && (
--- a/src/components/Common/GraphBase/index.module.css
+++ b/src/components/Common/GraphBase/index.module.css
@@ -93,6 +93,11 @@
 	color: #76fff9;
 }

+.graphBaseDescSmall {
+	font-size: 16px;
+	color: #76fff9;
+}
+
 .graphBaseSwitch {
 	position: absolute;
 	top: 30px;
--- a/src/components/Common/GraphBase/selector.style.overwrite.css
+++ b/src/components/Common/GraphBase/selector.style.overwrite.css
@@ -9,6 +9,7 @@

 .xc-date-selector-menu .ant-select-item-option-content {
    text-align: center;
+    font-size: calc(14px * var(--scale));
 }

 .xc-date-selector-menu .ant-select-item-option-selected {
@@ -20,10 +21,16 @@
    background-color: #02457E !important;
    color: #fff !important;
 }
+
+.xc-date-selector-menu .ant-select-item-option {
+    /* padding: 5px 8px; */
+    padding: .3em .35em;
+    min-height: unset;
+}
 /* 
 .ant-select-selector::after {
    content: '\25BC' !important;
-    visibility: visible !important; 
+    visibility: visible !important; L
    position: absolute;
    top: 2px;
    right: 22px;
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
+++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
@@ -33,9 +33,9 @@ const SmokeTrendChart = (props) => {
    switch (period) {
      case "day":
        setDesc(
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          dayjs().format("YYYY.MM.DD") +
            " 7点 - " +
-            dayjs().format("YYYY.MM.DD") +
+            dayjs().add(1, "day").format("YYYY.MM.DD") +
            " 7点"
        );
        break;
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/src/components/Common/TodayFaultTotal/index.jsx
@@ -33,10 +33,9 @@ function FaultTotal(props) {

  // time hint
  let timeDesc = "";
-  const now = new Date();
  switch (currentSelect) {
    case "日":
-      timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
+      timeDesc = dayjs().format('YYYY.MM.DD') + " 7点 - " + dayjs().add(1, 'day').format('YYYY.MM.DD') + " 7点";
      break;
    case "周":
      timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
@@ -52,7 +51,6 @@ function FaultTotal(props) {
    <GraphBase
      icon="chart"
      title="产线缺陷统计"
-      dateOptions={["日", "周", "月", "年"]}
      defaultSelect={currentSelect}
      onDateChange={handleDateChange}
      size={bgSize}
--- a/src/components/Common/TodayFaultType/index.jsx
+++ b/src/components/Common/TodayFaultType/index.jsx
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";

 function FaultType(props) {
  const [init, setInit] = useState(true);
@@ -16,6 +17,11 @@ function FaultType(props) {
      : [];
  const lines = currentStatistic.map((item) => item.name);
  const CHART_TYPE = "line"; // "pie" | "line";
+  const timestr =
+    dayjs().format("YYYY.MM.DD") +
+    " 7点 - " +
+    dayjs().add(1, "d").format("YYYY.MM.DD") +
+    " 7点";

  useEffect(() => {
    if (init == false) return;
@@ -46,6 +52,8 @@ function FaultType(props) {
    <GraphBase
      icon="default"
      title="产线当日缺陷分类"
+      desc={timestr}
+      descSmall={true}
      dateOptions={[...lines]}
      defaultSelect={currentLine}
      onDateChange={handleLineChange}
@@ -145,7 +153,7 @@ function getOptions(data, chart_type) {
        axisPointer: {
          type: "shadow",
        },
-        symbol: 'rect',
+        symbol: "rect",
        className: "xc-chart-tooltip",
        // backgroundColor: ''
      },
@@ -209,7 +217,9 @@ function getOptions(data, chart_type) {
            color: "#fffc",
          },
          data: (dataList || []).map((item) =>
-            item.value == null || isNaN(+item.value) ? null : (+item.value).toFixed(0)
+            item.value == null || isNaN(+item.value)
+              ? null
+              : (+item.value).toFixed(0)
          ),
        },
      ],
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -29,9 +29,9 @@ const GoodRateChart = (props) => {
  }

  const [timestr, setTimestr] = useState(
-    dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+    dayjs().format("YYYY.MM.DD") +
      " 7点 - " +
-      dayjs().format("YYYY.MM.DD") +
+      dayjs().add(1, "day").format("YYYY.MM.DD") +
      " 7点"
  );
  function handleDateChange(value) {
@@ -40,9 +40,9 @@ const GoodRateChart = (props) => {
    switch (value) {
      case "日":
        setTimestr(
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          dayjs().format("YYYY.MM.DD") +
            " 7点 - " +
-            dayjs().format("YYYY.MM.DD") +
+            dayjs().add(1, "day").format("YYYY.MM.DD") +
            " 7点"
        );
        break;
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
@@ -2,33 +2,40 @@ import cls from "./index.module.css";
 import GradientText from "../../../Common/GradientText";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
+import eIcon1 from "../../../../assets/Icon/dontknowwhatitis.png";
+import eIcon2 from "../../../../assets/Icon/lightnen.png";

 function Energy(props) {
-  const [isPage1, setIsPage1] = useState(true);
+  const [isPage1] = useState(props.page === 1);
  const energyInfo = useSelector((state) => state.energy?.info);

-  useEffect(() => {
-    const timer = setInterval(() => {
-      setIsPage1((pre) => !pre);
-    }, 10000);
+  // useEffect(() => {
+  //   const timer = setInterval(() => {
+  //     setIsPage1((pre) => !pre);
+  //   }, 10000);

-    return () => {
-      clearInterval(timer);
-    }
-  }, []);
+  //   return () => {
+  //     clearInterval(timer);
+  //   }
+  // }, []);

  return (
    <div className={" " + cls.layout} style={{ color: "#fff" }}>
      <span
-        className={cls.shadowBorder}
+        className={`${cls.shadowBorder} ${cls.border}`}
        style={{
          gridRow: "1 / 3",
-          paddingTop: "104px",
-          paddingLeft: "32px",
          userSelect: "none",
+          textAlign: "center",
+          paddingTop: "96px",
        }}
      >
-        <GradientText text="能源" />
+        {isPage1 ? (
+          <img src={eIcon1} width={32} alt="eicon1" />
+        ) : (
+          <img src={eIcon2} width={32} alt="eicon2" />
+        )}
+        <GradientText text={"\u2002\u2002能源"} />
      </span>
      {!isPage1 && (
        <div
@@ -65,7 +72,9 @@ function Energy(props) {
              {(+energyInfo?.elecQty7)?.toFixed(2) || 0}
            </span>
          </div>
-          <div className={cls.shadowBorder + " " + cls.infoText}>
+          <div
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
            <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
            <span
              style={{
@@ -77,7 +86,9 @@ function Energy(props) {
              {(+energyInfo?.elecQty4)?.toFixed(2) || 0}
            </span>
          </div>
-          <div className={cls.shadowBorder + " " + cls.infoText}>
+          <div
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
            <span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span>
            <span
              style={{
@@ -118,7 +129,9 @@ function Energy(props) {
            </div>
            <div
              style={{ flex: 1 }}
-              className={cls.shadowBorder + " " + cls.infoText}
+              className={
+                cls.shadowBorder + " " + cls.infoText + " " + cls.border
+              }
            >
              <span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span>
              <span
@@ -144,13 +157,17 @@ function Energy(props) {
              {energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
            </span>
          </span>
-          <span className={cls.shadowBorder + " " + cls.infoText}>
+          <span
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
            <span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
            <span style={{ lineHeight: 1.5 }}>
              {(+energyInfo?.elecQty2)?.toFixed(2) || 0}
            </span>
          </span>
-          <span className={cls.shadowBorder + " " + cls.infoText}>
+          <span
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
            <span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
            <span style={{ lineHeight: 1.5 }}>
              {energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
@@ -4,7 +4,8 @@
  /* grid-template-columns: 133px 158px 292px 292px; */
  grid-template-columns: 125px 250px 250px 250px;
  /* grid-template-rows: 60px 60px; */
-  grid-template-rows: 129px 129px;
+  grid-template-rows: auto;
+  height: 100%;
 }

 .shadowBorder {
@@ -13,6 +14,29 @@
  padding: 4px;
 }

+.shadowBorder.border {
+  position: relative;
+  border-bottom: 2px solid #00fff7;
+}
+
+.shadowBorder.border::before,
+.shadowBorder.border::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  display: inline-block;
+  height: 100%;
+  width: 2px;
+  background: linear-gradient(to top, #00fff7, #00fff708, transparent);
+}
+
+.shadowBorder.border::before {
+  left: 0;
+}
+.shadowBorder.border::after {
+  right: 0;
+}
+
 .infoText {
  text-align: center;
  font-size: 22px;
@@ -27,6 +51,6 @@
 }

 .infoText > span:last-child {
-  color: #00FFF7;
+  color: #00fff7;
  font-size: 24px;
 }
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
@@ -6,17 +6,38 @@ import { useState } from "react";
 import * as echarts from "echarts";
 import dayjs from "dayjs";

+function getTimeStr(period) {
+  return {
+    日:
+      dayjs().format("YYYY.MM.DD") +
+      " 7点 - " +
+      dayjs().add(1, "d").format("YYYY.MM.DD") +
+      " 7点",
+    年:
+      dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().endOf("year").format("YYYY.MM.") +
+      "28",
+    周:
+      dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+    月:
+      dayjs().subtract(1, "month").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().format("YYYY.MM.") +
+      "28",
+  }[period];
+}
+
 function NO(props) {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
  const [period, setPeriod] = useState("日");
-  const [timestr, setTimestr] = useState(
-    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-      " - " +
-      dayjs().subtract(1, "day").format("YYYY.MM.DD")
-  );
+
+  let timestr = getTimeStr(period);

  const currentTrend =
    period === "日"
@@ -33,35 +54,13 @@ function NO(props) {

  function handleDateChange(value) {
    setPeriod(value);
-    setTimestr(
-      {
-        日:
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
-          " 7点 - " +
-          dayjs().format("YYYY.MM.DD") +
-          " 7点",
-        年:
-          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().endOf("year").format("YYYY.MM.") +
-          "28",
-        周:
-          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-          " - " +
-          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
-        月:
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().format("YYYY.MM.") +
-          "28",
-      }[value]
-    );
+    timestr = getTimeStr(value);
  }
  return (
    <GraphBase
      icon="smoke"
      title="氮氧化物"
-      desc={`能耗趋势图  ${timestr}`}
+      desc={`烟气趋势图  ${timestr}`}
      switchOptions={false}
      defaultSelect={period}
      onSwitch={handleSwitch}
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -6,17 +6,38 @@ import { useState } from "react";
 import * as echarts from "echarts";
 import dayjs from "dayjs";

+function getTimeStr(period) {
+  return {
+    日:
+      dayjs().format("YYYY.MM.DD") +
+      " 7点 - " +
+      dayjs().add(1, 'd').format("YYYY.MM.DD") +
+      " 7点",
+    年:
+      dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().endOf("year").format("YYYY.MM.") +
+      "28",
+    周:
+      dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+    月:
+      dayjs().subtract(1, "month").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().format("YYYY.MM.") +
+      "28",
+  }[period];
+}
+
 function Dust(props) {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
  const [period, setPeriod] = useState("日");
-  const [timestr, setTimestr] = useState(
-    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-      " - " +
-      dayjs().subtract(1, "day").format("YYYY.MM.DD")
-  );
+
+  let timestr = getTimeStr(period);
  const currentTrend =
    period === "日"
      ? dayTrend
@@ -32,36 +53,14 @@ function Dust(props) {

  function handleDateChange(value) {
    setPeriod(value);
-    setTimestr(
-      {
-        日:
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
-          " 7点 - " +
-          dayjs().format("YYYY.MM.DD") +
-          " 7点",
-        年:
-          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().endOf("year").format("YYYY.MM.") +
-          "28",
-        周:
-          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-          " - " +
-          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
-        月:
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().format("YYYY.MM.") +
-          "28",
-      }[value]
-    );
+    timestr = getTimeStr(value);
  }

  return (
    <GraphBase
      icon="smoke"
      title="颗粒物"
-      desc={`能耗趋势图  ${timestr}`}
+      desc={`烟气趋势图  ${timestr}`}
      switchOptions={false}
      defaultSelect={period}
      onSwitch={handleSwitch}
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
@@ -8,7 +8,8 @@ import { lunarYear } from "../../../../utils/energeChartOption";
 import dayjs from "dayjs";

 function NatGas(props) {
-  const elecTrend = useSelector((state) => state.energy.trend.natGas1);
+  const natGasTrend = useSelector((state) => state.energy.trend.natGas1);
+  const gasTrend = useSelector((state) => state.energy.trend.natGas2);
  const [period, setPeriod] = useState("周");
  const [timestr, setTimestr] = useState(
    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
@@ -18,7 +19,7 @@ function NatGas(props) {

  const options = getOptions(
    { 周: "week", 月: "month", 年: "year" }[period],
-    elecTrend ?? { week: [], month: [], year: [] }
+    [natGasTrend, gasTrend] ?? { week: [], month: [], year: [] }
  );

  function handleSwitch(v) {
@@ -50,7 +51,7 @@ function NatGas(props) {
  return (
    <GraphBase
      icon="battery"
-      title="天然气I"
+      title="天然气"
      desc={`能耗趋势图  ${timestr}`}
      switchOptions={false}
      onSwitch={handleSwitch}
@@ -60,6 +61,45 @@ function NatGas(props) {
      onDateChange={handleDateChange}
      size={["long", "middle"]}
    >
+      <div
+        className="nat-gas-legend"
+        style={{
+          position: "absolute",
+          top: 28,
+          right: 144,
+          display: "flex",
+          gap: "24px",
+        }}
+      >
+        <div className="legend-item">
+          <div
+            className="legend-color"
+            style={{
+              display: "inline-block",
+              width: "12px",
+              height: "12px",
+              borderRadius: "2px",
+              marginRight: "8px",
+              backgroundColor: "#FFD160",
+            }}
+          />
+          <span style={{ color: "#fff" }}>天然气I</span>
+        </div>
+        <div className="legend-item">
+          <div
+            className="legend-color"
+            style={{
+              display: "inline-block",
+              width: "12px",
+              height: "12px",
+              borderRadius: "2px",
+              marginRight: "8px",
+              backgroundColor: "#12FFF5",
+            }}
+          />
+          <span style={{ color: "#fff" }}>天然气II</span>
+        </div>
+      </div>
      {/* real echarts here */}
      {options && (
        <ReactECharts
@@ -89,8 +129,9 @@ function NatGas(props) {

 export default NatGas;

-function getOptions(period, trend) {
-  if (trend[period].length === 0) return null;
+function getOptions(period, trendArr) {
+  if (trendArr[0][period].length === 0 || trendArr[1][period].length === 0)
+    return null;
  // export default function getOptions(seriesData, name) {
  const today = new Date();
  const currentYear = today.getFullYear();
@@ -185,21 +226,38 @@ function getOptions(period, trend) {
        },
      },
    },
-    series: {
-      data: trend[period].map((item) =>
-        item != null ? (+item).toFixed(2) : null
-      ),
-      type: "line",
-      symbol: "circle",
-      symbolSize: 6,
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: colors[0] + "40" },
-          { offset: 0.5, color: colors[0] + "20" },
-          { offset: 1, color: colors[0] + "00" },
-        ]),
+    series: [
+      {
+        data: trendArr[0][period].map((item) =>
+          item != null ? (+item).toFixed(2) : null
+        ),
+        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[0] + "40" },
+            { offset: 0.5, color: colors[0] + "20" },
+            { offset: 1, color: colors[0] + "00" },
+          ]),
+        },
      },
-    },
+      {
+        data: trendArr[1][period].map((item) =>
+          item != null ? (+item).toFixed(2) : null
+        ),
+        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[1] + "40" },
+            { offset: 0.5, color: colors[1] + "20" },
+            { offset: 1, color: colors[1] + "00" },
+          ]),
+        },
+      },
+    ],
    // series: seriesData.map((arr, index) => ({
    // 	name: index + 1 + '#' + name,
    // 	data: arr,
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
@@ -6,17 +6,37 @@ import { useState } from "react";
 import * as echarts from "echarts";
 import dayjs from "dayjs";

+function getTimeStr(period) {
+  return {
+    日:
+      dayjs().format("YYYY.MM.DD") +
+      " 7点 - " +
+      dayjs().add(1, "d").format("YYYY.MM.DD") +
+      " 7点",
+    年:
+      dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().endOf("year").format("YYYY.MM.") +
+      "28",
+    周:
+      dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+    月:
+      dayjs().subtract(1, "month").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().format("YYYY.MM.") +
+      "28",
+  }[period];
+}
+
 function Oxygen(props) {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
  const [period, setPeriod] = useState("日");
-  const [timestr, setTimestr] = useState(
-    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-      " - " +
-      dayjs().subtract(1, "day").format("YYYY.MM.DD")
-  );
+  let timestr = getTimeStr(period);

  const currentTrend =
    period === "日"
@@ -33,35 +53,13 @@ function Oxygen(props) {

  function handleDateChange(value) {
    setPeriod(value);
-    setTimestr(
-      {
-        日:
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
-          " 7点 - " +
-          dayjs().format("YYYY.MM.DD") +
-          " 7点",
-        年:
-          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().endOf("year").format("YYYY.MM.") +
-          "28",
-        周:
-          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-          " - " +
-          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
-        月:
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().format("YYYY.MM.") +
-          "28",
-      }[value]
-    );
+    timestr = getTimeStr(value);
  }
  return (
    <GraphBase
      icon="smoke"
      title="氧气含量"
-      desc={`能耗趋势图  ${timestr}`}
+      desc={`烟气趋势图  ${timestr}`}
      switchOptions={false}
      defaultSelect={period}
      onSwitch={handleSwitch}
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -6,6 +6,30 @@ import { useState } from "react";
 import * as echarts from "echarts";
 import dayjs from "dayjs";

+function getTimeStr(period) {
+  return {
+    日:
+      dayjs().format("YYYY.MM.DD") +
+      " 7点 - " +
+      dayjs().add(1, 'd').format("YYYY.MM.DD") +
+      " 7点",
+    年:
+      dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().endOf("year").format("YYYY.MM.") +
+      "28",
+    周:
+      dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+    月:
+      dayjs().subtract(1, "month").format("YYYY.MM.") +
+      "29 - " +
+      dayjs().format("YYYY.MM.") +
+      "28",
+  }[period];
+}
+
 function SO2(props) {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
@@ -21,47 +45,22 @@ function SO2(props) {
      : period === "月"
      ? monthTrend
      : yearTrend;
-  const [timestr, setTimestr] = useState(
-    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-      " - " +
-      dayjs().subtract(1, "day").format("YYYY.MM.DD")
-  );
+
+  let timestr = getTimeStr(period);
  const options = getOptions("SO2_float", period, currentTrend);

  function handleSwitch(v) {}

  function handleDateChange(value) {
    setPeriod(value);
-    setTimestr(
-      {
-        日:
-          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
-          " 7点 - " +
-          dayjs().format("YYYY.MM.DD") +
-          " 7点",
-        年:
-          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().endOf("year").format("YYYY.MM.") +
-          "28",
-        周:
-          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-          " - " +
-          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
-        月:
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
-          "29 - " +
-          dayjs().format("YYYY.MM.") +
-          "28",
-      }[value]
-    );
+    timestr = getTimeStr(value);
  }

  return (
    <GraphBase
      icon="smoke"
      title="二氧化硫"
-      desc={`能耗趋势图  ${timestr}`}
+      desc={`烟气趋势图  ${timestr}`}
      switchOptions={false}
      defaultSelect={period}
      onSwitch={handleSwitch}
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
@@ -1,21 +1,23 @@
 import cls from "./index.module.css";
 import GradientText from "../../../Common/GradientText";
 import { useSelector } from "react-redux";
+import eIcon1 from '../../../../assets/Icon/oilstation.png';

 function SmokeHandle(props) {
  const smokeInfo = useSelector((state) => state.smoke?.info);
  return (
    <div className={" " + cls.smoke} style={{ color: "#fff" }}>
      <span
-        className={cls.shadowBorder}
+        className={cls.shadowBorder + " " + cls.border}
        style={{
          gridRow: "1 / 3",
          paddingTop: "96px",
-          paddingLeft: "32px",
          userSelect: "none",
+          textAlign: "center",
        }}
      >
-        <GradientText text="烟气处理" />
+        <img src={eIcon1} width={32} alt="eIcon1" />
+        <GradientText text={"\u2002\u2002烟气处理"} />
      </span>
      <span
        className={cls.shadowBorder + " " + cls.infoText}
@@ -32,13 +34,13 @@ function SmokeHandle(props) {
          {(+smokeInfo?.NOX_float)?.toFixed(2) || 0}
        </span>
      </span>
-      <span className={cls.shadowBorder + " " + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}>
        <span style={{ lineHeight: 1.5 }}>二氧化硫浓度 mg/m³</span>
        <span style={{ lineHeight: 1.5 }}>
          {(+smokeInfo?.SO2_float)?.toFixed(2) || 0}
        </span>
      </span>
-      <span className={cls.shadowBorder + " " + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}>
        <span style={{ lineHeight: 1.5 }}>颗粒物浓度 mg/m³</span>
        <span style={{ lineHeight: 1.5 }}>
          {(+smokeInfo?.dust_float)?.toFixed(2) || 0}
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
@@ -3,7 +3,8 @@
  gap: 6px;
  grid-template-columns: 187px 347px 347px;
  /* grid-template-rows: 60px 60px; */
-  grid-template-rows: 129px 129px;
+  /* grid-template-rows: 129px 129px; */
+  grid-template-rows: auto;
  height: 100%;
 }

@@ -13,6 +14,29 @@
  padding: 4px;
 }

+.shadowBorder.border {
+  position: relative;
+  border-bottom: 2px solid #00fff7;
+}
+
+.shadowBorder.border::before,
+.shadowBorder.border::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  display: inline-block;
+  height: 100%;
+  width: 2px;
+  background: linear-gradient(to top, #00fff7, #00fff708, transparent);
+}
+
+.shadowBorder.border::before {
+  left: 0;
+}
+.shadowBorder.border::after {
+  right: 0;
+}
+
 .infoText {
  text-align: center;
  font-size: 24px;
--- a/src/hooks/useSlider.js
+++ b/src/hooks/useSlider.js
@@ -17,6 +17,10 @@ export default function useSlider(defaultSize) {

 	const v = (value / 100).toFixed(2);

+	useEffect(() => {
+		document.documentElement.style.setProperty('--scale', v);
+	}, [v])
+
 	const styles = {
 		transform: `scale(${v})`,
 		// transform: `scale(${v * 24 / 33}, ${v})`,
--- a/src/pages/EnergyCostAnalysis/index.jsx
+++ b/src/pages/EnergyCostAnalysis/index.jsx
@@ -37,19 +37,22 @@ function EnergyAnalysis(props) {
          <NatGas />
        </div>
        <div style={{ gridRow: 3 }}>
-          <Gas />
+          {/* <Gas /> */}
+          <ElecCost />
        </div>
      </div>

      <div className={cls.vvgrid + " col-4"}>
        <div className=" electronic">
-          <Energy />
+          <Energy key="2" page={2} />
        </div>
        <div className=" gas">
-          <SmokeHandle />
+          <Energy key="1" page={1} />
+          {/* <SmokeHandle /> */}
        </div>
        <div style={{ height: "100%" }}>
-          <ElecCost />
+          {/* <ElecCost /> */}
+          <SmokeHandle />
        </div>
      </div>
    </div>
--- a/src/pages/EnergyCostAnalysis/index.module.css
+++ b/src/pages/EnergyCostAnalysis/index.module.css
@@ -27,10 +27,18 @@
 	gap: 24px;
 	grid-template-rows: 128px 389px 389px;
 }
+
 .vvgrid {
-	display: grid;
-	gap: 24px;
-	grid-template-rows: 258px 258px 389px;
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+	/* display: grid;
+	gap: 32px;
+	grid-template-rows: 280px 280px 410px; */
+}
+
+.vvgrid > div {
+	flex: 1;
 }

 .shadowBorder {
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -23,6 +23,8 @@ class XClient {
    this.name = config.name;
    this.ws = new WebSocket(config.url);
    this.timeout = config.timeout || 1000 * 5;
+    this.heartbeatDelay = 1000 * 60 * 3;
+    this.reconnectCount = 0;

    this.ws.onopen = () => {
      console.log(`[*] ${this.name} 初始化连接成功`);