update right

This commit is contained in:
lb 2023-09-10 19:42:59 +08:00
parent 3e7205e5b4
commit 7029191579
9 changed files with 59 additions and 17 deletions

BIN
src/assets/energy-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

BIN
src/assets/smoke-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 561 KiB

View File

@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react';
const EnergyCostChart = (props) => { const EnergyCostChart = (props) => {
const options = { const options = {
color: ['#FFD160', '#12FFF5', '#2760FF'], color: ['#FFD160', '#12FFF5', '#2760FF'],
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 26, right: 12, bottom: 18, left: 48 },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Array(7) data: Array(7)
@ -99,6 +99,29 @@ const EnergyCostChart = (props) => {
<li>总量</li> <li>总量</li>
</ul> </ul>
</div> </div>
</div>
<div className={cls.radioGroupWrapper}>
<Radio.Group
defaultValue="restHeat"
buttonStyle="solid"
className={cls.radioGroup}
>
<Radio.Button value="restHeat" className="radio-group__item">
余热发电
</Radio.Button>
<Radio.Button value="waterCost" className="radio-group__item">
水耗能
</Radio.Button>
<Radio.Button value="elecCost" className="radio-group__item">
电耗能
</Radio.Button>
<Radio.Button value="gasCost" className="radio-group__item">
天然气
</Radio.Button>
<Radio.Button value="gasiiCost" className="radio-group__item">
焦炉煤气
</Radio.Button>
</Radio.Group>
<Radio.Group <Radio.Group
defaultValue="week" defaultValue="week"
buttonStyle="solid" buttonStyle="solid"
@ -119,7 +142,7 @@ const EnergyCostChart = (props) => {
</Radio.Group> </Radio.Group>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<ReactECharts option={options} style={{ height: '180px' }} /> <ReactECharts option={options} style={{ height: '145px' }} />
</div> </div>
</div> </div>
); );

View File

@ -5,7 +5,7 @@
} }
.energyCostChart .titleBar { .energyCostChart .titleBar {
display: flex; display: flex;
justify-content: space-between; gap: 12px;
align-items: center; align-items: center;
color: white; color: white;
} }
@ -63,6 +63,13 @@
background-color: #2760ff; background-color: #2760ff;
} }
.radioGroupWrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px 0;
}
.radioGroup * { .radioGroup * {
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;

View File

@ -1,13 +1,13 @@
.energyCost { .energyCost {
background: url(../../../assets/energy.png) no-repeat; background: url(../../../assets/energy-bg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 626px; width: 626px;
height: 400px; height: 395px;
} }
.cost__info { .cost__info {
margin-top: 4px; margin-top: 4px;
margin-bottom: 12px; // margin-bottom: 12px;
div { div {
flex-grow: 1; flex-grow: 1;
@ -19,7 +19,7 @@
color: hsl(0, 0%, 100%, 0.9); color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px; // width: 288px;
height: 43px; height: 40px;
font-size: 20px; font-size: 20px;
letter-spacing: 1.43px; letter-spacing: 1.43px;
line-height: 40px; line-height: 40px;
@ -35,5 +35,5 @@
margin-left: 8px; margin-left: 8px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 6px;
} }

View File

@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
const SmokeTrendChart = (props) => { const SmokeTrendChart = (props) => {
const options = { const options = {
color: ['#FFD160', '#12FFF5', '#2760FF'], color: ['#FFD160', '#12FFF5', '#2760FF'],
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 18, left: 48 },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Array(7) data: Array(7)
@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group>
</div> </div>
<ReactECharts option={options} style={{ height: '240px' }} /> <ReactECharts option={options} style={{ height: '220px' }} />
</div> </div>
); );
}; };

View File

@ -1,9 +1,9 @@
.smokeHandle { .smokeHandle {
// background: #b730305c; // background: #b730305c;
background: url(../../../assets/smoke.png) no-repeat; background: url(../../../assets/smoke-bg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 626px; width: 626px;
height: 540px; height: 512px;
.smokeHandle__content { .smokeHandle__content {
margin-top: 8px; margin-top: 8px;
} }
@ -14,7 +14,7 @@
color: hsl(0, 0%, 100%, 0.9); color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px; // width: 288px;
height: 56px; height: 52px;
font-size: 20px; font-size: 20px;
letter-spacing: 1.43px; letter-spacing: 1.43px;
line-height: 56px; line-height: 56px;
@ -23,7 +23,7 @@
} }
.info__item_groups { .info__item_groups {
margin-bottom: 12px; // margin-bottom: 12px;
margin-left: 8px; margin-left: 8px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;

View File

@ -1,5 +1,13 @@
import './styles/right.module.css'; import './styles/right.module.css';
import Energy from '../RightBar/EnergyCost';
import Smoke from '../RightBar/SmokeHandle';
export default (props) => { export default (props) => {
return <div className={`right-content ${props.className}`}> </div>; return (
<div className={`right-content ${props.className}`}>
<Energy />
<Smoke />
</div>
);
}; };

View File

@ -1,3 +1,7 @@
.right { .right-content {
background: #03f3; height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
/* background: #fcc3; */
} }