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

done 能耗分析

Browse Source
This commit is contained in:
lb 2023-11-03 15:31:40 +08:00
parent 30a8a8e386
commit 21070337c5
14 changed files with 228 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/公共组件/GraphBase/index.module.css
View File

@ -73,7 +73,7 @@
.graphBaseContent {
height: 1px;
flex: 1;
background: #fff3;
/* background: #fff3; */
}
.graphBaseDesc {

14
src/components/模块组件/能耗分析/一氧化氮/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function NO(props) {
function handleSwitch(v) {
@ -22,6 +24,18 @@ function NO(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
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%' }}
/>
{/* real table data here */}
</GraphBase>
);

30
src/components/模块组件/能耗分析/二氧化氮 copy/index.jsx
View File

@ -1,30 +0,0 @@
import GraphBase from '../../../公共组件/GraphBase';
function NO2(props) {
function handleSwitch(v) {
console.log('switched ', v);
}
function handleDateChange(v) {
console.log('date ', v);
}
return (
<GraphBase
icon="battery"
title="二氧化氮"
desc="能耗趋势图"
switchOptions={true}
onSwitch={handleSwitch}
dateOptions={['日', '周', '月', '年']}
legend={['总量', '白班', '夜班']}
onDateChange={handleDateChange}
size={['long', 'middle']}
>
{/* real echarts here */}
{/* real table data here */}
</GraphBase>
);
}
export default NO2;

14
src/components/模块组件/能耗分析/二氧化氮/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function NO2(props) {
function handleSwitch(v) {
@ -22,6 +24,18 @@ function NO2(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
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%' }}
/>
{/* real table data here */}
</GraphBase>
);

14
src/components/模块组件/能耗分析/二氧化硫/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function SO2(props) {
function handleSwitch(v) {
@ -22,6 +24,18 @@ function SO2(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
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],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

14
src/components/模块组件/能耗分析/余热发电/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function RestHeat(props) {
function handleSwitch(v) {
@ -22,6 +24,18 @@ function RestHeat(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[138, 136, 29, 104, 101, 93, 128],
[69, 52, 18, 57, 22, 88, 46],
[69, 84, 11, 47, 79, 5, 82],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

7
src/components/模块组件/能耗分析/天然气/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function NatGas(props) {
function handleSwitch(v) {
@ -22,6 +24,11 @@ function NatGas(props) {
size={['long', 'short']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

35
src/components/模块组件/能耗分析/氧气含量/index.jsx
View File

@ -1,4 +1,27 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
// function rand(max) {
// return Math.ceil(Math.random() * max);
// }
// function getArr(len) {
// return Array(len).fill(1).map(() => rand(100))
// }
// function getArrs(len) {
// return Array(len).fill(1).map(() => getArr(7))
// }
// function fan4(...arrs) {
// const total = arrs[0].map((_, i) =>
// arrs.reduce((sum, arr) => sum + arr[i], 0),
// );
// arrs.unshift(total);
// return arrs;
// }
// function main() {
// // console.log(JSON.stringify(fan(getArrs(3))))
// console.log(fan(getArrs(3)))
// }
function Oxygen(props) {
function handleSwitch(v) {
@ -22,6 +45,18 @@ function Oxygen(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
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%' }}
/>
{/* real table data here */}
</GraphBase>
);

14
src/components/模块组件/能耗分析/水耗能/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function WaterCost(props) {
function handleSwitch(v) {
@ -22,6 +24,18 @@ function WaterCost(props) {
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[9, 119, 56, 80, 75, 145, 66],
[7, 100, 14, 54, 63, 62, 11],
[2, 19, 42, 26, 12, 83, 55],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

7
src/components/模块组件/能耗分析/焦炉煤气/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function Gas(props) {
function handleSwitch(v) {
@ -22,6 +24,11 @@ function Gas(props) {
size={['long', 'short']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

7
src/components/模块组件/能耗分析/电耗能/index.jsx
View File

@ -1,4 +1,6 @@
import GraphBase from '../../../公共组件/GraphBase';
import ReactECharts from 'echarts-for-react';
import getOptions from '../../../../hooks/getChartOption';
function ElecCost(props) {
function handleSwitch(v) {
@ -22,6 +24,11 @@ function ElecCost(props) {
size={['long', 'short']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);

97
src/hooks/getChartOption.js Normal file
View File

@ -0,0 +1,97 @@
import * as echarts from 'echarts';
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(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: 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',
},
};
}

3
src/hooks/useChart.js Normal file
View File

@ -0,0 +1,3 @@
function useChart(el, data) {
return <div>chart</div>;
}

2
src/pages/能耗分析/index.jsx
View File

@ -30,7 +30,7 @@ function EnergyAnalysis(props) {
</div>
</div>
<div className={'bgray ' + cls.line}></div>
<div className={' ' + cls.line}></div>
<div className={cls.vgrid + ' col-3'}>
<div style={{ gridRow: 2 }}>