update right
This commit is contained in:
parent
3e7205e5b4
commit
7029191579
BIN
src/assets/energy-bg.png
Normal file
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
BIN
src/assets/smoke-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 561 KiB |
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
.right {
|
.right-content {
|
||||||
background: #03f3;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
/* background: #fcc3; */
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user