From ba472e6574b0dc8969f84a899ea012bea7ca9149 Mon Sep 17 00:00:00 2001 From: lb Date: Sat, 1 Jul 2023 22:07:52 +0800 Subject: [PATCH] add SmokeHandle --- src/components/RightBar/EnergyCost/index.jsx | 6 +- .../SmokeHandle/SmokeTrendChart/index.jsx | 140 ++++++++++++++++++ .../SmokeTrendChart/index.module.css | 87 +++++++++++ src/components/RightBar/SmokeHandle/index.jsx | 23 +++ .../RightBar/SmokeHandle/index.module.less | 27 ++++ .../{EnergyCost => }/TechSplitline/index.jsx | 0 .../TechSplitline/index.module.less | 0 src/pages/global.less | 22 +-- 8 files changed, 294 insertions(+), 11 deletions(-) create mode 100644 src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx create mode 100644 src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css create mode 100644 src/components/RightBar/SmokeHandle/index.jsx create mode 100644 src/components/RightBar/SmokeHandle/index.module.less rename src/components/RightBar/{EnergyCost => }/TechSplitline/index.jsx (100%) rename src/components/RightBar/{EnergyCost => }/TechSplitline/index.module.less (100%) diff --git a/src/components/RightBar/EnergyCost/index.jsx b/src/components/RightBar/EnergyCost/index.jsx index 07cc91a..47cfa78 100644 --- a/src/components/RightBar/EnergyCost/index.jsx +++ b/src/components/RightBar/EnergyCost/index.jsx @@ -1,13 +1,13 @@ import cls from './index.module.less'; import Container from '../../Container'; -import TechSplitline from './TechSplitline'; +import TechSplitline from '../TechSplitline'; import EnergyCostChart from './EnergyCostChart'; function EnergyCost(props) { return (
-
+
余 热 发 电 922kwh
@@ -25,3 +25,5 @@ function EnergyCost(props) { ); } + +export default EnergyCost; diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx new file mode 100644 index 0000000..fae647a --- /dev/null +++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx @@ -0,0 +1,140 @@ +import cls from './index.module.less'; + +const SmokeTrendChart = (props) => { + const options = { + color: ['#FFD160', '#12FFF5', '#2760FF'], + grid: { top: 28, right: 12, bottom: 32, 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: { + 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(60, 100); + }), + 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, + }, + ], + tooltip: { + trigger: 'axis', + }, + }; + + function handleSwitchChange(val) { + // val: boolean + console.log('switch change', val); + } + + return ( +
+
+

能耗趋势图

+ +
+ 班次详情 +
    +
  • 总量
    • +
  • 白班
    • +
  • 夜班
    • +
+
+
+ +
+ + + 氧气含量 + + + 二氧化硫 + + + 一氧化氮 + + + 二氧化氮 + + + + + + 日 + + + 周 + + + 月 + + + 年 + + +
+ +
+ ); +}; + +export default SmokeTrendChart; diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css new file mode 100644 index 0000000..1b915ba --- /dev/null +++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css @@ -0,0 +1,87 @@ +.EnergyCostChart { + margin-top: 12px; + height: 1px; + flex: 1; + padding-top: 8px; + background: #ae27276a; +} +.EnergyCostChart .titleBar { + display: flex; + justify-content: space-between; + align-items: center; + color: white; +} +.EnergyCostChart .titleBar h2 { + margin: 0; + font-size: 18px; + line-height: 32px; + letter-spacing: 1.2px; + color: #52fff8; +} + +.EnergyCostChart .titleBar .legend { + display: flex; + align-items: center; +} +.EnergyCostChart .titleBar .legend * { + font-size: 14px; + line-height: 14px; + color: #dff1fe; +} + +.EnergyCostChart .titleBar .legend ul { + display: flex; + margin: 0; + margin-left: 8px; + padding: 0; + list-style: none; + align-items: center; +} +.EnergyCostChart .titleBar .legend ul li { + position: relative; + margin: 4px; + padding-left: 16px; +} +.EnergyCostChart .titleBar .legend ul li::before { + content: ''; + position: absolute; + left: 2px; + top: 2px; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; +} + +.EnergyCostChart .titleBar .legend ul li:first-child::before { + background-color: #ffd160; +} + +.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before { + background-color: #12fff5; +} + +.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before { + background-color: #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; +} + +.radioGroup_button_wrapper.ant-radio-button-wrapper-checked { + background: #02457e !important; +} diff --git a/src/components/RightBar/SmokeHandle/index.jsx b/src/components/RightBar/SmokeHandle/index.jsx new file mode 100644 index 0000000..60bb971 --- /dev/null +++ b/src/components/RightBar/SmokeHandle/index.jsx @@ -0,0 +1,23 @@ +import cls from './index.module.less'; +import Container from '../../Container'; +import TechSplitline from '../TechSplitline'; +import SmokeTrendChart from './SmokeTrendChart'; + +function SmokeHandle(props) { + return ( + +
+
氧 气 含 量 : 72%
+
一氧化氮排放浓度:59mg/m³
+
二氧化硫排放浓度:59mg/m³
+
二氧化氮排放浓度:59mg/m³
+
+ + + + + + ); +} + +export default SmokeHandle; diff --git a/src/components/RightBar/SmokeHandle/index.module.less b/src/components/RightBar/SmokeHandle/index.module.less new file mode 100644 index 0000000..c2172cc --- /dev/null +++ b/src/components/RightBar/SmokeHandle/index.module.less @@ -0,0 +1,27 @@ +.energyCost { + background: #b730305c; +} + +.cost__info { + margin-bottom: 12px; +} + +.info__item { + border-radius: 2px; + color: hsl(0, 0%, 100%, 0.9); + box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); + // width: 288px; + height: 43px; + font-size: 20px; + letter-spacing: 1.43px; + line-height: 40px; + text-align: center; + user-select: none; +} + +.info__item_groups { + margin-left: 8px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} diff --git a/src/components/RightBar/EnergyCost/TechSplitline/index.jsx b/src/components/RightBar/TechSplitline/index.jsx similarity index 100% rename from src/components/RightBar/EnergyCost/TechSplitline/index.jsx rename to src/components/RightBar/TechSplitline/index.jsx diff --git a/src/components/RightBar/EnergyCost/TechSplitline/index.module.less b/src/components/RightBar/TechSplitline/index.module.less similarity index 100% rename from src/components/RightBar/EnergyCost/TechSplitline/index.module.less rename to src/components/RightBar/TechSplitline/index.module.less diff --git a/src/pages/global.less b/src/pages/global.less index 64ad7ed..e690b77 100644 --- a/src/pages/global.less +++ b/src/pages/global.less @@ -1,31 +1,35 @@ .flex { - display: flex; + display: flex; } .flex-col { - flex-direction: column; + flex-direction: column; } .justify-between { - justify-content: space-between; + justify-content: space-between; } .justify-start { - justify-content: start; + justify-content: start; } .justify-start { - justify-content: center; + justify-content: center; +} + +.items-center { + align-items: center; } .w-full { - width: 100%; + width: 100%; } .h-full { - height: 100%; + height: 100%; } .h-half { - height: 50%; -} \ No newline at end of file + height: 50%; +}