From 5f344d3344617c756ecf654bfff5a61fb758ad78 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 30 Jun 2023 14:48:11 +0800 Subject: [PATCH] update boxes --- .../CenterTopData/LeftBoxes/index.jsx | 35 ++++++++ .../LeftBoxes/leftbox.module.less | 33 +++++++ .../Chart1.jsx => RightTable/index.jsx} | 2 +- .../righttable.module.less} | 0 src/components/CenterTopData/index.jsx | 4 +- .../CenterTopData/index.module.less | 2 +- .../substitutionCharts/Chart2.jsx | 89 ------------------- .../substitutionCharts/Chart2.less | 53 ----------- src/components/Head/index.less | 1 - src/pages/global.less | 15 ++++ 10 files changed, 87 insertions(+), 147 deletions(-) create mode 100644 src/components/CenterTopData/LeftBoxes/index.jsx create mode 100644 src/components/CenterTopData/LeftBoxes/leftbox.module.less rename src/components/CenterTopData/{substitutionCharts/Chart1.jsx => RightTable/index.jsx} (98%) rename src/components/CenterTopData/{substitutionCharts/Chart1.less => RightTable/righttable.module.less} (100%) delete mode 100644 src/components/CenterTopData/substitutionCharts/Chart2.jsx delete mode 100644 src/components/CenterTopData/substitutionCharts/Chart2.less diff --git a/src/components/CenterTopData/LeftBoxes/index.jsx b/src/components/CenterTopData/LeftBoxes/index.jsx new file mode 100644 index 0000000..3d82a54 --- /dev/null +++ b/src/components/CenterTopData/LeftBoxes/index.jsx @@ -0,0 +1,35 @@ + +import React, { useState } from 'react' + +import icon1 from '@/assets/CenterChart2icon1.svg' +import icon2 from '@/assets/CenterChart2icon2.svg' +import icon3 from '@/assets/CenterChart2icon3.svg' +import icon4 from '@/assets/CenterChart2icon4.svg' + +import cls from './leftbox.module.less' + +const Chart2 = () => { + + const [data, setData] = useState([ + { icon: icon1, label: '换火时间', value: '12:08:34' }, + { icon: icon3, label: '剩余时间', value: '11h' }, + { icon: icon2, label: '当前火向', value: '南向' }, + // { icon: icon4, label: '车间温度', value: '28℃' }, + ]) + + return ( +
+ {data.map(item => +
+ Error +
+

{item.label}

+

{item.value}

+
+
+ )} +
+ ); +} + +export default Chart2; diff --git a/src/components/CenterTopData/LeftBoxes/leftbox.module.less b/src/components/CenterTopData/LeftBoxes/leftbox.module.less new file mode 100644 index 0000000..6db3dd8 --- /dev/null +++ b/src/components/CenterTopData/LeftBoxes/leftbox.module.less @@ -0,0 +1,33 @@ +.leftbox { + // width: 440px; + // background: rgb(127, 202, 42); + + .box { + margin-right: 16px; + width: 200px; + padding: 8px; + background: url(../../../assets/CenterChart2ItemBg.png); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: flex-start; + user-select: none; + + .box__inner { + padding-top: 12px; + + .box__label { + color: #fffa; + font-size: 18px; + line-height: 14px; + } + + .box__value { + color: #fff; + font-weight: 400; + font-size: 30px; + line-height: 34px; + } + } + } +} diff --git a/src/components/CenterTopData/substitutionCharts/Chart1.jsx b/src/components/CenterTopData/RightTable/index.jsx similarity index 98% rename from src/components/CenterTopData/substitutionCharts/Chart1.jsx rename to src/components/CenterTopData/RightTable/index.jsx index 0a94a18..43086bf 100644 --- a/src/components/CenterTopData/substitutionCharts/Chart1.jsx +++ b/src/components/CenterTopData/RightTable/index.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import './Chart1.less' +import './righttable.module.less' import { ScrollBoard } from '@jiaminghi/data-view-react' diff --git a/src/components/CenterTopData/substitutionCharts/Chart1.less b/src/components/CenterTopData/RightTable/righttable.module.less similarity index 100% rename from src/components/CenterTopData/substitutionCharts/Chart1.less rename to src/components/CenterTopData/RightTable/righttable.module.less diff --git a/src/components/CenterTopData/index.jsx b/src/components/CenterTopData/index.jsx index 805b3c9..a7fa5a1 100644 --- a/src/components/CenterTopData/index.jsx +++ b/src/components/CenterTopData/index.jsx @@ -1,7 +1,7 @@ import React from 'react' -import Item2 from './substitutionCharts/Chart1.jsx' -import Item1 from './substitutionCharts/Chart2.jsx' +import Item2 from './RightTable' +import Item1 from './LeftBoxes' import cls from './index.module.less' diff --git a/src/components/CenterTopData/index.module.less b/src/components/CenterTopData/index.module.less index 9cd80d2..d54c449 100644 --- a/src/components/CenterTopData/index.module.less +++ b/src/components/CenterTopData/index.module.less @@ -1,5 +1,5 @@ .leftGrid { - width: 416px; + // width: 416px; height: 212px; } .rightTable { diff --git a/src/components/CenterTopData/substitutionCharts/Chart2.jsx b/src/components/CenterTopData/substitutionCharts/Chart2.jsx deleted file mode 100644 index 298b84f..0000000 --- a/src/components/CenterTopData/substitutionCharts/Chart2.jsx +++ /dev/null @@ -1,89 +0,0 @@ - -import React, { useEffect, useState, useRef } from 'react' - -import icon1 from '@/assets/CenterChart2icon1.svg' -import icon2 from '@/assets/CenterChart2icon2.svg' -import icon3 from '@/assets/CenterChart2icon3.svg' -import icon4 from '@/assets/CenterChart2icon4.svg' - - -import './Chart2.less' - - -const Chart2 = () => { - - const timmer = useRef(); - const [year, setYear] = useState('') - const [month, setMonth] = useState('') - const [day, setDay] = useState('') - - - const getNewDate = () => { - const Time = new Date(); - const year = Time.getFullYear(); - const month = Time.getMonth() + 1; - const day = Time.getDate(); - - - setYear(year); - setMonth(month); - setDay(day); - - } - - - useEffect(() => { - getNewDate(); - timmer.current = setInterval(getNewDate, 10000); - return () => { - clearTimeout(timmer.current) - } - //eslint-disable-next-line - }, []) - - - - - - return ( -
- -
-
- Error -
-

车间温度

-

27℃

-
-
-
- Error -
-

当前火向

-

XXX

-
-
-
-
-
- Error -
-

换火时间

-

12:41:45

-
-
-
- Error -
-

剩余时间

-

20h

-
-
-
- - -
- ); -} - -export default Chart2; diff --git a/src/components/CenterTopData/substitutionCharts/Chart2.less b/src/components/CenterTopData/substitutionCharts/Chart2.less deleted file mode 100644 index cd50ae4..0000000 --- a/src/components/CenterTopData/substitutionCharts/Chart2.less +++ /dev/null @@ -1,53 +0,0 @@ -.CenterChart2itemDetailBorder { - width: 440px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: start; - - .CenterChart2itemcontentOUT { - width: 100%; - height: 50%; - display: flex; - flex-direction: row; - justify-content: center; - - .CenterChart2itemcontent { - width: 224px; - height: 95%; - background: url(../../../assets/CenterChart2ItemBg.png); - background-repeat: no-repeat; - display: flex; - flex-direction: row; - justify-content: left; - margin-top: 3%; - margin-left: 2%; - - .CenterChart2itemcontentIcon { - margin-top: 2%; - width: 48px; - height: 48px; - margin-left: 5%; - } - - .CenterChart2itemcontentText { - width: 50%; - height: 70%; - margin-left: -2%; - - .CenterChart2itemcontentText1 { - color: rgba(224, 222, 222, 0.8); - font-size: 15px; - margin-top: 10%; - } - - .CenterChart2itemcontentText2 { - color: rgb(255, 255, 255); - font-size: 34px; - margin-top: -10%; - margin-left: -3%; - } - } - } - } -} diff --git a/src/components/Head/index.less b/src/components/Head/index.less index fbc2e9f..3b520cb 100644 --- a/src/components/Head/index.less +++ b/src/components/Head/index.less @@ -4,7 +4,6 @@ display: flex; flex-direction: row; justify-content: space-between; - background: #17b2747a; .TopSideRight { margin-top: 40px; diff --git a/src/pages/global.less b/src/pages/global.less index f975f5a..64ad7ed 100644 --- a/src/pages/global.less +++ b/src/pages/global.less @@ -2,10 +2,22 @@ display: flex; } +.flex-col { + flex-direction: column; +} + .justify-between { justify-content: space-between; } +.justify-start { + justify-content: start; +} + +.justify-start { + justify-content: center; +} + .w-full { width: 100%; } @@ -14,3 +26,6 @@ height: 100%; } +.h-half { + height: 50%; +} \ No newline at end of file