Merge branch 'bugfix#4.4'

This commit is contained in:
lb 2024-04-15 13:51:16 +08:00
commit 19ea3287ae
9 changed files with 12 additions and 306 deletions

View File

@ -2,14 +2,10 @@
import useIcon from "../../../hooks/useIcon"; import useIcon from "../../../hooks/useIcon";
import cls from "./index.module.css"; import cls from "./index.module.css";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { Switch, Select, Radio } from "antd"; import { Switch, Select } from "antd";
import "./selector.style.overwrite.css"; import "./selector.style.overwrite.css";
// import { Switch, Select, Space } from 'antd';
import triangle from "../../../assets/Icon/triangle.svg"; import triangle from "../../../assets/Icon/triangle.svg";
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
function choseBg(size) { function choseBg(size) {
const [width, height] = size; const [width, height] = size;
return width === "long" && height === "middle" return width === "long" && height === "middle"
@ -53,7 +49,6 @@ function GraphBase(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
let dto = null; let dto = null;
let timerangeHint = null;
const switchStyle = {}; const switchStyle = {};
if (props.switchPosition) { if (props.switchPosition) {
@ -65,7 +60,6 @@ function GraphBase(props) {
} }
if (dateOptions) { if (dateOptions) {
console.log("dateoptions ", title, dateOptions);
dto = ( dto = (
<Select <Select
defaultValue={defaultSelect || dateOptions[0]} defaultValue={defaultSelect || dateOptions[0]}
@ -89,9 +83,6 @@ function GraphBase(props) {
onChange={(value, option) => onDateChange(value)} onChange={(value, option) => onDateChange(value)}
/> />
); );
// <Radio.Button value={item} key={item} className="radio-group__item">
// {item}
// </Radio.Button>
} }
function handleSwitchChange(v) { function handleSwitchChange(v) {
@ -137,19 +128,7 @@ function GraphBase(props) {
))} ))}
</div> </div>
)} )}
{ {dateOptions && dto}
dateOptions && dto
// (
// <Radio.Group
// value={defaultSelect || dateOptions[0]}
// buttonStyle="solid"
// className={cls.graphBaseDate + " " + cls.radioGroup}
// onChange={({ target }) => onDateChange(target.value)}
// >
// {dto}
// </Radio.Group>
// )
}
{props.children} {props.children}
</div> </div>
</div> </div>

View File

