From cbcb5b9877a4ae721b630e7608f991fcb14752be Mon Sep 17 00:00:00 2001 From: lb Date: Sat, 1 Jul 2023 15:38:22 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E7=94=9F=E4=BA=A7=E8=89=AF=E5=93=81?= =?UTF-8?q?=E7=8E=87=EF=BC=8C=E8=A6=86=E5=86=99antd=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=9A=84=E6=96=B9=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GoodRateChart/index.jsx | 67 +++++++++++++- .../GoodRateChart/index.module.css | 86 ++++++++++++++++++ .../GoodRateChart/index.module.less | 89 +++++++++++++++++++ .../GoodRateChart/overwrite.css | 28 ++++++ src/components/RadioGroup.jsx | 5 ++ src/components/radio.group.module.less | 0 6 files changed, 273 insertions(+), 2 deletions(-) create mode 100644 src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css create mode 100644 src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css create mode 100644 src/components/RadioGroup.jsx create mode 100644 src/components/radio.group.module.less diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx index 5bc614b..77ba562 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx @@ -1,7 +1,70 @@ -import cls from './index.module.less'; +import cls from './index.module.css'; +import './overwrite.css'; // 覆写 antd 默认样式，全局 +import ReactECharts from 'echarts-for-react'; +import { Switch, Radio } from 'antd'; const GoodRateChart = (props) => { - return
good rate chart
; + const options = { + grid: { top: 28, right: 12, bottom: 20, left: 48 }, + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [820, 932, 901, 934, 1290, 1330, 1320], + type: 'line', + smooth: true, + }, + ], + tooltip: { + trigger: 'axis', + }, + }; + + function handleSwitchChange(val) { + // val: boolean + console.log('switch change', val); + } + + return ( +
+
+

生产良品率

+ +
+ 班次详情 +
    +
  • 总量
    • +
  • 白班
    • +
  • 夜班
    • +
+
+ + + 日 + + + 周 + + + 月 + + + 年 + + +
+ +
+ ); }; export default GoodRateChart; diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css new file mode 100644 index 0000000..c80ea2f --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css @@ -0,0 +1,86 @@ +.GoodRateChart { + height: 1px; + flex: 1; + padding-top: 8px; + background: #ae27276a; +} +.GoodRateChart .titleBar { + display: flex; + justify-content: space-between; + align-items: center; + color: white; +} +.GoodRateChart .titleBar h2 { + margin: 0; + font-size: 20px; + line-height: 32px; + letter-spacing: 1.2px; + color: #52fff8; +} + +.GoodRateChart .titleBar .legend { + display: flex; + align-items: center; +} +.GoodRateChart .titleBar .legend * { + font-size: 14px; + line-height: 14px; + color: #dff1fe; +} + +.GoodRateChart .titleBar .legend ul { + display: flex; + margin: 0; + margin-left: 8px; + padding: 0; + list-style: none; + align-items: center; +} +.GoodRateChart .titleBar .legend ul li { + position: relative; + margin: 4px; + padding-left: 16px; +} +.GoodRateChart .titleBar .legend ul li::before { + content: ''; + position: absolute; + left: 2px; + top: 2px; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; +} + +.GoodRateChart .titleBar .legend ul li:first-child::before { + background-color: #ffd160; +} + +.GoodRateChart .titleBar .legend ul li:nth-child(2)::before { + background-color: #12fff5; +} + +.GoodRateChart .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/LeftBar/substitutionCharts/GoodRateChart/index.module.less b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less index 0fcd823..c3003b1 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less @@ -1,4 +1,93 @@ .GoodRateChart { height: 1px; flex: 1; + padding-top: 8px; + background: #ae27276a; + + .titleBar { + display: flex; + justify-content: space-between; + align-items: center; + background: #0003; + color: white; + + h2 { + margin: 0; + font-size: 20px; + line-height: 32px; + letter-spacing: 1.2px; + color: #52fff8; + } + + .legend { + display: flex; + align-items: center; + + * { + font-size: 14px; + line-height: 14px; + color: #dff1fe; + } + + ul { + display: flex; + margin: 0; + margin-left: 8px; + padding: 0; + list-style: none; + align-items: center; + + li { + position: relative; + margin: 4px; + padding-left: 16px; + + &::before { + content: ''; + position: absolute; + left: 2px; + top: 2px; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; + } + + &:first-child::before { + background-color: #ffd160; + } + + &:nth-child(2)::before { + background-color: #12fff5; + } + + &:nth-child(3)::before { + background-color: #2760ff; + } + } + } + } + } +} + +.radioGroup { + // border: 2px solid red; + + * { + border: none !important; + border-radius: 0 !important; + + &:focus-within { + box-shadow: none !important; + } + + &::before { + width: 0 !important; + } + } + + .radioGroup_button_wrapper { + color: #fff !important; + background: #03233c !important; + } } diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css new file mode 100644 index 0000000..c0c3158 --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css @@ -0,0 +1,28 @@ +.radio-group__item { + color: #fff !important; + background: #03233c !important; +} + +.radio-group__item:first-child { + 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; +} + +.radio-group__item.ant-radio-button-wrapper-checked { + background: #02457e !important; +} + +.ant-switch-checked { + background: #b4fffdb1 !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 diff --git a/src/components/RadioGroup.jsx b/src/components/RadioGroup.jsx new file mode 100644 index 0000000..7128645 --- /dev/null +++ b/src/components/RadioGroup.jsx @@ -0,0 +1,5 @@ +import cls from './radio.group.module.less'; + +function RadioGroup(props) { + return
; +} diff --git a/src/components/radio.group.module.less b/src/components/radio.group.module.less new file mode 100644 index 0000000..e69de29