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

update rightbar

Browse Source
This commit is contained in:
lb 2023-07-02 10:28:47 +08:00
parent ba472e6574
commit 54b3cce498
6 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,8 @@
import cls from './index.module.less'; import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
const EnergyCostChart = (props) => { const EnergyCostChart = (props) => {
const options = { const options = {

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

@ -1,4 +1,9 @@
import cls from './index.module.less'; import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
const SmokeTrendChart = (props) => { const SmokeTrendChart = (props) => {
const options = { const options = {

22
src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css
View File

@ -1,17 +1,17 @@
.EnergyCostChart { .energyCostChart {
margin-top: 12px; margin-top: 12px;
height: 1px; height: 1px;
flex: 1; flex: 1;
padding-top: 8px; padding-top: 8px;
background: #ae27276a; 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 +19,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 +37,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 +53,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;
} }

40
src/components/RightBar/index.jsx
View File

@ -1,27 +1,27 @@
import React from 'react' import React from 'react';
import Chart1 from './Chart1';
import Chart1 from './Chart1' import Chart2 from './Chart2';
import Chart3 from './Chart3';
import Chart2 from './Chart2'
import Chart3 from './Chart3'
// import RightChart2 from './Chart2' // import RightChart2 from './Chart2'
import SmokeHandle from './SmokeHandle';
import EnergyCost from './EnergyCost';
//引用原来的公共工程 //引用原来的公共工程
import RightChart2 from './Chart2' // import RightChart2 from './Chart2'
// import RightChart3 from './Chart3'
import cls from './index.module.less';
import RightChart3 from './Chart3'
import './index.less'
export default function index() { export default function index() {
return ( return (
<div className='RightBorder'> <div className={cls.rightBar}>
<Chart1 /> <div className={cls.demoFloat}>
<Chart2 /> <EnergyCost />
<Chart3 /> <SmokeHandle />
</div> </div>
) <Chart1 />
<Chart2 />
<Chart3 />
</div>
);
} }

18
src/components/RightBar/index.less
View File

@ -1,18 +0,0 @@
.RightBorder {
width: 625px;
height: 966px;
margin-left: 24px;
display: flex;
flex-direction:column;
justify-content: flex-start;
.RightBorder1 {
width: 440px;
height: 340px;
}
.RightBorder2 {
width: 850px;
height: 305px;
margin-left: 25px;
}
}

10
src/components/RightBar/index.module.less Normal file
View File

@ -0,0 +1,10 @@
.rightBar {
}
.demoFloat {
position: fixed;
top: 100px;
right: 600px;
background: #77777737;
z-index: 10000;
}