update 基本完成页面布局
This commit is contained in:
父節點
5d6342c984
當前提交
6d7e8de0ed
@ -3,8 +3,23 @@ import BottomBarItem from '../BottomBarItem';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import * as echarts from 'echarts';
|
||||
import { randomInt } from '../../../utils';
|
||||
import { useState } from 'react';
|
||||
import { Switch } from 'antd';
|
||||
|
||||
function GasI(props) {
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
|
||||
const dataList = [
|
||||
{ id: 1, name: '1#助燃风', value: '122m³/h' },
|
||||
{ id: 2, name: '2#助燃风', value: '200m³/h' },
|
||||
{ id: 3, name: '3#助燃风', value: '112m³/h' },
|
||||
{ id: 4, name: '4#助燃风', value: '189m³/h' },
|
||||
{ id: 5, name: '5#助燃风', value: '109m³/h' },
|
||||
{ id: 6, name: '6#助燃风', value: '167m³/h' },
|
||||
{ id: 7, name: '7#助燃风', value: '172m³/h' },
|
||||
{ id: 8, name: '8#助燃风', value: '145m³/h' },
|
||||
];
|
||||
|
||||
const options = {
|
||||
color: ['#12FFF5', '#2760FF', '#FFD160'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
@ -83,14 +98,37 @@ function GasI(props) {
|
||||
},
|
||||
};
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
if (val) {
|
||||
// 展示图表
|
||||
setShowChart(true);
|
||||
} else {
|
||||
// 展示数据
|
||||
setShowChart(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
|
||||
{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
|
||||
{/* 当前流量 */}
|
||||
<div className={cls.currentFlow}>当前流量: 280m³</div>
|
||||
<div className={cls.headWidget}>
|
||||
<div className="flex items-center">
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
<span className={cls.switchLabel}>历史详情</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.chart}>
|
||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
||||
{showChart && (
|
||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
||||
)}
|
||||
{!showChart && (
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<div key={item.id} className={cls.listItem}>
|
||||
{item.name}: {item.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
|
||||
@ -8,18 +8,18 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
@ -29,7 +29,7 @@
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 190px;
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
@ -49,3 +49,35 @@
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.gridList {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
border-radius: 2px;
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
||||
}
|
||||
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 22px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 410px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.switchLabel {
|
||||
color: white;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
242
src/components/BottomBar/gasii/gasChart/chart.config.js
Normal file
242
src/components/BottomBar/gasii/gasChart/chart.config.js
Normal file
@ -0,0 +1,242 @@
|
||||
import * as echarts from 'echarts';
|
||||
import { randomInt } from '../../../../utils';
|
||||
|
||||
export default {
|
||||
color: [
|
||||
'#12FFF5',
|
||||
'#2760FF',
|
||||
'#FFD160',
|
||||
'#E80091',
|
||||
'#8064ff',
|
||||
'#ff8a3b',
|
||||
'#8cd26d',
|
||||
'#2aa1ff',
|
||||
],
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'roundRect',
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 3,
|
||||
height: 8,
|
||||
textStyle: {
|
||||
color: '#DFF1FE',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp,
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '1#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#12FFF540' },
|
||||
{ offset: 0.5, color: '#12FFF520' },
|
||||
{ offset: 1, color: '#12FFF510' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '2#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2760FF40' },
|
||||
{ offset: 0.5, color: '#2760FF20' },
|
||||
{ offset: 1, color: '#2760FF10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '3#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFD16040' },
|
||||
{ offset: 0.5, color: '#FFD16020' },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFD16010',
|
||||
},
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '4#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#E8009140' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#E8009120',
|
||||
},
|
||||
{ offset: 1, color: '#E8009110' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '5#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#8064ff40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#8064ff20',
|
||||
},
|
||||
{ offset: 1, color: '#8064ff10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '6#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#ff8a3b40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#ff8a3b20',
|
||||
},
|
||||
{ offset: 1, color: '#ff8a3b10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '7#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#8cd26d40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#8cd26d20',
|
||||
},
|
||||
{ offset: 1, color: '#8cd26d10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '8#天然气I',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2aa1ff40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#2aa1ff20',
|
||||
},
|
||||
{ offset: 1, color: '#2aa1ff10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
};
|
||||
@ -1,104 +1,15 @@
|
||||
import cls from './index.module.css';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import * as echarts from 'echarts';
|
||||
import { randomInt } from '../../../../utils';
|
||||
import options from './chart.config';
|
||||
|
||||
const tConfig = {};
|
||||
|
||||
function GasChart(props) {
|
||||
const options = {
|
||||
color: ['#12FFF5', '#2760FF', '#FFD160'],
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp,
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#12FFF540' },
|
||||
{ offset: 0.5, color: '#12FFF520' },
|
||||
{ offset: 1, color: '#12FFF510' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2760FF40' },
|
||||
{ offset: 0.5, color: '#2760FF20' },
|
||||
{ offset: 1, color: '#2760FF10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
};
|
||||
// <ReactECharts option={options} style={{ height: '100%' }} />
|
||||
return <div className="gasChart">Chart Of: {props.dataSource}</div>;
|
||||
return (
|
||||
<div className={cls.gasChart}>
|
||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GasChart;
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.gasChart {
|
||||
height: 100%;
|
||||
}
|
||||
@ -30,25 +30,24 @@ function getData(type) {
|
||||
}
|
||||
|
||||
function GridList(props) {
|
||||
const [dataList, setDataList] = useState([]);
|
||||
// const [dataList, setDataList] = useState([]);
|
||||
// setDataList(getData(props.dataSource))
|
||||
// useEffect(() => {
|
||||
// // 这种写法有点问题。。。
|
||||
// console.log('data source change:', props.dataSource);
|
||||
// setDataList(getData(props.dataSource));
|
||||
// }, props.dataSource);
|
||||
|
||||
useEffect(() => {
|
||||
// 这种写法有点问题。。。
|
||||
console.log('data source change:', props.dataSource);
|
||||
setDataList(getData(props.dataSource));
|
||||
}, props.dataSource);
|
||||
const dataList = getData(props.dataSource);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Grid List Of: {props.dataSource}</h1>
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<div className={cls.listItem}>
|
||||
{item.name}: {item.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<div key={item.id} className={cls.listItem}>
|
||||
{item.name}: {item.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
.gridList {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
border-radius: 2px;
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 20px;
|
||||
top: 22px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 410px;
|
||||
@ -65,6 +65,10 @@
|
||||
background: #2760ff;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user