From 5d5636682565ae9d99d03ab015eec2805dfbb3a3 Mon Sep 17 00:00:00 2001 From: lb Date: Sun, 2 Jul 2023 21:56:09 +0800 Subject: [PATCH] add GasChart adn GridLIst --- .../BottomBar/gasii/gasChart/index.jsx | 104 ++++++++++++ .../BottomBar/gasii/gasChart/index.module.css | 0 .../BottomBar/gasii/gridList/index.jsx | 7 + .../BottomBar/gasii/gridList/index.module.css | 0 src/components/BottomBar/gasii/index.jsx | 154 ++++++------------ .../BottomBar/gasii/index.module.css | 11 +- 6 files changed, 166 insertions(+), 110 deletions(-) create mode 100644 src/components/BottomBar/gasii/gasChart/index.jsx create mode 100644 src/components/BottomBar/gasii/gasChart/index.module.css create mode 100644 src/components/BottomBar/gasii/gridList/index.jsx create mode 100644 src/components/BottomBar/gasii/gridList/index.module.css diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx new file mode 100644 index 0000000..ba4f130 --- /dev/null +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -0,0 +1,104 @@ +import cls from './index.module.css'; +import ReactECharts from 'echarts-for-react'; +import * as echarts from 'echarts'; +import { randomInt } from '../../../../utils'; + +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', + }, + }; + // + return
Chart Of: {props.dataSource}
; +} + +export default GasChart; diff --git a/src/components/BottomBar/gasii/gasChart/index.module.css b/src/components/BottomBar/gasii/gasChart/index.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BottomBar/gasii/gridList/index.jsx b/src/components/BottomBar/gasii/gridList/index.jsx new file mode 100644 index 0000000..f7d2c78 --- /dev/null +++ b/src/components/BottomBar/gasii/gridList/index.jsx @@ -0,0 +1,7 @@ +import cls from './index.module.css'; + +function GridList(props) { + return
Grid List Of: {props.dataSource}
; +} + +export default GridList; diff --git a/src/components/BottomBar/gasii/gridList/index.module.css b/src/components/BottomBar/gasii/gridList/index.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BottomBar/gasii/index.jsx b/src/components/BottomBar/gasii/index.jsx index 239cc72..56c64ad 100644 --- a/src/components/BottomBar/gasii/index.jsx +++ b/src/components/BottomBar/gasii/index.jsx @@ -1,123 +1,63 @@ import cls from './index.module.css'; import BottomBarItem from '../BottomBarItem'; -import ReactECharts from 'echarts-for-react'; -import * as echarts from 'echarts'; -import { randomInt } from '../../../utils'; + +import { Switch, Radio } from 'antd'; +import { useState } from 'react'; +import GridList from './gridList'; +import GasChart from './gasChart'; function GasII(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', - }, - }; + const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii + const [showChart, setShowChart] = useState(true); + + function handleSwitchChange(val) { + if (val) { + // 展示图表 + setShowChart(true); + } else { + // 展示数据 + setShowChart(false); + } + } + + function handleSourceChange(e) { + console.log('val', e.target.value); + if (e.target.value == 'ii') { + // 天然气II + setDataSource('gas-ii'); + } else if (e.target.value == 'i') { + // 天然气 I + setDataSource('gas-i'); + } + } return ( - {/* 当前流量 */} -
当前流量: 280m³
- {/* legend */}
-
- - 天然气I -
-
- - 天然气II +
+ + 历史详情
+ + + + 天然气 I + + + 天然气 II + +
- + {showChart && } + {!showChart && }
); diff --git a/src/components/BottomBar/gasii/index.module.css b/src/components/BottomBar/gasii/index.module.css index 0059b76..bf6cf3f 100644 --- a/src/components/BottomBar/gasii/index.module.css +++ b/src/components/BottomBar/gasii/index.module.css @@ -28,10 +28,15 @@ top: 20px; right: 24px; height: 32px; - width: 190px; + width: 410px; display: flex; align-items: center; - justify-content: flex-end; + justify-content: space-between; +} + +.switchLabel { + color: white; + margin-left: 6px; } .legend:last-child { @@ -42,7 +47,7 @@ display: inline-block; color: #dff1fe; font-size: 14px; - letter-spacing: 2px; + letter-spacing: 2px; } .legend > span:first-child {