update
This commit is contained in:
lb
@@ -1,113 +0,0 @@
|
||||
// TODO: 通用组件 - 按钮 菜单控制层
|
||||
import useIcon from '../../../../hooks/useIcon';
|
||||
import cls from './index.module.css';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Switch, Radio } from 'antd';
|
||||
|
||||
function choseBg(size) {
|
||||
const [width, height] = size;
|
||||
return width === 'long' && height === 'middle'
|
||||
? 'long-middle'
|
||||
: width === 'long' && height === 'short'
|
||||
? 'long-short'
|
||||
: width === 'short' && height === 'middle'
|
||||
? 'short-middle'
|
||||
: width === 'short' && height === 'short'
|
||||
? 'short-short'
|
||||
: width === 'short' && height === 'long'
|
||||
? 'short-long'
|
||||
: width === 'middle' && height === 'middle'
|
||||
? 'middle-middle'
|
||||
: width === 'middle' && height === 'short'
|
||||
? 'middle-short'
|
||||
: width === 'middle' && height === 'long'
|
||||
? 'middle-long'
|
||||
: 'middle-middle';
|
||||
}
|
||||
|
||||
function GraphBase(props) {
|
||||
const size = props.size || ['middle', 'middle'];
|
||||
const bgClass = choseBg(size);
|
||||
const {
|
||||
icon,
|
||||
title,
|
||||
desc,
|
||||
switchOptions,
|
||||
onSwitch,
|
||||
dateOptions,
|
||||
onDateChange,
|
||||
legend,
|
||||
} = props;
|
||||
const iconSrc = useIcon(icon);
|
||||
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
|
||||
let dto = null;
|
||||
|
||||
if (dateOptions) {
|
||||
dto = dateOptions.map((item) => (
|
||||
<Radio.Button value={item} key={item} className="radio-group__item">
|
||||
{item}
|
||||
</Radio.Button>
|
||||
));
|
||||
}
|
||||
|
||||
function handleSwitchChange(v) {
|
||||
v ? setShowChart(true) : setShowChart(false);
|
||||
onSwitch(v);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
'graph-base ' +
|
||||
cls[bgClass] +
|
||||
' ' +
|
||||
cls.graphBase +
|
||||
' ' +
|
||||
props.className
|
||||
}
|
||||
>
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<div className={cls.graphBaseContent}>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
{switchOptions && (
|
||||
<div className={cls.graphBaseSwitch}>
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
)}
|
||||
{legend && showChart && (
|
||||
<div className={cls.legend}>
|
||||
{legend.map((item, index) => (
|
||||
<div className={cls.legendItem} key={item}>
|
||||
<span
|
||||
className={cls.lengedItemPrefix}
|
||||
style={{ backgroundColor: colors[index] }}
|
||||
></span>
|
||||
<span className={cls.legendItemLabel}>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{dateOptions && (
|
||||
<Radio.Group
|
||||
defaultValue="日"
|
||||
buttonStyle="solid"
|
||||
className={cls.graphBaseDate + ' ' + cls.radioGroup}
|
||||
onChange={({ target }) => onDateChange(target.value)}
|
||||
>
|
||||
{dto}
|
||||
</Radio.Group>
|
||||
)}
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GraphBase;
|
||||
@@ -1,145 +0,0 @@
|
||||
/* .long-long {
|
||||
background: url('../../../../assets/long-long.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
} */
|
||||
|
||||
.long-middle {
|
||||
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-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-long {
|
||||
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-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-short {
|
||||
background: url('../../../../assets/middle-short.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* more...
|
||||
*/
|
||||
|
||||
.graphBase {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: flex-end;
|
||||
align-items: center; */
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.graphBaseTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graphBaseTitle > img {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.graphBaseTitle > h2 {
|
||||
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
|
||||
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.graphBaseContent {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background: #fff3;
|
||||
}
|
||||
|
||||
.graphBaseDesc {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 150px;
|
||||
font-size: 19px;
|
||||
color: #76fff9;
|
||||
}
|
||||
|
||||
.graphBaseSwitch {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 258px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graphBaseDate {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 24px;
|
||||
color: #fff;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.radioGroup *:focus-within {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.radioGroup *::before {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.switchLabel {
|
||||
color: white;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 360px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.lengedItemPrefix {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
@@ -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
30
src/components/模块组件/能耗分析/二氧化氮 copy/index.jsx
Normal 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;
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
30
src/components/模块组件/能耗分析/氧气含量/index.jsx
Normal 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
0
src/components/模块组件/能耗分析/氧气含量/index.module.css
Normal 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;
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user