merge bugfix

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

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) => ({

src/components/Common/CurrentTemp/index.jsx

@@ -57,7 +57,7 @@ function WindFrequence(props) {
         currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
         []
     );
-  }, [dataSource]);
+  }, [dataSource, currentTempList]);
 
   return (
     <GraphBase

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 && (

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

@@ -93,6 +93,11 @@
 	color: #76fff9;
 }
 
+.graphBaseDescSmall {
+	font-size: 16px;
+	color: #76fff9;
+}
+
 .graphBaseSwitch {
 	position: absolute;
 	top: 30px;

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;

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;

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}

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)
           ),
         },
       ],

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;

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³"}

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

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}

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}

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,

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}

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}

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}

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;

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})`,

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>

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 {

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} 初始化连接成功`);