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

update

Browse Source
This commit is contained in:
lb 2023-11-03 13:46:54 +08:00
parent 32edb46215
commit 30a8a8e386
16 changed files with 309 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/模块组件/能耗分析/GraphBase/index.jsx → src/components/公共组件/GraphBase/index.jsx
View File

@ -1,5 +1,5 @@
// TODO: 通用组件 - 按钮 菜单控制层
import useIcon from '../../../../hooks/useIcon';
import useIcon from '../../../hooks/useIcon';
import cls from './index.module.css';
import { useMemo, useState } from 'react';
import { Switch, Radio } from 'antd';

10
src/components/模块组件/能耗分析/GraphBase/index.module.css → src/components/公共组件/GraphBase/index.module.css
View File

@ -5,31 +5,31 @@
} */
.long-middle {
background: url('../../../../assets/long-middle.png') no-repeat;
background: url('../../../assets/long-middle.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.long-short {
background: url('../../../../assets/long-short.png') no-repeat;
background: url('../../../assets/long-short.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-long {
background: url('../../../../assets/middle-middle.png') no-repeat;
background: url('../../../assets/middle-middle.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-middle {
background: url('../../../../assets/middle-middle-2.png') no-repeat;
background: url('../../../assets/middle-middle-2.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-short {
background: url('../../../../assets/middle-short.png') no-repeat;
background: url('../../../assets/middle-short.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}

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

@ -1,4 +1,4 @@
import GraphBase from '../GraphBase';
import GraphBase from '../../../公共组件/GraphBase';
function NO(props) {
function handleSwitch(v) {

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

@ -0,0 +1,30 @@
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;

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

@ -0,0 +1,30 @@
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;

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function SO2(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 SO2;

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function RestHeat(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 RestHeat;

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function NatGas(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', 'short']}
>
{/* real echarts here */}
{/* real table data here */}
</GraphBase>
);
}
export default NatGas;

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function Oxygen(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 Oxygen;

0
src/components/模块组件/能耗分析/氧气含量/index.module.css Normal file
View File

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function WaterCost(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 WaterCost;

2
src/components/模块组件/能耗分析/烟气处理/index.jsx
View File

@ -3,7 +3,7 @@ import GradientText from '../../../公共组件/GradientText';
function SmokeHandle(props) {
return (
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
<span
className={cls.shadowBorder}
style={{

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function Gas(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', 'short']}
>
{/* real echarts here */}
{/* real table data here */}
</GraphBase>
);
}
export default Gas;

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

@ -0,0 +1,30 @@
import GraphBase from '../../../公共组件/GraphBase';
function ElecCost(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', 'short']}
>
{/* real echarts here */}
{/* real table data here */}
</GraphBase>
);
}
export default ElecCost;

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

@ -3,7 +3,7 @@ import GradientText from '../../../公共组件/GradientText';
function Energy(props) {
return (
<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
<div className={' ' + cls.layout} style={{ color: '#fff' }}>
<span
className={cls.shadowBorder}
style={{

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

@ -2,6 +2,14 @@ import cls from './index.module.css';
import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
import Energy from '../../components/模块组件/能耗分析/能源';
import NO from '../../components/模块组件/能耗分析/一氧化氮';
import NO2 from '../../components/模块组件/能耗分析/二氧化氮';
import SO2 from '../../components/模块组件/能耗分析/二氧化硫';
import Oxygen from '../../components/模块组件/能耗分析/氧气含量';
import NatGas from '../../components/模块组件/能耗分析/天然气';
import ElecCost from '../../components/模块组件/能耗分析/电耗能';
import WaterCost from '../../components/模块组件/能耗分析/水耗能';
import RestHeat from '../../components/模块组件/能耗分析/余热发电';
import Gas from '../../components/模块组件/能耗分析/焦炉煤气';
function EnergyAnalysis(props) {
console.log('[rendering...] 加载 能耗分析页面');
@ -9,30 +17,43 @@ function EnergyAnalysis(props) {
<div className={cls.grid}>
<div className={cls.vgrid + ' col-1'}>
<SmokeHandle />
<div className={'bgray ' + cls.oxygen}></div>
{/* <div className={'bgray ' + cls.no}></div> */}
<Oxygen />
<NO />
</div>
<div className={cls.vgrid + ' col-2'}>
<div className="bgray so2" style={{ gridRow: 2 }}></div>
<div className="bgray no2" style={{ gridRow: 3 }}></div>
<div style={{ gridRow: 3 }}>
<NO2 />
</div>
<div style={{ gridRow: 2 }}>
<SO2 />
</div>
</div>
<div className={'bgray ' + cls.line}></div>
<div className={cls.vgrid + ' col-3'}>
<div className="bgray heat" style={{ gridRow: 2 }}></div>
<div className="bgray water" style={{ gridRow: 3 }}></div>
<div style={{ gridRow: 2 }}>
<RestHeat />
</div>
<div style={{ gridRow: 3 }}>
<WaterCost />
</div>
</div>
<div className={cls.vgrid + ' col-4'}>
{/* <div className="bgray energy"></div> */}
<Energy />
<div className={cls.vvgrid}>
<div className="bgray electronic"></div>
<div className="bgray gas"></div>
<div className="bgray mgas"></div>
<div className=" electronic">
<ElecCost />
</div>
<div className=" gas">
<NatGas />
</div>
<div className=" mgas">
<Gas />
</div>
</div>
</div>
</div>