update 流量部分
This commit is contained in:
parent
d269314cd2
commit
c7abdb4c03
@ -4,7 +4,9 @@ import BottomBarItem from '../BottomBarItem';
|
|||||||
function GasI(props) {
|
function GasI(props) {
|
||||||
return (
|
return (
|
||||||
<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
|
<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
|
||||||
助燃风流量 - linechart - 当前流量 - 0 legends - 1 line
|
{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
|
||||||
|
{/* 当前流量 */}
|
||||||
|
<div className={cls.currentFlow}>当前流量: 280m³</div>
|
||||||
</BottomBarItem>
|
</BottomBarItem>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,51 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
/* background-color: #00ee33; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gas {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currentFlow {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
padding: 8px 22px;
|
||||||
|
border-radius: 2px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
color: #12FFF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headWidget {
|
||||||
|
position: absolute;
|
||||||
|
/* background: #00ee33; */
|
||||||
|
top: 20px;
|
||||||
|
right: 24px;
|
||||||
|
height: 32px;
|
||||||
|
width: 190px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup * {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup *:focus-within {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup *::before {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup_button_wrapper {
|
||||||
|
color: #fff !important;
|
||||||
|
background: #03233c !important;
|
||||||
|
}
|
@ -1,10 +1,31 @@
|
|||||||
import cls from './index.module.css';
|
import cls from './index.module.css';
|
||||||
import BottomBarItem from '../BottomBarItem';
|
import BottomBarItem from '../BottomBarItem';
|
||||||
|
import { Switch, Radio } from 'antd';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { randomInt } from '../../../utils';
|
||||||
|
|
||||||
function GasII(props) {
|
function GasII(props) {
|
||||||
return (
|
return (
|
||||||
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
|
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
|
||||||
天然气流量 - linechart - 当前流量 - 2 legends - 2 lines
|
{/* 当前流量 */}
|
||||||
|
<div className={cls.currentFlow}>当前流量: 280m³</div>
|
||||||
|
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.headWidget}>
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.gasIcon}></span>
|
||||||
|
<span>天然气I</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.gas2Icon}></span>
|
||||||
|
<span>天然气II</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={cls.chart}>
|
||||||
|
{/* <ReactECharts option={options} style={{ height: '100%' }} /> */}
|
||||||
|
</div>
|
||||||
</BottomBarItem>
|
</BottomBarItem>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,79 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
/* background-color: #00ee33; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gas {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currentFlow {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
padding: 8px 22px;
|
||||||
|
border-radius: 2px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
color: #12fff5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headWidget {
|
||||||
|
position: absolute;
|
||||||
|
/* background: #00ee33; */
|
||||||
|
top: 20px;
|
||||||
|
right: 24px;
|
||||||
|
height: 32px;
|
||||||
|
width: 190px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend:last-child {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend > span {
|
||||||
|
display: inline-block;
|
||||||
|
color: #dff1fe;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend > span:first-child {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gasIcon {
|
||||||
|
background: #12fff5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gas2Icon {
|
||||||
|
background: #2760ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup * {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup *:focus-within {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup *::before {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radioGroup_button_wrapper {
|
||||||
|
color: #fff !important;
|
||||||
|
background: #03233c !important;
|
||||||
|
}
|
@ -28,8 +28,8 @@ export default function index() {
|
|||||||
<div className={`${cls.bottomBar} flex justify-between`}>
|
<div className={`${cls.bottomBar} flex justify-between`}>
|
||||||
<FaultTotal />
|
<FaultTotal />
|
||||||
<FaultType />
|
<FaultType />
|
||||||
<GasI />
|
|
||||||
<GasII />
|
<GasII />
|
||||||
|
<GasI />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user