update

2023-12-27 16:44:24 +08:00
parent b35cf01fc8
commit b57b65ffd4
5 changed files with 154 additions and 135 deletions
--- a/src/components/Common/Energy/EnergyCostChart/index.jsx
+++ b/src/components/Common/Energy/EnergyCostChart/index.jsx
@@ -1,126 +1,141 @@
-import cls from './index.module.css';
-import { randomInt } from '../../../../utils';
-import * as echarts from 'echarts';
-import { Switch, Radio } from 'antd';
-import ReactECharts from 'echarts-for-react';
+import cls from "./index.module.css";
+import { randomInt } from "../../../../utils";
+import * as echarts from "echarts";
+import { Switch, Radio } from "antd";
+import ReactECharts from "echarts-for-react";

 const EnergyCostChart = (props) => {
-	const options = {
-		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 32, right: 12, bottom: 56, left: 48 },
-		xAxis: {
-			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,
-					).getDate()}`;
-				})
-				.reverse(),
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-			},
-			axisTick: { show: false },
-			axisLine: {
-				lineStyle: {
-					width: 1,
-					color: '#213259',
-				},
-			},
-		},
-		yAxis: {
-			name: '单位/m³',
-			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',
-				},
-			},
-			interval: 10,
-			min: 0,
-			max: 100,
-		},
-		series: [
-			{
-				data: Array(7)
-					.fill(1)
-					.map((_) => {
-						return randomInt(60, 100);
-					}),
-				type: 'line',
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#FFD16040' },
-						{ offset: 0.5, color: '#FFD16020' },
-						{ offset: 1, color: '#FFD16010' },
-					]),
-				},
-				// smooth: true,
-			},
-		],
-		tooltip: {
-			trigger: 'axis',
-		},
-	};
+  const options = {
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
+    grid: { top: 32, right: 12, bottom: 56, left: 48 },
+    xAxis: {
+      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
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/m³",
+      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",
+        },
+      },
+      interval: 10,
+      min: 0,
+      max: 100,
+    },
+    series: [
+      {
+        data: Array(7)
+          .fill(1)
+          .map((_) => {
+            return randomInt(60, 100);
+          }),
+        type: "line",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFD16040" },
+            { offset: 0.5, color: "#FFD16020" },
+            { offset: 1, color: "#FFD16010" },
+          ]),
+        },
+        // smooth: true,
+      },
+    ],
+    tooltip: {
+      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>
-				<Radio.Group
-					defaultValue="week"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-				>
-					<Radio.Button value="day" className="radio-group__item">
-						日
-					</Radio.Button>
-					<Radio.Button value="week" className="radio-group__item">
-						周
-					</Radio.Button>
-					<Radio.Button value="month" className="radio-group__item">
-						月
-					</Radio.Button>
-					<Radio.Button value="year" className="radio-group__item">
-						年
-					</Radio.Button>
-				</Radio.Group>
-			</div>
-			<div className="flex-1">
-				<ReactECharts option={options} style={{ height: '180px' }} />
-			</div>
-		</div>
-	);
+  return (
+    <div className={cls.energyCostChart}>
+      <div className={cls.titleBar}>
+        <h2>能耗趋势图</h2>
+      </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"
+          className={cls.radioGroup}
+        >
+          <Radio.Button value="day" className="radio-group__item">
+            日
+          </Radio.Button>
+          <Radio.Button value="week" className="radio-group__item">
+            周
+          </Radio.Button>
+          <Radio.Button value="month" className="radio-group__item">
+            月
+          </Radio.Button>
+          <Radio.Button value="year" className="radio-group__item">
+            年
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div className="flex-1" style={{ marginTop: "8px" }}>
+        <ReactECharts option={options} style={{ height: "180px" }} />
+      </div>
+    </div>
+  );
 };

 export default EnergyCostChart;
--- a/src/components/Common/Energy/index.jsx
+++ b/src/components/Common/Energy/index.jsx
@@ -9,12 +9,7 @@ function EnergyCost(props) {
  if (energyInfo) {
  }
  return (
-    <Container
-      title="能耗"
-      icon="battery"
-      className={cls.energyCost}
-      pending={true}
-    >
+    <Container title="能耗" icon="battery" className={cls.energyCost}>
      <div className={`flex flex-col`}>
        <div className={`${cls.cost__info} flex`}>
          <div
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/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((_) => ({
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/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,
-      rotate: 45,
+      fontSize: 10,
+      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: ''
--- a/src/utils/index.ts
+++ b/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) => {