mt-fe-group/xuchang-screen
9
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
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 IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png';
const Container = (props) => {
let icon = useRef(null);
@@ -15,6 +16,9 @@ const Container = (props) => {
case 'good': // 良品率
icon.current = IconGood;
break;
case 'charger':
icon.current = IconCharger;
break;
}
return (

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

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

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

@@ -6,22 +6,26 @@ import EnergyCostChart from './EnergyCostChart';
function EnergyCost(props) {
return (
<Container title="能耗" icon="charger" className={cls.energyCost}>
<div className={`${cls.cost__info} flex`}>
<div className={`${cls.info__item} flex flex-col items-center`}>
<span>余 热 发 电</span>
<span>922kwh</span>
</div>
<div className={cls.info__item_groups}>
<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 className={`flex flex-col`}>
<div className={`${cls.cost__info} flex`}>
<div
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
>
<span>余 热 发 电</span>
<span>922kwh</span>
</div>
<div className={cls.info__item_groups}>
<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>
<TechSplitline />
<EnergyCostChart />
</div>
<TechSplitline />
<EnergyCostChart />
</Container>
);
}

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

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

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

@@ -1,100 +1,95 @@
import React, { useEffect } from 'react';
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 './index.less'
import Chart1 from './Chart1.jsx';
import './index.less';
//#52FFF8
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) {
case 1: return '#52FFF8';
case 2: return '#49B2FF';
case 3: return '#FFB94D';
default: return '#fff'
}
}
//最大值75
let Stuff = styled.div`
float: left;
margin-top: -17.5px;
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`
width: 74px;
height: 24px;
margin-top:50px;
overflow: hidden;
`
const Gap2 = styled(Gap1)`
transform: translatex(29px);
`;
const Gap3 = styled(Gap1)`
transform: translatex(45px);
`;
let Ion2 = styled.div`
width: 100%;
height: 100%;
float:left;
background: url(${RightChart1Icon2});
background-repeat: no-repeat;
transform: translatex(-82px);
filter:drop-shadow(82px 1px ${switchColor(props.index)});
`
//最大值75
let Stuff = styled.div`
float:left;
margin-top:-17.5px;
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;
`
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>
);
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;

12
src/pages/global.less
View File

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