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 =>
+
+
+
+
{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 (
-
-
-
-
-
-
-
车间温度
- 27℃
-
-
-
-
-
-
当前火向
- XXX
-
-
-
-
-
-
-
-
换火时间
- 12:41:45
-
-
-
-
-
-
剩余时间
- 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