From b57b65ffd47a96641cc65cc67eacedfe5a7d0f43 Mon Sep 17 00:00:00 2001 From: lb Date: Wed, 27 Dec 2023 16:44:24 +0800 Subject: [PATCH] update --- .../Common/Energy/EnergyCostChart/index.jsx | 253 ++++++++++-------- src/components/Common/Energy/index.jsx | 7 +- .../Common/TodayFaultTotal/index.jsx | 2 + .../components/GoodRateChart/index.jsx | 23 +- src/utils/index.ts | 4 +- 5 files changed, 154 insertions(+), 135 deletions(-) diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx index df5bfd7..7bc8ddd 100644 --- 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 ( -
-
-

能耗趋势图

- -
- 班次详情 -
    -
  • 总量
    • -
-
- - - 日 - - - 周 - - - 月 - - - 年 - - -
-
- -
-
- ); + return ( +
+
+

能耗趋势图

+
+ +
+ + + 氧气含量 + + + 二氧化硫 + + + 一氧化氮 + + + 二氧化氮 + + + + + + 日 + + + 周 + + + 月 + + + 年 + + +
+ +
+ +
+
+ ); }; export default EnergyCostChart; diff --git a/src/components/Common/Energy/index.jsx b/src/components/Common/Energy/index.jsx index adb2c11..c0e890a 100644 --- a/src/components/Common/Energy/index.jsx +++ b/src/components/Common/Energy/index.jsx @@ -9,12 +9,7 @@ function EnergyCost(props) { if (energyInfo) { } return ( - +
{ obj[item.name] = {}; @@ -72,6 +73,7 @@ function preHandleStatisticData(data, legend) { }); }); + console.log("obj", obj) const series = Array(legend.length) .fill(1) .map((_) => ({ diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx index 7344e06..1c3d6c4 100644 --- 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 (
@@ -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: '' diff --git a/src/utils/index.ts b/src/utils/index.ts index 3b70c2f..111ac2d 100644 --- 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) => {