@ -76,7 +76,7 @@ const SmokeTrendChart = (props) => {
); );
} }
function handleSourceChange(value) { function handleSourceChange(value) {
setPeriod( setSource(
{ {
氧气: "O2_float", 氧气: "O2_float",
氮氧化物: "NOX_float", 氮氧化物: "NOX_float",

View File

@ -8,7 +8,7 @@ import * as echarts from "echarts";
function FaultType(props) { function FaultType(props) {
const [init, setInit] = useState(true); const [init, setInit] = useState(true);
const [currentLine, setCurrentLine] = useState(""); const [currentLine, setCurrentLine] = useState("Y61");
const isra = useSelector((state) => state.isra); const isra = useSelector((state) => state.isra);
const currentStatistic = isra.dayStatistic || []; const currentStatistic = isra.dayStatistic || [];
const currentLineStatistic = const currentLineStatistic =

View File

@ -86,9 +86,7 @@ function ElecCost(props) {
export default ElecCost; export default ElecCost;
function getOptions(period, trend) { function getOptions(period, trend) {
console.log("getOptions", period, trend);
if (trend[period].length === 0) return null; if (trend[period].length === 0) return null;
// export default function getOptions(seriesData, name) {
const colors = [ const colors = [
"#FFD160", "#FFD160",
"#12FFF5", "#12FFF5",

View File

@ -29,20 +29,10 @@ function NO(props) {
const options = getOptions("NOX_float", period, currentTrend); const options = getOptions("NOX_float", period, currentTrend);
function handleSwitch(v) { function handleSwitch(v) {}
// console.log('switched ', v);
}
function handleDateChange(value) { function handleDateChange(value) {
setPeriod( setPeriod(value);
{
: "day",
: "week",
: "month",
: "year",
}[value]
);
setTimestr( setTimestr(
{ {
: :
@ -76,23 +66,13 @@ function NO(props) {
defaultSelect={period} defaultSelect={period}
onSwitch={handleSwitch} onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]} dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "middle"]} size={["long", "middle"]}
> >
{/* real echarts here */}
{options && ( {options && (
<ReactECharts <ReactECharts
key={Math.random()} key={Math.random()}
option={options} option={options}
// option={getOptions(
// [
// [148, 110, 140, 122, 84, 153, 89],
// [88, 79, 75, 73, 33, 54, 31],
// [60, 31, 65, 49, 51, 99, 58],
// ],
// ""
// )}
style={{ height: "100%" }} style={{ height: "100%" }}
/> />
)} )}
@ -109,7 +89,6 @@ function NO(props) {
暂无数据 暂无数据
</p> </p>
)} )}
{/* real table data here */}
</GraphBase> </GraphBase>
); );
} }
@ -127,16 +106,6 @@ function getOptions(source, period, trend) {
grid: { top: 40, right: 12, bottom: 20, left: 64 }, grid: { top: 40, right: 12, bottom: 20, left: 64 },
xAxis: { 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
// ).getDate()}`;
// })
// .reverse(),
data: trend[source].map((item) => item.time), data: trend[source].map((item) => item.time),
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
@ -174,9 +143,6 @@ function getOptions(source, period, trend) {
color: "#213259a0", color: "#213259a0",
}, },
}, },
// interval: 10,
// min: 0,
// max: 100,
}, },
series: [ series: [
{ {
@ -193,40 +159,7 @@ function getOptions(source, period, trend) {
{ offset: 1, color: "#FFD16010" }, { offset: 1, color: "#FFD16010" },
]), ]),
}, },
// smooth: true,
}, },
// {
// 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: "#12FFF540" },
// { offset: 0.5, color: "#12FFF520" },
// { offset: 1, color: "#12FFF510" },
// ]),
// },
// // smooth: true,
// },
// {
// 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: "#2760FF40" },
// { offset: 0.5, color: "#2760FF20" },
// { offset: 1, color: "#2760FF10" },
// ]),
// },
// // smooth: true,
// },
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -234,7 +167,6 @@ function getOptions(source, period, trend) {
type: "shadow", type: "shadow",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

View File

@ -28,20 +28,10 @@ function Dust(props) {
const options = getOptions("dust_float", period, currentTrend); const options = getOptions("dust_float", period, currentTrend);
function handleSwitch(v) { function handleSwitch(v) {}
// console.log('switched ', v);
}
function handleDateChange(value) { function handleDateChange(value) {
setPeriod( setPeriod(value);
{
: "day",
: "week",
: "month",
: "year",
}[value]
);
setTimestr( setTimestr(
{ {
: :
@ -67,7 +57,6 @@ function Dust(props) {
); );
} }
return ( return (
<GraphBase <GraphBase
icon="smoke" icon="smoke"
@ -77,23 +66,13 @@ function Dust(props) {
defaultSelect={period} defaultSelect={period}
onSwitch={handleSwitch} onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]} dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "middle"]} size={["long", "middle"]}
> >
{/* real echarts here */}
{options && ( {options && (
<ReactECharts <ReactECharts
key={Math.random()} key={Math.random()}
option={options} option={options}
// option={getOptions(
// [
// [91, 164, 88, 120, 167, 158, 43],
// [30, 75, 52, 43, 73, 66, 36],
// [61, 89, 36, 77, 94, 92, 7],
// ],
// ""
// )}
style={{ height: "100%" }} style={{ height: "100%" }}
/> />
)} )}
@ -110,7 +89,6 @@ function Dust(props) {
暂无数据 暂无数据
</p> </p>
)} )}
{/* real table data here */}
</GraphBase> </GraphBase>
); );
} }
@ -128,16 +106,6 @@ function getOptions(source, period, trend) {
grid: { top: 40, right: 12, bottom: 20, left: 64 }, grid: { top: 40, right: 12, bottom: 20, left: 64 },
xAxis: { 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
// ).getDate()}`;
// })
// .reverse(),
data: trend[source].map((item) => item.time), data: trend[source].map((item) => item.time),
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
@ -175,13 +143,9 @@ function getOptions(source, period, trend) {
color: "#213259a0", color: "#213259a0",
}, },
}, },
// interval: 10,
// min: 0,
// max: 100,
}, },
series: [ series: [
{ {
// (isNaN((+"f")) ? 0 : (+"f")).toFixed(2)
data: trend[source].map((item) => data: trend[source].map((item) =>
!(item.value == null || isNaN(+item.value)) !(item.value == null || isNaN(+item.value))
? (+item.value).toFixed(2) ? (+item.value).toFixed(2)
@ -197,40 +161,7 @@ function getOptions(source, period, trend) {
{ offset: 1, color: "#FFD16010" }, { offset: 1, color: "#FFD16010" },
]), ]),
}, },
// smooth: true,
}, },
// {
// 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: "#12FFF540" },
// { offset: 0.5, color: "#12FFF520" },
// { offset: 1, color: "#12FFF510" },
// ]),
// },
// // smooth: true,
// },
// {
// 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: "#2760FF40" },
// { offset: 0.5, color: "#2760FF20" },
// { offset: 1, color: "#2760FF10" },
// ]),
// },
// // smooth: true,
// },
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -238,7 +169,6 @@ function getOptions(source, period, trend) {
type: "shadow", type: "shadow",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

View File

@ -29,19 +29,10 @@ function Oxygen(props) {
const options = getOptions("O2_float", period, currentTrend); const options = getOptions("O2_float", period, currentTrend);
function handleSwitch(v) { function handleSwitch(v) {}
// console.log('switched ', v);
}
function handleDateChange(value) { function handleDateChange(value) {
setPeriod( setPeriod(value);
{
: "day",
: "week",
: "month",
: "year",
}[value]
);
setTimestr( setTimestr(
{ {
: :
@ -75,23 +66,13 @@ function Oxygen(props) {
defaultSelect={period} defaultSelect={period}
onSwitch={handleSwitch} onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]} dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "middle"]} size={["long", "middle"]}
> >
{/* real echarts here */}
{options && ( {options && (
<ReactECharts <ReactECharts
key={Math.random()} key={Math.random()}
option={options} option={options}
// option={getOptions(
// [
// [172, 165, 135, 35, 101, 53, 68], //
// [87, 68, 81, 33, 35, 44, 38], //
// [85, 97, 54, 2, 66, 9, 30], //
// ],
// ""
// )}
style={{ height: "100%" }} style={{ height: "100%" }}
/> />
)} )}
@ -108,7 +89,6 @@ function Oxygen(props) {
暂无数据 暂无数据
</p> </p>
)} )}
{/* real table data here */}
</GraphBase> </GraphBase>
); );
} }
@ -175,9 +155,6 @@ function getOptions(source, period, trend) {
color: "#213259a0", color: "#213259a0",
}, },
}, },
// interval: 10,
// min: 0,
// max: 100,
}, },
series: [ series: [
{ {
@ -196,40 +173,7 @@ function getOptions(source, period, trend) {
{ offset: 1, color: "#FFD16010" }, { offset: 1, color: "#FFD16010" },
]), ]),
}, },
// smooth: true,
}, },
// {
// 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: "#12FFF540" },
// { offset: 0.5, color: "#12FFF520" },
// { offset: 1, color: "#12FFF510" },
// ]),
// },
// // smooth: true,
// },
// {
// 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: "#2760FF40" },
// { offset: 0.5, color: "#2760FF20" },
// { offset: 1, color: "#2760FF10" },
// ]),
// },
// // smooth: true,
// },
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -237,7 +181,6 @@ function getOptions(source, period, trend) {
type: "shadow", type: "shadow",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

View File

@ -28,19 +28,10 @@ function SO2(props) {
); );
const options = getOptions("SO2_float", period, currentTrend); const options = getOptions("SO2_float", period, currentTrend);
function handleSwitch(v) { function handleSwitch(v) {}
// console.log('switched ', v);
}
function handleDateChange(value) { function handleDateChange(value) {
setPeriod( setPeriod(value);
{
: "day",
: "week",
: "month",
: "year",
}[value]
);
setTimestr( setTimestr(
{ {
: :
@ -75,22 +66,12 @@ function SO2(props) {
defaultSelect={period} defaultSelect={period}
onSwitch={handleSwitch} onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]} dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange} onDateChange={handleDateChange}
size={["long", "middle"]} size={["long", "middle"]}
> >
{/* real echarts here */}
{options && ( {options && (
<ReactECharts <ReactECharts
key={Math.random()} key={Math.random()}
// option={getOptions(
// [
// [132, 155, 140, 83, 180, 67, 136],
// [83, 58, 60, 22, 80, 64, 43],
// [49, 97, 80, 61, 100, 3, 93],
// ],
// '',
// )}
option={options} option={options}
style={{ height: "100%" }} style={{ height: "100%" }}
/> />
@ -108,7 +89,6 @@ function SO2(props) {
暂无数据 暂无数据
</p> </p>
)} )}
{/* real table data here */}
</GraphBase> </GraphBase>
); );
} }
@ -126,16 +106,6 @@ function getOptions(source, period, trend) {
grid: { top: 40, right: 12, bottom: 20, left: 64 }, grid: { top: 40, right: 12, bottom: 20, left: 64 },
xAxis: { 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
// ).getDate()}`;
// })
// .reverse(),
data: trend[source].map((item) => item.time), data: trend[source].map((item) => item.time),
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
@ -173,9 +143,6 @@ function getOptions(source, period, trend) {
color: "#213259a0", color: "#213259a0",
}, },
}, },
// interval: 10,
// min: 0,
// max: 100,
}, },
series: [ series: [
{ {
@ -194,40 +161,7 @@ function getOptions(source, period, trend) {
{ offset: 1, color: "#FFD16010" }, { offset: 1, color: "#FFD16010" },
]), ]),
}, },
// smooth: true,
}, },
// {
// 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: "#12FFF540" },
// { offset: 0.5, color: "#12FFF520" },
// { offset: 1, color: "#12FFF510" },
// ]),
// },
// // smooth: true,
// },
// {
// 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: "#2760FF40" },
// { offset: 0.5, color: "#2760FF20" },
// { offset: 1, color: "#2760FF10" },
// ]),
// },
// // smooth: true,
// },
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -235,7 +169,6 @@ function getOptions(source, period, trend) {
type: "shadow", type: "shadow",
}, },
className: "xc-chart-tooltip", className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

