@@ -1,7 +1,116 @@ | |||
import cls from './index.module.less'; | |||
const TechSplitline = (props) => { | |||
return <div className={cls.techSplitline}></div>; | |||
const EnergyCostChart = (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> | |||
</ul> | |||
</div> | |||
<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 TechSplitline; | |||
export default EnergyCostChart; |
@@ -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; | |||
} |
@@ -1,3 +0,0 @@ | |||
.EnergyCostChart { | |||
background: #b730305c; | |||
} |
@@ -1,7 +1,7 @@ | |||
import cls from './index.module.less'; | |||
const EnergyCostChart = (props) => { | |||
return <div className={cls.energyCostChart}>EnergyCostChart</div>; | |||
const TechSplitline = (props) => { | |||
return <div className={cls.techSplitline}></div>; | |||
}; | |||
export default EnergyCostChart; | |||
export default TechSplitline; |
@@ -1,7 +1,7 @@ | |||
import cls from './index.module.less'; | |||
import Container from '../../Container'; | |||
import TechSplitline from './TechSplitline'; | |||
import EnergyCostChart from './TechSplitline'; | |||
import EnergyCostChart from './EnergyCostChart'; | |||
function EnergyCost(props) { | |||
return ( | |||
@@ -2,6 +2,10 @@ | |||
background: #b730305c; | |||
} | |||
.cost__info { | |||
margin-bottom: 12px; | |||
} | |||
.info__item { | |||
border-radius: 2px; | |||
color: hsl(0, 0%, 100%, 0.9); | |||