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

1

Browse Source
This commit is contained in:
lb 2024-01-25 10:31:51 +08:00
parent b27a20f3cf
commit 2fb3d05f8c
13 changed files with 288 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,6 +171,7 @@ function WindFrequence(props) {
switchPosition={[null, 200]} // [top, left]
onSwitch={handleSwitchChange}
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
selectWidth={70}
defaultSelect={currLine}
onDateChange={handleLineChange}
>

12
src/components/Common/Arrow/index.jsx Normal file
View File

@ -0,0 +1,12 @@
import cls from './index.module.css';
const Arrow = ({direction, disabled, onClick}) => {
return (
<div className={cls["arrow"]}>
<div className={cls['arrow-top']}></div>
<div className={cls["arrow-bottom"]}></div>
</div>
)
}
export default Arrow;

25
src/components/Common/Arrow/index.module.css Normal file
View File

@ -0,0 +1,25 @@
.arrow {
width: 16px;
height: 48px;
background: #ccc;
position: relative;
}
.arrow-top {
background: #00f3ed;
width: 8px;
height: 24px;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
}
.arrow-bottom {
background: #00f3ed;
width: 8px;
height: 24px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 12px;
}

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

@ -64,6 +64,7 @@ function WindFrequence(props) {
icon="temp"
title="当前温度"
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
selectWidth={70}
defaultSelect={dataSource}
onDateChange={handleSourceChange}
size={["middle", "long"]}

4
src/components/Common/NatGasFlow/index.module.css
View File

@ -24,9 +24,9 @@
.headWidget {
position: absolute;
top: 22px;
right: 24px;
left: 178px;
height: 32px;
width: 400px;
width: calc(100% - 200px);
/* background: #12fff5; */
display: flex;
align-items: center;

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

@ -172,7 +172,7 @@ function getOptions(dataList, showMore, dateType) {
if (list.length === 0 || list.filter((item) => item.sum).length == 0)
return null;
const color = ["#FFD160", "#12FFF5", "#2760FF"];
const grid = { top: 28, right: 12, bottom: 48, left: 48 };
const grid = { top: 28, right: 12, bottom: showMore ? 72 : 64, left: 48 };
const xAxis = {
type: "category",
data: list.map((item) =>

34
src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
View File

@ -5,11 +5,16 @@ import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import { lunarYear } from "../../../../utils/energeChartOption";
import dayjs from "dayjs";
function Gas(props) {
const elecTrend = useSelector((state) => state.energy.trend.natGas2);
const [period, setPeriod] = useState("周");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
const options = getOptions(
{ 周: "week", 月: "month", 年: "year" }[period],
elecTrend ?? { week: [], month: [], year: [] }
@ -19,16 +24,33 @@ function Gas(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
// console.log('date ', v);
setPeriod(v);
}
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
年:
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]
);
}
return (
<GraphBase
icon="battery"
title="天然气II"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
onSwitch={handleSwitch}
defaultSelect={period}

32
src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
View File

@ -4,11 +4,16 @@ import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function ElecCost(props) {
const elecTrend = useSelector((state) => state.energy.trend.elec);
const [period, setPeriod] = useState("周");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
const options = getOptions(
{ 周: "week", 月: "month", 年: "year" }[period],
elecTrend ?? { week: [], month: [], year: [] }
@ -18,15 +23,32 @@ function ElecCost(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
年:
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]
);
}
return (
<GraphBase
icon="battery"
title="电耗能"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
onSwitch={handleSwitch}
defaultSelect={period}

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

@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function NO(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -11,6 +12,11 @@ function NO(props) {
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")
);
const currentTrend =
period === "日"
@ -27,16 +33,45 @@ function NO(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
}
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[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]
);
}
return (
<GraphBase
icon="smoke"
title="氮氧化物"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

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

@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function Dust(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -11,7 +12,11 @@ function Dust(props) {
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")
);
const currentTrend =
period === "日"
? dayTrend
@ -27,16 +32,47 @@ function Dust(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[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]
);
}
return (
<GraphBase
icon="smoke"
title="颗粒物"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

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

@ -5,10 +5,16 @@ import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import { lunarYear } from "../../../../utils/energeChartOption";
import dayjs from "dayjs";
function NatGas(props) {
const elecTrend = useSelector((state) => state.energy.trend.natGas1);
const [period, setPeriod] = useState("周");
const [timestr, setTimestr] = useState(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
const options = getOptions(
{ 周: "week", 月: "month", 年: "year" }[period],
@ -19,16 +25,33 @@ function NatGas(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
function handleDateChange(value) {
setPeriod(value);
setTimestr(
{
年:
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]
);
}
return (
<GraphBase
icon="battery"
title="天然气I"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
onSwitch={handleSwitch}
defaultSelect={period}
@ -114,7 +137,7 @@ function getOptions(period, trend) {
.fill(1)
.map((_, index) => {
if (period == "week") {
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
@ -163,7 +186,9 @@ function getOptions(period, trend) {
},
},
series: {
data: trend[period].map(item => item != null ? (+item).toFixed(2) : null),
data: trend[period].map((item) =>
item != null ? (+item).toFixed(2) : null
),
type: "line",
symbol: "circle",
symbolSize: 6,

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

@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function Oxygen(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -11,6 +12,11 @@ function Oxygen(props) {
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")
);
const currentTrend =
period === "日"
@ -27,16 +33,44 @@ function Oxygen(props) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[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]
);
}
return (
<GraphBase
icon="smoke"
title="氧气含量"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}

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

@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";
function SO2(props) {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -20,22 +21,56 @@ 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")
);
const options = getOptions("SO2_float", period, currentTrend);
function handleSwitch(v) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[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]
);
}
return (
<GraphBase
icon="smoke"
title="二氧化硫"
desc="能耗趋势图"
desc={`能耗趋势图 ${timestr}`}
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}