mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update right

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 KiB

27
src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
View File

@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react';
const EnergyCostChart = (props) => {
const options = {
color: ['#FFD160', '#12FFF5', '#2760FF'],
grid: { top: 32, right: 12, bottom: 20, left: 48 },
grid: { top: 26, right: 12, bottom: 18, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
@ -99,6 +99,29 @@ const EnergyCostChart = (props) => {
<li>总量</li>
</ul>
</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
defaultValue="week"
buttonStyle="solid"
@ -119,7 +142,7 @@ const EnergyCostChart = (props) => {
</Radio.Group>
</div>
<div className="flex-1">
<ReactECharts option={options} style={{ height: '180px' }} />
<ReactECharts option={options} style={{ height: '145px' }} />
</div>
</div>
);

9
src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css
View File

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

10
src/components/RightBar/EnergyCost/index.module.less
View File

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

4
src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx
View File

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

8
src/components/RightBar/SmokeHandle/index.module.less
View File

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

10
src/components/yx-dark/RightContent.jsx
View File

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

8
src/components/yx-dark/styles/right.module.css
View File

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