From 5fd0a9b803121e9b223932f7a03c71c8f6984eb4 Mon Sep 17 00:00:00 2001 From: lb Date: Sun, 2 Jul 2023 14:12:20 +0800 Subject: [PATCH] =?UTF-8?q?add=20=E4=BA=A7=E7=BA=BF=E7=BC=BA=E9=99=B7?= =?UTF-8?q?=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Icon/icon-puzzle.png | Bin 0 -> 593 bytes .../BottomBar/BottomBarItem/index.jsx | 2 + .../BottomBar/BottomBarItem/index.module.css | 1 + src/components/BottomBar/FaultTotal/index.jsx | 225 +++++++++++++++++- .../BottomBar/FaultTotal/index.module.css | 36 +++ src/components/BottomBar/gasii/index.jsx | 4 +- src/components/BottomBar/index.jsx | 24 +- src/components/BottomBar/index.module.css | 7 +- src/components/Container.jsx | 9 +- .../GoodRateChart/overwrite.css | 36 ++- .../SmokeHandle/SmokeTrendChart/index.jsx | 2 +- .../RightBar/SmokeHandle/index.module.less | 4 +- src/pages/global.less | 12 + src/pages/index.less | 7 +- 14 files changed, 339 insertions(+), 30 deletions(-) create mode 100644 src/assets/Icon/icon-puzzle.png diff --git a/src/assets/Icon/icon-puzzle.png b/src/assets/Icon/icon-puzzle.png new file mode 100644 index 0000000000000000000000000000000000000000..1fbb6ffb2afff903f4b7fc7a03eb944d48c1ab0d GIT binary patch literal 593 zcmV-X0Px%3rR#lR7gwRl|N`xQ543%^Ik|%T#AKC&7X!MSd1hs6j5+-?I^{h)k#nn2L)Hr zSqE{^F5*ylk?1Baii497A$c*_q6qpz8!KXlVr=4l?~|lR`|_HS=4Ftc@!oU3-+lMI z^IgFXan7{j8u5U@lmMSVUNG!L{u(iK z$~OVt_6o@(BN@Kv8;~lL=LNjv5fZ*I64B|d0W+mia6lVA*j`{a*6#qE^9u2`9^8Mv zeLb*msQNf2>z*E@P3r@Q@orDlIghKVrp2*fRSFrTQ!1L0BS;fb{yQzOh#5*gEm|II!HZHt-DpQVXOj0Bwkjo%_{IaqD@D~Zo4$8yqvGC8PRjdIx(1#QMpH@+& z$Stw$oal0dl;#68+UaX|Wp)H=9MC47jE6q{6Wka?tq3x-9b{Jk2<{n)$TiO(7Rpxv z-uDjxuNcYbe7jI8|7BW4d)__3EWZJH+Vx0?tT~!~CUbn`od>X38I`)q0UUDei7Y8S fl*q=Vv330~+SBW{n5|x600000NkvXXu0mjfTelIP literal 0 HcmV?d00001 diff --git a/src/components/BottomBar/BottomBarItem/index.jsx b/src/components/BottomBar/BottomBarItem/index.jsx index c321033..0831ec1 100644 --- a/src/components/BottomBar/BottomBarItem/index.jsx +++ b/src/components/BottomBar/BottomBarItem/index.jsx @@ -12,3 +12,5 @@ function BottomBarItem(props) { ); } + +export default BottomBarItem; diff --git a/src/components/BottomBar/BottomBarItem/index.module.css b/src/components/BottomBar/BottomBarItem/index.module.css index 24de92e..eb128cc 100644 --- a/src/components/BottomBar/BottomBarItem/index.module.css +++ b/src/components/BottomBar/BottomBarItem/index.module.css @@ -1,4 +1,5 @@ .bottomBarItem { background: url(../../../assets/bg-bottom-item.png) no-repeat; background-size: 100% 100%; + width: 600px; } \ No newline at end of file diff --git a/src/components/BottomBar/FaultTotal/index.jsx b/src/components/BottomBar/FaultTotal/index.jsx index f6dccc7..35d03ea 100644 --- a/src/components/BottomBar/FaultTotal/index.jsx +++ b/src/components/BottomBar/FaultTotal/index.jsx @@ -1,10 +1,233 @@ import cls from './index.module.css'; 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 FaultTotal(props) { + const options = { + color: [ + '#2760FF', + '#5B9BFF', + '#FFD160', + '#8167F6', + '#99D66C', + '#FF8A40', + '#12FFF5', + ], + grid: { top: 42, right: 12, bottom: 20, left: 48 }, + legend: { + top: 10, + padding: 5, + itemWidth: 12, + itemHeight: 12, + itemGap: 12, + height: 12, + textStyle: { + color: '#DFF1FE', + fontSize: 12, + }, + // data: [ + // { name: '缺陷1', icon: 'roundRect' }, + // { name: '缺陷2', icon: 'roundRect' }, + // { name: '缺陷3', icon: 'roundRect' }, + // { name: '缺陷4', icon: 'roundRect' }, + // { name: '缺陷5', icon: 'roundRect' }, + // { name: '缺陷6', icon: 'roundRect' }, + // { name: '缺陷8', icon: 'roundRect' }, + // ], + }, + xAxis: { + type: 'category', + data: Array(5) + .fill(1) + .map((_, index) => { + return '产线' + (index + 1); + // const today = new Date(); + // const dtimestamp = today - index * 24 * 60 * 60 * 1000; + // return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + // dtimestamp, + // ).getDate()}`; + }), + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: '#213259', + }, + }, + }, + yAxis: { + name: '单位/个', + 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', + type: 'bar', + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [320, 332, 301, 334, 390, 330, 320], + }, + { + name: '缺陷2', + type: 'bar', + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [120, 132, 101, 134, 90, 230, 210], + }, + { + name: '缺陷3', + type: 'bar', + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [220, 182, 191, 234, 290, 330, 310], + }, + { + name: '缺陷4', + type: 'bar', + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [150, 232, 201, 154, 190, 330, 410], + }, + { + name: '缺陷5', + type: 'bar', + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [862, 1018, 964, 1026, 1679, 1600, 1570], + }, + { + name: '缺陷6', + type: 'bar', + barGap: 20, + barWidth: 12, + stack: 'abcd', + emphasis: { + focus: 'series', + }, + data: [620, 732, 701, 734, 1090, 1130, 1120], + }, + // { + // data: Array(5) + // .fill(1) + // .map((_) => { + // return randomInt(1000, 10000); + // }), + // 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, + // }, + // { + // 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: '#12FFF540' }, + // { offset: 0.5, color: '#12FFF520' }, + // { offset: 1, color: '#12FFF510' }, + // ]), + // }, + // // smooth: true, + // }, + // { + // 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: '#2760FF40' }, + // { offset: 0.5, color: '#2760FF20' }, + // { offset: 1, color: '#2760FF10' }, + // ]), + // }, + // // smooth: true, + // }, + ], + tooltip: { + trigger: 'axis', + }, + }; + return ( - 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 + {/* 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 */} +
+ {/* 日周月年 */} + + + 日 + + + 周 + + + 月 + + + 年 + + +
+
+ +
); } diff --git a/src/components/BottomBar/FaultTotal/index.module.css b/src/components/BottomBar/FaultTotal/index.module.css index e69de29..d1457f9 100644 --- a/src/components/BottomBar/FaultTotal/index.module.css +++ b/src/components/BottomBar/FaultTotal/index.module.css @@ -0,0 +1,36 @@ +.chart { + height: 100%; + /* background-color: #00ee33; */ +} + +.faultTotal { + position: relative; +} + +.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; +} diff --git a/src/components/BottomBar/gasii/index.jsx b/src/components/BottomBar/gasii/index.jsx index d1a5b68..f71cda5 100644 --- a/src/components/BottomBar/gasii/index.jsx +++ b/src/components/BottomBar/gasii/index.jsx @@ -1,7 +1,7 @@ import cls from './index.module.css'; import BottomBarItem from '../BottomBarItem'; -function GasI(props) { +function GasII(props) { return ( 天然气流量 - linechart - 当前流量 - 2 legends - 2 lines @@ -9,4 +9,4 @@ function GasI(props) { ); } -export default GasI; +export default GasII; diff --git a/src/components/BottomBar/index.jsx b/src/components/BottomBar/index.jsx index 1829e1d..2c4422c 100644 --- a/src/components/BottomBar/index.jsx +++ b/src/components/BottomBar/index.jsx @@ -6,19 +6,31 @@ import Chart2 from './Chart2'; import Chart3 from './Chart3'; import Chart4 from './Chart4'; +import GasI from './gasi'; +import GasII from './gasii'; +import FaultTotal from './FaultTotal'; +import FaultType from './FaultType'; + import './index.less'; import cls from './index.module.css'; export default function index() { return ( <> -
- - - - + {false && ( +
+ + + + +
+ )} +
+ + + +
-
); } diff --git a/src/components/BottomBar/index.module.css b/src/components/BottomBar/index.module.css index 569bd3d..257a2ab 100644 --- a/src/components/BottomBar/index.module.css +++ b/src/components/BottomBar/index.module.css @@ -1,3 +1,6 @@ .bottomBar { - background-color: #0004; -} \ No newline at end of file + /* background-color: #3894; */ + width: 100%; + height: 100%; + overflow: visible; +} diff --git a/src/components/Container.jsx b/src/components/Container.jsx index 504bf27..41a1bcd 100644 --- a/src/components/Container.jsx +++ b/src/components/Container.jsx @@ -6,6 +6,9 @@ import IconStack from '../assets/Icon/icon-stack.png'; import IconGood from '../assets/Icon/icon-good.png'; import IconCharger from '../assets/Icon/icon-charge.png'; import IconSmoke from '../assets/Icon/icon-taiji.png'; +import IconChart from '../assets/Icon/icon-chart.png'; +import IconPuzzle from '../assets/Icon/icon-puzzle.png'; +import IconPause from '../assets/Icon/icon-pause.png'; const Container = (props) => { let icon = useRef(null); @@ -24,13 +27,13 @@ const Container = (props) => { icon.current = IconSmoke; break; case 'chart': - icon.current = IconSmoke; + icon.current = IconChart; break; case 'puzzle': - icon.current = IconSmoke; + icon.current = IconPuzzle; break; case 'pause': - icon.current = IconSmoke; + icon.current = IconPause; break; } diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css index c0c3158..871ed04 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css @@ -4,13 +4,13 @@ } .radio-group__item:first-child { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; } .radio-group__item:last-child { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; } .radio-group__item.ant-radio-button-wrapper-checked { @@ -18,11 +18,29 @@ } .ant-switch-checked { - background: #b4fffdb1 !important; + background: #b4fffdb1 !important; } -.ant-switch-checked:focus{ - box-shadow: none !important; +.ant-switch-checked:focus { + box-shadow: none !important; } .ant-switch-checked .ant-switch-handle::before { - background-color: #76FFF9 !important; -} \ No newline at end of file + background-color: #76fff9 !important; +} +/* +.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; +} */ diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx index 132d33d..6046921 100644 --- a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx +++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx @@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
- + ); }; diff --git a/src/components/RightBar/SmokeHandle/index.module.less b/src/components/RightBar/SmokeHandle/index.module.less index fab10cc..f4e37e1 100644 --- a/src/components/RightBar/SmokeHandle/index.module.less +++ b/src/components/RightBar/SmokeHandle/index.module.less @@ -14,10 +14,10 @@ color: hsl(0, 0%, 100%, 0.9); box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); // width: 288px; - height: 43px; + height: 56px; font-size: 20px; letter-spacing: 1.43px; - line-height: 40px; + line-height: 56px; text-align: center; user-select: none; } diff --git a/src/pages/global.less b/src/pages/global.less index 1d072eb..c2c6c8c 100644 --- a/src/pages/global.less +++ b/src/pages/global.less @@ -26,6 +26,10 @@ justify-content: center; } +.justify-around { + justify-content: space-around; +} + .items-center { align-items: center; } @@ -49,3 +53,11 @@ .h-auto { height: auto; } + +.relative { + position: relative; +} + +.absolute { + position: absolute; +} diff --git a/src/pages/index.less b/src/pages/index.less index 7958fa5..9479e03 100644 --- a/src/pages/index.less +++ b/src/pages/index.less @@ -12,9 +12,7 @@ flex-direction: row; .Center { - margin-top: 21px; - margin-left: 24px; - padding: 1px; + margin: 22px; width: 2472px; height: 940px; @@ -28,8 +26,9 @@ .V3DBG { position: absolute; width: 2472px; - height: 642px; + height: 640px; z-index: 1; + box-shadow: inset 0 0 128px 64px #0a2859; } .V3DBorder {