update right table
This commit is contained in:
lb
parent
a73d61fad8
commit
0cd25a6972
@ -7,7 +7,7 @@ export default function CenterMenu({ active, onChangeActive }) {
|
|||||||
['窑炉内部', '/kilnInner'],
|
['窑炉内部', '/kilnInner'],
|
||||||
['退火监测', '/stopFire'],
|
['退火监测', '/stopFire'],
|
||||||
['质检统计', '/quailtyCheck'],
|
['质检统计', '/quailtyCheck'],
|
||||||
// ['能耗分析', '/energyCost'],
|
['能耗分析', '/energyCost'],
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div className={`${cls.centerMenu} flex`}>
|
<div className={`${cls.centerMenu} flex`}>
|
||||||
|
|||||||
@ -1,37 +1,160 @@
|
|||||||
import GraphBase from '../../../Common/GraphBase';
|
import GraphBase from "../../../Common/GraphBase";
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from "echarts-for-react";
|
||||||
import getOptions from '../../../../hooks/getChartOption';
|
// import getOptions from "../../../../hooks/getChartOption";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { useState } from "react";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
function Gas(props) {
|
function Gas(props) {
|
||||||
function handleSwitch(v) {
|
const elecTrend = useSelector((state) => state.energy.trend.natGas2);
|
||||||
// console.log('switched ', v);
|
const [period, setPeriod] = useState("周");
|
||||||
}
|
|
||||||
|
|
||||||
function handleDateChange(v) {
|
const options = getOptions(
|
||||||
// console.log('date ', v);
|
{ 周: "week", 月: "month", 年: "year" }[period],
|
||||||
}
|
elecTrend ?? { week: [], month: [], year: [] }
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
function handleSwitch(v) {
|
||||||
<GraphBase
|
// console.log('switched ', v);
|
||||||
icon="battery"
|
}
|
||||||
title="焦炉煤气"
|
|
||||||
desc="能耗趋势图"
|
function handleDateChange(v) {
|
||||||
switchOptions={true}
|
// console.log('date ', v);
|
||||||
onSwitch={handleSwitch}
|
setPeriod(v);
|
||||||
dateOptions={['日', '周', '月', '年']}
|
}
|
||||||
legend={['总量']}
|
|
||||||
onDateChange={handleDateChange}
|
return (
|
||||||
size={['long', 'short']}
|
<GraphBase
|
||||||
>
|
icon="battery"
|
||||||
{/* real echarts here */}
|
title="天然气II"
|
||||||
<ReactECharts
|
desc="能耗趋势图"
|
||||||
key={Math.random()}
|
switchOptions={false}
|
||||||
option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
|
onSwitch={handleSwitch}
|
||||||
style={{ height: '100%' }}
|
defaultSelect={period}
|
||||||
/>
|
dateOptions={["周", "月", "年"]}
|
||||||
{/* real table data here */}
|
// legend={["总量"]}
|
||||||
</GraphBase>
|
onDateChange={handleDateChange}
|
||||||
);
|
size={["long", "short"]}
|
||||||
|
>
|
||||||
|
{/* real echarts here */}
|
||||||
|
<ReactECharts
|
||||||
|
key={Math.random()}
|
||||||
|
option={options}
|
||||||
|
// option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
|
||||||
|
style={{ height: "100%" }}
|
||||||
|
/>
|
||||||
|
{/* real table data here */}
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Gas;
|
export default Gas;
|
||||||
|
|
||||||
|
function getOptions(period, trend) {
|
||||||
|
console.log("getOptions", period, trend);
|
||||||
|
// export default function getOptions(seriesData, name) {
|
||||||
|
const colors = [
|
||||||
|
"#FFD160",
|
||||||
|
"#12FFF5",
|
||||||
|
"#2760FF",
|
||||||
|
"#E80091",
|
||||||
|
"#8064ff",
|
||||||
|
"#ff8a3b",
|
||||||
|
"#8cd26d",
|
||||||
|
"#2aa1ff",
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
|
||||||
|
.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³/h",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
data: trend[period],
|
||||||
|
type: "line",
|
||||||
|
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: seriesData.map((arr, index) => ({
|
||||||
|
// name: index + 1 + '#' + name,
|
||||||
|
// data: arr,
|
||||||
|
// type: 'line',
|
||||||
|
// areaStyle: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// { offset: 0, color: colors[index] + '40' },
|
||||||
|
// { offset: 0.5, color: colors[index] + '20' },
|
||||||
|
// { offset: 1, color: colors[index] + '00' },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
// })),
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@ -1,37 +1,160 @@
|
|||||||
import GraphBase from '../../../Common/GraphBase';
|
import GraphBase from "../../../Common/GraphBase";
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from "echarts-for-react";
|
||||||
import getOptions from '../../../../hooks/getChartOption';
|
// import getOptions from "../../../../hooks/getChartOption";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { useState } from "react";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
function ElecCost(props) {
|
function ElecCost(props) {
|
||||||
function handleSwitch(v) {
|
const elecTrend = useSelector((state) => state.energy.trend.elec);
|
||||||
// console.log('switched ', v);
|
const [period, setPeriod] = useState("周");
|
||||||
}
|
|
||||||
|
|
||||||
function handleDateChange(v) {
|
const options = getOptions(
|
||||||
// console.log('date ', v);
|
{ 周: "week", 月: "month", 年: "year" }[period],
|
||||||
}
|
elecTrend ?? { week: [], month: [], year: [] }
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
function handleSwitch(v) {
|
||||||
<GraphBase
|
// console.log('switched ', v);
|
||||||
icon="battery"
|
}
|
||||||
title="电耗能"
|
|
||||||
desc="能耗趋势图"
|
function handleDateChange(v) {
|
||||||
switchOptions={true}
|
setPeriod(v);
|
||||||
onSwitch={handleSwitch}
|
}
|
||||||
dateOptions={['日', '周', '月', '年']}
|
|
||||||
legend={['总量']}
|
return (
|
||||||
onDateChange={handleDateChange}
|
<GraphBase
|
||||||
size={['long', 'short']}
|
icon="battery"
|
||||||
>
|
title="电耗能"
|
||||||
{/* real echarts here */}
|
desc="能耗趋势图"
|
||||||
<ReactECharts
|
switchOptions={false}
|
||||||
key={Math.random()}
|
onSwitch={handleSwitch}
|
||||||
option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
|
defaultSelect={period}
|
||||||
style={{ height: '100%' }}
|
dateOptions={["周", "月", "年"]}
|
||||||
/>
|
// legend={["总量"]}
|
||||||
{/* real table data here */}
|
onDateChange={handleDateChange}
|
||||||
</GraphBase>
|
size={["long", "short"]}
|
||||||
);
|
>
|
||||||
|
{/* real echarts here */}
|
||||||
|
<ReactECharts
|
||||||
|
key={Math.random()}
|
||||||
|
option={options}
|
||||||
|
// option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
|
||||||
|
style={{ height: "100%" }}
|
||||||
|
/>
|
||||||
|
{/* real table data here */}
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ElecCost;
|
export default ElecCost;
|
||||||
|
|
||||||
|
function getOptions(period, trend) {
|
||||||
|
console.log("getOptions", period, trend);
|
||||||
|
// export default function getOptions(seriesData, name) {
|
||||||
|
const colors = [
|
||||||
|
"#FFD160",
|
||||||
|
"#12FFF5",
|
||||||
|
"#2760FF",
|
||||||
|
"#E80091",
|
||||||
|
"#8064ff",
|
||||||
|
"#ff8a3b",
|
||||||
|
"#8cd26d",
|
||||||
|
"#2aa1ff",
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: trend[period].map((item) => item.time),
|
||||||
|
// 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³/h",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
data: trend[period].map((item) => item.qty),
|
||||||
|
type: "line",
|
||||||
|
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: seriesData.map((arr, index) => ({
|
||||||
|
// name: index + 1 + '#' + name,
|
||||||
|
// data: arr,
|
||||||
|
// type: 'line',
|
||||||
|
// areaStyle: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// { offset: 0, color: colors[index] + '40' },
|
||||||
|
// { offset: 0.5, color: colors[index] + '20' },
|
||||||
|
// { offset: 1, color: colors[index] + '00' },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
// })),
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@ -1,44 +1,48 @@
|
|||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import GradientText from '../../../Common/GradientText';
|
import GradientText from "../../../Common/GradientText";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
function Energy(props) {
|
function Energy(props) {
|
||||||
return (
|
const energyInfo = useSelector((state) => state.energy?.info);
|
||||||
<div className={' ' + cls.layout} style={{ color: '#fff' }}>
|
return (
|
||||||
<span
|
<div className={" " + cls.layout} style={{ color: "#fff" }}>
|
||||||
className={cls.shadowBorder}
|
<span
|
||||||
style={{
|
className={cls.shadowBorder}
|
||||||
gridRow: '1 / 3',
|
style={{
|
||||||
paddingTop: '38px',
|
gridRow: "1 / 3",
|
||||||
paddingLeft: '32px',
|
paddingTop: "38px",
|
||||||
userSelect: 'none',
|
paddingLeft: "32px",
|
||||||
}}
|
userSelect: "none",
|
||||||
>
|
}}
|
||||||
<GradientText text="能源" />
|
>
|
||||||
</span>
|
<GradientText text="能源" />
|
||||||
<span
|
</span>
|
||||||
className={cls.shadowBorder + ' ' + cls.infoText}
|
<span
|
||||||
style={{
|
className={cls.shadowBorder + " " + cls.infoText}
|
||||||
gridRow: '1 / 3',
|
style={{
|
||||||
}}
|
fontSize: "22px",
|
||||||
>
|
lineHeight: "2.5",
|
||||||
<span style={{ lineHeight: 2.5 }}>余热发电</span>
|
gridRow: "1 / 3",
|
||||||
<span style={{ lineHeight: 2.5 }}>992Kwh</span>
|
}}
|
||||||
</span>
|
>
|
||||||
|
<span style={{ lineHeight: 2.5 }}>余热发电</span>
|
||||||
|
<span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
水耗量: 32Km³
|
水耗量: {energyInfo?.waterQty || 0}Km³
|
||||||
</span>
|
</span>
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
天然气I: 92m³
|
天然气I: {energyInfo?.ngQty1 || 0}
|
||||||
</span>
|
</span>
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
电耗量: 92Km³
|
电耗量: {energyInfo?.elecQty2 || 0}kWh
|
||||||
</span>
|
</span>
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
天然气II: 92m³
|
天然气II: {energyInfo?.ngQty2 || 0}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Energy;
|
export default Energy;
|
||||||
|
|||||||
@ -13,8 +13,8 @@
|
|||||||
|
|
||||||
.infoText {
|
.infoText {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
line-height: 2.2;
|
line-height: 2.5;
|
||||||
/* line-height: 20px; */
|
/* line-height: 20px; */
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -1,37 +1,160 @@
|
|||||||
import GraphBase from '../../../Common/GraphBase';
|
import GraphBase from "../../../Common/GraphBase";
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from "echarts-for-react";
|
||||||
import getOptions from '../../../../hooks/getChartOption';
|
// import getOptions from "../../../../hooks/getChartOption";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { useState } from "react";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
function NatGas(props) {
|
function NatGas(props) {
|
||||||
function handleSwitch(v) {
|
const elecTrend = useSelector((state) => state.energy.trend.natGas1);
|
||||||
// console.log('switched ', v);
|
const [period, setPeriod] = useState("周");
|
||||||
}
|
|
||||||
|
|
||||||
function handleDateChange(v) {
|
const options = getOptions(
|
||||||
// console.log('date ', v);
|
{ 周: "week", 月: "month", 年: "year" }[period],
|
||||||
}
|
elecTrend ?? { week: [], month: [], year: [] }
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
function handleSwitch(v) {
|
||||||
<GraphBase
|
// console.log('switched ', v);
|
||||||
icon="battery"
|
}
|
||||||
title="天然气"
|
|
||||||
desc="能耗趋势图"
|
function handleDateChange(v) {
|
||||||
switchOptions={true}
|
setPeriod(v);
|
||||||
onSwitch={handleSwitch}
|
// console.log('date ', v);
|
||||||
dateOptions={['日', '周', '月', '年']}
|
}
|
||||||
legend={['总量']}
|
|
||||||
onDateChange={handleDateChange}
|
return (
|
||||||
size={['long', 'short']}
|
<GraphBase
|
||||||
>
|
icon="battery"
|
||||||
{/* real echarts here */}
|
title="天然气I"
|
||||||
<ReactECharts
|
desc="能耗趋势图"
|
||||||
key={Math.random()}
|
switchOptions={false}
|
||||||
option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
|
onSwitch={handleSwitch}
|
||||||
style={{ height: '100%' }}
|
defaultSelect={period}
|
||||||
/>
|
dateOptions={["周", "月", "年"]}
|
||||||
{/* real table data here */}
|
// legend={["总量"]}
|
||||||
</GraphBase>
|
onDateChange={handleDateChange}
|
||||||
);
|
size={["long", "short"]}
|
||||||
|
>
|
||||||
|
{/* real echarts here */}
|
||||||
|
<ReactECharts
|
||||||
|
key={Math.random()}
|
||||||
|
option={options}
|
||||||
|
// option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
|
||||||
|
style={{ height: "100%" }}
|
||||||
|
/>
|
||||||
|
{/* real table data here */}
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NatGas;
|
export default NatGas;
|
||||||
|
|
||||||
|
function getOptions(period, trend) {
|
||||||
|
console.log("getOptions", period, trend);
|
||||||
|
// export default function getOptions(seriesData, name) {
|
||||||
|
const colors = [
|
||||||
|
"#FFD160",
|
||||||
|
"#12FFF5",
|
||||||
|
"#2760FF",
|
||||||
|
"#E80091",
|
||||||
|
"#8064ff",
|
||||||
|
"#ff8a3b",
|
||||||
|
"#8cd26d",
|
||||||
|
"#2aa1ff",
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
|
||||||
|
.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³/h",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
data: trend[period],
|
||||||
|
type: "line",
|
||||||
|
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: seriesData.map((arr, index) => ({
|
||||||
|
// name: index + 1 + '#' + name,
|
||||||
|
// data: arr,
|
||||||
|
// type: 'line',
|
||||||
|
// areaStyle: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// { offset: 0, color: colors[index] + '40' },
|
||||||
|
// { offset: 0.5, color: colors[index] + '20' },
|
||||||
|
// { offset: 1, color: colors[index] + '00' },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
// })),
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@ -1,37 +1,39 @@
|
|||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import GradientText from '../../../Common/GradientText';
|
import GradientText from "../../../Common/GradientText";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
function SmokeHandle(props) {
|
function SmokeHandle(props) {
|
||||||
return (
|
const smokeInfo = useSelector((state) => state.smoke?.info);
|
||||||
<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
|
return (
|
||||||
<span
|
<div className={" " + cls.smoke} style={{ color: "#fff" }}>
|
||||||
className={cls.shadowBorder}
|
<span
|
||||||
style={{
|
className={cls.shadowBorder}
|
||||||
gridRow: '1 / 3',
|
style={{
|
||||||
paddingTop: '38px',
|
gridRow: "1 / 3",
|
||||||
paddingLeft: '32px',
|
paddingTop: "38px",
|
||||||
userSelect: 'none',
|
paddingLeft: "32px",
|
||||||
}}
|
userSelect: "none",
|
||||||
>
|
}}
|
||||||
<GradientText text="烟气处理" />
|
>
|
||||||
</span>
|
<GradientText text="烟气处理" />
|
||||||
<span
|
</span>
|
||||||
className={cls.shadowBorder + ' ' + cls.infoText}
|
<span
|
||||||
style={{ letterSpacing: '12px' }}
|
className={cls.shadowBorder + " " + cls.infoText}
|
||||||
>
|
style={{ letterSpacing: "12px" }}
|
||||||
氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
|
>
|
||||||
</span>
|
氧气含量: {smokeInfo?.O2_float || 0}%
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
</span>
|
||||||
一氧化氮排放浓度: 20mg/m³
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
</span>
|
氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
</span>
|
||||||
二氧化硫排放浓度: 20mg/m³
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
</span>
|
二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³
|
||||||
<span className={cls.shadowBorder + ' ' + cls.infoText}>
|
</span>
|
||||||
二氧化氮排放浓度: 20mg/m³
|
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||||
</span>
|
颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³
|
||||||
</div>
|
</span>
|
||||||
);
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SmokeHandle;
|
export default SmokeHandle;
|
||||||
|
|||||||
@ -13,8 +13,8 @@
|
|||||||
|
|
||||||
.infoText {
|
.infoText {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
line-height: 2.2;
|
line-height: 2.5;
|
||||||
/* line-height: 20px; */
|
/* line-height: 20px; */
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -63,15 +63,15 @@ new XClient(
|
|||||||
new XClient(
|
new XClient(
|
||||||
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
|
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
|
||||||
"ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
|
"ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
|
||||||
"CUTTING_DATA",
|
"CUTTING_DATA",
|
||||||
cuttingHandler
|
cuttingHandler
|
||||||
);
|
);
|
||||||
|
|
||||||
// 烟气处理相关数据
|
// 烟气处理相关数据
|
||||||
new XClient(
|
new XClient(
|
||||||
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
|
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
|
||||||
// "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
|
"ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
|
||||||
"ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
|
// "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
|
||||||
"SMOKE_DATA",
|
"SMOKE_DATA",
|
||||||
smokeHandler
|
smokeHandler
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user