From 45c3edcd48551e31faf6fd48ff82f05082510b0c Mon Sep 17 00:00:00 2001 From: lb Date: Sat, 1 Jul 2023 10:59:38 +0800 Subject: [PATCH] update good rate part --- src/assets/Icon/icon-good.png | Bin 0 -> 745 bytes src/components/Container.jsx | 46 +++++++------ src/components/LeftBar/GoodProduction.jsx | 19 +++++- src/components/LeftBar/Kiln.jsx | 2 +- src/components/LeftBar/good.module.less | 9 +++ .../GoodRateChart/index.jsx | 7 ++ .../GoodRateChart/index.module.less | 0 .../TechSplitline/index.jsx | 7 ++ .../TechSplitline/index.module.less | 5 ++ .../TodayTableData/index.jsx | 7 ++ .../TodayTableData/index.module.less | 0 src/components/container.module.less | 63 ++++++++++-------- 12 files changed, 114 insertions(+), 51 deletions(-) create mode 100644 src/assets/Icon/icon-good.png create mode 100644 src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx create mode 100644 src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less create mode 100644 src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx create mode 100644 src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less create mode 100644 src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx create mode 100644 src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less diff --git a/src/assets/Icon/icon-good.png b/src/assets/Icon/icon-good.png new file mode 100644 index 0000000000000000000000000000000000000000..36b78e1ac7caa12bbf813b460fdd0a2ccbeb9bd3 GIT binary patch literal 745 zcmVPx%qe(Z2^%A&2@7H%*n$sGh!iBq%pB8N6iVsC=+3j8d(QcN^PPL= z4)KqJx%6)xjvfG|S%6vqiy&U;yZAWha4cu5-xAOE&x{n z?9H)hx-*MGZq;Q)H|HN00~Iw-C;n*{q_Q=$hWfq zLUIs5&yvmlpuf5__6yKF61kv&V+vZ|{<`weSSWIuO0@}a86w*=!iWhm#iuOxo`XmB zOpb-8&O+o26#D~pj+Z|z3Ps)nC{HvZ!w~7#XuS_$$xwQu7-k#5Q-D|!IU)-}20^X6 zx2}B9^Jc0_)1(7}b^w)0K@$O&vuX|S6~N9ErK>_bBXMuX_nD{51;r(zY&E)xW&4~y zVm)M2vDsA*z)lgI;O1@oIpA`ZW&*6^aYh8Udfg6x{9$V-dQ%{`(}-HHF&{v}JKeNM zHK18(=%Z;Ar;aLL03eE9Wf&By_(c`*U-j((^yb-fP~-{)IL&Tk+xq*HlunV zcw!p#neNKxLDJYHDx2?3BavD~dSRMM*J53TvxRD<#Bzg5eX(0@eRq@J{jK`s^jDEh bM5gs0UZ^W58$Q=<00000NkvXXu0mjf4meD^ literal 0 HcmV?d00001 diff --git a/src/components/Container.jsx b/src/components/Container.jsx index 0426cdf..fb2cf25 100644 --- a/src/components/Container.jsx +++ b/src/components/Container.jsx @@ -1,23 +1,31 @@ -import cls from './container.module.less' +import { useEffect, useRef } from 'react'; -import IconStack from '../assets/Icon/icon-stack.png' +import cls from './container.module.less'; -const Container = props => { - let icon = null - switch (props.icon){ - case 'kiln': - icon = IconStack - } +import IconStack from '../assets/Icon/icon-stack.png'; +import IconGood from '../assets/Icon/icon-good.png'; - return
-
- # -

{props.title}

-
-
- {props.children} -
- -} +const Container = (props) => { + let icon = useRef(null); -export default Container \ No newline at end of file + switch (props.icon) { + case 'kiln': + icon.current = IconStack; + break; + case 'good': // 良品率 + icon.current = IconGood; + break; + } + + return ( +
+
+ # +

{props.title}

+
+
{props.children}
+
+ ); +}; + +export default Container; diff --git a/src/components/LeftBar/GoodProduction.jsx b/src/components/LeftBar/GoodProduction.jsx index d0f0c61..625aac2 100644 --- a/src/components/LeftBar/GoodProduction.jsx +++ b/src/components/LeftBar/GoodProduction.jsx @@ -1,6 +1,19 @@ +import cls from './good.module.less'; +import Container from '../Container'; +import TodayTableData from './substitutionCharts/TodayTableData'; +import GoodRateChart from './substitutionCharts/GoodRateChart'; +import TechSplitline from './substitutionCharts/TechSplitline'; const GoodProduction = () => { - return
-} + return ( + +
+ + + +
+ + ); +}; -export default GoodProduction; \ No newline at end of file +export default GoodProduction; diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx index fc0e9c6..7153db8 100644 --- a/src/components/LeftBar/Kiln.jsx +++ b/src/components/LeftBar/Kiln.jsx @@ -52,7 +52,7 @@ export default function Kiln() {
{infos.map((item) => ( -
+
{item.label}: {item.value}
))} diff --git a/src/components/LeftBar/good.module.less b/src/components/LeftBar/good.module.less index e69de29..f56adbc 100644 --- a/src/components/LeftBar/good.module.less +++ b/src/components/LeftBar/good.module.less @@ -0,0 +1,9 @@ +.goodProd { + background: url(../../assets/good.png) no-repeat, #9f84; + background-size: 100% 100%; + width: 625px; + // height: 626px; + flex: 1; + height: 1px; + margin-top: 24px; +} diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx new file mode 100644 index 0000000..5bc614b --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx @@ -0,0 +1,7 @@ +import cls from './index.module.less'; + +const GoodRateChart = (props) => { + return
good rate chart
; +}; + +export default GoodRateChart; diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx b/src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx new file mode 100644 index 0000000..fe9e623 --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx @@ -0,0 +1,7 @@ +import cls from './index.module.less'; + +const TechSplitline = (props) => { + return
; +}; + +export default TechSplitline; diff --git a/src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less b/src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less new file mode 100644 index 0000000..38f1cd0 --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less @@ -0,0 +1,5 @@ +.techSplitline { + height: 2px; + width: 100%; + background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent); +} diff --git a/src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx b/src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx new file mode 100644 index 0000000..ab36061 --- /dev/null +++ b/src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx @@ -0,0 +1,7 @@ +import cls from './index.module.less'; + +const TodayTableData = (props) => { + return
today table data
; +}; + +export default TodayTableData; diff --git a/src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less b/src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/container.module.less b/src/components/container.module.less index 917d028..31c8349 100644 --- a/src/components/container.module.less +++ b/src/components/container.module.less @@ -1,49 +1,56 @@ .container { - padding: 24px; - display: flex; - flex-direction: column; - background-size: 100% 100%; - background-repeat: no-repeat; + padding: 24px; + display: flex; + flex-direction: column; + background-size: 100% 100%; + background-repeat: no-repeat; - .container__head { - display: flex; - align-items: center; + .container__head { + display: flex; + align-items: center; - h2 { - font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", - "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", - "WenQuanYi Micro Hei", sans-serif; - margin: 0; - margin-left: 6px; - font-size: 18px; - color: #fff; - letter-spacing: 2px; - font-weight: 500; - } - } + h2 { + font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system, + BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', + 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', + sans-serif; + margin: 0; + margin-left: 6px; + font-size: 18px; + color: #fff; + letter-spacing: 2px; + font-weight: 500; + } + } + + .container__content { + height: 1px; + flex: 1; + background: #25a78672; + } } .bgKiln { - background: url(''); + background: url(''); } .bgGood { - background: url('../assets/good.png'); + background: url('../assets/good.png'); } .bgFaultTotal { - background: url(''); + background: url(''); } .bgFaultType { - background: url(''); + background: url(''); } .bgGas { - background: url(''); + background: url(''); } .bgWind { - background: url(''); + background: url(''); } .bgEnergy { - background: url('../assets/energy.png'); + background: url('../assets/energy.png'); } .bgSmoke { - background: url('../assets/smoke.png'); + background: url('../assets/smoke.png'); }