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

update energy

Browse Source
This commit is contained in:
lb 2023-07-02 10:55:10 +08:00
parent 54b3cce498
commit 60616fcb0e
7 changed files with 133 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Icon/RightChart1Icon2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 162 B

4
src/components/Container.jsx
View File

@ -4,6 +4,7 @@ import cls from './container.module.less';
import IconStack from '../assets/Icon/icon-stack.png'; import IconStack from '../assets/Icon/icon-stack.png';
import IconGood from '../assets/Icon/icon-good.png'; import IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png';
const Container = (props) => { const Container = (props) => {
let icon = useRef(null); let icon = useRef(null);
@ -15,6 +16,9 @@ const Container = (props) => {
case 'good': // 良品率 case 'good': // 良品率
icon.current = IconGood; icon.current = IconGood;
break; break;
case 'charger':
icon.current = IconCharger;
break;
} }
return ( return (

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

@ -1,17 +1,16 @@
.EnergyCostChart { .energyCostChart {
margin-top: 12px; margin-top: 12px;
height: 1px; height: 1px;
flex: 1; flex: 1;
padding-top: 8px; padding-top: 8px;
background: #ae27276a;
} }
.EnergyCostChart .titleBar { .energyCostChart .titleBar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: white; color: white;
} }
.EnergyCostChart .titleBar h2 { .energyCostChart .titleBar h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
@ -19,17 +18,17 @@
color: #52fff8; color: #52fff8;
} }
.EnergyCostChart .titleBar .legend { .energyCostChart .titleBar .legend {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.EnergyCostChart .titleBar .legend * { .energyCostChart .titleBar .legend * {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #dff1fe; color: #dff1fe;
} }
.EnergyCostChart .titleBar .legend ul { .energyCostChart .titleBar .legend ul {
display: flex; display: flex;
margin: 0; margin: 0;
margin-left: 8px; margin-left: 8px;
@ -37,12 +36,12 @@
list-style: none; list-style: none;
align-items: center; align-items: center;
} }
.EnergyCostChart .titleBar .legend ul li { .energyCostChart .titleBar .legend ul li {
position: relative; position: relative;
margin: 4px; margin: 4px;
padding-left: 16px; padding-left: 16px;
} }
.EnergyCostChart .titleBar .legend ul li::before { .energyCostChart .titleBar .legend ul li::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 2px; left: 2px;
@ -53,15 +52,15 @@
border-radius: 2px; border-radius: 2px;
} }
.EnergyCostChart .titleBar .legend ul li:first-child::before { .energyCostChart .titleBar .legend ul li:first-child::before {
background-color: #ffd160; background-color: #ffd160;
} }
.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before { .energyCostChart .titleBar .legend ul li:nth-child(2)::before {
background-color: #12fff5; background-color: #12fff5;
} }
.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before { .energyCostChart .titleBar .legend ul li:nth-child(3)::before {
background-color: #2760ff; background-color: #2760ff;
} }

32
src/components/RightBar/EnergyCost/index.jsx
View File

@ -6,22 +6,26 @@ 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={`flex flex-col`}>
<div className={`${cls.info__item} flex flex-col items-center`}> <div className={`${cls.cost__info} flex`}>
<span>余 热 发 电</span> <div
<span>922kwh</span> className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
</div> >
<div className={cls.info__item_groups}> <span>余 热 发 电</span>
<div className={cls.info__item}>水 耗 量 : 32Km³</div> <span>922kwh</span>
<div className={cls.info__item}>天 然 气 I : 83m³</div> </div>
<div className={cls.info__item}>电 耗 量 : 52Km³</div> <div className={cls.info__item_groups}>
<div className={cls.info__item}>天 然 气 II: 32m³</div> <div className={cls.info__item}>水 耗 量 : 32Km³</div>
<div className={cls.info__item}>天 然 气 I : 83m³</div>
<div className={cls.info__item}>电 耗 量 : 52Km³</div>
<div className={cls.info__item}>天 然 气 II: 32m³</div>
</div>
</div> </div>
<TechSplitline />
<EnergyCostChart />
</div> </div>
<TechSplitline />
<EnergyCostChart />
</Container> </Container>
); );
} }

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

