update energy
This commit is contained in:
parent
54b3cce498
commit
60616fcb0e
Binary file not shown.
|
Before Width: | Height: | Size: 162 B |
@ -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 (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user