@@ -1,13 +1,13 @@ | |||||
import cls from './index.module.less'; | import cls from './index.module.less'; | ||||
import Container from '../../Container'; | import Container from '../../Container'; | ||||
import TechSplitline from './TechSplitline'; | |||||
import TechSplitline from '../TechSplitline'; | |||||
import EnergyCostChart from './EnergyCostChart'; | import EnergyCostChart from './EnergyCostChart'; | ||||
function EnergyCost(props) { | function EnergyCost(props) { | ||||
return ( | return ( | ||||
<Container title="能耗" icon="charger" className={cls.energyCost}> | <Container title="能耗" icon="charger" className={cls.energyCost}> | ||||
<div className={`${cls.cost__info} flex`}> | <div className={`${cls.cost__info} flex`}> | ||||
<div className={`${cls.info__item} flex flex-col align-center`}> | |||||
<div className={`${cls.info__item} flex flex-col items-center`}> | |||||
<span>余 热 发 电</span> | <span>余 热 发 电</span> | ||||
<span>922kwh</span> | <span>922kwh</span> | ||||
</div> | </div> | ||||
@@ -25,3 +25,5 @@ function EnergyCost(props) { | |||||
</Container> | </Container> | ||||
); | ); | ||||
} | } | ||||
export default EnergyCost; |
@@ -0,0 +1,140 @@ | |||||
import cls from './index.module.less'; | |||||
const SmokeTrendChart = (props) => { | |||||
const options = { | |||||
color: ['#FFD160', '#12FFF5', '#2760FF'], | |||||
grid: { top: 28, right: 12, bottom: 32, left: 48 }, | |||||
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: { | |||||
type: 'value', | |||||
axisLabel: { | |||||
color: '#fff', | |||||
fontSize: 12, | |||||
formatter: '{value} %', | |||||
}, | |||||
axisLine: { | |||||
show: true, | |||||
lineStyle: { | |||||
color: '#213259', | |||||
}, | |||||
}, | |||||
splitLine: { | |||||
lineStyle: { | |||||
color: '#213259a0', | |||||
}, | |||||
}, | |||||
interval: 10, | |||||
min: 0, | |||||
max: 100, | |||||
}, | |||||
series: [ | |||||
{ | |||||
data: Array(7) | |||||
.fill(1) | |||||
.map((_) => { | |||||
return randomInt(60, 100); | |||||
}), | |||||
type: 'line', | |||||
areaStyle: { | |||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||||
{ offset: 0, color: '#FFD16040' }, | |||||
{ offset: 0.5, color: '#FFD16020' }, | |||||
{ offset: 1, color: '#FFD16010' }, | |||||
]), | |||||
}, | |||||
// smooth: true, | |||||
}, | |||||
], | |||||
tooltip: { | |||||
trigger: 'axis', | |||||
}, | |||||
}; | |||||
function handleSwitchChange(val) { | |||||
// val: boolean | |||||
console.log('switch change', val); | |||||
} | |||||
return ( | |||||
<div className={cls.energyCostChart}> | |||||
<div className={cls.titleBar}> | |||||
<h2>能耗趋势图</h2> | |||||
<Switch defaultChecked onChange={handleSwitchChange} /> | |||||
<div className={cls.legend}> | |||||
<span className="legend__title">班次详情</span> | |||||
<ul className="legend__list"> | |||||
<li>总量</li> | |||||
<li>白班</li> | |||||
<li>夜班</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
<div className={cls.choiceBar}> | |||||
<Radio.Group | |||||
defaultValue="oxygen" | |||||
buttonStyle="solid" | |||||
className={`${cls.radioGroup} flex items-center justify-between`} | |||||
> | |||||
<Radio.Button value="oxygen" className="radio-group__item"> | |||||
氧气含量 | |||||
</Radio.Button> | |||||
<Radio.Button value="so2" className="radio-group__item"> | |||||
二氧化硫 | |||||
</Radio.Button> | |||||
<Radio.Button value="no" className="radio-group__item"> | |||||
一氧化氮 | |||||
</Radio.Button> | |||||
<Radio.Button value="no2" className="radio-group__item"> | |||||
二氧化氮 | |||||
</Radio.Button> | |||||
</Radio.Group> | |||||
<Radio.Group | |||||
defaultValue="week" | |||||
buttonStyle="solid" | |||||
className={cls.radioGroup} | |||||
> | |||||
<Radio.Button value="day" className="radio-group__item"> | |||||
日 | |||||
</Radio.Button> | |||||
<Radio.Button value="week" className="radio-group__item"> | |||||
周 | |||||
</Radio.Button> | |||||
<Radio.Button value="month" className="radio-group__item"> | |||||
月 | |||||
</Radio.Button> | |||||
<Radio.Button value="year" className="radio-group__item"> | |||||
年 | |||||
</Radio.Button> | |||||
</Radio.Group> | |||||
</div> | |||||
<ReactECharts option={options} /> | |||||
</div> | |||||
); | |||||
}; | |||||
export default SmokeTrendChart; |
@@ -0,0 +1,87 @@ | |||||
.EnergyCostChart { | |||||
margin-top: 12px; | |||||
height: 1px; | |||||
flex: 1; | |||||
padding-top: 8px; | |||||
background: #ae27276a; | |||||
} | |||||
.EnergyCostChart .titleBar { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
color: white; | |||||
} | |||||
.EnergyCostChart .titleBar h2 { | |||||
margin: 0; | |||||
font-size: 18px; | |||||
line-height: 32px; | |||||
letter-spacing: 1.2px; | |||||
color: #52fff8; | |||||
} | |||||
.EnergyCostChart .titleBar .legend { | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.EnergyCostChart .titleBar .legend * { | |||||
font-size: 14px; | |||||
line-height: 14px; | |||||
color: #dff1fe; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul { | |||||
display: flex; | |||||
margin: 0; | |||||
margin-left: 8px; | |||||
padding: 0; | |||||
list-style: none; | |||||
align-items: center; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul li { | |||||
position: relative; | |||||
margin: 4px; | |||||
padding-left: 16px; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul li::before { | |||||
content: ''; | |||||
position: absolute; | |||||
left: 2px; | |||||
top: 2px; | |||||
display: inline-block; | |||||
width: 12px; | |||||
height: 12px; | |||||
border-radius: 2px; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul li:first-child::before { | |||||
background-color: #ffd160; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before { | |||||
background-color: #12fff5; | |||||
} | |||||
.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before { | |||||
background-color: #2760ff; | |||||
} | |||||
.radioGroup * { | |||||
border: none !important; | |||||
border-radius: 0 !important; | |||||
} | |||||
.radioGroup *:focus-within { | |||||
box-shadow: none !important; | |||||
} | |||||
.radioGroup *::before { | |||||
width: 0 !important; | |||||
} | |||||
.radioGroup_button_wrapper { | |||||
color: #fff !important; | |||||
background: #03233c !important; | |||||
} | |||||
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked { | |||||
background: #02457e !important; | |||||
} |
@@ -0,0 +1,23 @@ | |||||
import cls from './index.module.less'; | |||||
import Container from '../../Container'; | |||||
import TechSplitline from '../TechSplitline'; | |||||
import SmokeTrendChart from './SmokeTrendChart'; | |||||
function SmokeHandle(props) { | |||||
return ( | |||||
<Container title="能耗" icon="charger" className={cls.energyCost}> | |||||
<div className={cls.info__item_groups}> | |||||
<div className={cls.info__item}>氧 气 含 量 : 72%</div> | |||||
<div className={cls.info__item}>一氧化氮排放浓度:59mg/m³</div> | |||||
<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div> | |||||
<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</div> | |||||
</div> | |||||
<TechSplitline /> | |||||
<SmokeTrendChart /> | |||||
</Container> | |||||
); | |||||
} | |||||
export default SmokeHandle; |
@@ -0,0 +1,27 @@ | |||||
.energyCost { | |||||
background: #b730305c; | |||||
} | |||||
.cost__info { | |||||
margin-bottom: 12px; | |||||
} | |||||
.info__item { | |||||
border-radius: 2px; | |||||
color: hsl(0, 0%, 100%, 0.9); | |||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); | |||||
// width: 288px; | |||||
height: 43px; | |||||
font-size: 20px; | |||||
letter-spacing: 1.43px; | |||||
line-height: 40px; | |||||
text-align: center; | |||||
user-select: none; | |||||
} | |||||
.info__item_groups { | |||||
margin-left: 8px; | |||||
display: grid; | |||||
grid-template-columns: 1fr 1fr; | |||||
gap: 8px; | |||||
} |
@@ -1,31 +1,35 @@ | |||||
.flex { | .flex { | ||||
display: flex; | |||||
display: flex; | |||||
} | } | ||||
.flex-col { | .flex-col { | ||||
flex-direction: column; | |||||
flex-direction: column; | |||||
} | } | ||||
.justify-between { | .justify-between { | ||||
justify-content: space-between; | |||||
justify-content: space-between; | |||||
} | } | ||||
.justify-start { | .justify-start { | ||||
justify-content: start; | |||||
justify-content: start; | |||||
} | } | ||||
.justify-start { | .justify-start { | ||||
justify-content: center; | |||||
justify-content: center; | |||||
} | |||||
.items-center { | |||||
align-items: center; | |||||
} | } | ||||
.w-full { | .w-full { | ||||
width: 100%; | |||||
width: 100%; | |||||
} | } | ||||
.h-full { | .h-full { | ||||
height: 100%; | |||||
height: 100%; | |||||
} | } | ||||
.h-half { | .h-half { | ||||
height: 50%; | |||||
} | |||||
height: 50%; | |||||
} |