View File

@ -15,7 +15,6 @@ function EnergyAnalysis(props) {
return ( return (
<div className={cls.grid}> <div className={cls.grid}>
<div className={cls.vgrid + " col-1"}> <div className={cls.vgrid + " col-1"}>
{/* <SmokeHandle /> */}
<div style={{ gridRow: "1 / 3" }}> <div style={{ gridRow: "1 / 3" }}>
<Oxygen /> <Oxygen />
</div> </div>
@ -33,32 +32,24 @@ function EnergyAnalysis(props) {
</div> </div>
</div> </div>
{/* <div className={" " + cls.line}></div> */}
<div className={cls.vgrid + " col-3"}> <div className={cls.vgrid + " col-3"}>
<div style={{ gridRow: 2 }}> <div style={{ gridRow: 2 }}>
{/* <RestHeat /> */}
<NatGas /> <NatGas />
</div> </div>
<div style={{ gridRow: 3 }}> <div style={{ gridRow: 3 }}>
{/* <WaterCost /> */}
<Gas /> <Gas />
</div> </div>
</div> </div>
<div className={cls.vvgrid + " col-4"}> <div className={cls.vvgrid + " col-4"}>
{/* <div className="bgray energy"></div> */}
{/* <Energy /> */}
<div className=" electronic"> <div className=" electronic">
<Energy /> <Energy />
</div> </div>
<div className=" gas"> <div className=" gas">
{/* <NatGas /> */}
<SmokeHandle /> <SmokeHandle />
</div> </div>
<div style={{ height: "100%" }}> <div style={{ height: "100%" }}>
<ElecCost /> <ElecCost />
{/* <Gas /> */}
</div> </div>
</div> </div>
</div> </div>