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

add 能源

Browse Source
This commit is contained in:
lb 2023-11-03 09:40:26 +08:00
parent 2a94f9050c
commit b1b439557f
25 changed files with 154 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/公共组件/GradientText/index.jsx Normal file
View File

@ -0,0 +1,25 @@
const GradientText = ({ text, spacing }) => {
return (
<svg>
<defs>
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
<stop
offset="100%"
style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
/>
</linearGradient>
</defs>
<text
x={0}
y={36}
fill="url(#smoke-text)"
style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
>
{text}
</text>
</svg>
);
};
export default GradientText;

1
src/components/模块组件/能耗分析/GraphBase/index.jsx Normal file
View File

@ -0,0 +1 @@
// TODO: 通用组件 - 按钮 菜单控制层

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

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

0
src/components/模块组件/能耗分析/一氧化氮/index.module.css Normal file
View File

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

0
src/components/模块组件/能耗分析/二氧化氮/index.module.css Normal file
View File

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

0
src/components/模块组件/能耗分析/二氧化硫/index.module.css Normal file
View File

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

0
src/components/模块组件/能耗分析/余热发电/index.module.css Normal file
View File

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

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

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

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

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

@ -0,0 +1,37 @@
import cls from './index.module.css';
import GradientText from '../../../公共组件/GradientText';
function SmokeHandle(props) {
return (
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
<span
class={cls.shadowBorder}
style={{
gridRow: '1 / 3',
paddingTop: '38px',
paddingLeft: '32px',
userSelect: 'none',
}}
>
<GradientText text="烟气处理" />
</span>
<span
className={cls.shadowBorder + ' ' + cls.infoText}
style={{ letterSpacing: '12px' }}
>
氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
一氧化氮排放浓度: 20mg/m³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
二氧化硫排放浓度: 20mg/m³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
二氧化氮排放浓度: 20mg/m³
</span>
</div>
);
}
export default SmokeHandle;

21
src/components/模块组件/能耗分析/烟气处理/index.module.css Normal file
View File

@ -0,0 +1,21 @@
.smoke {
display: grid;
gap: 6px;
grid-template-columns: 187px 347px 347px ;
grid-template-rows: 60px 60px;
}
.shadowBorder {
box-shadow: inset 0 0 12px 3px #fff3;
border-radius: 4px;
padding: 4px;
}
.infoText {
text-align: center;
font-size: 24px;
line-height: 2.2;
/* line-height: 20px; */
letter-spacing: 1px;
user-select: none;
}

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

0
src/components/模块组件/能耗分析/焦炉煤气/index.module.css Normal file
View File

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

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

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

@ -0,0 +1,44 @@
import cls from './index.module.css';
import GradientText from '../../../公共组件/GradientText';
function Energy(props) {
return (
<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
<span
class={cls.shadowBorder}
style={{
gridRow: '1 / 3',
paddingTop: '38px',
paddingLeft: '32px',
userSelect: 'none',
}}
>
<GradientText text="能源" />
</span>
<span
className={cls.shadowBorder + ' ' + cls.infoText}
style={{
gridRow: '1 / 3',
}}
>
<span style={{ lineHeight: 2.5 }}>余热发电</span>
<span style={{ lineHeight: 2.5 }}>992Kwh</span>
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
水耗量: 32Km³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
天然气I: 92m³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
电耗量: 92Km³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
天然气II: 92m³
</span>
</div>
);
}
export default Energy;

21
src/components/模块组件/能耗分析/能源/index.module.css Normal file
View File

@ -0,0 +1,21 @@
.layout {
display: grid;
gap: 6px;
grid-template-columns: 133px 158px 292px 292px ;
grid-template-rows: 60px 60px;
}
.shadowBorder {
box-shadow: inset 0 0 12px 3px #fff3;
border-radius: 4px;
padding: 4px;
}
.infoText {
text-align: center;
font-size: 24px;
line-height: 2.2;
/* line-height: 20px; */
letter-spacing: 1px;
user-select: none;
}

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

@ -1,62 +1,13 @@
import cls from './index.module.css';
const GradientText = ({ text, spacing }) => {
return (
<svg>
<defs>
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
<stop
offset="100%"
style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
/>
</linearGradient>
</defs>
<text
x={0}
y={36}
fill="url(#smoke-text)"
style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
>
{text}
</text>
</svg>
);
};
import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
import Energy from '../../components/模块组件/能耗分析/能源';
function EnergyAnalysis(props) {
console.log('[rendering...] 加载 能耗分析页面');
return (
<div className={cls.grid}>
<div className={cls.vgrid + ' col-1'}>
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
<span
class={cls.shadowBorder}
style={{
gridRow: '1 / 3',
paddingTop: '38px',
paddingLeft: '32px',
userSelect: 'none',
}}
>
<GradientText text="烟气处理" />
</span>
<span
className={cls.shadowBorder + ' ' + cls.infoText}
style={{ letterSpacing: '12px' }}
>
氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
一氧化氮排放浓度: 20mg/m³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
二氧化硫排放浓度: 20mg/m³
</span>
<span className={cls.shadowBorder + ' ' + cls.infoText}>
二氧化氮排放浓度: 20mg/m³
</span>
</div>
<SmokeHandle />
<div className={'bgray ' + cls.oxygen}></div>
<div className={'bgray ' + cls.no}></div>
</div>
@ -74,7 +25,8 @@ function EnergyAnalysis(props) {
</div>
<div className={cls.vgrid + ' col-4'}>
<div className="bgray energy"></div>
{/* <div className="bgray energy"></div> */}
<Energy />
<div className={cls.vvgrid}>
<div className="bgray electronic"></div>
<div className="bgray gas"></div>

7
src/pages/能耗分析/index.module.css
View File

@ -38,13 +38,6 @@
background: url(../../assets/line.png) 0 60% no-repeat;
}
.smoke {
display: grid;
gap: 6px;
grid-template-columns: 187px 347px 347px ;
grid-template-rows: 60px 60px;
}
.oxygen {}