From 6d7e8de0edeb9b1deb17e2a68683d3391aeeee25 Mon Sep 17 00:00:00 2001 From: lb Date: Mon, 3 Jul 2023 10:25:53 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomBar/gasi/index.jsx | 46 +++- .../BottomBar/gasi/index.module.css | 58 ++++- .../BottomBar/gasii/gasChart/chart.config.js | 242 ++++++++++++++++++ .../BottomBar/gasii/gasChart/index.jsx | 105 +------- .../BottomBar/gasii/gasChart/index.module.css | 3 + .../BottomBar/gasii/gridList/index.jsx | 31 ++- .../BottomBar/gasii/gridList/index.module.css | 14 + .../BottomBar/gasii/index.module.css | 6 +- 8 files changed, 374 insertions(+), 131 deletions(-) create mode 100644 src/components/BottomBar/gasii/gasChart/chart.config.js diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index 5307fde..7d6e675 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -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 ( - {/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */} - {/* 当前流量 */} -
当前流量: 280m³
+
+
+ + 历史详情 +
+
- + {showChart && ( + + )} + {!showChart && ( +
+ {dataList.map((item) => ( +
+ {item.name}: {item.value} +
+ ))} +
+ )}
); diff --git a/src/components/BottomBar/gasi/index.module.css b/src/components/BottomBar/gasi/index.module.css index f846de9..0936646 100644 --- a/src/components/BottomBar/gasi/index.module.css +++ b/src/components/BottomBar/gasi/index.module.css @@ -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; +} diff --git a/src/components/BottomBar/gasii/gasChart/chart.config.js b/src/components/BottomBar/gasii/gasChart/chart.config.js new file mode 100644 index 0000000..df4e297 --- /dev/null +++ b/src/components/BottomBar/gasii/gasChart/chart.config.js @@ -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', + }, +}; diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx index ba4f130..5d4d506 100644 --- a/src/components/BottomBar/gasii/gasChart/index.jsx +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -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', - }, - }; - // - return
Chart Of: {props.dataSource}
; + return ( +
+ +
+ ); } export default GasChart; diff --git a/src/components/BottomBar/gasii/gasChart/index.module.css b/src/components/BottomBar/gasii/gasChart/index.module.css index e69de29..1a35362 100644 --- a/src/components/BottomBar/gasii/gasChart/index.module.css +++ b/src/components/BottomBar/gasii/gasChart/index.module.css @@ -0,0 +1,3 @@ +.gasChart { + height: 100%; +} \ No newline at end of file diff --git a/src/components/BottomBar/gasii/gridList/index.jsx b/src/components/BottomBar/gasii/gridList/index.jsx index 226a3bd..22ee72b 100644 --- a/src/components/BottomBar/gasii/gridList/index.jsx +++ b/src/components/BottomBar/gasii/gridList/index.jsx @@ -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 ( - <> -

Grid List Of: {props.dataSource}

-
- {dataList.map((item) => ( -
- {item.name}: {item.value} -
- ))} -
- +
+ {dataList.map((item) => ( +
+ {item.name}: {item.value} +
+ ))} +
); } diff --git a/src/components/BottomBar/gasii/gridList/index.module.css b/src/components/BottomBar/gasii/gridList/index.module.css index e69de29..536b3da 100644 --- a/src/components/BottomBar/gasii/gridList/index.module.css +++ b/src/components/BottomBar/gasii/gridList/index.module.css @@ -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); +} diff --git a/src/components/BottomBar/gasii/index.module.css b/src/components/BottomBar/gasii/index.module.css index bf6cf3f..993158c 100644 --- a/src/components/BottomBar/gasii/index.module.css +++ b/src/components/BottomBar/gasii/index.module.css @@ -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;