update right table

src/components/Common/NavMenu/index.jsx

@@ -7,7 +7,7 @@ export default function CenterMenu({ active, onChangeActive }) {
 		['窑炉内部', '/kilnInner'],
 		['退火监测', '/stopFire'],
 		['质检统计', '/quailtyCheck'],
-		// ['能耗分析', '/energyCost'],
+		['能耗分析', '/energyCost'],
 	];
 	return (
 		<div className={`${cls.centerMenu} flex`}>

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

@@ -1,33 +1,47 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function Gas(props) {
+  const elecTrend = useSelector((state) => state.energy.trend.natGas2);
+  const [period, setPeriod] = useState("周");
+
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );
+
   function handleSwitch(v) {
     // console.log('switched ', v);
   }
 
   function handleDateChange(v) {
     // console.log('date ', v);
+    setPeriod(v);
   }
 
   return (
     <GraphBase
       icon="battery"
-			title="焦炉煤气"
+      title="天然气II"
       desc="能耗趋势图"
-			switchOptions={true}
+      switchOptions={false}
       onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
+      defaultSelect={period}
-			legend={['总量']}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
       onDateChange={handleDateChange}
-			size={['long', 'short']}
+      size={["long", "short"]}
     >
       {/* real echarts here */}
       <ReactECharts
         key={Math.random()}
-				option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
+		option={options}
-				style={{ height: '100%' }}
+        // option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
+        style={{ height: "100%" }}
       />
       {/* real table data here  */}
     </GraphBase>
@@ -35,3 +49,112 @@ function Gas(props) {
 }
 
 export default Gas;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period],
+      type: "line",
+      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: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

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

@@ -1,14 +1,25 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function ElecCost(props) {
+  const elecTrend = useSelector((state) => state.energy.trend.elec);
+  const [period, setPeriod] = useState("周");
+
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );
+
   function handleSwitch(v) {
     // console.log('switched ', v);
   }
 
   function handleDateChange(v) {
-		// console.log('date ', v);
+    setPeriod(v);
   }
 
   return (
@@ -16,18 +27,20 @@ function ElecCost(props) {
       icon="battery"
       title="电耗能"
       desc="能耗趋势图"
-			switchOptions={true}
+      switchOptions={false}
       onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
+      defaultSelect={period}
-			legend={['总量']}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
       onDateChange={handleDateChange}
-			size={['long', 'short']}
+      size={["long", "short"]}
     >
       {/* real echarts here */}
       <ReactECharts
         key={Math.random()}
-				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
+        option={options}
-				style={{ height: '100%' }}
+        // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
+        style={{ height: "100%" }}
       />
       {/* real table data here  */}
     </GraphBase>
@@ -35,3 +48,113 @@ function ElecCost(props) {
 }
 
 export default ElecCost;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: trend[period].map((item) => item.time),
+      // data: Array(7)
+      // 	.fill(1)
+      // 	.map((_, index) => {
+      // 		const today = new Date();
+      // 		const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      // 		return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      // 			dtimestamp,
+      // 		).getDate()}`;
+      // 	})
+      // 	.reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period].map((item) => item.qty),
+      type: "line",
+      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: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

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

@@ -1,41 +1,45 @@
-import cls from './index.module.css';
+import cls from "./index.module.css";
-import GradientText from '../../../Common/GradientText';
+import GradientText from "../../../Common/GradientText";
+import { useSelector } from "react-redux";
 
 function Energy(props) {
+  const energyInfo = useSelector((state) => state.energy?.info);
   return (
-		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
+    <div className={" " + cls.layout} style={{ color: "#fff" }}>
       <span
         className={cls.shadowBorder}
         style={{
-					gridRow: '1 / 3',
+          gridRow: "1 / 3",
-					paddingTop: '38px',
+          paddingTop: "38px",
-					paddingLeft: '32px',
+          paddingLeft: "32px",
-					userSelect: 'none',
+          userSelect: "none",
         }}
       >
         <GradientText text="能源" />
       </span>
       <span
-				className={cls.shadowBorder + ' ' + cls.infoText}
+        className={cls.shadowBorder + " " + cls.infoText}
         style={{
-					gridRow: '1 / 3',
+          fontSize: "22px",
+          lineHeight: "2.5",
+          gridRow: "1 / 3",
         }}
       >
         <span style={{ lineHeight: 2.5 }}>余热发电</span>
-				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
+        <span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
       </span>
 
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				水耗量: 32Km³
+        水耗量: {energyInfo?.waterQty || 0}Km³
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				天然气I: 92m³
+        天然气I: {energyInfo?.ngQty1 || 0}
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				电耗量: 92Km³
+        电耗量: {energyInfo?.elecQty2 || 0}kWh
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				天然气II: 92m³
+        天然气II: {energyInfo?.ngQty2 || 0}
       </span>
     </div>
   );

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

@@ -13,8 +13,8 @@
 
 .infoText {
 	text-align: center;
-	font-size: 24px;
+	font-size: 20px;
-	line-height: 2.2;
+	line-height: 2.5;
 	/* line-height: 20px; */
 	letter-spacing: 1px;
 	user-select: none;

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

@@ -1,33 +1,47 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function NatGas(props) {
+  const elecTrend = useSelector((state) => state.energy.trend.natGas1);
+  const [period, setPeriod] = useState("周");
+
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );
+
   function handleSwitch(v) {
     // console.log('switched ', v);
   }
 
   function handleDateChange(v) {
+    setPeriod(v);
     // console.log('date ', v);
   }
 
   return (
     <GraphBase
       icon="battery"
-			title="天然气"
+      title="天然气I"
       desc="能耗趋势图"
-			switchOptions={true}
+      switchOptions={false}
       onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
+      defaultSelect={period}
-			legend={['总量']}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
       onDateChange={handleDateChange}
-			size={['long', 'short']}
+      size={["long", "short"]}
     >
       {/* real echarts here */}
       <ReactECharts
         key={Math.random()}
-				option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
+        option={options}
-				style={{ height: '100%' }}
+        // option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
+        style={{ height: "100%" }}
       />
       {/* real table data here  */}
     </GraphBase>
@@ -35,3 +49,112 @@ function NatGas(props) {
 }
 
 export default NatGas;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+    },
+    series: {
+      data: trend[period],
+      type: "line",
+      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: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

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

@@ -1,34 +1,36 @@
-import cls from './index.module.css';
+import cls from "./index.module.css";
-import GradientText from '../../../Common/GradientText';
+import GradientText from "../../../Common/GradientText";
+import { useSelector } from "react-redux";
 
 function SmokeHandle(props) {
+  const smokeInfo = useSelector((state) => state.smoke?.info);
   return (
-		<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
+    <div className={" " + cls.smoke} style={{ color: "#fff" }}>
       <span
         className={cls.shadowBorder}
         style={{
-					gridRow: '1 / 3',
+          gridRow: "1 / 3",
-					paddingTop: '38px',
+          paddingTop: "38px",
-					paddingLeft: '32px',
+          paddingLeft: "32px",
-					userSelect: 'none',
+          userSelect: "none",
         }}
       >
         <GradientText text="烟气处理" />
       </span>
       <span
-				className={cls.shadowBorder + ' ' + cls.infoText}
+        className={cls.shadowBorder + " " + cls.infoText}
-				style={{ letterSpacing: '12px' }}
+        style={{ letterSpacing: "12px" }}
       >
-				氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
+        氧气含量: {smokeInfo?.O2_float || 0}%
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				一氧化氮排放浓度: 20mg/m³
+        氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				二氧化硫排放浓度: 20mg/m³
+        二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³
       </span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
-				二氧化氮排放浓度: 20mg/m³
+        颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³
       </span>
     </div>
   );

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

@@ -13,8 +13,8 @@
 
 .infoText {
 	text-align: center;
-	font-size: 24px;
+	font-size: 20px;
-	line-height: 2.2;
+	line-height: 2.5;
 	/* line-height: 20px; */
 	letter-spacing: 1px;
 	user-select: none;

src/utils/index.ts

@@ -70,8 +70,8 @@ new XClient(
 // 烟气处理相关数据
 new XClient(
   // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
-  // "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
+  "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
-  "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
+  // "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
   "SMOKE_DATA",
   smokeHandler
 );