mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merge bugfix

Browse Source
This commit is contained in:
lb 2024-04-22 16:58:15 +08:00
parent 9894aeca50
commit 2996c061dc
26 changed files with 345 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

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

BIN
src/assets/Icon/dontknowwhatitis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/Icon/lightnen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
src/assets/Icon/oilstation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

1
src/components/Common/AnnealFanRunFrequence/index.jsx
View File

@ -109,6 +109,7 @@ function WindFrequence(props) {
},
};
} else {
console.log('runstate changeD!......')
dataList =
runState != null
? Object.keys(runState).map((fan) => ({

2
src/components/Common/CurrentTemp/index.jsx
View File

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

7
src/components/Common/GraphBase/index.jsx
View File

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

5
src/components/Common/GraphBase/index.module.css
View File

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

9
src/components/Common/GraphBase/selector.style.overwrite.css
View File

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

4
src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
View File

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

4
src/components/Common/TodayFaultTotal/index.jsx
View File

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

14
src/components/Common/TodayFaultType/index.jsx
View File

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

8
src/components/Common/TodayGood/components/GoodRateChart/index.jsx
View File

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

53
src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
View File

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

28
src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
View File

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

57
src/components/Modules/EnergyCostAnalysis/NO/index.jsx
View File

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

57
src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
View File

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

96
src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
View File

@ -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,

56
src/components/Modules/EnergyCostAnalysis/O/index.jsx
View File

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

57
src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
View File

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

12
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
View File

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

26
src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
View File

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

4
src/hooks/useSlider.js
View File

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

11
src/pages/EnergyCostAnalysis/index.jsx
View File

@ -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>

14
src/pages/EnergyCostAnalysis/index.module.css
View File

@ -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 {

2
src/utils/index.js
View File

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