@ -1,9 +1,16 @@
.energyCost { .energyCost {
background: #b730305c; background: url(../../../assets/energy.png) no-repeat;
background-size: 100% 100%;
width: 626px;
} }
.cost__info { .cost__info {
margin-top: 8px;
margin-bottom: 12px; margin-bottom: 12px;
div {
flex-grow: 1;
}
} }
.info__item { .info__item {
@ -19,6 +26,10 @@
user-select: none; user-select: none;
} }
.hAuto {
height: auto;
}
.info__item_groups { .info__item_groups {
margin-left: 8px; margin-left: 8px;
display: grid; display: grid;

157
src/components/RightBar/substitutionCharts/Chart1/index.jsx
View File

@ -1,100 +1,95 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png' // import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
import Chart1 from './Chart1.jsx' import Chart1 from './Chart1.jsx';
import './index.less'
import './index.less';
//#52FFF8 //#52FFF8
function Index(props) { function Index(props) {
const switchColor = (index) => {
switch (index) {
case 1:
return '#52FFF8';
case 2:
return '#49B2FF';
case 3:
return '#FFB94D';
default:
return '#fff';
}
};
let Border = styled.div`
width: 74px;
height: 24px;
margin-top: 50px;
overflow: hidden;
`;
const switchColor = (index) => { // background: url(${RightChart1Icon2});
let Ion2 = styled.div`
width: 100%;
height: 100%;
float: left;
background-repeat: no-repeat;
transform: translatex(-82px);
filter: drop-shadow(82px 1px ${switchColor(props.index)});
`;
switch (index) { //最大值75
case 1: return '#52FFF8'; let Stuff = styled.div`
case 2: return '#49B2FF'; float: left;
case 3: return '#FFB94D'; margin-top: -17.5px;
default: return '#fff' transform: translatex(3px);
} width: ${58}%;
} height: 12px;
background: linear-gradient(to right, #051226, ${switchColor(props.index)});
`;
//中间三条gap的位置
let Gap1 = styled.div`
// float:left;
margin-top: 6px;
transform: translatex(15px);
position: absolute;
width: 2px;
height: 13px;
background-color: #051226;
`;
let Border = styled.div` const Gap2 = styled(Gap1)`
width: 74px; transform: translatex(29px);
height: 24px; `;
margin-top:50px;
overflow: hidden;
`
const Gap3 = styled(Gap1)`
transform: translatex(45px);
`;
return (
let Ion2 = styled.div` <div className="RightChart1ItemBorderRow">
width: 100%; <div className="RightChart1ItemB1">
height: 100%; <Chart1
float:left; color={switchColor(props.index)}
background: url(${RightChart1Icon2}); data={props.data}
background-repeat: no-repeat; unit={props.unit}
transform: translatex(-82px); />
filter:drop-shadow(82px 1px ${switchColor(props.index)}); </div>
` <div className="RightChart1ItemB2">
<h2 className="RightChart1ItemB2TXT">{props.name}</h2>
//最大值75 <Border>
let Stuff = styled.div` <Ion2></Ion2>
float:left; <Stuff></Stuff>
margin-top:-17.5px; <Gap1></Gap1>
transform: translatex(3px); <Gap2></Gap2>
width:${58}%; <Gap3></Gap3>
height: 12px; </Border>
background: linear-gradient(to right,#051226,${switchColor(props.index)}) </div>
` </div>
);
//中间三条gap的位置
let Gap1 = styled.div`
// float:left;
margin-top:6px;
transform: translatex(15px);
position:absolute;
width: 2px;
height:13px;
background-color: #051226;
`
const Gap2 = styled(Gap1)`
transform: translatex(29px);
`;
const Gap3 = styled(Gap1)`
transform: translatex(45px);
`;
return (
<div className='RightChart1ItemBorderRow' >
<div className='RightChart1ItemB1'>
<Chart1 color={switchColor(props.index)} data={props.data} unit={props.unit}/>
</div>
<div className='RightChart1ItemB2'>
<h2 className='RightChart1ItemB2TXT'>{props.name}</h2>
<Border>
<Ion2 ></Ion2>
<Stuff></Stuff>
<Gap1></Gap1>
<Gap2></Gap2>
<Gap3></Gap3>
</Border>
</div>
</div>
);
} }
export default Index; export default Index;

12
src/pages/global.less
View File

@ -14,6 +14,10 @@
justify-content: start; justify-content: start;
} }
.justify-center {
justify-content: center;
}
.justify-start { .justify-start {
justify-content: center; justify-content: center;
} }
@ -22,6 +26,10 @@
align-items: center; align-items: center;
} }
.self-stretch {
align-self: stretch;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -33,3 +41,7 @@
.h-half { .h-half {
height: 50%; height: 50%;
} }
.h-auto {
height: auto;
}