update

src/components/Common/Energy/EnergyCostChart/index.jsx

@@ -1,59 +1,59 @@
-import cls from './index.module.css';
+import cls from "./index.module.css";
-import { randomInt } from '../../../../utils';
+import { randomInt } from "../../../../utils";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
-import { Switch, Radio } from 'antd';
+import { Switch, Radio } from "antd";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
 
 const EnergyCostChart = (props) => {
   const options = {
-		color: ['#FFD160', '#12FFF5', '#2760FF'],
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 32, right: 12, bottom: 56, left: 48 },
     xAxis: {
-			type: 'category',
+      type: "category",
       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,
+            dtimestamp
           ).getDate()}`;
         })
         .reverse(),
       axisLabel: {
-				color: '#fff',
+        color: "#fff",
         fontSize: 12,
       },
       axisTick: { show: false },
       axisLine: {
         lineStyle: {
           width: 1,
-					color: '#213259',
+          color: "#213259",
         },
       },
     },
     yAxis: {
-			name: '单位/m³',
+      name: "单位/m³",
       nameTextStyle: {
-				color: '#fff',
+        color: "#fff",
         fontSize: 10,
-				align: 'right',
+        align: "right",
       },
-			type: 'value',
+      type: "value",
       axisLabel: {
-				color: '#fff',
+        color: "#fff",
         fontSize: 12,
-				formatter: '{value} %',
+        formatter: "{value} %",
       },
       axisLine: {
         show: true,
         lineStyle: {
-					color: '#213259',
+          color: "#213259",
         },
       },
       splitLine: {
         lineStyle: {
-					color: '#213259a0',
+          color: "#213259a0",
         },
       },
       interval: 10,
@@ -67,36 +67,50 @@ const EnergyCostChart = (props) => {
           .map((_) => {
             return randomInt(60, 100);
           }),
-				type: 'line',
+        type: "line",
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#FFD16040' },
+            { offset: 0, color: "#FFD16040" },
-						{ offset: 0.5, color: '#FFD16020' },
+            { offset: 0.5, color: "#FFD16020" },
-						{ offset: 1, color: '#FFD16010' },
+            { offset: 1, color: "#FFD16010" },
           ]),
         },
         // smooth: true,
       },
     ],
     tooltip: {
-			trigger: 'axis',
+      trigger: "axis",
     },
   };
 
-	function handleSwitchChange(val) {
+  function handleSwitchChange(val) {}
-	}
 
   return (
     <div className={cls.energyCostChart}>
       <div className={cls.titleBar}>
         <h2>能耗趋势图</h2>
-				<Switch defaultChecked onChange={handleSwitchChange} />
-				<div className={cls.legend}>
-					<span className="legend__title">班次详情</span>
-					<ul className="legend__list">
-						<li>总量</li>
-					</ul>
       </div>
+
+      <div className={`${cls.choiceBar} flex items-center justify-between`}>
+        <Radio.Group
+          defaultValue="oxygen"
+          buttonStyle="solid"
+          className={`${cls.radioGroup} flex items-center justify-between`}
+        >
+          <Radio.Button value="oxygen" className="radio-group__item">
+            氧气含量
+          </Radio.Button>
+          <Radio.Button value="so2" className="radio-group__item">
+            二氧化硫
+          </Radio.Button>
+          <Radio.Button value="no" className="radio-group__item">
+            一氧化氮
+          </Radio.Button>
+          <Radio.Button value="no2" className="radio-group__item">
+            二氧化氮
+          </Radio.Button>
+        </Radio.Group>
+
         <Radio.Group
           defaultValue="week"
           buttonStyle="solid"
@@ -116,8 +130,9 @@ const EnergyCostChart = (props) => {
           </Radio.Button>
         </Radio.Group>
       </div>
-			<div className="flex-1">
+
-				<ReactECharts option={options} style={{ height: '180px' }} />
+      <div className="flex-1" style={{ marginTop: "8px" }}>
+        <ReactECharts option={options} style={{ height: "180px" }} />
       </div>
     </div>
   );

src/components/Common/Energy/index.jsx

@@ -9,12 +9,7 @@ function EnergyCost(props) {
   if (energyInfo) {
   }
   return (
-    <Container
+    <Container title="能耗" icon="battery" className={cls.energyCost}>
-      title="能耗"
-      icon="battery"
-      className={cls.energyCost}
-      pending={true}
-    >
       <div className={`flex flex-col`}>
         <div className={`${cls.cost__info} flex`}>
           <div

src/components/Common/TodayFaultTotal/index.jsx

@@ -64,6 +64,7 @@ function FaultTotal(props) {
 export default FaultTotal;
 
 function preHandleStatisticData(data, legend) {
+  console.table(data);
   const obj = {};
   data.forEach((item) => {
     obj[item.name] = {};
@@ -72,6 +73,7 @@ function preHandleStatisticData(data, legend) {
     });
   });
 
+  console.log("obj", obj)
   const series = Array(legend.length)
     .fill(1)
     .map((_) => ({

src/components/Common/TodayGood/components/GoodRateChart/index.jsx

@@ -3,7 +3,6 @@ import "./overwrite.css"; // 覆写 antd 默认样式，全局
 import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
 import { Switch, Radio } from "antd";
-import { randomInt } from "../../../../../utils";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
@@ -33,7 +32,7 @@ const GoodRateChart = (props) => {
   }
 
   // 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
-  const options = getOptions(cutting.chart[dateType], showMore);
+  const options = getOptions(cutting.chart[dateType], showMore, dateType);
 
   return (
     <div className={cls.GoodRateChart}>
@@ -80,7 +79,7 @@ const GoodRateChart = (props) => {
 
 export default GoodRateChart;
 
-function getOptions(dataList, showMore) {
+function getOptions(dataList, showMore, dateType) {
   console.log("showmore", showMore);
   const list = [...dataList].sort((a, b) => a.dataTime - b.dataTime);
   // data: Array(7)
@@ -97,11 +96,19 @@ function getOptions(dataList, showMore) {
   const grid = { top: 28, right: 12, bottom: 48, left: 48 };
   const xAxis = {
     type: "category",
-    data: list.map((item) => item.dataTime.split("T")[0]),
+    data: list.map((item) =>
+      dateType == "day"
+        ? item.dataTime.split("T")[1]
+        : item.dataTime.split("T")[0]
+    ),
+    // data: list.map((item) => {
+    //   console.log("datetime", item.dataTime);
+    //   return item.dataTime.split("T")[0];
+    // }),
     axisLabel: {
       color: "#fff",
-      fontSize: 12,
+      fontSize: 10,
-      rotate: 45,
+      rotate: 25,
       margin: 13,
     },
     axisTick: { show: false },
@@ -167,13 +174,13 @@ function getOptions(dataList, showMore) {
     yAxis,
     tooltip: {
       trigger: "axis",
-      color: '#fff',
+      color: "#fff",
       formatter: "{b} {c}%",
       axisPointer: {
         type: "shadow",
       },
       textStyle: {
-        color: '#fffc'
+        color: "#fffc",
       },
       className: "xc-chart-tooltip",
       // backgroundColor: ''

src/utils/index.ts

@@ -177,9 +177,9 @@ new XClient(
 );
 
 const newUser = uuidv4()
-console.log("websocket user:", newUser);
 new XClient(
-  "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
+  "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
+  // "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
   // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
   "MES_DATA",
   (msg) => {